img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export {
+ Card,
+ CardHeader,
+ CardFooter,
+ CardTitle,
+ CardAction,
+ CardDescription,
+ CardContent,
+}
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..d9aecca
--- /dev/null
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -0,0 +1,168 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({
+ ...props
+}: React.ComponentProps
) {
+ return ) {
+ return ) {
+ return ) {
+ return ) {
+ return (
+ & {
+ showCloseButton?: boolean
+}) {
+ return (
+
+
+ {children}
+ {showCloseButton && (
+
+
+ Close
+
+
+ )}
+
+
+ )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function DialogFooter({
+ className,
+ showCloseButton = false,
+ children,
+ ...props
+}: React.ComponentProps<"div"> & {
+ showCloseButton?: boolean
+}) {
+ return (
+
+ {children}
+ {showCloseButton && (
+
+ Close
+
+ )}
+
+ )
+}
+
+function DialogTitle({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+ ) {
+ return ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+
+
+ )
+}
+
+function DropdownMenuGroup({
+ ...props
+}: React.ComponentProps) {
+ return (
+ & {
+ inset?: boolean
+ variant?: "default" | "destructive"
+}) {
+ return (
+ & {
+ inset?: boolean
+}) {
+ return (
+
+
+
+
+
+ {children}
+
+ )
+}
+
+function DropdownMenuRadioGroup({
+ ...props
+}: React.ComponentProps) {
+ return (
+ & {
+ inset?: boolean
+}) {
+ return (
+
+
+
+
+
+ {children}
+
+ )
+}
+
+function DropdownMenuLabel({
+ className,
+ inset,
+ ...props
+}: React.ComponentProps & {
+ inset?: boolean
+}) {
+ return (
+ ) {
+ return (
+ ) {
+ return & {
+ inset?: boolean
+}) {
+ return (
+
+ {children}
+
+ )
+}
+
+function DropdownMenuSubContent({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+ ) {
+ return ) {
+ return ) {
+ return ) {
+ return ) {
+ return (
+ & {
+ side?: "top" | "right" | "bottom" | "left"
+ showCloseButton?: boolean
+}) {
+ return (
+
+
+ {children}
+ {showCloseButton && (
+
+
+ Close
+
+
+ )}
+
+
+ )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function SheetTitle({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ &
+ VariantProps) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ ) {
+ return ) {
+ return ) {
+ return (
+
+
+ {children}
+
+
+ )
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
diff --git a/apps/web/src/hooks/useAuth.tsx b/apps/web/src/hooks/useAuth.tsx
new file mode 100644
index 0000000..6d9c5c4
--- /dev/null
+++ b/apps/web/src/hooks/useAuth.tsx
@@ -0,0 +1,113 @@
+import {
+ createContext,
+ useCallback,
+ useContext,
+ useEffect,
+ useRef,
+ useState,
+ type ReactNode,
+} from 'react';
+
+export type AccountLevel = 'anonymous' | 'user' | 'staff' | 'administrator';
+
+export interface AuthPerson {
+ id: string;
+ slug: string;
+ fullName: string;
+ avatarUrl: string | null;
+ accountLevel: AccountLevel;
+}
+
+export interface AuthState {
+ /** null = anonymous or not yet loaded */
+ person: AuthPerson | null;
+ /** true while the initial /api/auth/me fetch is in flight */
+ loading: boolean;
+ /** Reload auth state from the server */
+ reload: () => Promise;
+ /** Sign out: calls POST /api/auth/logout then clears state */
+ signOut: () => Promise;
+}
+
+const AuthContext = createContext(null);
+
+async function fetchMe(): Promise {
+ try {
+ const res = await fetch('/api/auth/me', { credentials: 'include' });
+ if (!res.ok) {
+ // 401 = anonymous, 404 = not yet implemented — both mean no session
+ return null;
+ }
+ const json = (await res.json()) as { data?: AuthPerson };
+ return json.data ?? null;
+ } catch {
+ // Network error — treat as anonymous, don't throw
+ return null;
+ }
+}
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+ const [person, setPerson] = useState(null);
+ const [loading, setLoading] = useState(true);
+ // Use a ref to track if we're mounted so we don't setState after unmount
+ const mountedRef = useRef(true);
+
+ const reload = useCallback(async () => {
+ setLoading(true);
+ const p = await fetchMe();
+ if (mountedRef.current) {
+ setPerson(p);
+ setLoading(false);
+ }
+ }, []);
+
+ const signOut = useCallback(async () => {
+ try {
+ await fetch('/api/auth/logout', {
+ method: 'POST',
+ credentials: 'include',
+ });
+ } catch {
+ // Ignore network errors on logout
+ }
+ if (mountedRef.current) {
+ setPerson(null);
+ }
+ }, []);
+
+ useEffect(() => {
+ mountedRef.current = true;
+ // Kick off initial auth check; all setState calls happen in the async
+ // callback, not synchronously in the effect body.
+ fetchMe()
+ .then((p) => {
+ if (mountedRef.current) {
+ setPerson(p);
+ setLoading(false);
+ }
+ })
+ .catch(() => {
+ if (mountedRef.current) {
+ setLoading(false);
+ }
+ });
+
+ return () => {
+ mountedRef.current = false;
+ };
+ }, []);
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function useAuth(): AuthState {
+ const ctx = useContext(AuthContext);
+ if (!ctx) {
+ throw new Error('useAuth must be used within AuthProvider');
+ }
+ return ctx;
+}
diff --git a/apps/web/src/hooks/useOnline.ts b/apps/web/src/hooks/useOnline.ts
new file mode 100644
index 0000000..5d5f045
--- /dev/null
+++ b/apps/web/src/hooks/useOnline.ts
@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+
+export function useOnline(): boolean {
+ const [online, setOnline] = useState(navigator.onLine);
+
+ useEffect(() => {
+ const onOnline = () => setOnline(true);
+ const onOffline = () => setOnline(false);
+
+ window.addEventListener('online', onOnline);
+ window.addEventListener('offline', onOffline);
+
+ return () => {
+ window.removeEventListener('online', onOnline);
+ window.removeEventListener('offline', onOffline);
+ };
+ }, []);
+
+ return online;
+}
diff --git a/apps/web/src/hooks/useSearch.ts b/apps/web/src/hooks/useSearch.ts
new file mode 100644
index 0000000..3c9ac0b
--- /dev/null
+++ b/apps/web/src/hooks/useSearch.ts
@@ -0,0 +1,79 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export interface SearchResult {
+ type: 'project' | 'member' | 'tag';
+ slug: string;
+ title: string;
+ url: string;
+}
+
+export interface SearchState {
+ query: string;
+ results: SearchResult[];
+ loading: boolean;
+ setQuery: (q: string) => void;
+ clear: () => void;
+}
+
+const DEBOUNCE_MS = 200;
+
+// TODO(public-screens): replace with real API calls to /api/projects, /api/people, /api/tags
+function mockSearch(q: string): SearchResult[] {
+ if (!q.trim()) return [];
+ return [
+ {
+ type: 'project',
+ slug: 'example-project',
+ title: `Example project matching "${q}"`,
+ url: '/projects/example-project',
+ },
+ ];
+}
+
+export function useSearch(): SearchState {
+ const [query, setQueryState] = useState('');
+ const [results, setResults] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const timerRef = useRef | null>(null);
+
+ const setQuery = useCallback((q: string) => {
+ setQueryState(q);
+
+ if (timerRef.current) {
+ clearTimeout(timerRef.current);
+ }
+
+ if (!q.trim()) {
+ setResults([]);
+ setLoading(false);
+ return;
+ }
+
+ setLoading(true);
+ timerRef.current = setTimeout(() => {
+ // TODO(public-screens): replace with real fetch calls
+ const found = mockSearch(q);
+ setResults(found);
+ setLoading(false);
+ }, DEBOUNCE_MS);
+ }, []);
+
+ const clear = useCallback(() => {
+ setQueryState('');
+ setResults([]);
+ setLoading(false);
+ if (timerRef.current) {
+ clearTimeout(timerRef.current);
+ }
+ }, []);
+
+ useEffect(() => {
+ return () => {
+ if (timerRef.current) {
+ clearTimeout(timerRef.current);
+ }
+ };
+ }, []);
+
+ return { query, results, loading, setQuery, clear };
+}
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
new file mode 100644
index 0000000..0221f34
--- /dev/null
+++ b/apps/web/src/index.css
@@ -0,0 +1,141 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/geist";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+ --font-heading: var(--font-sans);
+ --font-sans: 'Geist Variable', sans-serif;
+ --color-sidebar-ring: var(--sidebar-ring);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar: var(--sidebar);
+ --color-chart-5: var(--chart-5);
+ --color-chart-4: var(--chart-4);
+ --color-chart-3: var(--chart-3);
+ --color-chart-2: var(--chart-2);
+ --color-chart-1: var(--chart-1);
+ --color-ring: var(--ring);
+ --color-input: var(--input);
+ --color-border: var(--border);
+ --color-destructive: var(--destructive);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-accent: var(--accent);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-muted: var(--muted);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-secondary: var(--secondary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-primary: var(--primary);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-popover: var(--popover);
+ --color-card-foreground: var(--card-foreground);
+ --color-card: var(--card);
+ --color-foreground: var(--foreground);
+ --color-background: var(--background);
+ --radius-sm: calc(var(--radius) * 0.6);
+ --radius-md: calc(var(--radius) * 0.8);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) * 1.4);
+ --radius-2xl: calc(var(--radius) * 1.8);
+ --radius-3xl: calc(var(--radius) * 2.2);
+ --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+ --background: oklch(1 0 0);
+ --foreground: oklch(0.145 0 0);
+ --card: oklch(1 0 0);
+ --card-foreground: oklch(0.145 0 0);
+ --popover: oklch(1 0 0);
+ --popover-foreground: oklch(0.145 0 0);
+ --primary: oklch(0.205 0 0);
+ --primary-foreground: oklch(0.985 0 0);
+ --secondary: oklch(0.97 0 0);
+ --secondary-foreground: oklch(0.205 0 0);
+ --muted: oklch(0.97 0 0);
+ --muted-foreground: oklch(0.556 0 0);
+ --accent: oklch(0.97 0 0);
+ --accent-foreground: oklch(0.205 0 0);
+ --destructive: oklch(0.577 0.245 27.325);
+ --border: oklch(0.922 0 0);
+ --input: oklch(0.922 0 0);
+ --ring: oklch(0.708 0 0);
+ --chart-1: oklch(0.87 0 0);
+ --chart-2: oklch(0.556 0 0);
+ --chart-3: oklch(0.439 0 0);
+ --chart-4: oklch(0.371 0 0);
+ --chart-5: oklch(0.269 0 0);
+ --radius: 0.625rem;
+ --sidebar: oklch(0.985 0 0);
+ --sidebar-foreground: oklch(0.145 0 0);
+ --sidebar-primary: oklch(0.205 0 0);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.97 0 0);
+ --sidebar-accent-foreground: oklch(0.205 0 0);
+ --sidebar-border: oklch(0.922 0 0);
+ --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+ --background: oklch(0.145 0 0);
+ --foreground: oklch(0.985 0 0);
+ --card: oklch(0.205 0 0);
+ --card-foreground: oklch(0.985 0 0);
+ --popover: oklch(0.205 0 0);
+ --popover-foreground: oklch(0.985 0 0);
+ --primary: oklch(0.922 0 0);
+ --primary-foreground: oklch(0.205 0 0);
+ --secondary: oklch(0.269 0 0);
+ --secondary-foreground: oklch(0.985 0 0);
+ --muted: oklch(0.269 0 0);
+ --muted-foreground: oklch(0.708 0 0);
+ --accent: oklch(0.269 0 0);
+ --accent-foreground: oklch(0.985 0 0);
+ --destructive: oklch(0.704 0.191 22.216);
+ --border: oklch(1 0 0 / 10%);
+ --input: oklch(1 0 0 / 15%);
+ --ring: oklch(0.556 0 0);
+ --chart-1: oklch(0.87 0 0);
+ --chart-2: oklch(0.556 0 0);
+ --chart-3: oklch(0.439 0 0);
+ --chart-4: oklch(0.371 0 0);
+ --chart-5: oklch(0.269 0 0);
+ --sidebar: oklch(0.205 0 0);
+ --sidebar-foreground: oklch(0.985 0 0);
+ --sidebar-primary: oklch(0.488 0.243 264.376);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.269 0 0);
+ --sidebar-accent-foreground: oklch(0.985 0 0);
+ --sidebar-border: oklch(1 0 0 / 10%);
+ --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+ * {
+ @apply border-border outline-ring/50;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+ html {
+ @apply font-sans;
+ }
+}
+
+@media print {
+ header,
+ footer,
+ nav[aria-label="Breadcrumb"],
+ [data-testid="offline-banner"],
+ [data-testid="network-error-banner"],
+ [id="search-results-dropdown"] {
+ display: none !important;
+ }
+}
\ No newline at end of file
diff --git a/apps/web/src/lib/utils.ts b/apps/web/src/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/apps/web/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index c2834c2..6305492 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -1,5 +1,6 @@
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
+import './index.css';
import { App } from './App';
const container = document.getElementById('root');
diff --git a/apps/web/src/pages/ComingSoon.tsx b/apps/web/src/pages/ComingSoon.tsx
new file mode 100644
index 0000000..5b300c0
--- /dev/null
+++ b/apps/web/src/pages/ComingSoon.tsx
@@ -0,0 +1,25 @@
+import { Link, useLocation } from 'react-router';
+
+export function ComingSoon() {
+ const location = useLocation();
+
+ return (
+
+
Coming Soon
+
+ This section is under construction.
+
+
+
+ {location.pathname}
+
+
+
+ ← Back to home
+
+
+
+ Code for Philly is being rebuilt
+
+
+ We are modernizing the platform. Check back soon for the full
+ experience. In the meantime, you can browse our projects below.
+
+
+
= {
+ access_denied:
+ 'You declined to authorize Code for Philly on GitHub. To sign in, you will need to authorize the app.',
+ oauth_state_mismatch:
+ 'Something went wrong with the sign-in flow. Please try again.',
+ oauth_session_invalid:
+ 'Something went wrong with the sign-in flow. Please try again.',
+ github_unreachable:
+ 'We could not reach GitHub. Please try again in a moment.',
+ email_unverified: (
+ <>
+ Your GitHub account does not have a verified email address visible to us.
+ To sign in here, please{' '}
+
+ verify a primary email on GitHub
+ {' '}
+ and ensure email visibility is enabled for our app.
+
+ ),
+};
+
+function GitHubIcon() {
+ return (
+
+
+ );
+}
+
+function WhyGitHub() {
+ const [open, setOpen] = useState(false);
+
+ return (
+
+
setOpen((v) => !v)}
+ className="text-sm text-muted-foreground hover:text-foreground underline-offset-2 hover:underline"
+ aria-expanded={open}
+ >
+ Why GitHub?
+
+ {open && (
+
+ We chose GitHub as the sole identity provider for three reasons: (1)
+ the civic-tech community already lives there, (2) it filters spam and
+ scam accounts more effectively than email-only sign-ups, and (3) most
+ of our project work coordinates on GitHub anyway. Anyone can{' '}
+
+ create a GitHub account
+ {' '}
+ in under a minute.
+
+ )}
+
+
+
+ Sign in to Code for Philly
+
+ We use GitHub for sign-in. If you do not have a
+ GitHub account yet, it is free and takes about a minute.
+
+
+
+ {errorCode && ERROR_MESSAGES[errorCode] && (
+
+ {ERROR_MESSAGES[errorCode]}
+
+ )}
+
+
+
+
+
+
+
+ Returning Code for Philly member? You will be
+ prompted to connect your old account after you sign in with GitHub.
+
+
+
+
+
404
+
+ Page not found.
+
+
+ ← Back to home
+
+
+
+ );
+}
+
+describe('AppHeader', () => {
+ beforeEach(() => {
+ // Default: anonymous user (404 on /api/auth/me)
+ vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+ new Response(null, { status: 404 }),
+ );
+ });
+
+ afterEach(() => {
+ vi.restoreAllMocks();
+ });
+
+ it('renders the site name', async () => {
+ renderWithRouter(loading
;
+ if (!person) return anonymous
;
+ return {person.fullName}
;
+}
+
+function Wrapped() {
+ return (
+
+
+ );
+}
+
+describe('useAuth', () => {
+ beforeEach(() => {
+ vi.restoreAllMocks();
+ });
+
+ afterEach(() => {
+ vi.restoreAllMocks();
+ });
+
+ it('renders loading state initially', () => {
+ // Make fetch hang indefinitely
+ vi.spyOn(globalThis, 'fetch').mockImplementation(
+ () => new Promise(() => {}),
+ );
+
+ renderWithRouter(` appears on 5xx API responses (call sites in data-fetching hooks; context + component wired in web-shell)
- [ ] Project detail shows overview + open help-wanted section + activity feed; tags / member avatars / action buttons render
- [ ] Help-wanted index filters by tech / topic / commitment-max; "Express Interest" button reads as anonymous-disabled or "Sign in" link
- [ ] Tags overview + namespace + detail screens all render and link correctly
@@ -127,3 +128,6 @@ Markdown comes back from the API as pre-rendered, sanitized HTML (`overviewHtml`
- **Search typeahead UX.** The combo of multi-group results + keyboard nav + mobile compatibility is fiddly. Use shadcn `` as the substrate; it handles most of it.
## Notes
+
+- Absorbed from web-shell: search typeahead real API wiring and NetworkErrorBanner call sites are explicitly in scope here (stubs shipped in web-shell, wired here).
+- Absorbed from web-shell: manual QA of mobile sheet (< md hamburger → sheet) should be included in this plan's QA pass — see [Issue #16](https://github.com/CodeForPhilly/codeforphilly-ng/issues/16).
diff --git a/plans/web-shell.md b/plans/web-shell.md
index 14a8122..2bf57f2 100644
--- a/plans/web-shell.md
+++ b/plans/web-shell.md
@@ -1,10 +1,11 @@
---
-status: planned
+status: done
depends: [storage-foundation]
specs:
- specs/behaviors/app-shell.md
- specs/screens/login.md
issues: []
+pr: 15
---
# Plan: Web shell
@@ -102,17 +103,17 @@ A `` component animates during navigation. A ``)
-- [ ] `` appears when the api is down (kill it and reload `/`)
-- [ ] Search box accepts input but submits to a stub that's TODO'd
-- [ ] Footer renders three columns + social icons + open-source link
-- [ ] No Twitter/X icon in the footer (deferred.md compliance)
-- [ ] `npm test` passes; jsdom-based tests cover the auth bootstrap + the mobile sheet open/close
+- [x] `npm run dev` boots both apps; the web app at `http://localhost:5173/` renders the shell with placeholders
+- [x] Header nav links all route correctly (to placeholders)
+- [x] About dropdown opens, keyboard-navigable
+- [ ] Mobile (< md) shows hamburger → sheet with stacked nav — validated via jsdom test (open/close via Escape); AXI browser automation runs at full viewport width only; not validated in headed Chrome at < md.
+- [x] `useAuth` calls `/api/auth/me` on mount; with no session, anonymous controls render
+- [x] Skip link works (Tab from page load → "Skip to main content" → Enter focuses ``) — `` verified programmatically focusable via `document.getElementById('main-content').focus()`.
+- [ ] `` appears when the api is down (kill it and reload `/`) — NetworkErrorBanner context is implemented and tested; the "kill API and reload" manual step was not run (API was never started; proxy errors hit immediately and `useAuth` handled them as anonymous, which is the correct graceful behavior).
+- [x] Search box accepts input but submits to a stub that's TODO'd
+- [x] Footer renders three columns + social icons + open-source link
+- [x] No Twitter/X icon in the footer (deferred.md compliance)
+- [x] `npm test` passes; jsdom-based tests cover the auth bootstrap + the mobile sheet open/close
## Risks / unknowns
@@ -121,3 +122,17 @@ A `` component animates during navigation. A ``. Switched in implementation; the plan's Approach section still references `` (that was the original sketch; the plan is now frozen). `public-screens` should continue using `createBrowserRouter`.
+- **shadcn init is not fully headless.** The `-y` flag skips the confirmation prompt but not the component-library and preset prompts. Required `--template vite --no-monorepo -p nova` flags. Also required Tailwind v4 to be pre-installed before shadcn init could succeed; it doesn't install Tailwind for you.
+- **`baseUrl` deprecated in TS 6+.** Added `"ignoreDeprecations": "6.0"` to tsconfig.json alongside `"baseUrl"` and `"paths"` to silence TS7's deprecation error. Consider migrating to `imports` in package.json if TS 7 makes `baseUrl` non-functional.
+- **Bundle size.** Initial JS is 137 KB gzip (target 250 KB). Slightly above the spirit of the limit but well within the stated gate (250 KB). Lazy-loading in `public-screens` and `github-oauth` will bring per-route chunks down substantially.
+- **API test pre-existing failures.** `apps/api` has 2 timeout failures in `createTestRepo`-based tests; these are pre-existing (verified by stashing all changes and re-running). Not introduced by this plan.
+- **vitest in worktree.** The agent worktree has its own `node_modules`. After shadcn added packages, `npm install` was needed at the worktree root to populate vitest. CI should be unaffected (it installs fresh).
+
+## Follow-ups
+
+- Issue [#16](https://github.com/CodeForPhilly/codeforphilly-ng/issues/16) — Validate mobile sheet < md in browser (hamburger → sheet stacked nav). Blocked by AXI viewport width limitation; add to `public-screens` manual QA checklist.
+- Deferred to [`public-screens`](public-screens.md) — Wire real API calls in SearchBox (replaces mock `mockSearch`); the TODO comment is already in `useSearch.ts`.
+- Deferred to [`public-screens`](public-screens.md) — Add `NetworkErrorBanner.showError()` call sites on 5xx API responses (the context and component are wired; just needs call sites in data-fetching hooks).
+- Deferred to [`github-oauth`](github-oauth.md) — Authenticated user avatar dropdown in `AppHeader.AuthControls` (renders correctly given a `person`; no real sessions yet).
+
+ Code for Philly
+
+
+
+ {/* Desktop nav */}
+
+
+ {/* Desktop: search + auth */}
+