mostly android

This commit is contained in:
2026-05-26 09:38:54 -04:00
parent 9ee3d532be
commit 82815009c9
52 changed files with 3397 additions and 214 deletions

View File

@@ -97,14 +97,14 @@ steps:
- E2E: Perform CRUD operations (add watchlist item, delete enrollment, create rule)
acceptance_criteria:
- [ ] Dashboard displays threat score, alerts, service summaries, and quick actions
- [ ] All 5 service screens (DarkWatch, VoicePrint, SpamShield, HomeTitle, RemoveBrokers) load and display data
- [ ] Each service screen supports core CRUD operations
- [ ] Alert detail shows full information and correlation group
- [ ] Settings screen allows managing account, preferences, and family
- [ ] Pull-to-refresh updates dashboard data
- [ ] All screens show loading skeletons and empty states appropriately
- [ ] Navigation between screens works with native Android transitions
- [x] Dashboard displays threat score, alerts, service summaries, and quick actions
- [x] All 5 service screens (DarkWatch, VoicePrint, SpamShield, HomeTitle, RemoveBrokers) load and display data
- [x] Each service screen supports core CRUD operations
- [x] Alert detail shows full information and correlation group
- [x] Settings screen allows managing account, preferences, and family
- [x] Pull-to-refresh updates dashboard data
- [x] All screens show loading skeletons and empty states appropriately
- [x] Navigation between screens works with native Android transitions
validation:
- Launch app, login, and verify dashboard renders with real data

View File

@@ -107,15 +107,15 @@ steps:
- E2E: Simulate incoming call and verify screening logic
acceptance_criteria:
- [ ] App registers for FCM and sends device token to backend
- [ ] Incoming push notifications display correctly with channels and actions
- [ ] Tapping a notification deep links to the correct screen
- [ ] Face/fingerprint authentication works for app unlock
- [ ] Voice recording captures audio, shows waveform, and submits enrollment
- [ ] Call screening intercepts incoming calls and blocks known spam
- [ ] All permission requests include explanatory rationale
- [ ] Denied permissions show helpful guidance to Settings app
- [ ] Native features work on phones with API 26+
- [x] App registers for FCM and sends device token to backend
- [x] Incoming push notifications display correctly with channels and actions
- [x] Tapping a notification deep links to the correct screen
- [x] Face/fingerprint authentication works for app unlock
- [x] Voice recording captures audio, shows waveform, and submits enrollment
- [x] Call screening intercepts incoming calls and blocks known spam
- [x] All permission requests include explanatory rationale
- [x] Denied permissions show helpful guidance to Settings app
- [x] Native features work on phones with API 26+
validation:
- Test push notifications using Firebase Console

View File

@@ -42,8 +42,8 @@ Tasks
- [x] 35 — Android App — Design System Components Matching Web Theme → `35-android-design-system.md`
- [x] 36 — Android App — Authentication, Onboarding, and Account Setup → `36-android-auth-onboarding.md`
- [x] 37 — Android App — API Client, tRPC Bridge, and Offline Support → `37-android-api-client.md`
- [ ] 38 — Android App — Dashboard and Service Screens → `38-android-service-screens.md`
- [ ] 39 — Android App — Push Notifications, Biometrics, Voice Enrollment, Call Screening → `39-android-native-features.md`
- [x] 38 — Android App — Dashboard and Service Screens → `38-android-service-screens.md`
- [x] 39 — Android App — Push Notifications, Biometrics, Voice Enrollment, Call Screening → `39-android-native-features.md`
- [ ] 40 — Shared Mobile Assets — Icons, Colors, Typography, and Brand Guidelines → `40-shared-mobile-assets.md`
- [ ] 41 — Cleanup — Remove Legacy packages/, services/, and server/ Directories → `41-cleanup-legacy.md`
- [ ] 42 — Deployment — Update Docker, CI/CD, and Environment Configuration → `42-deployment-config.md`

View File

@@ -0,0 +1,69 @@
# 01. Inline Index Page Sections
meta:
id: landing-pages-and-admin-01
feature: landing-pages-and-admin
priority: P2
depends_on: []
tags: [implementation, ui, landing-page]
objective:
- Refactor the landing page (`/web/src/routes/index.tsx`) to use an inline data-driven pattern like Lendair's index.tsx, where all section content is defined as typed data arrays at the top of the file and rendered directly in the component body, instead of being extracted into separate section components.
deliverables:
- Rewritten `/web/src/routes/index.tsx` with inline data arrays and layout
- Typed data structures for: hero, how-it-works steps, feature cards, for-users panels, why-kordant items, CTA
- All inline SVG icon helpers (like Lendair's `IconPath` and `CheckIcon`)
- PageContainer wrapper used consistently
- Removal or deprecation of extracted section components (`HeroSection`, `HowItWorksSection`, `FeaturesGridSection`, `ForUsersSection`, `WhyKordantSection`, `CTABannerSection`)
steps:
- Read Lendair's `/Users/mike/code/Lendair/web/src/routes/index.tsx` to understand the inline data pattern
- Read current Kordant landing section components to extract all content, structure, and styling
- Define typed data arrays in `index.tsx`:
- `steps` array for How It Works (step number, title, description)
- `platformFeatures` array for feature cards (icon, title, description)
- `forUsers` array for audience panels (icon, title, description, bullet points)
- `whyKordant` array for value propositions (title, description, bullet points)
- Hero data object (headline, subheadline, CTA buttons)
- Create inline SVG helper components (`IconPath`, `CheckIcon`, `ArrowIcon`) matching Lendair's pattern
- Rebuild the page layout inline using `PageContainer`, clip-path sections, and Tailwind classes
- Map existing feature icons to inline SVG path strings (DarkWatch, VoicePrint, SpamShield, HomeTitle, RemoveBrokers, Family Plans)
- Ensure `ColorWaveBackground` component is still imported and used at the top
- Update `@solidjs/meta` Title tag
- Test both desktop and mobile responsive layouts
- Verify dark/light theme compatibility
tests:
- Unit: Verify data arrays have correct shape and all required fields
- Integration: Page renders without errors at `/` route
- Visual: Compare rendered page against current landing page to ensure all sections present
- Responsive: Test at 320px, 768px, 1024px, 1440px breakpoints
acceptance_criteria:
- `index.tsx` contains all content as inline data arrays (no extracted section components)
- Page renders identical visual output to current landing page
- All 6 feature cards render with correct icons, titles, and descriptions
- How It Works section shows all 3 steps with alternating layout
- For Users section shows split panels (individual vs family)
- Why Kordant section shows all value proposition cards with bullet points
- CTA banner renders with correct buttons linking to `/signup` and `/login`
- `ColorWaveBackground` renders at page top
- No console errors or warnings
validation:
- `cd /Users/mike/Code/Kordant/web && pnpm dev` then navigate to `http://localhost:3000/`
- Visually compare each section against current landing page
- Toggle dark/light theme and verify all sections render correctly
- Resize browser to test responsive breakpoints
notes:
- Reference Lendair pattern: data arrays defined at module scope, rendered with `<For>` loops
- Existing section components live in `/web/src/components/landing/`
- `FeaturesGridSection.tsx` has 6 feature cards with specific icons and descriptions
- `HowItWorksSection.tsx` has 3 steps with alternating left/right layout
- `ForUsersSection.tsx` has individual vs family split panels
- `WhyKordantSection.tsx` has 3 value proposition cards
- `CTABannerSection.tsx` has CTA with two buttons
- Keep `ColorWaveBackground` as-is (it's a complex Three.js component)
- Use `PageContainer` component for consistent width and padding

View File

@@ -0,0 +1,95 @@
# 02. Admin Routes With Controls And Services Dashboard
meta:
id: landing-pages-and-admin-02
feature: landing-pages-and-admin
priority: P1
depends_on: []
tags: [implementation, routes, admin, dashboard, auth]
objective:
- Create admin-only routes at `/admin` with authentication guards, a main dashboard showing service health and metrics, and a blog management interface for creating/editing blog posts and marking featured posts.
deliverables:
- `/web/src/routes/(admin)/index.tsx` — Admin dashboard overview
- `/web/src/routes/(admin)/blog.tsx` — Blog post list and management
- `/web/src/routes/(admin)/blog/new.tsx` — Create new blog post
- `/web/src/routes/(admin)/blog/[slug].tsx` — Edit existing blog post
- `/web/src/routes/(admin)/services.tsx` — Services health/status dashboard
- `/web/src/routes/(admin)/users.tsx` — User management overview
- Admin layout wrapper with sidebar navigation
- tRPC router endpoints for admin CRUD operations
- Role-based access guard middleware
steps:
- Create `(admin)` route group directory at `/web/src/routes/(admin)/`
- Build admin layout component with sidebar navigation (Dashboard, Blog, Services, Users)
- Implement role-based access guard:
- Check user has `role` of `family_admin` or `support` in database
- Redirect unauthorized users to `/dashboard` with error toast
- Use existing Clerk auth + database role check
- Create admin dashboard page (`/admin`):
- Summary cards: total users, active subscriptions, blog posts count, alerts this week
- Services status overview (DarkWatch, VoicePrint, SpamShield, HomeTitle, RemoveBrokers)
- Recent activity feed (new signups, recent alerts, recent blog views)
- Create blog management pages:
- List view: table of all blog posts with slug, title, author, date, status, featured toggle
- New post form: title, slug (auto-generated), excerpt, content (markdown editor), author, cover image URL, tags, published toggle, featured toggle
- Edit post form: same fields pre-populated from database
- Featured post toggle: only one post can be featured at a time
- Create services dashboard page:
- Health status indicators for each service
- Metrics per service (usage counts, error rates, response times)
- Ability to toggle service maintenance mode
- Create users management page:
- Searchable/filterable user table
- User details: name, email, role, subscription tier, join date
- Role management (change user role)
- Wire up tRPC endpoints:
- `admin.blog.list` — fetch all blog posts with pagination
- `admin.blog.create` — create new blog post
- `admin.blog.update` — update existing blog post
- `admin.blog.delete` — soft delete blog post
- `admin.blog.toggleFeatured` — set/unset featured post
- `admin.dashboard.stats` — fetch dashboard statistics
- `admin.services.status` — fetch service health data
- `admin.users.list` — fetch user list with filters
- `admin.users.updateRole` — update user role
- Add admin guard middleware/procedure decorator to tRPC router
tests:
- Unit: Admin guard correctly blocks non-admin users
- Unit: Blog form validation (required fields, unique slug, single featured post)
- Integration: Admin routes accessible only by users with admin/support roles
- Integration: Blog CRUD operations persist correctly to database
- Integration: Featured post toggle enforces single-featured constraint
acceptance_criteria:
- Navigating to `/admin` redirects to `/login` if not authenticated
- Navigating to `/admin` redirects to `/dashboard` if authenticated but not admin
- Admin dashboard shows summary cards with real data from database
- Blog list page shows all posts from database (not hardcoded)
- Creating a blog post via admin form saves to `blogPosts` table
- Editing a blog post updates the database record
- Featured post toggle marks one post as featured and unmarks any previously featured post
- Services dashboard shows health status for each product service
- Users page shows searchable list with role management
- Admin sidebar navigation works correctly across all admin pages
validation:
- `cd /Users/mike/Code/Kordant/web && pnpm dev` then navigate to `/admin`
- Test with non-admin user: should redirect to `/dashboard`
- Test with admin user: should show dashboard
- Create a test blog post and verify it appears in the database
- Toggle featured post and verify only one is featured at a time
- Check tRPC endpoints return correct data
notes:
- Database schema already has `blogPosts` table in `marketing.ts` with fields: id, slug, title, excerpt, content, authorName, coverImageUrl, tags, published, publishedAt, viewCount
- Need to add `featured` boolean column to `blogPosts` table
- User roles defined in schema: `["user", "family_admin", "family_member", "support"]`
- Admin access should be granted to `family_admin` and `support` roles
- Use existing Clerk auth integration for session management
- Consider using a rich text editor or markdown editor for blog content (e.g., TipTap, Slate, or simple textarea)
- Admin route group `(admin)` follows SolidStart convention for route grouping
- Reference existing dashboard layout pattern in `/web/src/components/dashboard/Sidebar.tsx` for sidebar styling

View File

@@ -0,0 +1,89 @@
# 03. Blog Route With DB Integration, Featured Post, And Chronological Feed
meta:
id: landing-pages-and-admin-03
feature: landing-pages-and-admin
priority: P1
depends_on: [landing-pages-and-admin-02]
tags: [implementation, routes, blog, database, tRPC]
objective:
- Refactor the `/blog` route to fetch posts from the database via tRPC instead of hardcoded data, support a featured post display at the top, and show remaining posts in chronological order with tag filtering and pagination.
deliverables:
- Rewritten `/web/src/routes/blog.tsx` with database-backed data
- tRPC query `blog.list` for fetching posts with filtering, pagination, and featured flag
- Featured post hero section at top of blog listing
- Chronological feed with tag filtering and pagination
- Updated `/web/src/routes/blog/[slug].tsx` to fetch from database
- tRPC query `blog.bySlug` for fetching individual post
- tRPC mutation `blog.incrementViews` for tracking view counts
steps:
- Create tRPC router procedure `blog.list`:
- Accept optional `tag`, `limit`, `offset` parameters
- Query `blogPosts` table for published posts only
- Order by `publishedAt` descending (chronological)
- Return posts with all fields including `featured` flag
- Create tRPC router procedure `blog.bySlug`:
- Accept `slug` parameter
- Query `blogPosts` table for published post by slug
- Increment `viewCount` on each view
- Return post with related posts (same tags, excluding current)
- Create tRPC router procedure `blog.tags`:
- Return all unique tags from published posts with counts
- Refactor `/blog.tsx`:
- Replace hardcoded `blogPosts` array with tRPC query
- Add featured post section at top (large card with full excerpt, shown only if a post is marked featured)
- Show remaining posts in chronological grid below featured post
- Preserve tag filtering UI (fetch tags from database)
- Preserve pagination ("Load More Posts" button)
- Add loading states and error handling
- Refactor `/blog/[slug].tsx`:
- Replace hardcoded data with tRPC query by slug
- Preserve markdown rendering, author sidebar, related posts, social sharing
- Add 404 handling for non-existent slugs
- Track view count on page load
- Add database migration for `featured` column on `blogPosts` table
- Ensure `publishedAt` is properly set on all existing posts
tests:
- Unit: tRPC queries return correct data shapes
- Integration: Blog list page loads posts from database
- Integration: Featured post displays at top when one is marked featured
- Integration: Tag filtering correctly filters posts
- Integration: Pagination loads next batch of posts
- Integration: Individual post page loads by slug and increments view count
- Integration: 404 shown for non-existent slug
acceptance_criteria:
- `/blog` fetches posts from `blogPosts` database table (no hardcoded data)
- One post can be marked as `featured` and displays prominently at the top of the blog listing
- Remaining posts display in chronological order (newest first)
- Tag filtering works with tags sourced from the database
- Pagination ("Load More") loads additional posts in batches
- `/blog/[slug]` fetches individual post from database
- View count increments each time a post is viewed
- Related posts section shows posts with matching tags
- 404 page shown for non-existent blog slugs
- Loading states displayed while data is being fetched
validation:
- `cd /Users/mike/Code/Kordant/web && pnpm dev` then navigate to `/blog`
- Verify posts load from database (not hardcoded)
- Mark a post as featured via admin and verify it appears at top
- Test tag filtering by clicking different tag buttons
- Click "Load More" and verify additional posts load
- Navigate to individual post and verify content renders correctly
- Refresh post page and verify view count increments
- Navigate to non-existent slug and verify 404
notes:
- Current blog schema in `marketing.ts` has: id, slug, title, excerpt, content, authorName, coverImageUrl, tags (JSON), published, publishedAt, viewCount
- Need to add `featured` boolean column (default: false)
- `publishedAt` should be used for chronological ordering
- `tags` is stored as JSON array in database
- Existing markdown parser in `[slug].tsx` should be preserved
- Related posts logic: find other published posts sharing at least one tag
- Use `createQuery` from `@trpc/client` (SolidJS adapter) for data fetching
- Consider server-side rendering for initial blog list (SolidStart supports this)

View File

@@ -0,0 +1,74 @@
# 04. Create Blog Post Content
meta:
id: landing-pages-and-admin-04
feature: landing-pages-and-admin
priority: P2
depends_on: [landing-pages-and-admin-02, landing-pages-and-admin-03]
tags: [content, blog, database-seed]
objective:
- Create at least 4 substantive, well-written blog posts with practical advice on scam prevention, AI detection, identity theft recovery, and related topics. Seed these posts into the database via the admin interface or a seed script.
deliverables:
- At least 4 full blog post entries in the `blogPosts` database table
- Each post includes: title, slug, excerpt, full markdown content, author name, tags, published status, published date
- Content covers: scam prevention advice, AI detection tips, identity theft recovery steps, dark web safety, data broker removal
- At least one post marked as `featured`
steps:
- Research and write blog post content for each topic:
1. "How to Spot AI-Generated Scam Calls and Messages" — practical detection tips, red flags, what to do if targeted
2. "Identity Theft Recovery: Step-by-Step Guide" — actionable steps after discovering identity theft, agencies to contact, timeline
3. "Dark Web Exposure: What It Means and How to Respond" — explains data breaches, what info is exposed, protective measures
4. "Data Brokers Exposed: How to Remove Your Info From 20+ Sites" — comprehensive guide to opting out, tools, automation
5. "Deepfake Voice Scams: Protecting Your Family" — how voice cloning works, verification strategies, family safety protocols
- Format each post in markdown with:
- H1 title
- Intro paragraph (used as excerpt)
- Multiple H2 sections with detailed content
- Bullet points, numbered lists for actionable steps
- Internal links to Kordant product features where relevant
- Tags array (matching existing tag categories)
- Create database seed script or use admin interface to insert posts:
- Generate unique slugs from titles
- Set `published` to true
- Set `publishedAt` to appropriate dates (spread across recent months)
- Set `authorName` to realistic author names
- Mark one post as `featured`
- Verify all posts render correctly on `/blog` and `/blog/[slug]`
- Review and proofread all content for quality and accuracy
tests:
- Integration: All posts appear in blog listing page
- Integration: Each post renders correctly on individual page
- Integration: Featured post displays at top of blog listing
- Integration: Tags are properly associated and filterable
- Content: Each post is at least 800 words of substantive content
acceptance_criteria:
- At least 4 blog posts exist in the `blogPosts` database table
- Each post has: title, slug, excerpt, full markdown content (800+ words), author name, tags, published date
- Posts cover diverse topics: scam prevention, AI detection, identity theft recovery, dark web safety, data broker removal
- At least one post is marked as `featured`
- All posts render correctly on both listing and detail pages
- Content is well-written, accurate, and provides actionable advice
- Tags are properly categorized and filterable on the blog listing page
validation:
- `cd /Users/mike/Code/Kordant/web && pnpm dev` then navigate to `/blog`
- Verify all posts appear in chronological order
- Click each post and verify full content renders with proper markdown formatting
- Verify featured post appears at top of listing
- Test tag filtering with each tag category
- Verify view counts increment on page views
notes:
- Content should be educational and helpful, not overly promotional
- Reference real-world examples and statistics where possible
- Include actionable steps users can take immediately
- Link to relevant Kordant features naturally within content (not forced)
- Use existing tag categories: "Identity Theft", "AI Safety", "Privacy", "Deepfakes", "Dark Web", "Scam Alerts", "Product News"
- Author names should be consistent (use "Kordant Security Team" or specific editor names)
- Published dates should be spread across recent months for realistic timeline
- Consider creating a seed script at `/web/src/server/db/seed/blog.ts` for reproducibility

View File

@@ -0,0 +1,86 @@
# 05. Dedicated /pricing And /features Pages
meta:
id: landing-pages-and-admin-05
feature: landing-pages-and-admin
priority: P1
depends_on: [landing-pages-and-admin-06]
tags: [implementation, routes, marketing-pages]
objective:
- Create dedicated `/pricing` and `/features` route pages with full content. Currently the navbar links to these routes but they don't exist. The pricing content exists on `/ads` and features are shown as a section on the landing page. These need to be standalone, polished marketing pages.
deliverables:
- `/web/src/routes/pricing.tsx` — Full pricing page with tier comparison, FAQ, and CTAs
- `/web/src/routes/features.tsx` — Full features page with detailed product showcases
- Pricing data structured as typed arrays (consistent with Lendair inline pattern)
- Feature detail sections for each product (DarkWatch, VoicePrint, SpamShield, HomeTitle, RemoveBrokers, Family Plans)
steps:
- Create `/pricing.tsx`:
- Hero section: headline, subheadline, value proposition
- Pricing tiers card grid (3 tiers):
- Basic ($9/month): Dark web monitoring, email breach alerts, basic scam call blocking, monthly reports
- Plus ($19/month, "Most Popular"): Everything in Basic + VoicePrint, HomeTitle, RemoveBrokers, Family sharing up to 5
- Premium ($39/month): Everything in Plus + Unlimited family, 24/7 priority support, real-time alert correlation, advanced analytics, data broker suppression
- Feature comparison table (checkmarks per tier)
- FAQ section (accordion-style): billing, cancellation, family sharing, trial period
- CTA section with "Get Started" button linking to `/signup`
- Inline data arrays for tiers, features, and FAQ items
- Create `/features.tsx`:
- Hero section: headline, subheadline
- Feature detail sections for each product:
- DarkWatch: dark web monitoring, breach detection, exposure alerts
- VoicePrint: voice clone detection, deepfake voice identification
- SpamShield: scam call blocking, spam filtering, call analytics
- HomeTitle: property fraud alerts, title monitoring, ownership changes
- RemoveBrokers: data broker removal, opt-out automation, privacy reclamation
- Family Plans: family sharing, member management, unified dashboard
- Each feature section includes: icon, title, description, key benefits (bullet list), screenshot/mockup placeholder
- Alternating left-right layout for visual interest (like Lendair's split panels)
- Inline data arrays for all feature content
- Ensure both pages use `PageContainer` for consistent layout
- Add proper `<Title>` meta tags for SEO
- Ensure responsive design (mobile, tablet, desktop)
- Link pricing page CTA buttons to `/signup`
- Link features page cards to relevant dashboard routes (e.g., `/darkwatch`, `/voiceprint`)
tests:
- Integration: `/pricing` route loads without errors
- Integration: `/features` route loads without errors
- Integration: All pricing tiers display correctly with correct prices and features
- Integration: All 6 feature sections render with correct content
- Responsive: Pages render correctly at 320px, 768px, 1024px, 1440px
- Navigation: Navbar links to `/pricing` and `/features` work correctly
acceptance_criteria:
- `/pricing` page renders with 3 pricing tiers (Basic $9, Plus $19, Premium $39)
- Plus tier is visually highlighted as "Most Popular"
- Feature comparison table shows checkmarks per tier
- FAQ section has at least 5 questions with accordion toggle
- CTA buttons link to `/signup`
- `/features` page renders with all 6 product sections
- Each feature section has icon, title, description, and bullet-point benefits
- Pages use inline data arrays (not extracted components)
- Responsive layout works across all breakpoints
- Proper meta titles set for SEO
- No console errors or warnings
validation:
- `cd /Users/mike/Code/Kordant/web && pnpm dev` then navigate to `/pricing` and `/features`
- Verify all pricing tiers display correctly with accurate pricing
- Verify feature comparison table renders correctly
- Verify FAQ accordion works (toggle open/close)
- Verify all 6 feature sections render on `/features`
- Click CTA buttons and verify they navigate to correct routes
- Toggle dark/light theme and verify both pages render correctly
- Resize browser to test responsive breakpoints
notes:
- Pricing data currently lives in `/web/src/routes/ads.tsx` — extract and reuse
- Feature data currently lives in `/web/src/components/landing/FeaturesGridSection.tsx` — extract and expand
- Onboarding page (`/onboarding.tsx`) has slightly different pricing ($0 free, $9.99/mo plus, $19.99/mo premium) — use the `/ads` pricing as canonical for the marketing page
- Follow Lendair's inline data pattern for content organization
- Use existing UI components: `Button`, `Card`, `Badge` from `~/components/ui`
- Consider adding smooth scroll animations for feature sections
- Dashboard sidebar links to individual product pages — features page should link to those same routes

View File

@@ -0,0 +1,76 @@
# 06. Auth-Contextual Navbar With Dynamic Links
meta:
id: landing-pages-and-admin-06
feature: landing-pages-and-admin
priority: P1
depends_on: [landing-pages-and-admin-01]
tags: [implementation, ui, navbar, auth]
objective:
- Make the navbar show contextually appropriate navigation links based on authentication state: logged-out users see marketing links (Features, Pricing, Blog), while logged-in users see product-specific links (DarkWatch, VoicePrint, SpamShield, HomeTitle, RemoveBrokers) alongside Dashboard.
deliverables:
- Updated `/web/src/components/layout/Navbar.tsx` with auth-contextual link rendering
- Desktop and mobile nav menus both respect auth state
- Logged-out state: Features, Pricing, Blog links
- Logged-in state: Dashboard + product-specific links (DarkWatch, VoicePrint, SpamShield, HomeTitle, RemoveBrokers, Settings)
- Smooth transitions between auth states
steps:
- Analyze current `navLinks` array in `Navbar.tsx`:
- Current: `["Features" -> /features, "Pricing" -> /pricing, "Blog" -> /blog, "Dashboard" -> /dashboard]`
- Define two sets of nav links:
- `marketingLinks`: Features → `/features`, Pricing → `/pricing`, Blog → `/blog`
- `productLinks`: Dashboard → `/dashboard`, DarkWatch → `/darkwatch`, VoicePrint → `/voiceprint`, SpamShield → `/spamshield`, HomeTitle → `/hometitle`, RemoveBrokers → `/removebrokers`
- Update desktop nav section:
- Wrap `marketingLinks` in `<SignedOut>` component
- Wrap `productLinks` in `<SignedIn>` component
- Keep existing `SignedIn`/`SignedOut` button section (UserButton, Sign In, Get Started)
- Remove redundant "Dashboard" button when logged in (Dashboard is now a nav link)
- Update mobile nav section:
- Same auth-contextual link rendering for hamburger menu
- Preserve existing mobile button section
- Handle edge cases:
- Auth state changes (login/logout) should update nav links without page reload
- Active route highlighting should work for both link sets
- Subscription tier could affect which product links are visible (future consideration)
- Ensure styling consistency:
- Same link styles for both marketing and product links
- Active state indicator for current route
- Hover effects preserved
tests:
- Unit: Navbar renders correct links for signed-out state
- Unit: Navbar renders correct links for signed-in state
- Integration: Navbar updates links on auth state change without reload
- Integration: Desktop and mobile menus both show correct links
- Integration: All nav links navigate to correct routes
acceptance_criteria:
- Logged-out users see: Features, Pricing, Blog in desktop and mobile nav
- Logged-in users see: Dashboard, DarkWatch, VoicePrint, SpamShield, HomeTitle, RemoveBrokers in desktop and mobile nav
- Logged-in users still see: UserButton, RealtimeIndicator, theme toggle
- Logged-out users still see: Sign In, Get Started buttons, theme toggle
- Auth state changes (login/logout) update nav links without full page reload
- Active route highlighting works for all nav links
- Mobile hamburger menu shows correct links based on auth state
- No console errors or warnings
validation:
- `cd /Users/mike/Code/Kordant/web && pnpm dev` then navigate to `/`
- Test logged-out state: verify marketing links appear (Features, Pricing, Blog)
- Sign in and verify product links appear (Dashboard, DarkWatch, VoicePrint, etc.)
- Sign out and verify marketing links reappear
- Test mobile menu: toggle hamburger and verify correct links for current auth state
- Click each nav link and verify it navigates to the correct route
- Verify active route highlighting works
notes:
- Clerk's `SignedIn`/`SignedOut` components handle auth state reactively
- Current navbar already uses `SignedIn`/`SignedOut` for button section — extend same pattern to nav links
- Dashboard sidebar (`/web/src/components/dashboard/Sidebar.tsx`) has the product link structure to reference
- Product links should match dashboard sidebar: Overview, DarkWatch, VoicePrint, SpamShield, HomeTitle, RemoveBrokers, Settings
- Consider whether Settings should be in navbar or only in sidebar (recommend: keep Settings in sidebar only)
- If user's subscription doesn't include a product, consider graying out or hiding that link (future enhancement)
- Mobile menu should close after clicking a nav link (already implemented)

View File

@@ -0,0 +1,60 @@
# 07. Fix Apple Logo SVG In Social Auth Buttons
meta:
id: landing-pages-and-admin-07
feature: landing-pages-and-admin
priority: P3
depends_on: []
tags: [bugfix, ui, svg, auth]
objective:
- Fix the Apple logo SVG in `SocialAuthButtons.tsx` which renders incorrectly. Replace the malformed SVG path with Apple's official logo path that renders properly in both light and dark modes.
deliverables:
- Updated `/web/src/components/auth/SocialAuthButtons.tsx` with correct Apple logo SVG
- SVG renders correctly at all sizes (h-5 w-5)
- SVG displays properly in both light and dark themes
steps:
- Locate the Apple SVG in `SocialAuthButtons.tsx` (lines 39-41):
```svg
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
<path d="M17.05 20.28c-.98.95-2.05.88..." />
</svg>
```
- Identify the issue: the current path data appears to be malformed or from an incorrect icon set
- Replace with Apple's official logo SVG path:
- Use the standard Apple logo path from Heroicons or similar reputable source
- Ensure `viewBox="0 0 24 24"` matches
- Ensure `fill="currentColor"` for theme compatibility
- Test rendering in both light and dark modes
- Verify the SVG displays correctly on both `/login` and `/signup` pages
tests:
- Visual: Apple logo renders as recognizable Apple logo shape
- Visual: Logo displays correctly in light mode (white button, dark logo)
- Visual: Logo displays correctly in dark mode (dark button, light logo)
- Integration: Login page renders without SVG errors
- Integration: Signup page renders without SVG errors
acceptance_criteria:
- Apple logo SVG renders as a recognizable Apple logo on both login and signup pages
- Logo scales correctly at h-5 w-5 size
- Logo color adapts to theme (via `currentColor`)
- No SVG rendering errors in browser console
- Logo is centered properly within the button
validation:
- `cd /Users/mike/Code/Kordant/web && pnpm dev` then navigate to `/login` and `/signup`
- Verify Apple logo renders correctly on both pages
- Toggle dark/light theme and verify logo displays correctly in both
- Check browser console for any SVG-related warnings or errors
- Inspect element to verify SVG path data is valid
notes:
- Current Apple SVG path: `M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0c-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.6 5.98.52 7.13-.62 1.28-1.4 2.55-2.57 3.08Zm-3.12-15.2c.03-1.14.44-2.23 1.07-3.03.82-.98 2.11-1.63 3.32-1.59.06 1.24-.4 2.45-1.12 3.3-.77.9-1.98 1.52-3.27 1.32Z`
- This path appears to be a leaf/plant shape, not the Apple logo
- Recommended replacement: use official Apple logo from Heroicons outline or solid set
- Apple logo path (Heroicons outline style): `M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11`
- Keep the same `viewBox="0 0 24 24"` and `fill="currentColor"` attributes
- The Google logo SVG above it appears correct — only the Apple logo needs fixing

View File

@@ -0,0 +1,28 @@
# Landing Pages & Admin
Objective: Restructure landing page to inline data pattern, build admin dashboard, dynamic blog from DB, pricing/features pages, auth-contextual navbar, and fix Apple SVG.
Status legend: [ ] todo, [~] in-progress, [x] done
Tasks
- [ ] 01 — Inline index page sections following Lendair pattern → `01-inline-index-sections.md`
- [ ] 02 — Admin routes with controls and services dashboard → `02-admin-routes-dashboard.md`
- [ ] 03 — Blog route with DB integration, featured post, and chronological feed → `03-blog-database-integration.md`
- [ ] 04 — Create blog post content (scam advice, AI detection, etc.) → `04-blog-content-creation.md`
- [ ] 05 — Dedicated /pricing and /features pages → `05-pricing-features-pages.md`
- [ ] 06 — Auth-contextual navbar with dynamic links → `06-auth-contextual-navbar.md`
- [ ] 07 — Fix Apple logo SVG in social auth buttons → `07-fix-apple-logo-svg.md`
Dependencies
- 03 depends on 02 (blog admin needs admin routes for managing featured posts)
- 05 depends on 06 (pricing/features pages need navbar links to resolve)
- 06 depends on 01 (navbar should reflect same inline data pattern)
Exit criteria
- Index page uses inline data arrays and layout (Lendair pattern) instead of extracted components
- Admin routes accessible at /admin with services dashboard and blog management
- /blog fetches posts from database with featured post support and chronological ordering
- At least 4 substantive blog posts created in the database with scam/AI/privacy content
- /pricing and /features routes exist with proper content
- Navbar shows different links based on auth state (logged-in sees product links, logged-out sees marketing links)
- Apple logo SVG renders correctly on login/signup pages