Use the platform navigation instead of a hand-built sidebar

README.md

@@ -88,7 +88,6 @@ src/
       use-app.ts         -- State management + CRUD operations
       use-router.ts      -- pushState URL router
     components/
-      sidebar.tsx        -- Navigation sidebar
       dashboard.tsx      -- Stats cards + upcoming posts
       post-composer.tsx  -- Multi-channel post editor with char limits
       calendar-view.tsx  -- Month grid calendar

package.json

@@ -8,9 +8,10 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@clawnify/app": "^0.1.0",
+    "@clawnify/app": "^0.2.1",
     "@clawnify/db": "^0.4.1",
     "@hono/zod-openapi": "^0.18.0",
+    "@phosphor-icons/react": "^2.1.10",
     "@tailwindcss/vite": "^4.2.2",
     "hono": "^4.6.0",
     "lucide-preact": "^0.575.0",

src/client/app.tsx

@@ -1,7 +1,8 @@
+import { useEffect } from "preact/hooks";
+import { AppNav, reportLocation, type AppNavItem } from "@clawnify/app/client";
 import { AppContext } from "./context";
 import { useAppState } from "./hooks/use-app";
 import { useRouter } from "./hooks/use-router";
-import { Sidebar } from "./components/sidebar";
 import { ErrorBanner } from "./components/error-banner";
 import { Dashboard } from "./components/dashboard";
 import { PostComposer } from "./components/post-composer";
@@ -11,9 +12,43 @@ import { DraftsView } from "./components/drafts-view";
 import { ChannelList } from "./components/channel-list";
 import { AnalyticsView } from "./components/analytics-view";
 
+// One definition of the navigation. <AppNav> paints it as this app's own
+// sidebar when the app is opened directly, and hands the same list to the
+// Clawnify dashboard's sidebar when it is embedded there — so the user always
+// sees one nav, never two. Item ids match the router's view names, which is
+// what keeps `active` a straight lookup.
+const PLANNING: AppNavItem[] = [
+  // The dashboard is home: not a row of its own, the app's name opens it.
+  { id: "dashboard", label: "Dashboard", href: "/", home: true },
+  { id: "compose", label: "Compose", href: "/compose", icon: "sparkles", color: "violet" },
+  { id: "calendar", label: "Calendar", href: "/calendar", icon: "calendar", color: "blue" },
+  { id: "queue", label: "Queue", href: "/queue", icon: "clock", color: "amber" },
+  { id: "drafts", label: "Drafts", href: "/drafts", icon: "file-text", color: "sky" },
+  { id: "analytics", label: "Analytics", href: "/analytics", icon: "bar-chart-3", color: "pink" },
+];
+const SETTINGS: AppNavItem[] = [
+  { id: "channels", label: "Channels", href: "/channels", icon: "hash", color: "green" },
+];
+
 export function App() {
   const appState = useAppState();
-  const { view, editId, navigate } = useRouter();
+  const { view, editId, path, navigate } = useRouter();
+
+  // Lets the dashboard restore this exact screen on reload.
+  useEffect(() => {
+    reportLocation(path);
+  }, [path]);
+
+  // Counts are plain state: the badges move the moment the numbers do, with
+  // no endpoint and no polling behind them. Zero reads as no badge at all.
+  const counts: Record<string, number> = {
+    queue: appState.stats?.scheduled ?? 0,
+    drafts: appState.stats?.drafts ?? 0,
+  };
+  const groups = [
+    { items: PLANNING.map((item) => (counts[item.id] ? { ...item, count: counts[item.id] } : item)) },
+    { label: "Settings", items: SETTINGS },
+  ];
 
   const renderMain = () => {
     switch (view) {
@@ -29,8 +64,16 @@ export function App() {
 
   return (
     <AppContext.Provider value={appState}>
-      <div class="flex min-h-screen">
-        <Sidebar currentView={view} navigate={navigate} />
+      {/* The sidebar is a 275px column at ≥768px and a horizontal strip below
+          it, so it has to be the first child of a flex-col/md:flex-row shell. */}
+      <div class="flex min-h-screen flex-col md:flex-row">
+        <AppNav
+          title="Open Post"
+          icon="send"
+          groups={groups}
+          active={view}
+          onNavigate={(item) => navigate(item.href ?? "/")}
+        />
         <main class="flex-1 overflow-auto min-w-0">
           {appState.loading ? (
             <div class="flex items-center justify-center h-full">

src/client/hooks/use-app.ts

@@ -48,8 +48,11 @@ export function useAppState() {
     } catch (e: any) { setError(e.message); }
   }, []);
 
+  // Stats ride along at boot because the sidebar's queue/drafts badges read
+  // them, and those have to be right on whichever screen the app opens at —
+  // `posts` is filtered per view, so it cannot be counted for this.
   useEffect(() => {
-    Promise.all([loadChannels(), loadLabels(), loadPosts()]).then(() => setLoading(false));
+    Promise.all([loadChannels(), loadLabels(), loadPosts(), loadStats()]).then(() => setLoading(false));
   }, []);
 
   // ── Channel CRUD ──

src/client/hooks/use-router.ts

@@ -4,21 +4,24 @@ import type { View } from "../types";
 interface RouterState {
   view: View;
   editId: number | null;
+  // The location itself, so the host bridge can report it verbatim.
+  path: string;
 }
 
 function parseLocation(): RouterState {
   const path = window.location.pathname;
-  if (path === "/calendar") return { view: "calendar", editId: null };
-  if (path === "/queue") return { view: "queue", editId: null };
-  if (path === "/drafts") return { view: "drafts", editId: null };
-  if (path === "/channels") return { view: "channels", editId: null };
-  if (path === "/analytics") return { view: "analytics", editId: null };
-  if (path === "/compose") return { view: "compose", editId: null };
+  const here = path + window.location.search;
+  if (path === "/calendar") return { view: "calendar", editId: null, path: here };
+  if (path === "/queue") return { view: "queue", editId: null, path: here };
+  if (path === "/drafts") return { view: "drafts", editId: null, path: here };
+  if (path === "/channels") return { view: "channels", editId: null, path: here };
+  if (path === "/analytics") return { view: "analytics", editId: null, path: here };
+  if (path === "/compose") return { view: "compose", editId: null, path: here };
   if (path.startsWith("/compose/")) {
     const id = Number(path.split("/")[2]);
-    return { view: "compose", editId: isNaN(id) ? null : id };
+    return { view: "compose", editId: isNaN(id) ? null : id, path: here };
   }
-  return { view: "dashboard", editId: null };
+  return { view: "dashboard", editId: null, path: here };
 }
 
 export function useRouter() {
@@ -35,5 +38,5 @@ export function useRouter() {
     setState(parseLocation());
   }, []);
 
-  return { view: state.view, editId: state.editId, navigate };
+  return { view: state.view, editId: state.editId, path: state.path, navigate };
 }