Add server message banner and textarea in dashboard settings.

Author: maratal

Public/app/css/main.css

@@ -1374,6 +1374,79 @@ input[type="text"]:disabled, textarea:disabled {
     border-color: hsl(140 60% 50% / 0.2);
 }
 
+/* Server message textarea */
+.settings-message-textarea,
+.settings-input {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    color: hsl(var(--foreground));
+    background: hsl(var(--muted));
+    border: 1px solid hsl(var(--border));
+    border-radius: 0.5rem;
+    font-family: inherit;
+    transition: border-color 0.15s ease;
+    box-sizing: border-box;
+}
+
+.settings-message-textarea {
+    resize: vertical;
+    min-height: 4.5rem;
+    line-height: 1.5;
+}
+
+.settings-message-textarea:focus,
+.settings-input:focus {
+    outline: none;
+    border-color: hsl(var(--ring));
+}
+
+/* Server message banner */
+.server-message-banner {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 9999;
+    background: hsl(var(--muted));
+    border-bottom: 1px solid hsl(var(--border));
+    padding: 0.625rem 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    opacity: 0;
+    transform: translateY(-100%);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.server-message-banner.show {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.server-message-text {
+    flex: 1;
+    font-size: 0.875rem;
+    color: hsl(var(--foreground));
+}
+
+.server-message-dismiss {
+    background: none;
+    border: none;
+    color: hsl(var(--muted-foreground));
+    cursor: pointer;
+    padding: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.7;
+    transition: opacity 0.15s ease;
+}
+
+.server-message-dismiss:hover {
+    opacity: 1;
+}
+
 /* Group Chat Modal */
 .group-chat-modal {
     position: fixed;

Public/app/html/main.leaf

@@ -360,7 +360,11 @@
     <script src="/app/js/media-viewer.js?v=23"></script>
     <script src="/app/js/user-profile.js?v=23"></script>
     #if(serverMessage):
-    <script>alert("#(serverMessage)");</script>
+    <div id="serverMessageData" style="display:none" data-message="#(serverMessage)"></div>
+    <script>
+        const _msgElement = document.getElementById('serverMessageData');
+        if (_msgElement) initServerMessage(_msgElement.dataset.message);
+    </script>
     #endif
 </body>
 </html>

Public/app/js/dashboard.js

@@ -82,37 +82,33 @@ async function loadDashboardSettings() {
 
     list.innerHTML = '';
     settings.forEach(setting => {
-        let meta;
-        try { meta = JSON.parse(setting.meta); } catch (_) { return; }
+        let meta = {};
+        try { meta = JSON.parse(setting.meta); } catch (_) {}
 
         const variants = meta.variants ? meta.variants.split(',').map(v => v.trim()) : [];
+        const title = meta.title || (setting.name.charAt(0).toUpperCase() + setting.name.slice(1));
 
         const section = document.createElement('div');
         section.className = 'settings-section';
 
         const titleRow = document.createElement('div');
         titleRow.className = 'settings-label';
-
         const titleText = document.createElement('span');
-        titleText.textContent = meta.title || setting.name;
-        if (meta.description) {
-            titleRow.title = meta.description;
-        }
+        titleText.textContent = title;
+        if (meta.description) titleRow.title = meta.description;
         titleRow.appendChild(titleText);
         section.appendChild(titleRow);
 
         if (variants.length > 0) {
             const select = document.createElement('select');
             select.className = 'settings-dropdown';
-
             variants.forEach(variant => {
                 const option = document.createElement('option');
                 option.value = variant;
                 option.textContent = variant.charAt(0).toUpperCase() + variant.slice(1);
                 option.selected = variant === setting.value;
                 select.appendChild(option);
             });
-
             select.addEventListener('change', async () => {
                 const previousValue = setting.value;
                 try {
@@ -123,15 +119,13 @@ async function loadDashboardSettings() {
                     select.value = previousValue;
                 }
             });
-
             section.appendChild(select);
         } else {
-            const input = document.createElement('input');
-            input.type = 'text';
-            input.className = 'settings-dropdown';
+            const input = document.createElement('textarea');
+            input.className = 'settings-message-textarea';
             input.value = setting.value;
-            input.placeholder = meta.description || '';
-
+            input.placeholder = 'Enter system message';
+            input.rows = 3;
             let saveTimeout;
             input.addEventListener('input', () => {
                 clearTimeout(saveTimeout);
@@ -144,14 +138,48 @@ async function loadDashboardSettings() {
                     }
                 }, 500);
             });
-
             section.appendChild(input);
         }
 
         list.appendChild(section);
     });
 }
 
+// ── Server Message Banner ────────────────────────────────────────────────────
+
+function initServerMessage(message) {
+    if (!message) return;
+    const storageKey = 'chatserver_dismissed_server_message';
+    if (localStorage.getItem(storageKey) === message) return;
+
+    const banner = document.createElement('div');
+    banner.id = 'serverMessageBanner';
+    banner.className = 'server-message-banner';
+
+    const textSpan = document.createElement('span');
+    textSpan.className = 'server-message-text';
+    textSpan.textContent = message;
+
+    const dismissButton = document.createElement('button');
+    dismissButton.className = 'server-message-dismiss';
+    dismissButton.innerHTML = closeIcon;
+    dismissButton.addEventListener('click', () => dismissServerMessage(message));
+
+    banner.appendChild(textSpan);
+    banner.appendChild(dismissButton);
+    document.body.appendChild(banner);
+
+    requestAnimationFrame(() => requestAnimationFrame(() => banner.classList.add('show')));
+}
+
+function dismissServerMessage(message) {
+    const banner = document.getElementById('serverMessageBanner');
+    if (!banner) return;
+    if (message) localStorage.setItem('chatserver_dismissed_server_message', message);
+    banner.classList.remove('show');
+    setTimeout(() => banner.remove(), 300);
+}
+
 async function dashboardRefresh() {
     const button = document.getElementById('dashboardRefreshButton');
     const updateButton = document.getElementById('dashboardUpdateButton');

Sources/App/Services/SettingsService.swift

@@ -44,14 +44,12 @@ actor SettingsService: SettingsServiceProtocol {
 
     func allSettings() async throws -> [ServerSettingInfo] {
         let stored = try await repo.all()
-        let allNames = Set(Self.defaults.keys).union(Set(stored.map { $0.name }))
-        return allNames.compactMap { name in
-            let def = Self.defaults[name]
-            if let setting = stored.first(where: { $0.name == name }), !setting.value.trim().isEmpty {
-                return setting.info(meta: def?.meta ?? "")
+        return Self.defaults.keys.compactMap { name in
+            guard let def = Self.defaults[name] else { return nil }
+            if let setting = stored.first(where: { $0.name == name }) {
+                return setting.info(meta: def.meta)
             }
-            guard let value = def?.value, !value.isEmpty else { return nil }
-            return ServerSettingInfo(name: name, value: value, meta: def?.meta ?? "", updatedAt: nil)
+            return ServerSettingInfo(name: name, value: def.value, meta: def.meta, updatedAt: nil)
         }
     }