diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md index 228f348..fde6a6a 100644 --- a/.planning/ROADMAP.md +++ b/.planning/ROADMAP.md @@ -136,9 +136,10 @@ Plans: 3. On mobile, navigation appears as a fixed bottom tab bar with Home, Collection, Setups, and Search icons 4. The landing page no longer has a hero section — content starts with Popular Setups 5. Setups has its own top-level route accessible from the nav bar, not nested in Collection tabs -**Plans**: 3 plans +**Plans**: 4 plans Plans: +- [ ] 27-00-PLAN.md — Wave 0: E2E test scaffolding for nav restructure - [ ] 27-01-PLAN.md — TopNav and BottomTabBar components - [ ] 27-02-PLAN.md — Setups top-level route and Collection tab simplification - [ ] 27-03-PLAN.md — Root layout wiring, hero removal, and visual verification diff --git a/.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-00-PLAN.md b/.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-00-PLAN.md new file mode 100644 index 0000000..3a73fc6 --- /dev/null +++ b/.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-00-PLAN.md @@ -0,0 +1,178 @@ +--- +phase: 27-top-nav-restructure-and-search-bar-rethink +plan: 00 +type: execute +wave: 0 +depends_on: [] +files_modified: + - e2e/dashboard.spec.ts + - e2e/collection.spec.ts +autonomous: true +requirements: + - NAV-01 + - NAV-04 + - NAV-05 + +must_haves: + truths: + - "E2E tests for dashboard reflect new nav structure (TopNav, no hero heading)" + - "E2E tests for collection reflect Setups tab removal and /setups route existence" + - "E2E tests cover anonymous auth modal trigger from nav" + - "E2E tests cover mobile bottom tab bar presence" + artifacts: + - path: "e2e/dashboard.spec.ts" + provides: "Updated dashboard E2E tests matching new nav layout" + - path: "e2e/collection.spec.ts" + provides: "Updated collection E2E tests without Setups tab assertions" + key_links: [] +--- + + +Update existing E2E tests to match the Phase 27 navigation restructure before implementation begins. + +Purpose: Wave 0 test scaffolding ensures the Nyquist sampling contract is met. Existing tests assert behaviors that Phase 27 changes (hero heading, Setups tab in collection, dashboard card layout). These tests must be updated to expect the new structure so they serve as regression guards during implementation. + +Output: Updated `e2e/dashboard.spec.ts` and `e2e/collection.spec.ts` with assertions matching the post-Phase-27 UI. + + + +@$HOME/.claude/get-shit-done/workflows/execute-plan.md +@$HOME/.claude/get-shit-done/templates/summary.md + + + +@.planning/PROJECT.md +@.planning/ROADMAP.md +@.planning/STATE.md +@.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-CONTEXT.md +@.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-VALIDATION.md + + + + + + Task 1: Update dashboard E2E tests for new nav structure + e2e/dashboard.spec.ts + + e2e/dashboard.spec.ts + src/client/routes/index.tsx + src/client/components/TotalsBar.tsx + + +Modify `e2e/dashboard.spec.ts` to reflect the Phase 27 navigation changes. These tests will initially FAIL (red) until Plans 01-03 implement the new UI. That is expected — this is Wave 0 scaffolding. + +**Changes to existing tests:** + +1. **"shows GearBox heading" test:** Update to check for GearBox text in the top nav bar rather than as a standalone heading. The text "GearBox" will still be visible (it's the logo text in TopNav), so this test likely still passes as-is. Add a comment noting it now refers to the nav logo. + +2. **"shows Collection, Planning, and Setups card headings" test:** The landing page hero is removed and the page now starts with Popular Setups, Recently Added Items, and Trending Categories sections. Update this test to check for the section headings that will exist on the landing page post-Phase-27: "Popular Setups", "Recently Added", "Trending Categories". Remove the assertions for "Collection", "Planning", and "Setups" card headings (those cards may still exist as discovery sections, but the test name and assertions should match the new landing page structure). + +3. **"Collection card links to /collection" test:** The landing page no longer has explicit "Collection" card links — navigation is via the TopNav. Replace this test with a test that verifies the TopNav contains a link to /collection: +```typescript +test("top nav contains Collection link", async ({ page }) => { + const nav = page.locator("nav"); + const collectionLink = nav.getByRole("link", { name: /collection/i }); + await expect(collectionLink).toBeVisible(); + await collectionLink.click(); + await page.waitForLoadState("networkidle"); + await expect(page).toHaveURL(/\/collection/); +}); +``` + +**New tests to add:** + +4. **Auth modal on anonymous Collection click:** Add a test that verifies clicking Collection in the nav while not authenticated triggers the auth prompt modal. Note: The E2E seed runs with an authenticated user, so this test should be skipped with `test.skip` and a comment explaining it needs an unauthenticated test fixture. Alternatively, if the E2E environment has no auth (public read mode), the nav links for Collection/Setups should render as buttons that trigger the auth modal — test for the modal appearing. + +```typescript +test("shows top nav with navigation links", async ({ page }) => { + // TopNav should contain Home, Collection, Setups links + const nav = page.locator("nav"); + await expect(nav).toBeVisible(); + await expect(nav.getByText("Home")).toBeVisible(); + await expect(nav.getByText("Collection")).toBeVisible(); + await expect(nav.getByText("Setups")).toBeVisible(); +}); +``` + +5. **Mobile bottom tab bar test:** Add a test with mobile viewport that checks for bottom tab bar: +```typescript +test("shows bottom tab bar on mobile viewport", async ({ page }) => { + await page.setViewportSize({ width: 375, height: 667 }); + await page.goto("/"); + await page.waitForLoadState("networkidle"); + // Bottom tab bar should be visible with 4 items + await expect(page.getByText("Home")).toBeVisible(); + await expect(page.getByText("Collection")).toBeVisible(); + await expect(page.getByText("Setups")).toBeVisible(); + await expect(page.getByText("Search")).toBeVisible(); +}); +``` + +**Keep unchanged:** "shows collection card with item count of 6", "shows active thread count on Planning card", "shows setup count on Setups card" — update only if they reference elements being removed. If they reference landing page discovery cards that still exist, keep as-is. If they reference elements that won't exist post-Phase-27, mark with `test.fixme()` and a comment. + +Review the current landing page structure carefully before deciding which tests to keep, update, or mark as fixme. The goal is: tests that will PASS after Plans 01-03 are implemented, and tests that will FAIL now (before implementation) are acceptable for Wave 0. + + + cd /home/jean-luc-makiola/Development/projects/GearBox && grep -c "top nav" e2e/dashboard.spec.ts && grep -c "mobile" e2e/dashboard.spec.ts && grep -c "setViewportSize" e2e/dashboard.spec.ts + + dashboard.spec.ts contains updated tests for TopNav presence, nav link visibility, and mobile bottom tab bar. Tests are expected to fail until Plans 01-03 implement the new UI. + + + + Task 2: Update collection E2E tests for Setups tab removal + e2e/collection.spec.ts + + e2e/collection.spec.ts + + +Modify `e2e/collection.spec.ts` to reflect the Setups tab being removed from Collection and elevated to its own route. + +**Changes:** + +1. **Remove "navigates to setups tab" test:** The test at line 77-81 navigates to `/collection?tab=setups` and expects "Weekend Overnighter". After Phase 27, `/collection?tab=setups` falls back to the Gear tab (via Zod `.catch("gear")`). Replace this test with a fallback test: +```typescript +test("setups tab URL falls back to gear tab", async ({ page }) => { + await page.goto("/collection?tab=setups"); + await page.waitForLoadState("networkidle"); + // Setups tab no longer exists, should fall back to gear + await expect(page.getByText("Zpacks Duplex")).toBeVisible(); +}); +``` + +2. **Add /setups route test:** Add a new test (can be in a new `test.describe` block or at the end) that verifies the `/setups` route renders correctly: +```typescript +test.describe("Setups page", () => { + test("navigates to /setups and shows seeded setup", async ({ page }) => { + await page.goto("/setups"); + await page.waitForLoadState("networkidle"); + await expect(page.getByText("Weekend Overnighter")).toBeVisible(); + }); +}); +``` + +**Keep unchanged:** All Gear tab tests (search, filter, category) and the "navigates to planning tab" test and "gear tab is default" test. These are unaffected by Phase 27. + + + cd /home/jean-luc-makiola/Development/projects/GearBox && grep -c "/setups" e2e/collection.spec.ts && grep -c "falls back" e2e/collection.spec.ts && ! grep -q 'tab=setups.*Weekend Overnighter' e2e/collection.spec.ts && echo "no-old-setups-tab" + + collection.spec.ts no longer asserts Setups tab content at /collection?tab=setups. New test verifies /setups route renders SetupsView. Fallback test confirms old ?tab=setups URLs show gear tab. + + + + + +- dashboard.spec.ts has tests for TopNav presence, nav links, and mobile bottom tab bar +- collection.spec.ts has no assertion that /collection?tab=setups shows setup content +- collection.spec.ts has a test for the standalone /setups route +- All existing unaffected tests (gear tab filtering, planning tab) remain unchanged + + + +- E2E test files are updated to match the post-Phase-27 expected UI +- Tests may fail now (pre-implementation) but will pass after Plans 01-03 complete +- No unrelated test changes — only Phase 27 navigation restructure assertions + + + +After completion, create `.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-00-SUMMARY.md` + diff --git a/.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-01-PLAN.md b/.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-01-PLAN.md index 48a995b..f1bb1ea 100644 --- a/.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-01-PLAN.md +++ b/.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-01-PLAN.md @@ -186,6 +186,8 @@ Create `src/client/components/BottomTabBar.tsx` for mobile navigation. 3. Setups — icon: `layers`, label: "Setups", `` if authenticated, `