@jonsoc/console-app 1.1.34

package/src/routes/workspace-picker.css

@@ -0,0 +1,74 @@
+[data-component="workspace-picker"] {
+  [data-component="dropdown"] {
+    [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;
+    }
+
+    [data-slot="dropdown"] {
+      max-height: 240px;
+      overflow-y: auto;
+      min-width: 200px;
+    }
+  }
+
+  [data-slot="create-item"] {
+    width: 100%;
+    padding: var(--space-2-5) var(--space-3);
+    border: none;
+    background: none;
+    color: var(--color-text);
+    font-size: var(--font-size-sm);
+    font-family: var(--font-sans);
+    text-align: left;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background-color: var(--color-bg-surface);
+    }
+  }
+
+  [data-slot="create-form"] {
+    width: 100%;
+  }
+
+  [data-slot="create-input-group"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  [data-slot="button-group"] {
+    display: flex;
+    gap: var(--space-2);
+    justify-content: flex-end;
+  }
+
+  [data-slot="create-input"] {
+    flex: 1;
+    padding: var(--space-2-5) var(--space-3);
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius-sm);
+    background-color: var(--color-bg);
+    color: var(--color-text);
+    font-size: var(--font-size-sm);
+    font-family: var(--font-sans);
+
+    &:focus {
+      outline: none;
+      border-color: var(--color-border);
+      box-shadow: none;
+    }
+
+    &::placeholder {
+      color: var(--color-text-muted);
+    }
+  }
+}

package/src/routes/workspace-picker.tsx

@@ -0,0 +1,122 @@
+import { query, useParams, action, createAsync, redirect, useSubmission } from "@solidjs/router"
+import { For, Show, createEffect } from "solid-js"
+import { createStore } from "solid-js/store"
+import { withActor } from "~/context/auth.withActor"
+import { Actor } from "@jonsoc/console-core/actor.js"
+import { and, Database, eq, isNull } from "@jonsoc/console-core/drizzle/index.js"
+import { WorkspaceTable } from "@jonsoc/console-core/schema/workspace.sql.js"
+import { UserTable } from "@jonsoc/console-core/schema/user.sql.js"
+import { Workspace } from "@jonsoc/console-core/workspace.js"
+import { Dropdown, DropdownItem } from "~/component/dropdown"
+import { Modal } from "~/component/modal"
+import "./workspace-picker.css"
+
+const getWorkspaces = query(async () => {
+  "use server"
+  return withActor(async () => {
+    return Database.use((tx) =>
+      tx
+        .select({
+          id: WorkspaceTable.id,
+          name: WorkspaceTable.name,
+          slug: WorkspaceTable.slug,
+        })
+        .from(UserTable)
+        .innerJoin(WorkspaceTable, eq(UserTable.workspaceID, WorkspaceTable.id))
+        .where(
+          and(
+            eq(UserTable.accountID, Actor.account()),
+            isNull(WorkspaceTable.timeDeleted),
+            isNull(UserTable.timeDeleted),
+          ),
+        ),
+    )
+  })
+}, "workspaces")
+
+const createWorkspace = action(async (form: FormData) => {
+  "use server"
+  const name = form.get("workspaceName") as string
+  if (name?.trim()) {
+    return withActor(async () => {
+      const workspaceID = await Workspace.create({ name: name.trim() })
+      return redirect(`/workspace/${workspaceID}`)
+    })
+  }
+}, "createWorkspace")
+
+export function WorkspacePicker() {
+  const params = useParams()
+  const workspaces = createAsync(() => getWorkspaces())
+  const submission = useSubmission(createWorkspace)
+  const [store, setStore] = createStore({
+    showForm: false,
+  })
+  let inputRef: HTMLInputElement | undefined
+
+  const currentWorkspace = () => {
+    const ws = workspaces()?.find((w) => w.id === params.id)
+    return ws ? ws.name : "Select workspace"
+  }
+
+  const handleWorkspaceNew = () => {
+    setStore("showForm", true)
+  }
+
+  createEffect(() => {
+    if (store.showForm && inputRef) {
+      setTimeout(() => inputRef?.focus(), 0)
+    }
+  })
+
+  const handleSelectWorkspace = (workspaceID: string) => {
+    if (workspaceID === params.id) return
+    window.location.href = `/workspace/${workspaceID}`
+  }
+
+  // Reset signals when workspace ID changes
+  createEffect(() => {
+    params.id
+    setStore("showForm", false)
+  })
+
+  return (
+    <div data-component="workspace-picker">
+      <Dropdown trigger={currentWorkspace()} align="left">
+        <For each={workspaces()}>
+          {(workspace) => (
+            <DropdownItem selected={workspace.id === params.id} onClick={() => handleSelectWorkspace(workspace.id)}>
+              {workspace.name || workspace.slug}
+            </DropdownItem>
+          )}
+        </For>
+        <button data-slot="create-item" type="button" onClick={() => handleWorkspaceNew()}>
+          + Create New Workspace
+        </button>
+      </Dropdown>
+
+      <Modal open={store.showForm} onClose={() => setStore("showForm", false)} title="Create New Workspace">
+        <form data-slot="create-form" action={createWorkspace} method="post">
+          <div data-slot="create-input-group">
+            <input
+              ref={inputRef}
+              data-slot="create-input"
+              type="text"
+              name="workspaceName"
+              placeholder="Enter workspace name"
+              required
+            />
+            <div data-slot="button-group">
+              <button type="button" data-color="ghost" onClick={() => setStore("showForm", false)}>
+                Cancel
+              </button>
+              <button type="submit" data-color="primary" disabled={submission.pending}>
+                {submission.pending ? "Creating..." : "Create"}
+              </button>
+            </div>
+          </div>
+        </form>
+      </Modal>
+    </div>
+  )
+}

package/src/routes/workspace.css

@@ -0,0 +1,107 @@
+[data-page="workspace"] {
+  line-height: 1;
+
+  /* Common elements */
+  button {
+    padding: var(--space-3) var(--space-4);
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius-sm);
+    background-color: var(--color-bg);
+    color: var(--color-text);
+    font-size: var(--font-size-sm);
+    font-family: var(--font-sans);
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s ease;
+
+    &:hover:not(:disabled) {
+      background-color: var(--color-surface-hover);
+      border-color: var(--color-accent);
+    }
+
+    &:active {
+      transform: translateY(1px);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      transform: none;
+    }
+
+    &[data-color="primary"] {
+      background-color: var(--color-primary);
+      border-color: var(--color-primary);
+      color: var(--color-primary-text);
+
+      &:hover:not(:disabled) {
+        background-color: var(--color-primary-hover);
+        border-color: var(--color-primary-hover);
+      }
+    }
+
+    &[data-color="ghost"] {
+      background-color: transparent;
+      border-color: transparent;
+      color: var(--color-text-muted);
+
+      &:hover:not(:disabled) {
+        background-color: var(--color-surface-hover);
+        border-color: var(--color-border);
+        color: var(--color-text);
+      }
+    }
+  }
+
+  a {
+    color: var(--color-text);
+  }
+
+  /* Workspace Header */
+  [data-component="workspace-header"] {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--space-4) var(--space-4);
+    border-bottom: 1px solid var(--color-border);
+    background-color: var(--color-bg);
+
+    @media (max-width: 30rem) {
+      padding: var(--space-4) var(--space-4);
+    }
+  }
+
+  [data-slot="header-brand"] {
+    flex: 0 0 auto;
+    padding-top: 4px;
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+
+    [data-component="site-title"] {
+      font-size: var(--font-size-lg);
+      font-weight: 600;
+      color: var(--color-text);
+      letter-spacing: -0.02em;
+    }
+  }
+
+  [data-slot="header-actions"] {
+    display: flex;
+    gap: var(--space-4);
+    align-items: center;
+    font-size: var(--font-size-sm);
+
+    [data-slot="user"] {
+      color: var(--color-text-muted);
+    }
+
+    @media (max-width: 30rem) {
+      [data-slot="user"] {
+        display: none;
+      }
+    }
+  }
+}

package/src/routes/workspace.tsx

@@ -0,0 +1,38 @@
+import { query, createAsync, RouteSectionProps, useParams, A } from "@solidjs/router"
+import "./workspace.css"
+import { IconWorkspaceLogo } from "../component/icon"
+import { WorkspacePicker } from "./workspace-picker"
+import { UserMenu } from "./user-menu"
+import { withActor } from "~/context/auth.withActor"
+import { User } from "@jonsoc/console-core/user.js"
+import { Actor } from "@jonsoc/console-core/actor.js"
+
+const getUserEmail = query(async (workspaceID: string) => {
+  "use server"
+  return withActor(async () => {
+    const actor = Actor.assert("user")
+    const email = await User.getAuthEmail(actor.properties.userID)
+    return email
+  }, workspaceID)
+}, "userEmail")
+
+export default function WorkspaceLayout(props: RouteSectionProps) {
+  const params = useParams()
+  const userEmail = createAsync(() => getUserEmail(params.id!))
+  return (
+    <main data-page="workspace">
+      <header data-component="workspace-header">
+        <div data-slot="header-brand">
+          <A href="/" data-component="site-title">
+            <IconWorkspaceLogo />
+          </A>
+          <WorkspacePicker />
+        </div>
+        <div data-slot="header-actions">
+          <UserMenu email={userEmail()} />
+        </div>
+      </header>
+      <div>{props.children}</div>
+    </main>
+  )
+}