Card tilt toggle (per-member, synced) #48

New issue

Closed

opened 2026-08-13 19:12:05 +00:00 by nalum · 0 comments

nalum commented

2026-08-13 19:12:05 +00:00

Owner

Summary

Add a per-member preference to flatten the card tilt across the whole app. The tilt is the pinned-paper-note look — cards rotate by a small cycling angle. Some members find rotated text harder to read. The preference turns it off, so cards render straight. It syncs across devices and is offered during the first-login tour.

Context

The tilt is part of the visual system on both surfaces:

Web: web/src/app.css:321 — rotate: calc(var(--tilt) * var(--tilt-scale, 1)), with a cycling set of angles and a --tilt-scale that halves the angle on wide screens.
Android: android/app/src/main/java/ie/eagraiclainne/android/ui/Board.kt:83-87 — the same four angles through tiltAngle(), halved on wide screens.

Depends on

#60 — the synced UI-preferences model. This issue uses the flatten_cards field defined there. flatten_cards defaults to false, which keeps the current tilted look. True renders cards straight.

Scope

Web (reference surface):

When flatten_cards is true, zero the tilt everywhere.
Audit the raw rotate: var(--tilt) uses that ignore --tilt-scale (for example web/src/app.css:835 and :850). Route every tilt through one switch, so a single flag flattens all of them. Setting --tilt-scale: 0 is the natural mechanism once every rotation honors it.

Android:

tiltAngle() returns 0 when flatten_cards is true (Board.kt:86-87).

First-login tour:

Add a tilt on/off choice to the tour, next to the existing theme step (android/.../ui/Tour.kt atTheme, web web/src/tour/TourGate.tsx). A member chooses the look during onboarding.

Default

Tilted. flatten_cards false preserves the current look. This is an opt-out.

Surface parity

Web and Android both honor the preference. MCP and CLI do not render cards. Per system rule 1.

Design authority

docs/frontend-plan.html documents the tilt as part of the visual system. Update it to record the toggle and that flat is a supported mode (system rule 5, frontend canon).

Definition of done

A member can turn the tilt off, and every card on both surfaces renders straight.
The choice is offered in the first-login tour and syncs across devices through #60.
docs/frontend-plan.html updated. make check passes. Verified on device against the live deploy.

### Summary Add a per-member preference to flatten the card tilt across the whole app. The tilt is the pinned-paper-note look — cards rotate by a small cycling angle. Some members find rotated text harder to read. The preference turns it off, so cards render straight. It syncs across devices and is offered during the first-login tour. ### Context The tilt is part of the visual system on both surfaces: - Web: `web/src/app.css:321` — `rotate: calc(var(--tilt) * var(--tilt-scale, 1))`, with a cycling set of angles and a `--tilt-scale` that halves the angle on wide screens. - Android: `android/app/src/main/java/ie/eagraiclainne/android/ui/Board.kt:83-87` — the same four angles through `tiltAngle()`, halved on wide screens. ### Depends on #60 — the synced UI-preferences model. This issue uses the `flatten_cards` field defined there. `flatten_cards` defaults to false, which keeps the current tilted look. True renders cards straight. ### Scope Web (reference surface): - When `flatten_cards` is true, zero the tilt everywhere. - Audit the raw `rotate: var(--tilt)` uses that ignore `--tilt-scale` (for example `web/src/app.css:835` and `:850`). Route every tilt through one switch, so a single flag flattens all of them. Setting `--tilt-scale: 0` is the natural mechanism once every rotation honors it. Android: - `tiltAngle()` returns 0 when `flatten_cards` is true (`Board.kt:86-87`). First-login tour: - Add a tilt on/off choice to the tour, next to the existing theme step (`android/.../ui/Tour.kt` `atTheme`, web `web/src/tour/TourGate.tsx`). A member chooses the look during onboarding. ### Default Tilted. `flatten_cards` false preserves the current look. This is an opt-out. ### Surface parity Web and Android both honor the preference. MCP and CLI do not render cards. Per system rule 1. ### Design authority `docs/frontend-plan.html` documents the tilt as part of the visual system. Update it to record the toggle and that flat is a supported mode (system rule 5, frontend canon). ### Definition of done - A member can turn the tilt off, and every card on both surfaces renders straight. - The choice is offered in the first-login tour and syncs across devices through #60. - `docs/frontend-plan.html` updated. `make check` passes. Verified on device against the live deploy.

nalum added the

enhancement

android

web

labels

2026-08-13 19:12:25 +00:00

nalum added reference refs/tags/v1.3.0

2026-08-13 19:12:30 +00:00

nalum referenced this issue

2026-08-14 11:14:43 +00:00

Sync UI preferences across devices via UserSettings #60

nalum changed title from ~~Toggle the ui tilt~~ to Card tilt toggle (per-member, synced)