made the terminal buttons work

Author: ndbroadbent

site/app/page.tsx

@@ -96,7 +96,7 @@ export default function Home() {
                 </Button>
               </div>
             </div>
-            <div className="hidden md:block">
+            <div className="hidden md:block relative">
               <LogScroller />
             </div>
           </div>

site/components/log-scroller.tsx

@@ -18,7 +18,10 @@ export function LogScroller() {
   const [isPaused, setIsPaused] = useState(false);
   const [isVisible, setIsVisible] = useState(true);
   const [isStandalone, setIsStandalone] = useState(false);
+  const [isMinimized, setIsMinimized] = useState(false);
+  const [isMaximized, setIsMaximized] = useState(false);
   const scrollerRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   // Check if we're in standalone mode based on window width
   useEffect(() => {
@@ -87,23 +90,41 @@ export function LogScroller() {
     setLogs([generatePumaBootLogEntry()]);
   }, [generatePumaBootLogEntry]);
 
-  // Add a new log entry at an interval, but not when user is hovering (isPaused)
+  // Add a new log entry at an interval, but not when user is hovering (isPaused) unless maximized
   useInterval(() => {
-    if (!isPaused) {
+    if (!isPaused || isMaximized) {
       setLogs((prevLogs) => {
         const newLogs = [...prevLogs, generateLogEntry()];
-        // Keep only the last 15 logs
-        return newLogs.slice(-15);
+        // Keep only the last 15 logs when normal, more when maximized
+        return newLogs.slice(-(isMaximized ? 30 : 15));
       });
     }
   }, 2500);
 
   // Scroll to the bottom when logs change
   useEffect(() => {
-    if (scrollerRef.current && !isPaused) {
+    if (scrollerRef.current && (!isPaused || isMaximized)) {
       scrollerRef.current.scrollTop = scrollerRef.current.scrollHeight;
     }
-  }, [logs, isPaused]);
+  }, [logs, isPaused, isMaximized]);
+
+  // Toggle the minimized state
+  const handleMinimize = () => {
+    setIsMinimized(true);
+    setIsMaximized(false);
+  };
+
+  // Toggle the maximized state
+  const handleMaximize = () => {
+    setIsMaximized(true);
+    setIsMinimized(false);
+  };
+
+  // Restore the window to normal state
+  const handleRestore = () => {
+    setIsMinimized(false);
+    setIsMaximized(false);
+  };
 
   // If not visible, return an empty div of the same height
   if (!isVisible) {
@@ -117,68 +138,126 @@ export function LogScroller() {
       '0 10px 30px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.3), -5px 5px 15px rgba(0, 0, 0, 0.15)',
   };
 
-  // Different styles based on layout
-  const perspectiveStyle = isStandalone
-    ? {
-        // Straight style for standalone mode
-        transform: 'scale(1)',
-        marginLeft: '0',
-        marginRight: '0',
-        ...baseStyle,
-      }
-    : {
-        // 3D perspective for side-by-side mode
-        transform:
-          'perspective(1500px) rotateX(4deg) rotateY(-8deg) rotateZ(1deg)',
-        transformOrigin: 'center center',
-        marginLeft: '-40px',
-        marginRight: '80px',
-        ...baseStyle,
-      };
+  // Different styles based on window state and layout
+  let perspectiveStyle = {};
+  
+  if (isMinimized) {
+    // Minimized state - small window in bottom right
+    perspectiveStyle = {
+      transform: 'scale(0.25)',
+      position: 'fixed' as const,
+      bottom: '20px',
+      right: '20px',
+      width: '400px',
+      zIndex: 100,
+      transformOrigin: 'bottom right',
+      ...baseStyle,
+    };
+  } else if (isMaximized) {
+    // Maximized state - fixed position to cover the entire hero section
+    perspectiveStyle = {
+      transform: 'scale(1)',
+      position: 'fixed' as const,
+      top: '0',
+      left: '0',
+      width: '100vw',
+      height: '100vh',
+      marginLeft: '0',
+      marginRight: '0',
+      zIndex: 999,
+      ...baseStyle,
+      boxShadow: '0 10px 50px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3)',
+      borderRadius: '0',
+    };
+  } else {
+    // Regular state - depends on standalone
+    perspectiveStyle = isStandalone
+      ? {
+          // Straight style for standalone mode
+          transform: 'scale(1)',
+          marginLeft: '0',
+          marginRight: '0',
+          ...baseStyle,
+        }
+      : {
+          // 3D perspective for side-by-side mode
+          transform:
+            'perspective(1500px) rotateX(4deg) rotateY(-8deg) rotateZ(1deg)',
+          transformOrigin: 'center center',
+          marginLeft: '-40px',
+          marginRight: '80px',
+          ...baseStyle,
+        };
+  }
 
-  const onMouseOverStyle = isStandalone
-    ? {
-        transform: 'scale(1.01)',
-        boxShadow:
-          '0 15px 35px rgba(0, 0, 0, 0.25), 0 3px 5px rgba(0, 0, 0, 0.35)',
-      }
-    : {
-        transform:
-          'perspective(1500px) rotateX(3deg) rotateY(-6deg) rotateZ(0.5deg) scale(1.01)',
-        boxShadow:
-          '0 15px 35px rgba(0, 0, 0, 0.25), 0 3px 5px rgba(0, 0, 0, 0.35), -8px 8px 20px rgba(0, 0, 0, 0.15)',
-      };
+  // Mouse over effects - only for non-minimized state
+  const onMouseOverStyle = isMinimized 
+    ? {}
+    : isStandalone
+      ? {
+          transform: 'scale(1.01)',
+          boxShadow:
+            '0 15px 35px rgba(0, 0, 0, 0.25), 0 3px 5px rgba(0, 0, 0, 0.35)',
+        }
+      : {
+          transform:
+            'perspective(1500px) rotateX(3deg) rotateY(-6deg) rotateZ(0.5deg) scale(1.01)',
+          boxShadow:
+            '0 15px 35px rgba(0, 0, 0, 0.25), 0 3px 5px rgba(0, 0, 0, 0.35), -8px 8px 20px rgba(0, 0, 0, 0.15)',
+        };
 
-  const onMouseOutStyle = isStandalone
-    ? {
-        transform: 'scale(1)',
-        boxShadow: baseStyle.boxShadow,
-      }
-    : {
-        transform:
-          'perspective(1500px) rotateX(4deg) rotateY(-8deg) rotateZ(1deg) scale(1)',
-        boxShadow: baseStyle.boxShadow,
-      };
+  const onMouseOutStyle = isMinimized
+    ? {}
+    : isStandalone
+      ? {
+          transform: 'scale(1)',
+          boxShadow: baseStyle.boxShadow,
+        }
+      : {
+          transform:
+            'perspective(1500px) rotateX(4deg) rotateY(-8deg) rotateZ(1deg) scale(1)',
+          boxShadow: baseStyle.boxShadow,
+        };
+
+  // Adjust height based on maximized state
+  const heightClass = isMaximized ? "h-screen" : "h-[375px]";
 
   return (
     <div
-      className="w-full h-[375px] bg-black rounded-lg overflow-hidden shadow-lg transition-all duration-300 ease-in-out"
+      ref={containerRef}
+      className={`${isMaximized ? '' : 'w-full'} ${heightClass} bg-black rounded-lg overflow-hidden shadow-lg transition-all duration-300 ease-in-out`}
       style={perspectiveStyle}
       onMouseOver={(e) => {
-        Object.assign(e.currentTarget.style, onMouseOverStyle);
+        if (!isMinimized && !isMaximized) {
+          Object.assign(e.currentTarget.style, onMouseOverStyle);
+        }
       }}
       onMouseOut={(e) => {
-        Object.assign(e.currentTarget.style, onMouseOutStyle);
+        if (!isMinimized && !isMaximized) {
+          Object.assign(e.currentTarget.style, onMouseOutStyle);
+        }
+      }}
+      onMouseEnter={() => {
+        if (!isMaximized) {
+          setIsPaused(true);
+        }
       }}
-      onMouseEnter={() => setIsPaused(true)}
       onMouseLeave={() => {
-        setIsPaused(false);
-        // Add a small delay before resuming scrolling
-        setTimeout(() => {
-          if (scrollerRef.current) {
-            scrollerRef.current.scrollTop = scrollerRef.current.scrollHeight;
-          }
-        }, 100);
+        if (!isMaximized) {
+          setIsPaused(false);
+          // Add a small delay before resuming scrolling
+          setTimeout(() => {
+            if (scrollerRef.current) {
+              scrollerRef.current.scrollTop = scrollerRef.current.scrollHeight;
+            }
+          }, 100);
+        }
+      }}
+      onClick={() => {
+        // Clicking on the minimized window restores it
+        if (isMinimized) {
+          handleRestore();
+        }
       }}
     >
       <div
@@ -192,18 +271,29 @@ export function LogScroller() {
           <div
             className="w-3 h-3 rounded-full bg-red-500 cursor-pointer hover:bg-red-400 transition-colors"
             style={{ boxShadow: '0 1px 1px rgba(0, 0, 0, 0.2)' }}
-            onClick={() => setIsVisible(false)}
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsVisible(false);
+            }}
             title="Click to close"
           ></div>
           <div
             className="w-3 h-3 rounded-full bg-yellow-500 cursor-pointer hover:bg-yellow-400 transition-colors"
             style={{ boxShadow: '0 1px 1px rgba(0, 0, 0, 0.2)' }}
-            onClick={() => setIsVisible(false)}
+            onClick={(e) => {
+              e.stopPropagation();
+              handleMinimize();
+            }}
             title="Click to minimize"
           ></div>
           <div
-            className="w-3 h-3 rounded-full bg-green-500"
+            className="w-3 h-3 rounded-full bg-green-500 cursor-pointer hover:bg-green-400 transition-colors"
             style={{ boxShadow: '0 1px 1px rgba(0, 0, 0, 0.2)' }}
+            onClick={(e) => {
+              e.stopPropagation();
+              isMaximized ? handleRestore() : handleMaximize();
+            }}
+            title={isMaximized ? "Click to restore" : "Click to maximize"}
           ></div>
         </div>
         <div
@@ -218,7 +308,7 @@ export function LogScroller() {
       </div>
 
       {/* Container with relative positioning for the scrollable content and overlay */}
-      <div className="relative h-[333px]">
+      <div className={`relative ${isMaximized ? "h-[calc(100vh-30px)]" : "h-[333px]"}`}>
         {/* Scrollable content */}
         <div
           ref={scrollerRef}
@@ -244,15 +334,15 @@ export function LogScroller() {
                   backgroundColor: 'transparent',
                   padding: '12px',
                   borderRadius: '0px',
-                  minHeight: '300px',
+                  minHeight: isMaximized ? 'calc(100vh - 100px)' : '300px',
                   textShadow: '0 1px 0 rgba(0, 0, 0, 0.7)',
                   letterSpacing: '0.2px',
                 }}
               >
                 {logs.join('\n\n')}
               </SyntaxHighlighter>
             ) : (
-              <div className="w-full h-[300px]"></div>
+              <div className={`w-full ${isMaximized ? 'h-[calc(100vh-100px)]' : 'h-[300px]'}`}></div>
             )}
           </div>
         </div>