wip manage models dialog

flake.lock

@@ -2,11 +2,11 @@
   "nodes": {
     "nixpkgs": {
       "locked": {
-        "lastModified": 1766125104,
+        "lastModified": 1766314097,
-        "narHash": "sha256-l/YGrEpLromL4viUo5GmFH3K5M1j0Mb9O+LiaeCPWEM=",
+        "narHash": "sha256-laJftWbghBehazn/zxVJ8NdENVgjccsWAdAqKXhErrM=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "7d853e518814cca2a657b72eeba67ae20ebf7059",
+        "rev": "306ea70f9eb0fb4e040f8540e2deab32ed7e2055",
         "type": "github"
       },
       "original": {

packages/desktop/src/components/dialog-manage-models.tsx

@@ -35,7 +35,14 @@ export const DialogManageModels: Component = () => {
       >
         {(i) => (
           <div class="w-full flex items-center justify-between gap-x-3">
-            <span>{i.name}</span>
+            <span
+              classList={{
+                "text-gradient-default": !local.model.visible({ modelID: i.id, providerID: i.provider.id }),
+                "text-gradient-active": !!local.model.visible({ modelID: i.id, providerID: i.provider.id }),
+              }}
+            >
+              {i.name}
+            </span>
             <div onClick={(e) => e.stopPropagation()}>
               <Switch
                 checked={

packages/ui/src/components/dialog.css

@@ -4,7 +4,7 @@
   position: fixed;
   inset: 0;
   z-index: 50;
-  background-color: hsl(from var(--background-base) h s l / 0.2);
+  background-color: hsl(from var(--background-base) h s l / 0.25);
 
   /* animation: overlayHide 250ms ease 100ms forwards; */
   /**/
@@ -43,14 +43,14 @@
 
       /* padding: 8px; */
       /* padding: 8px 8px 0 8px; */
-      border: 1px solid hsl(from var(--border-base) h s l / 0.2);
+      border: 1px solid hsl(from var(--border-base) h s l / 0.1);
       border-radius: var(--radius-xl);
       background: var(--surface-raised-stronger-non-alpha);
       background-clip: padding-box;
       box-shadow:
-        0 15px 45px 0 rgba(19, 16, 16, 0.35),
+        0 15px 45px 0 rgba(19, 16, 16, 0.1),
-        0 3.35px 10.051px 0 rgba(19, 16, 16, 0.25),
+        0 3.35px 10.051px 0 rgba(19, 16, 16, 0.1),
-        0 0.998px 2.993px 0 rgba(19, 16, 16, 0.2);
+        0 0.998px 2.993px 0 rgba(19, 16, 16, 0.1);
 
       /* animation: contentHide 300ms ease-in forwards; */
       /**/

packages/ui/src/components/switch.css

@@ -1,4 +1,10 @@
 [data-component="switch"] {
+  --switch-fill: 0px;
+  --switch-scale-x: 1;
+  --switch-x: 0px;
+  --switch-focus: 0px;
+  --switch-border: var(--border-weaker-base);
+
   display: flex;
   align-items: center;
   gap: 8px;
@@ -19,36 +25,41 @@
   [data-slot="switch-control"] {
     display: inline-flex;
     align-items: center;
-    width: 28px;
+    position: relative;
-    height: 16px;
+    z-index: 1;
+    width: 32px;
+    height: 18px;
     flex-shrink: 0;
-    border-radius: 3px;
+    border-radius: 4px;
-    border: 1px solid var(--border-weak-base);
+    border: 1px solid var(--switch-border);
-    background: var(--surface-base);
+    background: var(--surface-raised-base);
+
+    box-shadow: inset 0 0 0 var(--switch-fill) var(--surface-success-strong);
     transition:
-      background-color 150ms,
+      box-shadow 180ms,
-      border-color 150ms;
+      border-color 180ms;
   }
 
   [data-slot="switch-thumb"] {
-    width: 14px;
+    width: 16px;
-    height: 14px;
+    height: 16px;
     box-sizing: content-box;
 
-    border-radius: 2px;
+    border-radius: 3px;
-    border: 1px solid var(--border-base);
+    background: var(--surface-raised-stronger);
-    background: var(--icon-invert-base);
 
     /* shadows/shadow-xs */
     box-shadow:
-      0 1px 2px -1px rgba(19, 16, 16, 0.04),
+      0 4px 8px -2px rgba(19, 16, 16, 0.1),
-      0 1px 2px 0 rgba(19, 16, 16, 0.06),
+      0 1px 2px 0 rgba(19, 16, 16, 0.2),
-      0 1px 3px 0 rgba(19, 16, 16, 0.08);
+      0 2px 4px 0 rgba(19, 16, 16, 0.1);
 
-    transform: translateX(-1px);
+    transform: translateX(var(--switch-x)) scaleX(var(--switch-scale-x));
+    transform-origin: left center;
     transition:
-      transform 150ms,
+      transform 180ms,
-      background-color 150ms;
+      background-color 180ms;
+    transition-timing-function: cubic-bezier(0.25, 0, 0.5, 1);
   }
 
   [data-slot="switch-label"] {
@@ -80,31 +91,23 @@
     letter-spacing: var(--letter-spacing-normal);
   }
 
-  &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
+  &:hover:not([data-disabled], [data-readonly]) {
-    border-color: var(--border-hover);
+    --switch-scale-x: 1.1;
-    background-color: var(--surface-hover);
   }
 
-  &:focus-within:not([data-readonly]) [data-slot="switch-control"] {
+  &:focus-within:not([data-readonly]) {
-    border-color: var(--border-focus);
+    --switch-focus: 2px;
-    box-shadow: 0 0 0 2px var(--surface-focus);
   }
 
-  &[data-checked] [data-slot="switch-control"] {
+  &[data-checked] {
-    box-sizing: border-box;
+    --switch-fill: 14px;
-    border-color: var(--icon-strong-base);
+    --switch-x: 14px;
-    background-color: var(--icon-strong-base);
+    --switch-border: var(--border-success-strong);
   }
 
   &[data-checked] [data-slot="switch-thumb"] {
-    border: none;
+    background-color: var(--surface-interactive-weak);
-    transform: translateX(12px);
+    transform-origin: right center;
-    background-color: var(--icon-invert-base);
-  }
-
-  &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
-    border-color: var(--border-hover);
-    background-color: var(--surface-hover);
   }
 
   &[data-disabled] {
@@ -112,7 +115,6 @@
   }
 
   &[data-disabled] [data-slot="switch-control"] {
-    border-color: var(--border-disabled);
     background-color: var(--surface-disabled);
   }