Final v0.3.0 Frontend Polishes (#38)

* Final v0.3.0 Frontend Polishes

* Add Nexus Logo

* fix: PR review feedback - storage consistency and styling fixes

- Fix indentation in chat background info click handler
- Migrate chatBgEnabled from localStorage to database storage
- Add loadChatBgEnabled() and saveChatBgEnabled() DB functions
- Add --chat-bg-opacity CSS variable for configurability
- Change Nexus icon from mask to background-image

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: JSKitty <mail@jskitty.cat>
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: 3 people

src-tauri/icons/Nexus.svg

@@ -717,6 +717,7 @@ <h2 class="chat-new-subtitle">Select Members</h2>
         <h2 style="margin-top: 40px">Choose Theme</h2>
         <select id="theme-select">
           <option value="vector">Vector</option>
+          <option value="satoshi">サトシ</option>
           <option value="chatstr">Chatstr</option>
           <option value="gifverse">Cosmic</option>
           <option value="pivx">Keep it Purple</option>
@@ -811,6 +812,14 @@ <h2>Display</h2>
             </label>
           </div>
 
+          <div class="form-group">
+            <label class="toggle-container">
+              <span><span id="chat-bg-info" class="icon icon-info btn" style="width: 18px; height: 18px; position: relative; display: inline-block; vertical-align: text-top; margin-left: 5px;"></span>Background Wallpaper</span>
+              <input type="checkbox" id="chat-bg-toggle" checked>
+              <span class="neon-toggle"></span>
+            </label>
+          </div>
+
           <div class="form-group" id="restore-pivx-group" style="display: none;">
             <button id="restore-pivx-btn" class="btn cancel-btn">Restore PIVX Wallet</button>
           </div>

src/icons/nexus.svg

@@ -43,6 +43,24 @@ async function saveTheme(theme) {
     return await invoke('set_sql_setting', { key: 'theme', value: theme });
 }
 
+/**
+ * Load the user's Chat Background Wallpaper setting
+ * @returns {Promise<boolean>} - true if enabled (default), false if disabled
+ */
+async function loadChatBgEnabled() {
+    const value = await invoke('get_sql_setting', { key: 'chat_bg_enabled' });
+    if (value === null || value === undefined) return true; // Default: enabled
+    return value === 'true' || value === '1';
+}
+
+/**
+ * Save the user's Chat Background Wallpaper setting
+ * @param {boolean} enabled - true to enable, false to disable
+ */
+async function saveChatBgEnabled(enabled) {
+    return await invoke('set_sql_setting', { key: 'chat_bg_enabled', value: enabled ? 'true' : 'false' });
+}
+
 /**
  * Load the user's Whisper Auto Translate setting
  * @returns {Promise<boolean>}

src/index.html

@@ -680,7 +680,7 @@ async function selectFile() {
  * @param {string} mode - The theme mode, i.e: light, dark
  */
 function applyTheme(theme = 'vector', mode = 'dark') {
-  document.body.classList.remove('vector-theme', 'chatstr-theme', 'gifverse-theme', 'pivx-theme');
+  document.body.classList.remove('vector-theme', 'satoshi-theme', 'chatstr-theme', 'gifverse-theme', 'pivx-theme');
   document.body.classList.add(`${theme}-theme`);
 
   domTheme.href = `/themes/${theme}/${mode}.css`;
@@ -1465,6 +1465,26 @@ async function initSettings() {
         await saveDisplayImageTypes(e.target.checked);
     });
 
+    // Background Wallpaper toggle (Chat Background)
+    const chatBgToggle = document.getElementById('chat-bg-toggle');
+    if (chatBgToggle) {
+        // Load saved preference from database (default: enabled)
+        const chatBgEnabled = await loadChatBgEnabled();
+        chatBgToggle.checked = chatBgEnabled;
+        if (!chatBgEnabled) document.body.classList.add('chat-bg-disabled');
+
+        // Handle toggle changes
+        chatBgToggle.addEventListener('change', async () => {
+            if (chatBgToggle.checked) {
+                document.body.classList.remove('chat-bg-disabled');
+                await saveChatBgEnabled(true);
+            } else {
+                document.body.classList.add('chat-bg-disabled');
+                await saveChatBgEnabled(false);
+            }
+        });
+    }
+
     // Initialize notification sound settings (desktop only)
     if (platformFeatures.notification_sounds) {
         await initNotificationSettings();

src/js/db.js

@@ -150,6 +150,7 @@ const domSettingsPrivacyWebPreviewsInfo = document.getElementById('privacy-web-p
 const domSettingsPrivacyStripTrackingInfo = document.getElementById('privacy-strip-tracking-info');
 const domSettingsPrivacySendTypingInfo = document.getElementById('privacy-send-typing-info');
 const domSettingsDisplayImageTypesInfo = document.getElementById('display-image-types-info');
+const domSettingsChatBgInfo = document.getElementById('chat-bg-info');
 const domSettingsNotifMuteInfo = document.getElementById('notif-mute-info');
 const domSettingsDeepRescanInfo = document.getElementById('deep-rescan-info');
 const domSettingsExportAccountInfo = document.getElementById('export-account-info');
@@ -10907,6 +10908,11 @@ domChatMessageInput.oninput = async () => {
         e.stopPropagation();
         popupConfirm('Display Image Types', 'When enabled, images in chat will display a <b>small badge showing the file type</b> (e.g., PNG, GIF, WEBP) in the corner.<br><br>This helps identify image formats at a glance.', true);
     };
+    domSettingsChatBgInfo.onclick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        popupConfirm('Background Wallpaper', 'This feature enables and disables background images inside of Chats (Private & Group Chats).<br><br>Only applies to certain themes.', true);
+    };
     domSettingsNotifMuteInfo.onclick = (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -10949,7 +10955,7 @@ domChatMessageInput.oninput = async () => {
     domSettingsDonorsInfo.onclick = (e) => {
         e.preventDefault();
         e.stopPropagation();
-        popupConfirm('Donors & Contributors', 'The organisations listed below have contributed either <b>financially or resourcefully</b> (developers, infrastructure, etc) to Vector\'s development.<br><br>We extend our sincere thanks to these supporters for helping make Vector possible.', true);
+        popupConfirm('Donors & Contributors', 'Your support keeps Vector Privacy independent, open-source, and free. If you would be interested in donating, please visit our GitBook to learn more.<br><br>We extend our sincere gratitude to these supporters for helping make Vector possible.', true);
     };
 
     // PIVX donor logo click - opens pivx.org

src/js/settings.js

@@ -207,8 +207,11 @@
 }
 
 .icon-nexus {
-  -webkit-mask-image: url("./icons/nexus.svg");
-  mask-image: url("./icons/nexus.svg");
+  mask-image: none !important;
+  -webkit-mask-image: none !important;
+  background-color: transparent !important;
+  background-image: url("./icons/nexus.svg");
+  background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
 }
@@ -1182,6 +1185,11 @@ html, body {
   margin-bottom: 10px;
 }
 
+/* Chat background toggle */
+body.chat-bg-disabled .chat-messages::before {
+  display: none;
+}
+
 .msg-inline-timestamp {
   width: 100%;
   text-align: center;
@@ -3846,7 +3854,8 @@ select:disabled:hover {
 .chat-new-title {
   margin-top: 25px;
   margin-bottom: 5px;
-  text-align: left;
+  text-align: center;
+  align-items: center;
   font-weight: 500;
   letter-spacing: 1px;
 }
@@ -3881,14 +3890,17 @@ select:disabled:hover {
 }
 
 .chat-new-subtitle {
-  margin-bottom: 10px;
+  margin-bottom: 0px;
   letter-spacing: 1px;
+  text-align: center;
+  align-items: center;
 }
 
 .chat-new-subtitle-divider {
   margin-top: 8px;
   margin-bottom: 10px;
   width: 325px;
+  margin: 0.5rem auto;
 }
 
 .chat-new-description {
@@ -6272,7 +6284,6 @@ hr {
 .attachment-panel-marketplace-btn .icon-nexus {
   width: 70% !important;
   height: 70% !important;
-  background-color: #59fcb3 !important;
 }
 
 #attachment-panel-marketplace .attachment-panel-label {