ignore: cloud styles

cloud/app/src/routes/workspace/[id].css

@@ -23,10 +23,9 @@
       padding-bottom: var(--space-16);
     }
   }
-}
 
-/* Common elements */
+  /* Common elements */
-button {
+  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 */
+  /* Title section */
-[data-slot="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 */
+  /* Section titles */
-[data-slot="section-title"] {
+  [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 */
+  /* API Keys Section */
-[data-slot="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 */
+  /* Balance Section */
-[data-slot="balance-section"] {
+  [data-slot="balance-section"] {
     [data-slot="balance"] {
       display: flex;
       flex-direction: column;
@@ -326,10 +323,10 @@ a {
         }
       }
     }
-}
+  }
 
-/* Payments Section */
+  /* Payments Section */
-[data-slot="payments-section"] {
+  [data-slot="payments-section"] {
     [data-slot="payments-table"] {
       overflow-x: auto;
     }
@@ -400,10 +397,10 @@ a {
         }
       }
     }
-}
+  }
 
-/* Usage Section */
+  /* Usage Section */
-[data-slot="usage-section"] {
+  [data-slot="usage-section"] {
     [data-slot="usage-table"] {
       overflow-x: auto;
     }
@@ -474,4 +471,5 @@ a {
         }
       }
     }
+  }
 }

cloud/app/src/routes/workspace/[id].tsx

@@ -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"
+                    data-color="ghost"
-                    disabled={createKeySubmission.pending || !keyName().trim()}
-                    onClick={handleCreateKey}
-                  >
-                    {createKeySubmission.pending ? "Creating..." : "Create"}
-                  </button>
-                  <button
-                    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>