From aca7478bcca946354cf34f848c0eab99139bb991 Mon Sep 17 00:00:00 2001
From: Lucas 'Paperboy' Rose-Winters <lucas@sanguinehost.com>
Date: Wed, 15 Oct 2025 15:47:13 +1100
Subject: [PATCH] fix: resolve panel collapse animation and import errors

- Fix chevron button positioning to move with collapsed panel edge
- Replace broken dynamic imports with static imports in ensureHtmlCleaningRegex
- Add smooth bidirectional expand/collapse animations
- Implement positioning-based layout for smooth transitions
- Add content opacity fade synchronized with panel width changes

This fixes the chevron button remaining stationary during collapse,
eliminates "Failed to fetch dynamically imported module" errors,
and provides smooth animations in both expand and collapse directions.
---
 index.js  | 25 +++++++------------------
 style.css | 16 ++++++++++++++--
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/index.js b/index.js
index 1ac234c..9074a2a 100644
--- a/index.js
+++ b/index.js
@@ -1,4 +1,4 @@
-import { getContext, renderExtensionTemplateAsync } from '../../../extensions.js';
+import { getContext, renderExtensionTemplateAsync, extension_settings as st_extension_settings } from '../../../extensions.js';
 import { eventSource, event_types, substituteParams, chat, generateRaw, saveSettingsDebounced, chat_metadata, saveChatDebounced, user_avatar, getThumbnailUrl, characters, this_chid, extension_prompt_types, extension_prompt_roles, setExtensionPrompt, reloadCurrentChat } from '../../../../script.js';
 import { selected_group, getGroupMembers } from '../../../group-chats.js';
 import { power_user } from '../../../power-user.js';
@@ -3435,12 +3435,9 @@ function onMessageSwiped(messageIndex) {
  */
 async function ensureHtmlCleaningRegex() {
     try {
-        // Import the regex engine to check existing scripts
-        const { getRegexScripts } = await import('../../regex/engine.js');
-        const existingScripts = getRegexScripts();
-
         // Check if the HTML cleaning regex already exists
         const scriptName = 'Clean HTML (From Outgoing Prompt)';
+        const existingScripts = st_extension_settings?.regex || [];
         const alreadyExists = existingScripts.some(script => script.scriptName === scriptName);
 
         if (alreadyExists) {
@@ -3448,9 +3445,6 @@ async function ensureHtmlCleaningRegex() {
             return;
         }
 
-        // Import the regex index to use the import function
-        const regexModule = await import('../../regex/index.js');
-
         // Create the regex script object based on the attached file
         const regexScript = {
             scriptName: scriptName,
@@ -3467,10 +3461,6 @@ async function ensureHtmlCleaningRegex() {
             maxDepth: null
         };
 
-        // Import using the onRegexImportObjectChange function
-        // We need to access it through the window object or by importing it
-        const { extension_settings } = await import('../../../scripts/extensions.js');
-
         // Generate a UUID for the script
         const uuidv4 = () => {
             return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
@@ -3483,15 +3473,14 @@ async function ensureHtmlCleaningRegex() {
         regexScript.id = uuidv4();
 
         // Add to global regex scripts
-        if (!Array.isArray(extension_settings.regex)) {
-            extension_settings.regex = [];
+        if (!Array.isArray(st_extension_settings.regex)) {
+            st_extension_settings.regex = [];
         }
 
-        extension_settings.regex.push(regexScript);
+        st_extension_settings.regex.push(regexScript);
 
-        // Import saveSettingsDebounced to save the changes
-        const { saveSettingsDebounced: saveExtensionSettings } = await import('../../../../script.js');
-        saveExtensionSettings();
+        // Save the changes using the already-imported function
+        saveSettingsDebounced();
 
         console.log('[RPG Companion] ✅ HTML cleaning regex imported successfully');
     } catch (error) {
diff --git a/style.css b/style.css
index 173a516..05bb74c 100644
--- a/style.css
+++ b/style.css
@@ -38,15 +38,26 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     display: flex;
     flex-direction: column;
     overflow: visible;
-    transition: width 0.3s ease, transform 0.3s ease;
+    transition: width 0.3s ease, left 0.3s ease, right 0.3s ease, transform 0.3s ease;
 }
 
 /* Collapsed state */
 .rpg-panel.rpg-collapsed {
-    width: 40px !important;
+    max-width: 40px !important;
     min-width: 40px !important;
 }
 
+/* Fix positioning when collapsed - panel should stick to correct edge */
+.rpg-panel.rpg-position-right.rpg-collapsed {
+    left: calc(100vw - 40px);
+    right: 0;
+}
+
+.rpg-panel.rpg-position-left.rpg-collapsed {
+    right: calc(100vw - 40px);
+    left: 0;
+}
+
 .rpg-panel.rpg-collapsed .rpg-game-container {
     opacity: 0;
     pointer-events: none;
@@ -357,6 +368,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     flex-direction: column;
     height: 100%;
     overflow: hidden;
+    transition: opacity 0.3s ease;
 }
 
 /* Panel Content - Main scrollable area */