feat(frontend): online dots on private chats, deleted last message struck through, back from a chat goes through history

frontend/src/lib/components/ChatListItem.svelte

@@ -4,9 +4,11 @@
   import Avatar from "#lib/components/ui/Avatar.svelte";
   import ContextMenu from "#lib/components/ui/ContextMenu.svelte";
   import ContextMenuItem from "#lib/components/ui/ContextMenuItem.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
   import { formatListDate } from "#lib/format/datetime.js";
   import { t } from "#lib/i18n/locale.svelte.js";
   import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { online } from "#lib/stores/online.svelte.js";
   import { peers } from "#lib/stores/peers.svelte.js";
   import { policyUi } from "#lib/stores/policy.svelte.js";
   import { type RightPanel, ui } from "#lib/stores/ui.svelte.js";
@@ -31,6 +33,14 @@
         ? t("chat.deletedAccount")
         : t("chat.fallbackTitle", { id: chat.chat_id }))
   );
+  const person = $derived(chat.chat_id > 0 && !chat.is_bot);
+  const isOnline = $derived(person && online.isOnline(chat.chat_id));
+
+  $effect(() => {
+    if (person) {
+      online.watch(chat.chat_id);
+    }
+  });
   const avatarKind = $derived(chat.chat_id > 0 ? "peer" : "chat");
   const ownId = $derived(accounts.selected?.tg_user_id ?? null);
   const showSender = $derived(
@@ -74,12 +84,14 @@
       class:selected
       use:ripple
     >
-      <Avatar
-        avatar={{ id: chat.chat_id, kind: avatarKind }}
-        colorKey={chat.chat_id}
-        hasAvatar={chat.has_avatar}
-        name={title}
-      />
+      <span class="avatar" class:online={isOnline}>
+        <Avatar
+          avatar={{ id: chat.chat_id, kind: avatarKind }}
+          colorKey={chat.chat_id}
+          hasAvatar={chat.has_avatar}
+          name={title}
+        />
+      </span>
       <div class="info">
         <div class="info-row">
           <h3 class="title">{title}</h3>
@@ -90,7 +102,13 @@
             {#if senderPrefix}
               <span class="sender">{senderPrefix}</span>
             {/if}
-            {preview}
+            {#if chat.last_deleted}
+              <span class="deleted-mark" title={t("chat.deletedPreview")}
+                ><Icon name="delete" size="1rem" /></span
+              ><s class="deleted-text">{preview}</s>
+            {:else}
+              {preview}
+            {/if}
           </span>
         </div>
       </div>
@@ -147,11 +165,15 @@
 
     @media (hover: hover) {
       &:hover {
+        --online-ring: var(--color-chat-hover);
+
         background-color: var(--color-chat-hover);
       }
     }
 
     &.selected {
+      --online-ring: var(--color-chat-active);
+
       background-color: var(--color-chat-active);
 
       .title,
@@ -163,6 +185,37 @@
     }
   }
 
+  .avatar {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+
+    &.online::after {
+      content: "";
+
+      position: absolute;
+      right: 0.0625rem;
+      bottom: 0.0625rem;
+
+      width: 0.875rem;
+      height: 0.875rem;
+      border: 2px solid var(--online-ring, var(--color-background));
+      border-radius: 50%;
+
+      background-color: var(--color-green);
+    }
+  }
+
+  .deleted-mark {
+    display: inline-flex;
+    margin-inline-end: 0.1875rem;
+    vertical-align: -0.1875rem;
+  }
+
+  .deleted-text {
+    text-decoration: line-through;
+  }
+
   .info {
     overflow: hidden;
     flex: 1;