✨ Update settings UX to use radio buttons

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

@@ -7,6 +7,7 @@
 (ns app.main.ui.settings.options
   (:require-macros [app.main.style :as stl])
   (:require
+   [app.common.schema :as sm]
    [app.config :as cf]
    [app.main.data.event :as ev]
    [app.main.data.notifications :as ntf]
@@ -15,7 +16,6 @@
    [app.main.router :as rt]
    [app.main.store :as st]
    [app.main.ui.components.forms :as fm]
-   [app.main.ui.ds.controls.select :refer [select*]]
    [app.main.ui.ds.controls.switch :refer [switch*]]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*]]
    [app.main.ui.ds.foundations.typography :as t]
@@ -32,6 +32,10 @@
    [:lang {:optional true} [:string {:max 20}]]
    [:theme {:optional true} [:string {:max 250}]]])
 
+(def ^:private schema:ui-scale-form
+  [:map {:title "UiScaleForm"}
+   [:ui-scale [::sm/one-of #{:compact :comfortable}]]])
+
 (defn- on-success
   [_]
   (st/emit! (ntf/success (tr "notifications.profile-saved"))))
@@ -118,11 +122,18 @@
 
 (mf/defc ui-scale-settings*
   [{:keys [ui-scale]}]
-  (let [selected (if (= ui-scale 1.15) "1.15" "1")
+  (let [initial (mf/with-memo [ui-scale]
+                  {:ui-scale (if (= ui-scale 1.15) "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.
+        form    (fm/use-form :schema schema:ui-scale-form
+                             :initial initial)
+
         handle-scale-change
         (mf/use-fn
-         (fn [value]
-           (let [scale (if (= value "1.15") 1.15 1.0)]
+         (fn [_ value]
+           (let [scale (if (= value "comfortable") 1.15 1.0)]
              (st/emit! (ev/event {::ev/name "change-ui-scale"
                                   ::ev/origin "settings"
                                   :scale scale})
@@ -132,10 +143,13 @@
      [:header {:class (stl/css :ui-scale-header)}
       [:> heading* {:class (stl/css :title) :level 2 :typography t/title-large} (tr "dashboard.ui-scale.title")]]
      [:> text* {:class (stl/css :description) :typography t/body-medium} (tr "dashboard.ui-scale.description")]
-     [:> select* {:default-selected selected
-                  :options [{:id "1" :label (tr "dashboard.ui-scale.1x")}
-                            {:id "1.15" :label (tr "dashboard.ui-scale.115x")}]
-                  :on-change handle-scale-change}]]))
+     [:& fm/radio-buttons
+      {:options [{:label (tr "dashboard.ui-scale.compact") :value "compact"}
+                 {:label (tr "dashboard.ui-scale.comfortable") :value "comfortable"}]
+       :name :ui-scale
+       :form form
+       :on-change handle-scale-change
+       :class (stl/css :ui-scale-radio-btns)}]]))
 
 (mf/defc options-page*
   []

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

@@ -45,6 +45,14 @@
   padding-block-end: var(--sp-xxxl);
 }
 
+// Stack the options instead of the default 3-column grid of `.custom-radio`,
+// which would leave a dangling empty column with only two options.
+.ui-scale-radio-btns {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
 .description {
   color: var(--color-foreground-secondary);
 }

frontend/translations/en.po

@@ -1328,23 +1328,23 @@ msgstr "No limits on creativity"
 msgid "dashboard.upgrade-plan.penpot-free"
 msgstr "Penpot Free"
 
-#: src/app/main/ui/settings/options.cljs:135
-msgid "dashboard.ui-scale.115x"
-msgstr "1.15x (Medium)"
+#: src/app/main/ui/settings/options.cljs:148
+msgid "dashboard.ui-scale.comfortable"
+msgstr "Comfortable"
 
-#: src/app/main/ui/settings/options.cljs:135
-msgid "dashboard.ui-scale.1x"
-msgstr "1x (Default)"
+#: src/app/main/ui/settings/options.cljs:147
+msgid "dashboard.ui-scale.compact"
+msgstr "Compact (default)"
 
-#: src/app/main/ui/settings/options.cljs:133
+#: src/app/main/ui/settings/options.cljs:145
 msgid "dashboard.ui-scale.description"
-msgstr "Scale the Penpot interface. This does not affect the design canvas."
+msgstr "Scale the Penpot interface. This does not affect the workspace canvas."
 
-#: src/app/main/ui/settings/options.cljs:132
+#: src/app/main/ui/settings/options.cljs:144
 msgid "dashboard.ui-scale.title"
 msgstr "UI scale"
 
-#: src/app/main/ui/settings/options.cljs:129
+#: src/app/main/ui/settings/options.cljs:141
 msgid "dashboard.ui-scale.updated"
 msgstr "UI scale was updated"
 

frontend/translations/es.po

@@ -1339,6 +1339,26 @@ msgstr "Sin límites a la creatividad"
 msgid "dashboard.upgrade-plan.penpot-free"
 msgstr "Penpot Gratis"
 
+#: src/app/main/ui/settings/options.cljs:148
+msgid "dashboard.ui-scale.comfortable"
+msgstr "Cómodo"
+
+#: src/app/main/ui/settings/options.cljs:147
+msgid "dashboard.ui-scale.compact"
+msgstr "Compacto (valor por defecto)"
+
+#: src/app/main/ui/settings/options.cljs:145
+msgid "dashboard.ui-scale.description"
+msgstr "Escala la interfaz de Penpot. Esto no afecta al canvas del área de trabajo."
+
+#: src/app/main/ui/settings/options.cljs:144
+msgid "dashboard.ui-scale.title"
+msgstr "Escalado de interfaz"
+
+#: src/app/main/ui/settings/options.cljs:141
+msgid "dashboard.ui-scale.updated"
+msgstr "Escalado de interfaz actualizado"
+
 #, unused
 msgid "dashboard.user-no-longer-belong-org"
 msgstr "Ya no perteneces a la organización %s"