Repository navigation
Let the mobile Chats header carry a Host avatar and a custom banner - #1866
Merged
Merged
Conversation
Customize header (Me) sets, per Host on the phone, an avatar (initial, eight pixel portraits, or a photo) and a banner (accent, solid or typed colour, preset or typed gradient, or a picture under a scrim), with a live preview. Gradients draw with react-native-svg so the web preview shows them. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01EHJCdYC6XNkimchBqPFT2T
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01EHJCdYC6XNkimchBqPFT2T
|
Warning Review limit reachedYou've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. Next included review available in 41 minutes. View limit details
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01EHJCdYC6XNkimchBqPFT2T
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01EHJCdYC6XNkimchBqPFT2T
DoodleBears
marked this pull request as ready for review
October 15, 2026 06:43
DoodleBears
pushed a commit
that referenced
this pull request
Oct 15, 2026
Brings in the Host drawer (#1859), Chats search and sections, and Customize header (#1866). Computers in Settings now closes the sheet and opens the Host drawer; Customize header moves from Me into a Settings Interface group. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01P4McGrxLaXPVxUuUd2e7xZ
This was referenced Oct 15, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Requested by Vain · project thread
Before: the Chats header band is always the accent colour, and the Host chip always shows the Host's initial.
After: Me → Customize header opens a form sheet with a live preview where each Host gets its own look, kept on the phone:
Custom colours go through the accent band's own steps, so dark mode mutes them the same way; the ink is white or near-black, whichever reads on both stops (a test checks every preset in both schemes).
Screenshots are the web export at 390 × 844 against a real isolated Host, driven end to end (pair, open Me → Customize header, tap presets, pick the two pictures through the file chooser, go back to Chats).
How:
src/ui/design/host-look.tsholds the look types, presets andhostBand();src/host/host-look.tsis the per-Host store (same shape as the section-collapse store) andnative-host-look.tspersists it to a JSON file and copies picked photos into the app's documents.HostBandLayer/HostChipFace(shell) draw the band and chip for both the header and the preview; gradients are drawn withreact-native-svg(GradientFill) because React Native Web ignoresexperimental_backgroundImage.Chipfrom the Activity filters is exported and reused for the banner kind picker. Phone-only setting, no Host bridge method or route, so no CLI command is needed.Coordination with the in-flight nav PRs: #1857 removes Me, so whichever lands second moves the "Customize header" row into Settings (an Interface group); #1859 changes
home-header.tsx(the chip opens the drawer); this PR moves the chip's tile/name/▾ intoHostChipFaceand the band intoHostBandLayer, so the merge keeps #1859'sPressableprops and swaps its children. The drawer can reuseHostTileto show each Host's avatar.Checks:
pnpm --filter @botharness/mobile typecheck,vitest run apps/mobile(newtest/host-look.test.tsx: parsing, per-Host store, ink contrast on every preset in both schemes, editor interactions), style guard.Human QA
expo-image-picker,expo-file-systemandreact-native-svgare already in the app): pick a photo for the avatar and banner, restart the app and confirm both stay; status bar ink stays light on a picture.🤖 Generated with Claude Code
https://claude.ai/code/session_01EHJCdYC6XNkimchBqPFT2T
Generated by Claude Code