#31: Build My Work tab

[mattrace-gloo]

🔥 TLDR

Implements the My Work tab: assigned chapters from SQLite, workflow badges, recording sync clouds, and offline download progress—styled to match the Lovable mock. Depends on #32 for the shared home shell.

📋 Summary

• Issue: Mobile app needs a functional My Work tab (GitHub Build My Work Tab #31) listing the translator’s assigned chapters with workflow and sync affordances per the mock.
• Root Cause: My Work was a placeholder; chapter assignment data was not surfaced in a dedicated query/UI, and verse download progress was not wired through sync.
• Solution: Added getMyWorkChapters, useMyWorkChapters, row components (MyWorkRow, badges, progress ring, cloud icons), theme/layout tokens, API→SQLite verse counts, and mock-aligned home list styling. Refactored shared sync/display helpers for maintainability.
• Impact: Translators see Bible-ordered assigned work offline after sync, with clear draft/peer-check/not-started states and download progress on not-started chapters.

Related Issue: #31

Depends on (merge first): #32 — Projects tab, PageHeader/TabBar, theme foundation, and HomeScreen shell from PR stacked on feature/32-build-projects-tab.

Type of Change:

• 🐛 Bug fix (non-breaking change that fixes an issue)
• ✨ New feature (non-breaking change that adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
• 📚 Documentation update
• 🔧 Maintenance/refactor (no functional changes)

---

🔧 Technical Changes

Key Files Modified

src/db/queries.ts

• getMyWorkChapters(userId) — assigned chapters, excludes complete, Bible order, recording sync counts, bible_texts download count for progress ring.

src/hooks/useMyWorkChapters.ts

• Loads/refreshes chapters; respects refreshKey from header sync (same pattern as Projects).

src/app/tabs/MyWorkTab.tsx

• FlatList of MyWorkRow; empty/loading states; navigates to VerseDetail.

src/components/ui/MyWorkRow.tsx, ChapterProgressRing.tsx, WorkflowBadge.tsx, RecordingCloudIcon.tsx

• Mock-aligned row layout: title + cloud (draft/peer check), badge + date or badge + download ring (not started).

src/services/mapChapterAssignment.ts, src/services/sync.ts, src/db/schema.ts

• Persist total_verses / completed_verses from API; migration for existing DBs.

src/theme/ (tokens.ts, layout.ts, iconSpecs.ts)

• Card/tab bar colors (#eaeef5), list card layout, icon stroke sizes.

Lines changed: ~1,183 vs feature/32-build-projects-tab | Files modified: 38 (My Work scope)

Dependencies & Configuration

• No new dependencies
• New dependencies:
• No config changes
• Environment/build config changes:
• No database changes (schema only)
• Database/storage changes: chapter_assignments.total_verses, completed_verses columns + init migrations in src/db/index.ts

---

✅ Testing & Quality Checklist

Testing Completed

• [x ] ✅ Android device/emulator tested
• ✅ Unit tests added/updated and passing
• ✅ Edge cases considered and tested

Code Quality (fluent-mobile gates)

• ✅ npm run lint
• ✅ npm run format:check
• ✅ npx tsc --noEmit
• ✅ FLUENT_USER_EMAIL=test@example.com npm test -- --ci (12 suites, 33 tests)
• ✅ Self-reviewed the code changes

---

📸 Screenshots/Recordings

---

🎯 Why This Solution?

1. Offline-first: UI reads SQLite after sync, consistent with app architecture.
2. Mock fidelity: Shared theme.layout / listCard tokens keep Projects and My Work visually aligned with Lovable.
3. Maintainability: RecordingCloudIcon, verseProgress, myWorkRowDisplay, and workflowStage maps avoid duplicated row logic.

📱 Before/After

• Before: My Work tab empty/placeholder; no chapter list for assigned user.
• After: Assigned chapters in Bible order with workflow badges, sync clouds, and download progress ring on not-started rows.

---

⚠️ Breaking Changes

• No breaking changes
• Breaking changes documented below:

---

📊 Performance Impact

Bundle Size:

• No significant impact (< 1MB)
• Minor increase (1-5MB)
• Significant increase (> 5MB) - justified because:

Runtime Performance:

• No performance impact
• Performance improvements
• Potential performance concern - mitigated by:

Battery/Memory:

• No impact on battery or memory usage
• Optimizations that improve battery/memory
• Potential impact - acceptable because:

---

🧪 How to Test

Prerequisites: Node 24+, npm install, .env from .env.example, fluent-api running locally, Metro + npm run android (or npm run ios on macOS).

Setup: Check out feature/31-build-my-work-tab on top of merged #32 (or base PR branch feature/32-build-projects-tab).

Steps:

1. Sync app with a user that has chapter assignments and some bible_texts seeded.
2. Open My Work (default tab).
3. Confirm chapters appear in Bible order; complete assignments are hidden.
4. Verify Draft / Peer Check rows: badge + last activity date + green/yellow cloud when recordings exist.
5. Verify Not Started rows: badge + circular download progress (partial arc when verses exist locally).
6. Pull to refresh and tap header sync — list updates after refreshKey bump.

Expected: UI matches https://fluent-test1.lovable.app/ My Work tab (card background, tab bar #eaeef5, typography, badges, icons).

---

🔗 Additional Context

Merge order: Do not merge into main until #32 is merged. Open/target this PR against feature/32-build-projects-tab to keep the diff limited to My Work (#31) work.

Deployment Notes: Existing installs get new SQLite columns on next app launch (migration swallows duplicate-column errors).

Follow-up Tasks:

• Build Cloud Sync Status Icon #38 Sync header overlay (out of scope)
• Build Settings Page with Gear Icon Entry Point #40 Settings screen (gear remains no-op)

The base branch was changed.