✨ Add recent used fonts in font selection widget

CHANGES.md

@@ -6,6 +6,7 @@
 
 ### :sparkles: New features
 
+- Add recent used fonts in font selection widget [Taiga #1381](https://tree.taiga.io/project/penpot/us/1381)
 - Allow to align items relative to groups [Taiga #2533](https://tree.taiga.io/project/penpot/us/2533)
 - Scroll bars [Taiga #2550](https://tree.taiga.io/project/penpot/task/2550)
 - Add select layer option to context menu [Taiga #2474](https://tree.taiga.io/project/penpot/us/2474)

frontend/resources/styles/main/partials/sidebar-element-options.scss

@@ -1168,9 +1168,9 @@
   }
 
   header {
-    padding: 15px 17px;
     display: flex;
     align-items: center;
+    flex-direction: column;
     position: relative;
 
     .backend-filters {
@@ -1225,7 +1225,7 @@
       border-radius: $br-small;
       color: $color-gray-20;
       border: 1px solid $color-gray-30;
-      margin: 0px;
+      margin: 15px 17px;
     }
 
     .options {

frontend/src/app/main/data/fonts.cljs

@@ -14,6 +14,7 @@
    [app.common.uuid :as uuid]
    [app.main.fonts :as fonts]
    [app.main.repo :as rp]
+   [app.util.storage :refer [storage]]
    [app.util.webapi :as wa]
    [beicon.core :as rx]
    [cuerdas.core :as str]
@@ -250,3 +251,28 @@
       (let [team-id (:current-team-id state)]
         (->> (rp/mutation! :delete-font-variant {:id id :team-id team-id})
              (rx/ignore))))))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Workspace related events
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defn add-recent-font
+  [font]
+  (ptk/reify ::add-recent-font
+    ptk/UpdateEvent
+    (update [_ state]
+      (let [recent-fonts      (get-in state [:workspace-data :recent-fonts])
+            most-recent-fonts (into [font] (comp (remove #(= font %)) (take 3)) recent-fonts)]
+        (assoc-in state [:workspace-data :recent-fonts] most-recent-fonts)))
+    ptk/EffectEvent
+    (effect [_ state _]
+      (let [most-recent-fonts      (get-in state [:workspace-data :recent-fonts])]
+        (swap! storage assoc ::recent-fonts most-recent-fonts)))))
+
+(defn load-recent-fonts
+  []
+  (ptk/reify ::load-recent-fonts
+    ptk/UpdateEvent
+    (update [_ state]
+      (let [saved-recent-fonts (::recent-fonts @storage)]
+        (assoc-in state [:workspace-data :recent-fonts] saved-recent-fonts)))))

frontend/src/app/main/refs.cljs

@@ -188,6 +188,11 @@
                (get-in state [:workspace-data :recent-colors] []))
              st/state))
 
+(def workspace-recent-fonts
+  (l/derived (fn [state]
+               (get-in state [:workspace-data :recent-fonts] []))
+             st/state))
+
 (def workspace-file-typography
   (l/derived (fn [state]
                (when-let [file (:workspace-data state)]

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

@@ -11,8 +11,10 @@
    [app.common.exceptions :as ex]
    [app.common.pages :as cp]
    [app.common.text :as txt]
+   [app.main.data.fonts :as fts]
    [app.main.data.shortcuts :as dsc]
    [app.main.fonts :as fonts]
+   [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.editable-select :refer [editable-select]]
    [app.main.ui.components.numeric-input :refer [numeric-input]]
@@ -93,13 +95,14 @@
 
 (mf/defc font-selector
   [{:keys [on-select on-close current-font] :as props}]
-  (let [selected (mf/use-state current-font)
+  (let [selected     (mf/use-state current-font)
-        state    (mf/use-state {:term "" :backends #{}})
+        state        (mf/use-state {:term "" :backends #{}})
 
-        flist    (mf/use-ref)
+        flist        (mf/use-ref)
-        input    (mf/use-ref)
+        input        (mf/use-ref)
 
-        fonts    (mf/use-memo (mf/deps @state) #(filter-fonts @state @fonts/fonts))
+        fonts        (mf/use-memo (mf/deps @state) #(filter-fonts @state @fonts/fonts))
+        recent-fonts (mf/deref refs/workspace-recent-fonts)
 
         select-next
         (mf/use-callback
@@ -143,6 +146,10 @@
            (on-close)))
         ]
     
+    (mf/use-effect
+     (fn []
+       (st/emit! (fts/load-recent-fonts))))
+
     (mf/use-effect
      (mf/deps fonts)
      (fn []
@@ -183,6 +190,13 @@
                 :ref input
                 :spell-check false
                 :on-change on-filter-change}]
+       (when recent-fonts
+         (for [font recent-fonts]
+           [:& font-item {:key (:id font)
+                          :font font
+                          :style {}
+                          :on-click on-select-and-close
+                          :current? (= (:id font) (:id @selected))}]))
 
        #_[:div.options
           {:on-click #(swap! state assoc :show-options true)
@@ -242,12 +256,13 @@
 
         fonts           (mf/deref fonts/fontsdb)
         font            (get fonts font-id)
+        recent-fonts    (mf/deref refs/workspace-recent-fonts)
 
         open-selector?  (mf/use-state false)
 
         change-font
         (mf/use-callback
-         (mf/deps on-change fonts)
+         (mf/deps on-change fonts recent-fonts)
          (fn [new-font-id]
            (let [{:keys [family] :as font} (get fonts new-font-id)
                  {:keys [id name weight style]} (fonts/get-default-variant font)]
@@ -255,7 +270,8 @@
                          :font-family family
                          :font-variant-id (or id name)
                          :font-weight weight
-                         :font-style style}))))
+                         :font-style style})
+             (st/emit! (fts/add-recent-font font)))))
 
         on-font-size-change
         (mf/use-callback