feat: integrate Matrix chat (Option 2 - credentials stored in Supabase)

- Add matrix-js-sdk, marked, highlight.js, twemoji, @tanstack/svelte-virtual deps
- Copy Matrix core layer: /matrix/, /stores/matrix.ts, /cache/, /services/
- Copy Matrix components: matrix/, message/, chat-layout/, chat-settings/
- Copy UI components: EmojiPicker, Twemoji, ImagePreviewModal, VirtualList
- Copy utils: emojiData, twemoji, twemojiGlobal
- Replace lucide-svelte with Material Symbols in SyncRecoveryBanner
- Extend Avatar with xs size and status indicator prop
- Fix ui.ts store conflict: re-export toasts from toast.svelte.ts
- Add migration 020_matrix_credentials for storing Matrix tokens per user/org
- Add /api/matrix-credentials endpoint (GET/POST/DELETE)
- Create [orgSlug]/chat page with Matrix login form + full chat UI
- Add Chat to sidebar navigation

src/lib/components/message/parts/MessageReadReceipts.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  interface ReadReceipt {
+    userId: string;
+    name: string;
+    avatarUrl: string | null;
+    timestamp?: number;
+  }
+
+  interface Props {
+    receipts: ReadReceipt[];
+  }
+
+  let { receipts }: Props = $props();
+</script>
+
+{#if receipts.length > 0}
+  <div
+    class="flex items-center gap-1 mt-1 ml-14"
+    title="Read by {receipts.map((r) => r.name).join(', ')}"
+  >
+    <span class="text-xs text-light/40 mr-1">Read by</span>
+    <div class="flex -space-x-1">
+      {#each receipts.slice(0, 5) as reader}
+        <div
+          class="w-4 h-4 rounded-full bg-dark border border-night overflow-hidden"
+          title={reader.name}
+        >
+          {#if reader.avatarUrl}
+            <img
+              src={reader.avatarUrl}
+              alt={reader.name}
+              class="w-full h-full object-cover"
+            />
+          {:else}
+            <div
+              class="w-full h-full bg-primary/50 flex items-center justify-center text-[8px] text-white"
+            >
+              {reader.name[0]?.toUpperCase()}
+            </div>
+          {/if}
+        </div>
+      {/each}
+      {#if receipts.length > 5}
+        <div
+          class="w-4 h-4 rounded-full bg-light/20 border border-night flex items-center justify-center text-[8px] text-light"
+        >
+          +{receipts.length - 5}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}