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

frontend/src/lib/components/ChatHeader.svelte

@@ -29,8 +29,11 @@
   const isDm = $derived(chatId > 0);
   const chat = $derived(chats.byId(chatId));
   const discovered = $derived(discover.get(chatId));
+  const DONE_DURATION = 2500;
+
   let peer = $state<PeerView | null>(null);
   let backfilling = $state(false);
+  let backfilled = $state(false);
 
   async function backfill() {
     if (backfilling) {
@@ -39,7 +42,10 @@
     backfilling = true;
     try {
       await enqueueBackfill(chatId, true);
-      toasts.success(t("chat.backfill.started"));
+      backfilled = true;
+      setTimeout(() => {
+        backfilled = false;
+      }, DONE_DURATION);
     } catch {
       toasts.error(t("chat.backfill.failed"));
     } finally {
@@ -48,6 +54,10 @@
   }
 
   function back() {
+    if (page.state.inApp) {
+      history.back();
+      return;
+    }
     const target = new URL(page.url.href);
     target.pathname = "/app";
     goto(withoutMessage(target));
@@ -216,14 +226,15 @@
       <Icon name="stats" />
     </Button>
     <Button
-      aria-label={t("chat.backfill")}
+      aria-label={backfilled ? t("chat.backfill.started") : t("chat.backfill")}
       loading={backfilling}
       onclick={backfill}
       round
       smaller
+      title={backfilled ? t("chat.backfill.started") : t("chat.backfill")}
       variant="translucent"
     >
-      <Icon name="cloud-download" />
+      <Icon name={backfilled ? "check" : "cloud-download"} />
     </Button>
   </div>
 </header>
@@ -287,8 +298,13 @@
   }
 
   .subtitle {
+    overflow: hidden;
+    display: block;
+
     font-size: 0.8125rem;
     color: var(--color-text-secondary);
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
     &.online {
       color: var(--color-primary);