improve tree page

Author: H-Freax

visual-tree-search-app/components/ControlPanel.tsx

@@ -8,15 +8,15 @@ const Header = () => {
 
   return (
     <header className="sticky top-0 z-20 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="container flex h-14 items-center">
-        <div className="flex flex-1 items-center justify-center">
+      <div className="container mx-auto px-4 h-14 relative">
+        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
           <Link href="/" className="flex items-center space-x-2 hover:opacity-80 transition-opacity">
-            <h1 className="text-lg font-semibold tracking-tight bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
+            <h1 className="text-lg font-semibold tracking-tight bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent whitespace-nowrap">
               VisualTreeSearch
             </h1>
           </Link>
         </div>
-        <div className="flex items-center space-x-2">
+        <div className="absolute right-0 top-1/2 -translate-y-1/2 pr-4">
           <Button
             variant="ghost"
             size="icon"

visual-tree-search-app/components/Header.tsx

@@ -1,5 +1,4 @@
 import Header from "./Header";
-import Footer from "./Footer"; 
 import Sidebar from "./Sidebar";
 import Head from "next/head";
 
@@ -18,14 +17,13 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
 
       <div className="flex min-h-screen bg-gradient-to-b from-background via-background/98 to-background/95 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950">
         <Sidebar />
-        <div className="flex flex-col flex-1 min-w-0 ml-14 lg:ml-56 transition-all duration-300">
+        <div className="flex flex-col flex-1 min-w-0 transition-all duration-300" style={{ marginLeft: 'var(--sidebar-width, 3.5rem)' }}>
           <Header />
-          <main className="flex-1 p-4 lg:p-6 overflow-auto">
+          <main className="flex-1 px-4 pt-4 pb-2 lg:px-6 lg:pt-6 lg:pb-3 overflow-auto">
             <div className="h-full w-full max-w-full">
               {children}
             </div>
           </main>
-          <Footer />
         </div>
       </div>
     </>

visual-tree-search-app/components/Layout.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Globe } from 'lucide-react';
 
 interface LiveBrowserViewProps {
   liveBrowserUrl: string | null;
@@ -13,9 +14,7 @@ const LiveBrowserView: React.FC<LiveBrowserViewProps> = ({ liveBrowserUrl, width
     >
       <div className="p-3 border-b border-slate-200 dark:border-slate-700 bg-gradient-to-r from-sky-50 to-white dark:from-slate-900 dark:to-slate-800">
         <h2 className="text-lg font-semibold text-sky-950 dark:text-sky-100 flex items-center">
-          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 text-cyan-500" viewBox="0 0 20 20" fill="currentColor">
-            <path fillRule="evenodd" d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z" clipRule="evenodd" />
-          </svg>
+          <Globe className="h-4 w-4 mr-1.5 text-primary" />
           Live Browser View
         </h2>
       </div>

visual-tree-search-app/components/LiveBrowserView.tsx

@@ -117,10 +117,14 @@ const MessageLogPanel: React.FC<MessageLogPanelProps> = ({
   onSessionIdChange,
   variant = 'default'
 }) => {
+  const prevMessagesLengthRef = React.useRef(messages.length);
+
   useEffect(() => {
-    if (messagesEndRef?.current) {
+    // Only scroll if new messages were added
+    if (messages.length > prevMessagesLengthRef.current && messagesEndRef?.current) {
       messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
     }
+    prevMessagesLengthRef.current = messages.length;
   }, [messages, messagesEndRef]);
 
   useEffect(() => {
@@ -941,11 +945,9 @@ const MessageLogPanel: React.FC<MessageLogPanelProps> = ({
   };
 
   return (
-    <div className={`bg-white dark:bg-slate-800 rounded-lg shadow-md border border-slate-200 dark:border-slate-700 p-2 mt-3 ${variant === 'mcts' ? 'border-cyan-500' : variant === 'lats' ? 'border-purple-500' : ''}`}>
-      <h2 className="text-base font-semibold mb-1.5 text-sky-950 dark:text-sky-100 flex items-center">
-        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1.5 text-cyan-500" viewBox="0 0 20 20" fill="currentColor">
-          <path fillRule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clipRule="evenodd" />
-        </svg>
+    <div className={`bg-white dark:bg-slate-800 rounded-lg shadow-md border border-slate-200 dark:border-slate-700 p-2 ${variant === 'mcts' ? 'border-cyan-500' : variant === 'lats' ? 'border-purple-500' : ''}`}>
+      <h2 className="text-lg font-semibold text-sky-950 dark:text-sky-100 flex items-center mb-2">
+        <MessageSquare className="h-4 w-4 mr-1.5 text-primary" />
         Message Log {variant !== 'default' ? `(${variant.toUpperCase()})` : ''}
       </h2>
       <div className="h-[150px] overflow-y-auto border border-slate-200 dark:border-slate-700 rounded-md p-1.5 bg-gradient-to-r from-sky-50 to-white dark:from-slate-900 dark:to-slate-800">

visual-tree-search-app/components/MessageLogPanel.tsx

@@ -17,17 +17,22 @@ const Sidebar = () => {
       // Only collapse when switching from large to small screen
       if (mobile && !isMobile) {
         setCollapsed(true);
+        document.documentElement.style.setProperty('--sidebar-width', '3.5rem');
       }
       // Auto expand when switching from small to large screen
       if (!mobile && isMobile) {
         setCollapsed(false);
+        document.documentElement.style.setProperty('--sidebar-width', '14rem');
       }
     };
 
+    // Set initial sidebar width
+    document.documentElement.style.setProperty('--sidebar-width', collapsed ? '3.5rem' : '14rem');
+
     checkScreenSize();
     window.addEventListener('resize', checkScreenSize);
     return () => window.removeEventListener('resize', checkScreenSize);
-  }, [isMobile]);
+  }, [isMobile, collapsed]);
 
   const menuItems = [
     {
@@ -61,6 +66,7 @@ const Sidebar = () => {
 
   const toggleSidebar = () => {
     setCollapsed(!collapsed);
+    document.documentElement.style.setProperty('--sidebar-width', collapsed ? '3.5rem' : '14rem');
   };
 
   return (

visual-tree-search-app/components/Sidebar.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import * as d3 from 'd3';
 import { useTheme } from 'next-themes';
+import { Network } from 'lucide-react';
 
 interface TreeNode {
   id: number;
@@ -653,9 +654,7 @@ const TreeVisual: React.FC<TreeVisualProps> = ({
     <div className={`${className} bg-white dark:bg-slate-800 rounded-r-lg overflow-hidden`}>
       <div className="p-3 border-b border-slate-200 dark:border-slate-700 bg-gradient-to-r from-sky-50 to-white dark:from-slate-900 dark:to-slate-800">
         <h2 className="text-lg font-semibold text-sky-950 dark:text-sky-100 flex items-center">
-          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 text-cyan-500" viewBox="0 0 20 20" fill="currentColor">
-            <path d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z" />
-          </svg>
+          <Network className="h-4 w-4 mr-1.5 text-primary" />
           {title}
         </h2>