enhance(ux): arrow up/down for the settings aside tabs

src/main/frontend/components/settings.cljs

@@ -1048,16 +1048,6 @@
            [:div.text-base.pt-2.pl-1.opacity-70
             (util/format "🎉 You're a %s user!" (if (user-handler/alpha-user?) "Alpha" "Beta"))]])])]))
 
-;; (when-not web-platform?
-;;   [:<>
-;;    [:hr]
-;;    [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
-;;     [:label.flex.font-medium.leading-5.self-start.mt-1 (ui/icon  (if logged-in? "lock-open" "lock") {:class "mr-1"}) (t :settings-page/alpha-features)]]
-;;    [:div.flex.flex-col.gap-4
-;;     {:class (when-not user-handler/alpha-user? "opacity-50 pointer-events-none cursor-not-allowed")}
-;;     ;; features
-;;     ]])
-
 (rum/defc settings-effect
   < rum/static
   [active]
@@ -1085,7 +1075,10 @@
        (let [active-tab (first (:rum/args state))
              *active (::active state)]
          (when (keyword? active-tab)
-           (reset! *active [active-tab nil])))
+           (reset! *active [active-tab nil]))
+         (when-let [^js el (rum/dom-node state)]
+           (some-> (.querySelector el "aside.cp__settings-aside")
+                   (.focus))))
        state)
      :will-unmount
      (fn [state]
@@ -1102,7 +1095,19 @@
     [:div#settings.cp__settings-main
      (settings-effect @*active)
      [:div.cp__settings-inner
-      [:aside.md:w-64 {:style {:min-width "10rem"}}
+      [:aside.cp__settings-aside
+       {:style     {:min-width "10rem"}
+        :tab-index "-1"
+        :auto-focus "on"
+        :on-key-down (fn [^js e]
+                       (let [up? (= (.-key e) "ArrowUp")
+                             down? (= (.-key e) "ArrowDown")]
+                         (when (or up? down?)
+                           (when-let [^js active (some-> (.-target e) (.querySelector ".settings-menu-item.active"))]
+                             (when-let [^js target (if down? (.-nextSibling active) (.-previousSibling active))]
+                               (let [active (.. active -dataset -id)
+                                     target (.. target -dataset -id)]
+                                 (reset! *active (map keyword [target active]))))))))}
        [:header.cp__settings-header
         (ui/icon "settings")
         [:h1.cp__settings-modal-title (t :settings)]]
@@ -1114,7 +1119,7 @@
                [:keymap "keymap" (t :settings-page/tab-keymap) (ui/icon "keyboard")]
 
                (when (util/electron?)
-                 [:version-control "git" (t :settings-page/tab-version-control) (ui/icon "history")])
+                 [:git "git" (t :settings-page/tab-git) (ui/icon "history")])
 
                ;; (when (util/electron?)
                ;;   [:assets "assets" (t :settings-page/tab-assets) (ui/icon "box")])
@@ -1123,7 +1128,7 @@
                [:features "features" (t :settings-page/tab-features) (ui/icon "app-feature")]
 
                (when plugins-of-settings
-                 [:plugins-setting "plugins" (t :settings-of-plugins) (ui/icon "puzzle")])]]
+                 [:plugins "plugins" (t :settings-of-plugins) (ui/icon "puzzle")])]]
 
           (when label
             [:li.settings-menu-item
@@ -1134,40 +1139,42 @@
 
              [:a.flex.items-center.settings-menu-link icon [:strong text]]]))]]
 
-      [:article
-       [:header.cp__settings-header
-        [:h1.cp__settings-category-title (t (keyword (str "settings-page/tab-" (name (first @*active)))))]]
-
-       (case (first @*active)
+      (let [active-label (first @*active)]
+        [:article
+         [:header.cp__settings-header
+          [:h1.cp__settings-category-title
+           (when-not (= :plugins active-label)
+             (t (keyword (str "settings-page/tab-" (name (first @*active))))))]]
 
-         :plugins-setting
-         (let [label (second @*active)]
-           (state/pub-event! [:go/plugins-settings (:id (first plugins-of-settings))])
-           (reset! *active [label label])
-           nil)
+         (case active-label
+           :plugins
+           (let [label (second @*active)]
+             (state/pub-event! [:go/plugins-settings (:id (first plugins-of-settings))])
+             (reset! *active [label label])
+             nil)
 
-         :general
-         (settings-general current-repo)
+           :general
+           (settings-general current-repo)
 
-         :account
-         (settings-account)
+           :account
+           (settings-account)
 
-         :editor
-         (settings-editor current-repo)
+           :editor
+           (settings-editor current-repo)
 
-         :keymap
-         (shortcut2/shortcut-keymap-x)
+           :keymap
+           (shortcut2/shortcut-keymap-x)
 
-         :version-control
-         (settings-git)
+           :git
+           (settings-git)
 
-         :assets
-         (assets/settings-content)
+           :assets
+           (assets/settings-content)
 
-         :advanced
-         (settings-advanced current-repo)
+           :advanced
+           (settings-advanced current-repo)
 
-         :features
-         (settings-features)
+           :features
+           (settings-features)
 
-         nil)]]]))
+           nil)])]]))

src/main/frontend/components/settings.css

@@ -3,7 +3,7 @@
     @apply flex flex-col md:flex-row;
 
     > aside {
-      @apply bg-gray-400/5 p-4;
+      @apply bg-gray-400/5 p-4 outline-none md:w-64;
 
       > ul > li {
         > a {

src/main/frontend/components/shortcut2.cljs

@@ -99,7 +99,7 @@
        {:placeholder (t :keymap/search)
         :ref         *search-ref
         :value       (or q "")
-        :auto-focus  true
+        :auto-focus  false
         :on-key-down #(when (= 27 (.-keyCode %))
                         (util/stop %)
                         (if (string/blank? q)

src/resources/dicts/de.edn

@@ -612,7 +612,7 @@
  :settings-page/tab-assets "Anlagen"
  :settings-page/tab-features "Funktionen"
  :settings-page/tab-general "Allgemein"
- :settings-page/tab-version-control "Versionskontrolle"
+ :settings-page/tab-git "Versionskontrolle"
 
  :text/image "Bild"
 

src/resources/dicts/en.edn

@@ -327,7 +327,7 @@
  :settings-page/tab-general "General"
  :settings-page/tab-editor "Editor"
  :settings-page/tab-keymap "Keymap"
- :settings-page/tab-version-control "Version control"
+ :settings-page/tab-git "Version control"
  :settings-page/tab-account "Account"
  :settings-page/tab-advanced "Advanced"
  :settings-page/tab-assets "Assets"

src/resources/dicts/es.edn

@@ -684,7 +684,7 @@
  :settings-page/tab-features                        "Características"
  :settings-page/tab-general                         "General"
  :settings-page/tab-keymap                          "Mapa de teclado"
- :settings-page/tab-version-control                 "Control de versiones"
+ :settings-page/tab-git                 "Control de versiones"
  :settings-page/theme-dark                          "oscuro"
  :settings-page/theme-light                         "claro"
  :settings-page/theme-system                        "sistema"

src/resources/dicts/fr.edn

@@ -288,7 +288,7 @@
     :settings-page/tab-editor "Éditeur"
     :settings-page/tab-features "Fonctionnalités"
     :settings-page/tab-general "Général"
-    :settings-page/tab-version-control "Contrôle de version"
+    :settings-page/tab-git "Contrôle de version"
     :text/image "Image"
     :updater/new-version-install "Une nouvelle version a été téléchargée."
     :updater/quit-and-install "Relancez pour installer"

src/resources/dicts/id.edn

@@ -319,7 +319,7 @@
  :settings-page/tab-general "Umum"
  :settings-page/tab-editor "Penyunting"
  :settings-page/tab-keymap "Pemetaan tombol"
- :settings-page/tab-version-control "Kontrol versi"
+ :settings-page/tab-git "Kontrol versi"
  :settings-page/tab-account "Akun"
  :settings-page/tab-advanced "Lanjutan"
  :settings-page/tab-assets "Aset"

src/resources/dicts/it.edn

@@ -110,7 +110,7 @@
  :settings-page/developer-mode-desc "La modalità sviluppatore aiuta i contributori e gli sviluppatori di estensioni a testare le loro integrazioni con Logseq in modo più efficiente."
  :settings-page/current-version "Versione attuale"
  :settings-page/tab-general "Generale"
- :settings-page/tab-version-control "Controllo di versione"
+ :settings-page/tab-git "Controllo di versione"
  :settings-page/tab-advanced "Avanzate"
  :settings-page/plugin-system "Sistema di plugin"
  :settings-page/network-proxy "Proxy di rete"

src/resources/dicts/ja.edn

@@ -319,7 +319,7 @@
  :settings-page/tab-general "一般"
  :settings-page/tab-editor "エディタ"
  :settings-page/tab-keymap "ショートカットキー"
- :settings-page/tab-version-control "バージョンコントロール"
+ :settings-page/tab-git "バージョンコントロール"
  :settings-page/tab-account "アカウント"
  :settings-page/tab-advanced "高度な設定"
  :settings-page/tab-assets "アセット"

src/resources/dicts/ko.edn

@@ -113,7 +113,7 @@
  :settings-page/current-version "현재 버전"
  :settings-page/tab-general "일반"
  :settings-page/tab-editor "에디터"
- :settings-page/tab-version-control "버전 컨트롤"
+ :settings-page/tab-git "버전 컨트롤"
  :settings-page/tab-advanced "고급"
  :settings-page/plugin-system "플러그인 시스템"
  :settings-page/network-proxy "네트워크 프록시"

src/resources/dicts/nb-no.edn

@@ -110,7 +110,7 @@
  :settings-page/developer-mode-desc "Utviklermodus hjelper bidragsytere og tilleggsutviklere med å teste sine integrasjoner mot Logseq mer effektivt."
  :settings-page/current-version "Nåværende versjon"
  :settings-page/tab-general "Generelt"
- :settings-page/tab-version-control "Versjonskontroll"
+ :settings-page/tab-git "Versjonskontroll"
  :settings-page/tab-advanced "Avansert"
  :settings-page/custom-global-configuration "Egendefinert global konfigurasjon"
  :settings-page/edit-global-config-edn "Rediger global config.edn"

src/resources/dicts/nl.edn

@@ -219,7 +219,7 @@
  :settings-page/spell-checker "Spellingcontrole"
  :settings-page/tab-advanced "Geavanceerd"
  :settings-page/tab-general "Algemeen"
- :settings-page/tab-version-control "Versiebeheer"
+ :settings-page/tab-git "Versiebeheer"
 
  :text/image "Afbeelding"
 

src/resources/dicts/pl.edn

@@ -116,7 +116,7 @@
  :settings-page/current-version "Aktualna wersja"
  :settings-page/tab-general "Ogólne"
  :settings-page/tab-editor "Edytor"
- :settings-page/tab-version-control "Kontrola wersji"
+ :settings-page/tab-git "Kontrola wersji"
  :settings-page/tab-advanced "Zaawansowane"
  :settings-page/plugin-system "System pluginów"
  :settings-page/enable-flashcards "Fiszki"

src/resources/dicts/pt-br.edn

@@ -92,7 +92,7 @@
  :settings-page/current-version "Versão atual"
  :settings-page/tab-general "Geral"
  :settings-page/tab-advanced "Avançado"
- :settings-page/tab-version-control "Controle de Versões"
+ :settings-page/tab-git "Controle de Versões"
  :yes "Sim"
  :submit "Submeter"
  :cancel "Cancelar"

src/resources/dicts/pt-pt.edn

@@ -183,7 +183,7 @@
  :settings-page/developer-mode-desc "O modo de desenvolvedor ajuda os contribuidores e programadores de extensões a testar as suas integrações com o Logseq mais eficientemente."
  :settings-page/current-version "Versão atual"
  :settings-page/tab-general "Geral"
- :settings-page/tab-version-control "Controlo de Versões"
+ :settings-page/tab-git "Controlo de Versões"
  :settings-page/tab-advanced "Avançado"
  :settings-page/tab-assets "Recursos"
  :settings-page/tab-features "Funcionalidades"

src/resources/dicts/ru.edn

@@ -225,7 +225,7 @@
  :settings-page/current-version                        "Версия"
  :settings-page/tab-general                            "Общие"
  :settings-page/tab-editor                             "Редактор"
- :settings-page/tab-version-control                    "Управление версиями"
+ :settings-page/tab-git                    "Управление версиями"
  :settings-page/tab-account                            "Аккаунт"
  :settings-page/tab-advanced                           "Продвинутые"
  :settings-page/tab-assets                             "Объекты"

src/resources/dicts/sk.edn

@@ -176,7 +176,7 @@
  :settings-page/developer-mode-desc                "Režim pre vývojárov pomáha prispievateľom a vývojárom doplnkov efektívnejšie testovať integráciu s Logseq."
  :settings-page/current-version                    "Aktuálna verzia"
  :settings-page/tab-general                        "Všeobecné"
- :settings-page/tab-version-control                "Verzovanie"
+ :settings-page/tab-git                "Verzovanie"
  :settings-page/tab-advanced                       "Pokročilé"
  :settings-page/tab-features                       "Funkcie"
  :settings-page/plugin-system                      "Doplnky"

src/resources/dicts/tr.edn

@@ -319,7 +319,7 @@
  :settings-page/tab-general "Genel"
  :settings-page/tab-editor "Düzenleyici"
  :settings-page/tab-keymap "Tuş haritası"
- :settings-page/tab-version-control "Sürüm denetimi"
+ :settings-page/tab-git "Sürüm denetimi"
  :settings-page/tab-account "Hesap"
  :settings-page/tab-advanced "Gelişmiş"
  :settings-page/tab-assets "Varlıklar"

src/resources/dicts/uk.edn

@@ -208,7 +208,7 @@
  :settings-page/current-version "Поточна версія"
  :settings-page/tab-general "Головна"
  :settings-page/tab-editor "Редактор"
- :settings-page/tab-version-control "Контроль версій"
+ :settings-page/tab-git "Контроль версій"
  :settings-page/tab-advanced "Розширення"
  :settings-page/tab-assets "Ассети"
  :settings-page/tab-features "Функції"

src/resources/dicts/zh-cn.edn

@@ -235,7 +235,7 @@
  :settings-page/tab-assets "附件设置"
  :settings-page/tab-advanced "高级设置"
  :settings-page/tab-features "更多功能"
- :settings-page/tab-version-control "多版本控制"
+ :settings-page/tab-git "版本控制"
  :settings-page/tab-account "帐户"
  :settings-page/plugin-system "插件系统"
  :settings-page/network-proxy "网络代理"

src/resources/dicts/zh-hant.edn

@@ -181,7 +181,7 @@
  :settings-page/developer-mode-desc "開發者模式可以協助貢獻者及擴充套件開發人員更有效率地測試 Logseq。"
  :settings-page/current-version "目前版本"
  :settings-page/tab-editor "編輯器"
- :settings-page/tab-version-control "版本控制"
+ :settings-page/tab-git "版本控制"
  :settings-page/tab-advanced "進階功能"
  :settings-page/tab-assets "附件設定"
  :settings-page/tab-features "附加功能"