documentation-hub 5.7.2

package/src/pages/Search.tsx

@@ -0,0 +1,349 @@
+import { useState, useMemo, useEffect, useRef, memo } from 'react';
+import { motion } from 'framer-motion';
+import Fuse from 'fuse.js';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/common/Card';
+import { Input } from '@/components/common/Input';
+import { Button } from '@/components/common/Button';
+import { useSession } from '@/contexts/SessionContext';
+import { cn } from '@/utils/cn';
+import {
+  Search as SearchIcon,
+  Filter,
+  FileText,
+  Calendar,
+  FolderOpen,
+  CheckCircle2,
+  Clock,
+  XCircle,
+  ChevronRight,
+} from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { Document } from '@/types/session';
+
+type StatusFilter = 'all' | 'completed' | 'pending' | 'error';
+type DateRange = 'all' | 'today' | 'week' | 'month' | 'custom';
+
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.05,
+    },
+  },
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 10 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.3,
+    },
+  },
+};
+
+// PERFORMANCE: Wrap in memo to prevent re-renders when parent state changes
+export const Search = memo(function Search() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
+  const [selectedSessionId, setSelectedSessionId] = useState<string>('all');
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [showFilters, setShowFilters] = useState(false);
+
+  const { sessions } = useSession();
+  const navigate = useNavigate();
+  const resultsRef = useRef<HTMLDivElement>(null);
+
+  // Flatten all documents from all sessions
+  const allDocuments = useMemo(() => {
+    const docs: Array<Document & { sessionId: string; sessionName: string }> = [];
+    sessions.forEach((session) => {
+      session.documents.forEach((doc) => {
+        docs.push({
+          ...doc,
+          sessionId: session.id,
+          sessionName: session.name,
+        });
+      });
+    });
+    return docs;
+  }, [sessions]);
+
+  // Configure Fuse.js for fuzzy search
+  const fuse = useMemo(() => {
+    return new Fuse(allDocuments, {
+      keys: [
+        { name: 'name', weight: 2 },
+        { name: 'sessionName', weight: 1 },
+        { name: 'path', weight: 0.5 },
+      ],
+      threshold: 0.4,
+      includeScore: true,
+    });
+  }, [allDocuments]);
+
+  // Filter and search documents
+  const filteredDocuments = useMemo(() => {
+    let results = searchQuery
+      ? fuse.search(searchQuery).map((result) => result.item)
+      : allDocuments;
+
+    // Apply status filter
+    if (statusFilter !== 'all') {
+      results = results.filter((doc) => doc.status === statusFilter);
+    }
+
+    // Apply session filter
+    if (selectedSessionId !== 'all') {
+      results = results.filter((doc) => doc.sessionId === selectedSessionId);
+    }
+
+    return results;
+  }, [searchQuery, statusFilter, selectedSessionId, fuse, allDocuments]);
+
+  // Keyboard navigation
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!filteredDocuments.length) return;
+
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setSelectedIndex((prev) => (prev < filteredDocuments.length - 1 ? prev + 1 : prev));
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));
+      } else if (e.key === 'Enter' && filteredDocuments[selectedIndex]) {
+        e.preventDefault();
+        handleOpenDocument(filteredDocuments[selectedIndex]);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [filteredDocuments, selectedIndex]);
+
+  // Reset selected index when results change
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [filteredDocuments]);
+
+  // Auto-scroll selected item into view
+  useEffect(() => {
+    if (resultsRef.current) {
+      const selectedElement = resultsRef.current.querySelector(`[data-index="${selectedIndex}"]`);
+      if (selectedElement) {
+        selectedElement.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+      }
+    }
+  }, [selectedIndex]);
+
+  const handleOpenDocument = (doc: Document & { sessionId: string; sessionName: string }) => {
+    navigate(`/session/${doc.sessionId}`);
+  };
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'completed':
+        return <CheckCircle2 className="w-4 h-4 text-green-500" />;
+      case 'pending':
+        return <Clock className="w-4 h-4 text-yellow-500" />;
+      case 'error':
+        return <XCircle className="w-4 h-4 text-red-500" />;
+      default:
+        return <FileText className="w-4 h-4 text-muted-foreground" />;
+    }
+  };
+
+  const statusOptions = [
+    { value: 'all' as StatusFilter, label: 'All Status', count: allDocuments.length },
+    {
+      value: 'completed' as StatusFilter,
+      label: 'Completed',
+      count: allDocuments.filter((d) => d.status === 'completed').length,
+    },
+    {
+      value: 'pending' as StatusFilter,
+      label: 'Pending',
+      count: allDocuments.filter((d) => d.status === 'pending').length,
+    },
+    {
+      value: 'error' as StatusFilter,
+      label: 'Error',
+      count: allDocuments.filter((d) => d.status === 'error').length,
+    },
+  ];
+
+  return (
+    <motion.div
+      variants={containerVariants}
+      initial="hidden"
+      animate="visible"
+      className="p-6 space-y-6 max-w-[1200px] mx-auto"
+    >
+      {/* Header */}
+      <motion.div variants={itemVariants}>
+        <h1 className="text-3xl font-bold mb-2 flex items-center gap-2">
+          <SearchIcon className="w-8 h-8" />
+          Search Documents
+        </h1>
+        <p className="text-muted-foreground">
+          Find documents across all sessions with advanced filtering
+        </p>
+      </motion.div>
+
+      {/* Search Input */}
+      <motion.div variants={itemVariants} className="space-y-4">
+        <div className="relative">
+          <Input
+            type="text"
+            placeholder="Search by document name, session, or path..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full pl-10 pr-12 h-12 text-lg"
+            autoFocus
+          />
+          <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
+          <Button
+            variant={showFilters ? 'default' : 'ghost'}
+            size="icon"
+            className="absolute right-2 top-1/2 -translate-y-1/2"
+            onClick={() => setShowFilters(!showFilters)}
+          >
+            <Filter className="w-4 h-4" />
+          </Button>
+        </div>
+
+        {/* Filters */}
+        {showFilters && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: 'auto' }}
+            exit={{ opacity: 0, height: 0 }}
+            className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 bg-muted/30 rounded-lg border border-border"
+          >
+            {/* Status Filter */}
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Status</label>
+              <div className="flex gap-2 flex-wrap">
+                {statusOptions.map((option) => (
+                  <Button
+                    key={option.value}
+                    variant={statusFilter === option.value ? 'default' : 'outline'}
+                    size="sm"
+                    onClick={() => setStatusFilter(option.value)}
+                    className="gap-2"
+                  >
+                    {option.label}
+                    <span className="text-xs opacity-70">({option.count})</span>
+                  </Button>
+                ))}
+              </div>
+            </div>
+
+            {/* Session Filter */}
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Session</label>
+              <select
+                value={selectedSessionId}
+                onChange={(e) => setSelectedSessionId(e.target.value)}
+                className="w-full h-9 px-3 rounded-md border border-input bg-background"
+              >
+                <option value="all">All Sessions</option>
+                {sessions.map((session) => (
+                  <option key={session.id} value={session.id}>
+                    {session.name} ({session.documents.length})
+                  </option>
+                ))}
+              </select>
+            </div>
+          </motion.div>
+        )}
+      </motion.div>
+
+      {/* Results Summary */}
+      <motion.div variants={itemVariants} className="flex items-center justify-between">
+        <p className="text-sm text-foreground">
+          {filteredDocuments.length} {filteredDocuments.length === 1 ? 'result' : 'results'} found
+          {searchQuery && (
+            <span className="ml-1">
+              for "<span className="font-semibold text-foreground">{searchQuery}</span>"
+            </span>
+          )}
+        </p>
+        <p className="text-xs text-muted-foreground">
+          Use <kbd className="px-1.5 py-0.5 bg-muted rounded text-xs">↑</kbd>
+          <kbd className="px-1.5 py-0.5 bg-muted rounded text-xs ml-1">↓</kbd> to navigate,
+          <kbd className="px-1.5 py-0.5 bg-muted rounded text-xs ml-1">Enter</kbd> to open
+        </p>
+      </motion.div>
+
+      {/* Results */}
+      <motion.div variants={itemVariants} className="space-y-2" ref={resultsRef}>
+        {filteredDocuments.length === 0 ? (
+          <Card className="border-dashed">
+            <CardContent className="pt-12 pb-12 text-center">
+              <SearchIcon className="w-12 h-12 mx-auto mb-4 text-muted-foreground opacity-50" />
+              <p className="text-lg font-medium mb-1">No documents found</p>
+              <p className="text-sm text-muted-foreground">
+                Try adjusting your search query or filters
+              </p>
+            </CardContent>
+          </Card>
+        ) : (
+          filteredDocuments.map((doc, index) => (
+            <motion.div
+              key={`${doc.sessionId}-${doc.id}`}
+              data-index={index}
+              variants={itemVariants}
+              onClick={() => handleOpenDocument(doc)}
+              onMouseEnter={() => setSelectedIndex(index)}
+              className={cn(
+                'p-4 rounded-lg border cursor-pointer transition-all duration-150',
+                'hover:border-primary hover:bg-accent/50',
+                selectedIndex === index
+                  ? 'border-primary bg-accent/50 shadow-xs'
+                  : 'border-border bg-card'
+              )}
+            >
+              <div className="flex items-start justify-between gap-4">
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-1">
+                    {getStatusIcon(doc.status)}
+                    <h3 className="font-medium truncate">{doc.name}</h3>
+                  </div>
+                  <div className="flex items-center gap-4 text-sm text-foreground">
+                    <span className="flex items-center gap-1">
+                      <FolderOpen className="w-3.5 h-3.5" />
+                      {doc.sessionName}
+                    </span>
+                    {doc.processedAt && (
+                      <span className="flex items-center gap-1">
+                        <Calendar className="w-3.5 h-3.5" />
+                        {new Date(doc.processedAt).toLocaleDateString()}
+                      </span>
+                    )}
+                  </div>
+                  <p className="text-xs text-muted-foreground mt-1 truncate">{doc.path}</p>
+                </div>
+                <ChevronRight
+                  className={cn(
+                    'w-5 h-5 text-muted-foreground transition-transform',
+                    selectedIndex === index && 'text-primary translate-x-1'
+                  )}
+                />
+              </div>
+            </motion.div>
+          ))
+        )}
+      </motion.div>
+    </motion.div>
+  );
+});

package/src/pages/Sessions.tsx

@@ -0,0 +1,285 @@
+import { Button } from '@/components/common/Button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/common/Card';
+import { Input } from '@/components/common/Input';
+import { SessionManager } from '@/components/sessions/SessionManager';
+import { useSession } from '@/contexts/SessionContext';
+import { cn } from '@/utils/cn';
+import { motion } from 'framer-motion';
+import { Calendar, Clock, FileText, FolderOpen, Grid, List, Plus, Trash2 } from 'lucide-react';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.1,
+    },
+  },
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.5,
+    },
+  },
+};
+
+export function Sessions() {
+  const navigate = useNavigate();
+  const { sessions, loadSession, deleteSession } = useSession();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
+  const [showSessionManager, setShowSessionManager] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState<string | null>(null);
+
+  const filteredSessions = sessions.filter((session) =>
+    session.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const handleSessionClick = (sessionId: string) => {
+    loadSession(sessionId);
+    navigate(`/session/${sessionId}`);
+  };
+
+  const handleDeleteSession = (sessionId: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setShowDeleteConfirm(sessionId);
+  };
+
+  const confirmDelete = (sessionId: string) => {
+    deleteSession(sessionId);
+    setShowDeleteConfirm(null);
+  };
+
+  const formatDate = (date: Date) => {
+    return new Intl.DateTimeFormat('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    }).format(date);
+  };
+
+  const handleNewSession = () => {
+    setShowSessionManager(true);
+  };
+
+  const handleSessionCreated = (sessionId: string) => {
+    navigate(`/session/${sessionId}`);
+  };
+
+  return (
+    <motion.div
+      className="p-6 space-y-6"
+      variants={containerVariants}
+      initial="hidden"
+      animate="visible"
+    >
+      <motion.div
+        className="flex flex-col sm:flex-row gap-4 justify-between"
+        variants={itemVariants}
+      >
+        <Input
+          type="search"
+          placeholder="Search sessions..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          onClear={() => setSearchQuery('')}
+          className="max-w-md"
+        />
+
+        <div className="flex gap-2">
+          <div className="flex rounded-md border border-border">
+            <button
+              onClick={() => setViewMode('grid')}
+              className={cn(
+                'p-2 rounded-l-md transition-colors',
+                viewMode === 'grid' ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'
+              )}
+              aria-label="Grid view"
+            >
+              <Grid className="w-4 h-4" />
+            </button>
+            <button
+              onClick={() => setViewMode('list')}
+              className={cn(
+                'p-2 rounded-r-md transition-colors',
+                viewMode === 'list' ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'
+              )}
+              aria-label="List view"
+            >
+              <List className="w-4 h-4" />
+            </button>
+          </div>
+          <Button icon={<Plus className="w-4 h-4" />} onClick={handleNewSession}>
+            New Session
+          </Button>
+        </div>
+      </motion.div>
+
+      <motion.div
+        className={cn(
+          'grid gap-4',
+          viewMode === 'grid' ? 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3' : 'grid-cols-1'
+        )}
+        variants={containerVariants}
+      >
+        {filteredSessions.map((session) => (
+          <motion.div key={session.id} variants={itemVariants}>
+            <Card
+              interactive
+              variant="bordered"
+              className="cursor-pointer relative group"
+              onClick={() => handleSessionClick(session.id)}
+            >
+              <CardHeader>
+                <div className="flex items-start justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                      <FolderOpen className="w-5 h-5 text-primary" />
+                    </div>
+                    <div>
+                      <CardTitle className="text-xl font-semibold">{session.name}</CardTitle>
+                      <span
+                        className={cn(
+                          'text-xs px-2 py-1 rounded-full mt-1 inline-block',
+                          session.status === 'active'
+                            ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+                            : 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400'
+                        )}
+                      >
+                        {session.status}
+                      </span>
+                    </div>
+                  </div>
+                  <div className="opacity-0 group-hover:opacity-100 transition-opacity">
+                    <button
+                      onClick={(e) => handleDeleteSession(session.id, e)}
+                      className="p-1 hover:bg-muted rounded"
+                    >
+                      <Trash2 className="w-4 h-4 text-muted-foreground hover:text-destructive" />
+                    </button>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-3">
+                  <div className="grid grid-cols-2 gap-2 text-base">
+                    <div className="flex items-center gap-1 text-foreground">
+                      <FileText className="w-3 h-3" />
+                      <span>{session.documents.length} documents</span>
+                    </div>
+                    <div className="flex items-center gap-1 text-foreground">
+                      <Clock className="w-3 h-3" />
+                      <span>{session.stats.timeSaved}m saved</span>
+                    </div>
+                  </div>
+
+                  <div className="pt-2 border-t border-border">
+                    <div className="flex items-center justify-between text-sm text-muted-foreground">
+                      <div className="flex items-center gap-1">
+                        <Calendar className="w-3 h-3" />
+                        <span>Created {formatDate(session.createdAt)}</span>
+                      </div>
+                    </div>
+                    <div className="flex items-center justify-between text-sm text-muted-foreground mt-1">
+                      <span>Last modified {formatDate(session.lastModified)}</span>
+                    </div>
+                  </div>
+
+                  {viewMode === 'list' && (
+                    <div className="pt-2 grid grid-cols-4 gap-2 text-sm">
+                      <div>
+                        <p className="text-muted-foreground">Processed</p>
+                        <p className="font-medium">{session.stats.documentsProcessed}</p>
+                      </div>
+                      <div>
+                        <p className="text-muted-foreground">Links</p>
+                        <p className="font-medium">{session.stats.hyperlinksChecked}</p>
+                      </div>
+                      <div>
+                        <p className="text-muted-foreground">Feedback</p>
+                        <p className="font-medium">{session.stats.feedbackImported}</p>
+                      </div>
+                      <div>
+                        <p className="text-muted-foreground">Time</p>
+                        <p className="font-medium">{session.stats.timeSaved}m</p>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Delete Confirmation Dialog */}
+            {showDeleteConfirm === session.id && (
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                className="fixed inset-0 bg-background/80 backdrop-blur-xs z-50 flex items-center justify-center p-4"
+                onClick={() => setShowDeleteConfirm(null)}
+              >
+                <motion.div
+                  initial={{ scale: 0.95 }}
+                  animate={{ scale: 1 }}
+                  className="bg-card rounded-lg shadow-xl border border-border p-6 max-w-sm"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <h3 className="text-lg font-semibold mb-2">Delete Session</h3>
+                  <p className="text-sm text-muted-foreground mb-4">
+                    Are you sure you want to delete "{session.name}"? This action cannot be undone.
+                  </p>
+                  <div className="flex gap-2 justify-end">
+                    <Button variant="outline" size="sm" onClick={() => setShowDeleteConfirm(null)}>
+                      Cancel
+                    </Button>
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                      onClick={() => confirmDelete(session.id)}
+                    >
+                      Delete
+                    </Button>
+                  </div>
+                </motion.div>
+              </motion.div>
+            )}
+          </motion.div>
+        ))}
+      </motion.div>
+
+      {filteredSessions.length === 0 && (
+        <motion.div variants={itemVariants} className="text-center py-12">
+          <FolderOpen className="w-12 h-12 mx-auto text-muted-foreground mb-4" />
+          <h3 className="text-lg font-medium mb-2">
+            {searchQuery ? 'No sessions found' : 'No sessions yet'}
+          </h3>
+          <p className="text-muted-foreground mb-4">
+            {searchQuery
+              ? 'Try adjusting your search query'
+              : 'Create your first session to start processing documents'}
+          </p>
+          {!searchQuery && (
+            <Button onClick={handleNewSession} icon={<Plus className="w-4 h-4" />}>
+              Create First Session
+            </Button>
+          )}
+        </motion.div>
+      )}
+
+      {showSessionManager && (
+        <SessionManager
+          mode="new"
+          onClose={() => setShowSessionManager(false)}
+          onSessionCreated={handleSessionCreated}
+          onSessionLoaded={handleSessionCreated}
+        />
+      )}
+    </motion.div>
+  );
+}