init: push source
This commit is contained in:
Mufeed VH
198
src/components/SessionList.tsx
Normal file
198
src/components/SessionList.tsx
Normal file
@@ -0,0 +1,198 @@
|
||||
import React, { useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { FileText, ArrowLeft, Calendar, Clock, MessageSquare } from "lucide-react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Pagination } from "@/components/ui/pagination";
|
||||
import { ClaudeMemoriesDropdown } from "@/components/ClaudeMemoriesDropdown";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { formatUnixTimestamp, formatISOTimestamp, truncateText, getFirstLine } from "@/lib/date-utils";
|
||||
import type { Session, ClaudeMdFile } from "@/lib/api";
|
||||
|
||||
interface SessionListProps {
|
||||
/**
|
||||
* Array of sessions to display
|
||||
*/
|
||||
sessions: Session[];
|
||||
/**
|
||||
* The current project path being viewed
|
||||
*/
|
||||
projectPath: string;
|
||||
/**
|
||||
* Callback to go back to project list
|
||||
*/
|
||||
onBack: () => void;
|
||||
/**
|
||||
* Callback when a session is clicked
|
||||
*/
|
||||
onSessionClick?: (session: Session) => void;
|
||||
/**
|
||||
* Callback when a CLAUDE.md file should be edited
|
||||
*/
|
||||
onEditClaudeFile?: (file: ClaudeMdFile) => void;
|
||||
/**
|
||||
* Optional className for styling
|
||||
*/
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const ITEMS_PER_PAGE = 5;
|
||||
|
||||
/**
|
||||
* SessionList component - Displays paginated sessions for a specific project
|
||||
*
|
||||
* @example
|
||||
* <SessionList
|
||||
* sessions={sessions}
|
||||
* projectPath="/Users/example/project"
|
||||
* onBack={() => setSelectedProject(null)}
|
||||
* onSessionClick={(session) => console.log('Selected session:', session)}
|
||||
* />
|
||||
*/
|
||||
export const SessionList: React.FC<SessionListProps> = ({
|
||||
sessions,
|
||||
projectPath,
|
||||
onBack,
|
||||
onSessionClick,
|
||||
onEditClaudeFile,
|
||||
className,
|
||||
}) => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
|
||||
// Calculate pagination
|
||||
const totalPages = Math.ceil(sessions.length / ITEMS_PER_PAGE);
|
||||
const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
|
||||
const endIndex = startIndex + ITEMS_PER_PAGE;
|
||||
const currentSessions = sessions.slice(startIndex, endIndex);
|
||||
|
||||
// Reset to page 1 if sessions change
|
||||
React.useEffect(() => {
|
||||
setCurrentPage(1);
|
||||
}, [sessions.length]);
|
||||
|
||||
return (
|
||||
<div className={cn("space-y-4", className)}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="flex items-center space-x-3"
|
||||
>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={onBack}
|
||||
className="h-8 w-8"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h2 className="text-base font-medium truncate">{projectPath}</h2>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{sessions.length} session{sessions.length !== 1 ? 's' : ''}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* CLAUDE.md Memories Dropdown */}
|
||||
{onEditClaudeFile && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3, delay: 0.1 }}
|
||||
>
|
||||
<ClaudeMemoriesDropdown
|
||||
projectPath={projectPath}
|
||||
onEditFile={onEditClaudeFile}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
<AnimatePresence mode="popLayout">
|
||||
<div className="space-y-2">
|
||||
{currentSessions.map((session, index) => (
|
||||
<motion.div
|
||||
key={session.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
transition={{
|
||||
duration: 0.3,
|
||||
delay: index * 0.05,
|
||||
ease: [0.4, 0, 0.2, 1],
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
className={cn(
|
||||
"transition-all hover:shadow-md hover:scale-[1.01] active:scale-[0.99] cursor-pointer",
|
||||
session.todo_data && "border-l-4 border-l-primary"
|
||||
)}
|
||||
onClick={() => {
|
||||
// Emit a special event for Claude Code session navigation
|
||||
const event = new CustomEvent('claude-session-selected', {
|
||||
detail: { session, projectPath }
|
||||
});
|
||||
window.dispatchEvent(event);
|
||||
onSessionClick?.(session);
|
||||
}}
|
||||
>
|
||||
<CardContent className="p-3">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start space-x-3 flex-1 min-w-0">
|
||||
<FileText className="h-4 w-4 text-muted-foreground mt-0.5 flex-shrink-0" />
|
||||
<div className="space-y-1 flex-1 min-w-0">
|
||||
<p className="font-mono text-xs text-muted-foreground">{session.id}</p>
|
||||
|
||||
{/* First message preview */}
|
||||
{session.first_message && (
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center space-x-1 text-xs text-muted-foreground">
|
||||
<MessageSquare className="h-3 w-3" />
|
||||
<span>First message:</span>
|
||||
</div>
|
||||
<p className="text-xs line-clamp-2 text-foreground/80">
|
||||
{truncateText(getFirstLine(session.first_message), 100)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Metadata */}
|
||||
<div className="flex items-center space-x-3 text-xs text-muted-foreground">
|
||||
{/* Message timestamp if available, otherwise file creation time */}
|
||||
<div className="flex items-center space-x-1">
|
||||
<Clock className="h-3 w-3" />
|
||||
<span>
|
||||
{session.message_timestamp
|
||||
? formatISOTimestamp(session.message_timestamp)
|
||||
: formatUnixTimestamp(session.created_at)
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{session.todo_data && (
|
||||
<div className="flex items-center space-x-1">
|
||||
<Calendar className="h-3 w-3" />
|
||||
<span>Has todo</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</AnimatePresence>
|
||||
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
onPageChange={setCurrentPage}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user