kubus/hatchat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rebuild mobile UI on native navigation with system Liquid Glass #8

Merged
kubus merged 2 commits from feature/mobile-native-chrome into main 2026-09-29 20:28:26 +00:00
Conversation 0 Commits 2 Files changed 44 +4790 -2436
kubus commented 2026-09-29 20:23:31 +00:00
Owner
Copy link

Summary

  • Replace the hand-rolled mobile shell — sidebar/drawer, custom NavBar and ModelPickerBar — with the native react-native-screens stack from React Navigation.
  • Restructure to the Messages/Mail layout: Chats is the root screen (large titles, system search), a conversation is pushed on top, and Settings plus the model picker are presented as sheets.
  • Use native chrome throughout: collapsible large titles, UIBarButtonItems with SF Symbols and pull-down menus, edge-swipe back, and the scroll-edge effect — no JS drawing of bars.
  • Render Liquid Glass via expo-glass-effect and delete the local modules/liquid-glass Expo module; fall back to expo-blur below iOS 26, in Expo Go and on web.
  • Split the monolithic SettingsScreen into a screens/settings/ navigator (Connection, Providers, Plugins, Allowlist, Runners) with shared components and server-data hook.
  • Add expo-updates OTA config with runtimeVersion, a CI guard that refuses to build without an update URL, and adaptive app icons (light/dark/tinted).
  • Add expo-haptics and new UI primitives (Icon, List, Menu, Sheets, bar items) to support the native screens.

Testing

  • pnpm --filter @hat/mobile typecheck — passes.
  • pnpm --filter @hat/mobile test — updated chat reducer tests pass.
  • iOS simulator: verify large-title collapse, system search, edge-swipe back, and sheet presentation for Settings and Model.
  • iOS 26 simulator: composer renders Liquid Glass; below iOS 26 it falls back to the expo-blur material.
  • CI .github/workflows/ios-ipa.yml: unsigned IPA builds and the OTA-configured guard passes.
  • Not run: signed EAS device build (requires a paid Apple Developer account).
## Summary - Replace the hand-rolled mobile shell — sidebar/drawer, custom `NavBar` and `ModelPickerBar` — with the native `react-native-screens` stack from React Navigation. - Restructure to the Messages/Mail layout: `Chats` is the root screen (large titles, system search), a conversation is pushed on top, and Settings plus the model picker are presented as sheets. - Use native chrome throughout: collapsible large titles, `UIBarButtonItem`s with SF Symbols and pull-down menus, edge-swipe back, and the scroll-edge effect — no JS drawing of bars. - Render Liquid Glass via `expo-glass-effect` and delete the local `modules/liquid-glass` Expo module; fall back to `expo-blur` below iOS 26, in Expo Go and on web. - Split the monolithic `SettingsScreen` into a `screens/settings/` navigator (Connection, Providers, Plugins, Allowlist, Runners) with shared components and server-data hook. - Add `expo-updates` OTA config with `runtimeVersion`, a CI guard that refuses to build without an update URL, and adaptive app icons (light/dark/tinted). - Add `expo-haptics` and new UI primitives (`Icon`, `List`, `Menu`, `Sheets`, bar items) to support the native screens. ## Testing - `pnpm --filter @hat/mobile typecheck` — passes. - `pnpm --filter @hat/mobile test` — updated `chat` reducer tests pass. - iOS simulator: verify large-title collapse, system search, edge-swipe back, and sheet presentation for Settings and Model. - iOS 26 simulator: composer renders Liquid Glass; below iOS 26 it falls back to the `expo-blur` material. - CI `.github/workflows/ios-ipa.yml`: unsigned IPA builds and the OTA-configured guard passes. - Not run: signed EAS device build (requires a paid Apple Developer account).
- Replace the JS tab bar with a react-native-screens native stack: large titles, system search, bar-button pull-down menus, sheet presentations
- Drop the local liquid-glass Expo module for expo-glass-effect, with an expo-blur fallback below iOS 26, Expo Go, and web
- Split Settings into a per-provider/plugin/runners navigator and add dedicated model, sheets, menu, and list UI primitives
- Track transcripts with react-native-keyboard-controller and add iOS haptics for send, selection, success, and failure
- Require OTA updates in the IPA workflow and add dark/tinted app icons
Conflicts were all in apps/mobile, between this branch's native-stack
rebuild and two PRs on main:

- #6 (iOS sidebar + JS nav bar) is the earlier design this branch
  replaces. Kept this branch's side for App, Glass, Connect, Sessions,
  Markdown and controls, and dropped the files it supersedes: NavBar,
  Sidebar, ModelPickerBar, the old SettingsScreen, and the local
  liquid-glass Swift module (now expo-glass-effect).
- #7 (ask_user questions, todo_write checklists, tool artifacts) is
  ported into the rewritten MessageRow and ChatScreen. The checklist and
  a pending question stay visible when the tool card is collapsed.
  Artifact images open in the full-screen viewer. onAnswer is a stable
  callback like the other row handlers. A new question gets the same
  haptic as an approval request.

main's hat-unsigned.ipa, api/chat/useChat changes and the rest of #7
merged cleanly.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
kubus merged commit 430dc85ae5 into main 2026-09-29 20:28:26 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
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
kubus/hatchat!8
No description provided.