ceos/opencode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(app): add mobile bottom navigation (#32797)

Browse source
This commit is contained in:
Brendan Allan 2026-06-23 17:29:22 +08:00 • committed by GitHub
commit b0063709e6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 72 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

27
packages/app/src/pages/session.tsx
View file

@ -1568,12 +1568,20 @@ export default function Page() {
/>
)
const mobileTabs = (compact = false) => (
const mobileTabs = (compact = false, bottom = false) => (
<Tabs value={store.mobileTab} class="h-auto">
<Tabs.List class={compact ? "!h-9" : undefined}>
<Tabs.List
classList={{
"!h-9": compact,
"[&::after]:!border-b-0 [&::after]:!border-t [&::after]:!border-border-weak-base": bottom,
}}
>
<Tabs.Trigger
value="session"
class="!w-1/2 !max-w-none"
classList={{
"!w-1/2 !max-w-none": true,
"!border-b-0 !border-t !border-border-weak-base [&:has([data-selected])]:!border-t-transparent": bottom,
}}
classes={{ button: compact ? "w-full !py-2" : "w-full" }}
onClick={() => setStore("mobileTab", "session")}
>
@ -1581,7 +1589,10 @@ export default function Page() {
</Tabs.Trigger>
<Tabs.Trigger
value="changes"
class="!w-1/2 !max-w-none !border-r-0"
classList={{
"!w-1/2 !max-w-none !border-r-0": true,
"!border-b-0 !border-t !border-border-weak-base [&:has([data-selected])]:!border-t-transparent": bottom,
}}
classes={{ button: compact ? "w-full !py-2" : "w-full" }}
onClick={() => setStore("mobileTab", "changes")}
>
@ -1592,6 +1603,9 @@ export default function Page() {
</Tabs.List>
</Tabs>
)
const mobileTabsBottom = createMemo(
() => !isDesktop() && settings.general.newLayoutDesigns() && settings.general.mobileTitlebarPosition() === "bottom",
)
return (
<div class="relative size-full overflow-hidden flex flex-col">
@ -1622,7 +1636,9 @@ export default function Page() {
"shadow-[var(--v2-elevation-raised)]": settings.general.newLayoutDesigns() && !!params.id,
}}
>
<Show when={!isDesktop() && !!params.id && settings.general.newLayoutDesigns()}>{mobileTabs(true)}</Show>
<Show when={!isDesktop() && !!params.id && settings.general.newLayoutDesigns() && !mobileTabsBottom()}>
{mobileTabs(true)}
</Show>
<div class="flex-1 min-h-0 overflow-hidden">
<Switch>
<Match when={params.id && mobileChanges()}>
@ -1688,6 +1704,7 @@ export default function Page() {
</div>
<Show when={(params.id || !newSessionDesign()) && !mobileChanges()}>{composerRegion("dock")}</Show>
<Show when={!!params.id && mobileTabsBottom()}>{mobileTabs(true, true)}</Show>
</div>
<Show when={desktopReviewOpen()}>