✨ Add create org button for nitrate

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

@@ -33,7 +33,9 @@
                                                show-subscription-dashboard-banner?
                                                subscription-sidebar*]]
    [app.main.ui.dashboard.team-form]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
+   [app.main.ui.ds.foundations.assets.raw-svg :refer [raw-svg*]]
    [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.nitrate.nitrate-form]
    [app.util.dom :as dom]
@@ -74,6 +76,8 @@
 (def ^:private exit-icon
   (deprecated-icon/icon-xref :exit (stl/css :exit-icon)))
 
+(def ^:private ^:svg-id penpot-logo-icon "penpot-logo-icon")
+
 (mf/defc sidebar-project*
   {::mf/private true}
   [{:keys [item is-selected]}]
@@ -497,18 +501,21 @@
 
 (mf/defc sidebar-org-switch*
   [{:keys [team profile]}]
-  (let [teams (->> (mf/deref refs/teams)
+  (let [orgs (->> (mf/deref refs/teams)
-                   vals
+                  vals
-                   (group-by :organization-id)
+                  (group-by :organization-id)
-                   (map (fn [[_group entries]] (first entries)))
+                  (map (fn [[_group entries]] (first entries)))
-                   vec
+                  vec
-                   (d/index-by :id))
+                  (d/index-by :id))
 
-        teams (update-vals teams
+        orgs (update-vals orgs
-                           (fn [t]
+                          (fn [t]
-                             (assoc t :name (str "ORG: " (:organization-name t)))))
+                            (assoc t :name (str "ORG: " (:organization-name t)))))
 
-        team (assoc team :name (str "ORG: " (:organization-name team)))
+        empty? (= (count orgs) 1)
+
+
+        current-org (assoc team :name (str "ORG: " (:organization-name team)))
 
         show-teams-menu*
         (mf/use-state false)
@@ -532,34 +539,51 @@
              (some-> (dom/get-current-target event)
                      (dom/click!)))))
         close-teams-menu
-        (mf/use-fn #(reset! show-teams-menu* false))]
+        (mf/use-fn #(reset! show-teams-menu* false))
 
-    [:div {:class (stl/css :sidebar-team-switch)}
+        on-create-org-click
-     [:div {:class (stl/css :switch-content)}
+        (mf/use-fn
-      [:button {:class (stl/css :current-team)
+         (fn []
-                :on-click on-show-teams-click
+           (if (:nitrate-licence profile)
-                :on-key-down on-show-teams-keydown}
+             ;; TODO update when org creation route is ready
+             (dom/open-new-window "/control-center/org/create")
+             (st/emit! (modal/show :nitrate-form {})))))]
+    (if empty?
+      [:div {:class (stl/css :nitrate-orgs-empty)}
+       [:span {:class (stl/css :nitrate-penpot-icon)}
+        [:> raw-svg* {:id penpot-logo-icon}]]
+       "Penpot"
+       [:> button* {:variant "ghost"
+                    :type "button"
+                    :class (stl/css :nitrate-create-org)
+                    :on-click on-create-org-click} (tr "dashboard.create-new-org")]]
 
-       [:div {:class (stl/css :team-name)}
+      [:div {:class (stl/css :sidebar-team-switch)}
-        [:img {:src (cf/resolve-team-photo-url team)
+       [:div {:class (stl/css :switch-content)}
-               :class (stl/css :team-picture)
+        [:button {:class (stl/css :current-team)
-               :alt (:name team)}]
+                  :on-click on-show-teams-click
-        [:span {:class (stl/css :team-text) :title (:name team)} (:name team)]]
+                  :on-key-down on-show-teams-keydown}
 
-       arrow-icon]]
+         [:div {:class (stl/css :team-name)}
+          [:img {:src (cf/resolve-team-photo-url current-org)
+                 :class (stl/css :team-picture)
+                 :alt (:name current-org)}]
+          [:span {:class (stl/css :team-text) :title (:name current-org)} (:name current-org)]]
 
-     ;; Teams Dropdown
+         arrow-icon]]
 
-     [:> teams-selector-dropdown* {:show show-teams-menu?
+       ;; Teams Dropdown
-                                   :on-close close-teams-menu
+
-                                   :id "organizations-list"
+       [:> teams-selector-dropdown* {:show show-teams-menu?
-                                   :class (stl/css :dropdown :teams-dropdown)
+                                     :on-close close-teams-menu
-                                   :team team
+                                     :id "organizations-list"
-                                   :profile profile
+                                     :class (stl/css :dropdown :teams-dropdown)
-                                   :teams teams
+                                     :team current-org
-                                   :show-default-team false
+                                     :profile profile
-                                   :allow-create-teams false
+                                     :teams orgs
-                                   :allow-create-org true}]]))
+                                     :show-default-team false
+                                     :allow-create-teams false
+                                     :allow-create-org true}]])))
 
 (mf/defc sidebar-team-switch*
   [{:keys [team profile]}]
@@ -705,6 +729,8 @@
         overflow*   (mf/use-state false)
         overflow?   (deref overflow*)
 
+        nitrate?    (contains? cf/flags :nitrate)
+
         go-projects
         (mf/use-fn #(st/emit! (dcm/go-to-dashboard-recent)))
 
@@ -793,70 +819,71 @@
         (reset! overflow* (> scroll-height client-height))))
 
     [:*
-     [:div {:class (stl/css-case :sidebar-content true)
+     [:div {:ref container}
-            :ref container}
+      (when nitrate?
-      (when (contains? cf/flags :nitrate)
+        [:div {:class (stl/css :nitrate-orgs-container)}
-        [:> sidebar-org-switch* {:team team :profile profile}])
+         [:> sidebar-org-switch* {:team team :profile profile}]])
-      [:> sidebar-team-switch* {:team team :profile profile}]
+      [:div {:class (stl/css-case :sidebar-content true :sidebar-content-nitrate nitrate?)}
+       [:> sidebar-team-switch* {:team team :profile profile}]
 
-      [:> sidebar-search* {:search-term search-term
+       [:> sidebar-search* {:search-term search-term
-                           :team-id (:id team)}]
+                            :team-id (:id team)}]
 
-      [: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 :recent-projects true
+         [:li {:class (stl/css-case :recent-projects true
-                                   :sidebar-nav-item true
+                                    :sidebar-nav-item true
-                                   :current projects?)}
+                                    :current projects?)}
-         [:& link {:action go-projects
+          [:& link {:action go-projects
-                   :class (stl/css :sidebar-link)
+                    :class (stl/css :sidebar-link)
-                   :keyboard-action go-projects-with-key}
+                    :keyboard-action go-projects-with-key}
-          [:span {:class (stl/css :element-title)} (tr "labels.projects")]]]
+           [:span {:class (stl/css :element-title)} (tr "labels.projects")]]]
 
-        [:li {:class (stl/css-case :current drafts?
+         [:li {:class (stl/css-case :current drafts?
-                                   :sidebar-nav-item true)}
+                                    :sidebar-nav-item true)}
-         [:& link {:action go-drafts
+          [:& link {:action go-drafts
-                   :class (stl/css :sidebar-link)
+                    :class (stl/css :sidebar-link)
-                   :keyboard-action go-drafts-with-key}
+                    :keyboard-action go-drafts-with-key}
-          [:span {:class (stl/css :element-title)} (tr "labels.drafts")]]]]]
+           [:span {:class (stl/css :element-title)} (tr "labels.drafts")]]]]]
 
 
-      [:div {:class (stl/css :sidebar-content-section)}
+       [:div {:class (stl/css :sidebar-content-section)}
-       [:div {:class (stl/css :sidebar-section-title)}
+        [:div {:class (stl/css :sidebar-section-title)}
-        (tr "labels.sources")]
+         (tr "labels.sources")]
-       [: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")]]]
-        [: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)
-             :data-testid "pinned-projects"}
+              :data-testid "pinned-projects"}
-       [:div {:class (stl/css :sidebar-section-title)}
+        [:div {:class (stl/css :sidebar-section-title)}
-        (tr "labels.pinned-projects")]
+         (tr "labels.pinned-projects")]
-       (if (some? pinned-projects)
+        (if (some? 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)
-              :is-selected (= (:id item) (:id project))}])]
+               :is-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?)}]]))
+      [:div {:class (stl/css-case :separator true :overflow-separator overflow?)}]]]))
 
 (mf/defc help-learning-menu*
   {::mf/props :obj

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

@@ -40,6 +40,11 @@
   overflow-y: auto;
 }
 
+.sidebar-content-nitrate {
+  padding: var(--sp-m) 0 0 0;
+  border-block-start: $b-1 solid var(--color-background-quaternary);
+}
+
 .separator {
   height: var(--sp-xxs);
   width: 94%;
@@ -514,3 +519,44 @@
   @include t.use-typography("body-small");
   color: var(--color-accent-tertiary);
 }
+
+.nitrate-orgs-container {
+  align-items: center;
+  display: flex;
+  height: calc(2 * var(--sp-xxxl));
+  max-height: calc(2 * var(--sp-xxxl));
+  justify-content: space-between;
+  padding: var(--sp-xs) var(--sp-l) var(--sp-xs) var(--sp-s);
+  // border-block-end: $b-1 solid var(--color-background-quaternary);
+}
+
+.nitrate-orgs-empty {
+  @include t.use-typography("body-medium");
+  color: var(--color-foreground-primary);
+  width: 100%;
+  margin: var(--sp-xs) var(--sp-l);
+  display: flex;
+  align-items: center;
+  gap: var(--sp-s);
+}
+
+.nitrate-create-org {
+  margin-inline-start: auto;
+  text-transform: uppercase;
+}
+
+.nitrate-penpot-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  height: var(--sp-xxxl);
+  width: var(--sp-xxxl);
+  background-color: var(--color-foreground-primary);
+
+  svg {
+    fill: var(--icon-stroke-color);
+    width: var(--sp-xxl);
+    height: var(--sp-xxl);
+  }
+}

frontend/translations/en.po

@@ -434,7 +434,7 @@ msgid "dashboard.create-new-team"
 msgstr "Create new team"
 
 msgid "dashboard.create-new-org"
-msgstr "Create new org"
+msgstr "+ Create org"
 
 #: src/app/main/ui/workspace/main_menu.cljs:661
 msgid "dashboard.create-version-menu"

frontend/translations/es.po

@@ -443,7 +443,7 @@ msgid "dashboard.create-new-team"
 msgstr "Crear nuevo equipo"
 
 msgid "dashboard.create-new-org"
-msgstr "Crear nueva organización"
+msgstr "+ Crear org"
 
 #: src/app/main/ui/workspace/main_menu.cljs:661
 msgid "dashboard.create-version-menu"