🐛 Fix pinned project ordering on dashboard sidebar (#7060)

CHANGES.md

@@ -54,6 +54,7 @@
 - Fix the context menu always closes after any action [Taiga #11624](https://tree.taiga.io/project/penpot/issue/11624)
 - Fix X & Y position do not sincronize with tokens [Taiga #11617](https://tree.taiga.io/project/penpot/issue/11617)
 - Fix tooltip position after first time [Taiga #11688](https://tree.taiga.io/project/penpot/issue/11688)
+- Fix inconsistent ordering of pinned projects on dashboard sidebar [Taiga #11674](https://tree.taiga.io/project/penpot/issue/11674)
 - Fix export button width on inspect tab [Taiga #11394](https://tree.taiga.io/project/penpot/issue/11394)
 - Fix stroke width token application [Taiga #11724](https://tree.taiga.io/project/penpot/issue/11724)
 - Fix number token application on shape [Taiga #11331](https://tree.taiga.io/project/penpot/task/11331)

frontend/src/app/main/ui/dashboard/sidebar.cljs

@@ -34,7 +34,6 @@
    [app.util.dom.dnd :as dnd]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
-   [app.util.object :as obj]
    [app.util.timers :as ts]
    [beicon.v2.core :as rx]
    [cljs.spec.alpha :as s]
@@ -196,7 +195,7 @@
                         :on-edit on-edit-open
                         :on-menu-close on-menu-close}]]))
 
-(mf/defc sidebar-search
+(mf/defc sidebar-search*
   [{:keys [search-term team-id] :as props}]
   (let [search-term (or search-term "")
         focused?    (mf/use-state false)
@@ -586,8 +585,8 @@
                                 :data-testid   "delete-team"}
         (tr "dashboard.delete-team")])]))
 
-(mf/defc sidebar-team-switch
+(mf/defc sidebar-team-switch*
-  [{:keys [team profile] :as props}]
+  [{:keys [team profile]}]
   (let [teams                 (mf/deref refs/teams)
         teams-without-default (into {} (filter (fn [[_ v]] (= false (:is-default v))) teams))
         team-ids              (map #(str "teams-selector-" %) (keys teams-without-default))
@@ -606,10 +605,6 @@
                                (when (get-in team [:permissions :is-owner])
                                  "teams-options-delete-team")]
 
-
-        ;; _ (prn "--------------- sidebar-team-switch")
-        ;; _ (app.common.pprint/pprint teams)
-
         handle-show-team-click
         (fn [event]
           (dom/stop-propagation event)
@@ -716,8 +711,7 @@
                                  :profile profile}]]]))
 
 (mf/defc sidebar-content*
-  {::mf/private true
+  {::mf/private true}
-   ::mf/props :obj}
   [{:keys [projects profile section team project search-term default-project] :as props}]
   (let [default-project-id
         (get default-project :id)
@@ -730,6 +724,7 @@
         drafts?     (and (= section :dashboard-files)
                          (= (:id project) default-project-id))
         container   (mf/use-ref nil)
+
         overflow*   (mf/use-state false)
         overflow?   (deref overflow*)
 
@@ -740,7 +735,8 @@
         (mf/use-fn
          (mf/deps team-id)
          (fn []
-           (st/emit! (dcm/go-to-dashboard-recent :team-id team-id)
+           (st/emit!
+            (dcm/go-to-dashboard-recent :team-id team-id)
             (ts/schedule-on-idle
              (fn []
                (when-let [projects-title (dom/get-element "dashboard-projects-title")]
@@ -756,14 +752,17 @@
         go-fonts-with-key
         (mf/use-fn
          (mf/deps team)
-         #(st/emit! (dcm/go-to-dashboard-fonts :team-id team-id)
+         (fn []
+           (st/emit!
+            (dcm/go-to-dashboard-fonts :team-id team-id)
             (ts/schedule-on-idle
              (fn []
                (let [font-title (dom/get-element "dashboard-fonts-title")]
                  (when font-title
                    (dom/set-attribute! font-title "tabindex" "0")
                    (dom/focus! font-title)
-                           (dom/set-attribute! font-title "tabindex" "-1")))))))
+                   (dom/set-attribute! font-title "tabindex" "-1"))))))))
+
         go-drafts
         (mf/use-fn
          (mf/deps team-id default-project-id)
@@ -785,38 +784,42 @@
         go-libs
         (mf/use-fn
          (mf/deps team-id)
-         #(st/emit! (dcm/go-to-dashboard-libraries :team-id team-id)))
+         (fn [] (st/emit! (dcm/go-to-dashboard-libraries :team-id team-id))))
 
         go-libs-with-key
         (mf/use-fn
          (mf/deps team-id)
-         #(st/emit! (dcm/go-to-dashboard-libraries :team-id team-id)
+         (fn []
+           (st/emit!
+            (dcm/go-to-dashboard-libraries :team-id team-id)
             (ts/schedule-on-idle
              (fn []
                (let [libs-title (dom/get-element "dashboard-libraries-title")]
                  (when libs-title
                    (dom/set-attribute! libs-title "tabindex" "0")
                    (dom/focus! libs-title)
-                           (dom/set-attribute! libs-title "tabindex" "-1")))))))
+                   (dom/set-attribute! libs-title "tabindex" "-1"))))))))
+
         pinned-projects
+        (mf/with-memo [projects]
           (->> projects
                (remove :is-default)
-             (filter :is-pinned))]
+               (filter :is-pinned)
+               (sort-by :name)
+               (not-empty)))]
 
-    (mf/use-layout-effect
+    (mf/with-layout-effect [pinned-projects]
-     (mf/deps pinned-projects)
+      (let [node          (mf/ref-val container)
-     (fn []
+            client-height (.-clientHeight ^js node)
-       (let [dom   (mf/ref-val container)
+            scroll-height (.-scrollHeight ^js node)]
-             client-height (obj/get dom "clientHeight")
+        (reset! overflow* (> scroll-height client-height))))
-             scroll-height (obj/get dom "scrollHeight")]
-         (reset! overflow* (> scroll-height client-height)))))
 
     [:*
      [:div {:class (stl/css-case :sidebar-content true)
             :ref container}
-      [:& sidebar-team-switch {:team team :profile profile}]
+      [:> sidebar-team-switch* {:team team :profile profile}]
 
-      [:& sidebar-search {:search-term search-term
+      [:> sidebar-search* {:search-term search-term
                            :team-id (:id team)}]
 
       [:div {:class (stl/css :sidebar-content-section)}
@@ -861,7 +864,7 @@
              :data-testid "pinned-projects"}
        [:div {:class (stl/css :sidebar-section-title)}
         (tr "labels.pinned-projects")]
-       (if (seq pinned-projects)
+       (if (some? pinned-projects)
          [:ul {:class (stl/css :sidebar-nav :pinned-projects)}
           (for [item pinned-projects]
             [:& sidebar-project
@@ -876,7 +879,6 @@
      [:div {:class (stl/css-case :separator true :overflow-separator overflow?)}]]))
 
 (mf/defc profile-section*
-  {::mf/props :obj}
   [{:keys [profile team]}]
   (let [show*  (mf/use-state false)
         show   (deref show*)