refactor: simplify sidebar layout and add directory picker dialog

Author: shuv1337

packages/app/src/components/dialog-select-directory.tsx

@@ -0,0 +1,117 @@
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { FileIcon } from "@opencode-ai/ui/file-icon"
+import { List } from "@opencode-ai/ui/list"
+import { getDirectory, getFilename } from "@opencode-ai/util/path"
+import { createMemo } from "solid-js"
+import { useGlobalSDK } from "@/context/global-sdk"
+import { useGlobalSync } from "@/context/global-sync"
+import { useLanguage } from "@/context/language"
+
+interface DialogSelectDirectoryProps {
+  title?: string
+  multiple?: boolean
+  onSelect: (result: string | string[] | null) => void
+}
+
+export function DialogSelectDirectory(props: DialogSelectDirectoryProps) {
+  const sync = useGlobalSync()
+  const sdk = useGlobalSDK()
+  const dialog = useDialog()
+  const language = useLanguage()
+
+  const home = createMemo(() => sync.data.path.home)
+  const root = createMemo(() => sync.data.path.home || sync.data.path.directory)
+
+  function join(base: string | undefined, rel: string) {
+    const b = (base ?? "").replace(/[\\/]+$/, "")
+    const r = rel.replace(/^[\\/]+/, "").replace(/[\\/]+$/, "")
+    if (!b) return r
+    if (!r) return b
+    return b + "/" + r
+  }
+
+  function display(rel: string) {
+    const full = join(root(), rel)
+    const h = home()
+    if (!h) return full
+    if (full === h) return "~"
+    if (full.startsWith(h + "/") || full.startsWith(h + "\\")) {
+      return "~" + full.slice(h.length)
+    }
+    return full
+  }
+
+  function normalizeQuery(query: string) {
+    const h = home()
+
+    if (!query) return query
+    if (query.startsWith("~/")) return query.slice(2)
+
+    if (h) {
+      const lc = query.toLowerCase()
+      const hc = h.toLowerCase()
+      if (lc === hc || lc.startsWith(hc + "/") || lc.startsWith(hc + "\\")) {
+        return query.slice(h.length).replace(/^[\\/]+/, "")
+      }
+    }
+
+    return query
+  }
+
+  async function fetchDirs(query: string) {
+    const directory = root()
+    if (!directory) return [] as string[]
+
+    const results = await sdk.client.find
+      .files({ directory, query, type: "directory", limit: 50 })
+      .then((x) => x.data ?? [])
+      .catch(() => [])
+
+    return results.map((x) => x.replace(/[\\/]+$/, ""))
+  }
+
+  const directories = async (filter: string) => {
+    const query = normalizeQuery(filter.trim())
+    return fetchDirs(query)
+  }
+
+  function resolve(rel: string) {
+    const absolute = join(root(), rel)
+    props.onSelect(props.multiple ? [absolute] : absolute)
+    dialog.close()
+  }
+
+  return (
+    <Dialog title={props.title ?? language.t("command.project.open")}>
+      <List
+        search={{ placeholder: language.t("dialog.directory.search.placeholder"), autofocus: true }}
+        emptyMessage={language.t("dialog.directory.empty")}
+        loadingMessage={language.t("common.loading")}
+        items={directories}
+        key={(x) => x}
+        onSelect={(path) => {
+          if (!path) return
+          resolve(path)
+        }}
+      >
+        {(rel) => {
+          const path = display(rel)
+          return (
+            <div class="w-full flex items-center justify-between rounded-md">
+              <div class="flex items-center gap-x-3 grow min-w-0">
+                <FileIcon node={{ path: rel, type: "directory" }} class="shrink-0 size-4" />
+                <div class="flex items-center text-14-regular min-w-0">
+                  <span class="text-text-weak whitespace-nowrap overflow-hidden overflow-ellipsis truncate min-w-0">
+                    {getDirectory(path)}
+                  </span>
+                  <span class="text-text-strong whitespace-nowrap">{getFilename(path)}</span>
+                </div>
+              </div>
+            </div>
+          )
+        }}
+      </List>
+    </Dialog>
+  )
+}

packages/app/src/components/titlebar.tsx

@@ -4,6 +4,7 @@ import { Icon } from "@opencode-ai/ui/icon"
 import { Button } from "@opencode-ai/ui/button"
 import { TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { useTheme } from "@opencode-ai/ui/theme"
+import { AsciiMark } from "@opencode-ai/ui/logo"
 
 import { useLayout } from "@/context/layout"
 import { usePlatform } from "@/context/platform"
@@ -88,6 +89,11 @@ export function Titlebar() {
       >
         <Show when={mac()}>
           <div class="w-[72px] h-full shrink-0" data-tauri-drag-region />
+        </Show>
+        <div class="shrink-0 w-8 h-8 flex items-center justify-center" data-tauri-drag-region>
+          <AsciiMark scale={0.45} />
+        </div>
+        <Show when={mac()}>
           <div class="xl:hidden w-10 shrink-0 flex items-center justify-center">
             <IconButton
               icon="menu"