wip: zen style byok

packages/console/app/src/routes/workspace/[id]/model-section.module.css

@@ -150,6 +150,12 @@
     &:last-child td {
       border-bottom: none;
     }
+
+    &[data-disabled="true"] {
+      td[data-slot="model-name"] {
+        color: var(--color-text-muted);
+      }
+    }
   }
 }
 

packages/console/app/src/routes/workspace/[id]/model-section.tsx

@@ -65,7 +65,7 @@ export function ModelSection() {
                   {(modelId) => {
                     const isEnabled = createMemo(() => !modelsInfo()!.disabled.includes(modelId))
                     return (
-                      <tr data-slot="model-row">
+                      <tr data-slot="model-row" data-disabled={!isEnabled()}>
                         <td data-slot="model-name">{modelId}</td>
                         <td data-slot="model-toggle">
                           <form action={updateModel} method="post">

packages/console/app/src/routes/workspace/[id]/provider-section.module.css

@@ -32,9 +32,9 @@
         font-weight: 500;
       }
 
-      &[data-slot="provider-status"] {
+      &[data-slot="provider-key"] {
         text-align: left;
-        color: var(--color-text);
+        color: var(--color-text-secondary);
         width: 50%;
 
         [data-slot="edit-form"] {
@@ -109,10 +109,6 @@
     }
 
     tbody tr {
-      &[data-enabled="false"] {
-        opacity: 0.6;
-      }
-
       &:hover {
         [data-slot="provider-action"] [data-slot="delete-form"] {
           opacity: 1;

packages/console/app/src/routes/workspace/[id]/provider-section.tsx

@@ -84,12 +84,12 @@ function ProviderRow(props: { provider: Provider }) {
   }
 
   return (
-    <tr data-slot="provider-row" data-enabled={!!providerData()}>
+    <tr data-slot="provider-row">
       <td data-slot="provider-name">{props.provider.name}</td>
-      <td data-slot="provider-status">
+      <td data-slot="provider-key">
         <Show
           when={store.editing}
-          fallback={<span>{providerData() ? maskCredentials(providerData()!.credentials) : "Not Configured"}</span>}
+          fallback={<span>{providerData() ? maskCredentials(providerData()!.credentials) : "--"}</span>}
         >
           <form id={`provider-form-${props.provider.key}`} action={saveProvider} method="post" data-slot="edit-form">
             <div data-slot="input-wrapper">