hoborg/opencode
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

ignore: cloud styles

Browse Source
This commit is contained in:
Jay V
2025-08-30 15:05:18 -04:00
parent c676f12306
commit 8714f23509
2 changed files with 408 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
cloud/app/src/routes/workspace/[id].css
View File

@@ -23,10 +23,9 @@
padding-bottom: var(--space-16);
}
}
}
/* Common elements */
button {
/* Common elements */
button {
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-sm);
@@ -59,7 +58,7 @@ button {
}
}
&[color="primary"] {
&[data-color="primary"] {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-primary-text);
@@ -70,7 +69,7 @@ button {
}
}
&[color="ghost"] {
&[data-color="ghost"] {
background-color: transparent;
border-color: transparent;
color: var(--color-text-muted);
@@ -81,16 +80,16 @@ button {
color: var(--color-text);
}
}
}
}
a {
a {
color: var(--color-text);
text-decoration: underline;
text-underline-offset: var(--space-0-75);
text-decoration-thickness: 1px;
}
}
[data-slot="empty-state"] {
[data-slot="empty-state"] {
padding: var(--space-20) var(--space-6);
text-align: center;
border: 1px dashed var(--color-border);
@@ -104,10 +103,10 @@ a {
color: var(--color-text-muted);
margin: 0;
}
}
}
/* Title section */
[data-slot="title-section"] {
/* Title section */
[data-slot="title-section"] {
display: flex;
flex-direction: column;
gap: var(--space-2);
@@ -136,10 +135,10 @@ a {
color: var(--color-text-muted);
}
}
}
}
/* Section titles */
[data-slot="section-title"] {
/* Section titles */
[data-slot="section-title"] {
display: flex;
flex-direction: column;
gap: var(--space-1);
@@ -163,19 +162,17 @@ a {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
}
}
/* API Keys Section */
[data-slot="api-keys-section"] {
/* 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);
@@ -282,10 +279,10 @@ a {
}
}
}
}
}
/* Balance Section */
[data-slot="balance-section"] {
/* Balance Section */
[data-slot="balance-section"] {
[data-slot="balance"] {
display: flex;
flex-direction: column;
@@ -326,10 +323,10 @@ a {
}
}
}
}
}
/* Payments Section */
[data-slot="payments-section"] {
/* Payments Section */
[data-slot="payments-section"] {
[data-slot="payments-table"] {
overflow-x: auto;
}
@@ -400,10 +397,10 @@ a {
}
}
}
}
}
/* Usage Section */
[data-slot="usage-section"] {
/* Usage Section */
[data-slot="usage-section"] {
[data-slot="usage-table"] {
overflow-x: auto;
}
@@ -474,4 +471,5 @@ a {
}
}
}
}
}

38
cloud/app/src/routes/workspace/[id].tsx
View File

@@ -168,7 +168,7 @@ const dummyApiKeyData = [
},
]
export default function () {
export default function() {
const actor = createAsync(() => getActor())
onMount(() => {
console.log("MOUNTED", actor())
@@ -292,15 +292,6 @@ export default function () {
</section>
<div data-slot="sections">
{/* Actor Section */}
<section data-slot="actor-section">
<div data-slot="section-title">
<h2>Actor</h2>
<p>Current authenticated user information and session details.</p>
</div>
<div>{JSON.stringify(actor())}</div>
</section>
{/* API Keys Section */}
<section data-slot="api-keys-section">
<div data-slot="section-title">
@@ -321,14 +312,7 @@ export default function () {
/>
<div data-slot="form-actions">
<button
color="primary"
disabled={createKeySubmission.pending || !keyName().trim()}
onClick={handleCreateKey}
>
{createKeySubmission.pending ? "Creating..." : "Create"}
</button>
<button
color="ghost"
data-color="ghost"
onClick={() => {
setShowCreateForm(false)
setKeyName("")
@@ -336,12 +320,19 @@ export default function () {
>
Cancel
</button>
<button
data-color="primary"
disabled={createKeySubmission.pending || !keyName().trim()}
onClick={handleCreateKey}
>
{createKeySubmission.pending ? "Creating..." : "Create"}
</button>
</div>
</div>
}
>
<button
color="primary"
data-color="primary"
onClick={() => {
console.log("clicked")
setShowCreateForm(true)
@@ -351,8 +342,9 @@ export default function () {
</button>
</Show>
<div data-slot="api-keys-table">
{/* when={keys()?.length */}
<Show
when={keys()?.length}
when={dummyApiKeyData.length > 0}
fallback={
<div data-slot="empty-state">
<p>Create an opencode Gateway API key</p>
@@ -369,7 +361,7 @@ export default function () {
</tr>
</thead>
<tbody>
<For each={keys()!}>
<For each={dummyApiKeyData}>
{/* Real data: keys() */}
{(key) => (
<tr>
@@ -389,7 +381,7 @@ export default function () {
{formatDateForTable(key.timeCreated)}
</td>
<td data-slot="key-actions">
<button color="ghost" onClick={() => handleDeleteKey(key.id)} title="Delete API key">
<button data-color="ghost" onClick={() => handleDeleteKey(key.id)} title="Delete API key">
Delete
</button>
</td>
@@ -426,7 +418,7 @@ export default function () {
})()}
</span>
</div>
<button color="primary" disabled={createCheckoutUrlSubmission.pending} onClick={handleBuyCredits}>
<button data-color="primary" disabled={createCheckoutUrlSubmission.pending} onClick={handleBuyCredits}>
{createCheckoutUrlSubmission.pending ? "Loading..." : "Buy Credits"}
</button>
</div>