Merge pull request #12 from modelcontextprotocol/ashwin/listpane

extract listpane

client/src/App.tsx

@@ -19,7 +19,7 @@ import ResourcesTab, { Resource } from "./components/ResourcesTab";
 import NotificationsTab from "./components/NotificationsTab";
 import PromptsTab, { Prompt } from "./components/PromptsTab";
 import ToolsTab, { Tool as ToolType } from "./components/ToolsTab";
-import History from "./components/CommandHistory";
+import History from "./components/History";
 
 const App = () => {
   const [socket, setSocket] = useState<WebSocket | null>(null);

client/src/components/ListPane.tsx

@@ -0,0 +1,43 @@
+import { Button } from "./ui/button";
+
+type ListPaneProps<T> = {
+  items: T[];
+  listItems: () => void;
+  setSelectedItem: (item: T) => void;
+  renderItem: (item: T) => React.ReactNode;
+  title: string;
+  buttonText: string;
+};
+
+const ListPane = <T extends object>({
+  items,
+  listItems,
+  setSelectedItem,
+  renderItem,
+  title,
+  buttonText,
+}: ListPaneProps<T>) => (
+  <div className="bg-white rounded-lg shadow">
+    <div className="p-4 border-b border-gray-200">
+      <h3 className="font-semibold">{title}</h3>
+    </div>
+    <div className="p-4">
+      <Button variant="outline" className="w-full mb-4" onClick={listItems}>
+        {buttonText}
+      </Button>
+      <div className="space-y-2">
+        {items.map((item, index) => (
+          <div
+            key={index}
+            className="flex items-center p-2 rounded hover:bg-gray-50 cursor-pointer"
+            onClick={() => setSelectedItem(item)}
+          >
+            {renderItem(item)}
+          </div>
+        ))}
+      </div>
+    </div>
+  </div>
+);
+
+export default ListPane;

client/src/components/PromptsTab.tsx

@@ -6,6 +6,7 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { useState } from "react";
 import { Label } from "@/components/ui/label";
+import ListPane from "./ListPane";
 
 export type Prompt = {
   name: string;
@@ -48,34 +49,22 @@ const PromptsTab = ({
 
   return (
     <TabsContent value="prompts" className="grid grid-cols-2 gap-4">
-      <div className="bg-white rounded-lg shadow">
+      <ListPane
-        <div className="p-4 border-b border-gray-200">
+        items={prompts}
-          <h3 className="font-semibold">Prompts</h3>
+        listItems={listPrompts}
-        </div>
+        setSelectedItem={(prompt) => {
-        <div className="p-4">
+          setSelectedPrompt(prompt);
-          <Button
+          setPromptArgs({});
-            variant="outline"
+        }}
-            className="w-full mb-4"
+        renderItem={(prompt) => (
-            onClick={listPrompts}
+          <>
-          >
+            <span className="flex-1">{prompt.name}</span>
-            List Prompts
+            <span className="text-sm text-gray-500">{prompt.description}</span>
-          </Button>
+          </>
-          <div className="space-y-2">
+        )}
-            {prompts.map((prompt) => (
+        title="Prompts"
-              <div
+        buttonText="List Prompts"
-                key={prompt.name}
+      />
-                className="flex items-center p-2 rounded hover:bg-gray-50 cursor-pointer"
-                onClick={() => {
-                  setSelectedPrompt(prompt);
-                  setPromptArgs({});
-                }}
-              >
-                <span className="flex-1">{prompt.name}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
 
       <div className="bg-white rounded-lg shadow">
         <div className="p-4 border-b border-gray-200">

client/src/components/ResourcesTab.tsx

@@ -1,13 +1,8 @@
-import {
+import { FileText, ChevronRight, AlertCircle, RefreshCw } from "lucide-react";
-  FileText,
-  PlayCircle,
-  ChevronRight,
-  AlertCircle,
-  RefreshCw,
-} from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { TabsContent } from "@/components/ui/tabs";
+import ListPane from "./ListPane";
 
 export type Resource = {
   uri: string;
@@ -31,37 +26,23 @@ const ResourcesTab = ({
   error: string | null;
 }) => (
   <TabsContent value="resources" className="grid grid-cols-2 gap-4">
-    <div className="bg-white rounded-lg shadow">
+    <ListPane
-      <div className="p-4 border-b border-gray-200">
+      items={resources}
-        <h3 className="font-semibold">Resources</h3>
+      listItems={listResources}
-      </div>
+      setSelectedItem={(resource) => {
-      <div className="p-4">
+        setSelectedResource(resource);
-        <Button
+        readResource(resource.uri);
-          variant="outline"
+      }}
-          className="w-full mb-4"
+      renderItem={(resource) => (
-          onClick={listResources}
+        <>
-        >
+          <FileText className="w-4 h-4 mr-2 text-gray-500" />
-          <PlayCircle className="w-4 h-4 mr-2" />
+          <span className="flex-1">{resource.uri}</span>
-          List Resources
+          <ChevronRight className="w-4 h-4 text-gray-400" />
-        </Button>
+        </>
-        <div className="space-y-2">
+      )}
-          {resources.map((resource, index) => (
+      title="Resources"
-            <div
+      buttonText="List Resources"
-              key={index}
+    />
-              className="flex items-center p-2 rounded hover:bg-gray-50 cursor-pointer"
-              onClick={() => {
-                setSelectedResource(resource);
-                readResource(resource.uri);
-              }}
-            >
-              <FileText className="w-4 h-4 mr-2 text-gray-500" />
-              <span className="flex-1">{resource.uri}</span>
-              <ChevronRight className="w-4 h-4 text-gray-400" />
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
 
     <div className="bg-white rounded-lg shadow">
       <div className="p-4 border-b border-gray-200 flex justify-between items-center">

client/src/components/ToolsTab.tsx

@@ -5,6 +5,7 @@ import { Send, AlertCircle } from "lucide-react";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { useState } from "react";
 import { Label } from "@/components/ui/label";
+import ListPane from "./ListPane";
 
 export type Tool = {
   name: string;
@@ -36,30 +37,19 @@ const ToolsTab = ({
 
   return (
     <TabsContent value="tools" className="grid grid-cols-2 gap-4">
-      <div className="bg-white rounded-lg shadow">
+      <ListPane
-        <div className="p-4 border-b border-gray-200">
+        items={tools}
-          <h3 className="font-semibold">Tools</h3>
+        listItems={listTools}
-        </div>
+        setSelectedItem={setSelectedTool}
-        <div className="p-4">
+        renderItem={(tool) => (
-          <Button variant="outline" className="w-full mb-4" onClick={listTools}>
+          <>
-            List Tools
+            <span className="flex-1">{tool.name}</span>
-          </Button>
+            <span className="text-sm text-gray-500">{tool.description}</span>
-          <div className="space-y-2">
+          </>
-            {tools.map((tool, index) => (
+        )}
-              <div
+        title="Tools"
-                key={index}
+        buttonText="List Tools"
-                className="flex items-center p-2 rounded hover:bg-gray-50 cursor-pointer"
+      />
-                onClick={() => setSelectedTool(tool)}
-              >
-                <span className="flex-1">{tool.name}</span>
-                <span className="text-sm text-gray-500">
-                  {tool.description}
-                </span>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
 
       <div className="bg-white rounded-lg shadow">
         <div className="p-4 border-b border-gray-200">