make sure session list hides when open and window expanded

2025-03-14 10:16:23 -04:00 · 2025-03-14 10:16:23 -04:00 · fe3984329d
parent 0a46e3c92b
commit fe3984329d
5 changed files with 125 additions and 102 deletions
--- a/frontend/common/dist/styles/global.css
+++ b/frontend/common/dist/styles/global.css
@ -812,6 +812,9 @@ video {
     -moz-user-select: none;
          user-select: none;
 }
+.resize {
+  resize: both;
+}
 .grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@ -1025,9 +1028,6 @@ video {
  -webkit-background-clip: text;
          background-clip: text;
 }
-.p-2 {
-  padding: 0.5rem;
-}
 .p-3 {
  padding: 0.75rem;
 }
--- a/frontend/common/src/components/DefaultAgentScreen.tsx
+++ b/frontend/common/src/components/DefaultAgentScreen.tsx
@ -42,6 +42,22 @@ export const DefaultAgentScreen: React.FC = () => {
    }
  }, [sessions, selectedSessionId]);
  
+  // Close drawer when window resizes to desktop width
+  useEffect(() => {
+    const handleResize = () => {
+      // Check if we're at desktop size (corresponds to md: breakpoint in Tailwind)
+      if (window.innerWidth >= 768 && isDrawerOpen) {
+        setIsDrawerOpen(false);
+      }
+    };
+
+    // Add event listener
+    window.addEventListener('resize', handleResize);
+    
+    // Clean up event listener on component unmount
+    return () => window.removeEventListener('resize', handleResize);
+  }, [isDrawerOpen]);
+  
  // Filter steps for selected session
  const selectedSessionSteps = selectedSessionId 
    ? allSteps.filter(step => sessions.find(s => s.id === selectedSessionId)?.steps.some(s => s.id === step.id))
--- a/frontend/common/src/components/SessionDrawer.tsx
+++ b/frontend/common/src/components/SessionDrawer.tsx
@ -6,9 +6,9 @@ import {
  SheetTitle, 
  SheetClose 
 } from './ui/sheet';
-import { ScrollArea } from './ui/scroll-area';
 import { AgentSession } from '../utils/types';
 import { getSampleAgentSessions } from '../utils/sample-data';
+import { SessionList } from './SessionList';

 interface SessionDrawerProps {
  onSelectSession?: (sessionId: string) => void;
@ -25,30 +25,6 @@ export const SessionDrawer: React.FC<SessionDrawerProps> = ({
  isOpen = false,
  onClose
 }) => {
-  // Get status color
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case 'active':
-        return 'bg-blue-500';
-      case 'completed':
-        return 'bg-green-500';
-      case 'error':
-        return 'bg-red-500';
-      default:
-        return 'bg-gray-500';
-    }
-  };
-
-  // Format timestamp
-  const formatDate = (date: Date) => {
-    return date.toLocaleDateString([], { 
-      month: 'short', 
-      day: 'numeric', 
-      hour: '2-digit', 
-      minute: '2-digit' 
-    });
-  };
-
  return (
    <Sheet open={isOpen} onOpenChange={onClose}>
      <SheetContent 
@ -58,31 +34,13 @@ export const SessionDrawer: React.FC<SessionDrawerProps> = ({
        <SheetHeader>
          <SheetTitle>Sessions</SheetTitle>
        </SheetHeader>
-        <ScrollArea className="h-[calc(100vh-9rem)] mt-6">
-          <div className="space-y-4 p-2">
-            {sessions.map((session) => (
-              <SheetClose key={session.id} asChild>
-                <button
-                  onClick={() => onSelectSession?.(session.id)}
-                  className={`w-full flex items-start p-3 text-left rounded-md transition-colors hover:bg-accent/50 ${
-                    currentSessionId === session.id ? 'bg-accent' : ''
-                  }`}
-                >
-                  <div className={`w-3 h-3 rounded-full ${getStatusColor(session.status)} mt-1.5 mr-3 flex-shrink-0`} />
-                  <div className="flex-1 min-w-0">
-                    <div className="font-medium truncate">{session.name}</div>
-                    <div className="text-xs text-muted-foreground mt-1">
-                      {session.steps.length} steps • {formatDate(session.updated)}
-                    </div>
-                    <div className="text-xs text-muted-foreground mt-1">
-                      <span className="capitalize">{session.status}</span>
-                    </div>
-                  </div>
-                </button>
-              </SheetClose>
-            ))}
-          </div>
-        </ScrollArea>
+        <SessionList
+          sessions={sessions}
+          currentSessionId={currentSessionId}
+          onSelectSession={onSelectSession}
+          className="h-[calc(100vh-9rem)] mt-6"
+          wrapperComponent={SheetClose}
+        />
      </SheetContent>
    </Sheet>
  );
--- a/frontend/common/src/components/SessionList.tsx
+++ b/frontend/common/src/components/SessionList.tsx
@ -0,0 +1,91 @@
+import React from 'react';
+import { ScrollArea } from './ui/scroll-area';
+import { AgentSession } from '../utils/types';
+import { getSampleAgentSessions } from '../utils/sample-data';
+
+interface SessionListProps {
+  onSelectSession?: (sessionId: string) => void;
+  currentSessionId?: string;
+  sessions?: AgentSession[];
+  className?: string;
+  wrapperComponent?: React.ElementType;
+  closeAction?: React.ReactNode;
+}
+
+export const SessionList: React.FC<SessionListProps> = ({ 
+  onSelectSession, 
+  currentSessionId,
+  sessions = getSampleAgentSessions(),
+  className = '',
+  wrapperComponent: WrapperComponent = 'button',
+  closeAction
+}) => {
+  // Get status color
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'active':
+        return 'bg-blue-500';
+      case 'completed':
+        return 'bg-green-500';
+      case 'error':
+        return 'bg-red-500';
+      default:
+        return 'bg-gray-500';
+    }
+  };
+
+  // Format timestamp
+  const formatDate = (date: Date) => {
+    return date.toLocaleDateString([], { 
+      month: 'short', 
+      day: 'numeric', 
+      hour: '2-digit', 
+      minute: '2-digit' 
+    });
+  };
+
+  return (
+    <ScrollArea className={`${className}`}>
+      <div className="p-4 space-y-4">
+        {sessions.map((session) => {
+          const buttonContent = (
+            <>
+              <div className={`w-3 h-3 rounded-full ${getStatusColor(session.status)} mt-1.5 mr-3 flex-shrink-0`} />
+              <div className="flex-1 min-w-0">
+                <div className="font-medium truncate">{session.name}</div>
+                <div className="text-xs text-muted-foreground mt-1">
+                  {session.steps.length} steps • {formatDate(session.updated)}
+                </div>
+                <div className="text-xs text-muted-foreground mt-1">
+                  <span className="capitalize">{session.status}</span>
+                </div>
+              </div>
+            </>
+          );
+
+          return React.createElement(
+            WrapperComponent,
+            {
+              key: session.id,
+              onClick: () => onSelectSession?.(session.id),
+              className: `w-full flex items-start p-3 text-left rounded-md transition-colors hover:bg-accent/50 ${
+                currentSessionId === session.id ? 'bg-accent' : ''
+              }`
+            },
+            closeAction ? (
+              <>
+                {buttonContent}
+                {React.cloneElement(closeAction as React.ReactElement, { 
+                  onClick: (e: React.MouseEvent) => {
+                    e.stopPropagation();
+                    onSelectSession?.(session.id);
+                  }
+                })}
+              </>
+            ) : buttonContent
+          );
+        })}
+      </div>
+    </ScrollArea>
+  );
+};
--- a/frontend/common/src/components/SessionSidebar.tsx
+++ b/frontend/common/src/components/SessionSidebar.tsx
@ -1,7 +1,7 @@
 import React from 'react';
-import { ScrollArea } from './ui/scroll-area';
 import { AgentSession } from '../utils/types';
 import { getSampleAgentSessions } from '../utils/sample-data';
+import { SessionList } from './SessionList';

 interface SessionSidebarProps {
  onSelectSession?: (sessionId: string) => void;
@ -16,59 +16,17 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
  sessions = getSampleAgentSessions(),
  className = ''
 }) => {
-  // Get status color
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case 'active':
-        return 'bg-blue-500';
-      case 'completed':
-        return 'bg-green-500';
-      case 'error':
-        return 'bg-red-500';
-      default:
-        return 'bg-gray-500';
-    }
-  };
-
-  // Format timestamp
-  const formatDate = (date: Date) => {
-    return date.toLocaleDateString([], { 
-      month: 'short', 
-      day: 'numeric', 
-      hour: '2-digit', 
-      minute: '2-digit' 
-    });
-  };
-
  return (
    <div className={`flex flex-col h-full ${className}`}>
      <div className="p-4 border-b border-border">
        <h3 className="font-medium text-lg">Sessions</h3>
      </div>
-      <ScrollArea className="flex-1">
-        <div className="p-4 space-y-4">
-          {sessions.map((session) => (
-            <button
-              key={session.id}
-              onClick={() => onSelectSession?.(session.id)}
-              className={`w-full flex items-start p-3 text-left rounded-md transition-colors hover:bg-accent/50 ${
-                currentSessionId === session.id ? 'bg-accent' : ''
-              }`}
-            >
-              <div className={`w-3 h-3 rounded-full ${getStatusColor(session.status)} mt-1.5 mr-3 flex-shrink-0`} />
-              <div className="flex-1 min-w-0">
-                <div className="font-medium truncate">{session.name}</div>
-                <div className="text-xs text-muted-foreground mt-1">
-                  {session.steps.length} steps • {formatDate(session.updated)}
-                </div>
-                <div className="text-xs text-muted-foreground mt-1">
-                  <span className="capitalize">{session.status}</span>
-                </div>
-              </div>
-            </button>
-          ))}
-        </div>
-      </ScrollArea>
+      <SessionList
+        sessions={sessions}
+        currentSessionId={currentSessionId}
+        onSelectSession={onSelectSession}
+        className="flex-1"
+      />
    </div>
  );
 };