wip: zen style nav bar

5 files changed, 57 insertions, 38 deletions

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) {
     <main data-page="workspace">
       <div data-component="workspace-container">
         <nav data-component="workspace-nav">
-          <A href={`/workspace/${params.id}`} end activeClass="active" data-nav-button>
-            Zen
-          </A>
-          <Show when={userInfo()?.isAdmin}>
-            <A href={`/workspace/${params.id}/billing`} activeClass="active" data-nav-button>
-              Billing
+          <div data-component="nav-items">
+            <A href={`/workspace/${params.id}`} end activeClass="active" data-nav-button>
+              Zen
             </A>
-          </Show>
-          <A href={`/workspace/${params.id}/keys`} activeClass="active" data-nav-button>
-            API Keys
-          </A>
-          <A href={`/workspace/${params.id}/members`} activeClass="active" data-nav-button>
-            Members
-          </A>
-          <A href={`/workspace/${params.id}/settings`} activeClass="active" data-nav-button>
-            Settings
-          </A>
+            <A href={`/workspace/${params.id}/keys`} activeClass="active" data-nav-button>
+              API Keys
+            </A>
+            <A href={`/workspace/${params.id}/members`} activeClass="active" data-nav-button>
+              Members
+            </A>
+            <Show when={userInfo()?.isAdmin}>
+              <A href={`/workspace/${params.id}/billing`} activeClass="active" data-nav-button>
+                Billing
+              </A>
+            </Show>
+            <A href={`/workspace/${params.id}/settings`} activeClass="active" data-nav-button>
+              Settings
+            </A>
+          </div>
         </nav>
         <div data-component="workspace-content">{props.children}</div>
       </div>
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 (
     <div data-page="workspace-[id]">
       <section data-component="title-section">
-        <h1>Zen</h1>
+        <IconLogo />
         <p>
           Curated list of models provided by opencode.{" "}
           <a target="_blank" href="/docs/zen">