aljaz/opencode
1
0
Fork 0
mirror of https://github.com/aljazceru/opencode.git synced 2025-12-20 09:14:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

wip: zen

Browse Source
This commit is contained in:
Frank
2025-11-18 01:27:29 -05:00
parent 6e318ba567
commit aba94c658f
4 changed files with 254 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
packages/console/app/src/routes/workspace/[id]/graph-section.module.css
View File

@@ -1,4 +1,5 @@
[data-component="empty-state"] { .root {
[data-component="empty-state"] {
padding: var(--space-20) var(--space-6); padding: var(--space-20) var(--space-6);
text-align: center; text-align: center;
border: 1px dashed var(--color-border); border: 1px dashed var(--color-border);
@@ -7,65 +8,21 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
}
[data-component="empty-state"] p { p {
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
color: var(--color-text-muted); color: var(--color-text-muted);
} }
}
[data-slot="filter-container"] { [data-slot="filter-container"] {
margin-bottom: 0; margin-bottom: 0;
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-3); gap: var(--space-3);
}
[data-slot="month-picker"] { [data-component="dropdown"] {
display: flex; [data-slot="trigger"] {
align-items: center;
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-sm);
padding: 0;
}
[data-slot="month-button"] {
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none !important;
color: var(--color-text);
cursor: pointer;
padding: var(--space-2) var(--space-3);
border-radius: var(--border-radius-xs);
transition: background-color 0.2s;
line-height: 1;
}
[data-slot="month-button"]:hover {
background-color: var(--color-bg-hover);
}
[data-slot="month-button"] svg {
display: block;
width: 16px;
height: 16px;
stroke-width: 2;
}
[data-slot="month-label"] {
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-text);
line-height: 1.5;
min-width: 140px;
text-align: center;
white-space: nowrap;
}
[data-slot="filter-container"] [data-component="dropdown"] [data-slot="trigger"] {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
background-color: var(--color-bg); background-color: var(--color-bg);
padding: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3);
@@ -83,20 +40,66 @@
border-color: var(--color-accent); border-color: var(--color-accent);
box-shadow: 0 0 0 3px var(--color-accent-alpha); box-shadow: 0 0 0 3px var(--color-accent-alpha);
} }
} }
[data-slot="filter-container"] [data-component="dropdown"] [data-slot="chevron"] { [data-slot="chevron"] {
opacity: 0.6; opacity: 0.6;
} }
[data-slot="filter-container"] [data-component="dropdown"] [data-slot="dropdown"] { [data-slot="dropdown"] {
min-width: 200px; min-width: 200px;
max-height: 300px; max-height: 300px;
overflow-y: auto; overflow-y: auto;
padding: var(--space-1); padding: var(--space-1);
} }
}
}
[data-slot="model-item"] { [data-slot="month-picker"] {
display: flex;
align-items: center;
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-sm);
padding: 0;
}
[data-slot="month-button"] {
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none !important;
color: var(--color-text);
cursor: pointer;
padding: var(--space-2) var(--space-3);
border-radius: var(--border-radius-xs);
transition: background-color 0.2s;
line-height: 1;
&:hover {
background-color: var(--color-bg-hover);
}
svg {
display: block;
width: 16px;
height: 16px;
stroke-width: 2;
}
}
[data-slot="month-label"] {
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-text);
line-height: 1.5;
min-width: 140px;
text-align: center;
white-space: nowrap;
}
[data-slot="model-item"] {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-2); gap: var(--space-2);
@@ -110,26 +113,26 @@
width: 100%; width: 100%;
text-align: left; text-align: left;
white-space: nowrap; white-space: nowrap;
}
[data-slot="model-item"]:hover { &:hover {
background: var(--color-bg-hover); background: var(--color-bg-hover);
} }
[data-slot="model-item"] span { span {
flex: 1; flex: 1;
user-select: none; user-select: none;
} }
}
[data-slot="chart-container"] { [data-slot="chart-container"] {
padding: var(--space-6); padding: var(--space-6);
background: var(--color-bg-secondary); background: var(--color-bg-secondary);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--border-radius-sm); border-radius: var(--border-radius-sm);
height: 400px; height: 400px;
} }
@media (max-width: 40rem) { @media (max-width: 40rem) {
[data-slot="chart-container"] { [data-slot="chart-container"] {
height: 300px; height: 300px;
padding: var(--space-4); padding: var(--space-4);
@@ -138,4 +141,5 @@
[data-component="empty-state"] { [data-component="empty-state"] {
height: 300px; height: 300px;
} }
}
} }

4
packages/console/app/src/routes/workspace/[id]/graph-section.tsx
View File

@@ -9,7 +9,7 @@ import { createStore } from "solid-js/store"
import { withActor } from "~/context/auth.withActor" import { withActor } from "~/context/auth.withActor"
import { Dropdown } from "~/component/dropdown" import { Dropdown } from "~/component/dropdown"
import { IconChevronLeft, IconChevronRight } from "~/component/icon" import { IconChevronLeft, IconChevronRight } from "~/component/icon"
import "./graph-section.module.css" import styles from "./graph-section.module.css"
import { import {
Chart, Chart,
BarController, BarController,
@@ -346,7 +346,7 @@ export function GraphSection() {
onCleanup(() => chartInstance?.destroy()) onCleanup(() => chartInstance?.destroy())
return ( return (
<section> <section class={styles.root}>
<div data-slot="section-title"> <div data-slot="section-title">
<h2>Cost</h2> <h2>Cost</h2>
<p>Usage costs broken down by model.</p> <p>Usage costs broken down by model.</p>

30
packages/console/app/src/routes/workspace/[id]/usage-section.module.css
View File

@@ -1,5 +1,6 @@
/* Empty state */ .root {
[data-component="empty-state"] { /* Empty state */
[data-component="empty-state"] {
padding: var(--space-20) var(--space-6); padding: var(--space-20) var(--space-6);
text-align: center; text-align: center;
border: 1px dashed var(--color-border); border: 1px dashed var(--color-border);
@@ -9,15 +10,15 @@
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
color: var(--color-text-muted); color: var(--color-text-muted);
} }
} }
/* Table container */ /* Table container */
[data-slot="usage-table"] { [data-slot="usage-table"] {
overflow-x: auto; overflow-x: auto;
} }
/* Table element */ /* Table element */
[data-slot="usage-table-element"] { [data-slot="usage-table-element"] {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
@@ -60,10 +61,10 @@
tbody tr:last-child td { tbody tr:last-child td {
border-bottom: none; border-bottom: none;
} }
} }
/* Pagination */ /* Pagination */
[data-slot="pagination"] { [data-slot="pagination"] {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: var(--space-2); gap: var(--space-2);
@@ -97,10 +98,10 @@
cursor: not-allowed; cursor: not-allowed;
} }
} }
} }
/* Mobile responsive */ /* Mobile responsive */
@media (max-width: 40rem) { @media (max-width: 40rem) {
[data-slot="usage-table-element"] { [data-slot="usage-table-element"] {
th, th,
td { td {
@@ -114,4 +115,5 @@
display: none; display: none;
} }
} }
}
} }

4
packages/console/app/src/routes/workspace/[id]/usage-section.tsx
View File

@@ -4,7 +4,7 @@ import { createMemo, For, Show, createEffect } from "solid-js"
import { formatDateUTC, formatDateForTable } from "../common" import { formatDateUTC, formatDateForTable } from "../common"
import { withActor } from "~/context/auth.withActor" import { withActor } from "~/context/auth.withActor"
import { IconChevronLeft, IconChevronRight } from "~/component/icon" import { IconChevronLeft, IconChevronRight } from "~/component/icon"
import "./usage-section.module.css" import styles from "./usage-section.module.css"
import { createStore } from "solid-js/store" import { createStore } from "solid-js/store"
const PAGE_SIZE = 50 const PAGE_SIZE = 50
@@ -47,7 +47,7 @@ export function UsageSection() {
} }
return ( return (
<section> <section class={styles.root}>
<div data-slot="section-title"> <div data-slot="section-title">
<h2>Usage History</h2> <h2>Usage History</h2>
<p>Recent API usage and costs.</p> <p>Recent API usage and costs.</p>