feat : update

components/admin/editor-presence.tsx

@@ -5,8 +5,8 @@ import { UsersIcon } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { useAdminPresence } from "@/hooks/use-presence";
 
-export function EditorPresence({ guideId }: { guideId: string }) {
-  const presence = useAdminPresence(guideId);
+export function EditorPresence({ guideId, section }: { guideId: string; section: string }) {
+  const presence = useAdminPresence(guideId, section);
   const editors = presence?.editorsByGuide[guideId] ?? [];
   return (
     <div className="flex flex-wrap items-center gap-1" aria-live="polite">
@@ -15,7 +15,10 @@ export function EditorPresence({ guideId }: { guideId: string }) {
         Editing {editors.length || (presence ? 0 : "")}
       </Badge>
       {editors.map((editor) => (
-        <Badge key={editor.userId} variant="outline">{editor.name}</Badge>
+        <Badge key={editor.userId} variant="outline">
+          {editor.name}
+          {editor.sections.length ? ` · ${editor.sections.join(", ")}` : ""}
+        </Badge>
       ))}
     </div>
   );

components/admin/structured-dashboard.tsx

@@ -217,7 +217,10 @@ export function StructuredDashboard({
                   <div className="flex flex-col items-end gap-1">
                     <Badge variant="secondary">v{guide.version}</Badge>
                     {(presence?.editorsByGuide[guide.id] ?? []).map((editor) => (
-                      <Badge key={editor.userId} variant="outline">{editor.name}</Badge>
+                      <Badge key={editor.userId} variant="outline">
+                        {editor.name}
+                        {editor.sections.length ? ` · ${editor.sections.join(", ")}` : ""}
+                      </Badge>
                     ))}
                   </div>
                 </CardAction>

components/public/structured-directory.tsx

@@ -2,15 +2,17 @@
 
 import Image from "next/image";
 import Link from "next/link";
-import { SearchIcon } from "lucide-react";
+import { SearchIcon, UsersIcon } from "lucide-react";
 import { useState } from "react";
 
 import {
   Card,
+  CardAction,
   CardDescription,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
 import {
   Empty,
   EmptyDescription,
@@ -22,6 +24,7 @@ import {
   InputGroupAddon,
   InputGroupInput,
 } from "@/components/ui/input-group";
+import { useVisitorPresence } from "@/hooks/use-presence";
 
 type GuideCard = {
   id: string;
@@ -35,6 +38,7 @@ type GuideCard = {
 
 export function StructuredDirectory({ guides }: { guides: GuideCard[] }) {
   const [query, setQuery] = useState("");
+  const presence = useVisitorPresence(null);
   const normalized = query.trim().toLowerCase();
   const filtered = guides.filter((guide) =>
     `${guide.name} ${guide.overview} ${guide.aliases.join(" ")}`.toLowerCase().includes(normalized),
@@ -71,6 +75,14 @@ export function StructuredDirectory({ guides }: { guides: GuideCard[] }) {
                 </div>
                 <CardHeader className="pt-5">
                   <CardTitle>{guide.name}</CardTitle>
+                  {(presence?.byGuide[guide.id] ?? 0) > 0 ? (
+                    <CardAction>
+                      <Badge variant="secondary">
+                        <UsersIcon data-icon="inline-start" />
+                        {presence?.byGuide[guide.id]} คน
+                      </Badge>
+                    </CardAction>
+                  ) : null}
                   <CardDescription className="line-clamp-3">
                     {guide.overview}
                   </CardDescription>