From 0f4765dcf8012446c13f08bc9f5e72dc58b37ba0 Mon Sep 17 00:00:00 2001 From: Louis Knight-Webb Date: Sat, 21 Jun 2025 18:00:28 +0100 Subject: [PATCH] Update panel --- .../src/components/tasks/TaskDetailsPanel.tsx | 48 ++----------- frontend/src/lib/responsive-config.ts | 70 +++++++++++++++++++ frontend/src/pages/project-tasks.tsx | 26 ++----- 3 files changed, 81 insertions(+), 63 deletions(-) create mode 100644 frontend/src/lib/responsive-config.ts diff --git a/frontend/src/components/tasks/TaskDetailsPanel.tsx b/frontend/src/components/tasks/TaskDetailsPanel.tsx index 32e3d6c3..26c267b5 100644 --- a/frontend/src/components/tasks/TaskDetailsPanel.tsx +++ b/frontend/src/components/tasks/TaskDetailsPanel.tsx @@ -6,8 +6,6 @@ import { Clock, FileText, Code, - Maximize2, - Minimize2, } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; @@ -22,6 +20,7 @@ import { } from "@/components/ui/select"; import { makeRequest } from "@/lib/api"; +import { getTaskPanelClasses, getBackdropClasses } from "@/lib/responsive-config"; import type { TaskStatus, TaskAttempt, @@ -39,8 +38,6 @@ interface TaskDetailsPanelProps { projectId: string; isOpen: boolean; onClose: () => void; - viewMode: "overlay" | "sideBySide"; - onViewModeChange: (mode: "overlay" | "sideBySide") => void; } const statusLabels: Record = { @@ -153,8 +150,6 @@ export function TaskDetailsPanel({ projectId, isOpen, onClose, - viewMode, - onViewModeChange, }: TaskDetailsPanelProps) { const [taskAttempts, setTaskAttempts] = useState([]); const [selectedAttempt, setSelectedAttempt] = useState( @@ -342,24 +337,15 @@ export function TaskDetailsPanel({ <> {isOpen && ( <> - {/* Backdrop - only in overlay mode */} - {viewMode === "overlay" && ( -
- )} + {/* Backdrop - only on smaller screens (overlay mode) */} +
{/* Panel */}
{/* Header */} @@ -388,26 +374,6 @@ export function TaskDetailsPanel({
- diff --git a/frontend/src/lib/responsive-config.ts b/frontend/src/lib/responsive-config.ts new file mode 100644 index 00000000..4043b2cb --- /dev/null +++ b/frontend/src/lib/responsive-config.ts @@ -0,0 +1,70 @@ +/** + * Centralized responsive configuration for TaskDetailsPanel + * Adjust these values to change when the panel switches between overlay and side-by-side modes + */ + +// The breakpoint at which we switch from overlay to side-by-side mode +// Change this value to adjust when the panel switches to side-by-side mode: +// 'sm' = 640px, 'md' = 768px, 'lg' = 1024px, 'xl' = 1280px, '2xl' = 1536px +export const PANEL_SIDE_BY_SIDE_BREAKPOINT = "xl" as const; + +// Panel widths for different screen sizes (in overlay mode) +export const PANEL_WIDTHS = { + base: "w-full", // < 640px + sm: "sm:w-[560px]", // 640px+ + md: "md:w-[600px]", // 768px+ + lg: "lg:w-[650px]", // 1024px+ (smaller to start transitioning) + xl: "xl:w-[750px]", // 1280px+ + "2xl": "2xl:w-[800px]", // 1536px+ (side-by-side mode) +} as const; + +// Generate classes for TaskDetailsPanel +export const getTaskPanelClasses = () => { + const overlayClasses = [ + "fixed inset-y-0 right-0 z-50", + PANEL_WIDTHS.base, + PANEL_WIDTHS.sm, + PANEL_WIDTHS.md, + PANEL_WIDTHS.lg, + PANEL_WIDTHS.xl, + ].join(" "); + + const sideBySideClasses = [ + `${PANEL_SIDE_BY_SIDE_BREAKPOINT}:relative`, + `${PANEL_SIDE_BY_SIDE_BREAKPOINT}:inset-auto`, + `${PANEL_SIDE_BY_SIDE_BREAKPOINT}:z-auto`, + `${PANEL_SIDE_BY_SIDE_BREAKPOINT}:h-full`, + `${PANEL_SIDE_BY_SIDE_BREAKPOINT}:w-[800px]`, + ].join(" "); + + return `${overlayClasses} ${sideBySideClasses} bg-background border-l shadow-lg overflow-hidden`; +}; + +// Generate classes for backdrop (only show in overlay mode) +export const getBackdropClasses = () => { + return `fixed inset-0 z-40 bg-background/80 backdrop-blur-sm ${PANEL_SIDE_BY_SIDE_BREAKPOINT}:hidden`; +}; + +// Generate classes for main container (enable flex layout in side-by-side mode) +export const getMainContainerClasses = (isPanelOpen: boolean) => { + if (!isPanelOpen) return "w-full"; + + return `w-full ${PANEL_SIDE_BY_SIDE_BREAKPOINT}:flex ${PANEL_SIDE_BY_SIDE_BREAKPOINT}:h-full`; +}; + +// Generate classes for kanban section +export const getKanbanSectionClasses = (isPanelOpen: boolean) => { + if (!isPanelOpen) return "w-full transition-all duration-300"; + + const overlayClasses = "w-full opacity-50 pointer-events-none"; + const sideBySideClasses = [ + `${PANEL_SIDE_BY_SIDE_BREAKPOINT}:flex-1`, + `${PANEL_SIDE_BY_SIDE_BREAKPOINT}:min-w-0`, + `${PANEL_SIDE_BY_SIDE_BREAKPOINT}:h-full`, + `${PANEL_SIDE_BY_SIDE_BREAKPOINT}:overflow-y-auto`, + `${PANEL_SIDE_BY_SIDE_BREAKPOINT}:opacity-100`, + `${PANEL_SIDE_BY_SIDE_BREAKPOINT}:pointer-events-auto`, + ].join(" "); + + return `${overlayClasses} ${sideBySideClasses} transition-all duration-300`; +}; diff --git a/frontend/src/pages/project-tasks.tsx b/frontend/src/pages/project-tasks.tsx index 3ed92714..74378538 100644 --- a/frontend/src/pages/project-tasks.tsx +++ b/frontend/src/pages/project-tasks.tsx @@ -6,6 +6,7 @@ import { ArrowLeft, Plus } from "lucide-react"; import { makeRequest } from "@/lib/api"; import { TaskFormDialog } from "@/components/tasks/TaskFormDialog"; import { useKeyboardShortcuts } from "@/lib/keyboard-shortcuts"; +import { getMainContainerClasses, getKanbanSectionClasses } from "@/lib/responsive-config"; import { TaskKanbanBoard } from "@/components/tasks/TaskKanbanBoard"; import { TaskDetailsPanel } from "@/components/tasks/TaskDetailsPanel"; @@ -41,7 +42,6 @@ export function ProjectTasks() { // Panel state const [selectedTask, setSelectedTask] = useState(null); const [isPanelOpen, setIsPanelOpen] = useState(false); - const [viewMode, setViewMode] = useState<"overlay" | "sideBySide">("overlay"); // Define task creation handler const handleCreateNewTask = () => { @@ -237,9 +237,7 @@ export function ProjectTasks() { setSelectedTask(null); }; - const handleViewModeChange = (mode: "overlay" | "sideBySide") => { - setViewMode(mode); - }; + const handleDragEnd = async (event: DragEndEvent) => { const { active, over } = event; @@ -301,25 +299,11 @@ export function ProjectTasks() { return (
{/* Left Column - Kanban Section */}
{/* Header */} @@ -396,8 +380,6 @@ export function ProjectTasks() { projectId={projectId!} isOpen={isPanelOpen} onClose={handleClosePanel} - viewMode={viewMode} - onViewModeChange={handleViewModeChange} /> )}