feat: migrate admin content and moderation modules

admin/src/components/app-shell.tsx

@@ -1,4 +1,15 @@
-import { ExternalLink, LayoutDashboard, LogOut, Orbit, Settings, Sparkles } from 'lucide-react'
+import {
+  BookOpenText,
+  ExternalLink,
+  LayoutDashboard,
+  Link2,
+  LogOut,
+  MessageSquareText,
+  Orbit,
+  ScrollText,
+  Settings,
+  Sparkles,
+} from 'lucide-react'
 import type { ReactNode } from 'react'
 import { NavLink } from 'react-router-dom'
 
@@ -14,6 +25,30 @@ const primaryNav = [
     description: 'Live operational dashboard',
     icon: LayoutDashboard,
   },
+  {
+    to: '/posts',
+    label: 'Posts',
+    description: 'Markdown content workspace',
+    icon: ScrollText,
+  },
+  {
+    to: '/comments',
+    label: 'Comments',
+    description: 'Moderation and paragraph replies',
+    icon: MessageSquareText,
+  },
+  {
+    to: '/friend-links',
+    label: 'Friend links',
+    description: 'Partner queue and reciprocity',
+    icon: Link2,
+  },
+  {
+    to: '/reviews',
+    label: 'Reviews',
+    description: 'Curated review library',
+    icon: BookOpenText,
+  },
   {
     to: '/settings',
     label: 'Site settings',
@@ -22,8 +57,6 @@ const primaryNav = [
   },
 ]
 
-const nextNav = ['Posts editor', 'Comments moderation', 'Friend links queue', 'Review library']
-
 export function AppShell({
   children,
   username,
@@ -51,8 +84,8 @@ export function AppShell({
                     Control room for the blog system
                   </h1>
                   <p className="text-sm leading-6 text-muted-foreground">
-                    A separate React workspace for operations, moderation, and AI-related site
-                    controls.
+                    A dedicated React workspace for publishing, moderation, operations, and
+                    AI-related site controls.
                   </p>
                 </div>
               </div>
@@ -104,28 +137,25 @@ export function AppShell({
 
               <Separator />
 
-              <div className="space-y-3">
-                <div className="flex items-center justify-between">
+              <div className="rounded-[1.7rem] border border-border/70 bg-background/65 p-5">
+                <div className="flex items-center justify-between gap-3">
                   <div>
                     <p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">
-                      Migration queue
+                      Workspace status
                     </p>
                     <p className="mt-1 text-sm text-muted-foreground">
-                      Legacy Tera screens that move here next.
+                      Core admin flows are now available in the standalone app.
                     </p>
                   </div>
-                  <Badge variant="outline">phase 1</Badge>
+                  <Badge variant="success">live</Badge>
                 </div>
-                <div className="space-y-2">
-                  {nextNav.map((item) => (
-                    <div
-                      key={item}
-                      className="flex items-center justify-between rounded-2xl border border-border/60 bg-background/60 px-4 py-3"
-                    >
-                      <span className="text-sm text-muted-foreground">{item}</span>
-                      <Badge variant="secondary">next</Badge>
-                    </div>
-                  ))}
+                <div className="mt-4 grid gap-2">
+                  <div className="rounded-2xl border border-border/60 bg-card/70 px-4 py-3 text-sm text-muted-foreground">
+                    Public site and admin stay decoupled.
+                  </div>
+                  <div className="rounded-2xl border border-border/60 bg-card/70 px-4 py-3 text-sm text-muted-foreground">
+                    Backend remains the shared auth and data layer.
+                  </div>
                 </div>
               </div>
             </div>
@@ -148,6 +178,26 @@ export function AppShell({
                 </div>
               </div>
 
+              <div className="flex gap-2 overflow-x-auto lg:hidden">
+                {primaryNav.map((item) => (
+                  <NavLink
+                    key={item.to}
+                    to={item.to}
+                    end={item.to === '/'}
+                    className={({ isActive }) =>
+                      cn(
+                        'rounded-full border px-3 py-2 text-sm whitespace-nowrap transition-colors',
+                        isActive
+                          ? 'border-primary/30 bg-primary/10 text-primary'
+                          : 'border-border/70 bg-background/60 text-muted-foreground',
+                      )
+                    }
+                  >
+                    {item.label}
+                  </NavLink>
+                ))}
+              </div>
+
               <div className="flex flex-wrap items-center gap-3">
                 <Button variant="outline" asChild>
                   <a href="http://localhost:4321" target="_blank" rel="noreferrer">