From a860b27848fc5a49682ce89d0af326306f1a2919 Mon Sep 17 00:00:00 2001 From: sean-eskerium Date: Fri, 10 Oct 2025 14:24:09 -0400 Subject: [PATCH] Refactor the UI and add Documents back. --- .../projects/components/ProjectCard.tsx | 48 +-- .../projects/components/ProjectHeader.tsx | 79 ++++- .../projects/components/ProjectList.tsx | 2 +- .../features/projects/documents/DocsTab.tsx | 231 ++++++++------ .../documents/components/AddDocumentModal.tsx | 133 ++++++++ .../documents/components/DocumentCard.tsx | 177 ++++++----- .../documents/components/DocumentViewer.tsx | 296 ++++++++++++++---- .../projects/documents/hooks/index.ts | 4 +- .../documents/hooks/useDocumentQueries.ts | 118 ++++++- .../documents/services/documentService.ts | 70 +++++ .../src/features/projects/tasks/TasksTab.tsx | 25 +- .../tasks/components/KanbanColumn.tsx | 71 ++--- .../projects/tasks/components/TaskCard.tsx | 44 +-- .../projects/tasks/utils/task-styles.tsx | 16 +- .../projects/tasks/views/BoardView.tsx | 2 +- .../projects/tasks/views/TableView.tsx | 29 +- .../features/projects/views/ProjectsView.tsx | 265 +++++++++++++--- .../src/features/ui/primitives/index.ts | 1 + 18 files changed, 1177 insertions(+), 434 deletions(-) create mode 100644 archon-ui-main/src/features/projects/documents/components/AddDocumentModal.tsx create mode 100644 archon-ui-main/src/features/projects/documents/services/documentService.ts diff --git a/archon-ui-main/src/features/projects/components/ProjectCard.tsx b/archon-ui-main/src/features/projects/components/ProjectCard.tsx index a6b62349..b89fdce8 100644 --- a/archon-ui-main/src/features/projects/components/ProjectCard.tsx +++ b/archon-ui-main/src/features/projects/components/ProjectCard.tsx @@ -1,8 +1,8 @@ -import { motion } from "framer-motion"; import { Activity, CheckCircle2, ListTodo } from "lucide-react"; import type React from "react"; import { isOptimistic } from "@/features/shared/utils/optimistic"; import { OptimisticIndicator } from "../../ui/primitives/OptimisticIndicator"; +import { SelectableCard } from "../../ui/primitives/selectable-card"; import { cn } from "../../ui/primitives/styles"; import type { Project } from "../types"; import { ProjectCardActions } from "./ProjectCardActions"; @@ -33,46 +33,24 @@ export const ProjectCard: React.FC = ({ const optimistic = isOptimistic(project); return ( - { - if (e.key === "Enter" || e.key === " ") { - e.preventDefault(); - onSelect(project); - } - }} - onClick={() => onSelect(project)} + onSelect(project)} + blur="xl" + transparency="light" + size="none" className={cn( - "relative rounded-xl backdrop-blur-md w-72 min-h-[180px] cursor-pointer overflow-visible group flex flex-col", - "transition-all duration-300", - "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-zinc-900", + "w-72 min-h-[180px] flex flex-col shrink-0", project.pinned ? "bg-gradient-to-b from-purple-100/80 via-purple-50/30 to-purple-100/50 dark:from-purple-900/30 dark:via-purple-900/20 dark:to-purple-900/10" : isSelected ? "bg-gradient-to-b from-white/70 via-purple-50/20 to-white/50 dark:from-white/5 dark:via-purple-900/5 dark:to-black/20" : "bg-gradient-to-b from-white/80 to-white/60 dark:from-white/10 dark:to-black/30", - "border", - project.pinned - ? "border-purple-500/80 dark:border-purple-500/80 shadow-[0_0_15px_rgba(168,85,247,0.3)]" - : isSelected - ? "border-purple-400/60 dark:border-purple-500/60" - : "border-gray-200 dark:border-zinc-800/50", - isSelected - ? "shadow-[0_0_15px_rgba(168,85,247,0.4),0_0_10px_rgba(147,51,234,0.3)] dark:shadow-[0_0_20px_rgba(168,85,247,0.5),0_0_15px_rgba(147,51,234,0.4)]" - : "shadow-[0_10px_30px_-15px_rgba(0,0,0,0.1)] dark:shadow-[0_10px_30px_-15px_rgba(0,0,0,0.7)]", - "hover:shadow-[0_15px_40px_-15px_rgba(0,0,0,0.2)] dark:hover:shadow-[0_15px_40px_-15px_rgba(0,0,0,0.9)]", - isSelected ? "scale-[1.02]" : "hover:scale-[1.01]", // Use scale instead of translate to avoid clipping optimistic && "opacity-80 ring-1 ring-cyan-400/30", )} > - {/* Subtle aurora glow effect for selected card */} - {isSelected && ( -
-
-
- )} {/* Main content area with padding */}
@@ -94,7 +72,7 @@ export const ProjectCard: React.FC = ({
{/* Task count pills */} -
+
{/* Todo pill */}
= ({
{/* Pinned indicator badge */} {project.pinned ? ( -
+
DEFAULT
) : ( @@ -275,6 +253,6 @@ export const ProjectCard: React.FC = ({ }} />
- + ); }; diff --git a/archon-ui-main/src/features/projects/components/ProjectHeader.tsx b/archon-ui-main/src/features/projects/components/ProjectHeader.tsx index 995792e0..563035d7 100644 --- a/archon-ui-main/src/features/projects/components/ProjectHeader.tsx +++ b/archon-ui-main/src/features/projects/components/ProjectHeader.tsx @@ -1,10 +1,18 @@ import { motion } from "framer-motion"; -import { Plus } from "lucide-react"; +import { LayoutGrid, List, Plus, Search, X } from "lucide-react"; import type React from "react"; +import { ReactNode } from "react"; import { Button } from "../../ui/primitives/button"; +import { Input } from "../../ui/primitives/input"; +import { cn } from "../../ui/primitives/styles"; interface ProjectHeaderProps { onNewProject: () => void; + layoutMode?: "horizontal" | "sidebar"; + onLayoutModeChange?: (mode: "horizontal" | "sidebar") => void; + rightContent?: ReactNode; + searchQuery?: string; + onSearchChange?: (query: string) => void; } const titleVariants = { @@ -25,7 +33,14 @@ const itemVariants = { }, }; -export const ProjectHeader: React.FC = ({ onNewProject }) => { +export const ProjectHeader: React.FC = ({ + onNewProject, + layoutMode, + onLayoutModeChange, + rightContent, + searchQuery, + onSearchChange, +}) => { return ( = ({ onNewProject }) => /> Projects - +
+ {/* Search input */} + {searchQuery !== undefined && onSearchChange && ( +
+ + onSearchChange(e.target.value)} + className="pl-9 pr-8" + aria-label="Search projects" + /> + {searchQuery && ( + + )} +
+ )} + {/* Layout toggle - show if mode and change handler provided */} + {layoutMode && onLayoutModeChange && ( +
+ + +
+ )} + {rightContent} + +
); }; diff --git a/archon-ui-main/src/features/projects/components/ProjectList.tsx b/archon-ui-main/src/features/projects/components/ProjectList.tsx index 7b4b769e..aa4d0c58 100644 --- a/archon-ui-main/src/features/projects/components/ProjectList.tsx +++ b/archon-ui-main/src/features/projects/components/ProjectList.tsx @@ -97,7 +97,7 @@ export const ProjectList: React.FC = ({ } return ( - +