default user UI

src/uhm/api/entities.ts

@@ -4,11 +4,25 @@ import type { Entity } from "@/uhm/types/entities";
 
 export type { Entity } from "@/uhm/types/entities";
 
-export async function fetchEntities(query?: { q?: string }): Promise<Entity[]> {
+export async function fetchEntities(query?: {
+    q?: string;
+    limit?: number;
+    cursor?: string;
+    projectId?: string;
+}): Promise<Entity[]> {
     const params = new URLSearchParams();
     // API mới dùng `name` thay vì `q`.
-    if (query?.q) {
-        params.set("name", query.q);
+    if (query && "q" in query) {
+        params.set("name", String(query.q ?? ""));
+    }
+    if (query?.limit && Number.isFinite(query.limit)) {
+        params.set("limit", String(Math.trunc(query.limit)));
+    }
+    if (query?.cursor) {
+        params.set("cursor", query.cursor);
+    }
+    if (query?.projectId) {
+        params.set("project_id", query.projectId);
     }
     const suffix = params.toString();
     const url = suffix ? `${API_ENDPOINTS.entities}?${suffix}` : API_ENDPOINTS.entities;

src/uhm/api/wikis.ts

@@ -14,8 +14,6 @@ export type Wiki = {
 
 export async function searchWikisByTitle(title: string, options?: { limit?: number; cursor?: string; entityId?: string }): Promise<Wiki[]> {
   const keyword = title.trim();
-  if (!keyword.length) return [];
-
   const params = new URLSearchParams({ title: keyword });
   if (options?.limit && Number.isFinite(options.limit)) params.set("limit", String(Math.trunc(options.limit)));
   if (options?.cursor) params.set("cursor", options.cursor);
@@ -52,11 +50,11 @@ export async function checkWikiSlugExists(slug: string): Promise<boolean> {
 
   if (typeof payload === "boolean") return payload;
   if (payload && typeof payload === "object") {
-    const anyPayload = payload as any;
-    if (typeof anyPayload.exists === "boolean") return anyPayload.exists;
-    if (typeof anyPayload.exists === "number") return anyPayload.exists !== 0;
-    if (typeof anyPayload.is_exists === "boolean") return anyPayload.is_exists;
-    if (typeof anyPayload.is_exists === "number") return anyPayload.is_exists !== 0;
+    const source = payload as Record<string, unknown>;
+    if (typeof source.exists === "boolean") return source.exists;
+    if (typeof source.exists === "number") return source.exists !== 0;
+    if (typeof source.is_exists === "boolean") return source.is_exists;
+    if (typeof source.is_exists === "number") return source.is_exists !== 0;
   }
 
   // Be conservative: unknown payload shape, treat as "exists" to prevent creating conflicting slugs.

src/uhm/components/Map.tsx

@@ -53,6 +53,18 @@ type MapProps = {
     height?: CSSProperties["height"];
     fitToDraftBounds?: boolean;
     fitBoundsKey?: string | number | null;
+    onHoverFeatureChange?: ((payload: MapHoverPayload | null) => void) | undefined;
+    highlightFeatures?: FeatureCollection | null;
+    focusFeatureCollection?: FeatureCollection | null;
+    focusRequestKey?: string | number | null;
+    focusPadding?: number | maplibregl.PaddingOptions;
+};
+
+export type MapHoverPayload = {
+    featureId: string | number;
+    feature: Feature | null;
+    point: { x: number; y: number };
+    lngLat: { lng: number; lat: number };
 };
 
 type EngineBinding = {
@@ -82,6 +94,11 @@ export default function Map({
     height = "100vh",
     fitToDraftBounds = false,
     fitBoundsKey = null,
+    onHoverFeatureChange,
+    highlightFeatures = null,
+    focusFeatureCollection = null,
+    focusRequestKey = null,
+    focusPadding,
 }: MapProps) {
     // DOM container của map (dùng ref để tránh collision khi render nhiều map).
     const containerRef = useRef<HTMLDivElement | null>(null);
@@ -102,10 +119,15 @@ export default function Map({
     const backgroundVisibilityRef = useRef<BackgroundLayerVisibility>(backgroundVisibility);
     // Mirror of geometry visibility for type filtering.
     const geometryVisibilityRef = useRef<MapProps["geometryVisibility"]>(geometryVisibility);
+    const highlightFeaturesRef = useRef<FeatureCollection | null>(highlightFeatures);
+    const focusFeatureCollectionRef = useRef<FeatureCollection | null>(focusFeatureCollection);
+    const focusRequestKeyRef = useRef<MapProps["focusRequestKey"]>(focusRequestKey);
+    const focusPaddingRef = useRef<MapProps["focusPadding"]>(focusPadding);
     // Mirror của selectedFeatureId để filter/select trên map (không phụ thuộc re-render).
     const selectedFeatureIdRef = useRef<string | number | null>(selectedFeatureId);
     // Mirror của callback onSelectFeatureId.
     const onSelectFeatureIdRef = useRef(onSelectFeatureId);
+    const onHoverFeatureChangeRef = useRef<MapProps["onHoverFeatureChange"]>(onHoverFeatureChange);
     // Mirror của callback onCreateFeature.
     const onCreateRef = useRef<MapProps["onCreateFeature"]>(onCreateFeature);
     // Mirror của callback onDeleteFeature.
@@ -206,6 +228,10 @@ export default function Map({
         selectedFeatureIdRef.current = selectedFeatureId;
     }, [selectedFeatureId]);
 
+    useEffect(() => {
+        onHoverFeatureChangeRef.current = onHoverFeatureChange;
+    }, [onHoverFeatureChange]);
+
     useEffect(() => {
         if (mode !== "select" || selectedFeatureId === null) {
             editingEngineRef.current?.clearEditing();
@@ -228,12 +254,24 @@ export default function Map({
     }, [backgroundVisibility]);
 
     useEffect(() => {
-        geometryVisibilityRef.current = geometryVisibility;
-        // When toggling geometry types, refresh sources immediately (without waiting for parent re-mount).
+        highlightFeaturesRef.current = highlightFeatures;
         const map = mapRef.current;
-        if (!map) return;
-        applyDraftToMap(draftRef.current);
-    }, [geometryVisibility]);
+        if (!map || !map.isStyleLoaded()) return;
+        const source = map.getSource("entity-focus") as maplibregl.GeoJSONSource | undefined;
+        source?.setData(highlightFeatures || EMPTY_FEATURE_COLLECTION);
+    }, [highlightFeatures]);
+
+    useEffect(() => {
+        focusFeatureCollectionRef.current = focusFeatureCollection;
+    }, [focusFeatureCollection]);
+
+    useEffect(() => {
+        focusRequestKeyRef.current = focusRequestKey;
+    }, [focusRequestKey]);
+
+    useEffect(() => {
+        focusPaddingRef.current = focusPadding;
+    }, [focusPadding]);
 
     useEffect(() => {
         onCreateRef.current = onCreateFeature;
@@ -299,6 +337,22 @@ export default function Map({
         }
     }, []);
 
+    const applyHighlightToMap = useCallback((fc: FeatureCollection) => {
+        const map = mapRef.current;
+        if (!map) return;
+
+        const source = map.getSource("entity-focus") as maplibregl.GeoJSONSource | undefined;
+        if (!source) return;
+        source.setData(fc);
+    }, []);
+
+    useEffect(() => {
+        geometryVisibilityRef.current = geometryVisibility;
+        const map = mapRef.current;
+        if (!map) return;
+        applyDraftToMap(draftRef.current);
+    }, [applyDraftToMap, geometryVisibility]);
+
     const tryCenterToUserLocation = useCallback(() => {
         if (geolocationCenteredRef.current) return;
         // Nếu đang "fit to draft bounds" thì không nên override center.
@@ -899,7 +953,56 @@ export default function Map({
                 },
             });
 
+            map.addSource("entity-focus", {
+                type: "geojson",
+                data: EMPTY_FEATURE_COLLECTION,
+            });
+
+            map.addLayer({
+                id: "entity-focus-fill",
+                type: "fill",
+                source: "entity-focus",
+                filter: ["==", ["geometry-type"], "Polygon"],
+                paint: {
+                    "fill-color": "#fde047",
+                    "fill-opacity": 0.2,
+                },
+            });
+
+            map.addLayer({
+                id: "entity-focus-line",
+                type: "line",
+                source: "entity-focus",
+                paint: {
+                    "line-color": "#f59e0b",
+                    "line-width": [
+                        "interpolate",
+                        ["linear"],
+                        ["zoom"],
+                        1, 2.4,
+                        4, 4,
+                        6, 5.5,
+                    ],
+                    "line-opacity": 0.98,
+                },
+            });
+
+            map.addLayer({
+                id: "entity-focus-points",
+                type: "circle",
+                source: "entity-focus",
+                filter: ["==", ["geometry-type"], "Point"],
+                paint: {
+                    "circle-color": "#f8fafc",
+                    "circle-radius": 8,
+                    "circle-stroke-color": "#f59e0b",
+                    "circle-stroke-width": 3,
+                    "circle-opacity": 1,
+                },
+            });
+
             addPointSymbolLayer(map);
+            applyHighlightToMap(highlightFeaturesRef.current || EMPTY_FEATURE_COLLECTION);
 
             // init drawing
             const drawingEngine = initDrawing(
@@ -1047,10 +1150,59 @@ export default function Map({
                 () => map.off("zoom", syncZoomLevel),
             ];
 
+            const handleHoverMove = (event: maplibregl.MapMouseEvent) => {
+                const callback = onHoverFeatureChangeRef.current;
+                if (!callback) return;
+
+                const selectableLayers = getSelectableLayers(map);
+                if (!selectableLayers.length) {
+                    callback(null);
+                    return;
+                }
+
+                const features = map.queryRenderedFeatures(event.point, {
+                    layers: selectableLayers,
+                }) as maplibregl.MapGeoJSONFeature[];
+
+                const feature = features[0];
+                const rawFeatureId = feature?.id ?? feature?.properties?.id;
+                if (rawFeatureId === undefined || rawFeatureId === null) {
+                    callback(null);
+                    return;
+                }
+
+                const currentFeature =
+                    draftRef.current.features.find(
+                        (item) => String(item.properties.id) === String(rawFeatureId)
+                    ) || null;
+
+                callback({
+                    featureId: rawFeatureId,
+                    feature: currentFeature,
+                    point: { x: event.point.x, y: event.point.y },
+                    lngLat: { lng: event.lngLat.lng, lat: event.lngLat.lat },
+                });
+            };
+
+            const handleCanvasMouseLeave = () => {
+                onHoverFeatureChangeRef.current?.(null);
+            };
+
+            map.on("mousemove", handleHoverMove);
+            mapCleanupFnsRef.current.push(() => map.off("mousemove", handleHoverMove));
+
+            map.getCanvasContainer().addEventListener("mouseleave", handleCanvasMouseLeave);
+            mapCleanupFnsRef.current.push(() => {
+                map.getCanvasContainer().removeEventListener("mouseleave", handleCanvasMouseLeave);
+            });
+
             // after everything mounted, push current draft to sources
             applyDraftToMap(draftRef.current);
             // Khi vao web, thu auto center theo vi tri user (neu co quyen).
             tryCenterToUserLocation();
+            if (focusRequestKeyRef.current !== null && focusRequestKeyRef.current !== undefined && focusFeatureCollectionRef.current?.features.length) {
+                fitMapToFeatureCollection(map, focusFeatureCollectionRef.current, focusPaddingRef.current);
+            }
 
             if (allowGeometryEditing) {
                 editingEngineRef.current?.bindEditEvents(map);
@@ -1072,7 +1224,7 @@ export default function Map({
             }
             map.remove();
         };
-    }, [allowGeometryEditing, applyDraftToMap, tryCenterToUserLocation]);
+    }, [allowGeometryEditing, applyDraftToMap, applyHighlightToMap, tryCenterToUserLocation]);
 
     useEffect(() => {
         const map = mapRef.current;
@@ -1126,6 +1278,15 @@ export default function Map({
         }
     }, [allowGeometryEditing, draft, selectedFeatureId, applyDraftToMap]);
 
+    useEffect(() => {
+        if (focusRequestKey === null || focusRequestKey === undefined) return;
+        const map = mapRef.current;
+        if (!map || !map.isStyleLoaded()) return;
+        const target = focusFeatureCollectionRef.current;
+        if (!target || !target.features.length) return;
+        fitMapToFeatureCollection(map, target, focusPaddingRef.current);
+    }, [focusRequestKey]);
+
     return (
         <div style={{ width: "100%", height, position: "relative" }}>
             <div ref={containerRef} style={{ width: "100%", height: "100%" }} />
@@ -1374,6 +1535,19 @@ function createRasterBaseLayer() {
     };
 }
 
+function getSelectableLayers(map: maplibregl.Map): string[] {
+    return [
+        "countries-fill",
+        "countries-line",
+        "routes-line",
+        "routes-path-arrow-fill",
+        "routes-path-arrow-line",
+        "routes-path-hit",
+        "places-circle",
+        "places-symbol",
+    ].filter((layerId) => Boolean(map.getLayer(layerId)));
+}
+
 function filterDraftByBinding(
     fc: FeatureCollection,
     selectedFeatureId: string | number | null
@@ -1470,16 +1644,26 @@ function setSelectedFeatureState(
     }
 }
 
-function fitMapToFeatureCollection(map: maplibregl.Map, fc: FeatureCollection): boolean {
+function fitMapToFeatureCollection(
+    map: maplibregl.Map,
+    fc: FeatureCollection,
+    padding?: number | maplibregl.PaddingOptions
+): boolean {
     const bbox = getFeatureCollectionBBox(fc);
     if (!bbox) return false;
 
+    const resolvedPadding =
+        typeof padding === "number" || padding
+            ? padding
+            : 58;
+
     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,
+            padding: resolvedPadding,
             duration: 0,
         });
         return true;
@@ -1491,7 +1675,7 @@ function fitMapToFeatureCollection(map: maplibregl.Map, fc: FeatureCollection):
             [bbox.maxLng, bbox.maxLat],
         ],
         {
-            padding: 58,
+            padding: resolvedPadding,
             maxZoom: 7,
             duration: 0,
         }

src/uhm/components/PublicWikiSidebar.tsx

@@ -0,0 +1,388 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import type { Entity } from "@/uhm/api/entities";
+import type { Wiki } from "@/uhm/api/wikis";
+
+type TocItem = {
+    id: string;
+    level: number;
+    text: string;
+};
+
+type Props = {
+    entity: Entity | null;
+    wiki: Wiki | null;
+    isLoading: boolean;
+    error?: string | null;
+    onClose: () => void;
+    onWikiLinkRequest: (request: { slug: string; rect: DOMRect }) => void;
+};
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+    return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+
+function tiptapJsonToPlainText(node: unknown): string {
+    if (node == null) return "";
+    if (typeof node === "string") return node;
+    if (Array.isArray(node)) return node.map(tiptapJsonToPlainText).join("");
+
+    if (isRecord(node)) {
+        if (node.type === "text" && typeof node.text === "string") return node.text;
+        if (node.type === "hardBreak") return "\n";
+        if ("content" in node) return tiptapJsonToPlainText(node.content);
+    }
+
+    return "";
+}
+
+function escapeHtml(input: string): string {
+    return input
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll("\"", "&quot;")
+        .replaceAll("'", "&#39;");
+}
+
+function normalizeWikiContentToHtml(raw: string | null | undefined): string {
+    const value = String(raw || "").trim();
+    if (!value.length) return "";
+
+    if (value[0] === "<") return value;
+
+    if (value[0] === "{") {
+        try {
+            const json: unknown = JSON.parse(value);
+            const text = tiptapJsonToPlainText(json).trim();
+            if (!text.length) return "";
+            return `<p>${escapeHtml(text).replace(/\n/g, "<br/>")}</p>`;
+        } catch {
+            // fall through
+        }
+    }
+
+    return `<p>${escapeHtml(value).replace(/\n/g, "<br/>")}</p>`;
+}
+
+function slugifyHeading(raw: string): string {
+    const input = String(raw || "").trim();
+    if (!input.length) return "";
+    return input
+        .toLowerCase()
+        .normalize("NFKD")
+        .replace(/[\u0300-\u036f]/g, "")
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+/, "")
+        .replace(/-+$/, "")
+        .slice(0, 80);
+}
+
+function isExternalHref(href: string): boolean {
+    const h = href.trim().toLowerCase();
+    return (
+        h.startsWith("http://") ||
+        h.startsWith("https://") ||
+        h.startsWith("mailto:") ||
+        h.startsWith("tel:") ||
+        h.startsWith("sms:")
+    );
+}
+
+function prepareWikiHtml(inputHtml: string): { html: string; toc: TocItem[] } {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(inputHtml, "text/html");
+
+    for (const el of Array.from(doc.querySelectorAll("script"))) el.remove();
+
+    for (const a of Array.from(doc.querySelectorAll("a[href]"))) {
+        const href = String(a.getAttribute("href") || "").trim();
+        if (!href.length) continue;
+        if (href === "__missing__") continue;
+        if (href.startsWith("#")) continue;
+        if (href.startsWith("/")) continue;
+
+        if (isExternalHref(href)) {
+            a.setAttribute("target", "_blank");
+            a.setAttribute("rel", "noopener noreferrer");
+            continue;
+        }
+
+        const match = href.match(/^([^?#]+)([?#].*)?$/);
+        const slugPart = String(match?.[1] || "").replace(/^\/+/, "").trim();
+        if (!slugPart.length) continue;
+        a.setAttribute("href", `#wiki:${slugPart}`);
+        a.setAttribute("data-wiki-slug", slugPart);
+        a.setAttribute("target", "_self");
+    }
+
+    const toc: TocItem[] = [];
+    const seen = new Map<string, number>();
+    const headings = Array.from(doc.body.querySelectorAll("h1,h2,h3,h4,h5,h6"));
+    for (const h of headings) {
+        const text = String(h.textContent || "").trim();
+        if (!text.length) continue;
+
+        const level = Number(String(h.tagName || "").replace(/^H/i, "")) || 1;
+        const existingId = String(h.getAttribute("id") || "").trim();
+        if (existingId) {
+            toc.push({ id: existingId, level, text });
+            continue;
+        }
+
+        const base = slugifyHeading(text) || "heading";
+        const nextCount = (seen.get(base) || 0) + 1;
+        seen.set(base, nextCount);
+        const id = nextCount === 1 ? base : `${base}-${nextCount}`;
+
+        h.setAttribute("id", id);
+        toc.push({ id, level, text });
+    }
+
+    return { html: doc.body.innerHTML, toc };
+}
+
+export default function PublicWikiSidebar({
+    entity,
+    wiki,
+    isLoading,
+    error,
+    onClose,
+    onWikiLinkRequest,
+}: Props) {
+    const contentRootRef = useRef<HTMLDivElement | null>(null);
+    const [activeHeadingId, setActiveHeadingId] = useState<string | null>(null);
+    const processedWiki = useMemo(() => {
+        if (!wiki) return { html: "", toc: [] as TocItem[] };
+
+        const html = normalizeWikiContentToHtml(wiki.content ?? "");
+        try {
+            return prepareWikiHtml(html);
+        } catch (err) {
+            console.error("Failed to process sidebar wiki HTML", err);
+            return { html, toc: [] as TocItem[] };
+        }
+    }, [wiki]);
+    const renderHtml = processedWiki.html;
+    const toc = processedWiki.toc;
+    const effectiveActiveHeadingId = toc.some((item) => item.id === activeHeadingId)
+        ? activeHeadingId
+        : (toc[0]?.id ?? null);
+
+    useEffect(() => {
+        if (!toc.length) return;
+        const root = contentRootRef.current;
+        if (!root) return;
+
+        const headings = toc
+            .map((item) => root.querySelector<HTMLElement>(`#${CSS.escape(item.id)}`))
+            .filter((item): item is HTMLElement => Boolean(item));
+        if (!headings.length) return;
+
+        const observer = new IntersectionObserver(
+            (entries) => {
+                const visible = entries
+                    .filter((entry) => entry.isIntersecting)
+                    .sort((a, b) => (a.boundingClientRect.top ?? 0) - (b.boundingClientRect.top ?? 0));
+                const top = visible[0]?.target as HTMLElement | undefined;
+                if (top?.id) setActiveHeadingId(top.id);
+            },
+            { root: null, rootMargin: "-18% 0px -70% 0px", threshold: [0, 1] }
+        );
+
+        for (const heading of headings) observer.observe(heading);
+        return () => observer.disconnect();
+    }, [toc]);
+
+    useEffect(() => {
+        const root = contentRootRef.current;
+        if (!root) return;
+
+        const handleClick = (event: MouseEvent) => {
+            const target = event.target as HTMLElement | null;
+            const link = target?.closest?.("a[data-wiki-slug]") as HTMLAnchorElement | null;
+            if (!link) return;
+            event.preventDefault();
+
+            const slug = String(link.getAttribute("data-wiki-slug") || "").trim();
+            if (!slug.length) return;
+            onWikiLinkRequest({ slug, rect: link.getBoundingClientRect() });
+        };
+
+        root.addEventListener("click", handleClick);
+        return () => root.removeEventListener("click", handleClick);
+    }, [onWikiLinkRequest, renderHtml]);
+
+    return (
+        <div className="flex h-full min-h-0 flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl dark:border-gray-800 dark:bg-gray-950">
+            <div className="border-b border-gray-200 px-4 py-4 dark:border-gray-800">
+                <div className="flex items-start justify-between gap-3">
+                    <div className="min-w-0">
+                        <div className="text-[11px] uppercase tracking-[0.08em] text-gray-500 dark:text-gray-400">
+                            Wiki
+                        </div>
+                        <div className="mt-1 text-lg font-semibold leading-tight text-gray-900 dark:text-gray-100">
+                            {entity?.name?.trim() || wiki?.title?.trim() || "Wiki"}
+                        </div>
+                        {entity?.description?.trim() ? (
+                            <div className="mt-2 text-sm leading-6 text-gray-600 dark:text-gray-300">
+                                {entity.description.trim()}
+                            </div>
+                        ) : null}
+                        {wiki?.title?.trim() && wiki.title.trim() !== entity?.name?.trim() ? (
+                            <div className="mt-2 text-xs text-gray-500 dark:text-gray-400">
+                                {wiki.title.trim()}
+                            </div>
+                        ) : null}
+                    </div>
+
+                    <button
+                        type="button"
+                        onClick={onClose}
+                        className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-gray-200 text-sm text-gray-500 transition hover:bg-gray-50 hover:text-gray-800 dark:border-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.04] dark:hover:text-gray-100"
+                        aria-label="Close wiki sidebar"
+                    >
+                        x
+                    </button>
+                </div>
+            </div>
+
+            {toc.length ? (
+                <div className="border-b border-gray-200 px-3 py-2 dark:border-gray-800">
+                    <div className="flex gap-2 overflow-x-auto pb-1">
+                        {toc.slice(0, 8).map((item) => {
+                            const isActive = effectiveActiveHeadingId === item.id;
+                            return (
+                                <a
+                                    key={item.id}
+                                    href={`#${item.id}`}
+                                    className={`shrink-0 rounded-full px-3 py-1 text-xs transition ${
+                                        isActive
+                                            ? "bg-brand-50 text-brand-700 dark:bg-brand-500/10 dark:text-brand-300"
+                                            : "bg-gray-50 text-gray-600 hover:bg-gray-100 dark:bg-white/[0.03] dark:text-gray-300 dark:hover:bg-white/[0.06]"
+                                    }`}
+                                >
+                                    {item.text}
+                                </a>
+                            );
+                        })}
+                    </div>
+                </div>
+            ) : null}
+
+            <div className="min-h-0 flex-1 overflow-y-auto">
+                {isLoading ? (
+                    <div className="space-y-3 px-4 py-4">
+                        <div className="h-4 w-28 animate-pulse rounded bg-gray-100 dark:bg-white/[0.06]" />
+                        <div className="h-4 w-full animate-pulse rounded bg-gray-100 dark:bg-white/[0.06]" />
+                        <div className="h-4 w-4/5 animate-pulse rounded bg-gray-100 dark:bg-white/[0.06]" />
+                    </div>
+                ) : error ? (
+                    <div className="px-4 py-4 text-sm text-red-600 dark:text-red-300">
+                        {error}
+                    </div>
+                ) : wiki ? (
+                    <div
+                        ref={contentRootRef}
+                        className="uhm-wiki-sidebar-view ql-editor text-sm text-gray-900 dark:text-gray-100"
+                        dangerouslySetInnerHTML={{ __html: renderHtml }}
+                    />
+                ) : (
+                    <div className="px-4 py-4 text-sm text-gray-600 dark:text-gray-300">
+                        Entity này chưa có wiki liên kết.
+                    </div>
+                )}
+            </div>
+
+            <style jsx global>{`
+                .uhm-wiki-sidebar-view.ql-editor {
+                    height: auto;
+                    overflow-y: visible;
+                    padding: 18px 18px 22px;
+                }
+                .uhm-wiki-sidebar-view.ql-editor p {
+                    margin: 0 0 0.75em;
+                }
+                .uhm-wiki-sidebar-view.ql-editor h1 {
+                    margin: 1.15em 0 0.6em;
+                    font-size: 1.6em;
+                    font-weight: 800;
+                    line-height: 1.2;
+                }
+                .uhm-wiki-sidebar-view.ql-editor h2 {
+                    margin: 1.05em 0 0.55em;
+                    font-size: 1.3em;
+                    font-weight: 800;
+                    line-height: 1.25;
+                }
+                .uhm-wiki-sidebar-view.ql-editor h3,
+                .uhm-wiki-sidebar-view.ql-editor h4,
+                .uhm-wiki-sidebar-view.ql-editor h5,
+                .uhm-wiki-sidebar-view.ql-editor h6 {
+                    margin: 0.95em 0 0.45em;
+                    font-size: 1.05em;
+                    font-weight: 700;
+                    line-height: 1.3;
+                }
+                .uhm-wiki-sidebar-view.ql-editor ul,
+                .uhm-wiki-sidebar-view.ql-editor ol {
+                    margin: 0 0 0.75em;
+                    padding-left: 1.5em;
+                }
+                .uhm-wiki-sidebar-view.ql-editor blockquote {
+                    margin: 0 0 0.75em;
+                    padding-left: 12px;
+                    border-left: 3px solid rgba(148, 163, 184, 0.6);
+                    color: rgba(71, 85, 105, 1);
+                }
+                :is(.dark *) .uhm-wiki-sidebar-view.ql-editor blockquote {
+                    border-left-color: rgba(100, 116, 139, 0.6);
+                    color: rgba(203, 213, 225, 0.95);
+                }
+                .uhm-wiki-sidebar-view.ql-editor pre {
+                    margin: 0 0 0.75em;
+                    padding: 12px 14px;
+                    border: 1px solid rgba(226, 232, 240, 1);
+                    border-radius: 10px;
+                    background: rgba(248, 250, 252, 1);
+                    overflow: auto;
+                }
+                :is(.dark *) .uhm-wiki-sidebar-view.ql-editor pre {
+                    border-color: rgba(51, 65, 85, 1);
+                    background: rgba(2, 6, 23, 0.4);
+                }
+                .uhm-wiki-sidebar-view.ql-editor img {
+                    max-width: 100%;
+                    height: auto;
+                    border-radius: 8px;
+                }
+                .uhm-wiki-sidebar-view.ql-editor a {
+                    text-decoration: underline;
+                    text-underline-offset: 2px;
+                }
+                .uhm-wiki-sidebar-view.ql-editor a[href]:not([href=""]):not([href="__missing__"]) {
+                    color: #2563eb;
+                }
+                :is(.dark *) .uhm-wiki-sidebar-view.ql-editor a[href]:not([href=""]):not([href="__missing__"]) {
+                    color: #60a5fa;
+                }
+                .uhm-wiki-sidebar-view.ql-editor a[href="__missing__"] {
+                    cursor: default;
+                    pointer-events: none;
+                }
+                .uhm-wiki-sidebar-view.ql-editor a:not([href]),
+                .uhm-wiki-sidebar-view.ql-editor a[href=""],
+                .uhm-wiki-sidebar-view.ql-editor a[href="__missing__"] {
+                    color: #dc2626;
+                }
+                :is(.dark *) .uhm-wiki-sidebar-view.ql-editor a:not([href]),
+                :is(.dark *) .uhm-wiki-sidebar-view.ql-editor a[href=""],
+                :is(.dark *) .uhm-wiki-sidebar-view.ql-editor a[href="__missing__"] {
+                    color: #f87171;
+                }
+            `}</style>
+        </div>
+    );
+}