From 637c7511a2b62c9e28808a0079ea9e451dab4c6f Mon Sep 17 00:00:00 2001
From: pewdiepie-archdaemon <pewdiepie-archdaemon@users.noreply.github.com>
Date: Tue, 2 Jun 2026 06:50:22 +0900
Subject: [PATCH] Add model favorite dot feedback

---
 static/js/modelPicker.js |  3 +++
 static/style.css         | 20 +++++++++++++++++---
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/static/js/modelPicker.js b/static/js/modelPicker.js
index 6bf4c83..96e7c54 100644
--- a/static/js/modelPicker.js
+++ b/static/js/modelPicker.js
@@ -294,6 +294,9 @@ function _initModelPickerDropdown() {
         e.stopPropagation();
         const nowFav = _toggleFavorite(m.mid);
         _setFavState(nowFav);
+        favDot.classList.remove('pulse');
+        void favDot.offsetWidth;
+        favDot.classList.add('pulse');
         // Keep our in-memory copy aligned so a follow-up re-render is correct.
         const idx = favs.indexOf(m.mid);
         if (nowFav && idx < 0) favs.push(m.mid);
diff --git a/static/style.css b/static/style.css
index f1a3c0e..1eb8ab2 100644
--- a/static/style.css
+++ b/static/style.css
@@ -2750,16 +2750,18 @@ body.bg-pattern-sparkles {
       margin: -5px -8px -5px 8px;
       padding: 0;
       border: none;
-      background: none;
+      border-radius: 999px;
+      background: transparent;
       cursor: pointer;
       color: color-mix(in srgb, var(--fg) 22%, transparent);
       font-family: inherit;
       font-size: 13px;
       line-height: 1;
-      transition: color 0.15s ease, opacity 0.15s ease, transform 0.12s ease;
+      transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, opacity 0.15s ease, transform 0.12s ease;
       -webkit-tap-highlight-color: transparent;
     }
     .model-picker-list .mp-fav-dot:hover {
+      background: color-mix(in srgb, var(--fg) 8%, transparent);
       color: color-mix(in srgb, var(--fg) 68%, transparent);
       transform: scale(1.15);
     }
@@ -2768,12 +2770,24 @@ body.bg-pattern-sparkles {
       color: color-mix(in srgb, var(--fg) 68%, transparent);
     }
     .model-picker-list .mp-fav-dot.active {
+      background: color-mix(in srgb, var(--accent, var(--red)) 13%, transparent);
+      box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, var(--red)) 16%, transparent),
+                  0 0 12px color-mix(in srgb, var(--accent, var(--red)) 20%, transparent);
       color: var(--accent, var(--red));
       opacity: 1;
     }
     .model-picker-list .mp-fav-dot.active:hover {
+      background: color-mix(in srgb, var(--accent, var(--red)) 18%, transparent);
       color: var(--accent, var(--red));
-      opacity: 0.72;
+      opacity: 0.88;
+    }
+    .model-picker-list .mp-fav-dot.pulse {
+      animation: mpFavPulse 0.28s ease-out;
+    }
+    @keyframes mpFavPulse {
+      0% { transform: scale(0.92); }
+      65% { transform: scale(1.22); }
+      100% { transform: scale(1); }
     }
     /* First-run hint when a large catalog has no Recent/Favorites yet. */
     .model-picker-list .mp-empty-hint {