feat: Add online user guide with screenshots (#203) #204

Merged
egullickson merged 10 commits from issue-203-add-online-user-guide into main 2026-02-16 01:40:36 +00:00
Owner

Fixes #203

Summary

  • Add public /guide route with 10-section user guide rendered as styled React components
  • Sticky TOC sidebar on desktop, collapsible accordion TOC on mobile
  • ~13 desktop screenshots captured from live application stored in frontend/public/guide/
  • Guide link added to public nav bar (HomePage), authenticated sidebar (Layout), and mobile hamburger drawer
  • Old PDF user guide removed (frontend/public/docs/v2026-01-03.pdf)
  • GuidePage CLAUDE.md documentation for AI context

Test Plan

  • /guide route accessible without authentication
  • All 10 sections render with headings, tables, and screenshot placeholders
  • TOC sidebar on desktop, collapsible accordion on mobile
  • Guide link appears in public nav (desktop + mobile), authenticated sidebar, and hamburger drawer
  • Screenshots lazy-load with loading="lazy" attribute
  • 6 integration tests passing (GuidePage.test.tsx)
  • Lint: 0 errors
  • Type-check: 0 errors
  • Responsive at 320px, 768px, 1920px
Fixes #203 ## Summary - Add public `/guide` route with 10-section user guide rendered as styled React components - Sticky TOC sidebar on desktop, collapsible accordion TOC on mobile - ~13 desktop screenshots captured from live application stored in `frontend/public/guide/` - Guide link added to public nav bar (HomePage), authenticated sidebar (Layout), and mobile hamburger drawer - Old PDF user guide removed (`frontend/public/docs/v2026-01-03.pdf`) - GuidePage CLAUDE.md documentation for AI context ## Test Plan - [x] `/guide` route accessible without authentication - [x] All 10 sections render with headings, tables, and screenshot placeholders - [x] TOC sidebar on desktop, collapsible accordion on mobile - [x] Guide link appears in public nav (desktop + mobile), authenticated sidebar, and hamburger drawer - [x] Screenshots lazy-load with `loading="lazy"` attribute - [x] 6 integration tests passing (GuidePage.test.tsx) - [x] Lint: 0 errors - [x] Type-check: 0 errors - [x] Responsive at 320px, 768px, 1920px
egullickson added 5 commits 2026-02-15 23:44:58 +00:00
- Create GuidePage with responsive layout (sticky TOC sidebar desktop, collapsible accordion mobile)
- Add GuideTableOfContents with scroll-based active section tracking
- Create GuideScreenshot and GuideTable shared components
- Add guideTypes.ts with section metadata for all 10 sections
- Add lazy-loaded /guide route in App.tsx with public access
- Placeholder section components for all 10 guide sections

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
All 10 guide sections converted from USER-GUIDE.md to styled React
components using GuideTable and GuideScreenshot shared components.
Sections 1-5: Getting Started, Dashboard, Vehicles, Fuel Logs, Maintenance.
Sections 6-10: Gas Stations, Documents, Settings, Subscription Tiers, Mobile Experience.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add Guide link to public nav bar (desktop + mobile) in HomePage
- Add Guide link to authenticated sidebar in Layout.tsx
- Add Guide link to HamburgerDrawer with window.location guard
- Add GuidePage integration tests (6 test scenarios)
- Remove old PDF user guide at public/docs/v2026-01-03.pdf

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Create CLAUDE.md for GuidePage directory with architecture docs
- Create CLAUDE.md index for pages/ directory

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
feat: Add desktop screenshots
All checks were successful
Deploy to Staging / Build Images (pull_request) Successful in 3m31s
Deploy to Staging / Deploy to Staging (pull_request) Successful in 53s
Deploy to Staging / Verify Staging (pull_request) Successful in 9s
Deploy to Staging / Notify Staging Ready (pull_request) Successful in 8s
Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped
a7f12ad580
egullickson added 1 commit 2026-02-15 23:51:52 +00:00
fix: handle trailing slash on /guide/ route (refs #203)
All checks were successful
Deploy to Staging / Build Images (pull_request) Successful in 3m29s
Deploy to Staging / Deploy to Staging (pull_request) Successful in 53s
Deploy to Staging / Verify Staging (pull_request) Successful in 9s
Deploy to Staging / Notify Staging Ready (pull_request) Successful in 8s
Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped
b73bfaf590
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
egullickson added 1 commit 2026-02-15 23:59:08 +00:00
fix: remove $uri/ from nginx try_files to prevent /guide directory redirect (refs #203)
All checks were successful
Deploy to Staging / Build Images (pull_request) Successful in 3m31s
Deploy to Staging / Deploy to Staging (pull_request) Successful in 52s
Deploy to Staging / Verify Staging (pull_request) Successful in 9s
Deploy to Staging / Notify Staging Ready (pull_request) Successful in 8s
Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped
4927b6670d
The /guide SPA route conflicts with the static /guide/ screenshot directory.
Nginx's try_files $uri/ matches the directory and issues a 301 redirect to
/guide/ with trailing slash, bypassing SPA routing. Removing $uri/ ensures
all non-file paths fall through to index.html for client-side routing.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
egullickson added 1 commit 2026-02-16 00:38:52 +00:00
feat: Removed trouble logging in button
All checks were successful
Deploy to Staging / Build Images (pull_request) Successful in 3m28s
Deploy to Staging / Deploy to Staging (pull_request) Successful in 53s
Deploy to Staging / Verify Staging (pull_request) Successful in 9s
Deploy to Staging / Notify Staging Ready (pull_request) Successful in 10s
Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped
bb48c55c2e
egullickson added 1 commit 2026-02-16 01:24:12 +00:00
feat: Links on homepage
All checks were successful
Deploy to Staging / Build Images (pull_request) Successful in 3m29s
Deploy to Staging / Deploy to Staging (pull_request) Successful in 52s
Deploy to Staging / Verify Staging (pull_request) Successful in 9s
Deploy to Staging / Notify Staging Ready (pull_request) Successful in 8s
Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped
1a9081c534
egullickson added 1 commit 2026-02-16 01:32:55 +00:00
fix: links from homepage to guide not working
All checks were successful
Deploy to Staging / Build Images (pull_request) Successful in 3m36s
Deploy to Staging / Deploy to Staging (pull_request) Successful in 53s
Deploy to Staging / Verify Staging (pull_request) Successful in 9s
Deploy to Staging / Notify Staging Ready (pull_request) Successful in 8s
Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped
260641e68c
egullickson merged commit 9177a38414 into main 2026-02-16 01:40:36 +00:00
egullickson deleted branch issue-203-add-online-user-guide 2026-02-16 01:40:37 +00:00
Sign in to join this conversation.
No Reviewers
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: egullickson/motovaultpro#204