fix(frontend): readable links and file chips on own bubbles

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,

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}

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)} />

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"}

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>

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};