Hide Archived Productions

app/(dashboard)/projects/page.tsx

@@ -7,10 +7,16 @@ import { Input } from "@/components/ui/input";
 import { ProjectCard } from "@/components/projects/ProjectCard";
 import { NewProjectDialog } from "@/components/projects/NewProjectDialog";
 import { Plus, Search, Loader2 } from "lucide-react";
+import { HIDE_ARCHIVED_KEY } from "@/components/settings/HideArchivedToggle";
 
 export default function ProjectsPage() {
   const [search, setSearch] = useState("");
   const [showNew, setShowNew] = useState(false);
+  const [hideArchived, setHideArchived] = useState(false);
+
+  useEffect(() => {
+    setHideArchived(localStorage.getItem(HIDE_ARCHIVED_KEY) === "1");
+  }, []);
 
   const { data, isLoading } = useQuery({
     queryKey: ["projects", search],
@@ -35,6 +41,8 @@ export default function ProjectsPage() {
   const projects = data?.projects ?? [];
   const clients = clientsData?.clients ?? [];
 
+  const visibleProjects = hideArchived ? projects.filter((p: any) => p.status !== "ARCHIVED") : projects;
+
   const SCROLL_KEY = 'projects-scroll';
 
   useEffect(() => {
@@ -56,6 +64,9 @@ export default function ProjectsPage() {
           <h1 className="text-3xl font-bold text-white">Projects</h1>
           <p className="text-zinc-400 mt-1">
             {projects.length} project{projects.length !== 1 ? "s" : ""}
+          {hideArchived && projects.length !== visibleProjects.length && (
+            <span className="text-zinc-600 ml-1">({projects.length - visibleProjects.length} archived hidden)</span>
+          )}
           </p>
         </div>
         <Button onClick={() => setShowNew(true)} className="gap-2">
@@ -94,7 +105,7 @@ export default function ProjectsPage() {
         </div>
       ) : (
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-          {projects.map((project) => (
+          {visibleProjects.map((project: any) => (
             <div key={project.id} onClick={saveScroll}>
               <ProjectCard project={project} />
             </div>