UI iteration 2: toggleable sidebar, floating composer blob, pending-question morph
Sidebar (replaces the modal drawer): - Inline, toggleable, no backdrop/focus theft — can stay open while working - Open state persists across pages (provider in root layout) and reloads (localStorage; starts closed server-side to avoid hydration mismatch, stored value applied post-mount; default open on first run) - Hamburger in page headers only when closed; close button in sidebar header Floating composer blob (per reference screenshot): - Floats over the transcript (absolute overlay), persists at bottom while scrolling, content fades behind it (gradient mask); pb-44 scroll clearance - Concentric corner radii: blob rounded-2xl(16px) − p-1.5(6px) = send rounded-[10px] = 25% of the 40px button; CornerDownLeft icon per reference - Stop moved from header into the blob (busy → square icon) - prompt-input.tsx + 7 orphan ui files pruned (attachments/command palette unused); hand-rolled Composer is ~100 lines and render-tested Pending-question morph (one text field on screen, never two): - Quiz/ask-select pending → blob becomes the note field (send hidden, hint line above); card's internal note input removed; Submit consumes it - Ask free-text pending → blob becomes the answer field; its send submits via the card's registered submit api (ref bridge); Enter works - Chat owns the single text state; card clears it on submit - canSend for answer mode mirrors the card predicate directly — reading the ref during render lagged one commit (found in browser testing) Widths: one shared column (max-w-3xl + px-4) for transcript, cards, and composer — all three measured pixel-identical (left 416, width 736). Assistant Message max-w-full/MessageContent w-full (was max-w-[95%]/w-fit — the 'cards are a bit shorter' bug). User messages render plain text again — no math pipeline on learner-authored text (currency hazard accepted for the model only, guarded by the prompt). Tests: 58 pass (5 new composer pins; card tests updated to controlled props). Verified live: note flow, answer flow, sidebar persistence, float, fade, zero console errors — plus the live model spontaneously honoring the $ currency escape contract in a continuation.
This commit is contained in:
Amos
@@ -0,0 +1,141 @@
|
||||
"use client";
|
||||
|
||||
import { createContext, useCallback, useContext, useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { PanelLeftCloseIcon, PanelLeftOpenIcon } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { ChatSummary } from "@/src/store/chats";
|
||||
|
||||
/**
|
||||
* Toggleable sidebar — NOT a modal drawer: no backdrop, no focus theft. It
|
||||
* sits inline next to the content and can stay open while working in a
|
||||
* session. Open state persists across pages (provider lives in the root
|
||||
* layout) and across reloads (localStorage).
|
||||
*/
|
||||
|
||||
const STORAGE_KEY = "lh:sidebar-open";
|
||||
|
||||
const SidebarContext = createContext<{ open: boolean; toggle: () => void }>({
|
||||
open: false,
|
||||
toggle: () => {},
|
||||
});
|
||||
|
||||
export function useSidebar() {
|
||||
return useContext(SidebarContext);
|
||||
}
|
||||
|
||||
export function SidebarProvider({ children }: { children: React.ReactNode }) {
|
||||
// Start closed so server and client first-render agree (no hydration
|
||||
// mismatch); the stored value is applied after mount.
|
||||
const [open, setOpen] = useState(false);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const stored = localStorage.getItem(STORAGE_KEY);
|
||||
// Default: open (first run introduces the sidebar).
|
||||
setOpen(stored === null ? true : stored === "1");
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
const toggle = useCallback(() => {
|
||||
setOpen((v) => {
|
||||
localStorage.setItem(STORAGE_KEY, v ? "0" : "1");
|
||||
return !v;
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<SidebarContext.Provider value={{ open, toggle }}>
|
||||
{/* transitions gated on mount: no slide-in flash on page load */}
|
||||
<div className={cn("flex h-dvh", mounted && "[&_.sidebar-motion]:transition-[width]")}>{children}</div>
|
||||
</SidebarContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
/** Hamburger for page headers — only visible when the sidebar is closed. */
|
||||
export function SidebarToggle() {
|
||||
const { open, toggle } = useSidebar();
|
||||
if (open) return null;
|
||||
return (
|
||||
<Button variant="ghost" size="icon" aria-label="Open sidebar" onClick={toggle}>
|
||||
<PanelLeftOpenIcon className="size-5" />
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
function SessionsSidebar() {
|
||||
const { open, toggle } = useSidebar();
|
||||
const [chats, setChats] = useState<ChatSummary[] | null>(null);
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
let cancelled = false;
|
||||
fetch("/api/chats", { cache: "no-store" })
|
||||
.then((r) => r.json())
|
||||
.then((d: { chats: ChatSummary[] }) => !cancelled && setChats(d.chats))
|
||||
.catch(() => !cancelled && setChats([]));
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [open, pathname]);
|
||||
|
||||
return (
|
||||
<aside
|
||||
className={cn("sidebar-motion shrink-0 overflow-hidden duration-200", open ? "w-72" : "w-0")}
|
||||
aria-hidden={!open}
|
||||
>
|
||||
<div className="flex h-full w-72 flex-col border-r bg-background">
|
||||
<div className="flex items-center justify-between px-4 py-3">
|
||||
<Link href="/" className="font-semibold tracking-tight hover:opacity-80">
|
||||
Learning Harness
|
||||
</Link>
|
||||
<Button variant="ghost" size="icon" aria-label="Close sidebar" onClick={toggle}>
|
||||
<PanelLeftCloseIcon className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-2">
|
||||
{chats === null ? (
|
||||
<div className="px-2 py-4 text-sm text-muted-foreground">Loading…</div>
|
||||
) : chats.length === 0 ? (
|
||||
<div className="px-2 py-4 text-sm text-muted-foreground">No sessions yet.</div>
|
||||
) : (
|
||||
chats.map((c) => {
|
||||
const active = pathname === `/chat/${c.id}`;
|
||||
return (
|
||||
<button
|
||||
key={c.id}
|
||||
type="button"
|
||||
onClick={() => router.push(`/chat/${c.id}`)}
|
||||
className={cn(
|
||||
"mb-0.5 w-full rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-accent",
|
||||
active && "bg-accent font-medium",
|
||||
)}
|
||||
>
|
||||
<div className="truncate">{c.title}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{c.messageCount} messages · {new Date(c.updatedAt).toLocaleDateString()}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
/** The app frame: sidebar inline + content. Rendered once in the root layout. */
|
||||
export function AppShell({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<>
|
||||
<SessionsSidebar />
|
||||
<main className="min-w-0 flex-1">{children}</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user