Initial commit: mumh5, a modern Mumble client

Electron desktop app with a Svelte 5 interface for any Mumble server.

- Mumble protocol core: TLS, handshake, channels, users, text, plugin data,
  client-side pacing of Murmur's rate limits
- Voice: WebCodecs Opus over the TCP tunnel, voice activity, push to talk,
  always-on, devices, per-user volume and local mute
- Several servers at once, voice on one; server rail with icons and ordering
- Chat: channels, direct messages, side chat, file sharing through f0ckm,
  inline images without it, click-to-play YouTube
- Profiles with rich descriptions, registration, rename, nicknames,
  connection information and moderation menus
- Identity wizard, multiple identities, PKCS#12 import/export, desktop
  Mumble certificate import, certificate pinning and viewer
- Tray icon with voice state
- Unit, server and end-to-end tests against a real Murmur

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

src/ui/Message.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import Avatar from './Avatar.svelte';
+  import YouTubeEmbed from './YouTubeEmbed.svelte';
+  import { store } from '../lib/settings.svelte.ts';
+  import type { ChatEntry } from '../lib/session.svelte.ts';
+
+  let { entry, grouped }: { entry: ChatEntry; grouped: boolean } = $props();
+
+  const time = $derived(new Date(entry.time));
+  const hhmm = $derived(time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
+</script>
+
+{#if entry.kind === 'system'}
+  <div class="system">
+    <span class="mark" aria-hidden="true"></span>
+    <div class="html">{@html entry.html} <span class="time">{hhmm}</span></div>
+  </div>
+{:else}
+  <article class="msg" class:grouped>
+    <div class="gutter">
+      {#if grouped}
+        <span class="time hover">{hhmm}</span>
+      {:else}
+        <Avatar name={entry.author} size={38} />
+      {/if}
+    </div>
+    <div class="content">
+      {#if !grouped}
+        <header>
+          <strong class:self={entry.self}>{entry.author}</strong>
+          <time datetime={time.toISOString()}>{time.toLocaleString([], { dateStyle: 'short', timeStyle: 'short' })}</time>
+        </header>
+      {/if}
+      {#if entry.html}<div class="html">{@html entry.html}</div>{/if}
+      {#each entry.embeds as m (m.url)}
+        {#if m.kind === 'youtube'}
+          {#if store.settings.youtube !== 'off'}<div class="embed"><YouTubeEmbed videoId={m.videoId!} start={m.start} url={m.url} /></div>{/if}
+        {:else}
+        <div class="embed">
+          {#if m.kind === 'image'}
+            <a href={m.url} target="_blank" rel="noopener noreferrer"><img src={m.url} alt={m.name} loading="lazy" /></a>
+          {:else if m.kind === 'video'}
+            <video src={m.url} controls preload="metadata"><track kind="captions" /></video>
+          {:else}
+            <audio src={m.url} controls preload="metadata"></audio>
+          {/if}
+        </div>
+        {/if}
+      {/each}
+    </div>
+  </article>
+{/if}
+
+<style>
+  .msg { display: flex; gap: 14px; padding: 2px 16px; margin-top: 14px; }
+  .msg.grouped { margin-top: 0; }
+  .msg:hover { background: rgb(255 255 255 / 0.02); }
+  .gutter { width: 38px; flex: none; display: flex; justify-content: center; }
+  .content { flex: 1; min-width: 0; }
+  header { display: flex; align-items: baseline; gap: 8px; }
+  header strong { font-weight: 600; }
+  header strong.self { color: var(--accent-hover); }
+  time, .time { font-size: 11px; color: var(--text-faint); }
+  .time.hover { visibility: hidden; line-height: 22px; }
+  .msg:hover .time.hover { visibility: visible; }
+  .html { overflow-wrap: anywhere; user-select: text; }
+  .html :global(p) { margin: 0; }
+  .html :global(img) { max-width: min(520px, 100%); max-height: 360px; display: block; margin-top: 4px; border: 1px solid var(--line); }
+  .html :global(pre), .html :global(code) { font-family: var(--mono); font-size: 13px; background: var(--bg-0); padding: 1px 4px; }
+  .html :global(pre) { padding: 8px 10px; overflow-x: auto; }
+  .html :global(blockquote) { margin: 4px 0; padding-left: 10px; border-left: 3px solid var(--line); color: var(--text-dim); }
+  .embed { margin-top: 6px; max-width: min(520px, 100%); }
+  .embed img, .embed video { display: block; max-width: 100%; max-height: 360px; background: var(--bg-0); border: 1px solid var(--line); }
+  .embed audio { width: 100%; }
+  .system { display: flex; gap: 14px; padding: 4px 16px; margin-top: 8px; color: var(--text-dim); font-size: 13px; }
+  .system .mark { width: 38px; flex: none; display: flex; justify-content: center; padding-top: 7px; }
+  .system .mark::before { content: ''; width: 6px; height: 6px; background: var(--text-faint); }
+  .system .time { margin-left: 6px; }
+  .system .html { flex: 1; min-width: 0; }
+</style>