From 2c7a94441d88303d68351fb4e3692645f09b119e Mon Sep 17 00:00:00 2001
From: Kibi Kelburton <git@f0ck.it>
Date: Thu, 1 Oct 2026 01:31:51 +0200
Subject: [PATCH] Add release builds, classic and stacked layouts

- electron-builder packaging: AppImage, deb and tar.gz for Linux, NSIS
  installer for Windows, app icon, desktop entry
- Gitea workflow builds Linux and Windows on version tags and attaches
  the files to the release
- Layout setting in Appearance: Modern, Classic (chat left, channels
  right) and Stacked (channels on top, chat below, resizable split),
  like the desktop Mumble client
- No message box while not connected; Manage identities on the welcome
  page
- Public list: a list that arrives after the source changed no longer
  replaces the new one

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .gitea/workflows/release.yml     |  40 +++++++++++++++++++
 README.md                        |  17 ++++++--
 build/icon.png                   | Bin 0 -> 15479 bytes
 build/icon.svg                   |  11 ++++++
 electron/main.ts                 |   2 +
 package.json                     |  48 +++++++++++++++++++----
 public/icon.png                  | Bin 0 -> 3396 bytes
 src/App.svelte                   |  64 +++++++++++++++++++++++--------
 src/lib/settings.svelte.ts       |   7 +++-
 src/ui/AppearanceSettings.svelte |  47 ++++++++++++++++++++++-
 src/ui/Chat.svelte               |  11 ++++--
 src/ui/PublicServers.svelte      |  14 +++++--
 src/ui/ResizeHandle.svelte       |  21 +++++++---
 src/ui/Sidebar.svelte            |  10 +++--
 test/e2e/app.e2e.ts              |  37 ++++++++++++++++++
 15 files changed, 286 insertions(+), 43 deletions(-)
 create mode 100644 .gitea/workflows/release.yml
 create mode 100644 build/icon.png
 create mode 100644 build/icon.svg
 create mode 100644 public/icon.png

diff --git a/.gitea/workflows/release.yml b/.gitea/workflows/release.yml
new file mode 100644
index 0000000..343f94f
--- /dev/null
+++ b/.gitea/workflows/release.yml
@@ -0,0 +1,40 @@
+# Builds the Linux packages and the Windows installer when a version tag (v1.2.3) is pushed,
+# and attaches them to a Gitea release of that tag. macOS builds need a Mac and are not made here.
+name: release
+
+on:
+  push:
+    tags: ['v*']
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    # Has Wine, so the Windows installer builds on Linux
+    container: electronuserland/builder:wine
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 24
+      - run: npm ci
+      - run: npm run check
+      - run: npm test
+      - run: npm run build
+      - run: npx electron-builder --linux --win --publish never
+      - name: Upload to the release
+        env:
+          TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          API: ${{ github.server_url }}/api/v1/repos/${{ github.repository }}
+          TAG: ${{ github.ref_name }}
+        run: |
+          set -eu
+          release=$(curl -sf -H "Authorization: token $TOKEN" "$API/releases/tags/$TAG" || true)
+          if [ -z "$release" ]; then
+            release=$(curl -sf -X POST -H "Authorization: token $TOKEN" -H 'Content-Type: application/json' \
+              -d "{\"tag_name\":\"$TAG\",\"name\":\"mumh5 $TAG\"}" "$API/releases")
+          fi
+          id=$(printf '%s' "$release" | node -e "let s='';process.stdin.on('data',d=>s+=d).on('end',()=>console.log(JSON.parse(s).id))")
+          for f in release/*.AppImage release/*.deb release/*.tar.gz release/*.exe; do
+            curl -sf -X POST -H "Authorization: token $TOKEN" -F "attachment=@$f" "$API/releases/$id/assets?name=$(basename "$f")" >/dev/null
+            echo "uploaded $(basename "$f")"
+          done
diff --git a/README.md b/README.md
index 74651d5..c3c7ae5 100644
--- a/README.md
+++ b/README.md
@@ -27,7 +27,7 @@ mumh5 keeps the foundation and replaces the experience.
 
 | | Mumble desktop | mumh5 |
 |---|---|---|
-| Interface | Qt widgets, dense dialogs | Modern layout: server rail, channel tree, chat, side panels |
+| Interface | Qt widgets, dense dialogs | Modern layout (server rail, channel tree, chat, side panels), or the classic and stacked layouts of the desktop client |
 | Several servers at the same time | One connection | Many; voice on one, text on all, unread badges |
 | Sharing files | Images only, pasted inline and heavily limited | Any allowed file through your own [f0ckm](#file-sharing-with-f0ckm) host, inline players for images, video and audio. Images still work without one |
 | YouTube links | Plain links | Click-to-play player (privacy mode), optional thumbnails |
@@ -111,7 +111,18 @@ Dark, Light, Midnight (true black), Frost, and a faithful **Windows 95** theme w
 
 ## Getting started
 
-There are no release builds yet. For now, build it yourself; it takes a few minutes.
+Download a build from the [releases page](https://git.lat/kibi/mumh5/releases):
+
+| System | File |
+|---|---|
+| Windows | `mumh5-<version>-win-x64.exe` (installer; not signed yet, so Windows SmartScreen warns once) |
+| Linux, any distribution | `mumh5-<version>-linux-x86_64.AppImage` (make it executable, then run it) |
+| Debian, Ubuntu | `mumh5-<version>-linux-amd64.deb` |
+| Linux, portable | `mumh5-<version>-linux-x64.tar.gz` |
+
+There is no macOS build yet; build it yourself on a Mac (below).
+
+### Running from source
 
 You need [Node.js](https://nodejs.org/) 22 or newer and git.
 
@@ -132,7 +143,7 @@ npm run dist:win     # NSIS installer
 npm run dist:mac     # .dmg
 ```
 
-Installers are written to `release/`. Build each platform on that platform for the best results.
+Installers are written to `release/`. The Windows installer also builds on Linux with Wine installed; the macOS one needs a Mac. Pushing a version tag (`git tag v0.1.0 && git push origin v0.1.0`) makes the Gitea workflow in `.gitea/workflows/release.yml` build the Linux and Windows files and attach them to a release.
 
 ---
 
diff --git a/build/icon.png b/build/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..fa5ef813492702c6e4dce78ada80604b0aa1be97
GIT binary patch
literal 15479
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
T+*}Hj$Qe9c{an^LB{Ts54@#u3

literal 0
HcmV?d00001

diff --git a/build/icon.svg b/build/icon.svg
new file mode 100644
index 0000000..cb3707d
--- /dev/null
+++ b/build/icon.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024">
+  <!-- mumh5 app icon: the accent square with the headphones glyph, square caps like the UI icons -->
+  <rect width="1024" height="1024" fill="#7c6cff"/>
+  <rect x="0" y="880" width="1024" height="144" fill="#6a5ae8"/>
+  <g transform="translate(176 150) scale(28)" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter">
+    <path d="M3 14v-2a9 9 0 0 1 18 0v2"/>
+    <path d="M21 14v7h-4v-7z" fill="#ffffff"/>
+    <path d="M3 14v7h4v-7z" fill="#ffffff"/>
+  </g>
+  <rect x="424" y="700" width="176" height="36" fill="#3bd16f"/>
+</svg>
diff --git a/electron/main.ts b/electron/main.ts
index 3130eaf..f3aba65 100644
--- a/electron/main.ts
+++ b/electron/main.ts
@@ -136,6 +136,8 @@ function createWindow() {
     minHeight: 480,
     backgroundColor: '#111214',
     title: 'mumh5',
+    // Window and taskbar icon on Linux (Windows and macOS take it from the package)
+    icon: path.join(__dirname, '../dist/icon.png'),
     autoHideMenuBar: true,
     webPreferences: {
       preload: path.join(__dirname, 'preload.cjs'),
diff --git a/package.json b/package.json
index 51e3272..890a4fd 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "mumh5",
   "productName": "mumh5",
   "version": "0.1.0",
-  "description": "Modern Mumble client with rich chat, file sharing and video",
+  "description": "A modern Mumble client: Discord-like interface, file sharing, voice and more, for any Mumble server",
   "license": "MIT",
   "type": "module",
   "main": "dist-electron/main.cjs",
@@ -26,24 +26,37 @@
     "files": [
       "dist/**",
       "dist-electron/**",
+      "!dist-electron/*.map",
       "package.json",
       "LICENSE",
       "THIRD_PARTY_NOTICES.md"
     ],
     "directories": {
-      "output": "release"
+      "output": "release",
+      "buildResources": "build"
     },
     "linux": {
       "target": [
         "AppImage",
-        "deb"
+        "deb",
+        "tar.gz"
       ],
-      "category": "Network"
+      "category": "Network",
+      "executableName": "mumh5",
+      "synopsis": "Modern Mumble client",
+      "desktop": {
+        "entry": {
+          "StartupWMClass": "mumh5",
+          "Keywords": "mumble;voice;chat;voip;"
+        }
+      },
+      "syncDesktopName": true
     },
     "win": {
       "target": [
         "nsis"
-      ]
+      ],
+      "icon": "build/icon.png"
     },
     "mac": {
       "target": [
@@ -54,6 +67,22 @@
         "NSMicrophoneUsageDescription": "mumh5 uses the microphone for voice chat.",
         "NSCameraUsageDescription": "mumh5 uses the camera for video chat."
       }
+    },
+    "icon": "build/icon.png",
+    "artifactName": "${productName}-${version}-${os}-${arch}.${ext}",
+    "deb": {
+      "depends": [
+        "libnotify4",
+        "libxtst6",
+        "libnss3",
+        "libasound2 | libasound2t64"
+      ]
+    },
+    "nsis": {
+      "oneClick": false,
+      "allowToChangeInstallationDirectory": true,
+      "perMachine": false,
+      "shortcutName": "mumh5"
     }
   },
   "devDependencies": {
@@ -81,9 +110,14 @@
     "esbuild@0.28.2": true,
     "electron-winstaller": false
   },
-  "author": "Kibi Kelburton",
+  "author": {
+    "name": "Kibi Kelburton",
+    "email": "git@f0ck.it"
+  },
   "repository": {
     "type": "git",
     "url": "gitea@git.lat:kibi/mumh5.git"
-  }
+  },
+  "homepage": "https://git.lat/kibi/mumh5",
+  "desktopName": "mumh5.desktop"
 }
diff --git a/public/icon.png b/public/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..5b7f54d95ce6f1c3821f4e824eaa4a2f025d7412
GIT binary patch
literal 3396
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
N08dvxmvv4FO#rOY+kXH6

literal 0
HcmV?d00001

diff --git a/src/App.svelte b/src/App.svelte
index ebe0237..ac110f2 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -14,6 +14,7 @@
   import UserInfoDialog from './ui/UserInfoDialog.svelte';
   import ChannelDialog from './ui/ChannelDialog.svelte';
   import PublicServers from './ui/PublicServers.svelte';
+  import ResizeHandle from './ui/ResizeHandle.svelte';
   import { identities } from './lib/identities.svelte.ts';
   import { session } from './lib/session.svelte.ts';
   import { ui } from './lib/ui.svelte.ts';
@@ -23,6 +24,13 @@
   // wide: rail + sidebar + chat + panel; medium: panel as an overlay; narrow: everything but chat in drawers
   const layout = $derived(width >= 1100 ? 'wide' : width >= 760 ? 'medium' : 'narrow');
 
+  // Arrangement (Appearance setting): side is the default, classic puts the channel list right
+  // of the chat, stacked above it. Phones always use drawers.
+  const arrangement = $derived(layout === 'narrow' ? 'side' : store.settings.arrangement ?? 'side');
+  // The member panel sits inline only in the side arrangement on wide windows, otherwise it overlays
+  const panelInline = $derived(layout === 'wide' && arrangement === 'side');
+  let treeHeight = $state(Math.max(120, Number((() => { try { return localStorage.getItem('mumh5.treeHeight'); } catch { return null; } })()) || 280));
+
   let navOpen = $state(false);
   let editing = $state<{ server: SavedServer | null } | null>(null);
 
@@ -35,12 +43,13 @@
     else delete document.documentElement.dataset.theme;
   });
 
-  // The panel starts open on wide layouts only
+  // The panel starts open only where it sits inline
   let lastLayout = '';
   $effect(() => {
-    if (layout === lastLayout) return;
-    ui.panelOpen = layout === 'wide';
-    lastLayout = layout;
+    const key = `${layout}/${arrangement}`;
+    if (key === lastLayout) return;
+    ui.panelOpen = panelInline;
+    lastLayout = key;
   });
   // On phones one drawer at a time
   $effect(() => { if (layout === 'narrow' && ui.panelOpen) navOpen = false; });
@@ -53,26 +62,48 @@
 
   const closeOverlays = () => {
     navOpen = false;
-    if (layout !== 'wide') ui.panelOpen = false;
+    if (!panelInline) ui.panelOpen = false;
   };
 </script>
 
 <svelte:window bind:innerWidth={width} />
 
-<div class="app {layout}">
-  {#if layout !== 'narrow' || navOpen}
-    <div class="nav" class:drawer={layout === 'narrow'}>
-      <ServerRail onadd={() => (editing = { server: null })} onedit={s => (editing = { server: s })} onbrowse={() => (ui.publicServers = true)}
-        onsettings={() => (ui.settingsOpen = true)} />
-      <Sidebar resizable={layout !== 'narrow'} onnavigate={() => { if (layout === 'narrow') navOpen = false; }} />
+{#snippet rail()}
+  <ServerRail onadd={() => (editing = { server: null })} onedit={s => (editing = { server: s })} onbrowse={() => (ui.publicServers = true)}
+    onsettings={() => (ui.settingsOpen = true)} />
+{/snippet}
+{#snippet chat()}
+  <Chat showMenu={layout === 'narrow'} showStage={!panelInline && arrangement === 'side'} onmenu={() => (navOpen = true)} onpanel={togglePanel} />
+{/snippet}
+
+<div class="app {layout} {arrangement}">
+  {#if arrangement === 'classic'}
+    {@render rail()}
+    {@render chat()}
+    <Sidebar handleEdge="left" onnavigate={() => {}} />
+  {:else if arrangement === 'stacked'}
+    {@render rail()}
+    <div class="stack">
+      <div class="tree" style:height="{treeHeight}px">
+        <Sidebar fill onnavigate={() => {}} />
+        <ResizeHandle bind:width={treeHeight} edge="bottom" min={120} max={() => window.innerHeight - 220} initial={280}
+          storageKey="mumh5.treeHeight" label="Resize channel list" />
+      </div>
+      {@render chat()}
     </div>
-    {#if layout === 'narrow'}<button class="scrim" aria-label="Close" onclick={() => (navOpen = false)}></button>{/if}
+  {:else}
+    {#if layout !== 'narrow' || navOpen}
+      <div class="nav" class:drawer={layout === 'narrow'}>
+        {@render rail()}
+        <Sidebar resizable={layout !== 'narrow'} onnavigate={() => { if (layout === 'narrow') navOpen = false; }} />
+      </div>
+      {#if layout === 'narrow'}<button class="scrim" aria-label="Close" onclick={() => (navOpen = false)}></button>{/if}
+    {/if}
+    {@render chat()}
   {/if}
 
-  <Chat showMenu={layout === 'narrow'} showStage={layout !== 'wide'} onmenu={() => (navOpen = true)} onpanel={togglePanel} />
-
   {#if showPanel}
-    {#if layout === 'wide'}
+    {#if panelInline}
       <RightPanel onnavigate={() => {}} onclose={() => (ui.panelOpen = false)} />
     {:else}
       <button class="scrim" aria-label="Close" onclick={() => (ui.panelOpen = false)}></button>
@@ -104,6 +135,9 @@
   .nav { display: flex; flex: none; min-height: 0; }
   .nav.drawer { position: absolute; z-index: 20; top: 0; bottom: 0; left: 0; max-width: calc(100% - 48px); box-shadow: 8px 0 32px rgb(0 0 0 / 0.4); }
   .nav.drawer :global(.sidebar) { width: min(260px, calc(100vw - 68px - 48px)); }
+  .stack { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+  .stack > :global(.chat) { flex: 1; min-height: 0; }
+  .tree { position: relative; z-index: 1; flex: none; display: flex; min-height: 0; border-bottom: 1px solid var(--line); }
   .scrim { position: absolute; inset: 0; z-index: 15; background: rgb(0 0 0 / 0.5); }
   .panel-drawer { position: absolute; z-index: 20; top: 0; right: 0; bottom: 0; max-width: calc(100% - 48px); display: flex; box-shadow: -8px 0 32px rgb(0 0 0 / 0.4); }
 </style>
diff --git a/src/lib/settings.svelte.ts b/src/lib/settings.svelte.ts
index 8ed3cc7..965137b 100644
--- a/src/lib/settings.svelte.ts
+++ b/src/lib/settings.svelte.ts
@@ -23,8 +23,12 @@ export interface Settings {
   linkPreviews: 'host' | 'direct' | 'off';
   theme: ThemeId;
   publicListUrl: string;  // where the public server list comes from
+  arrangement: Arrangement;
 }
 
+// Window layouts; classic and stacked follow the Mumble desktop client's layouts of the same name
+export type Arrangement = 'side' | 'classic' | 'stacked';
+
 export type ThemeId = 'dark' | 'light' | 'midnight' | 'frost' | 'win95';
 
 export const THEMES: { id: ThemeId; name: string; note: string }[] = [
@@ -45,7 +49,8 @@ const defaults: Settings = {
   youtube: 'click',
   linkPreviews: 'host',
   theme: 'dark',
-  publicListUrl: 'https://publist.mumble.info/v1/list?version=1.5.0'
+  publicListUrl: 'https://publist.mumble.info/v1/list?version=1.5.0',
+  arrangement: 'side'
 };
 
 class SettingsStore {
diff --git a/src/ui/AppearanceSettings.svelte b/src/ui/AppearanceSettings.svelte
index 7c82b64..0f823fb 100644
--- a/src/ui/AppearanceSettings.svelte
+++ b/src/ui/AppearanceSettings.svelte
@@ -1,5 +1,16 @@
 <script lang="ts">
-  import { store, THEMES, type ThemeId } from '../lib/settings.svelte.ts';
+  import { store, THEMES, type ThemeId, type Arrangement } from '../lib/settings.svelte.ts';
+
+  const ARRANGEMENTS: { id: Arrangement; name: string; note: string }[] = [
+    { id: 'side', name: 'Modern', note: 'Channels left, members right' },
+    { id: 'classic', name: 'Classic', note: 'Chat left, channels right, like Mumble' },
+    { id: 'stacked', name: 'Stacked', note: 'Channels on top, chat below, like Mumble' }
+  ];
+
+  function arrange(id: Arrangement) {
+    store.settings.arrangement = id;
+    store.saveSettings();
+  }
 
   function pick(id: ThemeId) {
     store.settings.theme = id;
@@ -28,7 +39,41 @@
   {/each}
 </div>
 
+<h3 class="gap">Layout</h3>
+<div class="themes" role="radiogroup" aria-label="Layout">
+  {#each ARRANGEMENTS as a (a.id)}
+    {@const on = (store.settings.arrangement ?? 'side') === a.id}
+    <button role="radio" aria-checked={on} class:active={on} onclick={() => arrange(a.id)} aria-label={a.name}>
+      <span class="mini lay {a.id}" aria-hidden="true">
+        <span class="m-rail"><span></span><span></span></span>
+        {#if a.id === 'side'}<span class="m-side"><i></i><i class="sel"></i><i></i></span>{/if}
+        {#if a.id === 'stacked'}
+          <span class="m-col">
+            <span class="m-side"><i></i><i class="sel"></i></span>
+            <span class="m-chat"><span class="m-head"></span><i class="a"></i><i></i><span class="m-box"></span></span>
+          </span>
+        {:else}
+          <span class="m-chat"><span class="m-head"></span><i class="a"></i><i></i><i class="short"></i><span class="m-box"></span></span>
+        {/if}
+        {#if a.id === 'classic'}<span class="m-side"><i></i><i class="sel"></i><i></i></span>{/if}
+        {#if a.id === 'side'}<span class="m-members"><i></i><i></i></span>{/if}
+      </span>
+      <span class="name">{a.name}</span>
+      <span class="note">{a.note}</span>
+    </button>
+  {/each}
+</div>
+<p class="help">Narrow windows always use the phone layout.</p>
+
 <style>
+  .gap { margin-top: 22px; }
+  .help { margin: 6px 0 0; font-size: 13px; color: var(--text-dim); }
+  .m-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+  .m-col .m-chat { flex: 1; }
+  .m-col .m-side { width: auto; height: 34%; flex: none; padding: 5px; gap: 4px; border-bottom: 1px solid var(--line); }
+  .m-members { width: 18%; background: var(--bg-1); display: flex; flex-direction: column; gap: 5px; padding: 8px 4px; border-left: 1px solid var(--line); }
+  .m-members i { height: 4px; background: var(--text-faint); width: 80%; }
+  .lay.classic .m-side { border-left: 1px solid var(--line); }
   h3 { margin: 8px 0 0; font-size: 14px; }
   .themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-top: 10px; }
   .themes > button { display: flex; flex-direction: column; gap: 2px; padding: 8px; text-align: left; border: 1px solid var(--line); background: var(--bg-0); }
diff --git a/src/ui/Chat.svelte b/src/ui/Chat.svelte
index 7c24da2..4fc7532 100644
--- a/src/ui/Chat.svelte
+++ b/src/ui/Chat.svelte
@@ -58,13 +58,18 @@
         {:else}
           <h2>mumh5</h2>
           <p>Choose a server to get started, or find one:</p>
-          <button class="btn browse" onclick={() => (ui.publicServers = true)}>Browse public servers</button>
+          <div class="welcome-actions">
+            <button class="btn" onclick={() => (ui.publicServers = true)}>Browse public servers</button>
+            <button class="btn" onclick={() => { ui.settingsTab = 'identities'; ui.settingsOpen = true; }}>Manage identities</button>
+          </div>
         {/if}
       </div>
     {/snippet}
   </ChatLog>
 
-  <Composer target={session.view} placeholder={session.status === 'connected' ? `Message ${isDm ? '@' : '#'}${title}` : 'Not connected'} />
+  {#if session.status === 'connected'}
+    <Composer target={session.view} placeholder={`Message ${isDm ? '@' : '#'}${title}`} />
+  {/if}
 </section>
 
 <style>
@@ -79,7 +84,7 @@
   .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; }
+  .welcome-actions { display: flex; flex-wrap: wrap; gap: 8px; 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; }
diff --git a/src/ui/PublicServers.svelte b/src/ui/PublicServers.svelte
index 93d81ca..1c76926 100644
--- a/src/ui/PublicServers.svelte
+++ b/src/ui/PublicServers.svelte
@@ -26,17 +26,23 @@
 
   async function load() {
     // A new list starts a new ping round; answers from the previous round are dropped
-    generation++;
+    // and a list that arrives after the source changed is ignored
+    const round = ++generation;
     queue = [];
     running = 0;
     loading = true;
     error = '';
+    let list: PublicServer[] = [];
+    let failed = '';
     try {
-      servers = (await native?.publicServers(store.settings.publicListUrl)) ?? [];
-      if (!native) error = 'The public list needs the desktop app.';
+      list = (await native?.publicServers(store.settings.publicListUrl)) ?? [];
+      if (!native) failed = 'The public list needs the desktop app.';
     } catch (e) {
-      error = (e as Error).message.replace(/^Error invoking remote method '[^']+': (Error: )?/, '');
+      failed = (e as Error).message.replace(/^Error invoking remote method '[^']+': (Error: )?/, '');
     }
+    if (round !== generation || !alive) return;
+    servers = list;
+    error = failed;
     loading = false;
     pingVisible();
   }
diff --git a/src/ui/ResizeHandle.svelte b/src/ui/ResizeHandle.svelte
index a5d2ce6..60a23bc 100644
--- a/src/ui/ResizeHandle.svelte
+++ b/src/ui/ResizeHandle.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
   // Drag handle on one edge of a panel. `edge` is the side the handle sits on: a panel on
-  // the right of the window is resized from its left edge and vice versa. Width is remembered.
+  // the right of the window is resized from its left edge and vice versa; a panel at the
+  // bottom from its top edge and one at the top from its bottom edge (then `width` is its
+  // height). The size is remembered.
   let { width = $bindable(), edge, min, max, initial, storageKey, label }:
-    { width: number; edge: 'left' | 'right'; min: number; max: () => number; initial: number; storageKey: string; label: string } = $props();
+    { width: number; edge: 'left' | 'right' | 'top' | 'bottom'; min: number; max: () => number; initial: number; storageKey: string; label: string } = $props();
 
   let resizing = $state(false);
 
@@ -18,7 +20,7 @@
     resizing = true;
     document.body.style.userSelect = 'none';
     const box = (handle.parentElement as HTMLElement).getBoundingClientRect();
-    const move = (ev: PointerEvent) => setWidth(edge === 'left' ? box.right - ev.clientX : ev.clientX - box.left);
+    const move = (ev: PointerEvent) => setWidth(edge === 'left' ? box.right - ev.clientX : edge === 'top' ? box.bottom - ev.clientY : edge === 'bottom' ? ev.clientY - box.top : ev.clientX - box.left);
     const up = () => {
       resizing = false;
       document.body.style.userSelect = '';
@@ -32,8 +34,8 @@
   }
 
   function onkeydown(e: KeyboardEvent) {
-    const grow = edge === 'left' ? 'ArrowLeft' : 'ArrowRight';
-    const shrink = edge === 'left' ? 'ArrowRight' : 'ArrowLeft';
+    const grow = edge === 'left' ? 'ArrowLeft' : edge === 'top' ? 'ArrowUp' : edge === 'bottom' ? 'ArrowDown' : 'ArrowRight';
+    const shrink = edge === 'left' ? 'ArrowRight' : edge === 'top' ? 'ArrowDown' : edge === 'bottom' ? 'ArrowUp' : 'ArrowLeft';
     if (e.key === grow) setWidth(width + 16);
     else if (e.key === shrink) setWidth(width - 16);
     else return;
@@ -45,7 +47,7 @@
 
 <!-- Focusable separator is the ARIA window-splitter pattern -->
 <!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
-<div class="resize {edge}" class:active={resizing} role="separator" aria-orientation="vertical" aria-label={label}
+<div class="resize {edge}" class:active={resizing} role="separator" aria-orientation={edge === 'top' || edge === 'bottom' ? 'horizontal' : 'vertical'} aria-label={label}
   aria-valuenow={width} aria-valuemin={min} aria-valuemax={max()} tabindex="0" title="Drag to resize, double-click to reset"
   onpointerdown={start} ondblclick={() => setWidth(initial)} {onkeydown}></div>
 
@@ -53,6 +55,13 @@
   .resize { position: absolute; z-index: 5; top: 0; bottom: 0; width: 8px; cursor: col-resize; touch-action: none; }
   .resize.left { left: -4px; }
   .resize.right { right: -4px; }
+  .resize.top, .resize.bottom { left: 0; right: 0; width: auto; height: 8px; cursor: row-resize; }
+  .resize.top { top: -4px; bottom: auto; }
+  .resize.bottom { bottom: -4px; top: auto; }
+  .resize.top:hover, .resize.top:focus-visible, .resize.top.active,
+  .resize.bottom:hover, .resize.bottom:focus-visible, .resize.bottom.active {
+    background: linear-gradient(to bottom, transparent 3px, var(--accent) 3px, var(--accent) 5px, transparent 5px);
+  }
   .resize:hover, .resize:focus-visible, .resize.active {
     background: linear-gradient(to right, transparent 3px, var(--accent) 3px, var(--accent) 5px, transparent 5px);
     outline: none;
diff --git a/src/ui/Sidebar.svelte b/src/ui/Sidebar.svelte
index 2fe5aac..8b98324 100644
--- a/src/ui/Sidebar.svelte
+++ b/src/ui/Sidebar.svelte
@@ -11,7 +11,10 @@
   import { voice } from '../lib/audio/voice.svelte.ts';
 
   // resizable: false in the phone drawer, which keeps a fixed width
-  let { onnavigate, resizable = true }: { onnavigate: () => void; resizable?: boolean } = $props();
+  // handleEdge: which side the resize handle sits on (left when the list is on the right, classic layout)
+  // fill: take the whole area (stacked layout, where the parent sizes it)
+  let { onnavigate, resizable = true, handleEdge = 'right', fill = false }:
+    { onnavigate: () => void; resizable?: boolean; handleEdge?: 'left' | 'right'; fill?: boolean } = $props();
 
   const MIN_W = 200, DEFAULT_W = 260;
   const maxW = () => Math.max(MIN_W, Math.min(520, window.innerWidth - 520));
@@ -58,8 +61,8 @@
   );
 </script>
 
-<aside class="sidebar" style:width={resizable ? `${width}px` : undefined}>
-  {#if resizable}<ResizeHandle bind:width edge="right" min={MIN_W} max={maxW} initial={DEFAULT_W} storageKey="mumh5.sidebarWidth" label="Resize channel list" />{/if}
+<aside class="sidebar" class:fill style:width={resizable && !fill ? `${width}px` : undefined}>
+  {#if resizable && !fill}<ResizeHandle bind:width edge={handleEdge} min={MIN_W} max={maxW} initial={DEFAULT_W} storageKey="mumh5.sidebarWidth" label="Resize channel list" />{/if}
   <header class:trusted>
     <button class="title" onclick={showServerCert} disabled={!cert} title={cert ? (trusted ? 'Valid certificate. Click to view' : 'Self-signed or untrusted certificate. Click to view') : ''}>
       <strong>{#if cert}<Icon name={trusted ? 'lock' : 'shield'} size={14} />{/if}{session.server?.label ?? 'mumh5'}</strong>
@@ -134,6 +137,7 @@
 
 <style>
   .sidebar { position: relative; width: 260px; flex: none; display: flex; flex-direction: column; background: var(--bg-1); min-height: 0; }
+  .sidebar.fill { width: 100%; height: 100%; }
   header { height: 52px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 0; border-bottom: 1px solid var(--line); }
   header.trusted { background: #1d5c38; border-bottom-color: #2a7a4c; }
   header.trusted .status, header.trusted .icon-btn { color: #cfeedd; }
diff --git a/test/e2e/app.e2e.ts b/test/e2e/app.e2e.ts
index d2b609e..425bb01 100644
--- a/test/e2e/app.e2e.ts
+++ b/test/e2e/app.e2e.ts
@@ -85,6 +85,13 @@ try {
   await page.getByRole('dialog', { name: 'Set up your identity' }).waitFor({ state: 'detached' });
   console.log('ok: identity wizard creates an identity');
 
+  // Welcome page: no message box while offline, identities one click away
+  assert.equal(await page.locator('.chat .composer').count(), 0);
+  await page.getByRole('button', { name: 'Manage identities' }).click();
+  await page.getByRole('tab', { name: 'Identities', selected: true }).waitFor();
+  await page.getByRole('button', { name: 'Done', exact: true }).click();
+  console.log('ok: welcome page without composer, manage identities');
+
   // Settings: upload host + key
   if (process.env.UPLOAD_HOST && process.env.UPLOAD_KEY) {
     await page.getByTitle('Settings').click();
@@ -307,6 +314,36 @@ try {
   await page.getByRole('button', { name: 'Done', exact: true }).click();
   console.log('ok: color schemes');
 
+  // Layouts like the desktop client: classic (channels right of chat), stacked (channels above)
+  const box = (sel: string) => page.locator(sel).first().boundingBox().then(b => b!);
+  await page.getByTitle('Settings').click();
+  await page.getByRole('tab', { name: 'Appearance' }).click();
+  await page.getByRole('radio', { name: 'Classic' }).click();
+  await page.getByRole('button', { name: 'Done', exact: true }).click();
+  await page.locator('.app.classic').waitFor();
+  assert.ok((await box('.sidebar')).x > (await box('.chat')).x, 'classic: channel list right of chat');
+  await page.getByTitle('Settings').click();
+  await page.getByRole('tab', { name: 'Appearance' }).click();
+  await page.getByRole('radio', { name: 'Stacked' }).click();
+  await page.getByRole('button', { name: 'Done', exact: true }).click();
+  await page.locator('.app.stacked').waitFor();
+  const chatBox = await box('.chat'), treeBox = await box('.sidebar');
+  assert.ok(chatBox.y >= treeBox.y + treeBox.height - 1, 'stacked: chat below channel list');
+  // The split between chat and channel list drags
+  const handle = page.getByRole('separator', { name: 'Resize channel list' });
+  const hb = (await handle.boundingBox())!;
+  await page.mouse.move(hb.x + hb.width / 2, hb.y + hb.height / 2);
+  await page.mouse.down();
+  await page.mouse.move(hb.x + hb.width / 2, hb.y + 60, { steps: 4 });
+  await page.mouse.up();
+  assert.ok((await box('.sidebar')).height > treeBox.height + 40, 'stacked: split resizes');
+  await page.getByTitle('Settings').click();
+  await page.getByRole('tab', { name: 'Appearance' }).click();
+  await page.getByRole('radio', { name: 'Modern' }).click();
+  await page.getByRole('button', { name: 'Done', exact: true }).click();
+  await page.locator('.app.side').waitFor();
+  console.log('ok: classic and stacked layouts');
+
   // Public server list, from a local list in the official XML format
   const http = await import('node:http');
   const listServer = http.createServer((_req, res) => {