v2.9.8 — read-only channels, server-relayed mic illumination, role permission row highlight

Author: ancsemi

CHANGELOG.md

@@ -11,6 +11,18 @@ Format follows [Keep a Changelog](https://keepachangelog.com/). Haven uses [Sema
 
 ---
 
+## [2.9.8] — 2026-04-11
+
+### Added
+- **Read-only channels** — admins can now mark any text channel as read-only. Members without the new `Read-Only Override` role permission can still read and react, but the message input is hidden. Useful for announcement-style channels. (#5231)
+- **`Read-Only Override` role permission** — grants specific roles the ability to post in read-only channels.
+- **Server-relayed mic illumination** — the speaking indicator now reflects what the server actually received rather than local mic detection. If your audio isn't making it to the server, the indicator won't light up, giving a more accurate picture of what others are hearing.
+
+### Changed
+- **Role permission row highlight** — checking a permission in the role editor now lights up that entire row with an accent background, making it easier to see which permissions are enabled at a glance.
+
+---
+
 ## [2.9.7] — 2026-04-09
 
 ### Changed

docs/index.html

@@ -1415,12 +1415,12 @@ <h2>Download Haven</h2>
       </div>
 
       <div class="download-card fade-in">
-        <h2>&#x2B21; Haven Server &mdash; v2.9.7</h2>
+        <h2>&#x2B21; Haven Server &mdash; v2.9.8</h2>
         <p class="download-version">Latest stable release &middot; Windows, macOS &amp; Linux &middot; ~5 MB</p>
 
         <div class="download-btn-group">
-          <a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.9.7.zip" class="btn btn-primary download-main">
-            <span class="icon">&#x2B07;</span> Download v2.9.7 (.zip)
+          <a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.9.8.zip" class="btn btn-primary download-main">
+            <span class="icon">&#x2B07;</span> Download v2.9.8 (.zip)
           </a>
           <div class="download-alt-links">
             <a href="https://github.com/ancsemi/Haven" target="_blank">&#9965; View on GitHub</a>
@@ -1437,7 +1437,11 @@ <h2>&#x2B21; Haven Server &mdash; v2.9.7</h2>
           <div class="version-list">
             <div class="version-list-inner">
               <div class="version-item">
-                <div><span class="v-name">v2.9.7</span><span class="v-tag latest">Latest</span></div>
+                <div><span class="v-name">v2.9.8</span><span class="v-tag latest">Latest</span></div>
+                <a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.9.8.zip">Download &rarr;</a>
+              </div>
+              <div class="version-item">
+                <div><span class="v-name">v2.9.7</span> &mdash; Open-source STUN servers, STUN_URLS env var</div>
                 <a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.9.7.zip">Download &rarr;</a>
               </div>
               <div class="version-item">

donors.json

@@ -25,6 +25,7 @@
     "Orange Lantern",
     "lataxd9",
     "HoppyGamers",
-    "deNully"
+    "deNully",
+    "Morgan"
   ]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "haven",
-  "version": "2.9.7",
+  "version": "2.9.8",
   "description": "Haven — self-hosted private chat for your server, your rules",
   "license": "AGPL-3.0",
   "main": "server.js",

public/app.html

@@ -1135,6 +1135,22 @@ <h5 class="settings-section-title">😀 Reaction Size</h5>
         </div>
       </div>
 
+      <!-- Role Color Display -->
+      <div class="settings-section" id="section-role-display" style="border-top: 1px solid var(--border-light); padding-top: 16px; margin-top: 8px;">
+        <h5 class="settings-section-title">🎨 Role Display</h5>
+        <div class="density-picker" id="role-display-picker">
+          <button type="button" class="density-btn active" data-roledisplay="colored-name" title="Color the username with the role color">
+            <span class="density-icon" style="color:#5865f2;font-weight:bold">A</span>
+            <span class="density-label">Colored Name</span>
+          </button>
+          <button type="button" class="density-btn" data-roledisplay="dot" title="Show a colored dot next to the name (legacy)">
+            <span class="density-icon">●</span>
+            <span class="density-label">Dot</span>
+          </button>
+        </div>
+        <small class="settings-hint" style="margin-top:4px;display:block">How role colors are shown next to usernames in chat and the member list.</small>
+      </div>
+
       <!-- Image Display Mode -->
       <div class="settings-section" id="section-density" style="border-top: 1px solid var(--border-light); padding-top: 16px; margin-top: 8px;">
         <h5 class="settings-section-title">🖼️ <span data-i18n="settings.image_display.title">Image Display</span></h5>
@@ -1439,6 +1455,11 @@ <h5 class="settings-section-subtitle">🏠 <span data-i18n="settings.admin.brand
             </select>
           </label>
           <small class="settings-hint" style="margin-top:2px;display:block" data-i18n="settings.admin.default_theme_hint">New users see this theme on first visit. They can still pick their own.</small>
+          <label class="select-row" style="margin-top:12px">
+            <span>Welcome Message</span>
+            <input type="text" id="welcome-message-input" maxlength="500" class="settings-text-input" style="max-width:280px" placeholder="e.g. Welcome {user}!">
+          </label>
+          <small class="settings-hint" style="margin-top:2px;display:block">Shown when a new user joins a channel. Use <code>{user}</code> for the username. Leave blank to disable.</small>
         </div>
 
         <div class="admin-settings" id="section-members" style="margin-top:10px; padding-top:10px; border-top:1px solid var(--border);">
@@ -2118,6 +2139,10 @@ <h3>⚙ <span data-i18n="modals.manage_servers.title">Manage Servers</span></h3>
         <span class="cfn-label">🖼️ <span data-i18n="channel_functions.media">Media</span></span>
         <span class="cfn-badge cfn-on" data-i18n="channel_functions.on">ON</span>
       </div>
+      <div class="cfn-row" data-fn="read-only" data-i18n-title="channel_functions.read_only_hint" title="Make this channel read-only — only users with the Read-Only Override permission can post">
+        <span class="cfn-label">🔒 <span data-i18n="channel_functions.read_only">Read Only</span></span>
+        <span class="cfn-badge cfn-off" data-i18n="channel_functions.off">OFF</span>
+      </div>
       <div class="cfn-divider"></div>
       <div class="cfn-row" data-fn="slow-mode" data-i18n-title="channel_functions.slow_mode_hint" title="Require a cooldown between messages (0 = off)">
         <span class="cfn-label">🐢 <span data-i18n="channel_functions.slow_mode">Slow Mode</span></span>

public/css/style.css

@@ -4170,6 +4170,19 @@ select.cfn-select.cfn-input {
   text-align: center;
 }
 
+.welcome-message {
+  padding: 10px 16px;
+  margin: 8px auto;
+  max-width: 480px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--accent, #5865f2);
+  text-align: center;
+  background: var(--bg-secondary, #2b2d31);
+  border: 1px solid var(--border-light, #3a3c42);
+  border-radius: 8px;
+}
+
 .typing-indicator {
   padding: 0 20px;
   height: 20px;
@@ -10950,6 +10963,15 @@ ul.chat-list { list-style-type: disc; }
 }
 .role-detail-form .toggle-row {
   font-size: 13px;
+  padding: 5px 8px;
+  border-radius: var(--radius-sm, 4px);
+  transition: background 0.15s;
+}
+.role-detail-form .toggle-row:hover {
+  background: rgba(255,255,255,0.04);
+}
+.role-detail-form .toggle-row:has(input[type="checkbox"]:checked) {
+  background: color-mix(in srgb, var(--accent, #6b4fdb) 12%, transparent);
 }
 
 /* ── Role preview in admin settings ──────────────────── */
@@ -12914,8 +12936,17 @@ ul.chat-list { list-style-type: disc; }
   align-items: center;
   gap: 6px;
   font-size: 0.8rem;
-  padding: 3px 0;
+  padding: 3px 6px;
   color: var(--text-secondary, #ccc);
+  border-radius: var(--radius-sm, 4px);
+  transition: background 0.15s;
+}
+.rac-perm-item:hover {
+  background: rgba(255,255,255,0.04);
+}
+.rac-perm-item.checked,
+.rac-perm-item:has(input[type="checkbox"]:checked) {
+  background: color-mix(in srgb, var(--accent, #6b4fdb) 12%, transparent);
 }
 .rac-perm-item input[type="checkbox"] {
   accent-color: var(--accent, #6b4fdb);

public/js/app.js

@@ -176,6 +176,7 @@ class HavenApp {
     this._setupFontSizePicker();
     this._setupEmojiSizePicker();
     this._setupImageModePicker();
+    this._setupRoleDisplayPicker();
     this._setupLightbox();
     this._setupOnlineOverlay();
     this._setupModalExpand();

public/js/modules/app-admin.js

@@ -5,7 +5,7 @@ const ALL_PERMS = [
   'rename_channel', 'rename_sub_channel', 'set_channel_topic', 'manage_sub_channels',
   'create_channel', 'create_temp_channel', 'upload_files', 'use_voice', 'use_tts', 'manage_webhooks', 'mention_everyone', 'view_history',
   'view_all_members', 'view_channel_members', 'manage_emojis', 'manage_soundboard', 'manage_music_queue', 'promote_user', 'transfer_admin',
-  'manage_roles', 'manage_server', 'delete_channel'
+  'manage_roles', 'manage_server', 'delete_channel', 'read_only_override'
 ];
 //Similarly flavored solution to perm labels
 const PERM_LABELS = {
@@ -39,7 +39,8 @@ const PERM_LABELS = {
   get transfer_admin() { return t('permissions.transfer_admin'); },
   get manage_roles() { return t('permissions.manage_roles'); },
   get manage_server() { return t('permissions.manage_server'); },
-  get delete_channel() { return t('permissions.delete_channel'); }
+  get delete_channel() { return t('permissions.delete_channel'); },
+  get read_only_override() { return t('permissions.read_only_override'); }
 };
 
 export default {
@@ -318,6 +319,10 @@ _applyServerSettings() {
     if (titleInput && this.serverSettings.server_title !== undefined) {
       titleInput.value = this.serverSettings.server_title || '';
     }
+    const welcomeInput = document.getElementById('welcome-message-input');
+    if (welcomeInput) {
+      welcomeInput.value = this.serverSettings.welcome_message || '';
+    }
     const cleanupEnabled = document.getElementById('cleanup-enabled');
     if (cleanupEnabled) {
       cleanupEnabled.checked = this.serverSettings.cleanup_enabled === 'true';
@@ -442,6 +447,7 @@ _snapshotAdminSettings() {
   this._adminSnapshot = {
     server_name: this.serverSettings.server_name || 'HAVEN',
     server_title: this.serverSettings.server_title || '',
+    welcome_message: this.serverSettings.welcome_message || '',
     member_visibility: this.serverSettings.member_visibility || 'online',
     cleanup_enabled: this.serverSettings.cleanup_enabled || 'false',
     cleanup_max_age_days: this.serverSettings.cleanup_max_age_days || '0',
@@ -483,6 +489,12 @@ _saveAdminSettings() {
     changed = true;
   }
 
+  const welcomeMsg = document.getElementById('welcome-message-input')?.value.trim() || '';
+  if (welcomeMsg !== (snap.welcome_message || '')) {
+    this.socket.emit('update-server-setting', { key: 'welcome_message', value: welcomeMsg });
+    changed = true;
+  }
+
   const vis = document.getElementById('member-visibility-select')?.value;
   if (vis && vis !== snap.member_visibility) {
     this.socket.emit('update-server-setting', { key: 'member_visibility', value: vis });

public/js/modules/app-channels.js

@@ -63,6 +63,8 @@ async switchChannel(code) {
   }
   document.getElementById('search-toggle-btn').style.display = '';
   document.getElementById('pinned-toggle-btn').style.display = '';
+  // Auto-close pinned panel on channel switch so stale pins don't linger
+  document.getElementById('pinned-panel').style.display = 'none';
 
   // Show "Select messages" button for admins/mods on non-DM channels
   const moveSelectBtn = document.getElementById('move-select-btn');
@@ -80,7 +82,9 @@ async switchChannel(code) {
   const msgInputArea = document.getElementById('message-input-area');
   const _textOff = channel && channel.text_enabled === 0;
   const _mediaOff = channel && channel.media_enabled === 0;
-  if (msgInputArea) msgInputArea.style.display = (_textOff && _mediaOff) ? 'none' : '';
+  // Read-only: hide input unless user is admin or has read_only_override permission
+  const _isReadOnly = channel && channel.read_only === 1 && !this.user?.isAdmin && !this._hasPerm('read_only_override');
+  if (msgInputArea) msgInputArea.style.display = (_isReadOnly || (_textOff && _mediaOff)) ? 'none' : '';
   // Text-only elements
   const _msgInput = document.getElementById('message-input');
   const _sendBtn = document.getElementById('send-btn');
@@ -337,6 +341,9 @@ _updateChannelFunctionsPanel(ch) {
   this._setCfnBadge('streams', ch.streams_enabled !== 0, ch.streams_enabled !== 0 ? 'ON' : 'OFF');
   this._setCfnBadge('music', ch.music_enabled !== 0, ch.music_enabled !== 0 ? 'ON' : 'OFF');
   this._setCfnBadge('media', ch.media_enabled !== 0, ch.media_enabled !== 0 ? 'ON' : 'OFF');
+  // Read-only toggle
+  const isReadOnly = ch.read_only === 1;
+  this._setCfnBadge('read-only', isReadOnly, isReadOnly ? 'ON' : 'OFF');
   const interval = ch.slow_mode_interval || 0;
   this._setCfnBadge('slow-mode', interval > 0, interval > 0 ? `${interval}s` : 'OFF');
   this._setCfnBadge('cleanup-exempt', ch.cleanup_exempt === 1, ch.cleanup_exempt === 1 ? 'ON' : 'OFF');

public/js/modules/app-media.js

@@ -1571,6 +1571,31 @@ _applyImageMode(mode) {
   document.body.classList.toggle('image-mode-full', mode === 'full');
 },
 
+// ── Role Display Picker ──
+
+_setupRoleDisplayPicker() {
+  const picker = document.getElementById('role-display-picker');
+  if (!picker) return;
+
+  const saved = localStorage.getItem('haven-role-display') || 'colored-name';
+  document.documentElement.dataset.roleDisplay = saved;
+  picker.querySelectorAll('[data-roledisplay]').forEach(btn => {
+    btn.classList.toggle('active', btn.dataset.roledisplay === saved);
+  });
+
+  picker.addEventListener('click', (e) => {
+    const btn = e.target.closest('[data-roledisplay]');
+    if (!btn) return;
+    const mode = btn.dataset.roledisplay;
+    document.documentElement.dataset.roleDisplay = mode;
+    localStorage.setItem('haven-role-display', mode);
+    picker.querySelectorAll('[data-roledisplay]').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    // Re-render member list to reflect the change
+    if (this._updateUsers) this._updateUsers();
+  });
+},
+
 // ── Image Lightbox ──
 
 _setupLightbox() {