Skip to content

feat(ux): detail action overflow + dark-mode fix, form sticky save + unsaved guard - #119

Merged
os-zhuang merged 1 commit into
mainfrom
feat/ux-detail-form-polish
Jun 11, 2026
Merged

feat(ux): detail action overflow + dark-mode fix, form sticky save + unsaved guard#119
os-zhuang merged 1 commit into
mainfrom
feat/ux-detail-form-polish

Conversation

@os-zhuang

Copy link
Copy Markdown
Contributor

UX-D — Detail + form polish

Fourth of the UX improvements from the browser walkthrough.

Detail view

  • Overflow-aware action bar — inline header actions are capped at two (MAX_INLINE_ACTIONS); the surplus joins the record_more actions in the ⋯ menu, so the bar can't overflow horizontally on a phone.
  • Dark-mode fix — every icon is now theme-aware (action buttons, the ⋯ trigger, the menu rows, prev/next chevrons). A hardcoded near-black #0f172a icon was invisible on a dark card once dark mode shipped.
  • i18n — Edit / Delete / Previous / Next / Actions / More actions / no-related / load-error.

Form view

  • Sticky save bar — Save/Cancel are pinned at the bottom of the screen (inside the keyboard-avoider) so Save is reachable without scrolling to the end of a long form.
  • Unsaved-changes guard — a dirty flag now confirms a discard before leaving with unsaved edits. The in-form Cancel is guarded directly; onDirtyChange lets the host screen guard its header back (wired in new.tsx + edit.tsx).
  • i18n — Save / Saving / Cancel, the required-field message, and the New/Edit screen titles.

Tests

FormViewRenderer now reads useConfirm + useSafeAreaInsets, so its conditional-fields suite renders through a ConfirmProvider + SafeAreaProvider wrapper. Full suite: 1305 passing.

Verified

Browser (375dp, dark, zh): the edit form shows the pinned 取消 / 保存 bar; editing Subject then tapping back fires the localized discard confirm ("放弃更改?" / 取消 / 放弃).

🤖 Generated with Claude Code

…unsaved guard

Detail view:
- Cap inline header actions at two; the surplus joins the record_more actions
  in the ⋯ menu, so the action bar can't overflow horizontally on a phone.
- Make every icon theme-aware (action buttons, the ⋯ trigger, the menu rows,
  the prev/next chevrons). A hardcoded near-black (#0f172a) icon was invisible
  on a dark card once dark mode shipped.
- i18n the Edit/Delete/Previous/Next/Actions/More-actions/no-related/load-error
  strings.

Form view:
- Pin the Save/Cancel buttons in a sticky bar at the bottom of the screen
  (inside the keyboard-avoider) so Save is reachable without scrolling to the
  end of a long form.
- Track a dirty flag and confirm a discard before leaving with unsaved edits:
  the in-form Cancel is guarded directly, and `onDirtyChange` lets the host
  screen guard its header back (wired in new.tsx + edit.tsx).
- i18n the Save/Saving/Cancel labels, the required-field message, and the
  New/Edit screen titles.

Tests: FormViewRenderer now needs ConfirmProvider + SafeAreaProvider, so its
conditional-fields suite renders through a wrapper. Full suite 1305 passing.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@os-zhuang
os-zhuang merged commit a80b7f6 into main Jun 11, 2026
@os-zhuang
os-zhuang deleted the feat/ux-detail-form-polish branch June 11, 2026 10:09
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