@open-slide/core 0.0.2 → 0.0.3

package/src/app/components/ui/popover.tsx

@@ -0,0 +1,87 @@
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-1 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
+  return (
+    <div
+      data-slot="popover-title"
+      className={cn("font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="popover-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverDescription,
+}

package/src/app/components/ui/tabs.tsx

@@ -0,0 +1,89 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

package/src/app/lib/folders.ts

@@ -0,0 +1,130 @@
+import { useCallback, useEffect, useState } from 'react';
+import type { Folder, FolderIcon, FoldersManifest } from './sdk';
+
+const EMPTY: FoldersManifest = { folders: [], assignments: {} };
+
+async function getManifest(): Promise<FoldersManifest> {
+  const res = await fetch('/__folders');
+  if (!res.ok) throw new Error(`GET /__folders ${res.status}`);
+  return (await res.json()) as FoldersManifest;
+}
+
+async function postFolder(name: string, icon: FolderIcon): Promise<Folder> {
+  const res = await fetch('/__folders', {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ name, icon }),
+  });
+  if (!res.ok) throw new Error(`POST /__folders ${res.status}`);
+  return (await res.json()) as Folder;
+}
+
+async function patchFolder(
+  id: string,
+  patch: { name?: string; icon?: FolderIcon },
+): Promise<Folder> {
+  const res = await fetch(`/__folders/${id}`, {
+    method: 'PATCH',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify(patch),
+  });
+  if (!res.ok) throw new Error(`PATCH /__folders/${id} ${res.status}`);
+  return (await res.json()) as Folder;
+}
+
+async function deleteFolder(id: string): Promise<void> {
+  const res = await fetch(`/__folders/${id}`, { method: 'DELETE' });
+  if (!res.ok) throw new Error(`DELETE /__folders/${id} ${res.status}`);
+}
+
+async function putAssign(slideId: string, folderId: string | null): Promise<void> {
+  const res = await fetch('/__folders/assign', {
+    method: 'PUT',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ slideId, folderId }),
+  });
+  if (!res.ok) throw new Error(`PUT /__folders/assign ${res.status}`);
+}
+
+export type UseFoldersResult = {
+  manifest: FoldersManifest;
+  loading: boolean;
+  create: (name: string, icon: FolderIcon) => Promise<Folder>;
+  update: (id: string, patch: { name?: string; icon?: FolderIcon }) => Promise<void>;
+  remove: (id: string) => Promise<void>;
+  assign: (slideId: string, folderId: string | null) => Promise<void>;
+  refresh: () => Promise<void>;
+};
+
+export function useFolders(): UseFoldersResult {
+  const [manifest, setManifest] = useState<FoldersManifest>(EMPTY);
+  const [loading, setLoading] = useState(true);
+
+  const refresh = useCallback(async () => {
+    const m = await getManifest();
+    setManifest(m);
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+    getManifest()
+      .then((m) => {
+        if (!cancelled) {
+          setManifest(m);
+          setLoading(false);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!import.meta.hot) return;
+    const handler = () => {
+      refresh().catch(() => {});
+    };
+    import.meta.hot.on('open-slide:folders-changed', handler);
+    return () => {
+      import.meta.hot?.off('open-slide:folders-changed', handler);
+    };
+  }, [refresh]);
+
+  const create = useCallback(
+    async (name: string, icon: FolderIcon) => {
+      const folder = await postFolder(name, icon);
+      await refresh();
+      return folder;
+    },
+    [refresh],
+  );
+
+  const update = useCallback(
+    async (id: string, patch: { name?: string; icon?: FolderIcon }) => {
+      await patchFolder(id, patch);
+      await refresh();
+    },
+    [refresh],
+  );
+
+  const remove = useCallback(
+    async (id: string) => {
+      await deleteFolder(id);
+      await refresh();
+    },
+    [refresh],
+  );
+
+  const assign = useCallback(
+    async (slideId: string, folderId: string | null) => {
+      await putAssign(slideId, folderId);
+      await refresh();
+    },
+    [refresh],
+  );
+
+  return { manifest, loading, create, update, remove, assign, refresh };
+}

package/src/app/lib/inspector/fiber.ts

@@ -21,8 +21,8 @@ function getSource(fiber: FiberLike) {
   return fiber._debugSource ?? fiber.memoizedProps?.__source;
 }
 
-export function findSlideSource(el: HTMLElement, deckId: string): SlideSourceHit | null {
-  const needle = `/slides/${deckId}/index.tsx`;
+export function findSlideSource(el: HTMLElement, slideId: string): SlideSourceHit | null {
+  const needle = `/slides/${slideId}/index.tsx`;
   let fiber = getFiber(el);
   let anchor: HTMLElement = el;
   while (fiber) {

package/src/app/lib/inspector/useComments.ts

@@ -10,14 +10,14 @@ export type SlideComment = {
 
 type ListResponse = { comments: SlideComment[] };
 
-export function useComments(deckId: string) {
+export function useComments(slideId: string) {
   const [comments, setComments] = useState<SlideComment[]>([]);
   const [error, setError] = useState<string | null>(null);
 
   const refetch = useCallback(async () => {
-    if (!deckId) return;
+    if (!slideId) return;
     try {
-      const res = await fetch(`/__comments?deckId=${encodeURIComponent(deckId)}`);
+      const res = await fetch(`/__comments?slideId=${encodeURIComponent(slideId)}`);
       if (!res.ok) {
         setError(`GET /__comments → ${res.status}`);
         return;
@@ -28,14 +28,14 @@ export function useComments(deckId: string) {
     } catch (e) {
       setError(String((e as Error).message ?? e));
     }
-  }, [deckId]);
+  }, [slideId]);
 
   const add = useCallback(
     async (line: number, column: number, text: string) => {
       const res = await fetch('/__comments/add', {
         method: 'POST',
         headers: { 'content-type': 'application/json' },
-        body: JSON.stringify({ deckId, line, column, text }),
+        body: JSON.stringify({ slideId, line, column, text }),
       });
       if (!res.ok) {
         const body = (await res.json().catch(() => ({}))) as { error?: string };
@@ -43,18 +43,18 @@ export function useComments(deckId: string) {
       }
       await refetch();
     },
-    [deckId, refetch],
+    [slideId, refetch],
   );
 
   const remove = useCallback(
     async (id: string) => {
-      const res = await fetch(`/__comments/${id}?deckId=${encodeURIComponent(deckId)}`, {
+      const res = await fetch(`/__comments/${id}?slideId=${encodeURIComponent(slideId)}`, {
         method: 'DELETE',
       });
       if (!res.ok) throw new Error(`DELETE /__comments/${id} → ${res.status}`);
       await refetch();
     },
-    [deckId, refetch],
+    [slideId, refetch],
   );
 
   useEffect(() => {

package/src/app/lib/sdk.ts

@@ -1,15 +1,30 @@
 import type { ComponentType } from 'react';
 
-export type SlidePage = ComponentType;
+export type Page = ComponentType;
 
-export type DeckMeta = {
+export type SlideMeta = {
   title?: string;
   theme?: 'light' | 'dark';
 };
 
-export type DeckModule = {
-  default: SlidePage[];
-  meta?: DeckMeta;
+export type SlideModule = {
+  default: Page[];
+  meta?: SlideMeta;
+};
+
+export type FolderIcon =
+  | { type: 'emoji'; value: string }
+  | { type: 'color'; value: string };
+
+export type Folder = {
+  id: string;
+  name: string;
+  icon: FolderIcon;
+};
+
+export type FoldersManifest = {
+  folders: Folder[];
+  assignments: Record<string, string>;
 };
 
 export const CANVAS_WIDTH = 1920;

package/src/app/lib/slides.ts

@@ -0,0 +1,8 @@
+import type { SlideModule } from './sdk';
+import { slideIds as ids, loadSlide as load } from 'virtual:open-slide/slides';
+
+export const slideIds: string[] = ids;
+
+export async function loadSlide(id: string): Promise<SlideModule> {
+  return load(id);
+}

package/src/app/routes/Home.tsx

@@ -1,34 +1,114 @@
-import { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { useEffect, useMemo, useState } from 'react';
+import { Link, useSearchParams } from 'react-router-dom';
 import { FolderPlus } from 'lucide-react';
-import { deckIds, loadDeck } from '../lib/decks';
-import type { DeckModule } from '../lib/sdk';
+import { slideIds, loadSlide } from '../lib/slides';
+import type { SlideModule } from '../lib/sdk';
 import { SlideCanvas } from '../components/SlideCanvas';
 import { Card, CardContent } from '@/components/ui/card';
+import { useFolders } from '@/lib/folders';
+import { Sidebar, DRAFT_ID } from '../components/sidebar/Sidebar';
+import { FolderIconChip, SLIDE_DND_MIME } from '../components/sidebar/FolderItem';
 
 export function Home() {
+  const { manifest, create, update, remove, assign } = useFolders();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const selectedId = searchParams.get('f') ?? DRAFT_ID;
+
+  const selectFolder = (id: string) => {
+    setSearchParams(
+      (prev) => {
+        const next = new URLSearchParams(prev);
+        if (id === DRAFT_ID) next.delete('f');
+        else next.set('f', id);
+        return next;
+      },
+      { replace: true },
+    );
+  };
+
+  const { draftSlides, slidesByFolder } = useMemo(() => {
+    const byFolder: Record<string, string[]> = {};
+    const draft: string[] = [];
+    const known = new Set(manifest.folders.map((f) => f.id));
+    for (const id of slideIds) {
+      const folderId = manifest.assignments[id];
+      if (folderId && known.has(folderId)) {
+        (byFolder[folderId] ??= []).push(id);
+      } else {
+        draft.push(id);
+      }
+    }
+    return { draftSlides: draft, slidesByFolder: byFolder };
+  }, [manifest]);
+
+  const countFor = (folderId: string | null) =>
+    folderId === null ? draftSlides.length : slidesByFolder[folderId]?.length ?? 0;
+
+  const selectedFolder =
+    selectedId === DRAFT_ID ? null : manifest.folders.find((f) => f.id === selectedId) ?? null;
+  const visibleSlides =
+    selectedId === DRAFT_ID ? draftSlides : slidesByFolder[selectedId] ?? [];
+
+  const title = selectedFolder?.name ?? 'Draft';
+  const headerIcon = selectedFolder?.icon ?? { type: 'emoji' as const, value: '📝' };
+
   return (
-    <div className="mx-auto max-w-6xl px-8 py-16">
-      <header className="mb-10 flex items-end justify-between gap-6">
-        <div>
-          <h1 className="font-heading text-3xl font-bold tracking-tight">open-slide</h1>
-          <p className="mt-1 text-sm text-muted-foreground">
-            {deckIds.length} deck{deckIds.length === 1 ? '' : 's'} · start with any agent using the{' '}
-            <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">create-slide</code>{' '}
-            skill
-          </p>
+    <div className="flex h-screen overflow-hidden bg-background">
+      <Sidebar
+        folders={manifest.folders}
+        countFor={countFor}
+        selectedId={selectedId}
+        onSelect={selectFolder}
+        onCreate={(name, icon) => create(name, icon)}
+        onRename={(id, name) => update(id, { name })}
+        onChangeIcon={(id, icon) => update(id, { icon })}
+        onDelete={(id) => {
+          if (selectedId === id) selectFolder(DRAFT_ID);
+          remove(id);
+        }}
+        onDropToFolder={(folderId, slideId) => assign(slideId, folderId)}
+        onDropToDraft={(slideId) => assign(slideId, null)}
+      />
+
+      <div className="flex min-w-0 flex-1 flex-col overflow-y-auto">
+        <div className="mx-auto w-full max-w-6xl px-8 py-12">
+          <header className="mb-8 flex items-center gap-3">
+            <FolderIconChip icon={headerIcon} className="size-6 text-xl" />
+            <h2 className="font-heading text-2xl font-bold tracking-tight">{title}</h2>
+            <span className="text-sm text-muted-foreground">
+              {visibleSlides.length} slide{visibleSlides.length === 1 ? '' : 's'}
+            </span>
+          </header>
+
+          {visibleSlides.length === 0 ? (
+            <EmptyState isDraft={selectedId === DRAFT_ID} folderName={selectedFolder?.name} />
+          ) : (
+            <ul className="grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-5">
+              {visibleSlides.map((id) => (
+                <li key={id}>
+                  <SlideCard id={id} />
+                </li>
+              ))}
+            </ul>
+          )}
         </div>
-      </header>
+      </div>
+    </div>
+  );
+}
 
-      {deckIds.length === 0 ? (
-        <Card className="border-dashed">
-          <CardContent className="flex flex-col items-center gap-3 py-16 text-center text-muted-foreground">
-            <FolderPlus className="size-8 opacity-50" />
-            <p>No decks yet.</p>
+function EmptyState({ isDraft, folderName }: { isDraft: boolean; folderName?: string }) {
+  return (
+    <Card className="border-dashed">
+      <CardContent className="flex flex-col items-center gap-3 py-16 text-center text-muted-foreground">
+        <FolderPlus className="size-8 opacity-50" />
+        {isDraft ? (
+          <>
+            <p>No slides yet.</p>
             <p className="text-sm">
               Create{' '}
               <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">
-                slides/my-deck/index.tsx
+                slides/my-slide/index.tsx
               </code>{' '}
               with{' '}
               <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">
@@ -36,28 +116,26 @@ export function Home() {
               </code>
               .
             </p>
-          </CardContent>
-        </Card>
-      ) : (
-        <ul className="grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-5">
-          {deckIds.map((id) => (
-            <li key={id}>
-              <DeckCard id={id} />
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
+          </>
+        ) : (
+          <>
+            <p>No slides in {folderName ?? 'this folder'}.</p>
+            <p className="text-sm">Drag a slide from Draft into the sidebar folder.</p>
+          </>
+        )}
+      </CardContent>
+    </Card>
   );
 }
 
-function DeckCard({ id }: { id: string }) {
-  const [deck, setDeck] = useState<DeckModule | null>(null);
+function SlideCard({ id }: { id: string }) {
+  const [slide, setSlide] = useState<SlideModule | null>(null);
+  const [dragging, setDragging] = useState(false);
   useEffect(() => {
     let cancelled = false;
-    loadDeck(id)
+    loadSlide(id)
       .then((mod) => {
-        if (!cancelled) setDeck(mod);
+        if (!cancelled) setSlide(mod);
       })
       .catch(() => {});
     return () => {
@@ -65,34 +143,45 @@ function DeckCard({ id }: { id: string }) {
     };
   }, [id]);
 
-  const FirstPage = deck?.default[0];
-  const title = deck?.meta?.title ?? id;
-  const pageCount = deck?.default.length ?? 0;
+  const FirstPage = slide?.default[0];
+  const title = slide?.meta?.title ?? id;
+  const pageCount = slide?.default.length ?? 0;
 
   return (
-    <Link
-      to={`/d/${id}`}
-      className="group block overflow-hidden rounded-xl bg-card text-card-foreground ring-1 ring-foreground/10 transition-all duration-200 hover:-translate-y-0.5 hover:ring-foreground/20 hover:shadow-lg"
+    <div
+      draggable
+      onDragStart={(e) => {
+        e.dataTransfer.setData(SLIDE_DND_MIME, id);
+        e.dataTransfer.effectAllowed = 'move';
+        setDragging(true);
+      }}
+      onDragEnd={() => setDragging(false)}
+      className={dragging ? 'opacity-50' : ''}
     >
-      <div className="relative aspect-video overflow-hidden bg-gradient-to-br from-indigo-50 to-violet-50">
-        {FirstPage ? (
-          <SlideCanvas flat>
-            <FirstPage />
-          </SlideCanvas>
-        ) : (
-          <div className="grid h-full w-full place-items-center text-xs tracking-widest uppercase text-muted-foreground/60">
-            Loading
-          </div>
-        )}
-      </div>
-      <div className="flex items-baseline justify-between gap-3 px-4 py-3">
-        <span className="truncate text-sm font-medium">{title}</span>
-        {pageCount > 0 && (
-          <span className="shrink-0 text-xs text-muted-foreground tabular-nums">
-            {pageCount} page{pageCount === 1 ? '' : 's'}
-          </span>
-        )}
-      </div>
-    </Link>
+      <Link
+        to={`/s/${id}`}
+        className="group block overflow-hidden rounded-xl bg-card text-card-foreground ring-1 ring-foreground/10 transition-all duration-200 hover:-translate-y-0.5 hover:ring-foreground/20 hover:shadow-lg"
+      >
+        <div className="relative aspect-video overflow-hidden bg-gradient-to-br from-indigo-50 to-violet-50">
+          {FirstPage ? (
+            <SlideCanvas flat>
+              <FirstPage />
+            </SlideCanvas>
+          ) : (
+            <div className="grid h-full w-full place-items-center text-xs tracking-widest uppercase text-muted-foreground/60">
+              Loading
+            </div>
+          )}
+        </div>
+        <div className="flex items-baseline justify-between gap-3 px-4 py-3">
+          <span className="truncate text-sm font-medium">{title}</span>
+          {pageCount > 0 && (
+            <span className="shrink-0 text-xs text-muted-foreground tabular-nums">
+              {pageCount} page{pageCount === 1 ? '' : 's'}
+            </span>
+          )}
+        </div>
+      </Link>
+    </div>
   );
 }