feat(app): new layout
This commit is contained in:
adamelmore
@@ -1,4 +1,5 @@
|
|||||||
import { createMemo, createResource, Show } from "solid-js"
|
import { createMemo, createResource, Show } from "solid-js"
|
||||||
|
import { Portal } from "solid-js/web"
|
||||||
import { A, useNavigate, useParams } from "@solidjs/router"
|
import { A, useNavigate, useParams } from "@solidjs/router"
|
||||||
import { useLayout } from "@/context/layout"
|
import { useLayout } from "@/context/layout"
|
||||||
import { useCommand } from "@/context/command"
|
import { useCommand } from "@/context/command"
|
||||||
@@ -57,211 +58,218 @@ export function SessionHeader() {
|
|||||||
navigate(`/${params.dir}/session/${session.id}`)
|
navigate(`/${params.dir}/session/${session.id}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const leftMount = createMemo(() => document.getElementById("opencode-titlebar-left"))
|
||||||
|
const rightMount = createMemo(() => document.getElementById("opencode-titlebar-right"))
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header class="h-12 shrink-0 bg-background-base border-b border-border-weak-base flex">
|
<>
|
||||||
<button
|
<Show when={leftMount()}>
|
||||||
type="button"
|
{(mount) => (
|
||||||
class="xl:hidden w-12 shrink-0 flex items-center justify-center border-r border-border-weak-base hover:bg-surface-raised-base-hover active:bg-surface-raised-base-active transition-colors"
|
<Portal mount={mount()}>
|
||||||
onClick={layout.mobileSidebar.toggle}
|
<div class="flex items-center gap-3 min-w-0">
|
||||||
>
|
|
||||||
<Icon name="menu" size="small" />
|
|
||||||
</button>
|
|
||||||
<div class="px-4 flex items-center justify-between gap-4 w-full">
|
|
||||||
<div class="flex items-center gap-3 min-w-0">
|
|
||||||
<div class="flex items-center gap-2 min-w-0">
|
|
||||||
<div class="hidden xl:flex items-center gap-2">
|
|
||||||
<Select
|
|
||||||
options={worktrees()}
|
|
||||||
current={sync.project?.worktree ?? projectDirectory()}
|
|
||||||
label={(x) => getFilename(x)}
|
|
||||||
onSelect={(x) => (x ? navigateToProject(x) : undefined)}
|
|
||||||
class="text-14-regular text-text-base"
|
|
||||||
variant="ghost"
|
|
||||||
>
|
|
||||||
{/* @ts-ignore */}
|
|
||||||
{(i) => (
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<Icon name="folder" size="small" />
|
|
||||||
<div class="text-text-strong">{getFilename(i)}</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Select>
|
|
||||||
<div class="text-text-weaker">/</div>
|
|
||||||
</div>
|
|
||||||
<Show
|
|
||||||
when={parentSession()}
|
|
||||||
fallback={
|
|
||||||
<>
|
|
||||||
<Select
|
|
||||||
options={sessions()}
|
|
||||||
current={currentSession()}
|
|
||||||
placeholder="New session"
|
|
||||||
label={(x) => x.title}
|
|
||||||
value={(x) => x.id}
|
|
||||||
onSelect={navigateToSession}
|
|
||||||
class="text-14-regular text-text-base max-w-[calc(100vw-180px)] md:max-w-md"
|
|
||||||
variant="ghost"
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<div class="flex items-center gap-2 min-w-0">
|
<div class="flex items-center gap-2 min-w-0">
|
||||||
<Select
|
<div class="hidden xl:flex items-center gap-2">
|
||||||
options={sessions()}
|
<Select
|
||||||
current={parentSession()}
|
options={worktrees()}
|
||||||
placeholder="Back to parent session"
|
current={sync.project?.worktree ?? projectDirectory()}
|
||||||
label={(x) => x.title}
|
label={(x) => getFilename(x)}
|
||||||
value={(x) => x.id}
|
onSelect={(x) => (x ? navigateToProject(x) : undefined)}
|
||||||
onSelect={(session) => {
|
class="text-14-regular text-text-base"
|
||||||
// Only navigate if selecting a different session than current parent
|
variant="ghost"
|
||||||
const currentParent = parentSession()
|
>
|
||||||
if (session && currentParent && session.id !== currentParent.id) {
|
{/* @ts-ignore */}
|
||||||
navigateToSession(session)
|
{(i) => (
|
||||||
}
|
<div class="flex items-center gap-2">
|
||||||
}}
|
<Icon name="folder" size="small" />
|
||||||
class="text-14-regular text-text-base max-w-[calc(100vw-180px)] md:max-w-md"
|
<div class="text-text-strong">{getFilename(i)}</div>
|
||||||
variant="ghost"
|
</div>
|
||||||
/>
|
)}
|
||||||
<div class="text-text-weaker">/</div>
|
</Select>
|
||||||
<div class="flex items-center gap-1.5 min-w-0">
|
<div class="text-text-weaker">/</div>
|
||||||
<Tooltip value="Back to parent session">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="flex items-center justify-center gap-1 p-1 rounded hover:bg-surface-raised-base-hover active:bg-surface-raised-base-active transition-colors flex-shrink-0"
|
|
||||||
onClick={() => navigateToSession(parentSession())}
|
|
||||||
>
|
|
||||||
<Icon name="arrow-left" size="small" class="text-icon-base" />
|
|
||||||
</button>
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<Show
|
||||||
</Show>
|
when={parentSession()}
|
||||||
</div>
|
fallback={
|
||||||
<Show when={currentSession() && !parentSession()}>
|
<>
|
||||||
<TooltipKeybind class="hidden xl:block" title="New session" keybind={command.keybind("session.new")}>
|
<Select
|
||||||
<IconButton as={A} href={`/${params.dir}/session`} icon="edit-small-2" variant="ghost" />
|
options={sessions()}
|
||||||
</TooltipKeybind>
|
current={currentSession()}
|
||||||
</Show>
|
placeholder="New session"
|
||||||
</div>
|
label={(x) => x.title}
|
||||||
<div class="flex items-center gap-3">
|
value={(x) => x.id}
|
||||||
<div class="hidden md:flex items-center gap-1">
|
onSelect={navigateToSession}
|
||||||
<Button
|
class="text-14-regular text-text-base max-w-[calc(100vw-180px)] md:max-w-md"
|
||||||
size="small"
|
variant="ghost"
|
||||||
variant="ghost"
|
/>
|
||||||
onClick={() => {
|
</>
|
||||||
dialog.show(() => <DialogSelectServer />)
|
}
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
classList={{
|
|
||||||
"size-1.5 rounded-full": true,
|
|
||||||
"bg-icon-success-base": server.healthy() === true,
|
|
||||||
"bg-icon-critical-base": server.healthy() === false,
|
|
||||||
"bg-border-weak-base": server.healthy() === undefined,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Icon name="server" size="small" class="text-icon-weak" />
|
|
||||||
<span class="text-12-regular text-text-weak truncate max-w-[200px]">{server.name}</span>
|
|
||||||
</Button>
|
|
||||||
<SessionLspIndicator />
|
|
||||||
<SessionMcpIndicator />
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-1">
|
|
||||||
<Show when={currentSession()?.summary?.files}>
|
|
||||||
<TooltipKeybind
|
|
||||||
class="hidden md:block shrink-0"
|
|
||||||
title="Toggle review"
|
|
||||||
keybind={command.keybind("review.toggle")}
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
class="group/review-toggle size-6 p-0"
|
|
||||||
onClick={() => view().reviewPanel.toggle()}
|
|
||||||
>
|
>
|
||||||
<div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
|
<div class="flex items-center gap-2 min-w-0">
|
||||||
<Icon
|
<Select
|
||||||
name={view().reviewPanel.opened() ? "layout-right" : "layout-left"}
|
options={sessions()}
|
||||||
size="small"
|
current={parentSession()}
|
||||||
class="group-hover/review-toggle:hidden"
|
placeholder="Back to parent session"
|
||||||
/>
|
label={(x) => x.title}
|
||||||
<Icon
|
value={(x) => x.id}
|
||||||
name={view().reviewPanel.opened() ? "layout-right-partial" : "layout-left-partial"}
|
onSelect={(session) => {
|
||||||
size="small"
|
const currentParent = parentSession()
|
||||||
class="hidden group-hover/review-toggle:inline-block"
|
if (session && currentParent && session.id !== currentParent.id) {
|
||||||
/>
|
navigateToSession(session)
|
||||||
<Icon
|
}
|
||||||
name={view().reviewPanel.opened() ? "layout-right-full" : "layout-left-full"}
|
}}
|
||||||
size="small"
|
class="text-14-regular text-text-base max-w-[calc(100vw-180px)] md:max-w-md"
|
||||||
class="hidden group-active/review-toggle:inline-block"
|
variant="ghost"
|
||||||
/>
|
/>
|
||||||
|
<div class="text-text-weaker">/</div>
|
||||||
|
<Tooltip value="Back to parent session">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="flex items-center justify-center gap-1 p-1 rounded hover:bg-surface-raised-base-hover active:bg-surface-raised-base-active transition-colors flex-shrink-0"
|
||||||
|
onClick={() => navigateToSession(parentSession())}
|
||||||
|
>
|
||||||
|
<Icon name="arrow-left" size="small" class="text-icon-base" />
|
||||||
|
</button>
|
||||||
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
|
</Show>
|
||||||
|
</div>
|
||||||
|
<Show when={currentSession() && !parentSession()}>
|
||||||
|
<TooltipKeybind class="hidden xl:block" title="New session" keybind={command.keybind("session.new")}>
|
||||||
|
<IconButton as={A} href={`/${params.dir}/session`} icon="edit-small-2" variant="ghost" />
|
||||||
|
</TooltipKeybind>
|
||||||
|
</Show>
|
||||||
|
</div>
|
||||||
|
</Portal>
|
||||||
|
)}
|
||||||
|
</Show>
|
||||||
|
<Show when={rightMount()}>
|
||||||
|
{(mount) => (
|
||||||
|
<Portal mount={mount()}>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="hidden md:flex items-center gap-1">
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => {
|
||||||
|
dialog.show(() => <DialogSelectServer />)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
classList={{
|
||||||
|
"size-1.5 rounded-full": true,
|
||||||
|
"bg-icon-success-base": server.healthy() === true,
|
||||||
|
"bg-icon-critical-base": server.healthy() === false,
|
||||||
|
"bg-border-weak-base": server.healthy() === undefined,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Icon name="server" size="small" class="text-icon-weak" />
|
||||||
|
<span class="text-12-regular text-text-weak truncate max-w-[200px]">{server.name}</span>
|
||||||
</Button>
|
</Button>
|
||||||
</TooltipKeybind>
|
<SessionLspIndicator />
|
||||||
</Show>
|
<SessionMcpIndicator />
|
||||||
<TooltipKeybind
|
</div>
|
||||||
class="hidden md:block shrink-0"
|
<div class="flex items-center gap-1">
|
||||||
title="Toggle terminal"
|
<Show when={currentSession()?.summary?.files}>
|
||||||
keybind={command.keybind("terminal.toggle")}
|
<TooltipKeybind
|
||||||
>
|
class="hidden md:block shrink-0"
|
||||||
<Button variant="ghost" class="group/terminal-toggle size-6 p-0" onClick={() => view().terminal.toggle()}>
|
title="Toggle review"
|
||||||
<div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
|
keybind={command.keybind("review.toggle")}
|
||||||
<Icon
|
>
|
||||||
size="small"
|
<Button
|
||||||
name={view().terminal.opened() ? "layout-bottom-full" : "layout-bottom"}
|
variant="ghost"
|
||||||
class="group-hover/terminal-toggle:hidden"
|
class="group/review-toggle size-6 p-0"
|
||||||
/>
|
onClick={() => view().reviewPanel.toggle()}
|
||||||
<Icon
|
>
|
||||||
size="small"
|
<div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
|
||||||
name="layout-bottom-partial"
|
<Icon
|
||||||
class="hidden group-hover/terminal-toggle:inline-block"
|
name={view().reviewPanel.opened() ? "layout-right" : "layout-left"}
|
||||||
/>
|
size="small"
|
||||||
<Icon
|
class="group-hover/review-toggle:hidden"
|
||||||
size="small"
|
/>
|
||||||
name={view().terminal.opened() ? "layout-bottom" : "layout-bottom-full"}
|
<Icon
|
||||||
class="hidden group-active/terminal-toggle:inline-block"
|
name={view().reviewPanel.opened() ? "layout-right-partial" : "layout-left-partial"}
|
||||||
/>
|
size="small"
|
||||||
</div>
|
class="hidden group-hover/review-toggle:inline-block"
|
||||||
</Button>
|
/>
|
||||||
</TooltipKeybind>
|
<Icon
|
||||||
</div>
|
name={view().reviewPanel.opened() ? "layout-right-full" : "layout-left-full"}
|
||||||
<Show when={shareEnabled() && currentSession()}>
|
size="small"
|
||||||
<Popover
|
class="hidden group-active/review-toggle:inline-block"
|
||||||
title="Share session"
|
/>
|
||||||
trigger={
|
</div>
|
||||||
<Tooltip class="shrink-0" value="Share session">
|
</Button>
|
||||||
<IconButton icon="share" variant="ghost" class="" />
|
</TooltipKeybind>
|
||||||
</Tooltip>
|
</Show>
|
||||||
}
|
<TooltipKeybind
|
||||||
>
|
class="hidden md:block shrink-0"
|
||||||
{iife(() => {
|
title="Toggle terminal"
|
||||||
const [url] = createResource(
|
keybind={command.keybind("terminal.toggle")}
|
||||||
() => currentSession(),
|
>
|
||||||
async (session) => {
|
<Button
|
||||||
if (!session) return
|
variant="ghost"
|
||||||
let shareURL = session.share?.url
|
class="group/terminal-toggle size-6 p-0"
|
||||||
if (!shareURL) {
|
onClick={() => view().terminal.toggle()}
|
||||||
shareURL = await globalSDK.client.session
|
>
|
||||||
.share({ sessionID: session.id, directory: projectDirectory() })
|
<div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
|
||||||
.then((r) => r.data?.share?.url)
|
<Icon
|
||||||
.catch((e) => {
|
size="small"
|
||||||
console.error("Failed to share session", e)
|
name={view().terminal.opened() ? "layout-bottom-full" : "layout-bottom"}
|
||||||
return undefined
|
class="group-hover/terminal-toggle:hidden"
|
||||||
})
|
/>
|
||||||
}
|
<Icon
|
||||||
return shareURL
|
size="small"
|
||||||
},
|
name="layout-bottom-partial"
|
||||||
{ initialValue: "" },
|
class="hidden group-hover/terminal-toggle:inline-block"
|
||||||
)
|
/>
|
||||||
return (
|
<Icon
|
||||||
<Show when={url.latest}>
|
size="small"
|
||||||
{(shareUrl) => <TextField value={shareUrl()} readOnly copyable class="w-72" />}
|
name={view().terminal.opened() ? "layout-bottom" : "layout-bottom-full"}
|
||||||
</Show>
|
class="hidden group-active/terminal-toggle:inline-block"
|
||||||
)
|
/>
|
||||||
})}
|
</div>
|
||||||
</Popover>
|
</Button>
|
||||||
</Show>
|
</TooltipKeybind>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<Show when={shareEnabled() && currentSession()}>
|
||||||
</header>
|
<Popover
|
||||||
|
title="Share session"
|
||||||
|
trigger={
|
||||||
|
<Tooltip class="shrink-0" value="Share session">
|
||||||
|
<IconButton icon="share" variant="ghost" class="" />
|
||||||
|
</Tooltip>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{iife(() => {
|
||||||
|
const [url] = createResource(
|
||||||
|
() => currentSession(),
|
||||||
|
async (session) => {
|
||||||
|
if (!session) return
|
||||||
|
let shareURL = session.share?.url
|
||||||
|
if (!shareURL) {
|
||||||
|
shareURL = await globalSDK.client.session
|
||||||
|
.share({ sessionID: session.id, directory: projectDirectory() })
|
||||||
|
.then((r) => r.data?.share?.url)
|
||||||
|
.catch((e) => {
|
||||||
|
console.error("Failed to share session", e)
|
||||||
|
return undefined
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return shareURL
|
||||||
|
},
|
||||||
|
{ initialValue: "" },
|
||||||
|
)
|
||||||
|
return (
|
||||||
|
<Show when={url.latest}>
|
||||||
|
{(shareUrl) => <TextField value={shareUrl()} readOnly copyable class="w-72" />}
|
||||||
|
</Show>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</Popover>
|
||||||
|
</Show>
|
||||||
|
</div>
|
||||||
|
</Portal>
|
||||||
|
)}
|
||||||
|
</Show>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -124,12 +124,19 @@ function createGlobalSync() {
|
|||||||
return globalSDK.client.session
|
return globalSDK.client.session
|
||||||
.list({ directory, roots: true })
|
.list({ directory, roots: true })
|
||||||
.then((x) => {
|
.then((x) => {
|
||||||
const fourHoursAgo = Date.now() - 4 * 60 * 60 * 1000
|
|
||||||
const nonArchived = (x.data ?? [])
|
const nonArchived = (x.data ?? [])
|
||||||
.filter((s) => !!s?.id)
|
.filter((s) => !!s?.id)
|
||||||
.filter((s) => !s.time?.archived)
|
.filter((s) => !s.time?.archived)
|
||||||
.slice()
|
.slice()
|
||||||
.sort((a, b) => a.id.localeCompare(b.id))
|
.sort((a, b) => a.id.localeCompare(b.id))
|
||||||
|
|
||||||
|
const sandboxWorkspace = globalStore.project.some((p) => (p.sandboxes ?? []).includes(directory))
|
||||||
|
if (sandboxWorkspace) {
|
||||||
|
setStore("session", reconcile(nonArchived, { key: "id" }))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const fourHoursAgo = Date.now() - 4 * 60 * 60 * 1000
|
||||||
// Include up to the limit, plus any updated in the last 4 hours
|
// Include up to the limit, plus any updated in the last 4 hours
|
||||||
const sessions = nonArchived.filter((s, i) => {
|
const sessions = nonArchived.filter((s, i) => {
|
||||||
if (i < limit) return true
|
if (i < limit) return true
|
||||||
|
|||||||
@@ -5,6 +5,9 @@ export type Platform = {
|
|||||||
/** Platform discriminator */
|
/** Platform discriminator */
|
||||||
platform: "web" | "desktop"
|
platform: "web" | "desktop"
|
||||||
|
|
||||||
|
/** Desktop OS (Tauri only) */
|
||||||
|
os?: "macos" | "windows" | "linux"
|
||||||
|
|
||||||
/** App version */
|
/** App version */
|
||||||
version?: string
|
version?: string
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -13,7 +13,7 @@ import { AsyncStorage } from "@solid-primitives/storage"
|
|||||||
import { fetch as tauriFetch } from "@tauri-apps/plugin-http"
|
import { fetch as tauriFetch } from "@tauri-apps/plugin-http"
|
||||||
import { Store } from "@tauri-apps/plugin-store"
|
import { Store } from "@tauri-apps/plugin-store"
|
||||||
import { Logo } from "@opencode-ai/ui/logo"
|
import { Logo } from "@opencode-ai/ui/logo"
|
||||||
import { createSignal, Show, Accessor, JSX, createResource } from "solid-js"
|
import { createSignal, Show, Accessor, JSX, createResource, onMount, onCleanup } from "solid-js"
|
||||||
|
|
||||||
import { UPDATER_ENABLED } from "./updater"
|
import { UPDATER_ENABLED } from "./updater"
|
||||||
import { createMenu } from "./menu"
|
import { createMenu } from "./menu"
|
||||||
@@ -30,6 +30,11 @@ let update: Update | null = null
|
|||||||
|
|
||||||
const createPlatform = (password: Accessor<string | null>): Platform => ({
|
const createPlatform = (password: Accessor<string | null>): Platform => ({
|
||||||
platform: "desktop",
|
platform: "desktop",
|
||||||
|
os: (() => {
|
||||||
|
const type = ostype()
|
||||||
|
if (type === "macos" || type === "windows" || type === "linux") return type
|
||||||
|
return undefined
|
||||||
|
})(),
|
||||||
version: pkg.version,
|
version: pkg.version,
|
||||||
|
|
||||||
async openDirectoryPickerDialog(opts) {
|
async openDirectoryPickerDialog(opts) {
|
||||||
@@ -292,19 +297,25 @@ root?.addEventListener("mousewheel", (e) => {
|
|||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
})
|
})
|
||||||
|
|
||||||
// Handle external links - open in system browser instead of webview
|
|
||||||
document.addEventListener("click", (e) => {
|
|
||||||
const link = (e.target as HTMLElement).closest("a.external-link") as HTMLAnchorElement | null
|
|
||||||
if (link?.href) {
|
|
||||||
e.preventDefault()
|
|
||||||
platform.openLink(link.href)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
render(() => {
|
render(() => {
|
||||||
const [serverPassword, setServerPassword] = createSignal<string | null>(null)
|
const [serverPassword, setServerPassword] = createSignal<string | null>(null)
|
||||||
const platform = createPlatform(() => serverPassword())
|
const platform = createPlatform(() => serverPassword())
|
||||||
|
|
||||||
|
function handleClick(e: MouseEvent) {
|
||||||
|
const link = (e.target as HTMLElement).closest("a.external-link") as HTMLAnchorElement | null
|
||||||
|
if (link?.href) {
|
||||||
|
e.preventDefault()
|
||||||
|
platform.openLink(link.href)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
document.addEventListener("click", handleClick)
|
||||||
|
onCleanup(() => {
|
||||||
|
document.removeEventListener("click", handleClick)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PlatformProvider value={platform}>
|
<PlatformProvider value={platform}>
|
||||||
<AppBaseProviders>
|
<AppBaseProviders>
|
||||||
|
|||||||
Reference in New Issue
Block a user