🎉 Add "Penpot free" label

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

@@ -32,6 +32,7 @@
    [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]
@@ -705,6 +706,9 @@
         libs?       (= section :dashboard-libraries)
         drafts?     (and (= section :dashboard-files)
                          (= (:id project) default-project-id))
+        container   (mf/use-ref nil)
+        overflow*   (mf/use-state false)
+        overflow?   (deref overflow*)
 
         go-projects
         (mf/use-fn #(st/emit! (dcm/go-to-dashboard-recent)))
@@ -776,64 +780,75 @@
              (remove :is-default)
              (filter :is-pinned))]
 
-    [:div {:class (stl/css :sidebar-content)}
+    (mf/use-layout-effect
-     [:& sidebar-team-switch {:team team :profile profile}]
+     (mf/deps pinned-projects)
+     (fn []
+       (let [dom   (mf/ref-val container)
+             client-height (obj/get dom "clientHeight")
+             scroll-height (obj/get dom "scrollHeight")]
+         (reset! overflow* (> scroll-height client-height)))))
 
-     [:& sidebar-search {:search-term search-term
+    [:*
-                         :team-id (:id team)}]
+     [:div {:class (stl/css-case :sidebar-content true)
+            :ref container}
+      [:& sidebar-team-switch {:team team :profile profile}]
 
-     [:div {:class (stl/css :sidebar-content-section)}
+      [:& sidebar-search {:search-term search-term
-      [:ul {:class (stl/css :sidebar-nav)}
+                          :team-id (:id team)}]
-       [:li {:class (stl/css-case :recent-projects true
-                                  :sidebar-nav-item true
-                                  :current projects?)}
-        [:& link {:action go-projects
-                  :class (stl/css :sidebar-link)
-                  :keyboard-action go-projects-with-key}
-         [:span {:class (stl/css :element-title)} (tr "labels.projects")]]]
 
-       [:li {:class (stl/css-case :current drafts?
+      [:div {:class (stl/css :sidebar-content-section)}
-                                  :sidebar-nav-item true)}
+       [:ul {:class (stl/css :sidebar-nav)}
-        [:& link {:action go-drafts
+        [:li {:class (stl/css-case :recent-projects true
-                  :class (stl/css :sidebar-link)
+                                   :sidebar-nav-item true
-                  :keyboard-action go-drafts-with-key}
+                                   :current projects?)}
-         [:span {:class (stl/css :element-title)} (tr "labels.drafts")]]]
+         [:& link {:action go-projects
+                   :class (stl/css :sidebar-link)
+                   :keyboard-action go-projects-with-key}
+          [:span {:class (stl/css :element-title)} (tr "labels.projects")]]]
+
+        [:li {:class (stl/css-case :current drafts?
+                                   :sidebar-nav-item true)}
+         [:& link {:action go-drafts
+                   :class (stl/css :sidebar-link)
+                   :keyboard-action go-drafts-with-key}
+          [:span {:class (stl/css :element-title)} (tr "labels.drafts")]]]
 
 
-       [:li {:class (stl/css-case :current libs?
+        [:li {:class (stl/css-case :current libs?
-                                  :sidebar-nav-item true)}
+                                   :sidebar-nav-item true)}
-        [:& link {:action go-libs
+         [:& link {:action go-libs
-                  :data-testid "libs-link-sidebar"
+                   :data-testid "libs-link-sidebar"
-                  :class (stl/css :sidebar-link)
+                   :class (stl/css :sidebar-link)
-                  :keyboard-action go-libs-with-key}
+                   :keyboard-action go-libs-with-key}
-         [:span {:class (stl/css :element-title)} (tr "labels.shared-libraries")]]]]]
+          [:span {:class (stl/css :element-title)} (tr "labels.shared-libraries")]]]]]
 
 
-     [:div {:class (stl/css :sidebar-content-section)}
+      [:div {:class (stl/css :sidebar-content-section)}
-      [:ul {:class (stl/css :sidebar-nav)}
+       [:ul {:class (stl/css :sidebar-nav)}
-       [:li {:class (stl/css-case :sidebar-nav-item true
+        [:li {:class (stl/css-case :sidebar-nav-item true
-                                  :current fonts?)}
+                                   :current fonts?)}
-        [:& link {:action go-fonts
+         [:& link {:action go-fonts
-                  :class (stl/css :sidebar-link)
+                   :class (stl/css :sidebar-link)
-                  :keyboard-action go-fonts-with-key
+                   :keyboard-action go-fonts-with-key
-                  :data-testid "fonts"}
+                   :data-testid "fonts"}
-         [:span {:class (stl/css :element-title)} (tr "labels.fonts")]]]]]
+          [:span {:class (stl/css :element-title)} (tr "labels.fonts")]]]]]
 
 
-     [:div {:class (stl/css :sidebar-content-section)
+      [:div {:class (stl/css :sidebar-content-section)
-            :data-testid "pinned-projects"}
+             :data-testid "pinned-projects"}
-      (if (seq pinned-projects)
+       (if (seq pinned-projects)
-        [:ul {:class (stl/css :sidebar-nav :pinned-projects)}
+         [:ul {:class (stl/css :sidebar-nav :pinned-projects)}
-         (for [item pinned-projects]
+          (for [item pinned-projects]
-           [:& sidebar-project
+            [:& sidebar-project
-            {:item item
+             {:item item
-             :key (dm/str (:id item))
+              :key (dm/str (:id item))
-             :id (:id item)
+              :id (:id item)
-             :team-id (:id team)
+              :team-id (:id team)
-             :selected? (= (:id item) (:id project))}])]
+              :selected? (= (:id item) (:id project))}])]
-        [:div {:class (stl/css :sidebar-empty-placeholder)}
+         [:div {:class (stl/css :sidebar-empty-placeholder)}
-         pin-icon
+          pin-icon
-         [:span {:class (stl/css :empty-text)} (tr "dashboard.no-projects-placeholder")]])]]))
+          [:span {:class (stl/css :empty-text)} (tr "dashboard.no-projects-placeholder")]])]]
+     [:div {:class (stl/css-case :separator true :overflow-separator overflow?)}]]))
 
 (mf/defc profile-section*
   {::mf/props :obj}
@@ -939,9 +954,21 @@
 
         handle-set-profile
         (mf/use-fn
-         #(on-click :settings-profile %))]
+         #(on-click :settings-profile %))
+
+        on-power-up-click
+        (mf/use-fn
+         (fn []
+           (dom/open-new-window "https://penpot.app/pricing")))]
 
     [:*
+     [:button {:class (stl/css :upgrade-plan-section)
+               :on-click on-power-up-click}
+      [:div {:class (stl/css :penpot-free)}
+       [:span (tr "dashboard.upgrade-plan.penpot-free")]
+       [:span {:class (stl/css :no-limits)} (tr "dashboard.upgrade-plan.no-limits")]]
+      [:div {:class (stl/css :power-up)}
+       (tr "dashboard.upgrade-plan.power-up")]]
      (when (and team profile)
        [:& comments-section
         {:profile profile

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

@@ -6,6 +6,9 @@
 
 @use "common/refactor/common-refactor.scss" as *;
 @use "common/refactor/common-dashboard";
+@use "../ds/typography.scss" as t;
+
+@import "../ds/_borders.scss";
 
 // SIDEBAR COMPONENT
 .dashboard-sidebar {
@@ -32,6 +35,16 @@
   overflow-y: auto;
 }
 
+.separator {
+  height: var(--sp-xxs);
+  width: 94%;
+  margin-left: 3%;
+}
+
+.overflow-separator {
+  border-bottom: $b-1 solid var(--color-background-quaternary);
+}
+
 // SIDEBAR TEAM SWITCH
 .sidebar-team-switch {
   position: relative;
@@ -391,3 +404,31 @@
   @extend .button-icon;
   stroke: var(--icon-foreground);
 }
+
+.upgrade-plan-section {
+  @include buttonStyle;
+  display: flex;
+  justify-content: space-between;
+  border: $b-1 solid var(--color-background-quaternary);
+  border-radius: var(--sp-s);
+  padding: var(--sp-m);
+  margin: var(--sp-m) var(--sp-s) var(--sp-m) var(--sp-m);
+  color: var(--color-foreground-secondary);
+  cursor: pointer;
+}
+
+.penpot-free {
+  @include t.use-typography("body-medium");
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+}
+
+.no-limits {
+  @include t.use-typography("body-small");
+}
+
+.power-up {
+  @include t.use-typography("body-small");
+  color: var(--color-accent-tertiary);
+}

frontend/src/app/main/ui/workspace/main_menu.cljs

@@ -781,6 +781,11 @@
                           (keyword))]
              (reset! sub-menu* menu))))
 
+        on-power-up-click
+        (mf/use-fn
+         (fn []
+           (dom/open-new-window "https://penpot.app/pricing")))
+
         toggle-flag
         (mf/use-fn
          (fn [event]
@@ -892,7 +897,15 @@
                                :data-testid   "help-info"
                                :id          "file-menu-help-info"}
        [:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.help-info")]
-       [:span {:class (stl/css :open-arrow)} i/arrow]]]
+       [:span {:class (stl/css :open-arrow)} i/arrow]]
+      [:> dropdown-menu-item* {:class (stl/css-case :menu-item true)
+                               :on-click    on-power-up-click
+                               :on-key-down (fn [event]
+                                              (when (kbd/enter? event)
+                                                (on-power-up-click)))
+                               :on-pointer-enter close-sub-menu
+                               :id          "file-menu-power-up"}
+       [:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.power-up")]]]
 
      (case sub-menu
        :file

frontend/translations/en.po

@@ -963,6 +963,15 @@ msgstr "Your name"
 msgid "dashboard.your-penpot"
 msgstr "Your Penpot"
 
+msgid "dashboard.upgrade-plan.penpot-free"
+msgstr "Penpot Free"
+
+msgid "dashboard.upgrade-plan.no-limits"
+msgstr "No limits on creativity"
+
+msgid "dashboard.upgrade-plan.power-up"
+msgstr "Power up"
+
 #: src/app/main/ui/alert.cljs:32
 msgid "ds.alert-ok"
 msgstr "Ok"
@@ -4335,6 +4344,10 @@ msgstr "Preferences"
 msgid "workspace.header.menu.option.view"
 msgstr "View"
 
+#: src/app/main/ui/workspace/main_menu.cljs:908
+msgid "workspace.header.menu.option.power-up"
+msgstr "Power up your plan"
+
 #: src/app/main/ui/workspace/main_menu.cljs:471
 msgid "workspace.header.menu.redo"
 msgstr "Redo"

frontend/translations/es.po

@@ -971,6 +971,15 @@ msgstr "Tu nombre"
 msgid "dashboard.your-penpot"
 msgstr "Tu Penpot"
 
+msgid "dashboard.upgrade-plan.penpot-free"
+msgstr "Penpot Gratis"
+
+msgid "dashboard.upgrade-plan.no-limits"
+msgstr "Sin límites a la creatividad"
+
+msgid "dashboard.upgrade-plan.power-up"
+msgstr "Mejora"
+
 #: src/app/main/ui/alert.cljs:32
 msgid "ds.alert-ok"
 msgstr "Ok"
@@ -4336,6 +4345,10 @@ msgstr "Preferencias"
 msgid "workspace.header.menu.option.view"
 msgstr "Ver"
 
+#: src/app/main/ui/workspace/main_menu.cljs:908
+msgid "workspace.header.menu.option.power-up"
+msgstr "Mejora tu plan"
+
 #: src/app/main/ui/workspace/main_menu.cljs:471
 msgid "workspace.header.menu.redo"
 msgstr "Rehacer"