@jonsoc/console-app 1.1.34

package/src/routes/workspace/[id]/members/member-section.tsx

@@ -0,0 +1,343 @@
+import { json, query, action, useParams, createAsync, useSubmission } from "@solidjs/router"
+import { createEffect, For, Show } from "solid-js"
+import { withActor } from "~/context/auth.withActor"
+import { createStore } from "solid-js/store"
+import styles from "./member-section.module.css"
+import { UserRole } from "@jonsoc/console-core/schema/user.sql.js"
+import { Actor } from "@jonsoc/console-core/actor.js"
+import { User } from "@jonsoc/console-core/user.js"
+import { RoleDropdown } from "./role-dropdown"
+
+const listMembers = query(async (workspaceID: string) => {
+  "use server"
+  return withActor(async () => {
+    return {
+      members: await User.list(),
+      actorID: Actor.userID(),
+      actorRole: Actor.userRole(),
+    }
+  }, workspaceID)
+}, "member.list")
+
+const inviteMember = action(async (form: FormData) => {
+  "use server"
+  const email = form.get("email")?.toString().trim()
+  if (!email) return { error: "Email is required" }
+  const workspaceID = form.get("workspaceID")?.toString()
+  if (!workspaceID) return { error: "Workspace ID is required" }
+  const role = form.get("role")?.toString() as (typeof UserRole)[number]
+  if (!role) return { error: "Role is required" }
+  const limit = form.get("limit")?.toString()
+  const monthlyLimit = limit && limit.trim() !== "" ? parseInt(limit) : null
+  if (monthlyLimit !== null && monthlyLimit < 0) return { error: "Set a valid monthly limit" }
+  return json(
+    await withActor(
+      () =>
+        User.invite({ email, role, monthlyLimit })
+          .then((data) => ({ error: undefined, data }))
+          .catch((e) => ({ error: e.message as string })),
+      workspaceID,
+    ),
+    { revalidate: listMembers.key },
+  )
+}, "member.create")
+
+const removeMember = action(async (form: FormData) => {
+  "use server"
+  const id = form.get("id")?.toString()
+  if (!id) return { error: "ID is required" }
+  const workspaceID = form.get("workspaceID")?.toString()
+  if (!workspaceID) return { error: "Workspace ID is required" }
+  return json(
+    await withActor(
+      () =>
+        User.remove(id)
+          .then((data) => ({ error: undefined, data }))
+          .catch((e) => ({ error: e.message as string })),
+      workspaceID,
+    ),
+    { revalidate: listMembers.key },
+  )
+}, "member.remove")
+
+const updateMember = action(async (form: FormData) => {
+  "use server"
+
+  const id = form.get("id")?.toString()
+  if (!id) return { error: "ID is required" }
+  const workspaceID = form.get("workspaceID")?.toString()
+  if (!workspaceID) return { error: "Workspace ID is required" }
+  const role = form.get("role")?.toString() as (typeof UserRole)[number]
+  if (!role) return { error: "Role is required" }
+  const limit = form.get("limit")?.toString()
+  const monthlyLimit = limit && limit.trim() !== "" ? parseInt(limit) : null
+  if (monthlyLimit !== null && monthlyLimit < 0) return { error: "Set a valid monthly limit" }
+
+  return json(
+    await withActor(
+      () =>
+        User.update({ id, role, monthlyLimit })
+          .then((data) => ({ error: undefined, data }))
+          .catch((e) => ({ error: e.message as string })),
+      workspaceID,
+    ),
+    { revalidate: listMembers.key },
+  )
+}, "member.update")
+
+function MemberRow(props: { member: any; workspaceID: string; actorID: string; actorRole: string }) {
+  const submission = useSubmission(updateMember)
+  const isCurrentUser = () => props.actorID === props.member.id
+  const isAdmin = () => props.actorRole === "admin"
+  const [store, setStore] = createStore({
+    editing: false,
+    selectedRole: props.member.role as (typeof UserRole)[number],
+    limit: "",
+  })
+
+  createEffect(() => {
+    if (!submission.pending && submission.result && !submission.result.error) {
+      setStore("editing", false)
+    }
+  })
+
+  function show() {
+    while (true) {
+      submission.clear()
+      if (!submission.result) break
+    }
+    setStore("editing", true)
+    setStore("selectedRole", props.member.role)
+    setStore("limit", props.member.monthlyLimit?.toString() ?? "")
+  }
+
+  function hide() {
+    setStore("editing", false)
+  }
+
+  function getUsageDisplay() {
+    const currentUsage = (() => {
+      const dateLastUsed = props.member.timeMonthlyUsageUpdated
+      if (!dateLastUsed) return 0
+
+      const current = new Date().toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "long",
+        timeZone: "UTC",
+      })
+      const lastUsed = dateLastUsed.toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "long",
+        timeZone: "UTC",
+      })
+      return current === lastUsed ? (props.member.monthlyUsage ?? 0) : 0
+    })()
+
+    const limit = props.member.monthlyLimit ? `$${props.member.monthlyLimit}` : "no limit"
+    return `$${(currentUsage / 100000000).toFixed(2)} / ${limit}`
+  }
+
+  return (
+    <tr>
+      <td data-slot="member-email">{props.member.authEmail ?? props.member.email}</td>
+      <td data-slot="member-role">
+        <Show when={store.editing && !isCurrentUser()} fallback={<span>{props.member.role}</span>}>
+          <RoleDropdown
+            value={store.selectedRole}
+            options={roleOptions}
+            onChange={(value) => setStore("selectedRole", value as (typeof UserRole)[number])}
+          />
+        </Show>
+      </td>
+      <td data-slot="member-usage">
+        <Show when={store.editing} fallback={<span>{getUsageDisplay()}</span>}>
+          <input
+            data-component="input"
+            type="number"
+            value={store.limit}
+            onInput={(e) => setStore("limit", e.currentTarget.value)}
+            placeholder="No limit"
+            min="0"
+          />
+        </Show>
+      </td>
+      <td data-slot="member-joined">{props.member.timeSeen ? "" : "invited"}</td>
+      <Show when={isAdmin()}>
+        <td data-slot="member-actions">
+          <Show
+            when={store.editing}
+            fallback={
+              <>
+                <button data-color="ghost" onClick={() => show()}>
+                  Edit
+                </button>
+                <Show when={!isCurrentUser()}>
+                  <form action={removeMember} method="post">
+                    <input type="hidden" name="id" value={props.member.id} />
+                    <input type="hidden" name="workspaceID" value={props.workspaceID} />
+                    <button data-color="ghost">Delete</button>
+                  </form>
+                </Show>
+              </>
+            }
+          >
+            <form action={updateMember} method="post" data-slot="inline-edit-form">
+              <input type="hidden" name="id" value={props.member.id} />
+              <input type="hidden" name="workspaceID" value={props.workspaceID} />
+              <input type="hidden" name="role" value={store.selectedRole} />
+              <input type="hidden" name="limit" value={store.limit} />
+              <button type="submit" data-color="ghost" disabled={submission.pending}>
+                {submission.pending ? "Saving..." : "Save"}
+              </button>
+              <Show when={!submission.pending}>
+                <button type="button" data-color="ghost" onClick={() => hide()}>
+                  Cancel
+                </button>
+              </Show>
+            </form>
+          </Show>
+        </td>
+      </Show>
+    </tr>
+  )
+}
+
+const roleOptions = [
+  { value: "admin", description: "Can manage models, members, and billing" },
+  { value: "member", description: "Can only generate API keys for themselves" },
+]
+
+export function MemberSection() {
+  const params = useParams()
+  const data = createAsync(() => listMembers(params.id!))
+  const submission = useSubmission(inviteMember)
+  const [store, setStore] = createStore({
+    show: false,
+    selectedRole: "member" as (typeof UserRole)[number],
+    limit: "",
+  })
+
+  let input: HTMLInputElement
+
+  createEffect(() => {
+    if (!submission.pending && submission.result && !submission.result.error) {
+      setStore("show", false)
+    }
+  })
+
+  function show() {
+    while (true) {
+      submission.clear()
+      if (!submission.result) break
+    }
+    setStore("show", true)
+    setStore("selectedRole", "member")
+    setStore("limit", "")
+    setTimeout(() => input?.focus(), 0)
+  }
+
+  function hide() {
+    setStore("show", false)
+  }
+
+  return (
+    <section class={styles.root}>
+      <div data-slot="section-title">
+        <h2>Members</h2>
+        <div data-slot="title-row">
+          <p>Manage workspace members and their permissions.</p>
+          <Show when={data()?.actorRole === "admin"}>
+            <button data-color="primary" onClick={() => show()}>
+              Invite Member
+            </button>
+          </Show>
+        </div>
+      </div>
+      <div data-slot="beta-notice">
+        Workspaces are free for teams during the beta.{" "}
+        <a href="/docs/zen/#for-teams" target="_blank" rel="noopener noreferrer">
+          Learn more
+        </a>
+        .
+      </div>
+      <Show when={store.show}>
+        <form action={inviteMember} method="post" data-slot="create-form">
+          <div data-slot="input-row">
+            <div data-slot="input-field">
+              <p>Invitee</p>
+              <input
+                ref={(r) => (input = r)}
+                data-component="input"
+                name="email"
+                type="text"
+                placeholder="Enter email"
+              />
+            </div>
+            <div data-slot="input-field">
+              <p>Role</p>
+              <RoleDropdown
+                value={store.selectedRole}
+                options={roleOptions}
+                onChange={(value) => setStore("selectedRole", value as (typeof UserRole)[number])}
+              />
+            </div>
+            <div data-slot="input-field">
+              <p>Monthly spending limit</p>
+              <input
+                data-component="input"
+                name="limit"
+                type="number"
+                placeholder="No limit"
+                value={store.limit}
+                onInput={(e) => setStore("limit", e.currentTarget.value)}
+                min="0"
+              />
+            </div>
+          </div>
+          <Show when={submission.result && submission.result.error}>
+            {(err) => <div data-slot="form-error">{err()}</div>}
+          </Show>
+          <input type="hidden" name="role" value={store.selectedRole} />
+          <input type="hidden" name="workspaceID" value={params.id} />
+          <div data-slot="form-actions">
+            <button type="reset" data-color="ghost" onClick={() => hide()}>
+              Cancel
+            </button>
+            <button type="submit" data-color="primary" disabled={submission.pending}>
+              {submission.pending ? "Inviting..." : "Invite"}
+            </button>
+          </div>
+        </form>
+      </Show>
+      <div data-slot="members-table">
+        <table data-slot="members-table-element">
+          <thead>
+            <tr>
+              <th>Email</th>
+              <th>Role</th>
+              <th>Month limit</th>
+              <th></th>
+              <Show when={data()?.actorRole === "admin"}>
+                <th></th>
+              </Show>
+            </tr>
+          </thead>
+          <tbody>
+            <Show when={data() && data()!.members.length > 0}>
+              <For each={data()!.members}>
+                {(member) => (
+                  <MemberRow
+                    member={member}
+                    workspaceID={params.id!}
+                    actorID={data()!.actorID}
+                    actorRole={data()!.actorRole}
+                  />
+                )}
+              </For>
+            </Show>
+          </tbody>
+        </table>
+      </div>
+    </section>
+  )
+}

package/src/routes/workspace/[id]/members/role-dropdown.css

@@ -0,0 +1,72 @@
+.role-dropdown {
+  [data-slot="trigger"] {
+    border: 1px solid var(--color-border);
+    background-color: var(--color-bg);
+    width: 100%;
+    text-transform: capitalize;
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--border-radius-sm);
+    color: var(--color-text);
+    font-size: var(--font-size-sm);
+    line-height: 1.5;
+    min-width: 0;
+
+    &:hover {
+      border-color: var(--color-accent);
+      background-color: var(--color-bg);
+    }
+
+    &:focus {
+      outline: none;
+      border-color: var(--color-accent);
+      box-shadow: 0 0 0 3px var(--color-accent-alpha);
+    }
+  }
+
+  [data-slot="chevron"] {
+    opacity: 0.6;
+  }
+
+  [data-slot="dropdown"] {
+    padding: var(--space-1);
+    min-width: 280px;
+    width: max-content;
+  }
+
+  [data-slot="role-item"] {
+    display: block;
+    width: 100%;
+    padding: var(--space-2) var(--space-3);
+    border: none;
+    background-color: transparent;
+    color: var(--color-text);
+    font-size: var(--font-size-sm);
+    text-align: left;
+    cursor: pointer;
+    border-radius: var(--border-radius-sm);
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background-color: var(--color-bg-surface);
+    }
+
+    &[data-selected="true"] {
+      background-color: var(--color-accent-alpha);
+    }
+
+    div {
+      strong {
+        display: block;
+        color: var(--color-text);
+        margin-bottom: var(--space-1);
+        text-transform: capitalize;
+      }
+
+      p {
+        font-size: var(--font-size-xs);
+        color: var(--color-text-muted);
+        margin: 0;
+      }
+    }
+  }
+}

package/src/routes/workspace/[id]/members/role-dropdown.tsx

@@ -0,0 +1,43 @@
+import { createSignal } from "solid-js"
+import { Dropdown } from "~/component/dropdown"
+import "./role-dropdown.css"
+
+interface RoleOption {
+  value: string
+  description: string
+}
+
+interface RoleDropdownProps {
+  value: string
+  options: RoleOption[]
+  onChange: (value: string) => void
+}
+
+export function RoleDropdown(props: RoleDropdownProps) {
+  const [open, setOpen] = createSignal(false)
+
+  const handleSelect = (value: string) => {
+    props.onChange(value)
+    setOpen(false)
+  }
+
+  return (
+    <Dropdown trigger={props.value} open={open()} onOpenChange={setOpen} class="role-dropdown">
+      <>
+        {props.options.map((option) => (
+          <button
+            data-slot="role-item"
+            data-selected={props.value === option.value}
+            type="button"
+            onClick={() => handleSelect(option.value)}
+          >
+            <div>
+              <strong>{option.value}</strong>
+              <p>{option.description}</p>
+            </div>
+          </button>
+        ))}
+      </>
+    </Dropdown>
+  )
+}

package/src/routes/workspace/[id]/model-section.module.css

@@ -0,0 +1,173 @@
+[data-slot="models-list"] {
+  display: flex;
+  flex-direction: column;
+}
+
+[data-slot="models-table"] {
+  overflow-x: auto;
+}
+
+[data-slot="models-table-element"] {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--font-size-sm);
+
+  thead {
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  th {
+    padding: var(--space-3) var(--space-4);
+    text-align: left;
+    font-weight: normal;
+    color: var(--color-text-muted);
+    text-transform: uppercase;
+  }
+
+  td {
+    padding: var(--space-3) var(--space-4);
+    border-bottom: 1px solid var(--color-border-muted);
+    color: var(--color-text-muted);
+    font-family: var(--font-mono);
+
+    &[data-slot="model-name"] {
+      color: var(--color-text);
+      font-family: var(--font-mono);
+      font-weight: 500;
+
+      div {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+    }
+
+    &[data-slot="training-data"] {
+      text-align: center;
+      color: var(--color-text);
+    }
+
+    &[data-slot="model-toggle"] {
+      text-align: left;
+      font-family: var(--font-sans);
+    }
+
+    [data-slot="model-toggle-label"] {
+      /* Toggle container */
+      position: relative;
+      display: inline-block;
+      width: 2.5rem;
+      height: 1.5rem;
+      cursor: pointer;
+
+      /* Hidden checkbox input */
+      input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+      }
+
+      /* Toggle track (background) */
+      span {
+        position: absolute;
+        inset: 0;
+        background-color: #ccc;
+        border: 1px solid #bbb;
+        border-radius: 1.5rem;
+        transition: all 0.3s ease;
+        cursor: pointer;
+
+        /* Toggle handle (slider) */
+        &::before {
+          content: "";
+          position: absolute;
+          top: 50%;
+          left: 0.125rem;
+          width: 1.25rem;
+          height: 1.25rem;
+          background-color: white;
+          border: 1px solid #ddd;
+          border-radius: 50%;
+          transform: translateY(-50%);
+          transition: all 0.3s ease;
+        }
+      }
+
+      /* Checked state - track */
+      input:checked + span {
+        background-color: #21ad0e;
+        border-color: #148605;
+
+        /* Checked state - handle */
+        &::before {
+          transform: translateX(1rem) translateY(-50%);
+        }
+      }
+
+      /* Hover states */
+      &:hover span {
+        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
+      }
+
+      input:checked:hover + span {
+        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
+      }
+
+      /* Disabled state */
+      &:has(input:disabled) {
+        cursor: not-allowed;
+      }
+
+      input:disabled + span {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      input:disabled:checked + span {
+        opacity: 0.5;
+      }
+
+      input:disabled ~ span:hover {
+        box-shadow: none;
+      }
+    }
+  }
+
+  tbody tr {
+    &:last-child td {
+      border-bottom: none;
+    }
+
+    &[data-disabled="true"] {
+      td[data-slot="model-name"] {
+        color: var(--color-text-muted);
+      }
+    }
+  }
+}
+
+@media (max-width: 40rem) {
+  [data-slot="models-table-element"] {
+    th,
+    td {
+      padding: var(--space-2) var(--space-3);
+      font-size: var(--font-size-xs);
+    }
+
+    th {
+      &:nth-child(2)
+
+      /* Training Data */ {
+        display: none;
+      }
+    }
+
+    td {
+      &:nth-child(2)
+
+      /* Training Data */ {
+        display: none;
+      }
+    }
+  }
+}