Skip to content

refactor: extract reusable UI components#19

Merged
jvsena42 merged 9 commits into
mainfrom
refactor/extract-components
Apr 3, 2026
Merged

refactor: extract reusable UI components#19
jvsena42 merged 9 commits into
mainfrom
refactor/extract-components

Conversation

@jvsena42
Copy link
Copy Markdown
Owner

@jvsena42 jvsena42 commented Apr 3, 2026

Summary

Extract 9 reusable UI components from duplicated code across Android (Compose) and iOS (SwiftUI) screens, aligning the codebase with the design system defined in design/design.pen. This eliminates ~1,400 lines of duplicated UI code while adding ~1,900 lines of well-structured, reusable components with previews.

Changes

  • SheetDragHandle (Android only) — replaces 7 private drag handle composables across sheets
  • SelectionIndicator — replaces 3 selection checkbox implementations per platform with configurable size/iconSize
  • PropertyRow — replaces duplicated label-value row in ItemDetailSheet and OutfitDetailSheet
  • WornGradientButton — replaces 8+ gradient button variants with a unified component supporting gradient presets (Save, Green, Indigo), icons, loading/disabled states
  • WornChip — replaces inline chip patterns in CategoryFilterChips, SeasonSection, FitSection, MaterialSection, and SettingsScreen
  • EmptyStateView — replaces duplicated empty state layouts (circle icon + title + description + CTA) in WardrobeScreen and OutfitsScreen
  • ErrorContentView — replaces duplicated error states in GapsScreen and TryItScreen
  • DeleteConfirmationDialog — replaces duplicated delete dialogs in WardrobeScreen and OutfitsScreen
  • SelectionHeader — replaces identical multi-select headers in WardrobeScreen and OutfitsScreen

Test plan

  • Run ./gradlew :composeApp:assembleDebug — Android builds successfully
  • Run ./gradlew detekt — no lint issues
  • Verify all Android previews render correctly (phone + tablet) for new components
  • Open iOS project in Xcode, verify build succeeds and previews render (iPhone + iPad)
  • Manual test: wardrobe screen empty state, add item flow, multi-select + delete flow
  • Manual test: outfits screen empty state, create outfit, multi-select + delete flow
  • Manual test: gaps screen error/retry, gap detail sheet
  • Manual test: try it screen analyze flow, error/retry
  • Manual test: settings screen chip selections, save button

Checklist

  • ./gradlew detekt passes
  • Tested on Android
  • Tested on iOS
  • Updated documentation (if applicable)

🤖 Generated with Claude Code

jvsena42 and others added 9 commits April 3, 2026 14:00
Replace 7 private drag handle composables across sheets with a single
reusable SheetDragHandle component that accepts an optional color parameter.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace 3 private selection indicator/checkbox composables on each
platform with a shared SelectionIndicator that accepts size and iconSize
parameters.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace private PropertyRow/OutfitPropertyRow implementations in detail
sheets with a shared PropertyRow component on both platforms.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace 8+ gradient button variants across both platforms with a unified
WornGradientButton component. Provides gradient presets (Save, Green,
GreenCta, Indigo) and supports icons, loading, disabled states, and
customizable shape/elevation.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace inline chip implementations across both platforms with a shared
WornChip component. Used in CategoryFilterChips, SeasonSection,
FitSection, MaterialSection, and SettingsScreen ChipGroup/MultiChipGroup.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace duplicated empty state layouts in WardrobeScreen and
OutfitsScreen with a shared EmptyStateView that encapsulates the
circle icon container, title, description, and optional action slot.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace duplicated error content in GapsScreen and TryItScreen with a
shared ErrorContentView component on both Android (Compose) and iOS
(SwiftUI). The component accepts a retryButtonColor parameter to
support different accent colors per screen.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…ents

Replace duplicated delete confirmation dialogs and selection headers in
WardrobeScreen and OutfitsScreen with shared components on both platforms.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@jvsena42 jvsena42 enabled auto-merge April 3, 2026 21:47
@jvsena42 jvsena42 merged commit 66eaa3a into main Apr 3, 2026
1 check passed
@jvsena42 jvsena42 deleted the refactor/extract-components branch April 3, 2026 21:52
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