fix: reactive declarations

src/lib/Others/HypaV3Modal.svelte

@@ -29,13 +29,16 @@
     translation?: string | null;
   }
 
-  const hypaV3DataState = $state(
+  const hypaV3DataState = $derived(
     DBState.db.characters[$selectedCharID].chats[
       DBState.db.characters[$selectedCharID].chatPage
     ].hypaV3Data
   );
-  const summaryUIStates = $state<SummaryUI[]>(
+
-    hypaV3DataState.summaries.map(() => ({
+  let summaryUIStates = $state(
+    DBState.db.characters[$selectedCharID].chats[
+      DBState.db.characters[$selectedCharID].chatPage
+    ].hypaV3Data.summaries.map(() => ({
       isTranslating: false,
       translation: null,
       isRerolling: false,
@@ -47,8 +50,18 @@
   let expandedMessageUIState = $state<ExpandedMessageUI | null>(null);
 
   $effect(() => {
-    // Detects changes in all nested properties including summaries
     hypaV3DataState.summaries;
+    hypaV3DataState.summaries.length;
+
+    summaryUIStates = hypaV3DataState.summaries.map(() => ({
+      isTranslating: false,
+      translation: null,
+      isRerolling: false,
+      rerolledText: null,
+      isRerolledTranslating: false,
+      rerolledTranslation: null,
+    }));
+
     expandedMessageUIState = null;
   });
 
@@ -354,6 +367,7 @@
       <!-- Summaries List -->
       <div class="flex flex-col gap-3 w-full overflow-y-auto">
         {#each hypaV3DataState.summaries as summary, i}
+          {#if summaryUIStates[i]}
             <div
               class="flex flex-col p-4 rounded-lg border border-zinc-700 bg-zinc-800/50"
             >
@@ -419,7 +433,8 @@
               {#if summaryUIStates[i].rerolledText}
                 <div class="mt-4">
                   <div class="flex justify-between items-center mb-2">
-                  <span class="text-sm text-textcolor2">Rerolled Summary</span>
+                    <span class="text-sm text-textcolor2">Rerolled Summary</span
+                    >
                     <div class="flex items-center gap-2">
                       <!-- Translate Rerolled Button -->
                       <button
@@ -449,6 +464,7 @@
                         class="p-2 text-zinc-400 hover:text-zinc-200 transition-colors"
                         onclick={() => {
                           summary.text = summaryUIStates[i].rerolledText!;
+                          summaryUIStates[i].translation = null;
                           summaryUIStates[i].rerolledText = null;
                           summaryUIStates[i].rerolledTranslation = null;
                         }}
@@ -552,6 +568,7 @@
                 {/if}
               </div>
             </div>
+          {/if}
         {/each}
 
         {#if hypaV3DataState.summaries.length === 0}