Merge pull request #4 from paperboygold/fix/panel-animation-and-imports

fix: resolve panel collapse animation and import errors

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';
@@ -3439,12 +3439,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) {
@@ -3452,9 +3449,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,
@@ -3471,10 +3465,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) {
@@ -3487,15 +3477,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) {

style.css

@@ -37,12 +37,12 @@ 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 - fixed width for collapse */
 .rpg-panel.rpg-collapsed {
-    width: 40px !important;
+    max-width: 40px !important;
     min-width: 40px !important;
     left: auto !important;
     right: auto !important;
@@ -56,6 +56,17 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     left: 0 !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;
@@ -360,6 +371,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 */