editor UI for better experience :))

src/app/editor/[id]/page.tsx

@@ -20,6 +20,7 @@ import { searchGeometriesByEntityName, type EntityGeometriesSearchItem, type Ent
 import type { EntitySnapshot } from "@/uhm/types/entities";
 import {
     Feature,
+    FeatureCollection,
     Geometry,
     useEditorState,
 } from "@/uhm/lib/editor/state/useEditorState";
@@ -93,6 +94,10 @@ export default function Page() {
     const entityFormStatusTimeoutRef = useRef<number | null>(null);
     const geoBindingStatusTimeoutRef = useRef<number | null>(null);
     const [geoBindingStatus, setGeoBindingStatus] = useState<string | null>(null);
+    const [geometryFocusRequest, setGeometryFocusRequest] = useState<{
+        key: number;
+        collection: FeatureCollection;
+    } | null>(null);
     const lastSelectedFeatureIdRef = useRef<string | null>(null);
 
     const {
@@ -279,17 +284,26 @@ export default function Page() {
     const selectedFeature = selectedFeatures.length > 0 && isMultiEditValid ? selectedFeatures[0] : null;
 
     const geometryChoices = useMemo(() => {
+        const createdGeometryIds = new Set<string>();
+        for (const [id, change] of editor.changes.entries()) {
+            if (change.action === "create") createdGeometryIds.add(String(id));
+        }
+
         const rows = (editor.draft.features || [])
             .filter((f) => f && f.properties && (typeof f.properties.id === "string" || typeof f.properties.id === "number"))
             .map((f) => {
                 const id = String(f.properties.id);
                 const semantic = String(f.properties.type || getDefaultTypeIdForFeature(f) || "").trim();
                 const label = semantic.length ? `${semantic} (${f.geometry.type})` : f.geometry.type;
-                return { id, label };
+                return {
+                    id,
+                    label,
+                    isNew: createdGeometryIds.has(id) || !editor.hasPersistedFeature(f.properties.id),
+                };
             });
         rows.sort((a, b) => a.id.localeCompare(b.id));
         return rows;
-    }, [editor.draft.features]);
+    }, [editor]);
 
     const selectedGeometryBindingIds = useMemo(() => {
         if (!selectedFeature) return [];
@@ -985,6 +999,40 @@ export default function Page() {
         setIsEntitySubmitting,
     ]);
 
+    const handleFocusGeometryFromBindingPanel = useCallback((geoId: string) => {
+        const id = String(geoId || "").trim();
+        if (!id) return;
+
+        const feature = editor.draft.features.find((item) => String(item.properties.id) === id) || null;
+        if (!feature) {
+            flashGeoBindingStatus("Không tìm thấy geometry để zoom.");
+            return;
+        }
+
+        const visibleInCurrentTimeline = timelineVisibleDraft.features.some(
+            (item) => String(item.properties.id) === id
+        );
+        if (timelineFilterEnabled && !visibleInCurrentTimeline) {
+            setTimelineFilterEnabled(false);
+        }
+
+        setSelectedFeatureIds([feature.properties.id]);
+        setGeometryFocusRequest((prev) => ({
+            key: (prev?.key ?? 0) + 1,
+            collection: {
+                type: "FeatureCollection",
+                features: [feature],
+            },
+        }));
+    }, [
+        editor.draft.features,
+        flashGeoBindingStatus,
+        setSelectedFeatureIds,
+        setTimelineFilterEnabled,
+        timelineFilterEnabled,
+        timelineVisibleDraft.features,
+    ]);
+
     const handleAddWikiRefToProject = useCallback((wiki: Wiki) => {
         const id = String(wiki.id || "").trim();
         if (!id) return;
@@ -1245,6 +1293,9 @@ export default function Page() {
                             backgroundVisibility={backgroundVisibility}
                             geometryVisibility={geometryVisibility}
                             respectBindingFilter={geometryBindingFilterEnabled}
+                            focusFeatureCollection={geometryFocusRequest?.collection || null}
+                            focusRequestKey={geometryFocusRequest?.key ?? null}
+                            focusPadding={96}
                         />
                     ) : (
                         <div style={{ width: "100%", height: "100%", background: "#0b1220" }} />
@@ -1513,6 +1564,7 @@ export default function Page() {
                             selectedGeometryId={selectedFeature ? String(selectedFeature.properties.id) : null}
                             selectedGeometryBindingIds={selectedGeometryBindingIds}
                             onToggleBindGeometryForSelectedGeometry={handleToggleBindGeometryForSelectedGeometry}
+                            onFocusGeometry={handleFocusGeometryFromBindingPanel}
                             statusText={geoBindingStatus}
                             bindingFilterEnabled={geometryBindingFilterEnabled}
                             onBindingFilterEnabledChange={setGeometryBindingFilterEnabled}

src/app/user/about-us/page.tsx

@@ -27,7 +27,7 @@ export default function LandingPage() {
     {
       name: "Trần Anh Đức",
       role: "Project Manager",
-      desc: "Đẹp trai cao m8",
+      desc: "Fan cứng anh Lại Ngứa Chân",
       avatar: "/images/teamdev/tad.jpeg",
     },
     {

src/uhm/components/editor/EntityWikiBindingsPanel.tsx

@@ -1,12 +1,11 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
-import type { Entity } from "@/uhm/types/entities";
 import type { WikiSnapshot } from "@/uhm/types/wiki";
 import type { EntityWikiLinkSnapshot } from "@/uhm/types/projects";
 
 type EntityChoice = { id: string; name: string };
-type WikiChoice = { id: string; title: string; operation?: string };
+type WikiChoice = { id: string; title: string };
 
 type Props = {
   entities: EntityChoice[];
@@ -29,7 +28,7 @@ export default function EntityWikiBindingsPanel({ entities, wikis, links, setLin
     () =>
       (wikis || [])
         .filter((w) => w && typeof w.id === "string" && w.id.trim().length > 0)
-        .map((w) => ({ id: w.id, title: wikiTitle(w), operation: w.operation })),
+        .map((w) => ({ id: w.id, title: wikiTitle(w) })),
     [wikis]
   );
 
@@ -39,17 +38,6 @@ export default function EntityWikiBindingsPanel({ entities, wikis, links, setLin
     return cleaned;
   }, [entities]);
 
-  // Don't auto-select entity. The user must explicitly pick one.
-  // Only clear the selection if the currently selected entity is no longer available.
-  useEffect(() => {
-    if (!activeEntityId) return;
-    const stillExists = entityChoices.some((e) => e.id === activeEntityId);
-    if (!stillExists) {
-      setActiveEntityId("");
-      setActiveWikiId("");
-    }
-  }, [activeEntityId, entityChoices]);
-
   const activeLinks = useMemo(() => {
     const set = new Set<string>();
     for (const l of links || []) {
@@ -144,6 +132,12 @@ export default function EntityWikiBindingsPanel({ entities, wikis, links, setLin
               </option>
             ))}
           </select>
+          {activeEntityId ? (
+            <ActiveSelectionLabel
+              label={entityChoices.find((e) => e.id === activeEntityId)?.name || activeEntityId}
+              id={activeEntityId}
+            />
+          ) : null}
         </div>
 
         <div>
@@ -175,6 +169,12 @@ export default function EntityWikiBindingsPanel({ entities, wikis, links, setLin
                 </option>
               ))}
             </select>
+            {activeWikiChoice ? (
+              <ActiveSelectionLabel
+                label={activeWikiChoice.title}
+                id={activeWikiChoice.id}
+              />
+            ) : null}
 
             {wikiChoices.length === 0 ? (
               <div style={{ fontSize: "12px", color: "#94a3b8" }}>No wiki in project yet.</div>
@@ -228,17 +228,19 @@ export default function EntityWikiBindingsPanel({ entities, wikis, links, setLin
                           title={id}
                         >
                           <div style={{ minWidth: 0 }}>
-                            <div
+                            <div style={{ display: "flex", alignItems: "center", gap: 6, minWidth: 0 }}>
-                              style={{
+                              <span
-                                color: "#e5e7eb",
+                                style={{
-                                fontSize: 12,
+                                  color: "#e5e7eb",
-                                whiteSpace: "nowrap",
+                                  fontSize: 12,
-                                overflow: "hidden",
+                                  whiteSpace: "nowrap",
-                                textOverflow: "ellipsis",
+                                  overflow: "hidden",
-                                fontWeight: 700,
+                                  textOverflow: "ellipsis",
-                              }}
+                                  fontWeight: 700,
-                            >
+                                }}
-                              {w?.title || "Untitled wiki"}
+                              >
+                                {w?.title || "Untitled wiki"}
+                              </span>
                             </div>
                             <div style={{ color: "#94a3b8", fontSize: 11, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                               {id}
@@ -279,6 +281,25 @@ export default function EntityWikiBindingsPanel({ entities, wikis, links, setLin
   );
 }
 
+function ActiveSelectionLabel({
+  label,
+  id,
+}: {
+  label: string;
+  id: string;
+}) {
+  return (
+    <div style={{ marginTop: 6, display: "flex", alignItems: "center", gap: 6, minWidth: 0 }}>
+      <span style={{ color: "#cbd5e1", fontSize: 11, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+        {label}
+      </span>
+      <span style={{ color: "#64748b", fontSize: 11, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+        {id}
+      </span>
+    </div>
+  );
+}
+
 function PlusIcon() {
   return (
     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">

src/uhm/components/editor/GeometryBindingPanel.tsx

@@ -1,10 +1,12 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import { useMemo, useState, type KeyboardEvent } from "react";
+import NewBadge from "@/uhm/components/editor/NewBadge";
 
 type GeometryChoice = {
   id: string;
   label?: string;
+  isNew?: boolean;
 };
 
 type Props = {
@@ -12,6 +14,7 @@ type Props = {
   selectedGeometryId: string | null;
   selectedGeometryBindingIds: string[];
   onToggleBindGeometryForSelectedGeometry?: (geometryId: string, nextChecked: boolean) => void;
+  onFocusGeometry?: (geometryId: string) => void;
   statusText?: string | null;
   bindingFilterEnabled: boolean;
   onBindingFilterEnabledChange: (next: boolean) => void;
@@ -22,25 +25,37 @@ export default function GeometryBindingPanel({
   selectedGeometryId,
   selectedGeometryBindingIds,
   onToggleBindGeometryForSelectedGeometry,
+  onFocusGeometry,
   statusText,
   bindingFilterEnabled,
   onBindingFilterEnabledChange,
 }: Props) {
   const canBindToggle =
     Boolean(selectedGeometryId) && typeof onToggleBindGeometryForSelectedGeometry === "function";
+  const canFocusGeometry = typeof onFocusGeometry === "function";
 
   const [collapsed, setCollapsed] = useState(false);
 
   const rows = useMemo(() => {
     const cleaned = (geometries || [])
       .filter((g) => g && typeof g.id === "string" && g.id.trim().length > 0)
-      .map((g) => ({ id: g.id.trim(), label: (g.label || "").trim() }));
+      .map((g) => ({ id: g.id.trim(), label: (g.label || "").trim(), isNew: Boolean(g.isNew) }));
     cleaned.sort((a, b) => a.id.localeCompare(b.id));
     return cleaned;
   }, [geometries]);
 
   const bindingSet = useMemo(() => new Set(selectedGeometryBindingIds || []), [selectedGeometryBindingIds]);
+  const selectedGeometry = useMemo(() => {
+    if (!selectedGeometryId) return null;
+    return rows.find((g) => g.id === selectedGeometryId) || null;
+  }, [rows, selectedGeometryId]);
 
+  const handleFocusKeyDown = (event: KeyboardEvent<HTMLDivElement>, geometryId: string) => {
+    if (!canFocusGeometry) return;
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    onFocusGeometry?.(geometryId);
+  };
 
   return (
     <div
@@ -99,6 +114,64 @@ export default function GeometryBindingPanel({
         </div>
       </div>
 
+      {collapsed ? null : selectedGeometry ? (
+        <div
+          style={{
+            marginTop: 10,
+            padding: "8px",
+            borderRadius: "6px",
+            border: "1px solid rgba(59, 130, 246, 0.45)",
+            background: "rgba(37, 99, 235, 0.12)",
+            cursor: canFocusGeometry ? "pointer" : "default",
+          }}
+          title={selectedGeometry.id}
+          role={canFocusGeometry ? "button" : undefined}
+          tabIndex={canFocusGeometry ? 0 : undefined}
+          onClick={() => onFocusGeometry?.(selectedGeometry.id)}
+          onKeyDown={(event) => handleFocusKeyDown(event, selectedGeometry.id)}
+        >
+          <div
+            style={{
+              fontSize: 10,
+              color: "#93c5fd",
+              fontWeight: 900,
+              textTransform: "uppercase",
+              lineHeight: 1,
+              marginBottom: 5,
+            }}
+          >
+            Selected
+          </div>
+          <div style={{ display: "flex", alignItems: "center", gap: 6, minWidth: 0 }}>
+            <span
+              style={{
+                fontSize: "12px",
+                color: "#e5e7eb",
+                fontWeight: 700,
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+              }}
+            >
+              {selectedGeometry.label || selectedGeometry.id}
+            </span>
+            {selectedGeometry.isNew ? <NewBadge /> : null}
+          </div>
+          <div
+            style={{
+              marginTop: 3,
+              fontSize: "11px",
+              color: "#94a3b8",
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+            }}
+          >
+            {selectedGeometry.id}
+          </div>
+        </div>
+      ) : null}
+
       {collapsed ? null : rows.length ? (
         <div style={{ marginTop: "10px", display: "grid", gap: "6px", maxHeight: 250, overflowY: "auto", paddingRight: 4 }}>
           {rows
@@ -116,22 +189,37 @@ export default function GeometryBindingPanel({
                     display: "flex",
                     alignItems: "center",
                     gap: 10,
+                    cursor: canFocusGeometry ? "pointer" : "default",
                     opacity: canBindToggle ? 1 : 0.75,
                   }}
                   title={g.id}
+                  role={canFocusGeometry ? "button" : undefined}
+                  tabIndex={canFocusGeometry ? 0 : undefined}
+                  onClick={() => onFocusGeometry?.(g.id)}
+                  onKeyDown={(event) => handleFocusKeyDown(event, g.id)}
                 >
                   <div style={{ flex: 1, minWidth: 0 }}>
                     <div
                       style={{
-                        fontSize: "12px",
+                        display: "flex",
-                        color: "#e5e7eb",
+                        alignItems: "center",
-                        fontWeight: 700,
+                        gap: 6,
-                        whiteSpace: "nowrap",
+                        minWidth: 0,
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
                       }}
                     >
-                      {g.label || g.id}
+                      <span
+                        style={{
+                          fontSize: "12px",
+                          color: "#e5e7eb",
+                          fontWeight: 700,
+                          whiteSpace: "nowrap",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                        }}
+                      >
+                        {g.label || g.id}
+                      </span>
+                      {g.isNew ? <NewBadge /> : null}
                     </div>
                     <div
                       style={{
@@ -150,7 +238,10 @@ export default function GeometryBindingPanel({
                     <button
                       type="button"
                       title={isBound ? "Unbind from selected geometry" : "Bind to selected geometry"}
-                      onClick={() => onToggleBindGeometryForSelectedGeometry!(g.id, !isBound)}
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        onToggleBindGeometryForSelectedGeometry!(g.id, !isBound);
+                      }}
                       style={{
                         display: "inline-flex",
                         alignItems: "center",

src/uhm/components/editor/ProjectEntityRefsPanel.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { useEffect, useMemo, useState, type CSSProperties } from "react";
+import { useMemo, useState, type CSSProperties } from "react";
 import type { EntitySnapshot } from "@/uhm/types/entities";
 import type { EntityFormState } from "@/uhm/lib/editor/session/sessionTypes";
+import NewBadge from "@/uhm/components/editor/NewBadge";
 
 type Props = {
   entityRefs: EntitySnapshot[];
@@ -46,18 +47,11 @@ export default function ProjectEntityRefsPanel({
   const [editName, setEditName] = useState("");
   const [editDescription, setEditDescription] = useState("");
 
-  useEffect(() => {
+  const openEntityEditor = (entity: EntitySnapshot) => {
-    if (!activeEntityId) return;
+    setActiveEntityId(String(entity.id));
-    if (!entityRefs.some((e) => String(e.id) === String(activeEntityId))) {
+    setEditName(typeof entity.name === "string" ? entity.name : "");
-      setActiveEntityId(null);
+    setEditDescription(entity.description == null ? "" : String(entity.description));
-    }
+  };
-  }, [activeEntityId, entityRefs]);
-
-  useEffect(() => {
-    if (!activeEntity) return;
-    setEditName(typeof activeEntity.name === "string" ? activeEntity.name : "");
-    setEditDescription(activeEntity.description == null ? "" : String(activeEntity.description));
-  }, [activeEntity?.description, activeEntity?.id, activeEntity?.name]);
 
   return (
     <div
@@ -113,7 +107,7 @@ export default function ProjectEntityRefsPanel({
             >
               <button
                 type="button"
-                onClick={() => setActiveEntityId(String(e.id))}
+                onClick={() => openEntityEditor(e)}
                 title="Chon de sua"
                 style={{
                   flex: 1,
@@ -126,8 +120,11 @@ export default function ProjectEntityRefsPanel({
                 }}
                 disabled={!canEditEntity}
               >
-                <div style={{ fontSize: "12px", color: "#e5e7eb", fontWeight: 700, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+                <div style={{ display: "flex", alignItems: "center", gap: 6, minWidth: 0 }}>
-                  {e.name || e.id}
+                  <span style={{ fontSize: "12px", color: "#e5e7eb", fontWeight: 700, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+                    {e.name || e.id}
+                  </span>
+                  {isNewEntityRef(e) ? <NewBadge /> : null}
                 </div>
                 <div style={{ fontSize: "11px", color: "#94a3b8", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                   {e.id}
@@ -189,8 +186,11 @@ export default function ProjectEntityRefsPanel({
           }}
         >
           <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
-            <div style={{ color: "#a7f3d0", fontWeight: 700, fontSize: "12px" }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 6, minWidth: 0 }}>
-              Sua entity
+              <span style={{ color: "#a7f3d0", fontWeight: 700, fontSize: "12px" }}>
+                Sua entity
+              </span>
+              {isNewEntityRef(activeEntity) ? <NewBadge /> : null}
             </div>
             <button
               type="button"
@@ -344,6 +344,10 @@ export default function ProjectEntityRefsPanel({
   );
 }
 
+function isNewEntityRef(entity: EntitySnapshot | null | undefined): boolean {
+  return entity?.source === "inline" && entity?.operation === "create";
+}
+
 const entityInputStyle: CSSProperties = {
   width: "100%",
   borderRadius: "6px",

src/uhm/components/map/mapUtils.ts

@@ -265,21 +265,29 @@ export function setSelectedFeatureState(
 export function fitMapToFeatureCollection(
     map: maplibregl.Map,
     fc: FeatureCollection,
-    padding?: number | maplibregl.PaddingOptions
+    padding?: number | maplibregl.PaddingOptions,
+    options?: {
+        duration?: number;
+        maxZoom?: number;
+        pointZoom?: number;
+    }
 ): boolean {
     const bbox = getFeatureCollectionBBox(fc);
     if (!bbox) return false;
 
     const resolvedPadding = typeof padding === "number" || padding ? padding : 58;
+    const duration = options?.duration ?? 0;
+    const maxZoom = options?.maxZoom ?? 7;
+    const pointZoom = options?.pointZoom ?? 6;
 
     const lngSpan = Math.abs(bbox.maxLng - bbox.minLng);
     const latSpan = Math.abs(bbox.maxLat - bbox.minLat);
     if (lngSpan < 0.000001 && latSpan < 0.000001) {
         map.easeTo({
             center: [bbox.minLng, bbox.minLat],
-            zoom: 6,
+            zoom: pointZoom,
             padding: resolvedPadding,
-            duration: 0,
+            duration,
         });
         return true;
     }
@@ -291,8 +299,8 @@ export function fitMapToFeatureCollection(
         ],
         {
             padding: resolvedPadding,
-            maxZoom: 7,
+            maxZoom,
-            duration: 0,
+            duration,
         }
     );
     return true;

src/uhm/components/map/useMapSync.ts

@@ -65,9 +65,6 @@ export function useMapSync({
     const respectBindingFilterRef = useRef(respectBindingFilter);
     const fitToDraftBoundsRef = useRef(fitToDraftBounds);
     const highlightFeaturesRef = useRef<FeatureCollection | null>(highlightFeatures || null);
-    const focusFeatureCollectionRef = useRef<FeatureCollection | null>(focusFeatureCollection || null);
-    const focusRequestKeyRef = useRef<string | number | null>(focusRequestKey || null);
-    const focusPaddingRef = useRef<number | maplibregl.PaddingOptions | undefined>(focusPadding);
 
     const fitBoundsAppliedRef = useRef(false);
 
@@ -79,9 +76,6 @@ export function useMapSync({
     useEffect(() => { respectBindingFilterRef.current = respectBindingFilter; }, [respectBindingFilter]);
     useEffect(() => { fitToDraftBoundsRef.current = fitToDraftBounds; }, [fitToDraftBounds]);
     useEffect(() => { highlightFeaturesRef.current = highlightFeatures || null; }, [highlightFeatures]);
-    useEffect(() => { focusFeatureCollectionRef.current = focusFeatureCollection || null; }, [focusFeatureCollection]);
-    useEffect(() => { focusRequestKeyRef.current = focusRequestKey || null; }, [focusRequestKey]);
-    useEffect(() => { focusPaddingRef.current = focusPadding; }, [focusPadding]);
 
     useEffect(() => {
         fitBoundsAppliedRef.current = false;
@@ -205,11 +199,33 @@ export function useMapSync({
     useEffect(() => {
         if (focusRequestKey === null || focusRequestKey === undefined) return;
         const map = mapRef.current;
-        if (!map || !map.isStyleLoaded()) return;
+        const target = focusFeatureCollection;
-        const target = focusFeatureCollectionRef.current;
         if (!target || !target.features.length) return;
-        fitMapToFeatureCollection(map, target, focusPaddingRef.current);
+        if (!map) return;
-    }, [focusRequestKey, mapRef]);
+
+        let cancelled = false;
+        let rafId: number | null = null;
+
+        const focus = () => {
+            if (cancelled || mapRef.current !== map || !map.isStyleLoaded()) return;
+            fitMapToFeatureCollection(map, target, focusPadding, {
+                duration: 550,
+                maxZoom: 10,
+                pointZoom: 9,
+            });
+        };
+
+        if (map.isStyleLoaded()) {
+            rafId = requestAnimationFrame(focus);
+        } else {
+            map.once("idle", focus);
+        }
+
+        return () => {
+            cancelled = true;
+            if (rafId !== null) cancelAnimationFrame(rafId);
+        };
+    }, [focusFeatureCollection, focusPadding, focusRequestKey, mapRef]);
 
     return {
         applyDraftToMap,

src/uhm/components/wiki/WikiSidebarPanel.tsx

@@ -12,8 +12,29 @@ import type { WikiSnapshot } from "@/uhm/types/wiki";
 import { newId } from "@/uhm/lib/utils/id";
 import type ReactQuill from "react-quill-new";
 import { checkWikiSlugExists, fetchWikiBySlug, searchWikisByTitle, type Wiki } from "@/uhm/api/wikis";
+import NewBadge from "@/uhm/components/editor/NewBadge";
 
 type ReactQuillProps = ComponentProps<typeof ReactQuill>;
+type QuillRange = { index: number; length: number };
+type QuillLike = {
+  getSelection?: () => QuillRange | null;
+  getFormat?: (...args: unknown[]) => Record<string, unknown>;
+  setSelection?: (...args: unknown[]) => void;
+  formatText?: (...args: unknown[]) => void;
+  insertText?: (...args: unknown[]) => void;
+  format?: (...args: unknown[]) => void;
+  getText?: (index: number, length: number) => string;
+};
+type QuillModule = {
+  Quill?: {
+    import?: (path: string) => unknown;
+  };
+};
+type QuillLinkFormat = {
+  sanitize?: (url: unknown) => unknown;
+  __uhmAllowSlugHref?: boolean;
+  __uhmOriginalSanitize?: unknown;
+};
 
 const ReactQuillEditor = dynamic<ReactQuillProps>(() => import("react-quill-new"), {
   ssr: false,
@@ -55,12 +76,12 @@ export default function WikiSidebarPanel({ projectId, wikis, setWikis, autoOpen,
 
   // Quill: custom link UI (link-to-wiki by slug).
   const wikiLinkIntentRef = useRef<{
-    quill: any;
+    quill: QuillLike;
-    range: { index: number; length: number } | null;
+    range: QuillRange | null;
     activeWikiId: string | null;
     existingHref: string | null;
   } | null>(null);
-  const wikiLinkHandlerRef = useRef<(quill: any) => void>(() => {});
+  const wikiLinkHandlerRef = useRef<(quill: QuillLike | null | undefined) => void>(() => {});
   const [isWikiLinkOpen, setIsWikiLinkOpen] = useState(false);
   const [wikiLinkQuery, setWikiLinkQuery] = useState("");
   const [wikiLinkError, setWikiLinkError] = useState<string | null>(null);
@@ -85,13 +106,13 @@ export default function WikiSidebarPanel({ projectId, wikis, setWikis, autoOpen,
 
     (async () => {
       try {
-        const mod: any = await import("react-quill-new");
+        const mod = await import("react-quill-new") as QuillModule;
         const Quill = mod?.Quill;
         if (!Quill) return;
         const Link = Quill.import?.("formats/link");
         if (!Link) return;
 
-        const anyLink = Link as any;
+        const anyLink = Link as QuillLinkFormat;
         if (anyLink.__uhmAllowSlugHref) return;
         const original = anyLink.sanitize;
         anyLink.sanitize = (url: unknown) => {
@@ -136,24 +157,6 @@ export default function WikiSidebarPanel({ projectId, wikis, setWikis, autoOpen,
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [wikis.length]);
 
-  const openEditor = () => {
-    if (!wikis.length) {
-      const id = newId();
-      const seed: WikiSnapshot = {
-        id,
-        source: "inline",
-        operation: "create",
-        title: "Untitled wiki",
-        slug: null,
-        doc: "",
-        updated_at: new Date().toISOString(),
-      };
-      setWikis((prev) => [seed, ...prev]);
-      setActiveId(id);
-    }
-    setOpen(true);
-  };
-
   const createWikiAndOpen = (title?: string, slug?: string | null) => {
     const id = newId();
     const seedTitle = clampTitle(title || "Untitled wiki");
@@ -501,7 +504,7 @@ export default function WikiSidebarPanel({ projectId, wikis, setWikis, autoOpen,
   }, [closeWikiLinkModal]);
 
   // Keep handler ref updated while keeping modules object stable.
-  wikiLinkHandlerRef.current = (quill: any) => {
+  wikiLinkHandlerRef.current = (quill: QuillLike | null | undefined) => {
     if (!quill) return;
     const range = quill.getSelection?.() ?? null;
     // Try to read current link format (if any) from the selection.
@@ -529,7 +532,7 @@ export default function WikiSidebarPanel({ projectId, wikis, setWikis, autoOpen,
         container: QUILL_TOOLBAR,
         handlers: {
           // NOTE: use function() to preserve Quill toolbar `this` binding.
-          link: function (this: any) {
+          link: function (this: { quill?: QuillLike }) {
             wikiLinkHandlerRef.current(this?.quill);
           },
         },
@@ -602,14 +605,22 @@ export default function WikiSidebarPanel({ projectId, wikis, setWikis, autoOpen,
                   background: "transparent",
                   color: "#e5e7eb",
                   cursor: "pointer",
-                  fontSize: "12px",
-                  whiteSpace: "nowrap",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
                 }}
                 title={w.title}
               >
-                {w.title}
+                <span style={{ display: "flex", alignItems: "center", gap: 6, minWidth: 0 }}>
+                  <span
+                    style={{
+                      fontSize: "12px",
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                    }}
+                  >
+                    {w.title}
+                  </span>
+                  {isNewWiki(w) ? <NewBadge /> : null}
+                </span>
               </button>
               <button
                 type="button"
@@ -974,6 +985,10 @@ export default function WikiSidebarPanel({ projectId, wikis, setWikis, autoOpen,
   );
 }
 
+function isNewWiki(wiki: WikiSnapshot | null | undefined): boolean {
+  return wiki?.source === "inline" && wiki?.operation === "create";
+}
+
 function PlusIcon() {
   return (
     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">