feat: app shell — sidebar, layout, workspace context (#25) (#44)

* feat: app shell — sidebar, layout, workspace context (#25)

- Add (app)/ layout with collapsible sidebar + main content area
- Sidebar: workspace switcher (placeholder), page tree (placeholder), user menu with sign-out
- Mobile (<768px): sidebar renders as Sheet, hamburger toggle in header
- Keyboard shortcut ⌘+\ toggles sidebar visibility
- Root / redirects authenticated users to their personal workspace
- Install shadcn/ui sheet, dropdown-menu, separator components

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

* fix: move SheetTitle inside SheetContent portal for accessibility

SheetTitle was a sibling of SheetContent, but SheetContent renders
through a portal. The title ended up in the main DOM while the dialog
was in the portal — screen readers couldn't associate them.

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

---------

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

Author: zacharias-ona

.agents/architecture.md

@@ -144,7 +144,7 @@ Auto-save: debounce 500ms on editor change → write to Supabase
 src/
 ├── app/                    # Next.js App Router
 │   ├── layout.tsx          # Root layout (JetBrains Mono font, TooltipProvider)
-│   ├── page.tsx            # Landing page
+│   ├── page.tsx            # Landing page (redirects authenticated users to workspace)
 │   ├── manifest.ts         # PWA manifest (name, icons, display mode)
 │   ├── global-error.tsx    # Sentry error boundary
 │   ├── globals.css         # Tailwind v4 theme — dark-only oklch tokens, --radius: 0
@@ -153,7 +153,7 @@ src/
 │   │   ├── sign-in/page.tsx # /sign-in — email/password form
 │   │   └── sign-up/page.tsx # /sign-up — display name + email/password form
 │   ├── (app)/              # Authenticated route group
-│   │   ├── layout.tsx      # Auth guard (redirects to /sign-in if no session), sign-out button
+│   │   ├── layout.tsx      # Auth guard, fetches profile, renders AppShell
 │   │   └── [workspaceSlug]/
 │   │       └── page.tsx    # /[workspaceSlug] — workspace home (placeholder)
 │   └── api/
@@ -162,11 +162,21 @@ src/
 │   ├── auth/
 │   │   ├── oauth-buttons.tsx    # GitHub + Google buttons (disabled, "coming soon" tooltip)
 │   │   └── sign-out-button.tsx  # Sign-out button (clears session, redirects to /sign-in)
+│   ├── sidebar/             # App shell sidebar components
+│   │   ├── app-shell.tsx        # Client wrapper: SidebarProvider + sidebar + main layout
+│   │   ├── app-sidebar.tsx      # Sidebar (desktop: collapsible aside, mobile: Sheet)
+│   │   ├── sidebar-context.tsx  # React context for sidebar open/close state + ⌘+\ shortcut
+│   │   ├── workspace-switcher.tsx # Workspace name display (placeholder — functional in #27)
+│   │   ├── page-tree.tsx        # Page list placeholder (functional in #28)
+│   │   └── user-menu.tsx        # User dropdown with sign-out
 │   └── ui/                 # shadcn/ui components (base-nova style, base-ui primitives)
 │       ├── button.tsx
 │       ├── card.tsx
+│       ├── dropdown-menu.tsx
 │       ├── input.tsx
 │       ├── label.tsx
+│       ├── separator.tsx
+│       ├── sheet.tsx
 │       └── tooltip.tsx
 ├── lib/
 │   ├── utils.ts            # cn() utility (clsx + tailwind-merge)

src/app/(app)/layout.tsx

@@ -1,6 +1,6 @@
 import { redirect } from "next/navigation";
 import { createClient } from "@/lib/supabase/server";
-import { SignOutButton } from "@/components/auth/sign-out-button";
+import { AppShell } from "@/components/sidebar/app-shell";
 
 export default async function AppLayout({
   children,
@@ -16,12 +16,19 @@ export default async function AppLayout({
     redirect("/sign-in");
   }
 
+  const { data: profile } = await supabase
+    .from("profiles")
+    .select("display_name, email")
+    .eq("id", user.id)
+    .maybeSingle();
+
+  const displayName =
+    profile?.display_name || user.user_metadata?.display_name || "User";
+  const email = profile?.email || user.email || "";
+
   return (
-    <div className="flex min-h-screen flex-col">
-      <header className="flex items-center justify-end border-b border-white/[0.06] px-4 py-2">
-        <SignOutButton />
-      </header>
-      <main className="flex-1">{children}</main>
-    </div>
+    <AppShell displayName={displayName} email={email}>
+      {children}
+    </AppShell>
   );
 }

src/app/page.tsx

@@ -1,24 +1,60 @@
-export default function Home() {
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { createClient } from "@/lib/supabase/server";
+
+export default async function Home() {
+  const supabase = await createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (user) {
+    // Redirect authenticated users to their first workspace
+    const { data: membership } = await supabase
+      .from("members")
+      .select("workspace_id, workspaces(slug)")
+      .eq("user_id", user.id)
+      .limit(1)
+      .maybeSingle();
+
+    // Supabase types the joined relation based on schema — extract slug safely
+    const workspaces = membership?.workspaces as
+      | { slug: string }
+      | { slug: string }[]
+      | null
+      | undefined;
+    const slug = Array.isArray(workspaces)
+      ? workspaces[0]?.slug
+      : workspaces?.slug;
+    if (slug) {
+      redirect(`/${slug}`);
+    }
+  }
+
   return (
     <main className="flex min-h-screen flex-col items-center justify-center p-8">
       <div className="max-w-2xl text-center space-y-6">
-        <h1 className="text-5xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
-          Memo
-        </h1>
-        <p className="text-xl text-zinc-500 dark:text-zinc-400">
+        <h1 className="text-5xl font-bold tracking-tight">Memo</h1>
+        <p className="text-sm text-muted-foreground">
           A Notion-style workspace, built with zero human code.
         </p>
         <div className="flex gap-4 justify-center">
           <a
             href="https://github.com/gitpod-io/memo"
-            className="inline-flex items-center px-4 py-2 rounded-md bg-zinc-900 text-white hover:bg-zinc-800 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-200 transition-colors"
+            className="inline-flex items-center px-4 py-2 bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/80"
             target="_blank"
             rel="noopener noreferrer"
           >
             View Source
           </a>
+          <Link
+            href="/sign-in"
+            className="inline-flex items-center px-4 py-2 border border-white/[0.06] text-sm font-medium hover:bg-muted"
+          >
+            Sign In
+          </Link>
         </div>
-        <p className="text-sm text-zinc-400 dark:text-zinc-500 pt-8">
+        <p className="text-xs text-muted-foreground pt-8">
           Every line of code in this repository is written by AI agents.
         </p>
       </div>

src/components/sidebar/app-shell.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import { createClient } from "@/lib/supabase/client";
+import { SidebarProvider } from "@/components/sidebar/sidebar-context";
+import { AppSidebar, SidebarToggle } from "@/components/sidebar/app-sidebar";
+import type { ReactNode } from "react";
+
+interface AppShellProps {
+  displayName: string;
+  email: string;
+  children: ReactNode;
+}
+
+export function AppShell({ displayName, email, children }: AppShellProps) {
+  const params = useParams<{ workspaceSlug?: string }>();
+  const [workspaceName, setWorkspaceName] = useState("");
+
+  useEffect(() => {
+    if (!params.workspaceSlug) return;
+
+    const supabase = createClient();
+    supabase
+      .from("workspaces")
+      .select("name")
+      .eq("slug", params.workspaceSlug)
+      .maybeSingle()
+      .then(({ data }) => {
+        if (data) setWorkspaceName(data.name);
+      });
+  }, [params.workspaceSlug]);
+
+  return (
+    <SidebarProvider>
+      <div className="flex h-screen overflow-hidden">
+        <AppSidebar
+          workspaceName={workspaceName || "Workspace"}
+          displayName={displayName}
+          email={email}
+        />
+        <div className="flex flex-1 flex-col overflow-hidden">
+          <header className="flex h-10 shrink-0 items-center gap-2 border-b border-white/[0.06] px-4 md:hidden">
+            <SidebarToggle />
+          </header>
+          <main className="flex-1 overflow-y-auto">{children}</main>
+        </div>
+      </div>
+    </SidebarProvider>
+  );
+}

src/components/sidebar/app-sidebar.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { Menu } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sheet,
+  SheetContent,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { useSidebar } from "@/components/sidebar/sidebar-context";
+import { WorkspaceSwitcher } from "@/components/sidebar/workspace-switcher";
+import { PageTree } from "@/components/sidebar/page-tree";
+import { UserMenu } from "@/components/sidebar/user-menu";
+
+interface AppSidebarProps {
+  workspaceName: string;
+  displayName: string;
+  email: string;
+}
+
+function SidebarContent({
+  workspaceName,
+  displayName,
+  email,
+}: AppSidebarProps) {
+  return (
+    <div className="flex h-full flex-col gap-2 p-2">
+      <WorkspaceSwitcher workspaceName={workspaceName} />
+      <Separator className="bg-white/[0.06]" />
+      <PageTree />
+      <Separator className="bg-white/[0.06]" />
+      <UserMenu displayName={displayName} email={email} />
+    </div>
+  );
+}
+
+export function AppSidebar(props: AppSidebarProps) {
+  const { open, setOpen, isMobile } = useSidebar();
+
+  if (isMobile) {
+    return (
+      <Sheet open={open} onOpenChange={setOpen}>
+        <SheetContent
+          side="left"
+          className="w-60 bg-muted p-0"
+          showCloseButton={false}
+        >
+          <SheetTitle className="sr-only">Navigation</SheetTitle>
+          <SidebarContent {...props} />
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  return (
+    <aside
+      className="h-full w-60 shrink-0 border-r border-white/[0.06] bg-muted transition-[width,opacity] duration-200 ease-out"
+      style={{
+        width: open ? 240 : 0,
+        opacity: open ? 1 : 0,
+        overflow: "hidden",
+      }}
+    >
+      <SidebarContent {...props} />
+    </aside>
+  );
+}
+
+export function SidebarToggle() {
+  const { toggle, isMobile } = useSidebar();
+
+  if (!isMobile) return null;
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon-sm"
+      className="shrink-0"
+      onClick={toggle}
+      aria-label="Toggle sidebar"
+    >
+      <Menu className="h-4 w-4" />
+    </Button>
+  );
+}

src/components/sidebar/page-tree.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { FileText, Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+export function PageTree() {
+  return (
+    <div className="flex flex-1 flex-col gap-1">
+      <p className="px-2 text-xs tracking-widest uppercase text-white/30">
+        Pages
+      </p>
+      <div className="flex flex-col gap-0.5">
+        <div className="flex items-center gap-2 px-2 py-1 text-sm text-muted-foreground">
+          <FileText className="h-4 w-4" />
+          <span>No pages yet</span>
+        </div>
+      </div>
+      <Button
+        variant="ghost"
+        className="mt-1 w-full justify-start gap-2 px-2 text-muted-foreground"
+        size="sm"
+      >
+        <Plus className="h-4 w-4" />
+        New Page
+      </Button>
+    </div>
+  );
+}

src/components/sidebar/sidebar-context.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
+
+interface SidebarContextValue {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  toggle: () => void;
+  isMobile: boolean;
+}
+
+const SidebarContext = createContext<SidebarContextValue | null>(null);
+
+const MOBILE_BREAKPOINT = 768;
+
+export function SidebarProvider({ children }: { children: ReactNode }) {
+  const [open, setOpen] = useState(true);
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = (e: MediaQueryListEvent | MediaQueryList) => {
+      const mobile = e.matches;
+      setIsMobile(mobile);
+      if (mobile) {
+        setOpen(false);
+      }
+    };
+    onChange(mql);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  const toggle = useCallback(() => setOpen((prev) => !prev), []);
+
+  // ⌘+\ keyboard shortcut to toggle sidebar
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "\\" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        toggle();
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggle]);
+
+  return (
+    <SidebarContext.Provider value={{ open, setOpen, toggle, isMobile }}>
+      {children}
+    </SidebarContext.Provider>
+  );
+}
+
+export function useSidebar() {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  }
+  return context;
+}