malice

public

Star0

Fork 0

Watch0

31 commits 2 branches 0 tags 0 releases4.4 MiB

Commit `f604ef6df0c4`

tarball

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

3 files changed+108-93

web: resolve sender names from the roster and even out timeline strips

On a fresh login macltok hands out senders with no display_name, so rooms showed raw user ids until the members pane happened to load the roster. The roster now loads whenever a sender lacks a name and backs names in rows, replies, pins and system lines. systemLine read displayName from closure, which Svelte doesn't track, so system lines kept the stale id. Banners become flush strips like the pinned strip, the completion lists anchor to the input field, and the sent state is a tick that no longer adds a line under the message.

Modified file: web/src/App.svelte+72 additions−61 deletions@@ -1240,6 +1240,15 @@
     return out;
   }
 
+  const rosterTried = new Set<string>();
+  $: fillMissingNames($selectedRoomId, items);
+  function fillMissingNames(roomId: string | null, list: TimelineItem[]): void {
+    if (!roomId || rosterTried.has(roomId) || $membersByRoom[roomId]) return;
+    if (!list.some((i) => i.kind === 'event' && !i.event.sender.display_name)) return;
+    rosterTried.add(roomId);
+    void loadMembers(roomId);
+  }
+
   function senderAvatarFor(userId: string): string | null {
     return avatarByUser[userId] ?? null;
   }
@@ -1756,7 +1765,7 @@
       {#if selectedRoom}
       <div class="head-title">
         <div class="head-room">
-          <MxcAvatar mxc={selectedRoom.avatar} label={selectedRoom.name} size={36} shape={selectedRoom.space ? 'rounded' : 'circle'} />
+          <MxcAvatar mxc={selectedRoom.avatar} label={selectedRoom.name} size={36} shape="rounded" />
           <div class="head-room-text">
             <h1>{selectedRoom.name}</h1>
             <div class="head-meta">
@@ -1769,10 +1778,12 @@
               {#if selectedRoom.direct}
                 <span class="pill">direct</span>
               {/if}
-              <span class="conn" title={`Sync state: ${$connection}`}>
-                <span class="dot {connectionClass($connection)}" aria-hidden="true"></span>
-                {$connection}
-              </span>
+              {#if $connection !== 'online'}
+                <span class="conn" title={`Sync state: ${$connection}`}>
+                  <span class="dot {connectionClass($connection)}" aria-hidden="true"></span>
+                  {$connection}
+                </span>
+              {/if}
             </div>
           </div>
         </div>
@@ -2178,7 +2189,7 @@
             <div class="pinned-head">
               <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M9 3h6l-1 6 4 4v2h-5v6l-1 1-1-1v-6H6v-2l4-4z" fill="currentColor" /></svg>
               <button type="button" class="pinned-latest" title="Jump to pinned message" on:click={() => jumpToPin(pins[0].event_id ?? '')}>
-                <strong>{senderLabel(pins[0].sender)}</strong>
+                <strong>{people[pins[0].sender.user_id]?.name ?? senderLabel(pins[0].sender)}</strong>
                 <span>{contentPreview(pins[0].content)}</span>
               </button>
               {#if pins.length > 1}
@@ -2198,7 +2209,7 @@
                 {#each pins.slice(1) as pin (pin.event_id)}
                   <li>
                     <button type="button" on:click={() => jumpToPin(pin.event_id ?? '')}>
-                      <strong>{senderLabel(pin.sender)}</strong>
+                      <strong>{people[pin.sender.user_id]?.name ?? senderLabel(pin.sender)}</strong>
                       <span>{contentPreview(pin.content)}</span>
                     </button>
                     {#if selectedRoom.can_pin}
@@ -2345,7 +2356,7 @@
           {:else if replyingTo && replyingTo.details.kind === 'Ready'}
             <div class="reply-bar" role="status">
               <span class="reply-bar-label">
-                Replying to <strong>{senderLabel(replyingTo.details.sender)}</strong>
+                Replying to <strong>{people[replyingTo.details.sender.user_id]?.name ?? senderLabel(replyingTo.details.sender)}</strong>
                 <span class="reply-bar-text">{contentPreview(replyingTo.details.content)}</span>
               </span>
               <button type="button" class="icon-btn" aria-label="Cancel reply" title="Cancel reply (Esc)" on:click={() => (replyingTo = null)}>
@@ -2378,59 +2389,6 @@
           {/if}
           <form class="composer" class:replying={replyingTo || editing} class:staging={currentStaged.length > 0} on:submit|preventDefault={() => send()}>
             <label class="visually-hidden" for="composer">Message {selectedRoom.name}</label>
-            {#if commandQuery !== null && commandCandidates.length > 0}
-              <ul class="mention-finder" role="listbox" aria-label="Commands">
-                {#each commandCandidates as name, i (name)}
-                  <li
-                    role="option"
-                    aria-selected={i === commandIndex}
-                    class:active={i === commandIndex}
-                    on:pointerdown|preventDefault={() => void pickCommand(name)}
-                    on:pointerenter={() => (commandIndex = i)}
-                  >
-                    <span class="mention-name">/{name}</span>
-                    <span class="mention-id">{COMMAND_USAGE[name]}</span>
-                  </li>
-                {/each}
-              </ul>
-            {/if}
-            {#if emoteQuery && emoteCandidates.length > 0}
-              <ul class="mention-finder" role="listbox" aria-label="Emotes">
-                {#each emoteCandidates as candidate, i (candidate.kind + candidate.shortcode)}
-                  <li
-                    role="option"
-                    aria-selected={i === emoteIndex}
-                    class:active={i === emoteIndex}
-                    on:pointerdown|preventDefault={() => void pickEmote(candidate)}
-                    on:pointerenter={() => (emoteIndex = i)}
-                  >
-                    {#if candidate.kind === 'custom'}
-                      <img class="finder-emote" src={mediaUrl(candidate.mxc) ?? ''} alt="" />
-                    {:else}
-                      <span class="finder-emote"><EmojiText text={candidate.emoji} /></span>
-                    {/if}
-                    <span class="mention-name">:{candidate.shortcode}:</span>
-                  </li>
-                {/each}
-              </ul>
-            {/if}
-            {#if mentionQuery && mentionCandidates.length > 0}
-              <ul class="mention-finder" role="listbox" aria-label="Mention someone">
-                {#each mentionCandidates as person, i (person.user_id)}
-                  <li
-                    role="option"
-                    aria-selected={i === mentionIndex}
-                    class:active={i === mentionIndex}
-                    on:pointerdown|preventDefault={() => void pickMention(person)}
-                    on:pointerenter={() => (mentionIndex = i)}
-                  >
-                    <MxcAvatar mxc={person.avatar} label={person.name} size={22} />
-                    <span class="mention-name">{person.name}</span>
-                    <span class="mention-id">{person.user_id}</span>
-                  </li>
-                {/each}
-              </ul>
-            {/if}
             <input
               type="file"
               multiple
@@ -2490,6 +2448,59 @@
               </div>
             {/if}
             <div class="composer-field">
+              {#if commandQuery !== null && commandCandidates.length > 0}
+                <ul class="mention-finder" role="listbox" aria-label="Commands">
+                  {#each commandCandidates as name, i (name)}
+                    <li
+                      role="option"
+                      aria-selected={i === commandIndex}
+                      class:active={i === commandIndex}
+                      on:pointerdown|preventDefault={() => void pickCommand(name)}
+                      on:pointerenter={() => (commandIndex = i)}
+                    >
+                      <span class="mention-name">/{name}</span>
+                      <span class="mention-id">{COMMAND_USAGE[name]}</span>
+                    </li>
+                  {/each}
+                </ul>
+              {/if}
+              {#if emoteQuery && emoteCandidates.length > 0}
+                <ul class="mention-finder" role="listbox" aria-label="Emotes">
+                  {#each emoteCandidates as candidate, i (candidate.kind + candidate.shortcode)}
+                    <li
+                      role="option"
+                      aria-selected={i === emoteIndex}
+                      class:active={i === emoteIndex}
+                      on:pointerdown|preventDefault={() => void pickEmote(candidate)}
+                      on:pointerenter={() => (emoteIndex = i)}
+                    >
+                      {#if candidate.kind === 'custom'}
+                        <img class="finder-emote" src={mediaUrl(candidate.mxc) ?? ''} alt="" />
+                      {:else}
+                        <span class="finder-emote"><EmojiText text={candidate.emoji} /></span>
+                      {/if}
+                      <span class="mention-name">:{candidate.shortcode}:</span>
+                    </li>
+                  {/each}
+                </ul>
+              {/if}
+              {#if mentionQuery && mentionCandidates.length > 0}
+                <ul class="mention-finder" role="listbox" aria-label="Mention someone">
+                  {#each mentionCandidates as person, i (person.user_id)}
+                    <li
+                      role="option"
+                      aria-selected={i === mentionIndex}
+                      class:active={i === mentionIndex}
+                      on:pointerdown|preventDefault={() => void pickMention(person)}
+                      on:pointerenter={() => (mentionIndex = i)}
+                    >
+                      <MxcAvatar mxc={person.avatar} label={person.name} size={22} />
+                      <span class="mention-name">{person.name}</span>
+                      <span class="mention-id">{person.user_id}</span>
+                    </li>
+                  {/each}
+                </ul>
+              {/if}
             <div class="composer-marks" aria-hidden="true" bind:this={marksEl}>{#each composerMarks as part}{#if part.mark}<mark>{part.text}</mark>{:else}{part.text}{/if}{/each}&#8203;</div>
             <textarea
               id="composer"

Modified file: web/src/app.css+13 additions−13 deletions@@ -247,15 +247,15 @@ input, textarea { font: inherit; }
 .rail-add { color: var(--muted); }
 .rail-add:hover { color: #fff; }
 .sec-banner {
+  flex: none;
   display: flex;
   align-items: center;
   gap: 10px;
-  margin: 8px 12px 0;
-  padding: 5px 6px 5px 12px;
+  min-height: 36px;
+  padding: 0 8px 0 16px;
   background: color-mix(in srgb, var(--accent) 14%, transparent);
-  border: 1px solid var(--accent);
+  border-bottom: 1px solid var(--accent);
   color: var(--text);
-  border-radius: var(--r-md);
   font-size: 12.5px;
 }
 .sec-banner.warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }
@@ -593,12 +593,11 @@ input, textarea { font: inherit; }
   padding: 2px 6px;
 }
 .conn-banner {
-  margin: 10px 16px 0;
-  padding: 7px 12px;
+  margin: 0;
+  padding: 9px 16px;
   background: var(--warn-bg);
-  border: 1px solid var(--warn-border);
+  border-bottom: 1px solid var(--warn-border);
   color: var(--warn-text);
-  border-radius: var(--r-md);
   font-size: 12.5px;
 }
 
@@ -673,9 +672,9 @@ input, textarea { font: inherit; }
 .composer .icon-btn[aria-expanded='true'], .composer .icon-btn[aria-pressed='true'] { color: var(--accent); }
 .mention-finder {
   position: absolute;
-  left: 16px;
-  right: 16px;
-  bottom: calc(100% + 4px);
+  left: -1px;
+  width: min(420px, calc(100% + 2px));
+  bottom: calc(100% + 6px);
   z-index: 20;
   max-width: 420px;
   margin: 0;
@@ -926,7 +925,8 @@ input, textarea { font: inherit; }
   font-size: 13px;
   animation: fade-in var(--pop);
 }
-.pinned-head { display: flex; align-items: center; gap: 8px; padding: 0 8px 0 14px; min-height: 36px; color: var(--accent); }
+.pinned-head { display: flex; align-items: center; gap: 10px; padding: 0 8px 0 14px; min-height: 36px; color: var(--accent); }
+.pinned-head > svg { flex: none; width: 34px; }
 .pinned-latest, .pinned-list li > button:first-child {
   flex: 1;
   min-width: 0;
@@ -961,6 +961,6 @@ input, textarea { font: inherit; }
 .pinned-count:hover { color: var(--text); }
 .pinned-count svg { transition: transform var(--pop); }
 .pinned-strip.open .pinned-count svg { transform: rotate(180deg); }
-.pinned-list { list-style: none; margin: 0; padding: 0 8px 6px 36px; max-height: 40vh; overflow-y: auto; animation: pop-in var(--pop); }
+.pinned-list { list-style: none; margin: 0; padding: 0 8px 6px 58px; max-height: 40vh; overflow-y: auto; animation: pop-in var(--pop); }
 .pinned-list li { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--border); }
 .pinned-strip .icon-btn { width: 26px; height: 26px; }

Modified file: web/src/lib/MessageRow.svelte+23 additions−19 deletions@@ -81,7 +81,7 @@
     KnockDenied: 'had the request to join denied'
   };
 
-  $: name = senderLabel(event.sender);
+  $: name = event.sender.display_name ?? people[event.sender.user_id]?.name ?? event.sender.user_id;
   $: displayName = event.sender.name_ambiguous ? `${name} (${event.sender.user_id})` : name;
   $: readers = event.read_by.map((id) => people[id] ?? { user_id: id, name: id, avatar: null });
   $: interactive = event.content.kind === 'Message' || event.content.kind === 'Sticker' || event.content.kind === 'Poll';
@@ -101,10 +101,11 @@
     }
   }
 
+  $: sent = interactive && showSent && event.own && event.send_state.kind === 'Sent' && event.event_id !== null;
+
   function sendLabel(state: SendState): string {
     if (state.kind === 'Failed') return state.will_retry ? 'failed — will retry' : 'failed — not delivered';
     if (state.kind === 'Sending') return 'sending…';
-    if (showSent && event.own && state.kind === 'Sent' && event.event_id) return '✓ sent';
     return '';
   }
 
@@ -180,7 +181,7 @@
   }
 
   function actorLabel(userId: string, name: string | null): string {
-    return name ?? userId;
+    return name ?? people[userId]?.name ?? userId;
   }
 
   function replyPreview(content: TimelineContent): string {
@@ -192,12 +193,12 @@
     return systemLine(content);
   }
 
-  function systemLine(content: TimelineContent): string {
+  function systemLine(content: TimelineContent, actor = displayName): string {
     switch (content.kind) {
       case 'Redacted':
         return 'Message deleted';
       case 'UnableToDecrypt':
-        return `Message from ${displayName} could not be decrypted`;
+        return `Message from ${actor} could not be decrypted`;
       case 'Membership': {
         const who = actorLabel(content.user_id, content.display_name);
         return `${who} ${MEMBERSHIP_LABELS[content.change] ?? 'updated their membership'}`;
@@ -217,26 +218,26 @@
       }
       case 'RoomName':
         return content.name
-          ? `${displayName} changed the room name to "${content.name}"`
-          : `${displayName} removed the room name`;
+          ? `${actor} changed the room name to "${content.name}"`
+          : `${actor} removed the room name`;
       case 'RoomTopic':
         return content.topic
-          ? `${displayName} changed the topic to "${content.topic}"`
-          : `${displayName} removed the topic`;
+          ? `${actor} changed the topic to "${content.topic}"`
+          : `${actor} removed the topic`;
       case 'RoomAvatar':
-        return content.avatar ? `${displayName} changed the room avatar` : `${displayName} removed the room avatar`;
+        return content.avatar ? `${actor} changed the room avatar` : `${actor} removed the room avatar`;
       case 'EncryptionEnabled':
-        return `${displayName} enabled encryption in this room`;
+        return `${actor} enabled encryption in this room`;
       case 'RoomCreated':
-        return `${displayName} created the room`;
+        return `${actor} created the room`;
       case 'RoomUpgraded':
-        return `${displayName} upgraded the room to a new version`;
+        return `${actor} upgraded the room to a new version`;
       case 'OtherState':
-        return `${displayName} ${STATE_LABELS[content.event_type] ?? `sent a state event (${content.event_type})`}`;
+        return `${actor} ${STATE_LABELS[content.event_type] ?? `sent a state event (${content.event_type})`}`;
       case 'Other':
-        return `${displayName} sent an event (${content.event_type})`;
+        return `${actor} sent an event (${content.event_type})`;
       default:
-        return displayName;
+        return actor;
     }
   }
 </script>
@@ -388,7 +389,7 @@
         on:click|stopPropagation={() => onJump?.(target)}
       >
         {#if event.reply_to.details.kind === 'Ready'}
-          <span class="reply-sender">{senderLabel(event.reply_to.details.sender)}</span>
+          <span class="reply-sender">{event.reply_to.details.sender.display_name ?? people[event.reply_to.details.sender.user_id]?.name ?? senderLabel(event.reply_to.details.sender)}</span>
           <span class="reply-text"><EmojiText text={replyPreview(event.reply_to.details.content)} /></span>
         {:else if event.reply_to.details.kind === 'Pending'}
           Loading reply…
@@ -421,7 +422,7 @@
     {:else if event.content.kind === 'Poll'}
       <p class="text">📊 {event.content.question}</p>
     {:else}
-      <p class="system-line">{systemLine(event.content)}</p>
+      <p class="system-line">{systemLine(event.content, displayName)}</p>
     {/if}
 
     {#if interactive && event.reactions.length > 0}
@@ -451,6 +452,7 @@
         {/each}
       </div>
     {/if}
+    {#if sent}<span class="sent-tick" title="Sent" aria-label="Sent">✓</span>{/if}
     {#if interactive && sendLabel(event.send_state)}
       <div class="msg-foot">
         <span class="sendstate" class:failed={event.send_state.kind === 'Failed'}>{sendLabel(event.send_state)}</span>
@@ -474,6 +476,7 @@
   .msg:hover .hover-time, .msg.selected .hover-time { opacity: 1; }
   .msg-foot { display: flex; align-items: center; gap: 8px; }
   .sendstate { font-size: 11px; color: var(--muted); }
+  .sent-tick { position: absolute; right: 12px; bottom: 4px; font-size: 11px; color: var(--muted); }
   .sendstate.failed { color: var(--danger); }
   .link-previews { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; max-width: 420px; }
   .avatar {
@@ -524,7 +527,8 @@
   .text.emote { font-style: italic; color: var(--muted); }
   .text.notice { color: var(--muted); }
   .system-line { color: var(--muted); font-size: 12.5px; font-style: italic; margin: 1px 0; }
-  .msg.system { opacity: 0.85; }
+  .msg.system { opacity: 0.85; --msg-gap: 1.5px; }
+  .msg.system .avatar-spacer { height: 0; padding-top: 0; }
   .reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
   .reaction {
     display: inline-flex; align-items: center; gap: 4px;

malice

Commit f604ef6df0c4

Commit `f604ef6df0c4`