Skip to content

feat(ui): add Scanner Denied state matching Figma node 32:2 #61

@ilmoniemi

Description

@ilmoniemi

User Story

As a Pyrycode mobile user who denied the camera permission, I want a dedicated state screen explaining the permission requirement, so I can recover via Settings or fall back to pasted code without confusion.

Context

Figma node 32:2 (Scanner — Denied state variant) doesn't exist in code today. The pairing flow lands on the main Scanner (app/src/main/java/de/pyryco/mobile/ui/onboarding/ScannerScreen.kt) without a denied-permission branch. When CameraX lands in Phase 4, the runtime permission flow will need this state surface. Pre-building the visual now decouples Figma-fidelity work from CameraX integration, and slots into the Phase 1.5 Figma-anchored catchup wave (after Welcome #57).

Acceptance Criteria

  • New composable ScannerDeniedScreen in app/src/main/java/de/pyryco/mobile/ui/onboarding/ renders the camera-with-diagonal-strike illustration from Figma node 32:2 (rect + 2 ellipses + viewfinder bridge path + error-color strike line)
  • Headline "Camera permission required" and the body explainer paragraph match Figma node 32:2 copy and use M3 typography roles (no hardcoded TextStyle)
  • Primary action is a filled M3 Button labelled "Open settings"; secondary action is an M3 TextButton labelled "Paste code instead". Both take () -> Unit lambdas; the screen itself launches no intents and performs no navigation
  • All colors bind to MaterialTheme.colorScheme.*; the strike line uses colorScheme.error
  • @Preview composables for light and dark variants visually match the Figma screenshot side-by-side

Technical Notes

Scope discipline:

  • Single new file alongside ScannerScreen.kt. Do NOT wire into MainActivity's NavHost in this ticket — runtime permission routing arrives with CameraX in Phase 4, and the caller (not this screen) owns Intent.ACTION_APPLICATION_DETAILS_SETTINGS construction.
  • Mirror the existing ScannerScreen.kt (95 LOC) for Surface, systemBarsPadding, and PyrycodeMobileTheme preview wrapping conventions.

Asset & rendering pointers:

  • The camera-with-strike illustration is small enough to draw in Compose Canvas directly (rect + ellipses + path + line). If get_design_context exposes a clean SVG export, an ImageVector drawable under app/src/main/res/drawable/ is also acceptable — architect picks based on the design payload.
  • Use the M3 typography roles the Figma binds (verify via get_design_context, do not guess).

Size Estimate

S — single file, ~60-100 production lines: M3 layout (Surface + Column + Button + TextButton) plus a small Compose Canvas or ImageVector illustration. Self-contained: no data layer, navigation, or DI changes.

Figma

https://www.figma.com/design/g2HIq2UyPhslEoHRokQmHG?node-id=32-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