From bc0e00cbb7e68d80e826dd1606fddc9228e1210d Mon Sep 17 00:00:00 2001 From: Frank Date: Thu, 9 Oct 2025 22:38:42 -0400 Subject: wip: zen style header --- packages/console/app/src/component/icon.tsx | 76 +++++++++++++++++++++-------- 1 file changed, 56 insertions(+), 20 deletions(-) (limited to 'packages/console/app/src/component') diff --git a/packages/console/app/src/component/icon.tsx b/packages/console/app/src/component/icon.tsx index 2b2dbe411..bb3c62da9 100644 --- a/packages/console/app/src/component/icon.tsx +++ b/packages/console/app/src/component/icon.tsx @@ -2,26 +2,43 @@ import { JSX } from "solid-js" export function IconLogo(props: JSX.SvgSVGAttributes) { return ( - - - - - - - - - - - - -) + + + + + + + + + + + + ) } export function IconCopy(props: JSX.SvgSVGAttributes) { @@ -55,3 +72,22 @@ export function IconCreditCard(props: JSX.SvgSVGAttributes) { ) } + +export function IconChevron(props: JSX.SvgSVGAttributes) { + return ( + + + + ) +} + +export function IconWorkspaceLogo(props: JSX.SvgSVGAttributes) { + return ( + + + + ) +} -- cgit v1.2.3 From ad7b4b1fcd4b2c863d188ad7b20ccb246fe98d93 Mon Sep 17 00:00:00 2001 From: Frank Date: Fri, 10 Oct 2025 00:56:16 -0400 Subject: wip: zen style nav bar --- packages/console/app/src/component/icon.tsx | 93 ++++++++++++++-------- packages/console/app/src/routes/workspace.tsx | 2 +- packages/console/app/src/routes/workspace/[id].css | 54 ++++++++----- packages/console/app/src/routes/workspace/[id].tsx | 34 ++++---- .../app/src/routes/workspace/[id]/index.css | 2 +- .../app/src/routes/workspace/[id]/index.tsx | 3 +- 6 files changed, 117 insertions(+), 71 deletions(-) (limited to 'packages/console/app/src/component') diff --git a/packages/console/app/src/component/icon.tsx b/packages/console/app/src/component/icon.tsx index bb3c62da9..4d3865c87 100644 --- a/packages/console/app/src/component/icon.tsx +++ b/packages/console/app/src/component/icon.tsx @@ -2,41 +2,68 @@ import { JSX } from "solid-js" export function IconLogo(props: JSX.SvgSVGAttributes) { return ( - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) } diff --git a/packages/console/app/src/routes/workspace.tsx b/packages/console/app/src/routes/workspace.tsx index 04e3f2c47..2ac629f52 100644 --- a/packages/console/app/src/routes/workspace.tsx +++ b/packages/console/app/src/routes/workspace.tsx @@ -1,7 +1,7 @@ import { Show } from "solid-js" import { query, createAsync, RouteSectionProps, useParams, A } from "@solidjs/router" import "./workspace.css" -import { IconLogo, IconWorkspaceLogo } from "../component/icon" +import { IconWorkspaceLogo } from "../component/icon" import { WorkspacePicker } from "./workspace-picker" import { UserMenu } from "./user-menu" import { withActor } from "~/context/auth.withActor" diff --git a/packages/console/app/src/routes/workspace/[id].css b/packages/console/app/src/routes/workspace/[id].css index 399d7e737..e21db2c21 100644 --- a/packages/console/app/src/routes/workspace/[id].css +++ b/packages/console/app/src/routes/workspace/[id].css @@ -14,26 +14,42 @@ border-right: 1px solid var(--color-border); padding: var(--space-6) var(--space-4); display: flex; - flex-direction: column; - gap: var(--space-2); - - [data-nav-button] { - padding: var(--space-3) var(--space-4); - border-radius: var(--border-radius-sm); - color: var(--color-text-muted); - text-decoration: none; - font-size: var(--font-size-sm); - font-weight: 500; - transition: all 0.15s ease; - - &:hover { - background-color: var(--color-surface-hover); - color: var(--color-text); - } + justify-content: flex-end; + + [data-component="nav-items"] { + display: flex; + flex-direction: column; + gap: var(--space-2); + + [data-nav-button] { + padding: var(--space-3) var(--space-4); + border-radius: var(--border-radius-sm); + color: var(--color-text-muted); + text-decoration: none; + font-size: var(--font-size-sm); + font-weight: 500; + transition: all 0.15s ease; + + &:hover { + color: var(--color-text); + } + + &.active { + color: var(--color-text); + font-weight: 700; + position: relative; - &.active { - background-color: var(--color-surface-hover); - color: var(--color-text); + &::before { + content: ''; + position: absolute; + left: calc(-1 * var(--space-0-5)); + top: 0; + bottom: 0; + width: 2px; + background-color: var(--color-text); + border-radius: 0 2px 2px 0; + } + } } } } diff --git a/packages/console/app/src/routes/workspace/[id].tsx b/packages/console/app/src/routes/workspace/[id].tsx index 1da24dc32..21f20c70b 100644 --- a/packages/console/app/src/routes/workspace/[id].tsx +++ b/packages/console/app/src/routes/workspace/[id].tsx @@ -10,23 +10,25 @@ export default function WorkspaceLayout(props: RouteSectionProps) {
diff --git a/packages/console/app/src/routes/workspace/[id]/index.css b/packages/console/app/src/routes/workspace/[id]/index.css index 5124c78cf..5d7550fbd 100644 --- a/packages/console/app/src/routes/workspace/[id]/index.css +++ b/packages/console/app/src/routes/workspace/[id]/index.css @@ -1,6 +1,6 @@ [data-page="workspace-[id]"] { max-width: 64rem; - padding: var(--space-10) var(--space-4); + padding: var(--space-2) var(--space-4); margin: 0 auto; width: 100%; display: flex; diff --git a/packages/console/app/src/routes/workspace/[id]/index.tsx b/packages/console/app/src/routes/workspace/[id]/index.tsx index 46e6cf74b..a5a8bb469 100644 --- a/packages/console/app/src/routes/workspace/[id]/index.tsx +++ b/packages/console/app/src/routes/workspace/[id]/index.tsx @@ -3,12 +3,13 @@ import { NewUserSection } from "./new-user-section" import { UsageSection } from "./usage-section" import { ModelSection } from "./model-section" import { ProviderSection } from "./provider-section" +import { IconLogo } from "~/component/icon" export default function () { return (
-

Zen

+

Curated list of models provided by opencode.{" "} -- cgit v1.2.3 From f14cd4a3db12161eab93ce6538528ed882439a50 Mon Sep 17 00:00:00 2001 From: Frank Date: Fri, 10 Oct 2025 19:39:01 -0400 Subject: wip: zen --- packages/console/app/src/component/modal.css | 66 ++++++++++++++++++++++ packages/console/app/src/component/modal.tsx | 24 ++++++++ .../console/app/src/routes/workspace-picker.css | 35 ++++++------ .../console/app/src/routes/workspace-picker.tsx | 28 ++++++--- 4 files changed, 125 insertions(+), 28 deletions(-) create mode 100644 packages/console/app/src/component/modal.css create mode 100644 packages/console/app/src/component/modal.tsx (limited to 'packages/console/app/src/component') diff --git a/packages/console/app/src/component/modal.css b/packages/console/app/src/component/modal.css new file mode 100644 index 000000000..23b6831c9 --- /dev/null +++ b/packages/console/app/src/component/modal.css @@ -0,0 +1,66 @@ +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +@keyframes slideUp { + from { + opacity: 0; + transform: translateY(20px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +[data-component="modal"][data-slot="overlay"] { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 9999; + display: flex; + align-items: center; + justify-content: center; + background-color: rgba(0, 0, 0, 0.5); + animation: fadeIn 0.2s ease; + + @media (prefers-color-scheme: dark) { + background-color: rgba(0, 0, 0, 0.7); + } + + [data-slot="content"] { + background-color: var(--color-bg); + border: 1px solid var(--color-border); + border-radius: var(--border-radius-md); + padding: var(--space-6); + min-width: 400px; + max-width: 90vw; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); + animation: slideUp 0.2s ease; + + @media (max-width: 30rem) { + min-width: 300px; + padding: var(--space-4); + } + + @media (prefers-color-scheme: dark) { + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); + } + } + + [data-slot="title"] { + margin: 0 0 var(--space-4) 0; + font-size: var(--font-size-lg); + font-weight: 600; + color: var(--color-text); + } +} \ No newline at end of file diff --git a/packages/console/app/src/component/modal.tsx b/packages/console/app/src/component/modal.tsx new file mode 100644 index 000000000..d6dc8a3de --- /dev/null +++ b/packages/console/app/src/component/modal.tsx @@ -0,0 +1,24 @@ +import { JSX, Show } from "solid-js" +import "./modal.css" + +interface ModalProps { + open: boolean + onClose: () => void + title?: string + children: JSX.Element +} + +export function Modal(props: ModalProps) { + return ( + +

+ + ) +} diff --git a/packages/console/app/src/routes/workspace-picker.css b/packages/console/app/src/routes/workspace-picker.css index c174cabe5..dec482286 100644 --- a/packages/console/app/src/routes/workspace-picker.css +++ b/packages/console/app/src/routes/workspace-picker.css @@ -1,15 +1,15 @@ [data-component="workspace-picker"] { position: relative; - /* Override blue accent colors with neutral colors */ - --color-accent: var(--color-border); - --color-accent-hover: var(--color-border); - --color-accent-active: var(--color-border); - --color-primary: var(--color-border); - --color-primary-hover: var(--color-border); - --color-primary-active: var(--color-border); - --color-primary-alpha-20: transparent; [data-slot="trigger"] { + /* Override blue accent colors with neutral colors for dropdown trigger */ + --color-accent: var(--color-border); + --color-accent-hover: var(--color-border); + --color-accent-active: var(--color-border); + --color-primary: var(--color-border); + --color-primary-hover: var(--color-border); + --color-primary-active: var(--color-border); + --color-primary-alpha-20: transparent; display: flex; align-items: center; justify-content: space-between; @@ -73,22 +73,19 @@ } [data-slot="create-form"] { - margin-top: var(--space-4); - padding: var(--space-4); - border: 1px solid var(--color-border); - border-radius: var(--border-radius-sm); - background-color: var(--color-surface); + width: 100%; } [data-slot="create-input-group"] { display: flex; - gap: var(--space-2); - align-items: center; + flex-direction: column; + gap: var(--space-3); + } - @media (max-width: 30rem) { - flex-direction: column; - align-items: stretch; - } + [data-slot="button-group"] { + display: flex; + gap: var(--space-2); + justify-content: flex-end; } [data-slot="create-input"] { diff --git a/packages/console/app/src/routes/workspace-picker.tsx b/packages/console/app/src/routes/workspace-picker.tsx index fb77d8f45..51de4cef1 100644 --- a/packages/console/app/src/routes/workspace-picker.tsx +++ b/packages/console/app/src/routes/workspace-picker.tsx @@ -8,6 +8,7 @@ import { WorkspaceTable } from "@opencode-ai/console-core/schema/workspace.sql.j import { UserTable } from "@opencode-ai/console-core/schema/user.sql.js" import { Workspace } from "@opencode-ai/console-core/workspace.js" import { IconChevron } from "~/component/icon" +import { Modal } from "~/component/modal" import "./workspace-picker.css" const getWorkspaces = query(async () => { @@ -46,6 +47,7 @@ export function WorkspacePicker() { showDropdown: false, }) let dropdownRef: HTMLDivElement | undefined + let inputRef: HTMLInputElement | undefined const currentWorkspace = () => { const ws = workspaces()?.find((w) => w.id === params.id) @@ -56,6 +58,12 @@ export function WorkspacePicker() { setStore({ showForm: true, showDropdown: false }) } + createEffect(() => { + if (store.showForm && inputRef) { + setTimeout(() => inputRef?.focus(), 0) + } + }) + const handleSelectWorkspace = (workspaceID: string) => { if (workspaceID === params.id) { setStore("showDropdown", false) @@ -112,26 +120,28 @@ export function WorkspacePicker() {
- + setStore("showForm", false)} title="Create New Workspace">
- - +
+ + +
- + ) } -- cgit v1.2.3