aljaz/opencode
1
0
Fork 0
mirror of https://github.com/aljazceru/opencode.git synced 2025-12-19 00:34:23 +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);
text-align: center;
border: 1px dashed var(--color-border);
@@ -7,65 +8,21 @@
display: flex;
align-items: center;
justify-content: center;
}
[data-component="empty-state"] p {
p {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
}
}
[data-slot="filter-container"] {
[data-slot="filter-container"] {
margin-bottom: 0;
display: flex;
align-items: center;
gap: var(--space-3);
}
[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;
}
[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"] {
[data-component="dropdown"] {
[data-slot="trigger"] {
border: 1px solid var(--color-border);
background-color: var(--color-bg);
padding: var(--space-2) var(--space-3);
@@ -83,20 +40,66 @@
border-color: var(--color-accent);
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;
}
}
[data-slot="filter-container"] [data-component="dropdown"] [data-slot="dropdown"] {
[data-slot="dropdown"] {
min-width: 200px;
max-height: 300px;
overflow-y: auto;
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;
align-items: center;
gap: var(--space-2);
@@ -110,26 +113,26 @@
width: 100%;
text-align: left;
white-space: nowrap;
}
[data-slot="model-item"]:hover {
&:hover {
background: var(--color-bg-hover);
}
}
[data-slot="model-item"] span {
span {
flex: 1;
user-select: none;
}
}
}
[data-slot="chart-container"] {
[data-slot="chart-container"] {
padding: var(--space-6);
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-sm);
height: 400px;
}
}
@media (max-width: 40rem) {
@media (max-width: 40rem) {
[data-slot="chart-container"] {
height: 300px;
padding: var(--space-4);
@@ -138,4 +141,5 @@
[data-component="empty-state"] {
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 { Dropdown } from "~/component/dropdown"
import { IconChevronLeft, IconChevronRight } from "~/component/icon"
import "./graph-section.module.css"
import styles from "./graph-section.module.css"
import {
Chart,
BarController,
@@ -346,7 +346,7 @@ export function GraphSection() {
onCleanup(() => chartInstance?.destroy())
return (
<section>
<section class={styles.root}>
<div data-slot="section-title">
<h2>Cost</h2>
<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 */
[data-component="empty-state"] {
.root {
/* Empty state */
[data-component="empty-state"] {
padding: var(--space-20) var(--space-6);
text-align: center;
border: 1px dashed var(--color-border);
@@ -9,15 +10,15 @@
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
}
}
/* Table container */
[data-slot="usage-table"] {
/* Table container */
[data-slot="usage-table"] {
overflow-x: auto;
}
}
/* Table element */
[data-slot="usage-table-element"] {
/* Table element */
[data-slot="usage-table-element"] {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size-sm);
@@ -60,10 +61,10 @@
tbody tr:last-child td {
border-bottom: none;
}
}
}
/* Pagination */
[data-slot="pagination"] {
/* Pagination */
[data-slot="pagination"] {
display: flex;
justify-content: flex-end;
gap: var(--space-2);
@@ -97,10 +98,10 @@
cursor: not-allowed;
}
}
}
}
/* Mobile responsive */
@media (max-width: 40rem) {
/* Mobile responsive */
@media (max-width: 40rem) {
[data-slot="usage-table-element"] {
th,
td {
@@ -114,4 +115,5 @@
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 { withActor } from "~/context/auth.withActor"
import { IconChevronLeft, IconChevronRight } from "~/component/icon"
import "./usage-section.module.css"
import styles from "./usage-section.module.css"
import { createStore } from "solid-js/store"
const PAGE_SIZE = 50
@@ -47,7 +47,7 @@ export function UsageSection() {
}
return (
<section>
<section class={styles.root}>
<div data-slot="section-title">
<h2>Usage History</h2>
<p>Recent API usage and costs.</p>