💄 Add mainly cosmetic changes to dashboard placeholder components

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

@@ -28,7 +28,7 @@
    [app.main.ui.dashboard.file-menu :refer [file-menu*]]
    [app.main.ui.dashboard.import :refer [use-import-file]]
    [app.main.ui.dashboard.inline-edition :refer [inline-edition]]
-   [app.main.ui.dashboard.placeholder :refer [empty-placeholder loading-placeholder]]
+   [app.main.ui.dashboard.placeholder :refer [empty-grid-placeholder* loading-placeholder*]]
    [app.main.ui.ds.product.loader :refer [loader*]]
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
@@ -511,7 +511,7 @@
            :ref node-ref}
      (cond
        (nil? files)
-       [:& loading-placeholder]
+       [:> loading-placeholder*]
 
        (seq files)
        (for [[index slice] (d/enumerate (partition-all limit files))]
@@ -528,7 +528,7 @@
               :can-edit can-edit}])])
 
        :else
-       [:& empty-placeholder
+       [:> empty-grid-placeholder*
         {:limit limit
          :can-edit can-edit
          :create-fn create-fn
@@ -646,7 +646,7 @@
            :on-drop on-drop}
      (cond
        (nil? files)
-       [:& loading-placeholder]
+       [:> loading-placeholder*]
 
        (seq files)
        [:& line-grid-row {:files files
@@ -657,8 +657,8 @@
                           :limit limit}]
 
        :else
-       [:& empty-placeholder
+       [:> empty-grid-placeholder*
-        {:dragging? @dragging?
+        {:is-dragging @dragging?
          :limit limit
          :can-edit can-edit
          :create-fn create-fn

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

@@ -19,30 +19,46 @@
    [potok.v2.core :as ptk]
    [rumext.v2 :as mf]))
 
-(mf/defc empty-placeholder-projects*
+(mf/defc empty-project-placeholder*
-  {::mf/wrap-props false}
+  {::mf/private true}
   [{:keys [on-create on-finish-import project-id]}]
   (let [file-input       (mf/use-ref nil)
-        on-add-library   (mf/use-fn
+
-                          (fn [_]
+        on-add-library
-                            (st/emit! (ptk/event ::ev/event {::ev/name "explore-libraries-click"
+        (mf/use-fn
-                                                             ::ev/origin "dashboard"
+         (fn [_]
-                                                             :section "empty-placeholder-projects"}))
+           (st/emit! (ptk/event ::ev/event {::ev/name "explore-libraries-click"
-                            (dom/open-new-window "https://penpot.app/penpothub/libraries-templates")))
+                                            ::ev/origin "dashboard"
-        on-import-files  (mf/use-fn #(dom/click (mf/ref-val file-input)))]
+                                            :section "empty-placeholder-projects"}))
+           (dom/open-new-window "https://penpot.app/penpothub/libraries-templates")))
+
+        on-import
+        (mf/use-fn #(dom/click (mf/ref-val file-input)))]
 
     [:div {:class (stl/css :empty-project-container)}
-     [:div {:class (stl/css :empty-project-card) :on-click on-create :title (tr "dashboard.add-file")}
+     [:div {:class (stl/css :empty-project-card)
-      [:div {:class (stl/css :empty-project-card-title)} (tr "dashboard.empty-project.create")]
+            :on-click on-create
-      [:div {:class (stl/css :empty-project-card-subtitle)} (tr "dashboard.empty-project.start")]]
+            :title (tr "dashboard.add-file")}
+      [:div {:class (stl/css :empty-project-card-title)}
+       (tr "dashboard.empty-project.create")]
+      [:div {:class (stl/css :empty-project-card-subtitle)}
+       (tr "dashboard.empty-project.start")]]
 
-     [:div {:class (stl/css :empty-project-card) :on-click on-import-files :title (tr "dashboard.empty-project.import")}
+     [:div {:class (stl/css :empty-project-card)
-      [:div {:class (stl/css :empty-project-card-title)} (tr "dashboard.empty-project.import")]
+            :on-click on-import
-      [:div {:class (stl/css :empty-project-card-subtitle)} (tr "dashboard.empty-project.import-penpot")]]
+            :title (tr "dashboard.empty-project.import")}
+      [:div {:class (stl/css :empty-project-card-title)}
+       (tr "dashboard.empty-project.import")]
+      [:div {:class (stl/css :empty-project-card-subtitle)}
+       (tr "dashboard.empty-project.import-penpot")]]
 
-     [:div {:class (stl/css :empty-project-card) :on-click on-add-library :title (tr "dashboard.empty-project.go-to-libraries")}
+     [:div {:class (stl/css :empty-project-card)
-      [:div {:class (stl/css :empty-project-card-title)} (tr "dashboard.empty-project.add-library")]
+            :on-click on-add-library
-      [:div {:class (stl/css :empty-project-card-subtitle)} (tr "dashboard.empty-project.explore")]]
+            :title (tr "dashboard.empty-project.go-to-libraries")}
+      [:div {:class (stl/css :empty-project-card-title)}
+       (tr "dashboard.empty-project.add-library")]
+      [:div {:class (stl/css :empty-project-card-subtitle)}
+       (tr "dashboard.empty-project.explore")]]
 
      [:& udi/import-form {:ref file-input
                           :project-id project-id
@@ -65,23 +81,26 @@
                            files))))
              st/state))
 
-(mf/defc empty-placeholder
+(mf/defc empty-grid-placeholder*
-  [{:keys [dragging? limit origin create-fn can-edit team-id project-id on-finish-import]}]
+  [{:keys [is-dragging limit origin create-fn can-edit team-id project-id on-finish-import]}]
   (let [on-click
         (mf/use-fn
          (mf/deps create-fn)
          (fn [_]
            (create-fn "dashboard:empty-folder-placeholder")))
 
-        show-text      (mf/use-state nil)
+        show-text*     (mf/use-state nil)
-        on-mouse-enter (mf/use-fn #(reset! show-text true))
+        show-text?     (deref show-text*)
-        on-mouse-leave (mf/use-fn #(reset! show-text nil))
+
+        on-mouse-enter (mf/use-fn #(reset! show-text* true))
+        on-mouse-leave (mf/use-fn #(reset! show-text* nil))
 
         has-other*     (mf/with-memo [team-id]
                          (make-has-other-files-or-projects-ref team-id))
         has-other?     (mf/deref has-other*)]
+
     (cond
-      (true? dragging?)
+      (true? is-dragging)
       [:ul
        {:class (stl/css :grid-row :no-wrap)
         :style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
@@ -102,17 +121,23 @@
 
       :else
       (if-not has-other?
-        [:> empty-placeholder-projects* {:on-create on-click :on-finish-import on-finish-import :project-id project-id}]
+        [:> empty-project-placeholder*
+         {:on-create on-click
+          :on-finish-import on-finish-import
+          :project-id project-id}]
         [:div {:class (stl/css :grid-empty-placeholder)}
          [:button {:class (stl/css :create-new)
                    :on-click on-click
                    :on-mouse-enter on-mouse-enter
                    :on-mouse-leave on-mouse-leave}
-          (if @show-text (tr "dashboard.empty-project.create") i/add)]]))))
+          (if show-text?
+            (tr "dashboard.empty-project.create")
+            i/add)]]))))
 
-(mf/defc loading-placeholder
+(mf/defc loading-placeholder*
   []
   [:> loader*  {:width 32
                 :title (tr "labels.loading")
                 :class (stl/css :placeholder-loader)}
-   [:span {:class (stl/css :placeholder-text)} (tr "dashboard.loading-files")]])
+   [:span {:class (stl/css :placeholder-text)}
+    (tr "dashboard.loading-files")]])

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

@@ -371,6 +371,7 @@
                                                           show-team-hero?
                                                           can-invite))}
           (for [{:keys [id] :as project} projects]
+            ;; FIXME: refactor this, looks inneficient
             (let [files (when recent-map
                           (->> (vals recent-map)
                                (filterv #(= id (:project-id %)))