enhance(ui): polish the repos select

e2e-tests/utils.ts

@@ -140,12 +140,12 @@ export async function loadLocalGraph(page: Page, path: string): Promise<void> {
       await expect(sidebar).toHaveClass(/is-open/)
     }
 
-    await page.click('#left-sidebar #repo-switch');
+    await page.click('#left-sidebar .repo-switch');
     await page.waitForSelector('#left-sidebar .dropdown-wrapper >> text="Add new graph"',
       { state: 'visible', timeout: 5000 })
     await page.click('text=Add new graph')
 
-    expect(page.locator('#repo-name')).toHaveText(pathlib.basename(path))
+    expect(page.locator('.repo-name')).toHaveText(pathlib.basename(path))
   }
 
   setMockedOpenDirPath(page, ''); // reset it

src/main/frontend/components/container.cljs

@@ -367,7 +367,7 @@
         {:aria-label "Navigation menu"}
         (repo/repos-dropdown)
 
-        [:div.nav-header.flex.flex-col.mt-2
+        [:div.nav-header.flex.flex-col.mt-1
          (let [page (:page default-home)]
            (if (and page (not (state/enable-journals? (state/get-current-repo))))
              (sidebar-item
@@ -955,7 +955,7 @@
       [:button#skip-to-main
        {:on-click #(ui/focus-element (ui/main-node))
         :on-key-up (fn [e]
-                     (when (= (.-key e) "Enter")
+                     (when (= "Enter" (.-key e))
                        (ui/focus-element (ui/main-node))))}
        (t :accessibility/skip-to-main-content)]
       [:div.#app-container

src/main/frontend/components/container.css

@@ -778,7 +778,7 @@
 
 /* Workaround for Linux Intel GPU text rendering issue GH#7233 */
 .is-electron.is-linux .cp__menubar-repos {
-  #repo-switch, .nav-header .flex-1 {
+  .repo-switch, .nav-header .flex-1 {
     position: relative;
   }
 }

src/main/frontend/components/db_based/page.cljs

@@ -228,7 +228,7 @@
           (if collapsed?
             (when (or (seq (:block/properties page))
                       (and class? (seq (:properties (:block/schema page)))))
-              [:div.px-4
+              [:div.pl-4
                (page-properties page {:mode (if class? :class :page)})])
-            [:div.pt-2.px-4
+            [:div.pt-2.pl-4
              (page-configure page *mode)]))]])))

src/main/frontend/components/page.css

@@ -413,7 +413,7 @@ html.is-native-ios {
       @apply py-0 relative -top-[14px] -mb-[16px] min-h-[44px];
 
       &:has(.ls-page-properties) {
-        @apply mb-4 opacity-90;
+        @apply mb-3 opacity-90;
       }
     }
 

src/main/frontend/components/repo.cljs

@@ -278,50 +278,49 @@
                 short-repo-name (if current-repo
                                   (db/get-short-repo-name repo-name)
                                   "Select a Graph")]
-            [:a.item.group.flex.items-center.p-2.text-sm.font-medium.rounded-md
-             {:on-click (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
-                               :align "start"
-                               :content-props {:class "repos-list"}})))
-              :title repo-name} ;; show full path on hover
-             [:div.flex.flex-row.items-center
-              [:div.flex.relative.graph-icon.rounded
-               (let [icon "database"
-                     opts {:size 14}]
-                 (ui/icon icon opts))]
+            (shui/trigger-as :a
+              {:tab-index 0
+               :class "item cp__repos-select-trigger"
+               :on-click (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
+                                :align "start"
+                                :content-props {:class "repos-list"}})))
+               :title repo-name}                            ;; show full path on hover
+              [:div.flex.flex-row.items-center
+               [:div.flex.relative.graph-icon.rounded
+                (shui/tabler-icon "database" {:size 15})]
 
-              [:div.graphs
-               [:span#repo-switch.block.pr-2.whitespace-nowrap
-                [:span [:span#repo-name.font-medium
-                        [:span.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.ml-2 {:style {:border-top-color "#6b7280"}}]]]]]))))))
+               [:div.repo-switch.block.pr-2.whitespace-nowrap
+                [:span.repo-name.font-medium
+                 [:span.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.ml-2 {:style {:border-top-color "#6b7280"}}]]])))))))
 
 (defn invalid-graph-name-warning
   []

src/main/frontend/components/repo.css

@@ -23,4 +23,10 @@
       @apply overflow-hidden overflow-ellipsis;
     }
   }
+}
+
+.cp__repos-select {
+  &-trigger {
+    @apply flex items-center p-2 text-sm font-medium rounded-md;
+  }
 }