From 463dcc66b15f9de54a0509b9f1e6e4944eeafc38 Mon Sep 17 00:00:00 2001
From: Bo26fhmC5M <88071760+Bo26fhmC5M@users.noreply.github.com>
Date: Tue, 21 Jan 2025 00:26:51 +0900
Subject: [PATCH] fix: improve HypaV3 modal responsive for mobile

---
 src/lib/Others/HypaV3Modal.svelte | 389 ++++++++++++++++--------------
 1 file changed, 205 insertions(+), 184 deletions(-)

diff --git a/src/lib/Others/HypaV3Modal.svelte b/src/lib/Others/HypaV3Modal.svelte
index efbfdd9b..389a1180 100644
--- a/src/lib/Others/HypaV3Modal.svelte
+++ b/src/lib/Others/HypaV3Modal.svelte
@@ -32,12 +32,12 @@
   interface SummaryUI {
     isTranslating: boolean;
     translation: string | null;
-    translationRef: HTMLDivElement;
+    translationRef: HTMLTextAreaElement;
     isRerolling: boolean;
     rerolledText: string | null;
     isRerolledTranslating: boolean;
     rerolledTranslation: string | null;
-    rerolledTranslationRef: HTMLDivElement;
+    rerolledTranslationRef: HTMLTextAreaElement;
   }
 
   interface ExpandedMessageUI {
@@ -45,7 +45,7 @@
     selectedChatMemo: string;
     isTranslating: boolean;
     translation: string | null;
-    translationRef: HTMLDivElement;
+    translationRef: HTMLTextAreaElement;
   }
 
   const hypaV3DataState = $derived(
@@ -531,21 +531,23 @@
 </script>
 
 <!-- Modal backdrop -->
-<div class="fixed inset-0 z-50 bg-black/50 p-4">
+<div class="fixed inset-0 z-50 p-1 sm:p-2 bg-black/50">
   <!-- Modal wrapper -->
-  <div
-    class="w-full flex justify-center {hypaV3DataState.summaries.length === 0
-      ? 'h-fit'
-      : 'h-full'}"
-  >
+  <div class="flex justify-center w-full h-full">
     <!-- Modal window -->
     <div
-      class="bg-zinc-900 p-6 rounded-lg flex flex-col w-full max-w-3xl max-h-full"
+      class="flex flex-col p-3 sm:p-6 rounded-lg bg-zinc-900 w-full max-w-3xl {hypaV3DataState
+        .summaries.length === 0
+        ? 'h-fit'
+        : 'h-full'}"
     >
       <!-- Header -->
-      <div class="flex justify-between items-center w-full mb-4">
-        <h1 class="text-2xl font-semibold text-zinc-100">HypaV3 Data</h1>
-        <!-- Button Container -->
+      <div class="flex justify-between items-center mb-2 sm:mb-4">
+        <!-- Modal Title -->
+        <h1 class="text-lg sm:text-2xl font-semibold text-zinc-300">
+          HypaV3 Data
+        </h1>
+        <!-- Buttons Container -->
         <div class="flex items-center gap-2">
           <!-- Settings Button -->
           <button
@@ -560,12 +562,12 @@
               SettingsMenuIndex.set(2); // Other bot settings
             }}
           >
-            <SettingsIcon size={24} />
+            <SettingsIcon class="w-6 h-6" />
           </button>
 
           <!-- Reset Button -->
           <button
-            class="p-2 text-zinc-400 hover:text-zinc-200 hover:text-rose-300 transition-colors"
+            class="p-2 text-zinc-400 hover:text-rose-300 transition-colors"
             onclick={async () => {
               if (
                 await alertConfirmTwice(
@@ -584,12 +586,12 @@
               }
             }}
           >
-            <Trash2Icon size={24} />
+            <Trash2Icon class="w-6 h-6" />
           </button>
 
           <!-- Close Button -->
           <button
-            class="p-2 text-zinc-400 hover:text-zinc-200 hover:text-rose-300 transition-colors"
+            class="p-2 text-zinc-400 hover:text-zinc-200 transition-colors"
             onclick={() => {
               alertStore.set({
                 type: "none",
@@ -597,25 +599,25 @@
               });
             }}
           >
-            <XIcon size={24} />
+            <XIcon class="w-6 h-6" />
           </button>
         </div>
       </div>
 
       <!-- Scrollable Container -->
-      <div class="flex flex-col gap-3 w-full overflow-y-auto">
+      <div class="flex flex-col gap-2 sm:gap-4 overflow-y-auto">
         {#if hypaV3DataState.summaries.length === 0}
           <!-- Conversion Section -->
           {#if isHypaV2ConversionPossible()}
             <div
-              class="flex flex-col p-4 rounded-lg border border-zinc-700 bg-zinc-800/50"
+              class="flex flex-col p-2 sm:p-4 rounded-lg border border-zinc-700 bg-zinc-800/50"
             >
-              <div class="mt-4 flex flex-col items-center gap-2">
-                <span class="text-textcolor2 text-center p-4"
-                  >No summaries yet, but you may convert HypaV2 data to V3.</span
-                >
+              <div class="flex flex-col items-center">
+                <div class="my-1 sm:my-2 text-center text-zinc-300">
+                  No summaries yet, but you may convert HypaV2 data to V3.
+                </div>
                 <button
-                  class="px-4 py-2 bg-zinc-800 text-zinc-200 rounded-md hover:bg-zinc-700 transition-colors"
+                  class="my-1 sm:my-2 px-4 py-2 rounded-md text-zinc-300 font-semibold bg-zinc-700 hover:bg-zinc-600 transition-colors"
                   onclick={async () => {
                     const conversionResult = convertHypaV2ToV3();
 
@@ -637,8 +639,9 @@
               </div>
             </div>
           {:else}
-            <span class="text-textcolor2 text-center p-4">No summaries yet</span
-            >
+            <div class="p-4 sm:p-3 md:p-4 text-center text-zinc-400">
+              No summaries yet
+            </div>
           {/if}
         {/if}
 
@@ -647,12 +650,13 @@
           {#if summaryUIStates[i]}
             <!-- Summary Item  -->
             <div
-              class="flex flex-col p-4 rounded-lg border border-zinc-700 bg-zinc-800/50"
+              class="flex flex-col p-2 sm:p-4 rounded-lg border border-zinc-700 bg-zinc-800/50"
             >
-              <!-- Summary Header -->
-              <div class="flex justify-between items-center mb-2">
-                <span class="text-sm text-textcolor2">Summary #{i + 1}</span>
-                <div class="flex items-center gap-4">
+              <!-- Original Summary Header -->
+              <div class="flex justify-between items-center">
+                <span class="text-sm text-zinc-400">Summary #{i + 1}</span>
+
+                <div class="flex items-center gap-2">
                   <!-- Translate Button -->
                   <button
                     class="p-2 text-zinc-400 hover:text-zinc-200 transition-colors"
@@ -661,19 +665,19 @@
                       onAlternativeAction: () => toggleTranslate(i, true),
                     }}
                   >
-                    <LanguagesIcon size={16} />
+                    <LanguagesIcon class="w-4 h-4" />
                   </button>
 
                   <!-- Important Button -->
                   <button
-                    class="p-2 hover:text-zinc-200 hover:text-amber-300 transition-colors {summary.isImportant
+                    class="p-2 hover:text-zinc-200 transition-colors {summary.isImportant
                       ? 'text-yellow-500'
                       : 'text-zinc-400'}"
                     onclick={() => {
                       summary.isImportant = !summary.isImportant;
                     }}
                   >
-                    <StarIcon size={16} />
+                    <StarIcon class="w-4 h-4" />
                   </button>
 
                   <!-- Reroll Button -->
@@ -682,12 +686,12 @@
                     onclick={async () => await toggleReroll(i)}
                     disabled={!isRerollable(i)}
                   >
-                    <RefreshCw size={16} />
+                    <RefreshCw class="w-4 h-4" />
                   </button>
 
                   <!-- Delete After Button -->
                   <button
-                    class="p-2 text-zinc-400 hover:text-zinc-200 hover:text-rose-300 transition-colors"
+                    class="p-2 text-zinc-400 hover:text-rose-300 transition-colors"
                     onclick={async () => {
                       if (
                         await alertConfirmTwice(
@@ -701,39 +705,42 @@
                       showHypaV3Alert();
                     }}
                   >
-                    <ScissorsLineDashed size={16} />
+                    <ScissorsLineDashed class="w-4 h-4" />
                   </button>
                 </div>
               </div>
 
               <!-- Original Summary -->
-              <TextAreaInput
-                bind:value={summary.text}
-                className="w-full bg-zinc-900 text-zinc-200 rounded-md p-3 min-h-[100px] resize-y"
-              />
+              <div class="mt-2 sm:mt-4">
+                <textarea
+                  class="p-2 sm:p-4 w-full min-h-40 sm:min-h-56 resize-vertical rounded border border-zinc-700 focus:outline-none focus:ring-2 focus:ring-zinc-600 transition-colors text-zinc-200 bg-zinc-900"
+                  bind:value={summary.text}
+                >
+                </textarea>
+              </div>
 
-              <!-- Translation (if exists) -->
+              <!-- Original Summary Translation -->
               {#if summaryUIStates[i].translation}
-                <div class="mt-4">
-                  <span class="text-sm text-textcolor2 mb-2 block"
-                    >Translation</span
-                  >
-                  <div
-                    class="p-2 max-h-48 overflow-y-auto bg-zinc-800 rounded-md whitespace-pre-wrap"
+                <div class="mt-2 sm:mt-4">
+                  <div class="mb-2 sm:mb-4 text-sm text-zinc-400">
+                    Translation
+                  </div>
+
+                  <textarea
+                    readonly
+                    class="p-2 sm:p-4 w-full min-h-40 sm:min-h-56 resize-vertical rounded border border-zinc-700 focus:outline-none transition-colors text-zinc-200 bg-zinc-900"
                     bind:this={summaryUIStates[i].translationRef}
                     tabindex="-1"
-                  >
-                    {summaryUIStates[i].translation}
-                  </div>
+                    value={summaryUIStates[i].translation}
+                  ></textarea>
                 </div>
               {/if}
 
-              <!-- Rerolled Summary (if exists) -->
               {#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
-                    >
+                <!-- Rerolled Summary Header -->
+                <div class="mt-2 sm:mt-4">
+                  <div class="flex justify-between items-center">
+                    <span class="text-sm text-zinc-400">Rerolled Summary</span>
                     <div class="flex items-center gap-2">
                       <!-- Translate Rerolled Button -->
                       <button
@@ -744,23 +751,23 @@
                             toggleTranslateRerolled(i, true),
                         }}
                       >
-                        <LanguagesIcon size={16} />
+                        <LanguagesIcon class="w-4 h-4" />
                       </button>
 
                       <!-- Cancel Button -->
                       <button
-                        class="p-2 text-zinc-400 hover:text-zinc-200 hover:text-rose-300 transition-colors"
+                        class="p-2 text-zinc-400 hover:text-zinc-200 transition-colors"
                         onclick={() => {
                           summaryUIStates[i].rerolledText = null;
                           summaryUIStates[i].rerolledTranslation = null;
                         }}
                       >
-                        <XIcon size={16} />
+                        <XIcon class="w-4 h-4" />
                       </button>
 
                       <!-- Apply Button -->
                       <button
-                        class="p-2 text-zinc-400 hover:text-zinc-200 transition-colors"
+                        class="p-2 text-zinc-400 hover:text-rose-300 transition-colors"
                         onclick={() => {
                           summary.text = summaryUIStates[i].rerolledText!;
                           summaryUIStates[i].translation = null;
@@ -768,150 +775,164 @@
                           summaryUIStates[i].rerolledTranslation = null;
                         }}
                       >
-                        <CheckIcon size={16} />
+                        <CheckIcon class="w-4 h-4" />
                       </button>
                     </div>
                   </div>
-                  <TextAreaInput
+                </div>
+
+                <!-- Rerolled Summary -->
+                <div class="mt-2 sm:mt-4">
+                  <textarea
+                    class="p-2 sm:p-4 w-full min-h-40 sm:min-h-56 resize-vertical rounded border border-zinc-700 focus:outline-none focus:ring-2 focus:ring-zinc-600 transition-colors text-zinc-200 bg-zinc-900"
                     bind:value={summaryUIStates[i].rerolledText}
-                    className="w-full bg-zinc-900 text-zinc-200 rounded-md p-3 min-h-[100px] resize-y"
-                  />
-
-                  <!-- Rerolled Translation (if exists) -->
-                  {#if summaryUIStates[i].rerolledTranslation}
-                    <div class="mt-4">
-                      <span class="text-sm text-textcolor2 mb-2 block"
-                        >Rerolled Translation</span
-                      >
-                      <div
-                        class="p-2 max-h-48 overflow-y-auto bg-zinc-800 rounded-md whitespace-pre-wrap"
-                        bind:this={summaryUIStates[i].rerolledTranslationRef}
-                        tabindex="-1"
-                      >
-                        {summaryUIStates[i].rerolledTranslation}
-                      </div>
-                    </div>
-                  {/if}
-                </div>
-              {/if}
-
-              <!-- Connected Messages -->
-              <div class="mt-4">
-                <div class="flex justify-between items-center mb-2">
-                  <span class="text-sm text-textcolor2">
-                    Connected Messages ({summary.chatMemos.length})
-                  </span>
-                  <!-- Translate Message Button -->
-                  <button
-                    class="p-2 text-zinc-400 hover:text-zinc-200 transition-colors"
-                    use:handleDualAction={{
-                      onMainAction: () => toggleTranslateExpandedMessage(false),
-                      onAlternativeAction: () =>
-                        toggleTranslateExpandedMessage(true),
-                    }}
                   >
-                    <LanguagesIcon size={16} />
-                  </button>
+                  </textarea>
                 </div>
 
-                <!-- Message IDs -->
-                <div class="flex flex-wrap gap-1">
-                  {#each summary.chatMemos as chatMemo}
-                    <button
-                      class="text-xs px-3 py-1.5 bg-zinc-900 text-zinc-300 rounded-full hover:bg-zinc-800 transition-colors {isMessageExpanded(
-                        i,
-                        chatMemo
-                      )
-                        ? 'ring-1 ring-blue-500'
-                        : ''}"
-                      onclick={() => toggleExpandMessage(i, chatMemo)}
-                    >
-                      {chatMemo == null ? "First Message" : chatMemo}
-                    </button>
-                  {/each}
-                </div>
+                <!-- Rerolled Summary Translation -->
+                {#if summaryUIStates[i].rerolledTranslation}
+                  <div class="mt-2 sm:mt-4">
+                    <div class="mb-2 sm:mb-4 text-sm text-zinc-400">
+                      Rerolled Translation
+                    </div>
 
-                <!-- Selected Message (if selected) -->
-                {#if expandedMessageUIState?.summaryIndex === i}
-                  <div class="mt-4">
-                    <!-- Processed Message -->
-                    {#await getProcessedMessageFromChatMemo(expandedMessageUIState.selectedChatMemo) then expandedMessage}
-                      {#if expandedMessage}
-                        <!-- Role -->
-                        <div class="text-sm text-textcolor2 mb-2 block">
-                          {expandedMessage.role}'s Message
-                        </div>
-                        <!-- Content -->
-                        <div
-                          class="p-2 max-h-48 overflow-y-auto bg-zinc-800 rounded-md whitespace-pre-wrap"
-                        >
-                          {expandedMessage.data}
-                        </div>
-                      {:else}
-                        <div class="text-sm text-red-500">
-                          Message not found
-                        </div>
-                      {/if}
-                    {:catch error}
-                      <div class="text-sm text-red-500 mb-2">
-                        Error loading expanded message: {error.message}
-                      </div>
-                    {/await}
-
-                    <!-- Message Translation -->
-                    {#if expandedMessageUIState.translation}
-                      <div class="mt-4">
-                        <span class="text-sm text-textcolor2 mb-2 block"
-                          >Translation</span
-                        >
-                        <div
-                          class="p-2 max-h-48 overflow-y-auto bg-zinc-800 rounded-md whitespace-pre-wrap"
-                          bind:this={expandedMessageUIState.translationRef}
-                          tabindex="-1"
-                        >
-                          {expandedMessageUIState.translation}
-                        </div>
-                      </div>
-                    {/if}
+                    <textarea
+                      readonly
+                      class="p-2 sm:p-4 w-full min-h-40 sm:min-h-56 resize-vertical rounded border border-zinc-700 focus:outline-none transition-colors text-zinc-200 bg-zinc-900"
+                      bind:this={summaryUIStates[i].rerolledTranslationRef}
+                      tabindex="-1"
+                      value={summaryUIStates[i].rerolledTranslation}
+                    ></textarea>
                   </div>
                 {/if}
+              {/if}
+
+              <!-- Connected Messages Header -->
+              <div class="mt-2 sm:mt-4">
+                <div class="flex justify-between items-center">
+                  <span class="text-sm text-zinc-400"
+                    >Connected Messages ({summary.chatMemos.length})</span
+                  >
+
+                  <div class="flex items-center gap-2">
+                    <!-- Translate Message Button -->
+                    <button
+                      class="p-2 text-zinc-400 hover:text-zinc-200 transition-colors"
+                      use:handleDualAction={{
+                        onMainAction: () =>
+                          toggleTranslateExpandedMessage(false),
+                        onAlternativeAction: () =>
+                          toggleTranslateExpandedMessage(true),
+                      }}
+                    >
+                      <LanguagesIcon class="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
               </div>
+
+              <!-- Connected Message IDs -->
+              <div class="flex flex-wrap mt-2 sm:mt-4 gap-2">
+                {#each summary.chatMemos as chatMemo}
+                  <button
+                    class="px-3 py-2 rounded-full text-xs text-zinc-200 hover:bg-zinc-800 transition-colors bg-zinc-900 {isMessageExpanded(
+                      i,
+                      chatMemo
+                    )
+                      ? 'ring-2 ring-zinc-500'
+                      : ''}"
+                    onclick={() => toggleExpandMessage(i, chatMemo)}
+                  >
+                    {chatMemo == null ? "First Message" : chatMemo}
+                  </button>
+                {/each}
+              </div>
+
+              {#if expandedMessageUIState?.summaryIndex === i}
+                <!-- Expanded Message -->
+                <div class="mt-2 sm:mt-4">
+                  <!-- Processed Message -->
+                  {#await getProcessedMessageFromChatMemo(expandedMessageUIState.selectedChatMemo) then expandedMessage}
+                    {#if expandedMessage}
+                      <!-- Role -->
+                      <div class="mb-2 sm:mb-4 text-sm text-zinc-400">
+                        {expandedMessage.role}'s Message
+                      </div>
+
+                      <!-- Content -->
+                      <textarea
+                        readonly
+                        class="p-2 sm:p-4 w-full min-h-40 sm:min-h-56 resize-vertical rounded border border-zinc-700 focus:outline-none transition-colors text-zinc-200 bg-zinc-900"
+                        value={expandedMessage.data}
+                      ></textarea>
+                    {:else}
+                      <span class="text-sm text-red-500">Message not found</span
+                      >
+                    {/if}
+                  {:catch error}
+                    <span class="text-sm text-red-500"
+                      >Error loading expanded message: {error.message}</span
+                    >
+                  {/await}
+                </div>
+
+                <!-- Expanded Message Translation -->
+                {#if expandedMessageUIState.translation}
+                  <div class="mt-2 sm:mt-4">
+                    <div class="mb-2 sm:mb-4 text-sm text-zinc-400">
+                      Translation
+                    </div>
+
+                    <textarea
+                      readonly
+                      class="p-2 sm:p-4 w-full min-h-40 sm:min-h-56 resize-vertical rounded border border-zinc-700 focus:outline-none transition-colors text-zinc-200 bg-zinc-900"
+                      bind:this={expandedMessageUIState.translationRef}
+                      tabindex="-1"
+                      value={expandedMessageUIState.translation}
+                    ></textarea>
+                  </div>
+                {/if}
+              {/if}
             </div>
           {/if}
         {/each}
 
         <!-- Next Summarization Target -->
-        {#await getProcessedNextSummarizationTarget() then nextMessage}
-          {#if nextMessage}
-            {@const chatId =
-              nextMessage.chatId === "first"
-                ? "First Message"
-                : nextMessage.chatId == null
-                  ? "No Message ID"
-                  : nextMessage.chatId}
-            <div class="mt-4">
-              <span class="text-sm text-textcolor2 mb-2 block">
+        <div class="mt-2 sm:mt-4">
+          {#await getProcessedNextSummarizationTarget() then nextMessage}
+            {#if nextMessage}
+              {@const chatId =
+                nextMessage.chatId === "first"
+                  ? "First Message"
+                  : nextMessage.chatId == null
+                    ? "No Message ID"
+                    : nextMessage.chatId}
+              <div class="mb-2 sm:mb-4 text-sm text-zinc-400">
                 HypaV3 will summarize [{chatId}]
-              </span>
-              <div
-                class="p-2 max-h-48 overflow-y-auto bg-zinc-800 rounded-md whitespace-pre-wrap"
-              >
-                {nextMessage.data}
               </div>
-            </div>
-          {/if}
-        {:catch error}
-          <div class="text-sm text-red-500 mb-2">
-            Error loading next message: {error.message}
-          </div>
-        {/await}
+
+              <textarea
+                readonly
+                class="p-2 sm:p-4 w-full min-h-40 sm:min-h-56 resize-none overflow-y-auto rounded border border-zinc-700 focus:outline-none transition-colors text-zinc-200 bg-zinc-900"
+                value={nextMessage.data}
+              ></textarea>
+            {:else}
+              <span class="text-sm text-red-500">WARN: No messages found</span>
+            {/if}
+          {:catch error}
+            <span class="text-sm text-red-500"
+              >Error loading next message: {error.message}</span
+            >
+          {/await}
+        </div>
 
         <!-- No First Message -->
         {#if !getFirstMessage()}
-          <div class="mt-4">
-            <div class="text-sm text-red-500 mb-2">
-              WARN: Selected first message is empty
-            </div>
+          <div class="mt-2 sm:mt-4">
+            <span class="text-sm text-red-500"
+              >WARN: Selected first message is empty</span
+            >
           </div>
         {/if}
       </div>