Skip to content

feat(ui): replace Settings stub with screen matching Figma node 17:2 #64

@ilmoniemi

Description

@ilmoniemi

User Story

As a Pyrycode mobile user opening Settings, I want a structured sectioned screen matching the locked Figma design, so I can see the canonical settings categories (Connection, Appearance, Defaults, Notifications, Memory, Storage, About) with the correct row types instead of a placeholder.

Context

Phase 1's #16 wired a Settings route, but the destination is a literal SettingsPlaceholder composable with the text "Settings placeholder" + Back button. Figma node 17:2 shows the canonical full-screen sectioned settings layout.

This ticket builds the visual skeleton — sections + section headers + row stubs with the correct trailing affordances. Wiring each row's destination, persisting toggle state, and showing real values are Phase 3+ tickets; this ticket lands the visual structure only, with placeholder literals matching Figma.

Acceptance Criteria

  • New composable SettingsScreen at app/src/main/java/de/pyryco/mobile/ui/settings/SettingsScreen.kt replaces the SettingsPlaceholder stub; MainActivity.kt Routes.Settings composable invokes the new screen and the old SettingsPlaceholder private composable is removed.
  • Screen renders M3 TopAppBar with title "Settings" and a back navigation icon that calls the existing onBack (already wired via the NavHost).
  • Body is a vertically scrollable list with the following sections in this order, each preceded by an M3 section header (label-style, indented to match Figma):
    1. Connection — rows: Server (subtitle placeholder "juhana-mac-2026", trailing chevron); Pair another server (single-line, trailing chevron).
    2. Appearance — rows: Theme (subtitle "System", trailing chevron); Use Material You dynamic color (single-line, trailing M3 Switch).
    3. Defaults for new conversations — rows: Default model (subtitle "Opus 4.7", chevron); Default effort (subtitle "high", chevron); Default YOLO (subtitle "off", trailing Switch); Default workspace (subtitle "scratch", chevron).
    4. Notifications — rows: Push notifications when claude responds (single-line, trailing Switch); Notification sound (subtitle "Default", chevron).
    5. Memory — rows: Installed memory plugins (subtitle "0 plugins", trailing outlined Add button with leading plus icon); Manage per-channel memory (single-line, chevron).
    6. Storage — rows: Archived conversations (subtitle "11 archived", chevron); Clear cache (single-line, chevron).
    7. About — rows: Version 0.1.0 (subtitle "build a8f3c2d", no trailing affordance); Open source · github.com/pyrycode/pyrycode-mobile (trailing external-link icon, two-line wrap allowed); Privacy policy (single-line, trailing external-link icon); License: MIT (single-line, no trailing affordance).
  • Switch rows hold local-only state (remember { mutableStateOf(...) } with defaults matching Figma: Material You = on, Default YOLO = off, Push notifications = on); no persistence, no ViewModel, no hoisted callbacks — pure visual stub.
  • All other row taps and the Add button are no-op (or a Log.d TODO marker); sub-screens land in Phase 3 tickets.
  • Zero hardcoded colors / typography / spacing literals — colors come from MaterialTheme.colorScheme, type from MaterialTheme.typography, spacing from M3 defaults (ListItem, dp values matching the 8dp grid are acceptable for section-header padding).
  • @Preview for light and dark; both render without crashing and visually match Figma 17:2 structurally (correct sections, correct row count per section, correct trailing affordance per row).

Technical Notes

  • Existing stub at MainActivity.kt:175-189 (SettingsPlaceholder composable) — remove after wiring the new screen. Update MainActivity.kt:175 (the composable(Routes.Settings) block) to call SettingsScreen(onBack = { navController.popBackStack() }).
  • Prefer M3 ListItem for row primitives; use headlineContent / supportingContent / trailingContent slots. The section header is a Text with MaterialTheme.typography.labelLarge (or whichever M3 token best matches Figma's 14sp/medium label — pick by inspection of the rendered Figma).
  • Don't introduce a SettingsViewModel or repository yet — there is no state to manage beyond the three local switches.
  • Subtitle literals ("juhana-mac-2026", "Opus 4.7", "11 archived", build hash, etc.) are intentional placeholders; do not wire them to BuildConfig, DataStore, or any data source. They are scaffolding that later phases replace.

Size Estimate

S — one new file (~140 LOC including 2 previews) + ~3 LOC change in MainActivity.kt. Two files touched, ~5 ACs of structural work plus one row-enumeration AC; well inside the S envelope.

Figma

https://www.figma.com/design/g2HIq2UyPhslEoHRokQmHG?node-id=17-2

Metadata

Metadata

Assignees

No one assigned

    Labels

    size:s<100 lines; default for non-trivial tickets

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions