Merge pull request #8011 from penpot/alotor-fix-trash-bar

🐛 Fix problems with trash bar in dashboard

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

@@ -75,7 +75,13 @@
 
         show-templates?
         (and (contains? cf/flags :dashboard-templates-section)
-             (:can-edit permissions))]
+             (:can-edit permissions))
+
+        show-deleted? (:can-edit permissions)
+
+        section (if (and (not show-deleted?) (= section :dashboard-deleted))
+                  :dashboard-recent
+                  section)]
 
     (mf/with-effect []
       (let [key1 (events/listen js/window "resize" on-resize)]

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

@@ -190,18 +190,19 @@
            (st/emit! (dcm/go-to-dashboard-deleted :team-id team-id))))]
 
     [:div {:class (stl/css :nav)}
-     [:div {:class [(stl/css :nav-option)
+     [:div {:class (stl/css :nav-inside)}
-                    (stl/css-case :selected (= section :dashboard-recent))]
+      [:div {:class [(stl/css :nav-option)
-            :data-testid "recent-tab"
+                     (stl/css-case :selected (= section :dashboard-recent))]
-            :on-click on-recent-click}
+             :data-testid "recent-tab"
-      (tr "labels.recent")]
+             :on-click on-recent-click}
-     [:div {:class [(stl/css :nav-option)
+       (tr "labels.recent")]
-                    (stl/css-case :selected (= section :dashboard-deleted))]
+      [:div {:class [(stl/css :nav-option)
-            :variant "ghost"
+                     (stl/css-case :selected (= section :dashboard-deleted))]
-            :type "button"
+             :variant "ghost"
-            :data-testid "deleted-tab"
+             :type "button"
-            :on-click on-deleted-click}
+             :data-testid "deleted-tab"
-      (tr "labels.deleted")]]))
+             :on-click on-deleted-click}
+       (tr "labels.deleted")]]]))
 
 (mf/defc deleted-section*
   [{:keys [team projects]}]

frontend/src/app/main/ui/dashboard/deleted.scss

@@ -4,6 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
+@use "refactor/common-refactor.scss" as deprecated;
 @use "common/refactor/common-dashboard";
 @use "../ds/typography.scss" as t;
 @use "../ds/_borders.scss" as *;
@@ -46,20 +47,21 @@
 }
 
 .nav {
+  background: var(--color-background-default);
+  padding: var(--sp-xxl) var(--sp-xxl) var(--sp-s) var(--sp-xxl);
+  position: sticky;
+  top: 0;
+
+  // We need to use the the deprecated z-index so it won't clash with the dashboard
+  // onboarding modals
+  z-index: deprecated.$z-index-3;
+}
+
+.nav-inside {
+  border-bottom: $b-1 solid var(--panel-border-color);
   display: flex;
   gap: var(--sp-l);
   justify-content: space-between;
-  border-bottom: $b-1 solid var(--panel-border-color);
-  //padding-inline-start: var(--sp-l);
-  background: var(--color-background-default);
-  position: sticky;
-  top: 0;
-  z-index: var(--z-index-panels);
-
-  /* margin: 0 1.5rem; */
-  /* margin-top: 1rem; */
-
-  margin: var(--sp-xxl) var(--sp-xxl) var(--sp-xxl) var(--sp-xxl);
 }
 
 .nav-option {

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

@@ -331,6 +331,8 @@
         my-penpot?      (= (:default-team-id profile) team-id)
         default-team?   (:is-default team)
 
+        show-deleted?   (:can-edit permisions)
+
         projects
         (mf/with-memo [projects]
           (->> projects
@@ -378,7 +380,8 @@
                                                           show-team-hero?
                                                           can-invite))}
 
-          [:> deleted/menu* {:team-id team-id :section :dashboard-recent}]
+          (when show-deleted?
+            [:> deleted/menu* {:team-id team-id :section :dashboard-recent}])
 
           (for [{:keys [id] :as project} projects]
             ;; FIXME: refactor this, looks inneficient