indicators and plots

web/src/App.vue

@@ -13,6 +13,7 @@ import { wsManager } from './composables/useWebSocket'
 const isAuthenticated = ref(false)
 const needsConfirmation = ref(false)
 const authError = ref<string>()
+const isDragging = ref(false)
 let stateSyncCleanup: (() => void) | null = null
 
 // Check if we need password confirmation on first load
@@ -58,6 +59,21 @@ const handleAuthenticate = async (
   }
 }
 
+onMounted(() => {
+  // Listen for splitter drag events
+  document.addEventListener('mousedown', (e) => {
+    // Check if the mousedown is on a splitter gutter
+    const target = e.target as HTMLElement
+    if (target.closest('.p-splitter-gutter')) {
+      isDragging.value = true
+    }
+  })
+
+  document.addEventListener('mouseup', () => {
+    isDragging.value = false
+  })
+})
+
 onBeforeUnmount(() => {
   if (stateSyncCleanup) {
     stateSyncCleanup()
@@ -82,6 +98,8 @@ onBeforeUnmount(() => {
         <ChatPanel />
       </SplitterPanel>
     </Splitter>
+    <!-- Transparent overlay to prevent iframe from capturing mouse events during drag -->
+    <div v-if="isDragging" class="drag-overlay"></div>
   </div>
 </template>
 
@@ -90,19 +108,24 @@ onBeforeUnmount(() => {
   width: 100vw !important;
   height: 100vh !important;
   overflow: hidden;
-  background: var(--p-surface-0);
+  background: var(--p-surface-0) !important;
+}
+
+.app-container.dark {
+  background: var(--p-surface-0) !important;
 }
 
 .main-splitter {
   height: 100vh !important;
+  background: var(--p-surface-0) !important;
 }
 
 .main-splitter :deep(.p-splitter-gutter) {
-  background: var(--p-surface-100);
+  background: var(--p-surface-0) !important;
 }
 
 .main-splitter :deep(.p-splitter-gutter-handle) {
-  background: var(--p-primary-color);
+  background: var(--p-surface-400) !important;
 }
 
 .chart-panel,
@@ -119,4 +142,15 @@ onBeforeUnmount(() => {
   display: flex;
   flex-direction: column;
 }
+
+.drag-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  cursor: col-resize;
+  background: transparent;
+}
 </style>