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

Conversation 0 Commits 10 Files Changed 43

+4643 -288

egullickson commented 2026-02-15 23:44:57 +00:00

Owner

Copy Link

Copy Source

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

feat: add guide page foundation and routing (refs #203) ... 864da55cec

- 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 <[email protected]>

feat: add guide content sections 1-10 with screenshot placeholders (refs #203) ... 6196ebfc91

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 <[email protected]>

feat: add guide navigation integration and tests (refs #203) ... 197aeda2ef

- 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 <[email protected]>

docs: add GuidePage documentation (refs #203) ... b047199bc5

- Create CLAUDE.md for GuidePage directory with architecture docs
- Create CLAUDE.md index for pages/ directory

Co-Authored-By: Claude Opus 4.6 <[email protected]>

feat: Add desktop screenshots a7f12ad580

egullickson added 1 commit 2026-02-15 23:51:52 +00:00

fix: handle trailing slash on /guide/ route (refs #203) ... b73bfaf590

Co-Authored-By: Claude Opus 4.6 <[email protected]>

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) ... 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 <[email protected]>

egullickson added 1 commit 2026-02-16 00:38:52 +00:00

feat: Removed trouble logging in button bb48c55c2e

egullickson added 1 commit 2026-02-16 01:24:12 +00:00

feat: Links on homepage 1a9081c534

egullickson added 1 commit 2026-02-16 01:32:55 +00:00

fix: links from homepage to guide not working 260641e68c

egullickson merged commit 9177a38414 into main 2026-02-16 01:40:36 +00:00

egullickson referenced this issue from a commit 2026-02-16 01:40:37 +00:00

Merge pull request 'feat: Add online user guide with screenshots (#203)' (#204) from issue-203-add-online-user-guide into main

egullickson deleted branch issue-203-add-online-user-guide 2026-02-16 01:40:37 +00:00

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

Clear labels

status

backlog

status/blocked

status

done

status

in-progress

status

ready

status

review

type

bug

type

chore

type

docs

type

feature

No labels

Milestone

No items

No Milestone

Projects

Clear projects

No projects

Assignees

Clear assignees

egullickson

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: egullickson/motovaultpro#204