diff --git a/client/src/App.tsx b/client/src/App.tsx index b96606f..433e45a 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -22,7 +22,7 @@ import { CompatibilityCallToolResult, ClientNotification, } from "@modelcontextprotocol/sdk/types.js"; -import { useEffect, useRef, useState } from "react"; +import { useCallback, useEffect, useRef, useState } from "react"; // Add dark mode class based on system preference if (window.matchMedia("(prefers-color-scheme: dark)").matches) { document.documentElement.classList.add("dark"); @@ -127,6 +127,49 @@ const App = () => { >(); const [nextToolCursor, setNextToolCursor] = useState(); const progressTokenRef = useRef(0); + const [historyPaneHeight, setHistoryPaneHeight] = useState(300); + const [isDragging, setIsDragging] = useState(false); + const dragStartY = useRef(0); + const dragStartHeight = useRef(0); + + const handleDragStart = useCallback( + (e: React.MouseEvent) => { + setIsDragging(true); + dragStartY.current = e.clientY; + dragStartHeight.current = historyPaneHeight; + document.body.style.userSelect = "none"; + }, + [historyPaneHeight], + ); + + const handleDragMove = useCallback( + (e: MouseEvent) => { + if (!isDragging) return; + const deltaY = dragStartY.current - e.clientY; + const newHeight = Math.max( + 100, + Math.min(800, dragStartHeight.current + deltaY), + ); + setHistoryPaneHeight(newHeight); + }, + [isDragging], + ); + + const handleDragEnd = useCallback(() => { + setIsDragging(false); + document.body.style.userSelect = ""; + }, []); + + useEffect(() => { + if (isDragging) { + window.addEventListener("mousemove", handleDragMove); + window.addEventListener("mouseup", handleDragEnd); + return () => { + window.removeEventListener("mousemove", handleDragMove); + window.removeEventListener("mouseup", handleDragEnd); + }; + } + }, [isDragging, handleDragMove, handleDragEnd]); useEffect(() => { localStorage.setItem("lastCommand", command); @@ -467,11 +510,24 @@ const App = () => { )} -
- +
+
+
+
+
+ +
diff --git a/client/src/components/History.tsx b/client/src/components/History.tsx index 46fc5d3..532d3b1 100644 --- a/client/src/components/History.tsx +++ b/client/src/components/History.tsx @@ -29,8 +29,8 @@ const HistoryAndNotifications = ({ }; return ( -
-
+
+

History

{requestHistory.length === 0 ? (

No history yet

@@ -107,7 +107,7 @@ const HistoryAndNotifications = ({ )}
-
+

Server Notifications

{serverNotifications.length === 0 ? (

No notifications yet