feat(webui): switch model presets from the composer (#5077)

webui/src/globals.css

@@ -697,6 +697,61 @@
   flex-shrink: 1;
 }
 
+.thread-composer-model-label-fade {
+  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 0.75rem), transparent);
+  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 0.75rem), transparent);
+}
+
+.thread-composer-model-badge:not([data-switching="true"]):active
+  > .composer-model-pill {
+  transform: scale(0.98);
+}
+
+@keyframes composer-model-pill-viewport-enter {
+  from {
+    transform: scale(0.9074);
+  }
+
+  to {
+    transform: scale(1);
+  }
+}
+
+.composer-model-pill-viewport {
+  transform-origin: right center;
+  animation: composer-model-pill-viewport-enter 210ms
+    cubic-bezier(0.2, 0.8, 0.2, 1) both;
+  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 4px, #000 calc(100% - 4px), transparent);
+  mask-image: linear-gradient(to bottom, transparent, #000 4px, #000 calc(100% - 4px), transparent);
+}
+
+.composer-model-pill-dock {
+  transform-origin: right center;
+  transition-property: none;
+  will-change: transform;
+}
+
+.composer-model-pill-track[data-settling="true"],
+.composer-model-pill-track[data-settling="true"] .composer-model-pill-dock {
+  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .thread-composer-model-badge:active > .composer-model-pill {
+    transform: none !important;
+  }
+
+  .composer-model-pill-track[data-settling="true"],
+  .composer-model-pill-dock {
+    transition: none;
+    will-change: auto;
+  }
+
+  .composer-model-pill-viewport {
+    animation: none;
+  }
+}
+
 @container thread-composer (max-width: 21rem) {
   .thread-composer-footer {
     column-gap: 0.25rem;
@@ -735,6 +790,10 @@
   .thread-composer-model-badge {
     width: 2rem;
     flex: none;
+  }
+
+  .thread-composer-model-badge .composer-model-pill {
+    width: 100%;
     justify-content: center;
     gap: 0;
     padding-inline: 0;