Integrate focused Pinia auth and chat stores

.gitignore

@@ -27,3 +27,4 @@ tests/e2e/reports/
 .env.*
 !.env.example
 !tests/e2e/.env.e2e.example
+AGENTS.md

app/app.vue

@@ -2,12 +2,38 @@
 import { useAppI18n } from '~/composables/useAppI18n'
 import { useThemePreference } from '~/composables/useThemePreference'
 
+const MIN_STARTUP_OVERLAY_MS = 700
+
 const { initializeThemePreference } = useThemePreference()
-const { isSessionRestoreInProgress } = useMatrixClient()
+const {
+  isSessionRestoreInProgress,
+  ensureSessionRestoreCompleted
+} = useMatrixClient()
 const { translateText } = useAppI18n()
+const isBootingApp = ref(true)
+
+const showStartupOverlay = computed(() => {
+  return isBootingApp.value || isSessionRestoreInProgress.value
+})
+
+function waitMilliseconds(durationMs: number): Promise<void> {
+  if (durationMs <= 0) {
+    return Promise.resolve()
+  }
+  return new Promise((resolve) => {
+    window.setTimeout(() => resolve(), durationMs)
+  })
+}
 
-onMounted(() => {
+onMounted(async () => {
+  const bootStartTimestamp = Date.now()
   initializeThemePreference()
+  if (typeof ensureSessionRestoreCompleted === 'function') {
+    await ensureSessionRestoreCompleted()
+  }
+  const bootElapsedMs = Date.now() - bootStartTimestamp
+  await waitMilliseconds(MIN_STARTUP_OVERLAY_MS - bootElapsedMs)
+  isBootingApp.value = false
 })
 </script>
 
@@ -16,7 +42,7 @@ onMounted(() => {
     <NuxtRouteAnnouncer />
     <NuxtPage />
     <div
-      v-if="isSessionRestoreInProgress"
+      v-if="showStartupOverlay"
       class="fixed inset-0 z-100 flex items-center justify-center bg-black/60"
       role="status"
       aria-live="polite"
@@ -29,7 +55,7 @@ onMounted(() => {
             class="h-6 w-6 animate-spin text-primary"
           />
           <p class="text-sm text-gray-700 dark:text-gray-200">
-            {{ translateText('auth.restoringSession') }}
+            {{ translateText('common.loading') }}
           </p>
         </div>
       </UCard>

app/components/Chat/MessageList.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { storeToRefs } from "pinia";
 import ChatMessageItem from "~/components/Chat/MessageItem.vue";
 import { useAppI18n } from "~/composables/useAppI18n";
+import { useMediaCacheStore } from "~/stores/mediaCacheStore";
 
 interface MediaInfo {
   url: string;
@@ -76,8 +78,8 @@ const emit = defineEmits<{
 
 const { translateText } = useAppI18n();
 
-const resolvedBlobUrls = ref<Record<string, string>>({});
-const loadingMedia = ref<Record<string, boolean>>({});
+const mediaCacheStore = useMediaCacheStore();
+const { resolvedBlobUrls, loadingMedia } = storeToRefs(mediaCacheStore);
 const lightboxUrl = ref<string | null>(null);
 const scrollContainer = ref<HTMLElement | null>(null);
 const topSentinel = ref<HTMLElement | null>(null);
@@ -106,22 +108,24 @@ function getDisplayUrl(msg: MessageItem): string | undefined {
 
 async function resolveMedia(msg: MessageItem) {
   if (!msg.media || !props.resolveMediaBlobUrl) return;
-  if (resolvedBlobUrls.value[msg.id] || loadingMedia.value[msg.id]) return;
+  if (mediaCacheStore.getResolvedUrl(msg.id) || mediaCacheStore.isLoading(msg.id)) {
+    return;
+  }
   if (!needsBlobFetch(msg.media)) return;
 
-  loadingMedia.value[msg.id] = true;
+  mediaCacheStore.setLoading(msg.id, true);
   try {
     const blobUrl = await props.resolveMediaBlobUrl({
       mxcUrl: msg.media.mxcUrl,
       mimetype: msg.media.mimetype,
       isEncrypted: msg.media.isEncrypted,
       encryptionInfo: msg.media.encryptionInfo,
     });
-    resolvedBlobUrls.value[msg.id] = blobUrl;
+    mediaCacheStore.setResolvedUrl(msg.id, blobUrl);
   } catch (error) {
     console.error("Failed to resolve media for", msg.id, error);
   } finally {
-    loadingMedia.value[msg.id] = false;
+    mediaCacheStore.setLoading(msg.id, false);
   }
 }
 
@@ -310,6 +314,7 @@ onMounted(async () => {
 
 onBeforeUnmount(() => {
   disconnectObservers();
+  mediaCacheStore.clearAll();
 });
 
 watch(

app/components/Chat/ReactionEmojiPicker.vue

@@ -1,15 +1,13 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
+import { useEmojiUsageStore } from "~/stores/emojiUsageStore";
 import {
   categoryOrder,
   createShortcodeMap,
   defaultFrequentEmojis,
   emojiCatalog,
   getFrequentEmojis,
-  loadFrequentEmojiUsage,
   normalizeShortcodes,
-  saveFrequentEmojiUsage,
-  trackEmojiUsage,
   type EmojiCategoryId,
 } from "~/composables/useEmojiPickerData";
 
@@ -23,24 +21,24 @@ const props = defineProps<{
 const activeCategory = ref<EmojiCategoryId>("frequent");
 const searchTerm = ref("");
 const customEmoji = ref("");
-const frequentUsage = ref<Record<string, number>>({});
+const emojiUsageStore = useEmojiUsageStore();
 const shortcodeToEmoji = createShortcodeMap(emojiCatalog);
 
 watch(
   () => props.frequentScopeKey,
   (scopeKey) => {
-    frequentUsage.value = loadFrequentEmojiUsage(scopeKey);
+    emojiUsageStore.ensureScopeLoaded(scopeKey);
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 const frequentEmojis = computed(() => {
-  return getFrequentEmojis(frequentUsage.value, defaultFrequentEmojis, 16);
+  const scopeUsage = emojiUsageStore.getUsage(props.frequentScopeKey);
+  return getFrequentEmojis(scopeUsage, defaultFrequentEmojis, 16);
 });
 
 function selectEmoji(emoji: string) {
-  frequentUsage.value = trackEmojiUsage(frequentUsage.value, emoji);
-  saveFrequentEmojiUsage(frequentUsage.value, props.frequentScopeKey);
+  emojiUsageStore.track(props.frequentScopeKey, emoji);
   emit("select", emoji);
 }