style: remove grid floor, add edge sidebar toggles, improve contrast

Author: nolancacheux

src/app/globals.css

@@ -6,23 +6,23 @@
 
 /* Light Theme (Default) */
 :root {
-  --bg-primary: #f8fafc;
+  --bg-primary: #f1f5f9;
   --bg-secondary: #ffffff;
-  --bg-tertiary: #f1f5f9;
-  --bg-elevated: #e2e8f0;
-  --text-primary: #1e293b;
-  --text-secondary: #475569;
-  --text-muted: #64748b;
-  --accent-primary: #3b82f6;
-  --accent-secondary: #10b981;
-  --accent-warning: #f59e0b;
-  --accent-danger: #ef4444;
-  --border-color: rgba(0, 0, 0, 0.12);
-  --border-hover: rgba(0, 0, 0, 0.2);
-  --glass-bg: rgba(255, 255, 255, 0.95);
-  --shadow-color: rgba(0, 0, 0, 0.08);
-  --code-bg: #f1f5f9;
-  --section-divider: #e2e8f0;
+  --bg-tertiary: #e2e8f0;
+  --bg-elevated: #cbd5e1;
+  --text-primary: #0f172a;
+  --text-secondary: #334155;
+  --text-muted: #475569;
+  --accent-primary: #2563eb;
+  --accent-secondary: #059669;
+  --accent-warning: #d97706;
+  --accent-danger: #dc2626;
+  --border-color: rgba(0, 0, 0, 0.15);
+  --border-hover: rgba(0, 0, 0, 0.25);
+  --glass-bg: rgba(255, 255, 255, 0.98);
+  --shadow-color: rgba(0, 0, 0, 0.12);
+  --code-bg: #e2e8f0;
+  --section-divider: #cbd5e1;
 }
 
 /* Dark Theme */
@@ -316,3 +316,9 @@ input[type="checkbox"] {
 .attention-cell {
   transition: background-color 0.2s ease;
 }
+
+/* Vertical text for sidebar toggles */
+.writing-mode-vertical {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+}

src/components/3d/NetworkVisualization.tsx

@@ -299,25 +299,6 @@ function NetworkScene() {
   );
 }
 
-// Grid floor - adapts to theme
-function GridFloor() {
-  const theme = useNetworkStore(state => state.ui.theme);
-  const gridColor = theme === 'dark' ? '#0a0a0f' : '#e2e8f0';
-  const opacity = theme === 'dark' ? 0.3 : 0.5;
-
-  return (
-    <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -3, 0]} receiveShadow>
-      <planeGeometry args={[50, 50, 50, 50]} />
-      <meshStandardMaterial
-        color={gridColor}
-        wireframe
-        transparent
-        opacity={opacity}
-      />
-    </mesh>
-  );
-}
-
 // Background stars - only shown in dark mode
 function BackgroundStars() {
   const theme = useNetworkStore(state => state.ui.theme);

src/components/NeuralNetworkVisualizer.tsx

@@ -62,20 +62,21 @@ function HeaderBar({ isMobile }: { isMobile: boolean }) {
 
   return (
     <header className="fixed top-0 left-0 right-0 h-14 glass z-30 flex items-center justify-between px-2 sm:px-4">
-      {/* Left: Toggle sidebar */}
+      {/* Left: Logo and title */}
       <div className="flex items-center gap-2 sm:gap-4">
-        {(isMobile || !ui.leftPanelOpen) && (
+        {/* Mobile only hamburger menu */}
+        {isMobile && (
           <button
             onClick={toggleLeftPanel}
             className="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
-            aria-label="Toggle left panel"
+            aria-label="Toggle menu"
           >
             <svg className="w-6 h-6 text-[var(--text-secondary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
             </svg>
           </button>
         )}
-        
+
         <div className="flex items-center gap-3">
           <div className="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center">
             <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -156,11 +157,12 @@ function HeaderBar({ isMobile }: { isMobile: boolean }) {
           </svg>
         </a>
 
-        {(isMobile || !ui.rightPanelOpen) && (
+        {/* Mobile only settings button */}
+        {isMobile && (
           <button
             onClick={toggleRightPanel}
             className="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
-            aria-label="Toggle right panel"
+            aria-label="Toggle settings"
           >
             <svg className="w-6 h-6 text-[var(--text-secondary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
@@ -309,6 +311,38 @@ export default function NeuralNetworkVisualizer() {
       {/* Right Panel */}
       <RightPanel />
 
+      {/* Left sidebar toggle arrow - shown when sidebar is closed */}
+      {!isMobile && !ui.leftPanelOpen && (
+        <button
+          onClick={toggleLeftPanel}
+          className="fixed left-0 top-1/2 -translate-y-1/2 z-30 bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-r-lg px-2 py-4 shadow-lg hover:bg-[var(--bg-tertiary)] transition-all group"
+          aria-label="Open layers panel"
+        >
+          <div className="flex flex-col items-center gap-2">
+            <svg className="w-5 h-5 text-[var(--text-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            </svg>
+            <span className="text-xs font-medium text-[var(--text-secondary)] writing-mode-vertical">Layers</span>
+          </div>
+        </button>
+      )}
+
+      {/* Right sidebar toggle arrow - shown when sidebar is closed */}
+      {!isMobile && !ui.rightPanelOpen && (
+        <button
+          onClick={toggleRightPanel}
+          className="fixed right-0 top-1/2 -translate-y-1/2 z-30 bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-l-lg px-2 py-4 shadow-lg hover:bg-[var(--bg-tertiary)] transition-all group"
+          aria-label="Open control panel"
+        >
+          <div className="flex flex-col items-center gap-2">
+            <svg className="w-5 h-5 text-[var(--text-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            </svg>
+            <span className="text-xs font-medium text-[var(--text-secondary)] writing-mode-vertical">Controls</span>
+          </div>
+        </button>
+      )}
+
       {/* Live Example Bar (Bottom) */}
       <LiveExampleBar />