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/ChannelNode.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  import Icon from './Icon.svelte';
+  import Avatar from './Avatar.svelte';
+  import ChannelNode from './ChannelNode.svelte';
+  import { session } from '../lib/session.svelte.ts';
+  import { menu } from '../lib/menu.svelte.ts';
+  import { ui } from '../lib/ui.svelte.ts';
+  import { channelMenu, userMenu } from '../lib/actions.ts';
+  import { voice } from '../lib/audio/voice.svelte.ts';
+  import { store } from '../lib/settings.svelte.ts';
+  import type { Channel } from '../core/client.ts';
+
+  let { channel, depth = 0, onnavigate }: { channel: Channel; depth?: number; onnavigate: () => void } = $props();
+
+  const users = $derived(session.usersIn(channel.id));
+  const children = $derived(session.childrenOf(channel.id));
+  const expanded = $derived(session.isExpanded(channel.id));
+  const here = $derived(session.self?.channelId === channel.id);
+  const selected = $derived(session.panel.kind === 'channel' && session.panel.id === channel.id);
+  const unread = $derived(session.unread[`ch:${channel.id}`] ?? 0);
+  const total = $derived(session.subtreeUserCount(channel.id));
+
+  // Single click previews, double click acts. The single action waits briefly so a
+  // double click does not also flash the preview.
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  function clickOrDouble(single: () => void, double: () => void) {
+    return {
+      onclick: () => { clearTimeout(timer); timer = setTimeout(single, 220); },
+      ondblclick: () => { clearTimeout(timer); double(); }
+    };
+  }
+
+  const channelClicks = clickOrDouble(
+    () => { session.showChannel(channel.id); ui.panelOpen = true; },
+    () => { session.joinChannel(channel.id); onnavigate(); }
+  );
+</script>
+
+<li>
+  <div class="row channel" class:here class:selected style:padding-left="{8 + depth * 14}px"
+    oncontextmenu={e => menu.show(e, channelMenu(channel))} role="presentation">
+    {#if children.length || users.length}
+      <button class="caret" class:collapsed={!expanded} onclick={() => session.toggleExpanded(channel.id)}
+        aria-label={expanded ? 'Collapse' : 'Expand'} aria-expanded={expanded}>
+        <svg width="10" height="10" viewBox="0 0 10 10"><path d="M2 3l3 4 3-4" fill="none" stroke="currentColor" stroke-width="1.6" /></svg>
+      </button>
+    {:else}
+      <span class="caret"></span>
+    {/if}
+    <button class="name" title="Click for details, double-click to join" {...channelClicks}>
+      <Icon name={channel.canEnter ? 'channel' : 'lock'} size={16} />
+      <span class="label">{channel.name || 'Root'}</span>
+      {#if !expanded && total > 0}<span class="count" title="{total} {total === 1 ? 'person' : 'people'} inside">{total}</span>{/if}
+      {#if unread}<span class="badge">{unread}</span>{/if}
+    </button>
+  </div>
+
+  {#if users.length && expanded}
+    <ul class="users">
+      {#each users as u (u.session)}
+        {@const isSelf = u.session === session.self?.session}
+        {@const clicks = clickOrDouble(
+          () => { session.showUser(u.session); ui.panelOpen = true; },
+          () => { if (!isSelf) { session.selectView(`dm:${u.session}`); onnavigate(); } }
+        )}
+        <li>
+          <button class="row user" class:self={isSelf} style:padding-left="{30 + depth * 14}px"
+            title={isSelf ? 'You' : `${store.displayName(u)} (double-click to message)`} {...clicks}
+            oncontextmenu={e => menu.show(e, userMenu(u))}>
+            <Avatar name={u.name} size={22} speaking={voice.talking[u.session] || (isSelf && voice.transmitting)} />
+            <span class="label" class:talking={voice.talking[u.session] || (isSelf && voice.transmitting)}>{store.displayName(u)}</span>
+            {#if u.userId != null}<span class="reg" title="Registered">R</span>{/if}
+            {#if u.comment || u.commentHash}<span class="state" title="Has a description"><Icon name="message" size={12} /></span>{/if}
+            {#if u.prioritySpeaker}<span class="state" title="Priority speaker"><Icon name="channel" size={14} /></span>{/if}
+            {#if u.recording}<span class="rec" title="Recording">REC</span>{/if}
+            {#if u.deaf || u.selfDeaf}
+              <span class="state" class:admin={u.deaf} title={u.deaf ? 'Deafened by server' : 'Deafened'}><Icon name="headphones-off" size={14} /></span>
+            {:else if u.mute || u.selfMute || u.suppress}
+              <span class="state" class:admin={u.mute || u.suppress} title={u.mute ? 'Muted by server' : u.suppress ? 'Suppressed' : 'Muted'}><Icon name="mic-off" size={14} /></span>
+            {/if}
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+  {#if children.length && expanded}
+    <ul>
+      {#each children as c (c.id)}
+        <ChannelNode channel={c} depth={depth + 1} {onnavigate} />
+      {/each}
+    </ul>
+  {/if}
+</li>
+
+<style>
+  ul { list-style: none; margin: 0; padding: 0; }
+  li { margin: 0; }
+  .row { display: flex; align-items: center; gap: 4px; width: 100%; min-height: 30px; padding-right: 8px; color: var(--text-dim); }
+  .channel:hover, .user:hover { background: var(--bg-hover); color: var(--text); }
+  .channel.selected { background: var(--bg-active); color: var(--text); }
+  .channel.here .label { color: var(--text); font-weight: 600; }
+  .channel.here { box-shadow: inset 3px 0 0 var(--speaking); }
+  .caret { width: 14px; flex: none; display: inline-flex; justify-content: center; color: var(--text-faint); }
+  .caret.collapsed svg { transform: rotate(-90deg); }
+  .name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 4px 0; text-align: left; color: inherit; user-select: none; }
+  .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .count { font-size: 11px; color: var(--text-faint); border: 1px solid var(--line); padding: 0 5px; line-height: 16px; }
+  .badge { background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; padding: 0 5px; line-height: 16px; }
+  .user { gap: 8px; text-align: left; font-size: 14px; user-select: none; }
+  .user.self .label { color: var(--text); }
+  .label.talking { color: var(--speaking); }
+  .reg { font-size: 10px; font-weight: 700; color: var(--accent-hover); border: 1px solid var(--accent); padding: 0 3px; line-height: 14px; }
+  .state { color: var(--text-faint); display: inline-flex; }
+  .state.admin { color: var(--danger); }
+  .rec { font-size: 10px; font-weight: 700; color: var(--danger); border: 1px solid var(--danger); padding: 0 3px; }
+</style>