From 995322b17a54ad6c1163090c825bf7d16ea5687f Mon Sep 17 00:00:00 2001
From: h <h@kotikot.com>
Date: Thu, 13 Aug 2026 04:06:44 +0200
Subject: [PATCH] fix(frontend): readable links and file chips on own bubbles

---
 frontend/src/lib/components/EntityText.svelte | 21 +++++++++++-
 frontend/src/lib/components/MediaAlbum.svelte |  5 +--
 .../src/lib/components/MessageBubble.svelte   |  1 +
 .../src/lib/components/MessageMedia.svelte    |  2 +-
 .../src/lib/components/media/FileChip.svelte  | 32 +++++++++++++++++--
 frontend/src/lib/styles/variables.scss        |  2 +-
 6 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/frontend/src/lib/components/EntityText.svelte b/frontend/src/lib/components/EntityText.svelte
index da8a453..ed82c9d 100644
--- a/frontend/src/lib/components/EntityText.svelte
+++ b/frontend/src/lib/components/EntityText.svelte
@@ -69,13 +69,14 @@
   {:else if type === "url" || type === "text_link" || type === "email" || type === "phone_number"}
     <a
       class="link"
+      class:own
       href={linkHref(node)}
       target="_blank"
       rel="noopener noreferrer"
       >{@render tree(node.children)}</a
     >
   {:else if type === "mention" || type === "text_mention" || type === "hashtag" || type === "cashtag" || type === "bot_command"}
-    <span class="link">{@render tree(node.children)}</span>
+    <span class="link" class:own>{@render tree(node.children)}</span>
   {:else}
     {@render tree(node.children)}
   {/if}
@@ -108,6 +109,24 @@
     &:hover {
       text-decoration: underline;
     }
+
+    &.own {
+      color: var(--color-own-links);
+    }
+  }
+
+  a.link.own {
+    text-decoration: underline;
+    text-decoration-color: color-mix(
+      in srgb,
+      var(--color-own-links) 45%,
+      transparent
+    );
+    text-underline-offset: 0.15em;
+
+    &:hover {
+      text-decoration-color: currentcolor;
+    }
   }
 
   .code,
diff --git a/frontend/src/lib/components/MediaAlbum.svelte b/frontend/src/lib/components/MediaAlbum.svelte
index a8617b6..cd347d0 100644
--- a/frontend/src/lib/components/MediaAlbum.svelte
+++ b/frontend/src/lib/components/MediaAlbum.svelte
@@ -8,9 +8,10 @@
     chatId: number;
     media: MediaRef[];
     onopen: (index: number) => void;
+    own?: boolean;
   }
 
-  let { media, chatId, onopen }: Props = $props();
+  let { media, chatId, onopen, own = false }: Props = $props();
 
   const asFiles = $derived(
     media.every((item) => !isPreviewable(item.kind, item.mime))
@@ -31,7 +32,7 @@
 {#if asFiles}
   <div class="AlbumFiles">
     {#each media as item, index (item.id ?? index)}
-      <FileChip media={item} />
+      <FileChip media={item} {own} />
     {/each}
   </div>
 {:else}
diff --git a/frontend/src/lib/components/MessageBubble.svelte b/frontend/src/lib/components/MessageBubble.svelte
index ce6eac3..756aa4c 100644
--- a/frontend/src/lib/components/MessageBubble.svelte
+++ b/frontend/src/lib/components/MessageBubble.svelte
@@ -188,6 +188,7 @@
               media={message.media}
               chatId={message.chat_id}
               onopen={onmedia}
+              {own}
             />
           {:else if message.has_media}
             <MessageMedia {message} {own} onopen={() => onmedia(0)} />
diff --git a/frontend/src/lib/components/MessageMedia.svelte b/frontend/src/lib/components/MessageMedia.svelte
index ed98d37..dc3d1c4 100644
--- a/frontend/src/lib/components/MessageMedia.svelte
+++ b/frontend/src/lib/components/MessageMedia.svelte
@@ -144,7 +144,7 @@
           <span>Самоуничтожающееся медиа</span>
         </button>
       {:else if asFile && ref}
-        <FileChip media={ref} />
+        <FileChip media={ref} {own} />
       {:else if !loaded}
         <div class="media-skeleton"><Spinner /></div>
       {:else if ready && kind === "voice"}
diff --git a/frontend/src/lib/components/media/FileChip.svelte b/frontend/src/lib/components/media/FileChip.svelte
index f7a0ea7..50ed9e3 100644
--- a/frontend/src/lib/components/media/FileChip.svelte
+++ b/frontend/src/lib/components/media/FileChip.svelte
@@ -8,9 +8,10 @@
 
   interface Props {
     media: MediaRef;
+    own?: boolean;
   }
 
-  const { media }: Props = $props();
+  const { media, own = false }: Props = $props();
 
   let saving = $state(false);
 
@@ -40,9 +41,9 @@
   }
 </script>
 
-<div class="FileChip">
+<div class="FileChip" class:own>
   <button class="file-main" type="button" title={name} onclick={save}>
-    <span class="file-glyph">
+    <span class="file-glyph" class:own>
       <Icon name={saving ? "timer" : "document"} size="1.25rem" />
     </span>
     <span class="file-text">
@@ -72,6 +73,10 @@
     border-radius: var(--border-radius-default-small);
 
     background-color: var(--color-primary-tint);
+
+    &.own {
+      background-color: var(--color-code-own-bg);
+    }
   }
 
   .file-main {
@@ -104,6 +109,15 @@
 
     color: var(--color-white);
     background-color: var(--color-primary);
+
+    &.own {
+      color: var(--color-own-links);
+      background-color: color-mix(
+        in srgb,
+        var(--color-own-links) 20%,
+        transparent
+      );
+    }
   }
 
   .file-text {
@@ -126,6 +140,10 @@
     color: var(--color-text-secondary);
   }
 
+  .own .file-sub {
+    color: var(--color-message-meta-own);
+  }
+
   .file-share {
     cursor: pointer;
 
@@ -146,4 +164,12 @@
       background-color: var(--color-primary-opacity);
     }
   }
+
+  .own .file-share {
+    color: var(--color-own-links);
+
+    &:hover {
+      background-color: color-mix(in srgb, currentcolor 18%, transparent);
+    }
+  }
 </style>
diff --git a/frontend/src/lib/styles/variables.scss b/frontend/src/lib/styles/variables.scss
index 3f08b03..08ffb26 100644
--- a/frontend/src/lib/styles/variables.scss
+++ b/frontend/src/lib/styles/variables.scss
@@ -140,7 +140,7 @@
 
     --color-links: #{$color-links};
 
-    --color-own-links: #{$color-white};
+    --color-own-links: #{$color-links};
 
     --color-placeholders: #{$color-placeholders};