enhance(ui): footer actions for the repos pane

src/main/frontend/components/repo.cljs

@@ -5,6 +5,7 @@
             [frontend.db :as db]
             [frontend.handler.repo :as repo-handler]
             [frontend.handler.file-based.nfs :as nfs-handler]
+            [frontend.handler.route :as route-handler]
             [frontend.state :as state]
             [frontend.ui :as ui]
             [frontend.util :as util]
@@ -239,35 +240,8 @@
 
                                                             :else
                                                             (state/pub-event! [:graph/pull-down-remote-graph graph])))))}})))
-                    switch-repos)
-        refresh-link (let [nfs-repo? (config/local-file-based-graph? current-repo)]
-                       (when (and nfs-repo?
-                                  (not= current-repo config/demo-repo)
-                                  (or (nfs-handler/supported?)
-                                      (mobile-util/native-platform?)))
-                         {:title (t :sync-from-local-files)
-                          :hover-detail (t :sync-from-local-files-detail)
-                          :options {:on-click #(state/pub-event! [:graph/ask-for-re-fresh])}}))
-        reindex-link {:title        (t :re-index)
-                      :hover-detail (t :re-index-detail)
-                      :options (cond->
-                                {:on-click
-                                 (fn []
-                                   (state/pub-event! [:graph/ask-for-re-index *multiple-windows? nil]))})}]
-    (->>
-     (concat repo-links
-             [(when (seq repo-links) {:hr true})
-              (if (or (nfs-handler/supported?) (mobile-util/native-platform?))
-                {:title (t :new-graph) :options {:on-click #(state/pub-event! [:graph/setup-a-repo])}}
-                {:title (t :new-graph) :options {:href (rfe/href :repos)}}) ;; Brings to the repos page for showing fallback message
-              (when config/db-graph-enabled?
-                {:title (str (t :new-graph) " - DB version")
-                 :options {:on-click #(state/pub-event! [:graph/new-db-graph])}})
-              {:title (t :all-graphs) :options {:href (rfe/href :repos)}}
-              refresh-link
-              (when-not (config/db-based-graph? current-repo)
-                reindex-link)])
-     (remove nil?))))
+                    switch-repos)]
+    (->> repo-links (remove nil?))))
 
 (rum/defcs repos-dropdown < rum/reactive
   (rum/local false ::electron-multiple-windows?)
@@ -276,83 +250,115 @@
         current-repo (state/sub :git/current-repo)
         login? (boolean (state/sub :auth/id-token))
         remotes-loading? (state/sub [:file-sync/remote-graphs :loading])]
-    (when (or login? current-repo)
-      (let [repos (state/sub [:me :repos])
-            remotes (state/sub [:file-sync/remote-graphs :graphs])
-            rtc-graphs (state/sub :rtc/graphs)
-            downloading-graph-id (state/sub :rtc/downloading-graph-uuid)
-            repos (sort-repos-with-metadata-local repos)
-            repos (distinct
-                   (if (and (or (seq remotes) (seq rtc-graphs)) login?)
-                     (repo-handler/combine-local-&-remote-graphs repos (concat remotes rtc-graphs)) repos))
-            items-fn #(repos-dropdown-links repos current-repo downloading-graph-id multiple-windows? opts)
-            header-fn #(when (> (count repos) 1)            ; show switch to if there are multiple repos
-                         [:div.font-medium.text-sm.opacity-50.px-1.py-1.flex.flex-row.justify-between.items-center
-                          [:div (t :left-side-bar/switch)]
-
-                          (when (and (file-sync/enable-sync?) login?)
-                            (if remotes-loading?
-                              (ui/loading "")
-                              (shui/button
-                               {:variant :ghost
-                                :size :sm
-                                :title "Refresh remote graphs"
-                                :class "!h-6 !px-1 relative right-[-4px]"
-                                :on-click (fn []
-                                            (file-sync/load-session-graphs)
-                                            (rtc-handler/<get-remote-graphs))}
-                               (ui/icon "refresh" {:size 15}))))])]
-        (when (seq repos)
-          (let [remote? (and current-repo (:remote? (first (filter #(= current-repo (:url %)) repos))))
-                repo-name (when current-repo (db/get-repo-name current-repo))
-                short-repo-name (if current-repo
-                                  (db/get-short-repo-name repo-name)
-                                  "Select a Graph")]
-            (shui/trigger-as :a
-                             {:tab-index 0
-                              :class "item cp__repos-select-trigger"
-                              :on-pointer-down
-                              (fn [^js e]
-                                (check-multiple-windows? state)
-                                (some-> (.-target e)
-                                        (.closest "a.item")
-                                        (shui/popup-show!
-                                         (fn [{:keys [id]}]
-                                           [:<>
-                                            (header-fn)
-                                            (for [{:keys [hr item hover-detail title options icon]} (items-fn)]
-                                              (let [on-click' (:on-click options)
-                                                    href' (:href options)]
-                                                (if hr
-                                                  (shui/dropdown-menu-separator)
-                                                  (shui/dropdown-menu-item
-                                                   (assoc options
-                                                          :title hover-detail
-                                                          :on-click (fn [^js e]
-                                                                      (when on-click'
-                                                                        (when-not (false? (on-click' e))
-                                                                          (shui/popup-hide! id)))))
-                                                   (or item
-                                                       (if href'
-                                                         [:a.flex.items-center.w-full
-                                                          {:href href' :on-click #(shui/popup-hide! id)
-                                                           :style {:color "inherit"}} title]
-                                                         [:span.flex.items-center.gap-1.w-full
-                                                          icon [:div title]]))))))])
-                                         {:as-dropdown? true
-                                          :auto-focus? false
-                                          :align "start"
-                                          :content-props {:class "repos-list"}})))
-                              :title repo-name}                            ;; show full path on hover
-                             [:div.flex.relative.graph-icon.rounded
-                              (shui/tabler-icon "database" {:size 15})]
-
-                             [:div.repo-switch.pr-2.whitespace-nowrap
-                              [:span.repo-name.font-medium
-                               [:span.repo-text.overflow-hidden.text-ellipsis
-                                (if (= config/demo-repo short-repo-name) "Demo" short-repo-name)]
-                               (when remote? [:span.pl-1 (ui/icon "cloud")])]
-                              [:span.dropdown-caret]])))))))
+    (let [repos (state/sub [:me :repos])
+          remotes (state/sub [:file-sync/remote-graphs :graphs])
+          rtc-graphs (state/sub :rtc/graphs)
+          downloading-graph-id (state/sub :rtc/downloading-graph-uuid)
+          repos (sort-repos-with-metadata-local repos)
+          repos (distinct
+                  (if (and (or (seq remotes) (seq rtc-graphs)) login?)
+                    (repo-handler/combine-local-&-remote-graphs repos (concat remotes rtc-graphs)) repos))
+          items-fn #(repos-dropdown-links repos current-repo downloading-graph-id multiple-windows? opts)
+          header-fn #(when (> (count repos) 1)              ; show switch to if there are multiple repos
+                       [:div.font-medium.text-sm.opacity-50.px-1.py-1.flex.flex-row.justify-between.items-center
+                        [:div (t :left-side-bar/switch)]
+
+                        (when (and (file-sync/enable-sync?) login?)
+                          (if remotes-loading?
+                            (ui/loading "")
+                            (shui/button
+                              {:variant :ghost
+                               :size :sm
+                               :title "Refresh remote graphs"
+                               :class "!h-6 !px-1 relative right-[-4px]"
+                               :on-click (fn []
+                                           (file-sync/load-session-graphs)
+                                           (rtc-handler/<get-remote-graphs))}
+                              (ui/icon "refresh" {:size 15}))))])
+          footer-fn (fn []
+                      [:div.cp__repos-quick-actions
+                       {:on-click #(shui/popup-hide!)}
+
+                       (when-not (config/db-based-graph? current-repo)
+                         [:<>
+                          (shui/button {:size :sm :variant :ghost
+                                        :on-click (fn []
+                                                    (state/pub-event! [:graph/ask-for-re-fresh]))}
+                            (shui/tabler-icon "file-report") [:span (t :sync-from-local-files)])
+
+                          (shui/button {:size :sm :variant :ghost
+                                        :on-click (fn []
+                                                    (state/pub-event! [:graph/ask-for-re-index multiple-windows? nil]))}
+                            (shui/tabler-icon "folder-bolt") [:span (t :re-index)])])
+
+                       (shui/button {:size :sm :variant :ghost
+                                     :on-click (fn []
+                                                 (if (or (nfs-handler/supported?) (mobile-util/native-platform?))
+                                                   (state/pub-event! [:graph/setup-a-repo])
+                                                   (route-handler/redirect-to-all-graphs)))}
+                         (shui/tabler-icon "folder-plus")
+                         [:span "Add new graph"])
+
+                       (shui/button {:size :sm :variant :ghost
+                                     :on-click #(state/pub-event! [:graph/new-db-graph])}
+                         (shui/tabler-icon "cylinder-plus") [:span "Add new graph (DB version)"])
+
+                       (shui/button {:size :sm :variant :ghost
+                                     :on-click #(route-handler/redirect-to-all-graphs)}
+                         (shui/tabler-icon "layout-2") [:span "All graphs"])
+                       ])]
+      (when (seq repos)
+        (let [remote? (and current-repo (:remote? (first (filter #(= current-repo (:url %)) repos))))
+              repo-name (when current-repo (db/get-repo-name current-repo))
+              short-repo-name (if current-repo
+                                (db/get-short-repo-name repo-name)
+                                "Select a Graph")]
+          (shui/trigger-as :a
+            {:tab-index 0
+             :class "item cp__repos-select-trigger"
+             :on-pointer-down
+             (fn [^js e]
+               (check-multiple-windows? state)
+               (some-> (.-target e)
+                 (.closest "a.item")
+                 (shui/popup-show!
+                   (fn [{:keys [id]}]
+                     [:<>
+                      (header-fn)
+                      (for [{:keys [hr item hover-detail title options icon]} (items-fn)]
+                        (let [on-click' (:on-click options)
+                              href' (:href options)]
+                          (if hr
+                            (shui/dropdown-menu-separator)
+                            (shui/dropdown-menu-item
+                              (assoc options
+                                :title hover-detail
+                                :on-click (fn [^js e]
+                                            (when on-click'
+                                              (when-not (false? (on-click' e))
+                                                (shui/popup-hide! id)))))
+                              (or item
+                                (if href'
+                                  [:a.flex.items-center.w-full
+                                   {:href href' :on-click #(shui/popup-hide! id)
+                                    :style {:color "inherit"}} title]
+                                  [:span.flex.items-center.gap-1.w-full
+                                   icon [:div title]]))))))
+                      (footer-fn)])
+                   {:as-dropdown? true
+                    :auto-focus? false
+                    :align "start"
+                    :content-props {:class "repos-list"}})))
+             :title repo-name}                              ;; show full path on hover
+            [:div.flex.relative.graph-icon.rounded
+             (shui/tabler-icon "database" {:size 15})]
+
+            [:div.repo-switch.pr-2.whitespace-nowrap
+             [:span.repo-name.font-medium
+              [:span.repo-text.overflow-hidden.text-ellipsis
+               (if (= config/demo-repo short-repo-name) "Demo" short-repo-name)]
+              (when remote? [:span.pl-1 (ui/icon "cloud")])]
+             [:span.dropdown-caret]]))))))
 
 (defn invalid-graph-name-warning
   []

src/main/frontend/components/repo.css

@@ -16,8 +16,8 @@
 
 .ui__dropdown-menu-content {
   &.repos-list {
-    @apply px-2;
-    @apply min-w-[260px] sm:max-w-[380px] max-h-[70vh];
+    @apply px-2 pb-[220px];
+    @apply min-w-[260px] sm:max-w-[320px] max-h-[60vh];
 
     .ui__dropdown-menu-item {
       @apply overflow-hidden overflow-ellipsis;
@@ -45,4 +45,14 @@
       @apply relative border-t-gray-09 left-1.5 top-[2px];
     }
   }
+}
+
+.cp__repos-quick-actions {
+  @apply absolute left-[1px] bottom-[1px] w-[calc(100%-2px)] bg-gray-01 px-2 py-3 border-t
+  flex flex-col gap-1 rounded-b overflow-hidden;
+
+  .ui__button {
+    @apply w-full !py-4 !justify-start opacity-70 font-medium hover:opacity-90
+    items-center gap-1.5;
+  }
 }

src/main/frontend/handler/events.cljs

@@ -679,13 +679,14 @@
   (shui/dialog-open!
     [:div {:style {:max-width 700}}
      [:p (t :sync-from-local-changes-detected)]
-     (ui/button
-       (t :yes)
-       :autoFocus "on"
-       :class "ui__modal-enter"
-       :on-click (fn []
-                   (state/close-modal!)
-                   (nfs-handler/refresh! (state/get-current-repo) refresh-cb)))]))
+     [:div.flex.justify-end
+      (ui/button
+        (t :yes)
+        :autoFocus "on"
+        :class "ui__modal-enter"
+        :on-click (fn []
+                    (shui/dialog-close!)
+                    (nfs-handler/refresh! (state/get-current-repo) refresh-cb)))]]))
 
 (defmethod handle :sync/create-remote-graph [[_ current-repo]]
   (let [graph-name (js/decodeURI (util/node-path.basename current-repo))]
@@ -1031,10 +1032,11 @@
         word word)]
      [:div.text-lg
       [:p "Switch to another repo: "]
-      (repo/repos-dropdown {:on-click (fn [e]
-                                        (util/stop e)
-                                        (state/set-state! :error/multiple-tabs-access-opfs? false)
-                                        (state/close-modal!))})]]))
+      [:div.border.rounded.bg-gray-01.overflow-hidden.w-60
+       (repo/repos-dropdown {:on-click (fn [e]
+                                         (util/stop e)
+                                         (state/set-state! :error/multiple-tabs-access-opfs? false)
+                                         (shui/dialog-close!))})]]]))
 
 (defmethod handle :show/multiple-tabs-error-dialog [_]
   (state/set-state! :error/multiple-tabs-access-opfs? true)