MEga push vol idk, chat function updates, docker fixes

src/lib/components/message/MessageContainer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Avatar } from "$lib/components/ui";
+  import { MatrixAvatar } from "$lib/components/ui";
   import { getReadReceiptsForEvent } from "$lib/matrix";
   import type { Message } from "$lib/matrix/types";
   import { formatTime } from "./utils";
@@ -66,8 +66,8 @@
 </script>
 
 <div
-  class="group relative px-4 py-0.5 hover:bg-light/5 transition-colors {message.isPending
-    ? 'opacity-50'
+  class="group relative px-5 py-0.5 hover:bg-light/[0.02] transition-colors {message.isPending
+    ? 'opacity-40'
     : ''}"
   onmouseenter={() => (showActions = true)}
   onmouseleave={() => (showActions = false)}
@@ -77,32 +77,22 @@
   <!-- Reply preview -->
   {#if replyPreview && message.replyTo}
     <button
-      class="flex items-center gap-1.5 ml-14 mt-1 text-xs hover:opacity-80 transition-opacity cursor-pointer"
+      class="flex items-center gap-1.5 ml-12 mt-1 mb-0.5 text-[11px] hover:opacity-80 transition-opacity cursor-pointer"
       onclick={() => onScrollToMessage?.(message.replyTo!)}
     >
-      <div class="flex items-center gap-1.5">
-        <div class="flex shrink-0">
-          <Avatar
-            src={replyPreview.senderAvatar}
-            name={replyPreview.senderName}
-            size="xs"
-          />
-        </div>
-        <span class="text-light/70 font-medium">{replyPreview.senderName}</span>
-      </div>
-      <span class="text-light/50 truncate max-w-xs">
+      <div class="w-0.5 h-3 bg-primary/40 rounded-full shrink-0"></div>
+      <MatrixAvatar
+        mxcUrl={replyPreview.senderAvatar}
+        name={replyPreview.senderName}
+        size="xs"
+      />
+      <span class="text-light/50 font-body">{replyPreview.senderName}</span>
+      <span class="text-light/30 truncate max-w-xs">
         {#if replyPreview.hasAttachment}
-          <svg
-            class="w-3 h-3 inline mr-0.5"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
+          <span
+            class="material-symbols-rounded align-middle mr-0.5"
+            style="font-size: 12px;">image</span
           >
-            <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-            <circle cx="8.5" cy="8.5" r="1.5" />
-            <polyline points="21,15 16,10 5,21" />
-          </svg>
         {/if}
         {replyPreview.content}
       </span>
@@ -110,11 +100,11 @@
   {/if}
 
   {#if isGrouped}
-    <!-- Grouped message (same sender, close in time) -->
-    <div class="flex gap-4">
-      <div class="w-10 shrink-0 flex items-center justify-center">
+    <!-- Grouped message -->
+    <div class="flex gap-3">
+      <div class="w-9 shrink-0 flex items-center justify-center">
         <span
-          class="text-[10px] text-light/30 opacity-0 group-hover:opacity-100 transition-opacity"
+          class="text-[10px] text-light/20 opacity-0 group-hover:opacity-100 transition-opacity select-none"
         >
           {formatTime(message.timestamp)}
         </span>
@@ -136,21 +126,23 @@
       </div>
     </div>
   {:else}
-    <!-- Full message with avatar - mt-4 creates gap between message groups -->
-    <div class="flex gap-4 mt-4 first:mt-0">
-      <div class="w-10 shrink-0">
-        <Avatar
-          src={message.senderAvatar}
+    <!-- Full message with avatar -->
+    <div class="flex gap-3 mt-3 first:mt-0">
+      <div class="w-9 shrink-0 pt-0.5">
+        <MatrixAvatar
+          mxcUrl={message.senderAvatar}
           name={message.senderName}
-          size="md"
+          size="sm"
         />
       </div>
       <div class="flex-1 min-w-0">
-        <div class="flex items-baseline gap-2 mb-0.5">
-          <span class="font-semibold text-light hover:underline cursor-pointer">
+        <div class="flex items-baseline gap-2 mb-px">
+          <span
+            class="text-[13px] font-heading text-white hover:underline cursor-pointer"
+          >
             {message.senderName}
           </span>
-          <span class="text-xs text-light/40">
+          <span class="text-[10px] text-light/25 select-none">
             {formatTime(message.timestamp)}
           </span>
         </div>