reigncode-app 1.3.2

package/src/components/titlebar-history.ts

@@ -0,0 +1,57 @@
+export const MAX_TITLEBAR_HISTORY = 100
+
+export type TitlebarAction = "back" | "forward" | undefined
+
+export type TitlebarHistory = {
+  stack: string[]
+  index: number
+  action: TitlebarAction
+}
+
+export function applyPath(state: TitlebarHistory, current: string, max = MAX_TITLEBAR_HISTORY): TitlebarHistory {
+  if (!state.stack.length) {
+    const stack = current === "/" ? ["/"] : ["/", current]
+    return { stack, index: stack.length - 1, action: undefined }
+  }
+
+  const active = state.stack[state.index]
+  if (current === active) {
+    if (!state.action) return state
+    return { ...state, action: undefined }
+  }
+
+  if (state.action) return { ...state, action: undefined }
+
+  return pushPath(state, current, max)
+}
+
+export function pushPath(state: TitlebarHistory, path: string, max = MAX_TITLEBAR_HISTORY): TitlebarHistory {
+  const stack = state.stack.slice(0, state.index + 1).concat(path)
+  const next = trimHistory(stack, stack.length - 1, max)
+  return { ...state, ...next, action: undefined }
+}
+
+export function trimHistory(stack: string[], index: number, max = MAX_TITLEBAR_HISTORY) {
+  if (stack.length <= max) return { stack, index }
+  const cut = stack.length - max
+  return {
+    stack: stack.slice(cut),
+    index: Math.max(0, index - cut),
+  }
+}
+
+export function backPath(state: TitlebarHistory) {
+  if (state.index <= 0) return
+  const index = state.index - 1
+  const to = state.stack[index]
+  if (!to) return
+  return { state: { ...state, index, action: "back" as const }, to }
+}
+
+export function forwardPath(state: TitlebarHistory) {
+  if (state.index >= state.stack.length - 1) return
+  const index = state.index + 1
+  const to = state.stack[index]
+  if (!to) return
+  return { state: { ...state, index, action: "forward" as const }, to }
+}

package/src/components/titlebar.tsx

@@ -0,0 +1,312 @@
+import { createEffect, createMemo, onCleanup, Show, untrack } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useLocation, useNavigate, useParams } from "@solidjs/router"
+import { IconButton } from "@reign-labs/ui/icon-button"
+import { Icon } from "@reign-labs/ui/icon"
+import { Button } from "@reign-labs/ui/button"
+import { Tooltip, TooltipKeybind } from "@reign-labs/ui/tooltip"
+import { useTheme } from "@reign-labs/ui/theme"
+
+import { useLayout } from "@/context/layout"
+import { usePlatform } from "@/context/platform"
+import { useCommand } from "@/context/command"
+import { useLanguage } from "@/context/language"
+import { applyPath, backPath, forwardPath } from "./titlebar-history"
+
+type TauriDesktopWindow = {
+  startDragging?: () => Promise<void>
+  toggleMaximize?: () => Promise<void>
+}
+
+type TauriThemeWindow = {
+  setTheme?: (theme?: "light" | "dark" | null) => Promise<void>
+}
+
+type TauriApi = {
+  window?: {
+    getCurrentWindow?: () => TauriDesktopWindow
+  }
+  webviewWindow?: {
+    getCurrentWebviewWindow?: () => TauriThemeWindow
+  }
+}
+
+const tauriApi = () => (window as unknown as { __TAURI__?: TauriApi }).__TAURI__
+const currentDesktopWindow = () => tauriApi()?.window?.getCurrentWindow?.()
+const currentThemeWindow = () => tauriApi()?.webviewWindow?.getCurrentWebviewWindow?.()
+
+export function Titlebar() {
+  const layout = useLayout()
+  const platform = usePlatform()
+  const command = useCommand()
+  const language = useLanguage()
+  const theme = useTheme()
+  const navigate = useNavigate()
+  const location = useLocation()
+  const params = useParams()
+
+  const mac = createMemo(() => platform.platform === "desktop" && platform.os === "macos")
+  const windows = createMemo(() => platform.platform === "desktop" && platform.os === "windows")
+  const web = createMemo(() => platform.platform === "web")
+  const zoom = () => platform.webviewZoom?.() ?? 1
+  const minHeight = () => (mac() ? `${40 / zoom()}px` : undefined)
+
+  const [history, setHistory] = createStore({
+    stack: [] as string[],
+    index: 0,
+    action: undefined as "back" | "forward" | undefined,
+  })
+
+  const path = () => `${location.pathname}${location.search}${location.hash}`
+  const creating = createMemo(() => {
+    if (!params.dir) return false
+    if (params.id) return false
+    const parts = location.pathname.replace(/\/+$/, "").split("/")
+    return parts.at(-1) === "session"
+  })
+
+  createEffect(() => {
+    const current = path()
+
+    untrack(() => {
+      const next = applyPath(history, current)
+      if (next === history) return
+      setHistory(next)
+    })
+  })
+
+  const canBack = createMemo(() => history.index > 0)
+  const canForward = createMemo(() => history.index < history.stack.length - 1)
+  const hasProjects = createMemo(() => layout.projects.list().length > 0)
+
+  const back = () => {
+    const next = backPath(history)
+    if (!next) return
+    setHistory(next.state)
+    navigate(next.to)
+  }
+
+  const forward = () => {
+    const next = forwardPath(history)
+    if (!next) return
+    setHistory(next.state)
+    navigate(next.to)
+  }
+
+  command.register(() => [
+    {
+      id: "common.goBack",
+      title: language.t("common.goBack"),
+      category: language.t("command.category.view"),
+      keybind: "mod+[",
+      onSelect: back,
+    },
+    {
+      id: "common.goForward",
+      title: language.t("common.goForward"),
+      category: language.t("command.category.view"),
+      keybind: "mod+]",
+      onSelect: forward,
+    },
+  ])
+
+  const getWin = () => {
+    if (platform.platform !== "desktop") return
+    return currentDesktopWindow()
+  }
+
+  createEffect(() => {
+    if (platform.platform !== "desktop") return
+
+    const scheme = theme.colorScheme()
+    const value = scheme === "system" ? null : scheme
+
+    const win = currentThemeWindow()
+    if (!win?.setTheme) return
+
+    void win.setTheme(value).catch(() => undefined)
+  })
+
+  const interactive = (target: EventTarget | null) => {
+    if (!(target instanceof Element)) return false
+
+    const selector =
+      "button, a, input, textarea, select, option, [role='button'], [role='menuitem'], [contenteditable='true'], [contenteditable='']"
+
+    return !!target.closest(selector)
+  }
+
+  const drag = (e: MouseEvent) => {
+    if (platform.platform !== "desktop") return
+    if (e.buttons !== 1) return
+    if (interactive(e.target)) return
+
+    const win = getWin()
+    if (!win?.startDragging) return
+
+    e.preventDefault()
+    void win.startDragging().catch(() => undefined)
+  }
+
+  const maximize = (e: MouseEvent) => {
+    if (platform.platform !== "desktop") return
+    if (interactive(e.target)) return
+    if (e.target instanceof Element && e.target.closest("[data-tauri-decorum-tb]")) return
+
+    const win = getWin()
+    if (!win?.toggleMaximize) return
+
+    e.preventDefault()
+    void win.toggleMaximize().catch(() => undefined)
+  }
+
+  return (
+    <header
+      class="h-10 shrink-0 bg-background-base relative grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center"
+      style={{ "min-height": minHeight() }}
+      data-tauri-drag-region
+      onMouseDown={drag}
+      onDblClick={maximize}
+    >
+      <div
+        classList={{
+          "flex items-center min-w-0": true,
+          "pl-2": !mac(),
+        }}
+      >
+        <Show when={mac()}>
+          <div class="h-full shrink-0" style={{ width: `${72 / zoom()}px` }} />
+          <div class="xl:hidden w-10 shrink-0 flex items-center justify-center">
+            <IconButton
+              icon="menu"
+              variant="ghost"
+              class="titlebar-icon rounded-md"
+              onClick={layout.mobileSidebar.toggle}
+              aria-label={language.t("sidebar.menu.toggle")}
+              aria-expanded={layout.mobileSidebar.opened()}
+            />
+          </div>
+        </Show>
+        <Show when={!mac()}>
+          <div class="xl:hidden w-[48px] shrink-0 flex items-center justify-center">
+            <IconButton
+              icon="menu"
+              variant="ghost"
+              class="titlebar-icon rounded-md"
+              onClick={layout.mobileSidebar.toggle}
+              aria-label={language.t("sidebar.menu.toggle")}
+              aria-expanded={layout.mobileSidebar.opened()}
+            />
+          </div>
+        </Show>
+        <div class="flex items-center gap-1 shrink-0">
+          <TooltipKeybind
+            class={web() ? "hidden xl:flex shrink-0 ml-14" : "hidden xl:flex shrink-0 ml-2"}
+            placement="bottom"
+            title={language.t("command.sidebar.toggle")}
+            keybind={command.keybind("sidebar.toggle")}
+          >
+            <Button
+              variant="ghost"
+              class="group/sidebar-toggle titlebar-icon w-8 h-6 p-0 box-border"
+              onClick={layout.sidebar.toggle}
+              aria-label={language.t("command.sidebar.toggle")}
+              aria-expanded={layout.sidebar.opened()}
+            >
+              <Icon size="small" name={layout.sidebar.opened() ? "sidebar-active" : "sidebar"} />
+            </Button>
+          </TooltipKeybind>
+          <div class="hidden xl:flex items-center shrink-0">
+            <Show when={params.dir}>
+              <div
+                class="flex items-center shrink-0 w-8 mr-1"
+                aria-hidden={layout.sidebar.opened() ? "true" : undefined}
+              >
+                <div
+                  class="transition-opacity"
+                  classList={{
+                    "opacity-100 duration-120 ease-out": !layout.sidebar.opened(),
+                    "opacity-0 duration-120 ease-in delay-0 pointer-events-none": layout.sidebar.opened(),
+                  }}
+                >
+                  <TooltipKeybind
+                    placement="bottom"
+                    title={language.t("command.session.new")}
+                    keybind={command.keybind("session.new")}
+                    openDelay={2000}
+                  >
+                    <Button
+                      variant="ghost"
+                      icon={creating() ? "new-session-active" : "new-session"}
+                      class="titlebar-icon w-8 h-6 p-0 box-border"
+                      disabled={layout.sidebar.opened()}
+                      tabIndex={layout.sidebar.opened() ? -1 : undefined}
+                      onClick={() => {
+                        if (!params.dir) return
+                        navigate(`/${params.dir}/session`)
+                      }}
+                      aria-label={language.t("command.session.new")}
+                      aria-current={creating() ? "page" : undefined}
+                    />
+                  </TooltipKeybind>
+                </div>
+              </div>
+            </Show>
+            <Show when={hasProjects()}>
+              <div
+                class="flex items-center gap-0 transition-transform"
+                classList={{
+                  "translate-x-0": !layout.sidebar.opened(),
+                  "-translate-x-[36px]": layout.sidebar.opened(),
+                  "duration-180 ease-out": !layout.sidebar.opened(),
+                  "duration-180 ease-in": layout.sidebar.opened(),
+                }}
+              >
+                <Tooltip placement="bottom" value={language.t("common.goBack")} openDelay={2000}>
+                  <Button
+                    variant="ghost"
+                    icon="chevron-left"
+                    class="titlebar-icon w-6 h-6 p-0 box-border"
+                    disabled={!canBack()}
+                    onClick={back}
+                    aria-label={language.t("common.goBack")}
+                  />
+                </Tooltip>
+                <Tooltip placement="bottom" value={language.t("common.goForward")} openDelay={2000}>
+                  <Button
+                    variant="ghost"
+                    icon="chevron-right"
+                    class="titlebar-icon w-6 h-6 p-0 box-border"
+                    disabled={!canForward()}
+                    onClick={forward}
+                    aria-label={language.t("common.goForward")}
+                  />
+                </Tooltip>
+              </div>
+            </Show>
+          </div>
+        </div>
+        <div id="opencode-titlebar-left" class="flex items-center gap-3 min-w-0 px-2" />
+      </div>
+
+      <div class="min-w-0 flex items-center justify-center pointer-events-none">
+        <div id="opencode-titlebar-center" class="pointer-events-auto min-w-0 flex justify-center w-fit max-w-full" />
+      </div>
+
+      <div
+        classList={{
+          "flex items-center min-w-0 justify-end": true,
+          "pr-2": !windows(),
+        }}
+        data-tauri-drag-region
+        onMouseDown={drag}
+      >
+        <div id="opencode-titlebar-right" class="flex items-center gap-1 shrink-0 justify-end" />
+        <Show when={windows()}>
+          {!tauriApi() && <div class="w-36 shrink-0" />}
+          <div data-tauri-decorum-tb class="flex flex-row" />
+        </Show>
+      </div>
+    </header>
+  )
+}

package/src/constants/file-picker.ts

@@ -0,0 +1,89 @@
+export const ACCEPTED_IMAGE_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"]
+
+export const ACCEPTED_FILE_TYPES = [
+  ...ACCEPTED_IMAGE_TYPES,
+  "application/pdf",
+  "text/*",
+  "application/json",
+  "application/ld+json",
+  "application/toml",
+  "application/x-toml",
+  "application/x-yaml",
+  "application/xml",
+  "application/yaml",
+  ".c",
+  ".cc",
+  ".cjs",
+  ".conf",
+  ".cpp",
+  ".css",
+  ".csv",
+  ".cts",
+  ".env",
+  ".go",
+  ".gql",
+  ".graphql",
+  ".h",
+  ".hh",
+  ".hpp",
+  ".htm",
+  ".html",
+  ".ini",
+  ".java",
+  ".js",
+  ".json",
+  ".jsx",
+  ".log",
+  ".md",
+  ".mdx",
+  ".mjs",
+  ".mts",
+  ".py",
+  ".rb",
+  ".rs",
+  ".sass",
+  ".scss",
+  ".sh",
+  ".sql",
+  ".toml",
+  ".ts",
+  ".tsx",
+  ".txt",
+  ".xml",
+  ".yaml",
+  ".yml",
+  ".zsh",
+]
+
+const MIME_EXT = new Map([
+  ["image/png", "png"],
+  ["image/jpeg", "jpg"],
+  ["image/gif", "gif"],
+  ["image/webp", "webp"],
+  ["application/pdf", "pdf"],
+  ["application/json", "json"],
+  ["application/ld+json", "jsonld"],
+  ["application/toml", "toml"],
+  ["application/x-toml", "toml"],
+  ["application/x-yaml", "yaml"],
+  ["application/xml", "xml"],
+  ["application/yaml", "yaml"],
+])
+
+const TEXT_EXT = ["txt", "text", "md", "markdown", "log", "csv"]
+
+export const ACCEPTED_FILE_EXTENSIONS = Array.from(
+  new Set(
+    ACCEPTED_FILE_TYPES.flatMap((item) => {
+      if (item.startsWith(".")) return [item.slice(1)]
+      if (item === "text/*") return TEXT_EXT
+      const out = MIME_EXT.get(item)
+      return out ? [out] : []
+    }),
+  ),
+).sort()
+
+export function filePickerFilters(ext?: string[]) {
+  if (!ext || ext.length === 0) return undefined
+  return [{ name: "Files", extensions: ext }]
+}

package/src/context/command-keybind.test.ts

@@ -0,0 +1,69 @@
+import { describe, expect, test } from "bun:test"
+import { formatKeybind, matchKeybind, parseKeybind } from "./command"
+
+describe("command keybind helpers", () => {
+  test("parseKeybind handles aliases and multiple combos", () => {
+    const keybinds = parseKeybind("control+option+k, mod+shift+comma")
+
+    expect(keybinds).toHaveLength(2)
+    expect(keybinds[0]).toEqual({
+      key: "k",
+      ctrl: true,
+      meta: false,
+      shift: false,
+      alt: true,
+    })
+    expect(keybinds[1]?.shift).toBe(true)
+    expect(keybinds[1]?.key).toBe("comma")
+    expect(Boolean(keybinds[1]?.ctrl || keybinds[1]?.meta)).toBe(true)
+  })
+
+  test("parseKeybind treats none and empty as disabled", () => {
+    expect(parseKeybind("none")).toEqual([])
+    expect(parseKeybind("")).toEqual([])
+  })
+
+  test("matchKeybind normalizes punctuation keys", () => {
+    const keybinds = parseKeybind("ctrl+comma, shift+plus, meta+space")
+
+    expect(matchKeybind(keybinds, new KeyboardEvent("keydown", { key: ",", ctrlKey: true }))).toBe(true)
+    expect(matchKeybind(keybinds, new KeyboardEvent("keydown", { key: "+", shiftKey: true }))).toBe(true)
+    expect(matchKeybind(keybinds, new KeyboardEvent("keydown", { key: " ", metaKey: true }))).toBe(true)
+    expect(matchKeybind(keybinds, new KeyboardEvent("keydown", { key: ",", ctrlKey: true, altKey: true }))).toBe(false)
+  })
+
+  test("matchKeybind supports bracket keys", () => {
+    const keybinds = parseKeybind("mod+alt+[, mod+alt+]")
+    const prev = keybinds[0]
+    const next = keybinds[1]
+
+    expect(
+      matchKeybind(
+        keybinds,
+        new KeyboardEvent("keydown", { key: "[", ctrlKey: prev?.ctrl, metaKey: prev?.meta, altKey: true }),
+      ),
+    ).toBe(true)
+    expect(
+      matchKeybind(
+        keybinds,
+        new KeyboardEvent("keydown", { key: "]", ctrlKey: next?.ctrl, metaKey: next?.meta, altKey: true }),
+      ),
+    ).toBe(true)
+  })
+
+  test("formatKeybind returns human readable output", () => {
+    const display = formatKeybind("ctrl+alt+arrowup")
+
+    expect(display).toContain("↑")
+    expect(display.includes("Ctrl") || display.includes("⌃")).toBe(true)
+    expect(display.includes("Alt") || display.includes("⌥")).toBe(true)
+    expect(formatKeybind("none")).toBe("")
+  })
+
+  test("formatKeybind prefers the first combo", () => {
+    const display = formatKeybind("mod+k,mod+p")
+
+    expect(display.includes("K") || display.includes("k")).toBe(true)
+    expect(display.includes("P") || display.includes("p")).toBe(false)
+  })
+})

package/src/context/command.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, test } from "bun:test"
+import { upsertCommandRegistration } from "./command"
+
+describe("upsertCommandRegistration", () => {
+  test("replaces keyed registrations", () => {
+    const one = () => [{ id: "one", title: "One" }]
+    const two = () => [{ id: "two", title: "Two" }]
+
+    const next = upsertCommandRegistration([{ key: "layout", options: one }], { key: "layout", options: two })
+
+    expect(next).toHaveLength(1)
+    expect(next[0]?.options).toBe(two)
+  })
+
+  test("keeps unkeyed registrations additive", () => {
+    const one = () => [{ id: "one", title: "One" }]
+    const two = () => [{ id: "two", title: "Two" }]
+
+    const next = upsertCommandRegistration([{ options: one }], { options: two })
+
+    expect(next).toHaveLength(2)
+    expect(next[0]?.options).toBe(two)
+    expect(next[1]?.options).toBe(one)
+  })
+})