diff --git a/archon-ui-main/src/components/layout/MainLayout.tsx b/archon-ui-main/src/components/layout/MainLayout.tsx index 73fcc1de..ffa31792 100644 --- a/archon-ui-main/src/components/layout/MainLayout.tsx +++ b/archon-ui-main/src/components/layout/MainLayout.tsx @@ -129,11 +129,12 @@ export function MainLayout({ children, className }: MainLayoutProps) { }, [isBackendError, backendError, showToast]); return ( -
+
{/* TEMPORARY: Show backend startup error using old component */} {backendStartupFailed && } - {/* Fixed full-page background grid that doesn't scroll */} + {/* Fixed full-page background - grid pattern on dark background */} +
{/* Floating Navigation */} @@ -143,7 +144,7 @@ export function MainLayout({ children, className }: MainLayoutProps) {
{/* Main Content Area - matches old layout exactly */} -
+
{children}
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 ( - +