MEga push vol idk, chat function updates, docker fixes

src/lib/components/matrix/MentionAutocomplete.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { Avatar } from '$lib/components/ui';
-  import type { RoomMember } from '$lib/matrix/types';
+  import { MatrixAvatar } from "$lib/components/ui";
+  import type { RoomMember } from "$lib/matrix/types";
 
   interface Props {
     members: RoomMember[];
@@ -23,11 +23,12 @@
   // Filter members based on query
   const filteredMembers = $derived(
     members
-      .filter(m => 
-        m.name.toLowerCase().includes(query.toLowerCase()) ||
-        m.userId.toLowerCase().includes(query.toLowerCase())
+      .filter(
+        (m) =>
+          m.name.toLowerCase().includes(query.toLowerCase()) ||
+          m.userId.toLowerCase().includes(query.toLowerCase()),
       )
-      .slice(0, 8)
+      .slice(0, 8),
   );
 
   // Reset selection when query changes
@@ -40,22 +41,23 @@
     if (filteredMembers.length === 0) return;
 
     switch (e.key) {
-      case 'ArrowDown':
+      case "ArrowDown":
         e.preventDefault();
         selectedIndex = (selectedIndex + 1) % filteredMembers.length;
         break;
-      case 'ArrowUp':
+      case "ArrowUp":
         e.preventDefault();
-        selectedIndex = (selectedIndex - 1 + filteredMembers.length) % filteredMembers.length;
+        selectedIndex =
+          (selectedIndex - 1 + filteredMembers.length) % filteredMembers.length;
         break;
-      case 'Enter':
-      case 'Tab':
+      case "Enter":
+      case "Tab":
         e.preventDefault();
         if (filteredMembers[selectedIndex]) {
           onSelect(filteredMembers[selectedIndex]);
         }
         break;
-      case 'Escape':
+      case "Escape":
         e.preventDefault();
         onClose();
         break;
@@ -76,11 +78,14 @@
     </div>
     {#each filteredMembers as member, i}
       <button
-        class="w-full flex items-center gap-3 px-3 py-2 text-left transition-colors {i === selectedIndex ? 'bg-primary/20' : 'hover:bg-light/5'}"
+        class="w-full flex items-center gap-3 px-3 py-2 text-left transition-colors {i ===
+        selectedIndex
+          ? 'bg-primary/20'
+          : 'hover:bg-light/5'}"
         onclick={() => onSelect(member)}
-        onmouseenter={() => selectedIndex = i}
+        onmouseenter={() => (selectedIndex = i)}
       >
-        <Avatar src={member.avatarUrl} name={member.name} size="sm" />
+        <MatrixAvatar mxcUrl={member.avatarUrl} name={member.name} size="sm" />
         <div class="flex-1 min-w-0">
           <p class="text-light truncate">{member.name}</p>
           <p class="text-xs text-light/40 truncate">{member.userId}</p>