feat: New toolbar layout, cleaner UI, fallback project icon fix

packages/app/src/components/dialog-edit-project.tsx

@@ -3,11 +3,12 @@ import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { TextField } from "@opencode-ai/ui/text-field"
 import { Icon } from "@opencode-ai/ui/icon"
+import { Avatar } from "@opencode-ai/ui/avatar"
 import { createMemo, createSignal, For, Show } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useGlobalSDK } from "@/context/global-sdk"
 import { type LocalProject, getAvatarColors } from "@/context/layout"
-import { Avatar } from "@opencode-ai/ui/avatar"
+import { ProjectIcon, isValidImageFile } from "@/components/project-icon"
 
 const AVATAR_COLOR_KEYS = ["pink", "mint", "orange", "purple", "cyan", "lime"] as const
 
@@ -33,9 +34,11 @@ export function DialogEditProject(props: { project: LocalProject }) {
   const [dragOver, setDragOver] = createSignal(false)
 
   function handleFileSelect(file: File) {
-    if (!file.type.startsWith("image/")) return
+    if (!isValidImageFile(file)) return
     const reader = new FileReader()
-    reader.onload = (e) => setStore("iconUrl", e.target?.result as string)
+    reader.onload = (e) => {
+      setStore("iconUrl", e.target?.result as string)
+    }
     reader.readAsDataURL(file)
   }
 
@@ -98,7 +101,7 @@ export function DialogEditProject(props: { project: LocalProject }) {
             <div class="flex gap-3 items-start">
               <div class="relative">
                 <div
-                  class="size-16 rounded-lg overflow-hidden border border-dashed transition-colors cursor-pointer"
+                  class="size-12 rounded-lg overflow-hidden border border-dashed transition-colors cursor-pointer"
                   classList={{
                     "border-text-interactive-base bg-surface-info-base/20": dragOver(),
                     "border-border-base hover:border-border-strong": !dragOver(),
@@ -108,20 +111,13 @@ export function DialogEditProject(props: { project: LocalProject }) {
                   onDragLeave={handleDragLeave}
                   onClick={() => document.getElementById("icon-upload")?.click()}
                 >
-                  <Show
-                    when={store.iconUrl}
-                    fallback={
-                      <div class="size-full flex items-center justify-center">
-                        <Avatar
-                          fallback={store.name || defaultName()}
-                          {...getAvatarColors(store.color)}
-                          class="size-full"
-                        />
-                      </div>
-                    }
-                  >
-                    <img src={store.iconUrl} alt="Project icon" class="size-full object-cover" />
-                  </Show>
+                  <ProjectIcon
+                    name={store.name || defaultName()}
+                    projectId={props.project.id}
+                    iconUrl={store.iconUrl}
+                    iconColor={store.color}
+                    class="size-full"
+                  />
                 </div>
                 <Show when={store.iconUrl}>
                   <button

packages/app/src/components/project-icon.tsx

@@ -0,0 +1,58 @@
+import { createMemo, splitProps, type ComponentProps, type JSX } from "solid-js"
+import { Avatar } from "@opencode-ai/ui/avatar"
+import { getAvatarColors } from "@/context/layout"
+
+const OPENCODE_PROJECT_ID = "4b0ea68d7af9a6031a7ffda7ad66e0cb83315750"
+const OPENCODE_FAVICON_URL = "https://opencode.ai/favicon.svg"
+
+export interface ProjectIconProps extends Omit<ComponentProps<"div">, "children"> {
+  name: string
+  iconUrl?: string
+  iconColor?: string
+  projectId?: string
+  size?: "small" | "normal" | "large"
+}
+
+export const isValidImageUrl = (url: string | undefined): boolean => {
+  if (!url) return false
+  if (url.startsWith("data:image/x-icon")) return false
+  if (url.startsWith("data:image/vnd.microsoft.icon")) return false
+  return true
+}
+
+export const isValidImageFile = (file: File): boolean => {
+  if (!file.type.startsWith("image/")) return false
+  if (file.type === "image/x-icon" || file.type === "image/vnd.microsoft.icon") return false
+  return true
+}
+
+export const ProjectIcon = (props: ProjectIconProps) => {
+  const [local, rest] = splitProps(props, [
+    "name",
+    "iconUrl",
+    "iconColor",
+    "projectId",
+    "size",
+    "class",
+    "classList",
+    "style",
+  ])
+  const colors = createMemo(() => getAvatarColors(local.iconColor))
+  const validSrc = createMemo(() => {
+    if (local.projectId === OPENCODE_PROJECT_ID) return OPENCODE_FAVICON_URL
+    return isValidImageUrl(local.iconUrl) ? local.iconUrl : undefined
+  })
+
+  return (
+    <Avatar
+      fallback={local.name}
+      src={validSrc()}
+      size={local.size}
+      {...colors()}
+      class={local.class}
+      classList={local.classList}
+      style={local.style as JSX.CSSProperties}
+      {...rest}
+    />
+  )
+}

packages/app/src/components/session-lsp-indicator.tsx

@@ -22,7 +22,7 @@ export function SessionLspIndicator() {
   return (
     <Show when={lspStats().total > 0}>
       <Tooltip placement="top" value={tooltipContent()}>
-        <div class="flex items-center gap-1 px-2 cursor-default select-none">
+        <div class="pl-2.5 pr-4 flex gap-2 cursor-default select-none items-center justify-center">
           <div
             classList={{
               "size-1.5 rounded-full": true,

packages/app/src/components/session/session-header.tsx

@@ -1,35 +1,22 @@
-import { createMemo, createResource, Show } from "solid-js"
+import { createMemo, Show } from "solid-js"
 import { A, useNavigate, useParams } from "@solidjs/router"
 import { useLayout } from "@/context/layout"
 import { useCommand } from "@/context/command"
-import { useServer } from "@/context/server"
-import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useSync } from "@/context/sync"
-import { useGlobalSDK } from "@/context/global-sdk"
 import { getFilename } from "@opencode-ai/util/path"
 import { base64Decode, base64Encode } from "@opencode-ai/util/encode"
-import { iife } from "@opencode-ai/util/iife"
 import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
-import { Button } from "@opencode-ai/ui/button"
 import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { Select } from "@opencode-ai/ui/select"
-import { Popover } from "@opencode-ai/ui/popover"
-import { TextField } from "@opencode-ai/ui/text-field"
-import { DialogSelectServer } from "@/components/dialog-select-server"
-import { SessionLspIndicator } from "@/components/session-lsp-indicator"
-import { SessionMcpIndicator } from "@/components/session-mcp-indicator"
 import type { Session } from "@opencode-ai/sdk/v2/client"
 import { same } from "@/utils/same"
 
 export function SessionHeader() {
-  const globalSDK = useGlobalSDK()
   const layout = useLayout()
   const params = useParams()
   const navigate = useNavigate()
   const command = useCommand()
-  const server = useServer()
-  const dialog = useDialog()
   const sync = useSync()
 
   const projectDirectory = createMemo(() => base64Decode(params.dir ?? ""))
@@ -41,7 +28,6 @@ export function SessionHeader() {
     if (!current?.parentID) return undefined
     return sync.data.session.find((s) => s.id === current.parentID)
   })
-  const shareEnabled = createMemo(() => sync.data.config.share !== "disabled")
   const worktrees = createMemo(() => layout.projects.list().map((p) => p.worktree), [], { equals: same })
 
   function navigateToProject(directory: string) {
@@ -64,7 +50,7 @@ export function SessionHeader() {
       >
         <Icon name="menu" size="small" />
       </button>
-      <div class="px-4 flex items-center justify-between gap-4 w-full">
+      <div class="px-4 flex items-center justify-between gap-3 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">
@@ -137,124 +123,10 @@ export function SessionHeader() {
           </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" />
+              <IconButton as={A} href={`/${params.dir}/session`} icon="plus-small" variant="ghost" />
             </TooltipKeybind>
           </Show>
         </div>
-        <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>
-            <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={layout.review.toggle}>
-                  <div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
-                    <Icon
-                      name={layout.review.opened() ? "layout-right" : "layout-left"}
-                      size="small"
-                      class="group-hover/review-toggle:hidden"
-                    />
-                    <Icon
-                      name={layout.review.opened() ? "layout-right-partial" : "layout-left-partial"}
-                      size="small"
-                      class="hidden group-hover/review-toggle:inline-block"
-                    />
-                    <Icon
-                      name={layout.review.opened() ? "layout-right-full" : "layout-left-full"}
-                      size="small"
-                      class="hidden group-active/review-toggle:inline-block"
-                    />
-                  </div>
-                </Button>
-              </TooltipKeybind>
-            </Show>
-            <TooltipKeybind
-              class="hidden md:block shrink-0"
-              title="Toggle terminal"
-              keybind={command.keybind("terminal.toggle")}
-            >
-              <Button variant="ghost" class="group/terminal-toggle size-6 p-0" onClick={layout.terminal.toggle}>
-                <div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
-                  <Icon
-                    size="small"
-                    name={layout.terminal.opened() ? "layout-bottom-full" : "layout-bottom"}
-                    class="group-hover/terminal-toggle:hidden"
-                  />
-                  <Icon
-                    size="small"
-                    name="layout-bottom-partial"
-                    class="hidden group-hover/terminal-toggle:inline-block"
-                  />
-                  <Icon
-                    size="small"
-                    name={layout.terminal.opened() ? "layout-bottom" : "layout-bottom-full"}
-                    class="hidden group-active/terminal-toggle:inline-block"
-                  />
-                </div>
-              </Button>
-            </TooltipKeybind>
-          </div>
-          <Show when={shareEnabled() && currentSession()}>
-            <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>
       </div>
     </header>
   )

packages/app/src/components/toolbar/index.tsx

@@ -0,0 +1,66 @@
+import { TooltipKeybind } from "@opencode-ai/ui/tooltip"
+import { Button } from "@opencode-ai/ui/button"
+import { Icon } from "@opencode-ai/ui/icon"
+import type { Component, ComponentProps } from "solid-js"
+import { useLayout } from "@/context/layout"
+import { useCommand } from "@/context/command"
+import { usePlatform } from "@/context/platform"
+
+const IS_MAC = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform)
+
+export const TOOLBAR_PORTAL_ID = "toolbar-content-portal"
+
+export const Toolbar: Component<ComponentProps<"div">> = ({ class: className, ...props }) => {
+  const command = useCommand()
+  const platform = usePlatform()
+  const layout = useLayout()
+
+  return (
+    <div
+      classList={{
+        "pl-[80px]": IS_MAC && platform.platform !== "web",
+        "pl-2": !IS_MAC || platform.platform === "web",
+        "py-2 min-h-[41px] mx-px bg-background-base border-b border-border-weak-base flex items-center justify-between w-full border-box relative": true,
+        ...(className ? { [className]: true } : {}),
+      }}
+      data-tauri-drag-region
+      {...props}
+    >
+      <TooltipKeybind
+        class="shrink-0 relative z-10 xl:block hidden"
+        placement="bottom"
+        title="Toggle sidebar"
+        keybind={command.keybind("sidebar.toggle")}
+      >
+        <Button
+          variant="ghost"
+          size="normal"
+          class="group/sidebar-toggle shrink-0 text-left justify-center align-middle rounded-lg px-1.5"
+          onClick={layout.sidebar.toggle}
+        >
+          <div class="relative -ml-px flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
+            <Icon
+              name={layout.sidebar.opened() ? "layout-left" : "layout-right"}
+              size="small"
+              class="group-hover/sidebar-toggle:hidden"
+            />
+            <Icon
+              name={layout.sidebar.opened() ? "layout-left-partial" : "layout-right-partial"}
+              size="small"
+              class="hidden group-hover/sidebar-toggle:inline-block"
+            />
+            <Icon
+              name={layout.sidebar.opened() ? "layout-left-full" : "layout-right-full"}
+              size="small"
+              class="hidden group-active/sidebar-toggle:inline-block"
+            />
+          </div>
+        </Button>
+      </TooltipKeybind>
+
+      <div id={TOOLBAR_PORTAL_ID} class="contents" />
+    </div>
+  )
+}
+
+export { ToolbarSession } from "./session"