feat: pages CRUD and sidebar page tree (#27) (#48)

* feat: pages CRUD and sidebar page tree (#27)

Co-authored-by: Ona <no-reply@ona.com>

* fix: [ci-fix] resolve review nits — inline style to Tailwind, saveTitle error handling

- Replace inline style={{ minHeight: "60vh" }} with Tailwind min-h-[60vh] class
- Move lastSavedRef update after successful Supabase write so failed saves retry

Co-authored-by: Ona <no-reply@ona.com>

---------

Co-authored-by: Ona <no-reply@ona.com>

Author: zacharias-ona

.agents/architecture.md

@@ -155,7 +155,8 @@ src/
 │   ├── (app)/              # Authenticated route group
 │   │   ├── layout.tsx      # Auth guard, fetches profile, renders AppShell
 │   │   └── [workspaceSlug]/
-│   │       └── page.tsx    # /[workspaceSlug] — workspace home (placeholder)
+│   │       ├── page.tsx    # /[workspaceSlug] — workspace home (page list or empty state)
+│   │       └── [pageId]/page.tsx  # /[workspaceSlug]/[pageId] — page with title + editor placeholder
 │   └── api/
 │       └── health/route.ts # Health check endpoint (DB connectivity)
 ├── components/
@@ -168,8 +169,10 @@ src/
 │   │   ├── sidebar-context.tsx  # React context for sidebar open/close state + ⌘+\ shortcut
 │   │   ├── workspace-switcher.tsx # Dropdown listing all workspaces, create workspace trigger
 │   │   ├── create-workspace-dialog.tsx # Dialog for creating a new workspace
-│   │   ├── page-tree.tsx        # Page list placeholder (functional in #28)
+│   │   ├── page-tree.tsx        # Hierarchical page tree with CRUD, drag-and-drop, nest/unnest
 │   │   └── user-menu.tsx        # User dropdown with settings link + sign-out
+│   ├── page-title.tsx           # Inline-editable page title (saves on blur/Enter)
+│   ├── workspace-home.tsx       # Workspace home: page list or empty state with create CTA
 │   ├── workspace-settings-form.tsx # Edit workspace name/slug, delete workspace
 │   └── ui/                 # shadcn/ui components (base-nova style, base-ui primitives)
 │       ├── alert-dialog.tsx
@@ -214,7 +217,7 @@ src/
 │   │   ├── layout.tsx                 # App shell (sidebar + main content), passes userId
 │   │   └── [workspaceSlug]/
 │   │       ├── page.tsx               # /[workspaceSlug] (workspace home)
-│   │       ├── [pageId]/page.tsx      # /[workspaceSlug]/[pageId] (editor) — planned
+│   │       ├── [pageId]/page.tsx      # /[workspaceSlug]/[pageId] (page view + editor placeholder)
 │   │       └── settings/
 │   │           ├── page.tsx           # /[workspaceSlug]/settings (name, slug, delete)
 │   │           └── members/page.tsx   # /[workspaceSlug]/settings/members — planned

src/app/(app)/[workspaceSlug]/[pageId]/page.tsx

@@ -0,0 +1,44 @@
+import { notFound } from "next/navigation";
+import { createClient } from "@/lib/supabase/server";
+import { PageTitle } from "@/components/page-title";
+
+export default async function PageView({
+  params,
+}: {
+  params: Promise<{ workspaceSlug: string; pageId: string }>;
+}) {
+  const { workspaceSlug, pageId } = await params;
+  const supabase = await createClient();
+
+  const { data: workspace } = await supabase
+    .from("workspaces")
+    .select("id")
+    .eq("slug", workspaceSlug)
+    .maybeSingle();
+
+  if (!workspace) {
+    notFound();
+  }
+
+  const { data: page } = await supabase
+    .from("pages")
+    .select("*")
+    .eq("id", pageId)
+    .eq("workspace_id", workspace.id)
+    .maybeSingle();
+
+  if (!page) {
+    notFound();
+  }
+
+  return (
+    <div className="mx-auto max-w-3xl p-6">
+      <PageTitle key={page.id} pageId={page.id} initialTitle={page.title} />
+      <div className="mt-4">
+        <p className="text-sm text-muted-foreground">
+          Type &apos;/&apos; for commands
+        </p>
+      </div>
+    </div>
+  );
+}

src/app/(app)/[workspaceSlug]/page.tsx

@@ -1,5 +1,6 @@
 import { notFound } from "next/navigation";
 import { createClient } from "@/lib/supabase/server";
+import { WorkspaceHome } from "@/components/workspace-home";
 
 export default async function WorkspacePage({
   params,
@@ -9,6 +10,10 @@ export default async function WorkspacePage({
   const { workspaceSlug } = await params;
   const supabase = await createClient();
 
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
   const { data: workspace } = await supabase
     .from("workspaces")
     .select("id, name, slug")
@@ -19,14 +24,18 @@ export default async function WorkspacePage({
     notFound();
   }
 
+  const { data: pages } = await supabase
+    .from("pages")
+    .select("id, title, parent_id, position, icon, updated_at")
+    .eq("workspace_id", workspace.id)
+    .is("parent_id", null)
+    .order("position", { ascending: true });
+
   return (
-    <div className="flex flex-col items-center justify-center p-6">
-      <div className="max-w-2xl space-y-4 text-center">
-        <h1 className="text-2xl font-semibold">{workspace.name}</h1>
-        <p className="text-sm text-muted-foreground">
-          Your workspace is ready. Pages and editor coming soon.
-        </p>
-      </div>
-    </div>
+    <WorkspaceHome
+      workspace={workspace}
+      pages={pages ?? []}
+      userId={user?.id ?? ""}
+    />
   );
 }

src/components/page-title.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createClient } from "@/lib/supabase/client";
+
+interface PageTitleProps {
+  pageId: string;
+  initialTitle: string;
+}
+
+/**
+ * Inline-editable page title. Parent should use `key={pageId}` to reset
+ * state when navigating between pages.
+ */
+export function PageTitle({ pageId, initialTitle }: PageTitleProps) {
+  const [title, setTitle] = useState(initialTitle);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const lastSavedRef = useRef(initialTitle);
+
+  // Focus the title field when the page is new (empty title)
+  useEffect(() => {
+    if (!initialTitle && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [initialTitle]);
+
+  const saveTitle = useCallback(
+    async (value: string) => {
+      const trimmed = value.trim();
+      if (trimmed === lastSavedRef.current) return;
+
+      const supabase = createClient();
+      const { error } = await supabase
+        .from("pages")
+        .update({ title: trimmed })
+        .eq("id", pageId);
+
+      if (!error) {
+        lastSavedRef.current = trimmed;
+      }
+    },
+    [pageId]
+  );
+
+  function handleBlur() {
+    saveTitle(title);
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      saveTitle(title);
+      inputRef.current?.blur();
+    }
+  }
+
+  return (
+    <input
+      ref={inputRef}
+      type="text"
+      value={title}
+      onChange={(e) => setTitle(e.target.value)}
+      onBlur={handleBlur}
+      onKeyDown={handleKeyDown}
+      placeholder="Untitled"
+      className="w-full bg-transparent text-3xl font-bold text-foreground placeholder:text-muted-foreground outline-none"
+      aria-label="Page title"
+    />
+  );
+}

src/components/sidebar/app-sidebar.tsx

@@ -28,7 +28,7 @@ function SidebarContent({
     <div className="flex h-full flex-col gap-2 p-2">
       <WorkspaceSwitcher userId={userId} />
       <Separator className="bg-white/[0.06]" />
-      <PageTree />
+      <PageTree userId={userId} />
       <Separator className="bg-white/[0.06]" />
       <UserMenu displayName={displayName} email={email} />
     </div>