fix: use the same graph switch component on all the platforms

Also, support import on mobile

src/main/frontend/components/imports.cljs

@@ -493,9 +493,10 @@
        (setups/setups-container
         :importer
         [:article.flex.flex-col.items-center.importer.py-16.px-8
-         [:section.c.text-center
-          [:h1 (t :on-boarding/importing-title)]
-          [:h2 (t :on-boarding/importing-desc)]]
+         (when-not (util/mobile?)
+           [:section.c.text-center
+            [:h1 (t :on-boarding/importing-title)]
+            [:h2 (t :on-boarding/importing-desc)]])
          [:section.d.md:flex.flex-col
           [:label.action-input.flex.items-center.mx-2.my-2
            [:span.as-flex-center [:i (svg/logo 28)]]
@@ -509,7 +510,7 @@
                           (shui/dialog-open!
                            #(set-graph-name-dialog e {:sqlite? true})))}]]
 
-          (when (or (util/electron?) util/web-platform?)
+          (when-not (util/mobile?)
             [:label.action-input.flex.items-center.mx-2.my-2
              [:span.as-flex-center [:i (svg/logo 28)]]
              [:span.flex.flex-col
@@ -525,31 +526,29 @@
                                       (import-file-to-db-handler e {}))
                                     1000)}]])
 
-          (when (or (util/electron?) util/web-platform?)
-            [:label.action-input.flex.items-center.mx-2.my-2
-             [:span.as-flex-center [:i (svg/logo 28)]]
-             [:span.flex.flex-col
-              [[:strong "Debug Transit"]
-               [:small "Import debug transit file into a new DB graph"]]]
-             [:input.absolute.hidden
-              {:id "import-debug-transit"
-               :type "file"
-               :on-change (fn [e]
-                            (shui/dialog-open!
-                             #(set-graph-name-dialog e {:debug-transit? true})))}]])
+          [:label.action-input.flex.items-center.mx-2.my-2
+           [:span.as-flex-center [:i (svg/logo 28)]]
+           [:span.flex.flex-col
+            [[:strong "Debug Transit"]
+             [:small "Import debug transit file into a new DB graph"]]]
+           [:input.absolute.hidden
+            {:id "import-debug-transit"
+             :type "file"
+             :on-change (fn [e]
+                          (shui/dialog-open!
+                           #(set-graph-name-dialog e {:debug-transit? true})))}]]
 
-          (when (or (util/electron?) util/web-platform?)
-            [:label.action-input.flex.items-center.mx-2.my-2
-             [:span.as-flex-center [:i (svg/logo 28)]]
-             [:span.flex.flex-col
-              [[:strong "EDN to DB graph"]
-               [:small "Import a DB graph's EDN export into a new DB graph"]]]
-             [:input.absolute.hidden
-              {:id "import-db-edn"
-               :type "file"
-               :on-change (fn [e]
-                            (shui/dialog-open!
-                             #(set-graph-name-dialog e {:db-edn? true})))}]])
+          [:label.action-input.flex.items-center.mx-2.my-2
+           [:span.as-flex-center [:i (svg/logo 28)]]
+           [:span.flex.flex-col
+            [[:strong "EDN to DB graph"]
+             [:small "Import a DB graph's EDN export into a new DB graph"]]]
+           [:input.absolute.hidden
+            {:id "import-db-edn"
+             :type "file"
+             :on-change (fn [e]
+                          (shui/dialog-open!
+                           #(set-graph-name-dialog e {:db-edn? true})))}]]
 
           (when (and (util/electron?) support-file-based?)
             [:label.action-input.flex.items-center.mx-2.my-2

src/main/frontend/components/repo.cljs

@@ -378,10 +378,11 @@
      [:div.cp__repos-list-wrap
       (for [{:keys [hr item hover-detail title options icon]} (items-fn)]
         (let [on-click' (:on-click options)
-              href' (:href options)]
+              href' (:href options)
+              menu-item (if (util/mobile?) ui/menu-link shui/dropdown-menu-item)]
           (if hr
-            (shui/dropdown-menu-separator)
-            (shui/dropdown-menu-item
+            (if (util/mobile?) [:hr.py-2] (shui/dropdown-menu-separator))
+            (menu-item
              (assoc options
                     :title hover-detail
                     :on-click (fn [^js e]

src/main/frontend/components/repo.css

@@ -61,7 +61,7 @@
 }
 
 .cp__repos-quick-actions {
-  @apply -mx-2 px-2 pb-1.5 pt-3 border-t flex flex-col rounded-b h-fit;
+  @apply -mx-2 pl-1 pr-2 pb-1.5 pt-3 border-t flex flex-col rounded-b h-fit;
 
   .ui__button {
     @apply w-full !py-4 !justify-start opacity-70 font-medium hover:opacity-90

src/main/mobile/components/header.cljs

@@ -1,19 +1,17 @@
 (ns mobile.components.header
   "App top header"
-  (:require [clojure.string :as string]
+  (:require [frontend.components.repo :as repo]
             [frontend.components.rtc.indicator :as rtc-indicator]
             [frontend.date :as date]
             [frontend.db :as db]
             [frontend.db.conn :as db-conn]
             [frontend.handler.page :as page-handler]
-            [frontend.handler.repo :as repo-handler]
             [frontend.handler.user :as user-handler]
             [frontend.mobile.util :as mobile-util]
             [frontend.state :as state]
             [frontend.ui :as ui]
             [frontend.util :as util]
             [goog.date :as gdate]
-            [logseq.common.config :as common-config]
             [logseq.db :as ldb]
             [logseq.shui.ui :as shui]
             [mobile.components.ui :as ui-component]
@@ -22,19 +20,9 @@
             [promesa.core :as p]
             [rum.core :as rum]))
 
-(rum/defc app-graphs-select < rum/reactive
+(rum/defc app-graphs-select
   []
   (let [current-repo (state/get-current-repo)
-        graphs (->> (state/sub [:me :repos])
-                    (util/distinct-by :url))
-        remote-graphs (state/sub :rtc/graphs)
-        graphs (->>
-                (if (seq remote-graphs)
-                  (repo-handler/combine-local-&-remote-graphs graphs remote-graphs)
-                  graphs)
-                (filter (fn [item]
-                          (and (string? (:url item))
-                               (string/starts-with? (:url item) common-config/db-version-prefix)))))
         short-repo-name (if current-repo
                           (db-conn/get-short-repo-name current-repo)
                           "Select a Graph")]
@@ -42,27 +30,13 @@
      (shui/button
       {:variant :text
        :size :sm
-       :on-click (fn []
-                   (let [buttons (concat
-                                  (->>
-                                   (for [repo graphs]
-                                     {:text (some-> (:url repo) (string/replace #"^logseq_db_" ""))
-                                      :role (:url repo)})
-                                   (remove (fn [{:keys [text]}] (string/blank? text))))
-                                  [{:text [:div.text-gray-09.pb-4.active:opacity-80.flex.justify-center
-                                           "+ Add new graph"]
-                                    :role "add-new-graph"}])]
-                     (ui-component/open-popup! "Switch graph"
-                                               {:modal-props {:class "graph-switcher"}
-                                                :buttons buttons
-                                                :on-action (fn [e]
-                                                             (when-let [role (:role e)]
-                                                               (if (= "add-new-graph" role)
-                                                                 (state/pub-event! [:graph/new-db-graph])
-                                                                 (when (string/starts-with? role "logseq_db_")
-                                                                   (state/pub-event! [:graph/switch role]))))
-                                                             (ui-component/close-popup!))
-                                                :type :action-sheet})))}
+       :on-click (fn [e]
+                   (shui/popup-show! (.-target e)
+                                     (fn [{:keys [id]}]
+                                       (repo/repos-dropdown-content {:contentid id}))
+                                     {:id :switch-graph
+                                      :default-height false
+                                      :content-props {:class "repos-list"}}))}
       [:span.flex.items-center.pt-1
        [:span.overflow-hidden.text-ellipsis.block.text-base
         {:style {:max-width "40vw"}}

src/main/mobile/core.cljs

@@ -2,12 +2,13 @@
   "Mobile core"
   (:require ["react-dom/client" :as rdc]
             [frontend.background-tasks]
-            [frontend.components.page :as page]
+            [frontend.components.imports :as imports]
             [frontend.db.async :as db-async]
             [frontend.handler :as fhandler]
             [frontend.handler.db-based.rtc-background-tasks]
             [frontend.state :as state]
             [frontend.util :as util]
+            [logseq.shui.ui :as shui]
             [mobile.components.app :as app]
             [mobile.events]
             [mobile.init :as init]
@@ -26,32 +27,48 @@
   [["/"
     {:name :home}]
    ["/page/:name"
-    {:name :page
-     :view (fn [route-match]
-             (page/page-cp (assoc route-match :current-page? true)))}]])
+    {:name :page}]
+   ["/graphs"
+    {:name :graphs}]
+   ["/import"
+    {:name :import}]])
 
 (defn set-router!
   []
   (rfe/start!
    (rf/router routes nil)
    (fn [route]
-     (when (= :page (get-in route [:data :name]))
-       (let [id-str (get-in route [:path-params :name])]
-         (when (util/uuid-string? id-str)
-           (let [page-uuid (uuid id-str)
-                 repo (state/get-current-repo)]
-             (when (and repo page-uuid)
-               (p/let [entity (db-async/<get-block repo page-uuid
-                                                   {:children? false
-                                                    :skip-refresh? true})]
-                 (when entity
-                   ;; close sidebar
-                   (when (mobile-state/left-sidebar-open?)
-                     (mobile-state/close-left-sidebar!))
-                   (when (state/get-edit-block)
-                     (state/clear-edit!))
+     (let [route-name (get-in route [:data :name])]
+       (case route-name
+         :page
+         (let [id-str (get-in route [:path-params :name])]
+           (when (util/uuid-string? id-str)
+             (let [page-uuid (uuid id-str)
+                   repo (state/get-current-repo)]
+               (when (and repo page-uuid)
+                 (p/let [entity (db-async/<get-block repo page-uuid
+                                                     {:children? false
+                                                      :skip-refresh? true})]
+                   (when entity
+                     ;; close sidebar
+                     (when (mobile-state/left-sidebar-open?)
+                       (mobile-state/close-left-sidebar!))
+                     (when (state/get-edit-block)
+                       (state/clear-edit!))
 
-                   (mobile-state/open-block-modal! entity)))))))))
+                     (mobile-state/open-block-modal! entity)))))))
+
+         :graphs
+         (mobile-state/redirect-to-tab! "settings")
+
+         :import
+         (js/setTimeout
+          #(shui/popup-show! nil (fn []
+                                   (imports/importer {}))
+                             {:id :import})
+          500)
+
+         nil)))
 
    ;; set to false to enable HistoryAPI
    {:use-fragment true}))

tailwind.mobile.css

@@ -22,6 +22,8 @@
 @import "src/main/frontend/mobile/index.css";
 @import "src/main/frontend/components/theme.css";
 @import "src/main/frontend/components/container.css";
+@import "src/main/frontend/components/repo.css";
+@import "src/main/frontend/components/onboarding/index.css";
 @import "src/main/frontend/components/block.css";
 @import "src/main/frontend/components/property.css";
 @import "src/main/frontend/components/editor.css";