Add channel and permission management, sounds, themes and the public server list

- Channels: create, edit, delete, link and move (drag and drop for channels and
  people), right-click on free space in the channel list
- Permission editor with inherited rules, allow/deny per permission, groups and
  members; menus grey out actions the server does not allow
- Notification sounds for connection, channel, chat, mute and push-to-talk events;
  custom files and TeamSpeak 3 style sound packs (settings.ini), stored in IndexedDB
- Color schemes: Dark, Light, Midnight, Frost and Windows 95
- Public server list with live UDP ping, fetched through Chromium's network stack
- Kick, ban and connection-lost card with Reconnect
- Right-click menus for text fields, links, images and message authors
- Formatting toolbar in the message box, shared with the description editor
- Resizable channel list, menu headers, registration from the self menu only
- Fix: client-side pacing now mirrors Murmur's whole-second leaky bucket exactly,
  so quick actions are no longer dropped silently

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

src/ui/Chat.svelte

@@ -3,6 +3,7 @@
   import ChatLog from './ChatLog.svelte';
   import Composer from './Composer.svelte';
   import VoiceStage from './VoiceStage.svelte';
+  import { ui } from '../lib/ui.svelte.ts';
   import { session } from '../lib/session.svelte.ts';
 
   // showStage: voice tiles above the chat when the window is too narrow for the member list
@@ -28,6 +29,24 @@
 
   {#if showStage && session.status === 'connected'}<VoiceStage />{/if}
 
+  {#if session.status === 'idle' && session.disconnectInfo}
+    {@const d = session.disconnectInfo}
+    <div class="ended" class:bad={d.kind === 'kicked' || d.kind === 'banned'}>
+      <h2>
+        {#if d.kind === 'kicked'}You were kicked{d.by ? ` by ${d.by}` : ''}
+        {:else if d.kind === 'banned'}You were banned{d.by ? ` by ${d.by}` : ''}
+        {:else if d.kind === 'rejected'}The server refused the connection
+        {:else}Connection lost{/if}
+      </h2>
+      {#if d.reason}<p class="reason">{d.reason}</p>{/if}
+      <p class="where">{session.server?.label}</p>
+      <div class="row">
+        <button class="btn primary" onclick={() => session.reconnect()}>Reconnect</button>
+      </div>
+    </div>
+  {/if}
+
+
   <ChatLog key={session.view}>
     {#snippet empty()}
       <div class="empty">
@@ -38,7 +57,8 @@
           <h2>Connecting...</h2>
         {:else}
           <h2>mumh5</h2>
-          <p>Choose a server to get started.</p>
+          <p>Choose a server to get started, or find one:</p>
+          <button class="btn browse" onclick={() => (ui.publicServers = true)}>Browse public servers</button>
         {/if}
       </div>
     {/snippet}
@@ -59,4 +79,11 @@
   .empty { padding: 32px 16px 8px; }
   .empty h2 { margin: 0 0 4px; font-size: 24px; }
   .empty p { margin: 0; color: var(--text-dim); }
+  .browse { margin-top: 12px; }
+  .ended { max-width: 460px; margin: 16px 16px 0; padding: 16px 18px; background: var(--bg-1); border: 1px solid var(--line); border-left: 4px solid var(--warn); }
+  .ended.bad { border-left-color: var(--danger); }
+  .ended h2 { margin: 0; font-size: 20px; }
+  .ended .reason { margin: 8px 0 0; color: var(--text); font-size: 15px; overflow-wrap: anywhere; }
+  .ended .where { margin-top: 4px; font-size: 13px; color: var(--text-faint); }
+  .ended .row { margin-top: 14px; }
 </style>