add: user theme_color_text_link setting

crates/app/src/public/html/communities/create_post.html

@@ -128,11 +128,6 @@
         }
 
         window.history.back();
-
-        setTimeout(() => {
-            // if we couldn't go back after 1 whole second, just go home
-            window.location.href = "/";
-        }, 1000);
     }
 </script>
 {% endblock %}

crates/app/src/public/html/components.html

@@ -477,8 +477,7 @@ user %} {% if user.settings.theme_hue %}
         --lit: {{ user.settings.theme_lit }} !important;
     }
 </style>
-
+{% endif %} {% if theme_preference %}
-{% if theme_preference %}
 <script>
     function match_user_theme() {
         const pref = "{{ theme_preference }}".toLowerCase();
@@ -494,11 +493,12 @@ user %} {% if user.settings.theme_hue %}
         match_user_theme();
     }, 150);
 </script>
-{% endif %} {% endif %}
+{% endif %}
 <!-- prettier-ignore -->
 <div style="display: none;">
     {{ components::theme_color(color=user.settings.theme_color_surface, css="color-surface") }}
     {{ components::theme_color(color=user.settings.theme_color_text, css="color-text") }}
+    {{ components::theme_color(color=user.settings.theme_color_text_link, css="color-link") }}
 
     {{ components::theme_color(color=user.settings.theme_color_lowered, css="color-lowered") }}
     {{ components::theme_color(color=user.settings.theme_color_text_lowered, css="color-text-lowered") }}

crates/app/src/public/html/profile/settings.html

@@ -11,19 +11,23 @@
 
     <div class="pillmenu">
         <a data-tab-button="account" class="active" href="#/account">
-            {{ text "settings:tab.account" }}
+            {{ icon "smile" }}
+            <span>{{ text "settings:tab.account" }}</span>
         </a>
 
         <a data-tab-button="profile" href="#/profile">
-            {{ text "settings:tab.profile" }}
+            {{ icon "user-round" }}
+            <span>{{ text "settings:tab.profile" }}</span>
         </a>
 
         <a data-tab-button="theme" href="#/theme">
-            {{ text "settings:tab.theme" }}
+            {{ icon "paint-bucket" }}
+            <span>{{ text "settings:tab.theme" }}</span>
         </a>
 
         <a data-tab-button="sessions" href="#/sessions">
-            {{ text "settings:tab.sessions" }}
+            {{ icon "cookie" }}
+            <span>{{ text "settings:tab.sessions" }}</span>
         </a>
     </div>
 
@@ -200,37 +204,6 @@
 
     <div class="w-full hidden flex flex-col gap-2" data-tab="profile">
         <div class="card tertiary flex flex-col gap-2" id="profile_settings">
-            <div class="card-nest" ui_ident="theme_preference">
-                <div class="card small">
-                    <b>Theme preference</b>
-                </div>
-
-                <div class="card">
-                    <select
-                        onchange="set_setting_field('theme_preference', event.target.selectedOptions[0].value)"
-                    >
-                        <option
-                            value="Auto"
-                            selected="{% if user.settings.theme_preference == 'Auto' %}true{% else %}false{% endif %}"
-                        >
-                            Auto
-                        </option>
-                        <option
-                            value="Light"
-                            selected="{% if user.settings.theme_preference == 'Light' %}true{% else %}false{% endif %}"
-                        >
-                            Light
-                        </option>
-                        <option
-                            value="Dark"
-                            selected="{% if user.settings.theme_preference == 'Dark' %}true{% else %}false{% endif %}"
-                        >
-                            Dark
-                        </option>
-                    </select>
-                </div>
-            </div>
-
             <div class="card-nest" ui_ident="change_avatar">
                 <div class="card small">
                     <b>{{ text "settings:label.change_avatar" }}</b>
@@ -340,9 +313,44 @@
 
     <div class="w-full hidden flex flex-col gap-2" data-tab="theme">
         <div class="card tertiary flex flex-col gap-2" id="theme_settings">
+            <div class="card-nest" ui_ident="theme_preference">
+                <div class="card small">
+                    <b>Theme preference</b>
+                </div>
+
+                <div class="card">
+                    <select
+                        onchange="set_setting_field('theme_preference', event.target.selectedOptions[0].value)"
+                    >
+                        <option
+                            value="Auto"
+                            selected="{% if user.settings.theme_preference == 'Auto' %}true{% else %}false{% endif %}"
+                        >
+                            Auto
+                        </option>
+                        <option
+                            value="Light"
+                            selected="{% if user.settings.theme_preference == 'Light' %}true{% else %}false{% endif %}"
+                        >
+                            Light
+                        </option>
+                        <option
+                            value="Dark"
+                            selected="{% if user.settings.theme_preference == 'Dark' %}true{% else %}false{% endif %}"
+                        >
+                            Dark
+                        </option>
+                    </select>
+
+                    <span class="fade"
+                        >This represents your local site theme.</span
+                    >
+                </div>
+            </div>
+
             <div class="card-nest" ui_ident="profile_theme">
                 <div class="card small">
-                    <b>Profile theme</b>
+                    <b>Profile theme base</b>
                 </div>
 
                 <div class="card">
@@ -368,6 +376,11 @@
                             Dark
                         </option>
                     </select>
+
+                    <span class="fade"
+                        >This represents the site theme shown to users viewing
+                        your profile.</span
+                    >
                 </div>
             </div>
         </div>
@@ -693,11 +706,13 @@
                 "two_factor_authentication",
             ]);
             ui.refresh_container(profile_settings, [
-                "theme_preference",
                 "change_avatar",
                 "change_banner",
             ]);
-            ui.refresh_container(theme_settings, ["profile_theme"]);
+            ui.refresh_container(theme_settings, [
+                "theme_preference",
+                "profile_theme",
+            ]);
 
             ui.generate_settings_ui(
                 account_settings,
@@ -753,7 +768,21 @@
             ui.generate_settings_ui(
                 theme_settings,
                 [
+                    [
+                        [
+                            "disable_other_themes",
+                            "Disable the profile theme of other users",
+                        ],
+                        "{{ profile.settings.disable_other_themes }}",
+                        "checkbox",
+                    ],
                     [[], "Theme builder", "title"],
+                    [
+                        [],
+                        "Allow the site to build the theme for you given a base hue, saturation, and lightness. Scroll down to the next section to manually build the theme.",
+                        "text",
+                    ],
+
                     [
                         ["theme_hue", "Theme hue (integer 0-255)"],
                         "{{ profile.settings.theme_hue }}",
@@ -769,15 +798,7 @@
                         "{{ profile.settings.theme_lit }}",
                         "input",
                     ],
-                    [
+                    [[], "Manual theme builder", "title"],
-                        [
-                            "disable_other_themes",
-                            "Disable the profile theme of other users",
-                        ],
-                        "{{ profile.settings.disable_other_themes }}",
-                        "checkbox",
-                    ],
-                    [[], "Theme builder", "title"],
                     [[], "Override individual colors.", "text"],
                     // surface
                     [
@@ -797,6 +818,14 @@
                                 "Text on elements with the surface backgrounds.",
                         },
                     ],
+                    [
+                        ["theme_color_text_link", "Links"],
+                        "{{ profile.settings.theme_color_text_link }}",
+                        "color",
+                        {
+                            description: "Links on all elements.",
+                        },
+                    ],
                     // lowered
                     [[], "", "divider"],
                     [
@@ -874,7 +903,7 @@
                         },
                     ],
                     [
-                        ["theme_color_primary_lowered", "Primary lowered"],
+                        ["theme_color_primary_lowered", "Lowered"],
                         "{{ profile.settings.theme_color_primary_lowered }}",
                         "color",
                         {
@@ -901,7 +930,7 @@
                         },
                     ],
                     [
-                        ["theme_color_secondary_lowered", "Secondary lowered"],
+                        ["theme_color_secondary_lowered", "Lowered"],
                         "{{ profile.settings.theme_color_secondary_lowered }}",
                         "color",
                         {

crates/app/src/public/html/root.html

@@ -319,6 +319,12 @@ macros -%}
         </dialog>
         {% endif %} {% if user and use_user_theme %} {{
         components::theme(user=user,
-        theme_preference=user.settings.theme_preference) }} {% endif %}
+        theme_preference=user.settings.theme_preference) }}
+        <script>
+            setTimeout(() => {
+                trigger("atto::use_theme_preference");
+            }, 150);
+        </script>
+        {% endif %}
     </body>
 </html>

crates/app/src/public/js/atto.js

@@ -44,6 +44,10 @@ media_theme_pref();
     self.OBSERVERS = [];
 
     // ...
+    self.define("use_theme_preference", () => {
+        media_theme_pref();
+    });
+
     self.define("try_use", (_, ns_name, callback) => {
         // attempt to get existing namespace
         if (globalThis._app_base.ns_store[`$${ns_name}`]) {

crates/core/src/model/auth.rs

@@ -81,6 +81,9 @@ pub struct UserSettings {
     /// Text on elements with the surface backgrounds.
     #[serde(default)]
     pub theme_color_text: String,
+    /// Links on all elements.
+    #[serde(default)]
+    pub theme_color_text_link: String,
     /// Some cards, buttons, or anything else with a darker background color than the surface.
     #[serde(default)]
     pub theme_color_lowered: String,