documentation-hub 5.7.2

package/src/components/sessions/TabContainer.tsx

@@ -0,0 +1,151 @@
+import { useState, useEffect, useRef } from 'react';
+import { motion } from 'framer-motion';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from '@/utils/cn';
+
+interface Tab {
+  id: string;
+  label: string;
+  content: React.ReactNode;
+}
+
+interface TabContainerProps {
+  tabs: Tab[];
+  defaultTab?: string;
+  className?: string;
+  headerActions?: Record<string, React.ReactNode>; // Action buttons per tab ID
+  activeTabId?: string; // Controlled active tab
+  onTabChange?: (tabId: string) => void; // Callback when tab changes
+}
+
+export function TabContainer({ tabs, defaultTab, className, headerActions, activeTabId, onTabChange }: TabContainerProps) {
+  const [internalActiveTab, setInternalActiveTab] = useState(defaultTab || tabs[0]?.id);
+
+  // Use controlled activeTabId if provided, otherwise use internal state
+  const activeTab = activeTabId !== undefined ? activeTabId : internalActiveTab;
+
+  const handleTabChange = (tabId: string) => {
+    if (activeTabId === undefined) {
+      setInternalActiveTab(tabId);
+    }
+    onTabChange?.(tabId);
+  };
+  const [showLeftArrow, setShowLeftArrow] = useState(false);
+  const [showRightArrow, setShowRightArrow] = useState(false);
+  const tabsRef = useRef<HTMLDivElement>(null);
+  const activeTabData = tabs.find((tab) => tab.id === activeTab);
+
+  // Check for overflow and update arrow visibility
+  useEffect(() => {
+    const container = tabsRef.current;
+    if (!container) return;
+
+    const checkScroll = () => {
+      const { scrollLeft, scrollWidth, clientWidth } = container;
+      setShowLeftArrow(scrollLeft > 0);
+      setShowRightArrow(scrollLeft < scrollWidth - clientWidth - 1);
+    };
+
+    checkScroll();
+    container.addEventListener('scroll', checkScroll);
+    window.addEventListener('resize', checkScroll);
+
+    return () => {
+      container.removeEventListener('scroll', checkScroll);
+      window.removeEventListener('resize', checkScroll);
+    };
+  }, [tabs]);
+
+  const scrollLeft = () => {
+    tabsRef.current?.scrollBy({ left: -200, behavior: 'smooth' });
+  };
+
+  const scrollRight = () => {
+    tabsRef.current?.scrollBy({ left: 200, behavior: 'smooth' });
+  };
+
+  return (
+    <div className={cn('w-full', className)}>
+      {/* Tab Navigation - Sticky */}
+      <div className="sticky top-0 bg-background z-20 flex items-center border-b border-border">
+        {/* Left Scroll Button */}
+        {showLeftArrow && (
+          <button
+            onClick={scrollLeft}
+            className="flex-shrink-0 px-2 py-2.5 text-muted-foreground hover:text-foreground transition-colors"
+            aria-label="Scroll tabs left"
+          >
+            <ChevronLeft className="w-4 h-4" />
+          </button>
+        )}
+
+        {/* Scrollable Tabs Container */}
+        <div
+          ref={tabsRef}
+          className="flex gap-1 px-4 overflow-x-auto flex-1"
+          style={{
+            scrollbarWidth: 'none',
+            msOverflowStyle: 'none',
+          }}
+        >
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => handleTabChange(tab.id)}
+              className={cn(
+                'relative px-4 py-2.5 text-sm font-medium transition-all whitespace-nowrap',
+                'hover:text-foreground',
+                activeTab === tab.id ? 'text-foreground' : 'text-muted-foreground'
+              )}
+            >
+              {tab.label}
+              {activeTab === tab.id && (
+                <motion.div
+                  layoutId="activeTab"
+                  className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary"
+                  initial={false}
+                  transition={{
+                    type: 'spring',
+                    stiffness: 500,
+                    damping: 30,
+                  }}
+                />
+              )}
+            </button>
+          ))}
+        </div>
+
+        {/* Right Scroll Button */}
+        {showRightArrow && (
+          <button
+            onClick={scrollRight}
+            className="flex-shrink-0 px-2 py-2.5 text-muted-foreground hover:text-foreground transition-colors"
+            aria-label="Scroll tabs right"
+          >
+            <ChevronRight className="w-4 h-4" />
+          </button>
+        )}
+
+        {/* Header Actions for Active Tab */}
+        {headerActions?.[activeTab] && (
+          <div className="flex-shrink-0 px-4 py-2 border-l border-border">
+            {headerActions[activeTab]}
+          </div>
+        )}
+      </div>
+
+      {/* Tab Content */}
+      <div className="p-4">
+        <motion.div
+          key={activeTab}
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -10 }}
+          transition={{ duration: 0.2 }}
+        >
+          {activeTabData?.content}
+        </motion.div>
+      </div>
+    </div>
+  );
+}

package/src/components/sessions/VirtualSessionList.tsx

@@ -0,0 +1,157 @@
+import { memo, useCallback, CSSProperties } from 'react';
+// @ts-ignore - react-window exports these despite TypeScript not recognizing them
+import { FixedSizeList as List } from 'react-window';
+import { motion } from 'framer-motion';
+import { FolderOpen, FileText, Clock, CheckCircle, AlertCircle } from 'lucide-react';
+import { Session } from '@/types/session';
+import { cn } from '@/utils/cn';
+import { useNavigate } from 'react-router-dom';
+
+interface VirtualSessionListProps {
+  sessions: Session[];
+  height: number;
+  onSessionClick?: (session: Session) => void;
+  selectedSessionId?: string;
+}
+
+interface SessionRowProps {
+  index: number;
+  style: CSSProperties;
+  data: {
+    sessions: Session[];
+    onSessionClick?: (session: Session) => void;
+    selectedSessionId?: string;
+    navigate: ReturnType<typeof useNavigate>;
+  };
+}
+
+/**
+ * Individual session row component
+ * Memoized to prevent unnecessary re-renders
+ */
+const SessionRow = memo(({ index, style, data }: SessionRowProps) => {
+  const session = data.sessions[index];
+  const isSelected = session.id === data.selectedSessionId;
+
+  const handleClick = useCallback(() => {
+    if (data.onSessionClick) {
+      data.onSessionClick(session);
+    }
+    data.navigate(`/session/${session.id}`);
+  }, [session, data]);
+
+  const getStatusIcon = () => {
+    switch (session.status) {
+      case 'active':
+        return <FolderOpen className="w-4 h-4 text-primary" />;
+      case 'closed':
+        return <CheckCircle className="w-4 h-4 text-muted-foreground" />;
+      default:
+        return <Clock className="w-4 h-4 text-muted-foreground" />;
+    }
+  };
+
+  const documentCount = session.documents?.length || 0;
+  const processedCount = session.documents?.filter((d) => d.status === 'completed').length || 0;
+
+  return (
+    <div style={style}>
+      <motion.div
+        whileHover={{ scale: 1.01 }}
+        whileTap={{ scale: 0.99 }}
+        onClick={handleClick}
+        className={cn(
+          'mx-2 p-4 rounded-lg border cursor-pointer transition-all',
+          'hover:shadow-md hover:border-primary/30',
+          isSelected && 'border-primary bg-primary/5',
+          !isSelected && 'border-border bg-card'
+        )}
+      >
+        <div className="flex items-start justify-between">
+          <div className="flex-1">
+            <div className="flex items-center gap-2">
+              {getStatusIcon()}
+              <h3 className="font-semibold text-sm">{session.name}</h3>
+              {session.status === 'active' && (
+                <span className="px-2 py-0.5 text-xs bg-primary/10 text-primary rounded-full">
+                  Active
+                </span>
+              )}
+            </div>
+
+            <div className="mt-2 flex items-center gap-4 text-xs text-muted-foreground">
+              <div className="flex items-center gap-1">
+                <FileText className="w-3 h-3" />
+                <span>{documentCount} documents</span>
+              </div>
+
+              {processedCount > 0 && (
+                <div className="flex items-center gap-1">
+                  <CheckCircle className="w-3 h-3" />
+                  <span>{processedCount} processed</span>
+                </div>
+              )}
+
+              <div className="flex items-center gap-1">
+                <Clock className="w-3 h-3" />
+                <span>{new Date(session.lastModified).toLocaleDateString()}</span>
+              </div>
+            </div>
+
+            {/* Progress bar for processed documents */}
+            {documentCount > 0 && (
+              <div className="mt-2 w-full bg-muted rounded-full h-1.5">
+                <div
+                  className="bg-primary h-1.5 rounded-full transition-all"
+                  style={{ width: `${(processedCount / documentCount) * 100}%` }}
+                />
+              </div>
+            )}
+          </div>
+
+          <div className="text-right text-xs text-muted-foreground">
+            {session.stats?.timeSaved && (
+              <div>{Math.round(session.stats.timeSaved / 60)} min saved</div>
+            )}
+          </div>
+        </div>
+      </motion.div>
+    </div>
+  );
+});
+
+SessionRow.displayName = 'SessionRow';
+
+/**
+ * Virtual scrolling session list component
+ * Efficiently renders large lists of sessions
+ */
+export const VirtualSessionList = memo(function VirtualSessionList({
+  sessions,
+  height,
+  onSessionClick,
+  selectedSessionId,
+}: VirtualSessionListProps) {
+  const navigate = useNavigate();
+
+  // Data passed to each row
+  const itemData = {
+    sessions,
+    onSessionClick,
+    selectedSessionId,
+    navigate,
+  };
+
+  return (
+    <List
+      height={height}
+      itemCount={sessions.length}
+      itemSize={120} // Height of each session row
+      width="100%"
+      itemData={itemData}
+      className="scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent"
+    >
+      {SessionRow}
+    </List>
+  );
+});