feat(frontend): exact time on the message time, deletion and edit times in the meta, note marker, copy link answered in the menu, media menu keeps the message items, date pill opens the calendar, capture gaps between messages

frontend/src/lib/components/MessageBubble.svelte

@@ -15,14 +15,15 @@
   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 CopyItem from "#lib/components/ui/CopyItem.svelte";
   import Icon from "#lib/components/ui/Icon.svelte";
   import WebPage from "#lib/components/WebPage.svelte";
   import { accountName, peerColorIndex, peerName } from "#lib/format/peer.js";
   import { t } from "#lib/i18n/locale.svelte.js";
   import { accounts } from "#lib/stores/accounts.svelte.js";
   import { chats } from "#lib/stores/chats.svelte.js";
+  import { notes } from "#lib/stores/notes.svelte.js";
   import { peers } from "#lib/stores/peers.svelte.js";
-  import { toasts } from "#lib/stores/toasts.svelte.js";
   import { ui } from "#lib/stores/ui.svelte.js";
   import { appear } from "#lib/transitions/appear.js";
   import { goto } from "$app/navigation";
@@ -137,13 +138,8 @@
       onjump(message.reply.message_id);
     }
   }
-  async function copyText() {
-    await navigator.clipboard.writeText(message.text ?? "");
-    toasts.success(t("thread.copiedText"));
-  }
-  async function copyId() {
-    await navigator.clipboard.writeText(String(message.message_id));
-    toasts.success(t("thread.copiedId"));
+  function messageLink(): string {
+    return `${location.origin}/app/${message.chat_id}?message=${message.message_id}`;
   }
   function openSenderProfile() {
     if (senderChat === message.chat_id) {
@@ -212,12 +208,6 @@
         {#if message.reply}
           <ReplyHeader {onjump} reply={message.reply} />
         {/if}
-        {#if deleted}
-          <span class="deleted-tag">
-            <Icon name="delete" size="0.875rem" />
-            {t("thread.deleted")}
-          </span>
-        {/if}
         {#if message.poll}
           <Poll poll={message.poll} />
         {/if}
@@ -236,7 +226,13 @@
               {own}
             />
           {:else if message.has_media}
-            <MessageMedia {message} onopen={() => onmedia(0)} {own} />
+            <MessageMedia
+              items={menu}
+              {message}
+              onopen={() => onmedia(0)}
+              {onversions}
+              {own}
+            />
           {/if}
         {/if}
         {#if hasText}
@@ -266,7 +262,13 @@
             {t("thread.links", { count: linkCount })}
           </button>
         {/if}
-        <MessageMeta {message} {onversions} {own} />
+        <MessageMeta
+          {message}
+          noted={notes.has(message)}
+          onnote={openAnnotations}
+          {onversions}
+          {own}
+        />
         {#if message.inline_buttons.length}
           <InlineButtons rows={message.inline_buttons} />
         {/if}
@@ -319,14 +321,26 @@
         >{t("thread.toReply")}</ContextMenuItem
       >
     {/if}
+    <CopyItem
+      done={t("chat.menu.linkCopied")}
+      icon="link"
+      label={t("chat.menu.copyLink")}
+      text={messageLink}
+    />
     {#if hasText}
-      <ContextMenuItem icon="copy" onselect={copyText}
-        >{t("thread.copyText")}</ContextMenuItem
-      >
+      <CopyItem
+        done={t("chat.menu.copied")}
+        icon="copy"
+        label={t("thread.copyText")}
+        text={() => message.text ?? ""}
+      />
     {/if}
-    <ContextMenuItem icon="hashtag" onselect={copyId}
-      >{t("thread.copyId")}</ContextMenuItem
-    >
+    <CopyItem
+      done={t("chat.menu.copied")}
+      icon="hashtag"
+      label={t("thread.copyId")}
+      text={() => String(message.message_id)}
+    />
     {#if isGroupChat && !own && message.sender_id !== null}
       <ContextMenuItem icon="info" onselect={openSenderProfile}
         >{t("thread.senderProfile")}</ContextMenuItem
@@ -454,17 +468,6 @@
     text-decoration: line-through;
   }
 
-  .deleted-tag {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.25rem;
-
-    margin-bottom: 0.25rem;
-
-    font-size: 0.75rem;
-    font-weight: var(--font-weight-medium);
-    color: var(--color-error);
-  }
 
   .detail-chip {
     display: inline-flex;