malice

public

Star0

Fork 0

Watch0

39 commits 2 branches 0 tags 0 releases4.4 MiB

Commit `7efc4c6d41ab`

tarball

atagen <boss@atagen.co>2026-10-24 11:40 UTC

2 files changed+67-20

web: refine responsive panes and pin previews

Modified file: web/src/App.svelte+42 additions−4 deletions@@ -449,11 +449,12 @@
     selectedSpaceId = null;
     spaceChildIds = null;
     spaceChildrenError = null;
+    if (window.innerWidth > 640) navFolded.set(false);
     sidebarOpen = true;
   }
 
   function toggleChannelsPane(): void {
-    if (window.innerWidth <= 1100) sidebarOpen = !sidebarOpen;
+    if (window.innerWidth <= 640) sidebarOpen = !sidebarOpen;
     else navFolded.update((v) => !v);
   }
 
@@ -469,6 +470,7 @@
     if (resume) {
       void selectRoom(resume);
     } else {
+      if (window.innerWidth > 640) navFolded.set(false);
       sidebarOpen = true;
       // A space is navigation, not a message timeline.
       selectedRoomId.set(null);
@@ -478,6 +480,7 @@
       if (selectedSpaceId === spaceId) {
         spaceChildIds = res.room_ids ?? [];
         if (resume && !spaceChildIds.includes(resume) && $selectedRoomId === resume) {
+          if (window.innerWidth > 640) navFolded.set(false);
           sidebarOpen = true;
           selectedRoomId.set(null);
         }
@@ -924,6 +927,8 @@
 
   let pinnedOpenFor: string | null = null;
   let pinsExpanded = false;
+  let pinPreview: TimelineEvent | null = null;
+  let pinJumpBusy = false;
   $: syncPinned(selectedRoom?.room_id ?? null, (selectedRoom?.pinned_events.length ?? 0) > 0);
   function syncPinned(roomId: string | null, hasPins: boolean): void {
     const want = hasPins ? roomId : null;
@@ -951,9 +956,29 @@
     );
   }
 
-  function jumpToPin(eventId: string): void {
+  async function jumpToPin(eventId: string): Promise<void> {
+    const roomId = $selectedRoomId;
+    if (!roomId || !eventId || pinJumpBusy) return;
     pinsExpanded = false;
-    jumpTo(eventId);
+    pinPreview = pins.find((event) => event.event_id === eventId) ?? null;
+    pinJumpBusy = true;
+    try {
+      for (let attempt = 0; attempt < 24; attempt += 1) {
+        if (($timelines[roomId] ?? []).some((item) => item.kind === 'event' && item.event.event_id === eventId)) {
+          pinPreview = null;
+          await tick();
+          jumpTo(eventId);
+          return;
+        }
+        await paginateRoom(roomId);
+        await new Promise((resolve) => window.setTimeout(resolve, 180));
+      }
+      pushBanner('Could not load that pinned message');
+    } catch (e) {
+      pushBanner(e instanceof Error ? e.message : 'Could not load that pinned message');
+    } finally {
+      pinJumpBusy = false;
+    }
   }
 
   function jumpTo(eventId: string): void {
@@ -1716,7 +1741,7 @@
 {:else}
   <div
     class="app"
-    class:nav-folded={$navFolded && (selectedRoom || sidebarOpen)}
+    class:nav-folded={$navFolded}
     class:rail-folded={$railFolded && selectedRoom}
     class:members-open={selectedRoom && membersOpen}
     class:sidebar-open={sidebarOpen}
@@ -2257,6 +2282,19 @@
           <p class="conn-banner error" role="alert">{openFailed[$selectedRoomId]}</p>
         {/if}
 
+        {#if pinPreview}
+          <div class="pin-preview" role="dialog" aria-label="Pinned message preview">
+            <div class="pin-preview-head">
+              <strong>{people[pinPreview.sender.user_id]?.name ?? senderLabel(pinPreview.sender)}</strong>
+              <button type="button" class="icon-btn" aria-label="Close pinned message preview" on:click={() => (pinPreview = null)}>✕</button>
+            </div>
+            <p>{contentPreview(pinPreview.content)}</p>
+            <button type="button" class="primary-btn" disabled={pinJumpBusy} on:click={() => void jumpToPin(pinPreview?.event_id ?? '')}>
+              {pinJumpBusy ? 'Loading message…' : 'Jump to message'}
+            </button>
+          </div>
+        {/if}
+
         <!-- svelte-ignore a11y_no_static_element_interactions -->
         <div
           class="timeline"

Modified file: web/src/app.css+25 additions−16 deletions@@ -282,10 +282,11 @@ input, textarea { font: inherit; }
   min-height: 0;
 }
 .side-search {
+  order: 2;
   display: flex;
   gap: 4px;
   padding: 8px;
-  border-bottom: 1px solid var(--border);
+  border-top: 1px solid var(--border);
 }
 .side-search input {
   flex: 1;
@@ -298,7 +299,7 @@ input, textarea { font: inherit; }
   padding: 0 10px;
 }
 .side-search input:focus { outline: none; border-color: var(--accent); }
-.side-scroll { flex: 1; overflow-y: auto; padding: 6px; min-height: 0; }
+.side-scroll { order: 1; flex: 1; overflow-y: auto; padding: 6px; min-height: 0; }
 .side-h {
   font-size: 10.5px;
   font-weight: 650;
@@ -463,7 +464,7 @@ input, textarea { font: inherit; }
 .scrim { display: none; }
 
 /* ——— Chat ——— */
-.chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
+.chat { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
 .empty {
   margin: auto;
   text-align: center;
@@ -583,7 +584,7 @@ input, textarea { font: inherit; }
 .ghost-btn.danger { color: var(--danger); }
 .ghost-btn.danger:hover:not(:disabled) { border-color: var(--danger); }
 
-.banners { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 0; }
+.banners { position: absolute; top: 8px; left: 12px; right: 12px; z-index: 12; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
 .banner {
   display: flex;
   align-items: center;
@@ -595,6 +596,7 @@ input, textarea { font: inherit; }
   padding: 6px 10px;
   font-size: 13px;
   animation: pop-in var(--pop);
+  pointer-events: auto;
 }
 .banner span { flex: 1; }
 .banner button {
@@ -613,6 +615,10 @@ input, textarea { font: inherit; }
   color: var(--warn-text);
   font-size: 12.5px;
 }
+.pin-preview { position: absolute; top: 56px; right: 16px; z-index: 11; width: min(360px, calc(100% - 32px)); padding: 12px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); box-shadow: 0 12px 36px rgb(0 0 0 / 0.35); animation: pop-in var(--pop); }
+.pin-preview-head { display: flex; align-items: center; gap: 8px; }
+.pin-preview-head strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pin-preview p { margin: 8px 0 12px; color: var(--muted); overflow-wrap: anywhere; }
 
 .timeline {
   flex: 1;
@@ -946,19 +952,22 @@ input, textarea { font: inherit; }
   .only-mobile { display: none; }
   .only-desktop { display: inline-block; }
   .app { transition: grid-template-columns var(--pane-ease); }
-  .app > .sidebar { left: var(--rail-w); transform: translateX(calc(-100% - var(--rail-w))); }
-  .app > .sidebar.open { transform: none; }
-  .scrim { left: var(--rail-w); }
-  .app > .account {
-    position: fixed;
-    left: var(--rail-w);
-    bottom: 0;
-    z-index: 41;
-    width: var(--side-open, 260px);
-    transform: translateX(calc(-100% - var(--rail-w)));
-    transition: transform var(--pane-ease);
+  .app { --side-w: var(--side-open, 260px); }
+  .app.rail-folded { --rail-w: 0px; }
+  .app.rail-folded > .rail { visibility: hidden !important; }
+  .app > .sidebar {
+    position: relative;
+    left: auto;
+    top: auto;
+    bottom: auto;
+    width: auto;
+    transform: none;
+    box-shadow: none;
+    transition: visibility 0s linear 0s;
   }
-  .app.sidebar-open > .account { transform: none; }
+  .app > .sidebar > * { min-width: var(--side-open, 260px); }
+  .app.nav-folded > .sidebar { visibility: hidden !important; transition: visibility 0s linear 0.22s; }
+  .scrim { display: none; }
   .app > .members {
     position: relative;
     top: auto;

malice

Commit 7efc4c6d41ab

Commit `7efc4c6d41ab`