Refactor DockviewLayoutManager to improve theme handling and layout initialization

src/components/DockviewLayoutManager.tsx

@@ -1,10 +1,10 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, useMemo } from 'react';
 import {
   DockviewReact,
   DockviewReadyEvent,
   DockviewApi,
-  themeAbyss,
   themeLight,
+  themeDark,
 } from 'dockview';
 import { useMantineColorScheme, useComputedColorScheme } from '@mantine/core';
 import { useDockviewStore } from '../stores/useDockviewStore';
@@ -23,6 +23,24 @@ export function DockviewLayoutManager() {
     getInitialValueInEffect: true,
   });
 
+  // 🧱 Layout por defecto
+  const createDefaultLayout = (api: DockviewApi) => {
+    // ✅ El primer panel no debe tener "position"
+    api.addPanel({
+      id: 'welcome',
+      component: 'welcome',
+      title: 'Bienvenido',
+    });
+
+    // ✅ Los siguientes sí pueden usar dirección
+    api.addPanel({
+      id: 'toggle',
+      component: 'toggle',
+      title: 'Cambiar tema',
+      position: { direction: 'right' },
+    });
+  };
+
   // ⚡ Inicializa Dockview al estar listo
   const onReady = (event: DockviewReadyEvent) => {
     const api = event.api;
@@ -46,41 +64,17 @@ export function DockviewLayoutManager() {
     });
   };
 
-  // 🌗 Sincroniza Dockview con el tema de Mantine automáticamente
+  // 🌗 Determina el tema actual y aplica estilos personalizados
-  useEffect(() => {
+  const isDark = computedScheme === 'dark';
-    const el = hostRef.current;
+  const dockviewTheme = isDark ? themeDark : themeLight;
-    if (!el) return;
 
-    // Remueve las clases anteriores
+  // 🎨 Personalización Dockview mediante variables CSS
-    el.classList.remove('dockview-theme-dark', 'dockview-theme-light');
+  const dockviewCustomTheme = useMemo(() => {
-
+    const baseTheme = isDark ? themeDark : themeLight;
-    // Aplica el tema adecuado
+    return {
-    const isDark = computedScheme === 'dark';
+      ...baseTheme,
-    el.classList.add(isDark ? 'dockview-theme-dark' : 'dockview-theme-light');
+    };
-    el.style.backgroundColor = isDark ? '#1A1B1E' : '#f5f6f7';
+  }, [isDark]);
-  }, [computedScheme]);
-
-  // 🧱 Layout inicial por defecto
-  const createDefaultLayout = (api: DockviewApi) => {
-    const welcome = api.addPanel({
-      id: 'welcome',
-      component: 'welcome',
-      title: 'Welcome',
-    });
-
-    api.addPanel({
-      id: 'toggle',
-      component: 'toggle',
-      title: 'Theme',
-      position: {
-        referencePanel: welcome,
-        direction: 'right',
-      },
-    });
-  };
-
-  // ⚙️ Tema de Dockview sincronizado con Mantine
-  const dockviewTheme = computedScheme === 'dark' ? themeAbyss : themeLight;
 
   return (
     <div
@@ -92,10 +86,11 @@ export function DockviewLayoutManager() {
         display: 'flex',
         overflow: 'hidden',
         transition: 'background-color 0.3s ease-in-out',
+        backgroundColor: isDark ? '#1A1B1E' : '#f5f6f7',
       }}
     >
       <DockviewReact
-        theme={dockviewTheme} // 🔥 Tema dinámico oficial de Dockview
+        theme={dockviewCustomTheme}
         components={{
           welcome: (props) => (
             <ResponsivePanel component="welcome" {...props} />
@@ -132,7 +127,7 @@ function ResponsivePanel({
   }
 
   if (component === 'toggle') {
-    return <ColorSchemeToggle width={size.width} height={size.height} />;
+    return <ColorSchemeToggle />;
   }
 
   return null;