feat(web-shell): app shell, routing, auth bootstrap, shadcn setup#15
Merged
Conversation
Generated by: npm install tailwindcss @tailwindcss/vite npx shadcn@latest init -y --template vite --no-monorepo -p nova npx shadcn@latest add card dropdown-menu sheet dialog input tooltip separator tabs -y Also added @/→src path alias to tsconfig.json and vite.config.ts. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Implements specs/behaviors/app-shell.md and specs/screens/login.md. Components: - AppShell: wrapper with skip link, progress bar, offline banner, header, footer - AppHeader: sticky header with logo, primary nav, About dropdown, search box, auth controls (anonymous/user/staff/admin variants), mobile hamburger + Sheet - AppFooter: three columns (Explore/About/Connect) + social icons + copyright; no Twitter/X per deferred.md - Breadcrumbs: trail component for route-level opt-in - SearchBox: debounced typeahead with mock results (wired to real API in public-screens) - NetworkErrorBanner: context-based 5xx error banner with Retry - OfflineBanner: navigator.onLine-driven offline notice - TopProgressBar: React Router navigation-state indicator Hooks: - useAuth: calls GET /api/auth/me on mount; treats 401/404/network errors as anonymous; provides person, loading, reload, signOut - useSearch: debounced search state with TODO stubs for real API calls - useOnline: window online/offline event listener Routing (App.tsx): BrowserRouter + Routes with AppShell as layout; placeholder routes for all top-level URLs per the plan; LoginPlaceholder screen per spec. Pages: HomeStub, ComingSoon, NotFound, LoginPlaceholder (with error codes, Why GitHub? disclosure, and Returning member note per spec). Tests: 17 tests covering auth bootstrap, mobile sheet open/close, footer social links (no Twitter/X), copyright, and nav rendering. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- status: done, pr: 15 - Ticked verified validation criteria; left mobile sheet browser validation and NetworkErrorBanner kill-API step unticked with notes - Switched App.tsx from BrowserRouter to createBrowserRouter (required for useNavigation in TopProgressBar) - Filed Issue #16 for mobile sheet browser QA follow-up - Absorbed search typeahead + NetworkErrorBanner wiring into public-screens Approach and Validation; added Notes section in public-screens Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
useAuthcallsGET /api/auth/meon mount; treats 401/404/network errors gracefully as anonymous; no throw on API-not-running conditionspecs/screens/login.mdincluding error codes, "Why GitHub?" disclosure, and returning-member noteTest plan
npm run lintcleannpm run type-checkcleannpm test(web: 17/17, shared: 52/52) — API tests have 2 pre-existing timeout failures unrelated to this PRnpm run buildclean (web bundle 137 KB gzip)/projects,/help-wanted,/members,/volunteer)/loginrenders card with Sign in with GitHub button + Why GitHub + returning member noteuseAuthhandles 404/network error from/api/auth/megracefully (anonymous controls render, no crash)<main id="main-content" tabIndex={-1}>is programmatically focusable (skip link target verified)Notes
<BrowserRouter>tocreateBrowserRouter/RouterProvider— required foruseNavigationwhich needs a data router contextpublic-screenswill improve thisapps/api) have 2 pre-existing timeout failures (gitsheetscreateTestRepocalls) — not introduced by this PR (verified by stashing changes and re-running)🤖 Generated with Claude Code