feat: Allow to choose the text size of the application

Author: marienfressinaud

locales/fr_FR/LC_MESSAGES/main.mo

@@ -1,8 +1,8 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Flus\n"
-"POT-Creation-Date: 2026-04-20 11:35+0200\n"
-"PO-Revision-Date: 2026-04-20 11:36+0200\n"
+"POT-Creation-Date: 2026-04-20 12:17+0200\n"
+"PO-Revision-Date: 2026-04-20 12:17+0200\n"
 "Last-Translator: Marien Fressinaud <dev@marienfressinaud.fr>\n"
 "Language-Team: \n"
 "Language: fr_FR\n"
@@ -210,11 +210,11 @@ msgstr "L’URL est invalide."
 msgid "You already have configured a Mastodon account."
 msgstr "Vous avez déjà configuré un compte Mastodon."
 
-#: forms/security/AskResetPassword.php:22 models/User.php:60
+#: forms/security/AskResetPassword.php:22 models/User.php:62
 msgid "The address email is required."
 msgstr "L’adresse courriel est obligatoire."
 
-#: forms/security/AskResetPassword.php:25 models/User.php:63
+#: forms/security/AskResetPassword.php:25 models/User.php:65
 msgid "The address email is invalid."
 msgstr "L’adresse courriel est invalide."
 
@@ -235,11 +235,11 @@ msgstr "L’une des collections associées n’existe pas."
 msgid "Sorry but you cannot do that in the demo 😉"
 msgstr "Désolé mais vous ne pouvez pas faire ça dans la démo 😉"
 
-#: forms/traits/Locale.php:19 models/User.php:92
+#: forms/traits/Locale.php:19 models/User.php:94
 msgid "The locale is required."
 msgstr "La langue est obligatoire."
 
-#: forms/traits/Locale.php:22 models/User.php:95
+#: forms/traits/Locale.php:22 models/User.php:97
 msgid "The locale is invalid."
 msgstr "La langue est invalide."
 
@@ -255,6 +255,18 @@ msgstr ""
 msgid "The token has expired or has been invalidated."
 msgstr "Le token a expiré ou a été invalidé."
 
+#: forms/users/Preferences.php:47
+msgid "Small"
+msgstr "Petite"
+
+#: forms/users/Preferences.php:48
+msgid "Medium"
+msgstr "Moyenne"
+
+#: forms/users/Preferences.php:49
+msgid "Large"
+msgstr "Grande"
+
 #: mailers/Support.php:32
 #, php-format
 msgid "[%s] Contact: %s"
@@ -339,26 +351,38 @@ msgstr "Le nom est obligatoire."
 msgid "The label must be less than {max} characters."
 msgstr "Le nom doit faire moins de {max} caractères."
 
-#: models/User.php:66
+#: models/User.php:68
 msgid "An account already exists with this email address."
 msgstr "Un compte existe déjà avec cette adresse courriel."
 
-#: models/User.php:72
+#: models/User.php:74
 msgid "The username is required."
 msgstr "Le nom d’utilisateur·ice est obligatoire."
 
-#: models/User.php:76
+#: models/User.php:78
 msgid "The username must be less than {max} characters."
 msgstr "Le nom d’utilisateur·ice ne doit pas faire plus de {max} caractères."
 
-#: models/User.php:80
+#: models/User.php:82
 msgid "The username cannot contain the character ‘@’."
 msgstr "Le nom d’utilisateur·ice ne doit pas contenir le caractère ‘@’."
 
-#: models/User.php:86
+#: models/User.php:88
 msgid "The password is required."
 msgstr "Le mot de passe est obligatoire."
 
+#: models/User.php:112
+msgid "The text size is required. Please select an option from the list."
+msgstr ""
+"La taille de texte est obligatoire. Veuillez sélectionner une valeur depuis "
+"la liste."
+
+#: models/User.php:116
+msgid "The text size is invalid. Please select an option from the list."
+msgstr ""
+"La taille de texte est invalide. Veuillez sélectionner une valeur depuis la "
+"liste."
+
 #: navigations/AccountNavigation.php:16
 msgid "Account & data menu"
 msgstr "Menu compte & données"
@@ -630,7 +654,8 @@ msgstr "(max. %d caractères)"
 #: views/links/searches/show.html.twig:39 views/links/show.html.twig:347
 #: views/mastodon/show.html.twig:62 views/mastodon/show.html.twig:139
 #: views/my/account/deletion.html.twig:38 views/my/avatar/edit.html.twig:20
-#: views/my/preferences/edit.html.twig:28 views/my/profile/edit.html.twig:20
+#: views/my/preferences/edit.html.twig:35
+#: views/my/preferences/edit.html.twig:66 views/my/profile/edit.html.twig:20
 #: views/my/profile/edit.html.twig:50
 #: views/my/security/confirmation.html.twig:40
 #: views/my/security/show.html.twig:31 views/my/security/show.html.twig:59
@@ -705,7 +730,7 @@ msgstr "Modification d'une collection"
 #: views/collections/filters/edit.html.twig:96
 #: views/collections/groups/edit.html.twig:99 views/groups/edit.html.twig:43
 #: views/links/edit.html.twig:80 views/mastodon/show.html.twig:96
-#: views/my/preferences/edit.html.twig:102 views/my/profile/edit.html.twig:74
+#: views/my/preferences/edit.html.twig:140 views/my/profile/edit.html.twig:74
 #: views/my/security/show.html.twig:98 views/notes/edit.html.twig:49
 msgid "Save changes"
 msgstr "Enregistrer les modifications"
@@ -1352,11 +1377,11 @@ msgstr ""
 "Collectez, organisez, annotez et partagez les liens<br><strong>provenant de "
 "l'ensemble du Web.</strong>"
 
-#: views/layouts/base.html.twig:44
+#: views/layouts/base.html.twig:48
 msgid "Skip to main content"
 msgstr "Accéder au contenu principal"
 
-#: views/layouts/base.html.twig:61 views/pages/about.html.twig:3
+#: views/layouts/base.html.twig:65 views/pages/about.html.twig:3
 #: views/pages/about.html.twig:11 views/pages/about.html.twig:15
 #: views/support/show.html.twig:124
 #, php-format
@@ -1968,33 +1993,38 @@ msgstr "Photo de profil"
 msgid "Upload a photo"
 msgstr "Téléverser une photo"
 
-#: views/my/preferences/edit.html.twig:23
+#: views/my/preferences/edit.html.twig:30
 msgid "Your language"
 msgstr "Votre langue"
 
-#: views/my/preferences/edit.html.twig:62
+#: views/my/preferences/edit.html.twig:61
+msgid "Text size"
+msgstr "Taille du texte"
+
+#: views/my/preferences/edit.html.twig:100
 msgid "Enable compact mode"
 msgstr "Activer le mode compact"
 
-#: views/my/preferences/edit.html.twig:66
+#: views/my/preferences/edit.html.twig:104
 msgid ""
 "In compact mode, you see more links at a glance, but you may feel "
 "overwhelmed by the information."
 msgstr ""
 "En mode compact, vous voyez plus de liens en un coup d’œil, mais vous "
 "pourriez vous sentir submergé par la quantité d’informations."
 
-#: views/my/preferences/edit.html.twig:79 views/registrations/new.html.twig:148
+#: views/my/preferences/edit.html.twig:117
+#: views/registrations/new.html.twig:148
 msgid "Accept to be contacted by email to help improve the service (optional)."
 msgstr ""
 "Accepter d’être contacté‧e par courriel pour aider à améliorer le service "
 "(facultatif)."
 
-#: views/my/preferences/edit.html.twig:93
+#: views/my/preferences/edit.html.twig:131
 msgid "Enable beta features"
 msgstr "Activer les fonctionnalités bêta"
 
-#: views/my/preferences/edit.html.twig:97
+#: views/my/preferences/edit.html.twig:135
 msgid ""
 "With beta features you test some features before everyone else, but you "
 "enter a turbulent zone."

locales/fr_FR/LC_MESSAGES/main.po

@@ -32,3 +32,29 @@
 :root {
     background-color: var(--color-background);
 }
+
+:root[data-text-size="small"] {
+    font-size: 100%;
+}
+
+:root[data-text-size="medium"] {
+    font-size: 105%;
+}
+
+:root[data-text-size="large"] {
+    font-size: 115%;
+}
+
+@media (min-width: 800px) {
+    :root[data-text-size="small"] {
+        font-size: 105%;
+    }
+
+    :root[data-text-size="medium"] {
+        font-size: 115%;
+    }
+
+    :root[data-text-size="large"] {
+        font-size: 125%;
+    }
+}

src/assets/stylesheets/application.css

@@ -17,6 +17,9 @@ class Preferences extends BaseForm
 {
     use traits\Locale;
 
+    #[Form\Field]
+    public string $option_text_size = 'medium';
+
     #[Form\Field]
     public bool $option_compact_mode = false;
 
@@ -37,4 +40,16 @@ public function __construct(array $default_values = [], ?models\User $model = nu
 
         parent::__construct($default_values, $model);
     }
+
+    /**
+     * @return array<string, string>
+     */
+    public function textSizeValues(): array
+    {
+        return [
+            'small' => \Minz\Template\TwigExtension::translate('Small'),
+            'medium' => \Minz\Template\TwigExtension::translate('Medium'),
+            'large' => \Minz\Template\TwigExtension::translate('Large'),
+        ];
+    }
 }

src/forms/users/Preferences.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace App\migrations;
+
+class Migration202604200001AddOptionTextSizeToUsers
+{
+    public function migrate(): bool
+    {
+        $database = \Minz\Database::get();
+
+        $database->exec(<<<'SQL'
+            ALTER TABLE users
+            ADD COLUMN option_text_size TEXT NOT NULL DEFAULT 'medium';
+        SQL);
+
+        return true;
+    }
+
+    public function rollback(): bool
+    {
+        $database = \Minz\Database::get();
+
+        $database->exec(<<<'SQL'
+            ALTER TABLE users
+            DROP COLUMN option_text_size;
+        SQL);
+
+        return true;
+    }
+}

src/migrations/Migration202604200001AddOptionTextSizeToUsers.php

@@ -22,6 +22,8 @@ class User
     use utils\Memoizer;
     use Validable;
 
+    public const VALID_TEXT_SIZES = ['small', 'medium', 'large'];
+
     public const USERNAME_MAX_LENGTH = 50;
 
     public const DEMO_EMAIL = 'demo@flus.fr';
@@ -105,6 +107,16 @@ class User
     #[Database\Column]
     public ?string $autoload_modal;
 
+    #[Database\Column]
+    #[Validable\Presence(
+        message: new Translatable('The text size is required. Please select an option from the list.'),
+    )]
+    #[Validable\Inclusion(
+        in: self::VALID_TEXT_SIZES,
+        message: new Translatable('The text size is invalid. Please select an option from the list.'),
+    )]
+    public string $option_text_size = 'medium';
+
     #[Database\Column]
     public bool $option_compact_mode;
 

src/models/User.php

@@ -39,6 +39,7 @@ CREATE TABLE users (
     avatar_filename TEXT,
     biography TEXT NOT NULL DEFAULT '',
     autoload_modal TEXT NOT NULL DEFAULT '',
+    option_text_size TEXT NOT NULL DEFAULT 'medium',
     option_compact_mode BOOLEAN NOT NULL DEFAULT false,
     accept_contact BOOLEAN NOT NULL DEFAULT false,
 

src/schema.sql

@@ -1,5 +1,9 @@
 <!DOCTYPE html>
-<html lang="{{ app.locale | locale_to_bcp_47 }}" data-color-scheme="light">
+<html
+    lang="{{ app.locale | locale_to_bcp_47 }}"
+    data-color-scheme="light"
+    data-text-size="{{ app.user ? app.user.option_text_size : 'medium' }}"
+>
     <head>
         <meta charset="UTF-8" />
         <title>{{ include('layouts/_title.html.twig', { title: block('title') }) }}</title>

src/views/layouts/base.html.twig

@@ -14,7 +14,14 @@
 {% block body %}
     <h1 class="text--center">{{ t('Preferences') }}</h1>
 
-    <form method="post" action="{{ url('update preferences') }}" class="flow">
+    <form
+        method="post"
+        action="{{ url('update preferences') }}"
+        class="flow"
+        {# Disable Turbo as changing the "text size" option sets a "data-"
+         # attribute on the <html> tag. #}
+        data-turbo="false"
+    >
         {{ include('alerts/_error.html.twig', { message: form.error('@base') }) }}
 
         <div class="form-group">
@@ -49,6 +56,37 @@
             </select>
         </div>
 
+        <div class="form-group">
+            <label for="option-text-size">
+                {{ t('Text size') }}
+            </label>
+
+            {% if form.isInvalid('option_text_size') %}
+                <p id="option-text-size-error" class="form-group__error">
+                    {{ t('Error:') }}
+                    {{ form.error('option_text_size') }}
+                </p>
+            {% endif %}
+
+            <select
+                id="option-text-size"
+                name="option_text_size"
+                {% if form.isInvalid('option_text_size') %}
+                    aria-errormessage="option-text-size-error"
+                    aria-invalid="true"
+                {% endif %}
+            >
+                {% for text_size_value, text_size_label in form.textSizeValues %}
+                    <option
+                        value="{{ text_size_value }}"
+                        {{ text_size_value === form.option_text_size ? 'selected' : '' }}
+                    >
+                        {{ text_size_label }}
+                    </option>
+                {% endfor %}
+            </select>
+        </div>
+
         <div>
             <input
                 type="checkbox"