Skip to content

refactor: native-first UI sweep (Material 3 Expressive + SwiftUI) - #8

Merged
jvsena42 merged 1 commit into
mainfrom
refactor/use-native-first-ui
Jun 14, 2026
Merged

refactor: native-first UI sweep (Material 3 Expressive + SwiftUI)#8
jvsena42 merged 1 commit into
mainfrom
refactor/use-native-first-ui

Conversation

@jvsena42

Copy link
Copy Markdown
Owner

What & why

Sweeps the remaining bespoke custom chrome across the app onto native platform components, per the CLAUDE.md "Native-first UI" rule (design/DESIGN_GUIDELINE.md §4). Brand tokens (accent, type, radii) are applied to native components rather than rebuilding chrome from Box/Row/Capsule primitives. Continues the pattern established by the EchoTabBar → ShortNavigationBar change.

Android (Compose / Material 3 Expressive)

  • Echo buttons rewrapped on native M3 (same public API): EchoPrimaryButtonButton, EchoSecondaryButtonFilledTonalButton, TagChipInputChip.
  • Headers → TopAppBar + IconButton/FilledIconButton: EditCard, DeckDetail, Settings, Profile, Paste, DeckEditor.
  • BasicTextFieldOutlinedTextField; custom pills/badges → AssistChip.
  • Progress bars → LinearProgressIndicator (Home, Study); divider → HorizontalDivider; Profile error banner → Snackbar; inline CTAs → native Button/OutlinedButton; SRS grade buttons rebuilt on Button; onboarding link → TextButton.
  • Kept brand-custom: study card flip, DeckTile/AuthorRow/CardPreviewRow/StatsBar, hero/cover/avatar layouts.

iOS (SwiftUI)

  • New EchoButtonStyles.swift — reusable ButtonStyles mirroring the Android Echo buttons, replacing repeated Capsule().fill() chrome across 9 views.
  • Custom progress bar → ProgressView. Native TabView/.sheet/Divider already in place; tag chips/hero cards kept brand-custom (no native iOS chip).

Note: the iOS app is drafted/inert (Koin bootstrap still commented out), so it is SwiftLint-verified only — no end-to-end Xcode build runs yet. The Xcode project uses PBXFileSystemSynchronizedRootGroup, so the new file auto-compiles in-target.

Cross-cutting

  • Shadow color literals extracted to tokens (shadowAccent, shadowElevation{Low,Medium,High,XHigh}) in both EchoColors.kt and EchoColor.swift; 0 inline shadow literals remain.
  • CLAUDE.md: added rule to always import symbols rather than reference them fully-qualified inline (Kotlin + Swift).

Verification

  • ./gradlew detektAll :composeApp:assembleDebugBUILD SUCCESSFUL
  • ./gradlew lintSwift0 violations

🤖 Generated with Claude Code

Replace bespoke custom chrome with native platform components per the
CLAUDE.md "Native-first UI" rule, applying Echo brand tokens to native
components instead of rebuilding chrome from primitives.

Android (Compose / Material 3 Expressive):
- EchoPrimaryButton -> Button, EchoSecondaryButton -> FilledTonalButton,
  TagChip -> InputChip (same public APIs / brand tokens)
- Screen headers -> TopAppBar + Icon/FilledIconButton (EditCard, DeckDetail,
  Settings, Profile, Paste, DeckEditor)
- BasicTextField -> OutlinedTextField; custom pills/badges -> AssistChip
- Custom progress bars -> LinearProgressIndicator; divider -> HorizontalDivider;
  Profile error banner -> Snackbar; inline CTAs -> native Button/OutlinedButton
- Kept brand-custom: study card flip, DeckTile/AuthorRow/CardPreviewRow/StatsBar,
  hero/cover/avatar layouts

iOS (SwiftUI):
- New EchoButtonStyles.swift (reusable ButtonStyles mirroring the Android
  Echo buttons) replacing repeated Capsule().fill() chrome across the views
- Custom progress bar -> ProgressView; kept brand-custom chips/hero cards

Cross-cutting:
- Extract shadow color literals to tokens (shadowAccent, shadowElevation*) on
  both EchoColors.kt and EchoColor.swift
- CLAUDE.md: add rule to always import symbols, never fully-qualify inline

Verified: ./gradlew detektAll :composeApp:assembleDebug (BUILD SUCCESSFUL),
./gradlew lintSwift (0 violations).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant