From 48e01cfee793a9cfc4d17794abf808f71a35c888 Mon Sep 17 00:00:00 2001 From: Dax Raad Date: Sat, 30 Aug 2025 01:36:25 -0400 Subject: ignore: sync --- cloud/app/src/routes/workspace.css | 66 ++++ cloud/app/src/routes/workspace.tsx | 22 +- cloud/app/src/routes/workspace/[id].css | 477 +++++++++++++++++++++++++++ cloud/app/src/routes/workspace/[id].tsx | 6 +- cloud/app/src/routes/workspace/index.css | 477 --------------------------- cloud/app/src/routes/workspace/workspace.css | 63 ---- 6 files changed, 565 insertions(+), 546 deletions(-) create mode 100644 cloud/app/src/routes/workspace.css create mode 100644 cloud/app/src/routes/workspace/[id].css delete mode 100644 cloud/app/src/routes/workspace/index.css delete mode 100644 cloud/app/src/routes/workspace/workspace.css (limited to 'cloud/app/src') diff --git a/cloud/app/src/routes/workspace.css b/cloud/app/src/routes/workspace.css new file mode 100644 index 000000000..e18b410ee --- /dev/null +++ b/cloud/app/src/routes/workspace.css @@ -0,0 +1,66 @@ +[data-page="workspace"] { + line-height: 1; + + @media (max-width: 30rem) { + padding: var(--space-4); + gap: var(--space-5); + } + + /* 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: 0 var(--space-4); + margin: calc(-1 * var(--space-4)); + margin-bottom: var(--space-5); + } + } + + [data-slot="header-brand"] { + flex: 0 0 auto; + padding-top: 4px; + + svg { + width: 138px; + } + + [data-component="site-title"] { + font-size: var(--font-size-lg); + font-weight: 600; + color: var(--color-text); + text-decoration: none; + letter-spacing: -0.02em; + } + } + + [data-slot="header-actions"] { + display: flex; + gap: var(--space-4); + align-items: center; + font-size: var(--font-size-sm); + + span { + color: var(--color-text-muted); + } + + a, + button { + border: none; + padding: 0; + color: var(--color-text); + text-decoration: underline; + text-underline-offset: var(--space-0-75); + text-decoration-thickness: 1px; + text-transform: uppercase; + } + } +} diff --git a/cloud/app/src/routes/workspace.tsx b/cloud/app/src/routes/workspace.tsx index 864fab4d3..920276e8c 100644 --- a/cloud/app/src/routes/workspace.tsx +++ b/cloud/app/src/routes/workspace.tsx @@ -1,6 +1,20 @@ +import { useAuthSession } from "~/context/auth.session" import { IconLogo } from "../component/icon" -import "./workspace/workspace.css" -import { RouteSectionProps } from "@solidjs/router" +import "./workspace.css" +import { action, redirect, RouteSectionProps } from "@solidjs/router" + +const logout = action(async () => { + "use server" + const auth = await useAuthSession() + const current = auth.data.current + if (current) + await auth.update((val) => { + delete val.account[current] + return val + }) + + return redirect("/") +}) export default function WorkspaceLayout(props: RouteSectionProps) { return ( @@ -13,7 +27,9 @@ export default function WorkspaceLayout(props: RouteSectionProps) {
name@example.com - Logout +
+ +
{props.children}
diff --git a/cloud/app/src/routes/workspace/[id].css b/cloud/app/src/routes/workspace/[id].css new file mode 100644 index 000000000..887469e33 --- /dev/null +++ b/cloud/app/src/routes/workspace/[id].css @@ -0,0 +1,477 @@ +/* Root container */ +[data-slot="root"] { + max-width: 64rem; + padding: var(--space-10) var(--space-4); + margin: 0 auto; + width: 100%; + display: flex; + flex-direction: column; + gap: var(--space-10); + + [data-slot="sections"] { + display: flex; + flex-direction: column; + gap: var(--space-16); + + section { + display: flex; + flex-direction: column; + gap: var(--space-6); + } + section:not(:last-child) { + border-bottom: 1px solid var(--color-border); + padding-bottom: var(--space-16); + } + } +} + +/* 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; + text-transform: uppercase; + cursor: pointer; + transition: all 0.15s ease; + + &:hover { + background-color: var(--color-surface-hover); + border-color: var(--color-accent); + } + + &:active { + transform: translateY(1px); + } + + &:disabled { + opacity: 0.5; + cursor: not-allowed; + + &:hover { + background-color: var(--color-bg); + border-color: var(--color-border); + transform: none; + } + } + + &[color="primary"] { + background-color: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-primary-text); + + &:hover { + background-color: var(--color-primary-hover); + border-color: var(--color-primary-hover); + } + } + + &[color="ghost"] { + background-color: transparent; + border-color: transparent; + color: var(--color-text-muted); + + &:hover { + background-color: var(--color-surface-hover); + border-color: var(--color-border); + color: var(--color-text); + } + } +} + +a { + color: var(--color-text); + text-decoration: underline; + text-underline-offset: var(--space-0-75); + text-decoration-thickness: 1px; +} + +[data-slot="empty-state"] { + padding: var(--space-20) var(--space-6); + text-align: center; + border: 1px dashed var(--color-border); + border-radius: var(--border-radius-sm); + display: flex; + flex-direction: column; + gap: var(--space-2); + + p { + font-size: var(--font-size-sm); + color: var(--color-text-muted); + margin: 0; + } +} + +/* Title section */ +[data-slot="title-section"] { + display: flex; + flex-direction: column; + gap: var(--space-2); + padding-bottom: var(--space-8); + border-bottom: 1px solid var(--color-border); + + h1 { + font-size: var(--font-size-2xl); + font-weight: 500; + line-height: 1.2; + letter-spacing: -0.03125rem; + margin: 0; + text-transform: uppercase; + + @media (max-width: 30rem) { + font-size: var(--font-size-xl); + line-height: 1.25; + } + } + + p { + font-size: var(--font-size-md); + color: var(--color-text-muted); + + a { + color: var(--color-text-muted); + } + } +} + +/* Section titles */ +[data-slot="section-title"] { + display: flex; + flex-direction: column; + gap: var(--space-1); + + h2 { + font-size: var(--font-size-md); + font-weight: 600; + line-height: 1.2; + letter-spacing: -0.03125rem; + margin: 0; + color: var(--color-text-secondary); + text-transform: uppercase; + + @media (max-width: 30rem) { + font-size: var(--font-size-lg); + line-height: 1.25; + } + } + + p { + font-size: var(--font-size-sm); + color: var(--color-text-muted); + } +} + +/* API Keys Section */ +[data-slot="api-keys-section"] { + [data-slot="create-form"] { + display: flex; + flex-direction: column; + gap: var(--space-3); + padding: var(--space-4); + background-color: var(--color-bg-surface); + border: 1px solid var(--color-border); + border-radius: var(--border-radius-sm); + max-width: 32rem; + + input { + padding: var(--space-2) 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-mono); + + &:focus { + outline: none; + border-color: var(--color-accent); + } + + &::placeholder { + color: var(--color-text-disabled); + } + } + + [data-slot="form-actions"] { + display: flex; + gap: var(--space-2); + justify-content: flex-end; + } + } + + [data-slot="api-keys-table"] { + overflow-x: auto; + } + + [data-slot="api-keys-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="key-name"] { + color: var(--color-text); + font-family: var(--font-sans); + font-weight: 500; + } + + &[data-slot="key-value"] { + font-family: var(--font-mono); + + div { + cursor: pointer; + display: flex; + align-items: center; + gap: var(--space-2); + } + } + + &[data-slot="key-date"] { + color: var(--color-text); + } + + &[data-slot="key-actions"] { + font-family: var(--font-sans); + } + } + + tbody tr { + &:last-child td { + border-bottom: none; + } + } + + @media (max-width: 40rem) { + th, + td { + padding: var(--space-2) var(--space-3); + font-size: var(--font-size-xs); + } + + th { + &:nth-child(3) /* Date */ { + display: none; + } + } + + td { + &:nth-child(3) /* Date */ { + display: none; + } + } + } + } +} + +/* Balance Section */ +[data-slot="balance-section"] { + [data-slot="balance"] { + display: flex; + flex-direction: column; + gap: var(--space-3); + padding: var(--space-4); + border: 1px solid var(--color-border); + border-radius: var(--border-radius-sm); + min-width: 14.5rem; + width: fit-content; + + [data-slot="amount"] { + padding: var(--space-3-5) var(--space-4); + background-color: var(--color-bg-surface); + border-radius: var(--border-radius-sm); + display: flex; + align-items: baseline; + gap: var(--space-1); + justify-content: flex-end; + + &.danger { + [data-slot="value"] { + color: var(--color-danger); + } + } + + [data-slot="currency"] { + position: relative; + bottom: 2px; + font-size: var(--font-size-lg); + color: var(--color-text-muted); + font-weight: 400; + } + + [data-slot="value"] { + font-size: var(--font-size-3xl); + font-weight: 500; + color: var(--color-text); + } + } + } +} + +/* Payments Section */ +[data-slot="payments-section"] { + [data-slot="payments-table"] { + overflow-x: auto; + } + + [data-slot="payments-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="payment-date"] { + color: var(--color-text); + } + + &[data-slot="payment-id"] { + font-family: var(--font-mono); + font-weight: 400; + color: var(--color-text-muted); + max-width: 200px; + word-break: break-word; + } + + &[data-slot="payment-amount"] { + color: var(--color-text); + } + } + + tbody tr { + &:last-child td { + border-bottom: none; + } + } + + @media (max-width: 40rem) { + th, + td { + padding: var(--space-2) var(--space-3); + font-size: var(--font-size-xs); + } + + th { + &:nth-child(2) /* Payment ID */ { + display: none; + } + } + + td { + &:nth-child(2) /* Payment ID */ { + display: none; + } + } + } + } +} + +/* Usage Section */ +[data-slot="usage-section"] { + [data-slot="usage-table"] { + overflow-x: auto; + } + + [data-slot="usage-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="usage-date"] { + color: var(--color-text); + } + + &[data-slot="usage-model"] { + font-family: var(--font-sans); + font-weight: 400; + color: var(--color-text-secondary); + max-width: 200px; + word-break: break-word; + } + + &[data-slot="usage-cost"] { + color: var(--color-text); + } + } + + tbody tr { + &:last-child td { + border-bottom: none; + } + } + + @media (max-width: 40rem) { + th, + td { + padding: var(--space-2) var(--space-3); + font-size: var(--font-size-xs); + } + + th { + &:nth-child(2) /* Model */ { + display: none; + } + } + + td { + &:nth-child(2) /* Model */ { + display: none; + } + } + } + } +} diff --git a/cloud/app/src/routes/workspace/[id].tsx b/cloud/app/src/routes/workspace/[id].tsx index 81013dc92..416128867 100644 --- a/cloud/app/src/routes/workspace/[id].tsx +++ b/cloud/app/src/routes/workspace/[id].tsx @@ -1,11 +1,11 @@ import { Billing } from "@opencode/cloud-core/billing.js" import { Key } from "@opencode/cloud-core/key.js" -import { action, createAsync, revalidate, query, useAction, useSubmission, json } from "@solidjs/router" -import { createEffect, createSignal, For, onMount, Show } from "solid-js" +import { action, createAsync, query, useAction, useSubmission, json } from "@solidjs/router" +import { createSignal, For, onMount, Show } from "solid-js" import { getActor } from "~/context/auth" import { withActor } from "~/context/auth.withActor" import { IconCopy, IconCheck } from "~/component/icon" -import "./index.css" +import "./[id].css" import { User } from "@opencode/cloud-core/user.js" import { Actor } from "@opencode/cloud-core/actor.js" diff --git a/cloud/app/src/routes/workspace/index.css b/cloud/app/src/routes/workspace/index.css deleted file mode 100644 index 887469e33..000000000 --- a/cloud/app/src/routes/workspace/index.css +++ /dev/null @@ -1,477 +0,0 @@ -/* Root container */ -[data-slot="root"] { - max-width: 64rem; - padding: var(--space-10) var(--space-4); - margin: 0 auto; - width: 100%; - display: flex; - flex-direction: column; - gap: var(--space-10); - - [data-slot="sections"] { - display: flex; - flex-direction: column; - gap: var(--space-16); - - section { - display: flex; - flex-direction: column; - gap: var(--space-6); - } - section:not(:last-child) { - border-bottom: 1px solid var(--color-border); - padding-bottom: var(--space-16); - } - } -} - -/* 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; - text-transform: uppercase; - cursor: pointer; - transition: all 0.15s ease; - - &:hover { - background-color: var(--color-surface-hover); - border-color: var(--color-accent); - } - - &:active { - transform: translateY(1px); - } - - &:disabled { - opacity: 0.5; - cursor: not-allowed; - - &:hover { - background-color: var(--color-bg); - border-color: var(--color-border); - transform: none; - } - } - - &[color="primary"] { - background-color: var(--color-primary); - border-color: var(--color-primary); - color: var(--color-primary-text); - - &:hover { - background-color: var(--color-primary-hover); - border-color: var(--color-primary-hover); - } - } - - &[color="ghost"] { - background-color: transparent; - border-color: transparent; - color: var(--color-text-muted); - - &:hover { - background-color: var(--color-surface-hover); - border-color: var(--color-border); - color: var(--color-text); - } - } -} - -a { - color: var(--color-text); - text-decoration: underline; - text-underline-offset: var(--space-0-75); - text-decoration-thickness: 1px; -} - -[data-slot="empty-state"] { - padding: var(--space-20) var(--space-6); - text-align: center; - border: 1px dashed var(--color-border); - border-radius: var(--border-radius-sm); - display: flex; - flex-direction: column; - gap: var(--space-2); - - p { - font-size: var(--font-size-sm); - color: var(--color-text-muted); - margin: 0; - } -} - -/* Title section */ -[data-slot="title-section"] { - display: flex; - flex-direction: column; - gap: var(--space-2); - padding-bottom: var(--space-8); - border-bottom: 1px solid var(--color-border); - - h1 { - font-size: var(--font-size-2xl); - font-weight: 500; - line-height: 1.2; - letter-spacing: -0.03125rem; - margin: 0; - text-transform: uppercase; - - @media (max-width: 30rem) { - font-size: var(--font-size-xl); - line-height: 1.25; - } - } - - p { - font-size: var(--font-size-md); - color: var(--color-text-muted); - - a { - color: var(--color-text-muted); - } - } -} - -/* Section titles */ -[data-slot="section-title"] { - display: flex; - flex-direction: column; - gap: var(--space-1); - - h2 { - font-size: var(--font-size-md); - font-weight: 600; - line-height: 1.2; - letter-spacing: -0.03125rem; - margin: 0; - color: var(--color-text-secondary); - text-transform: uppercase; - - @media (max-width: 30rem) { - font-size: var(--font-size-lg); - line-height: 1.25; - } - } - - p { - font-size: var(--font-size-sm); - color: var(--color-text-muted); - } -} - -/* API Keys Section */ -[data-slot="api-keys-section"] { - [data-slot="create-form"] { - display: flex; - flex-direction: column; - gap: var(--space-3); - padding: var(--space-4); - background-color: var(--color-bg-surface); - border: 1px solid var(--color-border); - border-radius: var(--border-radius-sm); - max-width: 32rem; - - input { - padding: var(--space-2) 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-mono); - - &:focus { - outline: none; - border-color: var(--color-accent); - } - - &::placeholder { - color: var(--color-text-disabled); - } - } - - [data-slot="form-actions"] { - display: flex; - gap: var(--space-2); - justify-content: flex-end; - } - } - - [data-slot="api-keys-table"] { - overflow-x: auto; - } - - [data-slot="api-keys-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="key-name"] { - color: var(--color-text); - font-family: var(--font-sans); - font-weight: 500; - } - - &[data-slot="key-value"] { - font-family: var(--font-mono); - - div { - cursor: pointer; - display: flex; - align-items: center; - gap: var(--space-2); - } - } - - &[data-slot="key-date"] { - color: var(--color-text); - } - - &[data-slot="key-actions"] { - font-family: var(--font-sans); - } - } - - tbody tr { - &:last-child td { - border-bottom: none; - } - } - - @media (max-width: 40rem) { - th, - td { - padding: var(--space-2) var(--space-3); - font-size: var(--font-size-xs); - } - - th { - &:nth-child(3) /* Date */ { - display: none; - } - } - - td { - &:nth-child(3) /* Date */ { - display: none; - } - } - } - } -} - -/* Balance Section */ -[data-slot="balance-section"] { - [data-slot="balance"] { - display: flex; - flex-direction: column; - gap: var(--space-3); - padding: var(--space-4); - border: 1px solid var(--color-border); - border-radius: var(--border-radius-sm); - min-width: 14.5rem; - width: fit-content; - - [data-slot="amount"] { - padding: var(--space-3-5) var(--space-4); - background-color: var(--color-bg-surface); - border-radius: var(--border-radius-sm); - display: flex; - align-items: baseline; - gap: var(--space-1); - justify-content: flex-end; - - &.danger { - [data-slot="value"] { - color: var(--color-danger); - } - } - - [data-slot="currency"] { - position: relative; - bottom: 2px; - font-size: var(--font-size-lg); - color: var(--color-text-muted); - font-weight: 400; - } - - [data-slot="value"] { - font-size: var(--font-size-3xl); - font-weight: 500; - color: var(--color-text); - } - } - } -} - -/* Payments Section */ -[data-slot="payments-section"] { - [data-slot="payments-table"] { - overflow-x: auto; - } - - [data-slot="payments-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="payment-date"] { - color: var(--color-text); - } - - &[data-slot="payment-id"] { - font-family: var(--font-mono); - font-weight: 400; - color: var(--color-text-muted); - max-width: 200px; - word-break: break-word; - } - - &[data-slot="payment-amount"] { - color: var(--color-text); - } - } - - tbody tr { - &:last-child td { - border-bottom: none; - } - } - - @media (max-width: 40rem) { - th, - td { - padding: var(--space-2) var(--space-3); - font-size: var(--font-size-xs); - } - - th { - &:nth-child(2) /* Payment ID */ { - display: none; - } - } - - td { - &:nth-child(2) /* Payment ID */ { - display: none; - } - } - } - } -} - -/* Usage Section */ -[data-slot="usage-section"] { - [data-slot="usage-table"] { - overflow-x: auto; - } - - [data-slot="usage-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="usage-date"] { - color: var(--color-text); - } - - &[data-slot="usage-model"] { - font-family: var(--font-sans); - font-weight: 400; - color: var(--color-text-secondary); - max-width: 200px; - word-break: break-word; - } - - &[data-slot="usage-cost"] { - color: var(--color-text); - } - } - - tbody tr { - &:last-child td { - border-bottom: none; - } - } - - @media (max-width: 40rem) { - th, - td { - padding: var(--space-2) var(--space-3); - font-size: var(--font-size-xs); - } - - th { - &:nth-child(2) /* Model */ { - display: none; - } - } - - td { - &:nth-child(2) /* Model */ { - display: none; - } - } - } - } -} diff --git a/cloud/app/src/routes/workspace/workspace.css b/cloud/app/src/routes/workspace/workspace.css deleted file mode 100644 index 3390fbea6..000000000 --- a/cloud/app/src/routes/workspace/workspace.css +++ /dev/null @@ -1,63 +0,0 @@ -[data-page="workspace"] { - line-height: 1; - - @media (max-width: 30rem) { - padding: var(--space-4); - gap: var(--space-5); - } - - /* 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: 0 var(--space-4); - margin: calc(-1 * var(--space-4)); - margin-bottom: var(--space-5); - } - } - - [data-slot="header-brand"] { - flex: 0 0 auto; - padding-top: 4px; - - svg { - width: 138px; - } - - [data-component="site-title"] { - font-size: var(--font-size-lg); - font-weight: 600; - color: var(--color-text); - text-decoration: none; - letter-spacing: -0.02em; - } - } - - [data-slot="header-actions"] { - display: flex; - gap: var(--space-4); - align-items: center; - font-size: var(--font-size-sm); - - span { - color: var(--color-text-muted); - } - - a { - color: var(--color-text); - text-decoration: underline; - text-underline-offset: var(--space-0-75); - text-decoration-thickness: 1px; - text-transform: uppercase; - } - } -} -- cgit v1.2.3