From 0450d9e2edec7850ddf9b564f2e09f510003ec3d Mon Sep 17 00:00:00 2001
From: Kibi Kelburton <git@f0ck.it>
Date: Fri, 22 May 2026 20:44:02 +0200
Subject: [PATCH] ff

---
 views/settings.html | 154 +++++++++++++++++++++++++++++---------------
 1 file changed, 101 insertions(+), 53 deletions(-)

diff --git a/views/settings.html b/views/settings.html
index 9a817da..47e826a 100644
--- a/views/settings.html
+++ b/views/settings.html
@@ -40,7 +40,8 @@
           <div class="avatar-upload-actions">
             <button type="button" id="avatar-upload-btn" class="button" disabled>{{ t('settings.upload_btn') }}</button>
             @if(avatar_file)
-            <button type="button" id="avatar-remove-btn" class="button button-danger">{{ t('settings.remove_custom') }}</button>
+            <button type="button" id="avatar-remove-btn" class="button button-danger">{{ t('settings.remove_custom')
+              }}</button>
             @endif
           </div>
           <div id="avatar-upload-status" class="avatar-status"></div>
@@ -54,14 +55,16 @@
             maxlength="255">{!! session.description || '' !!}</textarea>
           <div class="profile-settings-actions">
             <button type="button" id="btn-save-description" class="button">{{ t('settings.save_description') }}</button>
-            <button type="button" id="btn-clear-description" class="button button-danger">{{ t('settings.clear') }}</button>
+            <button type="button" id="btn-clear-description" class="button button-danger">{{ t('settings.clear')
+              }}</button>
           </div>
           <div id="description-status" class="avatar-status"></div>
         </div>
       </div>
       @endif
       <div class="setting-item" style="margin-top: 20px;">
-        <label for="username_color_picker" style="display: block; margin-bottom: 5px;">{{ t('settings.username_color') }}</label>
+        <label for="username_color_picker" style="display: block; margin-bottom: 5px;">{{ t('settings.username_color')
+          }}</label>
         <div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
           <input type="color" id="username_color_picker" value="{{ session.username_color || '#ffffff' }}"
             style="width: 50px; height: 30px; padding: 0; border: 1px solid var(--nav-border-color); cursor: pointer; background: none;">
@@ -79,7 +82,8 @@
       <div class="preferences-settings-wrapper">
         <fieldset
           style="border: 1px solid var(--nav-border-color); padding: 10px; border-radius: 4px; margin-bottom: 15px;">
-          <legend style="width: auto; padding: 0 5px; font-size: 1.1em; font-weight: bold;">{{ t('settings.ui_section') }}</legend>
+          <legend style="width: auto; padding: 0 5px; font-size: 1.1em; font-weight: bold;">{{ t('settings.ui_section')
+            }}</legend>
           <div class="setting-item" style="margin-bottom: 15px;">
             <label for="show_motd_toggle" style="cursor: pointer; display: flex; align-items: center; gap: 10px;">
               <input type="checkbox" id="show_motd_toggle" @if(session.show_motd !==false) checked @endif>
@@ -97,7 +101,8 @@
           <div class="setting-item" style="margin-top: 15px;">
             <label for="alternative_infobox_toggle"
               style="cursor: pointer; display: flex; align-items: center; gap: 10px;">
-              <input type="checkbox" id="alternative_infobox_toggle" @if(session.use_alternative_infobox===true) checked @endif>
+              <input type="checkbox" id="alternative_infobox_toggle" @if(session.use_alternative_infobox===true) checked
+                @endif>
               <span>{{ t('settings.alternative_infobox') }}</span>
             </label>
             <small class="text-muted" style="margin-left: 25px;">{{ t('settings.alternative_infobox_hint') }}</small>
@@ -115,7 +120,9 @@
               <input type="checkbox" id="image_expand_toggle">
               <span>{{ t('settings.image_expand_on_click') || 'Expand images inline on click' }}</span>
             </label>
-            <small class="text-muted" style="margin-left: 25px;">{{ t('settings.image_expand_on_click_hint') || 'Instead of opening the scroll zoom modal, clicking an image will expand it to full size within the page.' }}</small>
+            <small class="text-muted" style="margin-left: 25px;">{{ t('settings.image_expand_on_click_hint') || 'Instead
+              of opening the scroll zoom modal, clicking an image will expand it to full size within the page.'
+              }}</small>
           </div>
           <div class="setting-item" style="margin-top: 15px;">
             <label for="disable_autoplay_toggle"
@@ -149,7 +156,8 @@
           <div class="setting-item" style="margin-top: 15px;">
             <label for="embed_youtube_in_comments_toggle"
               style="cursor: pointer; display: flex; align-items: center; gap: 10px;">
-              <input type="checkbox" id="embed_youtube_in_comments_toggle" @if(session.embed_youtube_in_comments !==false) checked @endif>
+              <input type="checkbox" id="embed_youtube_in_comments_toggle" @if(session.embed_youtube_in_comments
+                !==false) checked @endif>
               <span>{{ t('settings.embed_yt') }}</span>
             </label>
             <small class="text-muted" style="margin-left: 25px;">{{ t('settings.embed_yt_hint') }}</small>
@@ -165,7 +173,8 @@
           @endif
           @if(allow_language_change)
           <div class="setting-item" style="margin-top: 15px;">
-            <label for="language_select" style="display: block; margin-bottom: 5px; font-weight: bold;">{{ t('settings.language') }}</label>
+            <label for="language_select" style="display: block; margin-bottom: 5px; font-weight: bold;">{{
+              t('settings.language') }}</label>
             <select id="language_select" class="input" style="padding: 6px 10px; max-width: 220px;">
               <option value="" @if(!session.language) selected @endif>{{ t('settings.language_default') }}</option>
               <option value="en" @if(session.language==='en' ) selected @endif>{{ t('settings.language_en') }}</option>
@@ -179,16 +188,20 @@
 
           @endif
           <div class="setting-item" style="margin-top: 15px;">
-            <label for="comment_display_mode_select" style="display: block; margin-bottom: 5px; font-weight: bold;">{{ t('settings.comment_display_mode') }}</label>
-            <select id="comment_display_mode_select" class="input" style="padding: 6px 10px; max-width: 220px;" @if(session.force_comment_display_mode) disabled @endif>
-              <option value="0" @if(session.comment_display_mode==0) selected @endif>{{ t('settings.comment_display_tree') }}</option>
-              <option value="1" @if(session.comment_display_mode==1) selected @endif>{{ t('settings.comment_display_linear') }}</option>
+            <label for="comment_display_mode_select" style="display: block; margin-bottom: 5px; font-weight: bold;">{{
+              t('settings.comment_display_mode') }}</label>
+            <select id="comment_display_mode_select" class="input" style="padding: 6px 10px; max-width: 220px;"
+              @if(session.force_comment_display_mode) disabled @endif>
+              <option value="0" @if(session.comment_display_mode==0) selected @endif>{{
+                t('settings.comment_display_tree') }}</option>
+              <option value="1" @if(session.comment_display_mode==1) selected @endif>{{
+                t('settings.comment_display_linear') }}</option>
             </select>
             <br><small class="text-muted">
               @if(session.force_comment_display_mode)
-                <strong>{{ t('settings.forced_mode_notice') || 'This setting is managed by an administrator.' }}</strong>
+              <strong>{{ t('settings.forced_mode_notice') || 'This setting is managed by an administrator.' }}</strong>
               @else
-                {{ t('settings.comment_display_mode_hint') }}
+              {{ t('settings.comment_display_mode_hint') }}
               @endif
             </small>
           </div>
@@ -196,20 +209,25 @@
 
         <fieldset
           style="border: 1px solid var(--nav-border-color); padding: 10px; border-radius: 4px; margin-bottom: 15px;">
-          <legend style="width: auto; padding: 0 5px; font-size: 1.1em; font-weight: bold;">{{ t('settings.notifications_section') }}</legend>
+          <legend style="width: auto; padding: 0 5px; font-size: 1.1em; font-weight: bold;">{{
+            t('settings.notifications_section') }}</legend>
           <div class="setting-item">
             <label class="checkbox-container" style="cursor: pointer; display: flex; align-items: center; gap: 10px;">
-              <input type="checkbox" id="chk-receive-system-notifications" @if(session.receive_system_notifications !==false) checked @endif>
+              <input type="checkbox" id="chk-receive-system-notifications" @if(session.receive_system_notifications
+                !==false) checked @endif>
               <span>{{ t('settings.receive_system_notifications') }}</span>
             </label>
-            <small class="text-muted" style="margin-left: 25px;">{{ t('settings.receive_system_notifications_hint') }}</small>
+            <small class="text-muted" style="margin-left: 25px;">{{ t('settings.receive_system_notifications_hint')
+              }}</small>
           </div>
           <div class="setting-item" style="margin-top: 15px;">
             <label class="checkbox-container" style="cursor: pointer; display: flex; align-items: center; gap: 10px;">
-              <input type="checkbox" id="chk-receive-user-notifications" @if(session.receive_user_notifications !==false) checked @endif>
+              <input type="checkbox" id="chk-receive-user-notifications" @if(session.receive_user_notifications
+                !==false) checked @endif>
               <span>{{ t('settings.receive_user_notifications') }}</span>
             </label>
-            <small class="text-muted" style="margin-left: 25px;">{{ t('settings.receive_user_notifications_hint') }}</small>
+            <small class="text-muted" style="margin-left: 25px;">{{ t('settings.receive_user_notifications_hint')
+              }}</small>
           </div>
           <div class="setting-item" style="margin-top: 15px;">
             <label class="checkbox-container" style="cursor: pointer; display: flex; align-items: center; gap: 10px;">
@@ -222,9 +240,11 @@
 
         <fieldset
           style="border: 1px solid var(--nav-border-color); padding: 10px; border-radius: 4px; margin-bottom: 15px;">
-          <legend style="width: auto; padding: 0 5px; font-size: 1.1em; font-weight: bold;">{{ t('settings.appearance_section') }}</legend>
+          <legend style="width: auto; padding: 0 5px; font-size: 1.1em; font-weight: bold;">{{
+            t('settings.appearance_section') }}</legend>
           <div class="setting-item" style="margin-top: 20px;">
-            <label for="website_font_select" style="display: block; margin-bottom: 5px; font-weight: bold;">{{ t('settings.website_font') }}</label>
+            <label for="website_font_select" style="display: block; margin-bottom: 5px; font-weight: bold;">{{
+              t('settings.website_font') }}</label>
             <div style="display: flex; align-items: center; gap: 10px;">
               <select id="website_font_select" class="input" style="flex: 1; max-width: 300px;">
                 <option value="">{{ t('settings.font_default') }}</option>
@@ -235,7 +255,8 @@
             </div>
           </div>
           <div class="setting-item" style="margin-top: 20px;">
-            <label for="website_theme_select" style="display: block; margin-bottom: 5px; font-weight: bold;">{{ t('settings.theme') }}</label>
+            <label for="website_theme_select" style="display: block; margin-bottom: 5px; font-weight: bold;">{{
+              t('settings.theme') }}</label>
             <div style="display: flex; align-items: center; gap: 10px;">
               <select id="website_theme_select" class="input" style="flex: 1; max-width: 300px;">
                 @each(themes as t)
@@ -249,12 +270,14 @@
         @if(enable_swf)
         <fieldset
           style="border: 1px solid var(--nav-border-color); padding: 10px; border-radius: 4px; margin-bottom: 15px;">
-          <legend style="width: auto; padding: 0 5px; font-size: 1.1em; font-weight: bold;">{{ t('settings.flash_section') }}</legend>
+          <legend style="width: auto; padding: 0 5px; font-size: 1.1em; font-weight: bold;">{{
+            t('settings.flash_section') }}</legend>
 
           <div class="setting-item">
             <label for="ruffle_background_toggle"
               style="cursor: pointer; display: flex; align-items: center; gap: 10px;">
-              <input type="checkbox" id="ruffle_background_toggle" @if(session.ruffle_background !==false) checked @endif>
+              <input type="checkbox" id="ruffle_background_toggle" @if(session.ruffle_background !==false) checked
+                @endif>
               <span>{{ t('settings.flash_bg') }}</span>
             </label>
             <small class="text-muted" style="margin-left: 25px;">{{ t('settings.flash_bg_hint') }}</small>
@@ -266,9 +289,11 @@
       </div>
       @if(enable_data_export)
       <h2>{{ t('settings.export_data_title') || 'Export Data' }}</h2>
-      <div class="export-settings-wrapper" style="background: rgba(0,0,0,0.1); padding: 20px; border-radius: 4px; border: 1px solid var(--nav-border-color); margin-bottom: 30px;">
-        <p>{{ t('settings.export_data_desc') || 'Download a copy of your data. This process happens entirely in your browser to protect your privacy and save server resources.' }}</p>
-        
+      <div class="export-settings-wrapper"
+        style="background: rgba(0,0,0,0.1); padding: 20px; border-radius: 4px; border: 1px solid var(--nav-border-color); margin-bottom: 30px;">
+        <p>{{ t('settings.export_data_desc') || 'Download a copy of your data. This process happens entirely in your
+          browser to protect your privacy and save server resources.' }}</p>
+
         <div class="setting-item" style="margin-bottom: 15px;">
           <label class="checkbox-container" style="cursor: pointer; display: flex; align-items: center; gap: 10px;">
             <input type="checkbox" id="export_uploads" checked>
@@ -283,25 +308,27 @@
         </div>
 
         <div id="export-progress-container" style="display: none; margin-bottom: 20px;">
-          <div class="progress-bar-wrapper" style="height: 20px; background: rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; margin-bottom: 5px;">
-            <div id="export-progress-bar" style="height: 100%; width: 0%; background: var(--accent); transition: width 0.3s;"></div>
+          <div class="progress-bar-wrapper"
+            style="height: 20px; background: rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; margin-bottom: 5px;">
+            <div id="export-progress-bar"
+              style="height: 100%; width: 0%; background: var(--accent); transition: width 0.3s;"></div>
           </div>
-          <div id="export-status-text" 
-               style="font-size: 0.9em; color: var(--text-muted);"
-               data-fetching="{{ t('settings.export_fetching_data') }}"
-               data-processing="{{ t('settings.export_processing_files') }}"
-               data-generating="{{ t('settings.export_generating_zip') }}"
-               data-complete="{{ t('settings.export_complete') }}"
-               data-failed="{{ t('settings.export_failed') }}"
-               data-select-option="{{ t('settings.export_select_option') }}"
-               data-no-data="{{ t('settings.export_no_data') }}"
-               data-failed-alert="{{ t('settings.export_failed_alert') }}"
-               data-domain="{{ site_domain }}"
-          ><span id="export-status-msg">{{ t('settings.export_preparing') || 'Preparing...' }}</span><span class="export-dots" id="export-animated-dots" style="display:none;"><span>.</span><span>.</span><span>.</span></span></div>
+          <div id="export-status-text" style="font-size: 0.9em; color: var(--text-muted);"
+            data-fetching="{{ t('settings.export_fetching_data') }}"
+            data-processing="{{ t('settings.export_processing_files') }}"
+            data-generating="{{ t('settings.export_generating_zip') }}"
+            data-complete="{{ t('settings.export_complete') }}" data-failed="{{ t('settings.export_failed') }}"
+            data-select-option="{{ t('settings.export_select_option') }}"
+            data-no-data="{{ t('settings.export_no_data') }}"
+            data-failed-alert="{{ t('settings.export_failed_alert') }}" data-domain="{{ site_domain }}"><span
+              id="export-status-msg">{{ t('settings.export_preparing') || 'Preparing...' }}</span><span
+              class="export-dots" id="export-animated-dots"
+              style="display:none;"><span>.</span><span>.</span><span>.</span></span></div>
         </div>
 
         <button type="button" id="btn-start-export" class="button button-primary">
-          <i class="fa-solid fa-download" style="margin-right: 5px;"></i> {{ t('settings.start_export') || 'Generate Export (ZIP)' }}
+          <i class="fa-solid fa-download" style="margin-right: 5px;"></i> {{ t('settings.start_export') || 'Generate
+          Export (ZIP)' }}
         </button>
       </div>
       @endif
@@ -313,7 +340,8 @@
           style="margin-bottom: 30px; border-collapse: separate; border-spacing: 0 5px;">
           <tbody>
             <tr>
-              <td style="width: 150px; font-weight: bold; color: var(--text-muted); border: none;">{{ t('settings.user_id') }}</td>
+              <td style="width: 150px; font-weight: bold; color: var(--text-muted); border: none;">{{
+                t('settings.user_id') }}</td>
               <td style="border: none;">{{ session.id }}</td>
             </tr>
             <tr>
@@ -337,7 +365,8 @@
             </tr>
             <tr>
               <td style="font-weight: bold; color: var(--text-muted); border: none;">{{ t('settings.joined') }}</td>
-              <td style="border: none;">@if(joined){{ new Date(joined).toLocaleDateString() }}@else {{ t('settings.joined_unknown') }} @endif</td>
+              <td style="border: none;">@if(joined){{ new Date(joined).toLocaleDateString() }}@else {{
+                t('settings.joined_unknown') }} @endif</td>
             </tr>
           </tbody>
         </table>
@@ -411,8 +440,7 @@
       <div id="api-key-section" class="account-settings-wrapper"
         style="background: rgba(0,0,0,0.1); padding: 20px; border-radius: 4px; border: 1px solid var(--nav-border-color); margin-bottom: 30px;">
         <p style="color: var(--text-muted); margin-bottom: 15px;">
-          Use this key to upload files via external tools or scripts without a browser session.
-          The key grants <strong>upload access only</strong> to your account — it cannot be used for comments or any other action.
+          Use this key to upload files via external tools or scripts like ShareX for example.
         </p>
 
         <div id="api-key-status-box" style="margin-bottom: 15px;">
@@ -421,8 +449,10 @@
 
         <!-- Shown only after regenerate — full key revealed once for copying -->
         <div id="api-key-reveal" style="display:none; margin-bottom: 15px;">
-          <div style="background: rgba(0,180,100,0.12); border: 1px solid rgba(0,180,100,0.4); border-radius: 4px; padding: 14px;">
-            <strong style="display:block; margin-bottom: 6px;">&#9888; Copy your key now &mdash; it will not be shown again in full:</strong>
+          <div
+            style="background: rgba(0,180,100,0.12); border: 1px solid rgba(0,180,100,0.4); border-radius: 4px; padding: 14px;">
+            <strong style="display:block; margin-bottom: 6px;">&#9888; Copy your key now &mdash; it will not be shown
+              again in full:</strong>
             <div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
               <code id="api-key-full-display"
                 style="flex: 1; word-break: break-all; font-size: 0.85em; background: rgba(0,0,0,0.25); padding: 8px 10px; border-radius: 4px; user-select: all;"></code>
@@ -434,22 +464,40 @@
 
         <div style="display: flex; gap: 10px; flex-wrap: wrap; align-items: center;">
           <button type="button" id="btn-regen-api-key" class="button button-primary">Generate / Regenerate Key</button>
-          <button type="button" id="btn-revoke-api-key" class="button button-danger" style="display:none;">Revoke Key</button>
+          <button type="button" id="btn-revoke-api-key" class="button button-danger" style="display:none;">Revoke
+            Key</button>
         </div>
         <div id="api-key-action-status" class="avatar-status" style="margin-top: 10px;"></div>
       </div>
 
       <style>
         @keyframes exportDotBounce {
-          0%, 80%, 100% { transform: translateY(0); opacity: 0.3; }
-          40%            { transform: translateY(-5px); opacity: 1; }
+
+          0%,
+          80%,
+          100% {
+            transform: translateY(0);
+            opacity: 0.3;
+          }
+
+          40% {
+            transform: translateY(-5px);
+            opacity: 1;
+          }
         }
+
         .export-dots span {
           display: inline-block;
           animation: exportDotBounce 1.2s infinite ease-in-out;
         }
-        .export-dots span:nth-child(2) { animation-delay: 0.2s; }
-        .export-dots span:nth-child(3) { animation-delay: 0.4s; }
+
+        .export-dots span:nth-child(2) {
+          animation-delay: 0.2s;
+        }
+
+        .export-dots span:nth-child(3) {
+          animation-delay: 0.4s;
+        }
       </style>
       <script src="/s/js/jszip.min.js"></script>
       <script src="/s/js/settings.js?v=@mtime(/public/s/js/settings.js)"></script>