✨ Add entry in main menu (workspace) for ui scale setting

frontend/src/app/main/refs.cljs

@@ -32,13 +32,21 @@
 (def profile
   (l/derived (l/key :profile) st/state))
 
+(def ui-scale-compact
+  "UI scale factor for the default, compact interface."
+  1.0)
+
+(def ui-scale-comfortable
+  "UI scale factor for the enlarged, comfortable interface."
+  1.15)
+
 (def ui-scale
-  "Effective UI scale factor, gated by the `:ui-scale` flag. Returns 1.0 when the
-   flag is disabled or the profile prop has never been set."
+  "Effective UI scale factor, gated by the `:ui-scale` flag. Returns the compact
+   scale when the flag is disabled or the profile prop has never been set."
   (l/derived (fn [state]
                (if (contains? cf/flags :ui-scale)
-                 (or (get-in state [:profile :props :ui-scale]) 1.0)
-                 1.0))
+                 (or (get-in state [:profile :props :ui-scale]) ui-scale-compact)
+                 ui-scale-compact))
              st/state))
 
 (def current-page-id

frontend/src/app/main/ui/settings/options.cljs

@@ -123,7 +123,9 @@
 (mf/defc ui-scale-settings*
   [{:keys [ui-scale]}]
   (let [initial (mf/with-memo [ui-scale]
-                  {:ui-scale (if (= ui-scale 1.15) "comfortable" "compact")})
+                  {:ui-scale (if (= ui-scale refs/ui-scale-comfortable)
+                               "comfortable"
+                               "compact")})
 
         ;; The form only holds the radio group state: there is no submit step,
         ;; the change is applied (and persisted) as soon as an option is picked.
@@ -133,7 +135,9 @@
         handle-scale-change
         (mf/use-fn
          (fn [_ value]
-           (let [scale (if (= value "comfortable") 1.15 1.0)]
+           (let [scale (if (= value "comfortable")
+                         refs/ui-scale-comfortable
+                         refs/ui-scale-compact)]
              (st/emit! (ev/event {::ev/name "change-ui-scale"
                                   ::ev/origin "settings"
                                   :scale scale})

frontend/src/app/main/ui/workspace/main_menu.cljs

@@ -228,8 +228,9 @@
 (mf/defc preferences-menu*
   {::mf/private true
    ::mf/wrap [mf/memo]}
-  [{:keys [layout profile toggle-flag on-close toggle-theme toggle-render]}]
+  [{:keys [layout profile toggle-flag on-close toggle-theme toggle-render toggle-ui-scale]}]
   (let [renderer (or (-> profile :props :renderer) :svg)
+        ui-scale (or (-> profile :props :ui-scale) refs/ui-scale-compact)
 
         show-nudge-options
         (mf/use-fn
@@ -326,6 +327,20 @@
          "system" (tr "workspace.header.menu.toggle-dark-theme")
          (tr "workspace.header.menu.toggle-light-theme"))]
       [:> shortcuts* {:id :toggle-theme}]]
+
+     (when (contains? cf/flags :ui-scale)
+       [:> dropdown-menu-item* {:on-click    toggle-ui-scale
+                                :class       (stl/css :base-menu-item :submenu-item)
+                                :on-key-down (fn [event]
+                                               (when (kbd/enter? event)
+                                                 (toggle-ui-scale event)))
+                                :data-testid "toggle-ui-scale"
+                                :id          "file-menu-toggle-ui-scale"}
+        [:span {:class (stl/css :item-name)}
+         (if (= ui-scale refs/ui-scale-comfortable)
+           (tr "workspace.header.menu.ui-scale-compact")
+           (tr "workspace.header.menu.ui-scale-comfortable"))]])
+
      (when (contains? cf/flags :render-switch)
        [:> dropdown-menu-item* {:on-click    toggle-render
                                 :class       (stl/css :base-menu-item :submenu-item)
@@ -949,6 +964,19 @@
            (dom/stop-propagation event)
            (st/emit! (du/toggle-theme))))
 
+        toggle-ui-scale
+        (mf/use-fn
+         (mf/deps profile)
+         (fn [event]
+           (dom/stop-propagation event)
+           (let [scale (if (= (-> profile :props :ui-scale) refs/ui-scale-comfortable)
+                         refs/ui-scale-compact
+                         refs/ui-scale-comfortable)]
+             (st/emit! (ev/event {::ev/name "change-ui-scale"
+                                  ::ev/origin "workspace:menu"
+                                  :scale scale})
+                       (du/update-profile-props {:ui-scale scale})))))
+
         toggle-render
         (mf/use-fn
          (mf/deps profile)
@@ -1148,6 +1176,7 @@
                               :toggle-flag toggle-flag
                               :toggle-theme toggle-theme
                               :toggle-render toggle-render
+                              :toggle-ui-scale toggle-ui-scale
                               :on-close close-sub-menu}]
 
        :plugins

frontend/translations/en.po

@@ -6910,6 +6910,14 @@ msgstr "Switch to light theme"
 msgid "workspace.header.menu.toggle-system-theme"
 msgstr "Switch to system theme"
 
+#: src/app/main/ui/workspace/main_menu.cljs:342
+msgid "workspace.header.menu.ui-scale-comfortable"
+msgstr "Switch to comfortable UI scale"
+
+#: src/app/main/ui/workspace/main_menu.cljs:341
+msgid "workspace.header.menu.ui-scale-compact"
+msgstr "Switch to compact UI scale"
+
 #: src/app/main/ui/workspace/main_menu.cljs:548
 msgid "workspace.header.menu.undo"
 msgstr "Undo"

frontend/translations/es.po

@@ -6753,6 +6753,14 @@ msgstr "Cambiar a tema claro"
 msgid "workspace.header.menu.toggle-system-theme"
 msgstr "Cambiar a tema del sistema"
 
+#: src/app/main/ui/workspace/main_menu.cljs:342
+msgid "workspace.header.menu.ui-scale-comfortable"
+msgstr "Cambiar a escalado de interfaz cómodo"
+
+#: src/app/main/ui/workspace/main_menu.cljs:341
+msgid "workspace.header.menu.ui-scale-compact"
+msgstr "Cambiar a escalado de interfaz compacto"
+
 #: src/app/main/ui/workspace/main_menu.cljs:548
 msgid "workspace.header.menu.undo"
 msgstr "Deshacer"