malice

public

Star0

Fork 0

Watch0

12 commits 2 branches 0 tags 0 releases4.4 MiB

Commit `e15025643a20`

tarball

atagen <boss@atagen.co>2026-10-24 06:51 UTC

3 files changed+168-51

web: move room actions into a menu and animate the side panes

Security, members and leave buttons crowded the header, so members is now an icon and the rest sit behind a ⋯ menu that has room for more actions. Panes now resize via grid-template-columns transitions, which interpolate because the track count stays fixed at four. The spaces rail and channels pane fold independently.

Modified file: web/src/App.svelte+92 additions−41 deletions@@ -59,7 +59,7 @@
   } from './lib/link-previews';
   import { notifyTyping, stopTyping } from './lib/typing';
   import { formatDay } from './lib/format';
-  import { lastSpaceRooms, lineHeight, messageSpacing, navFolded } from './lib/appearance';
+  import { lastSpaceRooms, lineHeight, messageSpacing, navFolded, railFolded } from './lib/appearance';
   import SettingsPanel from './lib/SettingsPanel.svelte';
   import { packsForRoom, parseEncryptionState, parseOwnProfile, parseVerificationState, contentPreview, senderLabel } from './lib/types';
   import type { MemberSummary, OwnProfile, Person, QuickReaction, ReplyReference, RoomSummary, SendState, TimelineEvent, TimelineItem } from './lib/types';
@@ -970,16 +970,33 @@
     return 'dot-off';
   }
 
+  let roomMenuOpen = false;
+  let roomMenuEl: HTMLDivElement | null = null;
+
+  function roomMenuAction(action: () => void): void {
+    roomMenuOpen = false;
+    action();
+  }
+
+  function closeRoomMenuOutside(ev: PointerEvent): void {
+    if (roomMenuOpen && !roomMenuEl?.contains(ev.target as Node)) roomMenuOpen = false;
+  }
+
   function onKeydown(ev: KeyboardEvent): void {
     if (ev.key === 'Escape') {
-      if (dialog) dialog = null;
+      if (roomMenuOpen) roomMenuOpen = false;
+      else if (dialog) dialog = null;
       else if (membersOpen && window.innerWidth < 1100) membersOpen = false;
       else if (sidebarOpen) sidebarOpen = false;
     }
   }
 </script>
 
-<svelte:window on:keydown={onKeydown} on:pointerup={() => (draggingScrollbar = false)} />
+<svelte:window
+  on:keydown={onKeydown}
+  on:pointerdown={closeRoomMenuOutside}
+  on:pointerup={() => (draggingScrollbar = false)}
+/>
 
 {#if !booted}
   <div class="splash" role="status" aria-label="Loading Malice">
@@ -994,7 +1011,14 @@
 {:else if $sessionUser == null}
   <LoginPanel softLogout={$softLogout} on:done={(ev) => afterLogin(ev.detail)} />
 {:else}
-  <div class="app" class:nav-folded={$navFolded && selectedRoom} style:--msg-gap={`${$messageSpacing}px`} style:--msg-line-height={$lineHeight}>
+  <div
+    class="app"
+    class:nav-folded={$navFolded && selectedRoom}
+    class:rail-folded={$railFolded && selectedRoom}
+    class:members-open={selectedRoom && membersOpen}
+    style:--msg-gap={`${$messageSpacing}px`}
+    style:--msg-line-height={$lineHeight}
+  >
     <nav class="rail" aria-label="Servers and spaces">
       <button
         type="button"
@@ -1307,13 +1331,31 @@
           </button>
           <button
             type="button"
-            class="icon-btn only-desktop"
+            class="icon-btn only-desktop pane-toggle"
+            aria-pressed={!$railFolded}
+            aria-label={$railFolded ? 'Show spaces' : 'Hide spaces'}
+            title={$railFolded ? 'Show spaces' : 'Hide spaces'}
+            on:click={() => railFolded.update((v) => !v)}
+          >
+            <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
+              <rect x="3" y="4" width="18" height="16" rx="2" fill="none" stroke="currentColor" stroke-width="2" />
+              <circle cx="7" cy="9" r="1.4" fill="currentColor" />
+              <circle cx="7" cy="13" r="1.4" fill="currentColor" />
+              <circle cx="7" cy="17" r="1.4" fill="currentColor" />
+            </svg>
+          </button>
+          <button
+            type="button"
+            class="icon-btn only-desktop pane-toggle"
             aria-pressed={!$navFolded}
-            aria-label={$navFolded ? 'Show spaces and rooms' : 'Hide spaces and rooms'}
-            title={$navFolded ? 'Show spaces and rooms' : 'Hide spaces and rooms'}
+            aria-label={$navFolded ? 'Show channels' : 'Hide channels'}
+            title={$navFolded ? 'Show channels' : 'Hide channels'}
             on:click={() => navFolded.update((v) => !v)}
           >
-            <span aria-hidden="true">{$navFolded ? '»' : '«'}</span>
+            <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
+              <rect x="3" y="4" width="18" height="16" rx="2" fill="none" stroke="currentColor" stroke-width="2" />
+              <path d="M10 4v16" stroke="currentColor" stroke-width="2" />
+            </svg>
           </button>
           <div class="head-title">
             <div class="head-room">
@@ -1339,34 +1381,7 @@
             </div>
           </div>
           <div class="head-actions">
-            <button
-              type="button"
-              class="ghost-btn"
-              aria-label="Encryption and verification"
-              title="Encryption and verification"
-              on:click={() => (dialog = 'security')}
-            >
-              🛡 Security
-            </button>
-            <button
-              type="button"
-              class="ghost-btn"
-              aria-pressed={membersOpen}
-              aria-label={membersOpen ? 'Hide members' : 'Show members'}
-              on:click={toggleMembers}
-            >
-              Members
-            </button>
-            {#if selectedRoom.membership === 'Joined'}
-              <button
-                type="button"
-                class="ghost-btn danger"
-                disabled={leaveBusy}
-                on:click={() => void leave()}
-              >
-                {leaveBusy ? 'Leaving…' : 'Leave'}
-              </button>
-            {:else}
+            {#if selectedRoom.membership !== 'Joined'}
               <button
                 type="button"
                 class="primary-btn"
@@ -1378,12 +1393,48 @@
             {/if}
             <button
               type="button"
-              class="icon-btn only-mobile"
-              aria-label="Toggle members"
+              class="icon-btn"
+              aria-pressed={membersOpen}
+              aria-label={membersOpen ? 'Hide members' : 'Show members'}
+              title="Members"
               on:click={toggleMembers}
             >
-              <span aria-hidden="true">ⓘ</span>
+              <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
+                <circle cx="12" cy="8" r="4" fill="none" stroke="currentColor" stroke-width="2" />
+                <path d="M4 20c0-4 3.6-6 8-6s8 2 8 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+              </svg>
             </button>
+            <div class="room-menu-wrap" bind:this={roomMenuEl}>
+              <button
+                type="button"
+                class="icon-btn"
+                aria-haspopup="menu"
+                aria-expanded={roomMenuOpen}
+                aria-label="Room options"
+                title="Room options"
+                on:click={() => (roomMenuOpen = !roomMenuOpen)}
+              >
+                <span aria-hidden="true">⋯</span>
+              </button>
+              {#if roomMenuOpen}
+                <div class="room-menu" role="menu">
+                  <button type="button" role="menuitem" on:click={() => roomMenuAction(() => (dialog = 'security'))}>
+                    Security
+                  </button>
+                  {#if selectedRoom.membership === 'Joined'}
+                    <button
+                      type="button"
+                      role="menuitem"
+                      class="danger"
+                      disabled={leaveBusy}
+                      on:click={() => roomMenuAction(() => void leave())}
+                    >
+                      {leaveBusy ? 'Leaving…' : 'Leave room'}
+                    </button>
+                  {/if}
+                </div>
+              {/if}
+            </div>
           </div>
         </header>
 
@@ -1623,8 +1674,8 @@
       {/if}
     </main>
 
-    {#if selectedRoom && membersOpen}
-      <aside class="members" aria-label={`Members of ${selectedRoom.name}`}>
+    {#if selectedRoom}
+      <aside class="members" aria-hidden={!membersOpen} aria-label={`Members of ${selectedRoom.name}`}>
         <div class="members-head">
           <h2>Members</h2>
           <button type="button" class="icon-btn" aria-label="Close members" on:click={() => (membersOpen = false)}>

Modified file: web/src/app.css+75 additions−10 deletions@@ -133,15 +133,38 @@ input, textarea { font: inherit; }
 }
 
 .app {
+  --rail-w: 68px;
+  --side-w: 300px;
+  --members-w: 0px;
+  --pane-ease: 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
   display: grid;
-  grid-template-columns: 68px 300px 1fr;
+  grid-template-columns: var(--rail-w) var(--side-w) minmax(0, 1fr) var(--members-w);
   height: 100dvh;
   overflow: hidden;
+  transition: grid-template-columns var(--pane-ease);
+}
+.app.rail-folded { --rail-w: 0px; }
+.app.nav-folded { --side-w: 0px; }
+.app.members-open { --members-w: 260px; }
+.app > .rail { grid-column: 1; }
+.app > .sidebar { grid-column: 2; }
+.app > .chat { grid-column: 3; }
+.app > .members { grid-column: 4; }
+.app > .rail, .app > .sidebar, .app > .members {
+  min-width: 0;
+  transition: visibility 0s linear 0s;
+}
+.app > .rail { overflow-x: hidden; }
+.app > .sidebar, .app > .members { overflow: hidden; }
+.app > .sidebar > * { min-width: 300px; }
+.app > .members > * { min-width: 260px; }
+.app.rail-folded > .rail, .app.nav-folded > .sidebar, .app:not(.members-open) > .members {
+  visibility: hidden;
+  transition: visibility 0s linear 0.22s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .app { --pane-ease: 0s; }
 }
-.app:has(.members) { grid-template-columns: 68px 300px 1fr 260px; }
-.app.nav-folded { grid-template-columns: 1fr; }
-.app.nav-folded:has(.members) { grid-template-columns: 1fr 260px; }
-.app.nav-folded > .rail, .app.nav-folded > .sidebar { display: none; }
 
 /* ——— Rail ——— */
 .rail {
@@ -397,7 +420,38 @@ input, textarea { font: inherit; }
 .dot-online { background: var(--ok); }
 .dot-busy { background: var(--warn); }
 .dot-off { background: var(--danger); }
-.head-actions { display: flex; align-items: center; gap: 8px; }
+.head-actions { display: flex; align-items: center; gap: 4px; }
+.head-actions .icon-btn { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; }
+.head-actions .icon-btn[aria-pressed='true'], .head-actions .icon-btn[aria-expanded='true'] { background: var(--panel-2); color: var(--text); }
+.room-menu-wrap { position: relative; }
+.room-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 40;
+  min-width: 180px;
+  display: flex;
+  flex-direction: column;
+  padding: 4px;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
+}
+.room-menu button {
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: var(--text);
+  font: inherit;
+  font-size: 13.5px;
+  text-align: left;
+  padding: 7px 10px;
+  cursor: pointer;
+}
+.room-menu button:hover:not(:disabled) { background: var(--hover); }
+.room-menu button:disabled { opacity: 0.5; cursor: default; }
+.room-menu button.danger { color: var(--danger); }
 
 .primary-btn {
   background: var(--accent);
@@ -675,15 +729,26 @@ input, textarea { font: inherit; }
 .only-mobile { display: none; }
 
 @media (max-width: 1100px) {
-  .app, .app:has(.members), .app.nav-folded, .app.nav-folded:has(.members) { grid-template-columns: 60px 1fr; }
-  .app.nav-folded > .rail, .app.nav-folded > .sidebar { display: flex; }
+  .app {
+    --rail-w: 60px !important;
+    --side-w: 0px !important;
+    --members-w: 0px !important;
+    transition: none;
+  }
+  .app > .rail, .app > .sidebar { visibility: visible !important; }
+  .app > .sidebar { transition: transform var(--pane-ease); }
+  .app > .sidebar > *, .app > .members > * { min-width: 0; }
+  .app > .members { transition: transform var(--pane-ease), visibility 0s linear 0s; }
+  .app:not(.members-open) > .members {
+    transform: translateX(100%);
+    transition: transform var(--pane-ease), visibility 0s linear 0.22s;
+  }
   .sidebar {
     position: fixed;
     top: 0; bottom: 0; left: 60px;
     width: min(320px, 85vw);
     z-index: 40;
     transform: translateX(calc(-100% - 60px));
-    transition: transform 0.18s ease;
     box-shadow: 8px 0 32px rgba(0, 0, 0, 0.5);
   }
   .sidebar.open { transform: none; }
@@ -713,7 +778,7 @@ input, textarea { font: inherit; }
 }
 
 @media (max-width: 640px) {
-  .app, .app:has(.members), .app.nav-folded, .app.nav-folded:has(.members) { grid-template-columns: 52px 1fr; }
+  .app { --rail-w: 52px !important; }
   .sidebar { left: 52px; transform: translateX(calc(-100% - 52px)); }
   .scrim { left: 52px; }
   .rail-btn { width: 40px; height: 40px; font-size: 16px; }

Modified file: web/src/lib/appearance.ts+1

@@ -27,6 +27,7 @@ const isSpacing = (v: unknown): v is number =>

2727 typeof v === 'number' && Number.isFinite(v) && v >= MESSAGE_SPACING_MIN && v <= MESSAGE_SPACING_MAX;

2828

2929 export const navFolded = persisted('malice.navFolded', false, isBool);

30+export const railFolded = persisted('malice.railFolded', false, isBool);

3031 export const messageSpacing = persisted('malice.messageSpacing', MESSAGE_SPACING_DEFAULT, isSpacing);

3132

3233 export const LINE_HEIGHT_MIN = 1.1;

malice

Commit e15025643a20

Commit `e15025643a20`