diff --git a/bun.lock b/bun.lock
index 1652adb3e..bb83e7682 100644
--- a/bun.lock
+++ b/bun.lock
@@ -462,7 +462,7 @@
"@hono/zod-validator": "0.4.2",
"@kobalte/core": "0.13.11",
"@openauthjs/openauth": "0.0.0-20250322224806",
- "@pierre/precision-diffs": "0.6.0-beta.10",
+ "@pierre/precision-diffs": "0.6.1",
"@solidjs/meta": "0.29.4",
"@solidjs/router": "0.15.4",
"@solidjs/start": "https://pkg.pr.new/@solidjs/start@dfb2020",
@@ -1277,7 +1277,7 @@
"@petamoriken/float16": ["@petamoriken/float16@3.9.3", "", {}, "sha512-8awtpHXCx/bNpFt4mt2xdkgtgVvKqty8VbjHI/WWWQuEw+KLzFot3f4+LkQY9YmOtq7A5GdOnqoIC8Pdygjk2g=="],
- "@pierre/precision-diffs": ["@pierre/precision-diffs@0.6.0-beta.10", "", { "dependencies": { "@shikijs/core": "3.15.0", "@shikijs/transformers": "3.15.0", "diff": "8.0.2", "fast-deep-equal": "3.1.3", "hast-util-to-html": "9.0.5", "lru_map": "0.4.1", "shiki": "3.15.0" }, "peerDependencies": { "react": "^18.3.1 || ^19.0.0", "react-dom": "^18.3.1 || ^19.0.0" } }, "sha512-2rdd1Q1xJbB0Z4oUbm0Ybrr2gLFEdvNetZLadJboZSFL7Q4gFujdQZfXfV3vB9X+esjt++v0nzb3mioW25BOTA=="],
+ "@pierre/precision-diffs": ["@pierre/precision-diffs@0.6.1", "", { "dependencies": { "@shikijs/core": "3.15.0", "@shikijs/transformers": "3.15.0", "diff": "8.0.2", "fast-deep-equal": "3.1.3", "hast-util-to-html": "9.0.5", "lru_map": "0.4.1", "shiki": "3.15.0" }, "peerDependencies": { "react": "^18.3.1 || ^19.0.0", "react-dom": "^18.3.1 || ^19.0.0" } }, "sha512-HXafRSOly6B0rRt6fuP0yy1MimHJMQ2NNnBGcIHhHwsgK4WWs+SBWRWt1usdgz0NIuSgXdIyQn8HY3F1jKyDBQ=="],
"@pkgjs/parseargs": ["@pkgjs/parseargs@0.11.0", "", {}, "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg=="],
diff --git a/nix/hashes.json b/nix/hashes.json
index a9117fa85..ee38c07f5 100644
--- a/nix/hashes.json
+++ b/nix/hashes.json
@@ -1,3 +1,3 @@
{
- "nodeModules": "sha256-JT8J+Nd2kk0x46BcyotmBbM39tuKOW7VzXfOV3R3sqQ="
+ "nodeModules": "sha256-WQMQmqKojxdRtwv6KL9HBaDfwYa4qPn2pvXKqgNM73A="
}
diff --git a/package.json b/package.json
index 65c8b5a81..4579a06f3 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
"@tsconfig/bun": "1.0.9",
"@cloudflare/workers-types": "4.20251008.0",
"@openauthjs/openauth": "0.0.0-20250322224806",
- "@pierre/precision-diffs": "0.6.0-beta.10",
+ "@pierre/precision-diffs": "0.6.1",
"@tailwindcss/vite": "4.1.11",
"diff": "8.0.2",
"ai": "5.0.97",
diff --git a/packages/console/app/src/app.tsx b/packages/console/app/src/app.tsx
index bc94b443e..8cc98ad4d 100644
--- a/packages/console/app/src/app.tsx
+++ b/packages/console/app/src/app.tsx
@@ -13,7 +13,7 @@ export default function App() {
root={(props) => (
What is OpenCode?
-OpenCode is an open source agent that helps you write and run code directly from the terminal.
+OpenCode is an open source agent that helps you write code in your terminal, IDE, or desktop.
-
-
-
- [*]
- - Native TUI A responsive, native, themeable terminal UI --
-
[*]
@@ -230,7 +224,7 @@ export default function Home() {
- [*]
@@ -682,9 +676,8 @@ export default function Home() {- Any editor OpenCode runs in your terminal, pair it with any IDE + Any editor Available as a terminal interface, desktop app, and IDE extension-
- OpenCode is an open source agent that helps you write and run code directly from the terminal. You can - pair OpenCode with any AI model, and because it’s terminal-based you can pair it with your preferred - code editor. + OpenCode is an open source agent that helps you write and run code with any AI model. It's available + as a terminal-based interface, desktop app, or IDE extension. - @@ -705,7 +698,7 @@ export default function Home() {
-
- Yes, for now. We are actively working on a desktop app. Join the waitlist for early access. + Not anymore! OpenCode is now available as an app for your desktop. -
diff --git a/packages/desktop/src/app.tsx b/packages/desktop/src/app.tsx
index 0ca4d5e6b..a1ff90d26 100644
--- a/packages/desktop/src/app.tsx
+++ b/packages/desktop/src/app.tsx
@@ -15,8 +15,14 @@ import { GlobalSDKProvider } from "./context/global-sdk"
import { SessionProvider } from "./context/session"
import { Show } from "solid-js"
+declare global {
+ interface Window {
+ __OPENCODE__?: { updaterEnabled?: boolean; port?: number }
+ }
+}
+
const host = import.meta.env.VITE_OPENCODE_SERVER_HOST ?? "127.0.0.1"
-const port = import.meta.env.VITE_OPENCODE_SERVER_PORT ?? "4096"
+const port = window.__OPENCODE__?.port ?? import.meta.env.VITE_OPENCODE_SERVER_PORT ?? "4096"
const url =
new URLSearchParams(document.location.search).get("url") ||
diff --git a/packages/desktop/src/components/prompt-input.tsx b/packages/desktop/src/components/prompt-input.tsx
index 6590b6d18..22f2c1642 100644
--- a/packages/desktop/src/components/prompt-input.tsx
+++ b/packages/desktop/src/components/prompt-input.tsx
@@ -3,7 +3,6 @@ import { createEffect, on, Component, Show, For, onMount, onCleanup, Switch, Mat
import { createStore } from "solid-js/store"
import { createFocusSignal } from "@solid-primitives/active-element"
import { useLocal } from "@/context/local"
-import { DateTime } from "luxon"
import { ContentPart, DEFAULT_PROMPT, isPromptEqual, Prompt, useSession } from "@/context/session"
import { useSDK } from "@/context/sdk"
import { useNavigate } from "@solidjs/router"
@@ -14,10 +13,17 @@ import { Button } from "@opencode-ai/ui/button"
import { Icon } from "@opencode-ai/ui/icon"
import { Tooltip } from "@opencode-ai/ui/tooltip"
import { IconButton } from "@opencode-ai/ui/icon-button"
-import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
import { Select } from "@opencode-ai/ui/select"
+import { Tag } from "@opencode-ai/ui/tag"
import { getDirectory, getFilename } from "@opencode-ai/util/path"
-import { type IconName } from "@opencode-ai/ui/icons/provider"
+import { useLayout } from "@/context/layout"
+import { popularProviders, useProviders } from "@/hooks/use-providers"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { List, ListRef } from "@opencode-ai/ui/list"
+import { iife } from "@opencode-ai/util/iife"
+import { Input } from "@opencode-ai/ui/input"
+import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
+import { IconName } from "@opencode-ai/ui/icons/provider"
interface PromptInputProps {
class?: string
@@ -58,6 +64,8 @@ export const PromptInput: Component
= (props) => { const sync = useSync() const local = useLocal() const session = useSession() + const layout = useLayout() + const providers = useProviders() let editorRef!: HTMLDivElement const [store, setStore] = createStore<{ @@ -455,55 +463,180 @@ export const PromptInput: Component = (props) => { class="capitalize" variant="ghost" /> - `${x.provider.id}:${x.id}`} - items={local.model.list()} - current={local.model.current()} - filterKeys={["provider.name", "name", "id"]} - groupBy={(x) => (local.model.recent().includes(x) ? "Recent" : x.provider.name)} - sortGroupsBy={(a, b) => { - const order = ["opencode", "anthropic", "github-copilot", "openai", "google", "openrouter", "vercel"] - if (a.category === "Recent" && b.category !== "Recent") return -1 - if (b.category === "Recent" && a.category !== "Recent") return 1 - const aProvider = a.items[0].provider.id - const bProvider = b.items[0].provider.id - if (order.includes(aProvider) && !order.includes(bProvider)) return -1 - if (!order.includes(aProvider) && order.includes(bProvider)) return 1 - return order.indexOf(aProvider) - order.indexOf(bProvider) - }} - onSelect={(x) => - local.model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, { recent: true }) - } - trigger={ - - } - > - {(i) => ( - + +-- )} ---- - {i.name} --- - {DateTime.fromFormat("unknown", "yyyy-MM-dd").toFormat("LLL yyyy")} - - -- -Free-+ + +0}> + +{ + if (open) { + layout.dialog.open("model") + } else { + layout.dialog.close("model") + } + }} + title="Select model" + placeholder="Search models" + emptyMessage="No model results" + key={(x) => `${x.provider.id}:${x.id}`} + items={local.model.list()} + current={local.model.current()} + filterKeys={["provider.name", "name", "id"]} + // groupBy={(x) => (local.model.recent().includes(x) ? "Recent" : x.provider.name)} + groupBy={(x) => x.provider.name} + sortGroupsBy={(a, b) => { + if (a.category === "Recent" && b.category !== "Recent") return -1 + if (b.category === "Recent" && a.category !== "Recent") return 1 + const aProvider = a.items[0].provider.id + const bProvider = b.items[0].provider.id + if (popularProviders.includes(aProvider) && !popularProviders.includes(bProvider)) return -1 + if (!popularProviders.includes(aProvider) && popularProviders.includes(bProvider)) return 1 + return popularProviders.indexOf(aProvider) - popularProviders.indexOf(bProvider) + }} + onSelect={(x) => + local.model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, { recent: true }) + } + actions={ + + } + > + {(i) => ( + ++ {i.name} ++ )} ++ +Free ++ +Latest ++ {iife(() => { + let listRef: ListRef | undefined + const handleKey = (e: KeyboardEvent) => { + if (e.key === "Escape") return + listRef?.onKeyDown(e) + } + return ( + + ) + })} + +
) { - const available = PASTEL_COLORS.filter((c) => !usedColors.has(c)) - if (available.length === 0) return PASTEL_COLORS[Math.floor(Math.random() * PASTEL_COLORS.length)] - return available[Math.floor(Math.random() * available.length)] -} - -async function ensureProjectColor( - project: Project, - sdk: ReturnType , - usedColors: Set , -): Promise { - if (project.icon?.color) return project - const color = pickAvailableColor(usedColors) - usedColors.add(color) - const updated = { ...project, icon: { ...project.icon, color } } - sdk.client.project.update({ projectID: project.id, icon: { color } }) - return updated -} - type State = { ready: boolean - provider: Provider[] agent: Agent[] project: string + provider: ProviderListResponse config: Config path: Path session: Session[] @@ -81,13 +49,16 @@ type State = { export const { use: useGlobalSync, provider: GlobalSyncProvider } = createSimpleContext({ name: "GlobalSync", init: () => { + const sdk = useGlobalSDK() const [globalStore, setGlobalStore] = createStore<{ ready: boolean - projects: Project[] + project: Project[] + provider: ProviderListResponse children: Record () + + function pickAvailableColor() { + const available = PASTEL_COLORS.filter((c) => !usedColors.has(c)) + if (available.length === 0) return PASTEL_COLORS[Math.floor(Math.random() * PASTEL_COLORS.length)] + return available[Math.floor(Math.random() * available.length)] + } + + function enrich(project: { worktree: string; expanded: boolean }) { + const metadata = globalSync.data.project.find((x) => x.worktree === project.worktree) + if (!metadata) return [] + return [ + { + ...project, + ...metadata, + }, + ] + } + + function colorize(project: Project & { expanded: boolean }) { + if (project.icon?.color) return project + const color = pickAvailableColor() + usedColors.add(color) + project.icon = { ...project.icon, color } + globalSdk.client.project.update({ projectID: project.id, icon: { color } }) + return project + } + + const enriched = createMemo(() => store.projects.flatMap(enrich)) + const list = createMemo(() => enriched().flatMap(colorize)) async function loadProjectSessions(directory: string) { const [, setStore] = globalSync.child(directory) @@ -43,30 +92,19 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext( onMount(() => { Promise.all( - store.projects.map(({ worktree }) => { - return loadProjectSessions(worktree) + store.projects.map((project) => { + return loadProjectSessions(project.worktree) }), ) }) - function enrich(project: { worktree: string; expanded: boolean }) { - const metadata = globalSync.data.projects.find((x) => x.worktree === project.worktree) - if (!metadata) return [] - return [ - { - ...project, - ...metadata, - }, - ] - } - return { projects: { - list: createMemo(() => store.projects.flatMap(enrich)), + list, open(directory: string) { if (store.projects.find((x) => x.worktree === directory)) return loadProjectSessions(directory) - setStore("projects", (x) => [...x, { worktree: directory, expanded: true }]) + setStore("projects", (x) => [{ worktree: directory, expanded: true }, ...x]) }, close(directory: string) { setStore("projects", (x) => x.filter((x) => x.worktree !== directory)) @@ -129,6 +167,17 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext( setStore("review", "state", "tab") }, }, + dialog: { + opened: createMemo(() => ephemeral.dialog?.open), + open(dialog: "provider" | "model") { + setEphemeral("dialog", "open", dialog) + }, + close(dialog: "provider" | "model") { + if (ephemeral.dialog?.open === dialog) { + setEphemeral("dialog", "open", undefined) + } + }, + }, } }, }) diff --git a/packages/desktop/src/context/local.tsx b/packages/desktop/src/context/local.tsx index 8223a36b9..74d3ac364 100644 --- a/packages/desktop/src/context/local.tsx +++ b/packages/desktop/src/context/local.tsx @@ -25,6 +25,7 @@ export type View = LocalFile["view"] export type LocalModel = Omit ) diff --git a/packages/enterprise/src/routes/share/[shareID].tsx b/packages/enterprise/src/routes/share/[shareID].tsx index 15a36b2ff..1c593ca87 100644 --- a/packages/enterprise/src/routes/share/[shareID].tsx +++ b/packages/enterprise/src/routes/share/[shareID].tsx @@ -212,7 +212,7 @@ export default function () {- 0}> + 0}> Recent projects@@ -50,7 +50,7 @@ export default function Home() {(b.time.updated ?? b.time.created) - (a.time.updated ?? a.time.created)) .slice(0, 5)} > diff --git a/packages/desktop/src/pages/layout.tsx b/packages/desktop/src/pages/layout.tsx index 3ff3abb0e..10d4cbfda 100644 --- a/packages/desktop/src/pages/layout.tsx +++ b/packages/desktop/src/pages/layout.tsx @@ -9,6 +9,7 @@ import { Avatar } from "@opencode-ai/ui/avatar" import { ResizeHandle } from "@opencode-ai/ui/resize-handle" import { Button } from "@opencode-ai/ui/button" import { Icon } from "@opencode-ai/ui/icon" +import { ProviderIcon } from "@opencode-ai/ui/provider-icon" import { IconButton } from "@opencode-ai/ui/icon-button" import { Tooltip } from "@opencode-ai/ui/tooltip" import { Collapsible } from "@opencode-ai/ui/collapsible" @@ -29,6 +30,10 @@ import { useDragDropContext, } from "@thisbeyond/solid-dnd" import type { DragEvent, Transformer } from "@thisbeyond/solid-dnd" +import { SelectDialog } from "@opencode-ai/ui/select-dialog" +import { Tag } from "@opencode-ai/ui/tag" +import { IconName } from "@opencode-ai/ui/icons/provider" +import { popularProviders, useProviders } from "@/hooks/use-providers" export default function Layout(props: ParentProps) { const [store, setStore] = createStore({ @@ -44,6 +49,7 @@ export default function Layout(props: ParentProps) { const currentDirectory = createMemo(() => base64Decode(params.dir ?? "")) const sessions = createMemo(() => globalSync.child(currentDirectory())[0].session ?? []) const currentSession = createMemo(() => sessions().find((s) => s.id === params.id)) + const providers = useProviders() function navigateToProject(directory: string | undefined) { if (!directory) return @@ -82,12 +88,21 @@ export default function Layout(props: ParentProps) { } } + async function connectProvider() { + layout.dialog.open("provider") + } + createEffect(() => { if (!params.dir || !params.id) return const directory = base64Decode(params.dir) setStore("lastSession", directory, params.id) }) + createEffect(() => { + const sidebarWidth = layout.sidebar.opened() ? layout.sidebar.width() : 48 + document.documentElement.style.setProperty("--dialog-left-margin", `${sidebarWidth}px`) + }) + function getDraggableId(event: unknown): string | undefined { if (typeof event !== "object" || event === null) return undefined if (!("draggable" in event)) return undefined @@ -465,10 +480,44 @@ export default function Layout(props: ParentProps) { ++ + +++++Getting started+OpenCode includes free models so you can start immediately.+Connect any provider to use models, inc. Claude, GPT, Gemini etc.++ + ++ ++ + +{props.children} ++ x?.id} + items={providers().all} + // current={local.model.current()} + filterKeys={["id", "name"]} + groupBy={(x) => (popularProviders.includes(x.id) ? "Popular" : "Other")} + sortBy={(a, b) => { + if (popularProviders.includes(a.id) && popularProviders.includes(b.id)) + return popularProviders.indexOf(a.id) - popularProviders.indexOf(b.id) + return a.name.localeCompare(b.name) + }} + sortGroupsBy={(a, b) => { + if (a.category === "Popular" && b.category !== "Popular") return -1 + if (b.category === "Popular" && a.category !== "Popular") return 1 + return 0 + }} + // onSelect={(x) => } + onOpenChange={(open) => { + if (open) { + layout.dialog.open("provider") + } else { + layout.dialog.close("provider") + } + }} + > + {(i) => ( + +++ )} ++ {i.name} + + +Recommended ++ +Connect with Claude Pro/Max or API key+v{info().version}-+ {model()?.name ?? modelID()}diff --git a/packages/opencode/src/cli/cmd/auth.ts b/packages/opencode/src/cli/cmd/auth.ts index 61fe4e5bd..658329fb6 100644 --- a/packages/opencode/src/cli/cmd/auth.ts +++ b/packages/opencode/src/cli/cmd/auth.ts @@ -10,6 +10,154 @@ import { Config } from "../../config/config" import { Global } from "../../global" import { Plugin } from "../../plugin" import { Instance } from "../../project/instance" +import type { Hooks } from "@opencode-ai/plugin" + +type PluginAuth = NonNullable{ + let index = 0 + if (plugin.auth.methods.length > 1) { + const method = await prompts.select({ + message: "Login method", + options: [ + ...plugin.auth.methods.map((x, index) => ({ + label: x.label, + value: index.toString(), + })), + ], + }) + if (prompts.isCancel(method)) throw new UI.CancelledError() + index = parseInt(method) + } + const method = plugin.auth.methods[index] + + // Handle prompts for all auth types + await new Promise((resolve) => setTimeout(resolve, 10)) + const inputs: Record ({ - {(task) => ( - - ∟ {Locale.titlecase(task.tool)} {task.state.status === "completed" ? task.state.title : ""} - - )} + {(task, index) => { + const summary = props.metadata.summary ?? [] + return ( ++ {index() === summary.length - 1 ? "└" : "├"} {Locale.titlecase(task.tool)}{" "} + {task.state.status === "completed" ? task.state.title : ""} + + ) + }}> { @@ -60,6 +66,7 @@ fn spawn_sidecar(app: &AppHandle, port: u16) -> CommandChild { .shell() .sidecar("opencode") .unwrap() + .env("OPENCODE_EXPERIMENTAL_ICON_DISCOVERY", "true") .args(["serve", &format!("--port={port}")]) .spawn() .expect("Failed to spawn opencode"); @@ -168,7 +175,8 @@ pub fn run() { .initialization_script(format!( r#" window.__OPENCODE__ ??= {{}}; - window.__OPENCODE__.updaterEnabled = {updater_enabled} + window.__OPENCODE__.updaterEnabled = {updater_enabled}; + window.__OPENCODE__.port = {port}; "# )); diff --git a/packages/tauri/src/index.tsx b/packages/tauri/src/index.tsx index 6b9ce88e0..c72805fe6 100644 --- a/packages/tauri/src/index.tsx +++ b/packages/tauri/src/index.tsx @@ -47,12 +47,6 @@ const platform: Platform = { }, } -declare global { - interface Window { - __OPENCODE__?: { updaterEnabled?: boolean } - } -} - render(() => { onMount(() => { if (window.__OPENCODE__?.updaterEnabled) runUpdater() diff --git a/packages/ui/index.html b/packages/ui/index.html deleted file mode 100644 index 7697a5f96..000000000 --- a/packages/ui/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - OpenCode UI - - - - - - - diff --git a/packages/ui/package.json b/packages/ui/package.json index 20f3e733f..3ac942cd2 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -17,7 +17,6 @@ "scripts": { "typecheck": "tsgo --noEmit", "dev": "vite", - "build": "vite build", "generate:tailwind": "bun run script/tailwind.ts" }, "devDependencies": { diff --git a/packages/ui/src/components/avatar.tsx b/packages/ui/src/components/avatar.tsx index 1ff3008ee..fb5798b08 100644 --- a/packages/ui/src/components/avatar.tsx +++ b/packages/ui/src/components/avatar.tsx @@ -9,22 +9,23 @@ export interface AvatarProps extends ComponentProps<"div"> { export function Avatar(props: AvatarProps) { const [split, rest] = splitProps(props, ["fallback", "src", "background", "size", "class", "classList", "style"]) + const src = split.src // did this so i can zero it out to test fallback return (-diff --git a/packages/ui/src/components/button.css b/packages/ui/src/components/button.css index 192c7b60c..f95317028 100644 --- a/packages/ui/src/components/button.css +++ b/packages/ui/src/components/button.css @@ -102,23 +102,12 @@ height: 24px; padding: 0 6px; &[data-icon] { - padding: 0 8px 0 6px; + padding: 0 12px 0 4px; } font-size: var(--font-size-small); line-height: var(--line-height-large); gap: 6px; - } - - &[data-size="large"] { - height: 32px; - padding: 0 8px; - - &[data-icon] { - padding: 0 8px 0 6px; - } - - gap: 8px; /* text-12-medium */ font-family: var(--font-family-sans); @@ -129,6 +118,25 @@ letter-spacing: var(--letter-spacing-normal); } + &[data-size="large"] { + height: 32px; + padding: 0 8px; + + &[data-icon] { + padding: 0 12px 0 8px; + } + + gap: 8px; + + /* text-14-medium */ + font-family: var(--font-family-sans); + font-size: 14px; + font-style: normal; + font-weight: var(--font-weight-medium); + line-height: var(--line-height-large); /* 142.857% */ + letter-spacing: var(--letter-spacing-normal); + } + &:focus { outline: none; } diff --git a/packages/ui/src/components/dialog.css b/packages/ui/src/components/dialog.css index 2ac0709dd..1c7cd4f41 100644 --- a/packages/ui/src/components/dialog.css +++ b/packages/ui/src/components/dialog.css @@ -16,6 +16,7 @@ [data-component="dialog"] { position: fixed; inset: 0; + margin-left: var(--dialog-left-margin); z-index: 50; display: flex; align-items: center; @@ -24,7 +25,7 @@ [data-slot="dialog-container"] { position: relative; z-index: 50; - width: min(calc(100vw - 16px), 624px); + width: min(calc(100vw - 16px), 480px); height: min(calc(100vh - 16px), 512px); display: flex; flex-direction: column; @@ -36,14 +37,14 @@ flex-direction: column; align-items: flex-start; align-self: stretch; - gap: 8px; width: 100%; max-height: 100%; + min-height: 280px; /* padding: 8px; */ - padding: 8px 8px 0 8px; + /* padding: 8px 8px 0 8px; */ border: 1px solid var(--border-base); - border-radius: var(--radius-md); + border-radius: var(--radius-xl); background: var(--surface-raised-stronger-non-alpha); box-shadow: 0 15px 45px 0 rgba(19, 16, 16, 0.22), @@ -58,8 +59,9 @@ [data-slot="dialog-header"] { display: flex; - height: 40px; - padding: 4px 4px 4px 8px; + /* height: 40px; */ + /* padding: 4px 4px 4px 8px; */ + padding: 20px; justify-content: space-between; align-items: center; flex-shrink: 0; diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx index 4625482b5..a16705a57 100644 --- a/packages/ui/src/components/dialog.tsx +++ b/packages/ui/src/components/dialog.tsx @@ -79,7 +79,7 @@ function DialogDescription(props: DialogDescriptionProps & ComponentProps<"p">) } function DialogCloseButton(props: DialogCloseButtonProps & ComponentProps<"button">) { - return+ {(src) => }
+ return } export const Dialog = Object.assign(DialogRoot, { diff --git a/packages/ui/src/components/icon.tsx b/packages/ui/src/components/icon.tsx index 8c83b41ce..97f2e8eab 100644 --- a/packages/ui/src/components/icon.tsx +++ b/packages/ui/src/components/icon.tsx @@ -1,171 +1,44 @@ import { splitProps, type ComponentProps } from "solid-js" -// prettier-ignore const icons = { - close: ' ', - menu: ' ', - "chevron-right": ' ', - "chevron-left": ' ', - "chevron-down": ' ', - "chevron-up": ' ', - "chevron-down-square": ' ', - "chevron-up-square": ' ', - "chevron-right-square": ' ', - "chevron-left-square": ' ', - settings: ' ', - globe: ' ', - github: ' ', - hammer: ' ', - "avatar-square": ' ', - slash: ' ', - robot: ' ', - cloud: ' ', - "file-text": ' ', - file: ' ', - "file-checkmark": ' ', - "file-code": ' ', - "file-important": ' ', - "file-minus": ' ', - "file-plus": ' ', - files: ' ', - "file-zip": ' ', - jpg: ' ', - pdf: ' ', - png: ' ', - gif: ' ', - archive: ' ', - sun: ' ', - moon: ' ', - monitor: ' ', - command: ' ', - link: ' ', - share: ' ', - branch: ' ', - logout: ' ', - login: ' ', - keys: ' ', - key: ' ', - info: ' ', - warning: ' ', - checkmark: ' ', - "checkmark-square": ' ', - plus: ' ', - minus: ' ', - undo: ' ', - merge: ' ', - redo: ' ', - refresh: ' ', - rotate: ' ', - "arrow-left": ' ', - "arrow-down": ' ', - "arrow-right": ' ', - "arrow-up": ' ', - enter: ' ', - trash: ' ', - package: ' ', - box: ' ', - lock: ' ', - unlocked: ' ', - activity: ' ', - asterisk: ' ', - bell: ' ', - "bell-off": ' ', - bolt: ' ', - bookmark: ' ', - brain: ' ', - browser: ' ', - "browser-cursor": ' ', - bug: ' ', - "carat-down": ' ', - "carat-left": ' ', - "carat-right": ' ', - "carat-up": ' ', - cards: ' ', - chart: ' ', - "check-circle": ' ', - checklist: ' ', - "checklist-cards": ' ', - lab: ' ', - circle: ' ', - "circle-dotted": ' ', - clipboard: ' ', - clock: ' ', - "close-circle": ' ', - terminal: ' ', - code: ' ', - components: ' ', - copy: ' ', - cpu: ' ', - dashboard: ' ', - transfer: ' ', - devices: ' ', - diamond: ' ', - dice: ' ', - discord: ' ', - dots: ' ', - expand: ' ', - droplet: ' ', - "chevron-double-down": ' ', - "chevron-double-left": ' ', - "chevron-double-right": ' ', - "chevron-double-up": ' ', - "speech-bubble": ' ', - message: ' ', - annotation: ' ', - square: ' ', - "pull-request": ' ', - pencil: ' ', - sparkles: ' ', - photo: ' ', - columns: ' ', - "open-pane": ' ', - "close-pane": ' ', - "file-search": ' ', - "folder-search": ' ', - search: ' ', - "web-search": ' ', - loading: ' ', - mic: ' ', -} as const - -const newIcons = { - "circle-x": ` `, - "magnifying-glass": ` `, - "plus-small": ` `, + "align-right": ` `, + "arrow-up": ` `, + "bubble-5": ` `, + "bullet-list": ` `, + "check-small": ` `, "chevron-down": ` `, "chevron-right": ` `, - "arrow-up": ` `, - "check-small": ` `, - "edit-small-2": ` `, - folder: ` `, - "pencil-line": ` `, "chevron-grabber-vertical": ` `, + "circle-x": ` `, + close: ` `, + checklist: ` `, + console: ` `, + expand: ` `, + collapse: ` `, + "code-lines": ` `, + "circle-ban-sign": ` `, + "edit-small-2": ` `, + enter: ` `, + folder: ` `, + "magnifying-glass": ` `, + "plus-small": ` `, + "pencil-line": ` `, mcp: ` `, - "bullet-list": ` `, "magnifying-glass-menu": ` `, "window-cursor": ` `, task: ` `, - checklist: ` `, - console: ` `, - "code-lines": ` `, - "square-arrow-top-right": ` `, - "circle-ban-sign": ` `, stop: ` `, - enter: ` `, "layout-left": ` `, "layout-left-partial": ` `, "layout-left-full": ` `, "layout-right": ` `, "layout-right-partial": ` `, "layout-right-full": ` `, + "square-arrow-top-right": ` `, "speech-bubble": ` `, - "align-right": ` `, - expand: ` `, - collapse: ` `, "folder-add-left": ` `, "settings-gear": ` `, - "bubble-5": ` `, github: ` `, discord: ` `, "layout-bottom": ` `, @@ -175,32 +48,12 @@ const newIcons = { } export interface IconProps extends ComponentProps<"svg"> { - name: keyof typeof icons | keyof typeof newIcons + name: keyof typeof icons size?: "small" | "normal" | "large" } export function Icon(props: IconProps) { const [local, others] = splitProps(props, ["name", "size", "class", "classList"]) - - if (local.name in newIcons) { - return ( - - -- ) - } - return ( - [*]