✨ Highlight first found font in font list when searching [Taiga #3204]

This enhancement highlights the first found font in the font list when searching, and allows pressing Enter to select it, for a more intuitive font selection experience.

See [Taiga #3204](https://tree.taiga.io/project/penpot/issue/3204).

CHANGES.md

@@ -20,6 +20,7 @@
 - Provide CSS `mix-blend-mode` property in code editor when present on shape [Taiga #11282](https://tree.taiga.io/project/penpot/issue/11282) 
 - Add the option to import tokens in a .zip file. [Taiga #11378](https://tree.taiga.io/project/penpot/us/11378)
 - New typography token type - font size token [Taiga #10938](https://tree.taiga.io/project/penpot/us/10938)
+- Highlight first found font in the font list when searching, and allow Enter to select it. [Taiga #3204](https://tree.taiga.io/project/penpot/issue/3204)
 
 ### :bug: Bugs fixed
 - Copying font size does not copy the unit [Taiga #11143](https://tree.taiga.io/project/penpot/issue/11143)

frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs

@@ -112,9 +112,14 @@
         recent-fonts (mf/with-memo [state recent-fonts]
                        (filter-fonts state recent-fonts))
 
-
         full-size?   (boolean (and full-size show-recent))
 
+        ;; --- NEW: auto-select first font on search ---
+        _auto-select-first
+        (mf/with-effect [(:term state) fonts]
+          (when (and (seq fonts) (not (str/blank? (:term state))))
+            (reset! selected (first fonts))))
+
         select-next
         (mf/use-fn
          (mf/deps fonts)
@@ -133,13 +138,13 @@
 
         on-key-down
         (mf/use-fn
-         (mf/deps fonts)
+         (mf/deps fonts selected)
          (fn [event]
            (cond
              (kbd/up-arrow? event)   (select-prev event)
              (kbd/down-arrow? event) (select-next event)
              (kbd/esc? event)        (on-close)
-             (kbd/enter? event)      (on-close)
+             (kbd/enter? event)      (do (on-select @selected) (on-close))
              :else                   (dom/focus! (mf/ref-val input)))))
 
         on-filter-change