feat(ui): calm layout, quick frame logging, pages over the tab bar #10

Merged

eliott merged 3 commits from feat/calm-layout into main 2026-10-20 19:29:12 +02:00

Conversation 0 Commits 3 Files changed 56 +1123 -544

eliott commented 2026-10-19 22:45:22 +02:00

Owner

• Copy link
• Copy Markdown

The mobile app felt crowded: stacked bordered cards, small icon actions on every row, and a quarter of the screen taken by fixed bars. This reworks the layout for calmer reading and faster logging in the field.

What changes

• Calm lists: shoots and frames are rows of one card, split by hairlines, with sections 24pt apart. A row carries one action; pin, done, duplicate and delete move to a long-press action sheet (and the bar's menu).
• Faster logging: the Shoots tab opens on the roll in the camera (pinned, else newest not done) with Log frame N straight to the frame form. On a shoot, Log frame N (or Reopen when done) is a FAB.
• Frame form: rings first; lens, filter and weather as three rows of one card; location (auto-captured) and notes folded under a one-line summary; Save held in a slim bottom bar.
• Less fixed chrome: every page below a tab root is now a route of the app's root stack (pagesOf in app.routes.ts), pushed over the shell, so it covers the tab bar and sync bar natively. URLs are unchanged. (Toggling barHidden on navigation was tried first: the bar changed late and showed during transitions, and react-native-screens kept counting it in a later screen's bottom inset.)
• Tabs: Shoots / Gear / Profile, aperture icon for Gear.
• New UI pieces: app-bottom-bar, app-fab, app-disclosure, app-select variant="row", app-text-field labelHidden.
• Version 0.11.0.

Testing

• pnpm test (227 passing, incl. a new test for logging from the list), pnpm typecheck, pnpm lint, pnpm format:check.
• Checked on the emulator in light and dark: list, shoot detail, frame form (folded and open location), long-press sheets; tab transitions checked frame by frame from a screen recording.
• Release APK built and sideloaded for review.

Known, not in this PR

The aperture/shutter rings sometimes open with the indicator a stop off the shown value (intermittent, same on main).

The mobile app felt crowded: stacked bordered cards, small icon actions on every row, and a quarter of the screen taken by fixed bars. This reworks the layout for calmer reading and faster logging in the field. ## What changes - **Calm lists**: shoots and frames are rows of one card, split by hairlines, with sections 24pt apart. A row carries one action; pin, done, duplicate and delete move to a long-press action sheet (and the bar's menu). - **Faster logging**: the Shoots tab opens on the roll in the camera (pinned, else newest not done) with **Log frame N** straight to the frame form. On a shoot, Log frame N (or Reopen when done) is a FAB. - **Frame form**: rings first; lens, filter and weather as three rows of one card; location (auto-captured) and notes folded under a one-line summary; Save held in a slim bottom bar. - **Less fixed chrome**: every page below a tab root is now a route of the app's root stack (`pagesOf` in `app.routes.ts`), pushed over the shell, so it covers the tab bar and sync bar natively. URLs are unchanged. (Toggling `barHidden` on navigation was tried first: the bar changed late and showed during transitions, and react-native-screens kept counting it in a later screen's bottom inset.) - **Tabs**: Shoots / Gear / Profile, aperture icon for Gear. - New UI pieces: `app-bottom-bar`, `app-fab`, `app-disclosure`, `app-select` `variant="row"`, `app-text-field` `labelHidden`. - Version 0.11.0. ## Testing - `pnpm test` (227 passing, incl. a new test for logging from the list), `pnpm typecheck`, `pnpm lint`, `pnpm format:check`. - Checked on the emulator in light and dark: list, shoot detail, frame form (folded and open location), long-press sheets; tab transitions checked frame by frame from a screen recording. - Release APK built and sideloaded for review. ## Known, not in this PR The aperture/shutter rings sometimes open with the indicator a stop off the shown value (intermittent, same on main).

eliott added 1 commit 2026-10-19 22:45:22 +02:00

feat(ui): calm layout, quick frame logging, pages over the tab bar ... d3ae950de9

- Lists are one card of rows split by hairlines instead of stacked bordered
  cards; sections 24pt apart. Shoot and frame rows carry one action; pin,
  done, duplicate and delete move to a long-press action sheet.
- Shoots tab: the roll in the camera (pinned, else newest not done) on top
  with Log frame N straight to the frame form; New shoot is a FAB.
- Shoot detail: name in the bar only, folder/date/marks on one line, pin,
  done and clear all in the bar's menu, Log frame N (or Reopen) as a FAB.
- Frame form: lens, filter and weather as rows of one card, location and
  notes folded under a one-line summary (app-disclosure), Save held in a
  slim bottom bar.
- Tabs read Shoots / Gear / Profile (aperture icon for Gear).
- Every page below a tab root is a route of the app's root stack, pushed
  over the shell, so it covers the tab bar and sync bar natively.
- New UI pieces: app-bottom-bar, app-fab, app-disclosure, app-select row
  variant, app-text-field labelHidden.
- Bump to 0.11.0.

eliott added the

run-ci

label 2026-10-19 22:45:29 +02:00

eliott added 1 commit 2026-10-20 19:22:54 +02:00

fix(ui): smaller titles and folder labels, icon-only new shoot button, shorter tab bar ... 3969508fdd

- Page titles 40 to 32px, stack header titles 20 to 18px.
- Folder labels (and "No folder") 16px at weight 500.
- More room above a shoot's description.
- app-fab takes iconOnly; the shoot list's New shoot is a plain "+" square.
- The theme plugin writes values/dimens.xml to trim Material's tab bar
  from 80dp to 68dp (it takes no height prop).

Claude-Session: https://claude.ai/code/session_01SLFnJjzv78h8dV257nAmsh

eliott added 1 commit 2026-10-20 19:29:05 +02:00

Merge branch 'main' into feat/calm-layout f6aafdf578

eliott merged commit cbd34aa1d7 into main 2026-10-20 19:29:12 +02:00

eliott deleted branch feat/calm-layout 2026-10-20 19:29:12 +02:00

eliott referenced this pull request from a commit 2026-10-20 19:29:12 +02:00

Merge pull request 'feat(ui): calm layout, quick frame logging, pages over the tab bar' (#10) from feat/calm-layout into main

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

run-ci

Add to a PR to run the test workflow

No labels

run-ci

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

RollNote/rollnote-app!10

No description provided.