add: mirror other user's theme when viewing other user profiles

fix: community/profile name sizing

crates/app/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "tetratto"
-version = "0.1.0"
+version = "1.0.0"
 edition = "2024"
 
 [features]

crates/app/src/public/css/style.css

@@ -158,15 +158,16 @@ p {
 }
 
 .name {
-    max-width: 200px;
+    max-width: 250px;
     overflow: hidden;
-    overflow-wrap: break-word;
+    /* overflow-wrap: break-word; */
+    overflow-wrap: anywhere;
     text-overflow: ellipsis;
 }
 
 @media screen and (min-width: 901px) {
     .name.shorter {
-        max-width: 180px;
+        max-width: 215px;
     }
 
     .name.lg\:long {

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

@@ -38,7 +38,7 @@
         <div class="w-full flex gap-4 flex-collapse">
             <div
                 class="lhs flex flex-col gap-2 sm:w-full"
-                style="width: 20rem; min-width: 20rem"
+                style="width: 22rem; min-width: 22rem"
             >
                 <div class="card-nest w-full">
                     <div class="card flex gap-2" id="community_avatar_and_name">

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

@@ -190,20 +190,26 @@
             </div>
 
             <form
-                class="card flex gap-2 flex-row flex-wrap items-center"
+                class="card flex flex-col gap-2"
                 method="post"
                 enctype="multipart/form-data"
                 onsubmit="upload_banner(event)"
             >
-                <input
-                    id="banner_file"
-                    name="file"
-                    type="file"
-                    accept="image/png,image/jpeg,image/avif,image/webp"
-                    class="w-content"
-                />
+                <div class="flex gap-2 flex-row flex-wrap items-center">
+                    <input
+                        id="banner_file"
+                        name="file"
+                        type="file"
+                        accept="image/png,image/jpeg,image/avif,image/webp"
+                        class="w-content"
+                    />
 
-                <button class="primary">{{ icon "check" }}</button>
+                    <button class="primary">{{ icon "check" }}</button>
+                </div>
+
+                <span class="fade"
+                    >Use an image of 1100x350px for the best results.</span
+                >
             </form>
         </div>
     </div>

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

@@ -30,7 +30,7 @@ border_radius="var(--radius)") -%}
     title="{{ username }}'s banner"
     src="/api/v1/auth/user/{{ username }}/banner"
     alt="@{{ username }}'s banner"
-    class="banner shadow"
+    class="banner shadow w-full"
     loading="lazy"
     style="border-radius: {{ border_radius }};"
 />
@@ -294,7 +294,7 @@ show_community and post.community != config.town_square %}
                 {{ icon "check" }}
                 <span>{{ text "notifs:action.mark_as_read" }}</span>
             </button>
-            {% endif %}
+            {% endif %}b
 
             <button
                 class="red tertiary"
@@ -464,4 +464,20 @@ user.settings.theme_hue %}
         --lit: {{ user.settings.theme_lit }} !important;
     }
 </style>
+
+<script>
+    function match_user_theme() {
+        const pref = "{{ profile.settings.theme_preference }}".toLowercase();
+
+        if (pref === "auto") {
+            return;
+        }
+
+        document.documentElement.className = pref;
+    }
+
+    setTimeout(() => {
+        match_user_theme();
+    }, 150);
+</script>
 {% endif %} {%- endmacro %}

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

@@ -38,7 +38,7 @@
         <div class="w-full flex gap-4 flex-collapse">
             <div
                 class="lhs flex flex-col gap-2 sm:w-full"
-                style="width: 20rem; min-width: 20rem"
+                style="width: 22rem; min-width: 22rem"
             >
                 <div class="card-nest w-full">
                     <div class="card flex gap-2" id="user_avatar_and_name">

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

@@ -256,20 +256,26 @@
                 </div>
 
                 <form
-                    class="card flex gap-2 flex-row flex-wrap items-center"
+                    class="card flex flex-col gap-2"
                     method="post"
                     enctype="multipart/form-data"
                     onsubmit="upload_banner(event)"
                 >
-                    <input
-                        id="banner_file"
-                        name="file"
-                        type="file"
-                        accept="image/png,image/jpeg,image/avif,image/webp"
-                        class="w-content"
-                    />
+                    <div class="flex gap-2 flex-row flex-wrap items-center">
+                        <input
+                            id="banner_file"
+                            name="file"
+                            type="file"
+                            accept="image/png,image/jpeg,image/avif,image/webp"
+                            class="w-content"
+                        />
 
-                    <button class="primary">{{ icon "check" }}</button>
+                        <button class="primary">{{ icon "check" }}</button>
+                    </div>
+
+                    <span class="fade"
+                        >Use an image of 1100x350px for the best results.</span
+                    >
                 </form>
             </div>
         </div>
@@ -654,6 +660,7 @@
             ui.generate_settings_ui(
                 profile_settings,
                 [
+                    [[], "Privacy", "title"],
                     [
                         [
                             "private_profile",
@@ -675,6 +682,7 @@
                         "{{ profile.settings.private_last_seen }}",
                         "checkbox",
                     ],
+                    [[], "Theme", "title"],
                     [
                         ["theme_hue", "Theme hue (integer 0-255)"],
                         "{{ profile.settings.theme_hue }}",

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

@@ -751,6 +751,11 @@ media_theme_pref();
     });
 
     self.define("render_settings_ui_field", (_, into_element, option) => {
+        if (option.input_element_type === "title") {
+            into_element.innerHTML += `<hr class="margin" /><b>${option.value}</b>`;
+            return;
+        }
+
         if (option.input_element_type === "checkbox") {
             into_element.innerHTML += `<div class="card flex gap-2">
                 <input