Add files via upload

frontend/src/api/projects.js

@@ -1,7 +1,11 @@
 import axios from 'axios'
+
 const B = '/api'
+
 export const fetchProjects   = ()       => axios.get(`${B}/projects`).then(r => r.data)
 export const fetchProject    = (id)     => axios.get(`${B}/projects/${id}`).then(r => r.data)
 export const createProject   = (data)   => axios.post(`${B}/projects`, data).then(r => r.data)
 export const updateProject   = (id, d)  => axios.patch(`${B}/projects/${id}`, d).then(r => r.data)
 export const deleteProject   = (id)     => axios.delete(`${B}/projects/${id}`).then(r => r.data)
+export const archiveProject  = (id)     => axios.patch(`${B}/projects/${id}/archive`).then(r => r.data)
+export const unarchiveProject = (id)    => axios.patch(`${B}/projects/${id}/unarchive`).then(r => r.data)

frontend/src/components/Projects/ProjectCard.jsx

@@ -4,27 +4,23 @@ import { formatDate } from '../../utils/dateHelpers'
 import useFocusStore from '../../store/useFocusStore'
 import useProjectStore from '../../store/useProjectStore'
 import { deleteDeliverable } from '../../api/deliverables'
+import { archiveProject, unarchiveProject } from '../../api/projects'
 import DeliverableModal from '../Deliverables/DeliverableModal'
 import ContextMenu from '../UI/ContextMenu'
 
 function DriveIcon() {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.3 78" className="w-3.5 h-3.5">
-      <path d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z" fill="#0066da"/>
-      <path d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z" fill="#00ac47"/>
-      <path d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z" fill="#ea4335"/>
-      <path d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z" fill="#00832d"/>
-      <path d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z" fill="#2684fc"/>
-      <path d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 27h27.45c0-1.55-.4-3.1-1.2-4.5z" fill="#ffba00"/>
+    <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M4.43 20.933l2.893-5.01H22l-2.893 5.01H4.43zm1.55-5.01L2.55 10.08 9.163 2h4.903l-6.613 8.08 3.043 5.843H5.98zm8.753 0l-3.043-5.843L17.987 2H22l-4.297 6.89 3.043 5.843h-6.013z"/>
     </svg>
   )
 }
 
-export default function ProjectCard({ project, onEdit, onDelete }) {
-  const openFocus        = useFocusStore(s => s.openFocus)
-  const { removeDeliverable } = useProjectStore()
-  const [delModal,  setDelModal]  = useState({ open: false, deliverable: null })
-  const [ctxMenu,   setCtxMenu]   = useState(null)
+export default function ProjectCard({ project, onEdit, onDelete, onArchiveToggle }) {
+  const openFocus = useFocusStore(s => s.openFocus)
+  const { removeDeliverable, updateProject } = useProjectStore()
+  const [delModal, setDelModal] = useState({ open: false, deliverable: null })
+  const [ctxMenu,  setCtxMenu]  = useState(null)
 
   const openDelEdit = (d) => setDelModal({ open: true, deliverable: d })
 
@@ -52,11 +48,25 @@ export default function ProjectCard({ project, onEdit, onDelete }) {
 
   const handleHeaderCtx = (e) => {
     e.preventDefault()
+    const isArchived = !!project.archived_at
     setCtxMenu({
       x: e.clientX, y: e.clientY,
       items: [
-        { icon: '✎', label: 'Edit Project',  action: () => onEdit(project) },
-        ...(project.drive_url ? [{ icon: '⬡', label: 'Open Drive', action: () => window.open(project.drive_url, '_blank') }] : []),
+        { icon: '✎', label: 'Edit Project', action: () => onEdit(project) },
+        ...(project.drive_url
+          ? [{ icon: '⬡', label: 'Open Drive', action: () => window.open(project.drive_url, '_blank') }]
+          : []),
+        {
+          icon: isArchived ? '↺' : '⏸',
+          label: isArchived ? 'Unarchive Project' : 'Archive Project',
+          action: async () => {
+            const updated = isArchived
+              ? await unarchiveProject(project.id)
+              : await archiveProject(project.id)
+            updateProject(updated)
+            onArchiveToggle?.()
+          },
+        },
         { separator: true },
         { icon: '✕', label: 'Delete Project', danger: true, action: () => onDelete(project) },
       ],
@@ -64,61 +74,68 @@ export default function ProjectCard({ project, onEdit, onDelete }) {
   }
 
   return (
-    <div className="bg-surface-elevated border border-surface-border rounded-lg overflow-hidden transition-all hover:border-gold/20">
-      <div className="h-1 w-full" style={{ backgroundColor: project.color }} />
-      <div className="p-3">
+    <div className={`rounded-xl border bg-surface-raised overflow-hidden ${
+      project.archived_at ? 'opacity-60 border-surface-border' : 'border-surface-border'
+    }`}>
 
-        {/* Header — double-click to edit, right-click for menu */}
-        <div
-          className="flex items-start justify-between mb-1.5 cursor-default"
-          onDoubleClick={() => onEdit(project)}
-          onContextMenu={handleHeaderCtx}
-          title="Double-click to edit project"
-        >
-          <div className="flex items-center gap-2 min-w-0">
-            <div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: project.color }} />
-            <span className="text-sm font-semibold text-text-primary truncate">{project.name}</span>
-          </div>
-          <div className="flex items-center gap-0.5 flex-shrink-0 ml-1">
-            {project.drive_url && (
-              <a href={project.drive_url} target="_blank" rel="noopener noreferrer"
-                title="Open Google Drive folder" onClick={e => e.stopPropagation()}
-                className="flex items-center gap-1 text-[10px] text-text-muted hover:text-text-primary bg-surface hover:bg-surface-border/40 border border-surface-border hover:border-gold/30 rounded px-1.5 py-1 transition-all mr-1">
-                <DriveIcon /><span>Drive</span>
-              </a>
-            )}
-            <button onClick={() => onEdit(project)}   className="text-text-muted hover:text-gold p-1 transition-colors text-sm" title="Edit project">✎</button>
-            <button onClick={() => onDelete(project)} className="text-text-muted hover:text-red-400 p-1 transition-colors text-sm" title="Delete project">✕</button>
-          </div>
-        </div>
+      {/* Header */}
+      <div
+        className="flex items-center gap-2 px-3 py-2.5 cursor-pointer hover:bg-surface-elevated/40 transition-colors"
+        onDoubleClick={() => onEdit(project)}
+        onContextMenu={handleHeaderCtx}
+        title="Double-click to edit project"
+      >
+        <div className="w-3 h-3 rounded-full flex-shrink-0" style={{ backgroundColor: project.color }} />
+        <span className="font-semibold text-sm text-text-primary truncate flex-1">{project.name}</span>
 
-        {project.description && (
-          <p className="text-xs text-text-muted mb-2 line-clamp-1">{project.description}</p>
+        {project.archived_at && (
+          <span className="text-[9px] font-semibold tracking-widest uppercase text-amber-400/70 bg-amber-400/10 border border-amber-400/20 rounded px-1.5 py-0.5 flex-shrink-0">
+            Archived
+          </span>
         )}
 
-        {/* Deliverable rows */}
-        <div className="space-y-1">
-          {(project.deliverables || []).map(d => (
-            <button
-              key={d.id}
-              onClick={() => openFocus(project.id, d.id)}
-              onDoubleClick={(e) => { e.stopPropagation(); openDelEdit(d) }}
-              onContextMenu={(e) => handleRowCtx(e, d)}
-              title="Click: Focus View · Double-click: Edit · Right-click: Menu"
-              className="w-full flex items-center justify-between text-xs bg-surface rounded px-2 py-1.5 border border-transparent hover:border-gold/20 hover:bg-surface-border/20 transition-all text-left group"
-            >
-              <span className="text-text-muted group-hover:text-text-primary truncate flex-1 pr-2">{d.title}</span>
-              <div className="flex items-center gap-1.5 flex-shrink-0">
-                <span className="text-text-muted/60 font-mono text-[9px]">{formatDate(d.due_date)}</span>
-                <Badge status={d.status} />
-              </div>
-            </button>
-          ))}
-          {(!project.deliverables || project.deliverables.length === 0) && (
-            <p className="text-[11px] text-text-muted/40 italic text-center py-1">No deliverables</p>
-          )}
-        </div>
+        {project.drive_url && (
+          <a
+            href={project.drive_url}
+            target="_blank"
+            rel="noreferrer"
+            onClick={e => e.stopPropagation()}
+            className="flex items-center gap-1 text-[10px] text-text-muted hover:text-text-primary bg-surface hover:bg-surface-border/40 border border-surface-border hover:border-gold/30 rounded px-1.5 py-1 transition-all mr-1"
+          >
+            <DriveIcon /> Drive
+          </a>
+        )}
 
+        <button onClick={() => onEdit(project)}    className="text-text-muted hover:text-gold p-1 transition-colors text-sm" title="Edit project">✎</button>
+        <button onClick={() => onDelete(project)}  className="text-text-muted hover:text-red-400 p-1 transition-colors text-sm" title="Delete project">✕</button>
+      </div>
+
+      {project.description && (
+        <p className="text-text-muted text-xs px-3 pb-1.5 -mt-1 truncate">{project.description}</p>
+      )}
+
+      {/* Deliverable rows */}
+      <div className="px-2 pb-2 space-y-1">
+        {(project.deliverables || []).map(d => (
+          <button
+            key={d.id}
+            onClick={() => openFocus(project.id, d.id)}
+            onDoubleClick={e => { e.stopPropagation(); openDelEdit(d) }}
+            onContextMenu={e => handleRowCtx(e, d)}
+            title="Click: Focus View · Double-click: Edit · Right-click: Menu"
+            className="w-full flex items-center justify-between text-xs bg-surface rounded px-2 py-1.5 border border-transparent hover:border-gold/20 hover:bg-surface-border/20 transition-all text-left group"
+          >
+            <span className="truncate text-text-primary group-hover:text-white transition-colors">{d.title}</span>
+            <div className="flex items-center gap-1.5 flex-shrink-0 ml-2">
+              <span className="text-text-muted/60 text-[10px]">{formatDate(d.due_date)}</span>
+              <Badge status={d.status} />
+            </div>
+          </button>
+        ))}
+
+        {(!project.deliverables || project.deliverables.length === 0) && (
+          <p className="text-text-muted/40 text-xs px-1 py-1">No deliverables</p>
+        )}
       </div>
 
       {/* Local deliverable edit modal */}

frontend/src/components/Projects/ProjectList.jsx

@@ -5,28 +5,58 @@ import Button from '../UI/Button'
 import AgendaPanel from '../Calendar/AgendaPanel'
 import useProjectStore from '../../store/useProjectStore'
 import useUIStore from '../../store/useUIStore'
-import { deleteProject } from '../../api/projects'
+import { deleteProject, fetchProjects } from '../../api/projects'
+
+const VIEW_OPTIONS = [
+  { key: 'active',   label: 'Active'   },
+  { key: 'archived', label: 'Archived' },
+  { key: 'all',      label: 'All'      },
+]
 
 export default function ProjectList({ onRegisterNewProject }) {
-  const { projects, removeProject }   = useProjectStore()
+  const { projects, removeProject, setProjects } = useProjectStore()
   const { sidebarTab, setSidebarTab } = useUIStore()
-  const [showModal, setShowModal]     = useState(false)
-  const [editing,   setEditing]       = useState(null)
+  const [showModal, setShowModal] = useState(false)
+  const [editing,   setEditing]   = useState(null)
+  const [projectView, setProjectView] = useState('active')
+  const [search, setSearch] = useState('')
 
-  useEffect(() => { onRegisterNewProject?.(() => setShowModal(true)) }, [onRegisterNewProject])
+  useEffect(() => {
+    onRegisterNewProject?.(() => setShowModal(true))
+  }, [onRegisterNewProject])
+
+  const refreshProjects = async () => {
+    const data = await fetchProjects()
+    setProjects(data)
+  }
 
   const handleEdit   = (p) => { setEditing(p); setShowModal(true) }
   const handleDelete = async (p) => {
     if (window.confirm(`Delete "${p.name}" and all its deliverables?`)) {
-      await deleteProject(p.id); removeProject(p.id)
+      await deleteProject(p.id)
+      removeProject(p.id)
     }
   }
   const handleClose = () => { setShowModal(false); setEditing(null) }
 
+  const q = search.trim().toLowerCase()
+  const visibleProjects = (projects || [])
+    .filter(p => {
+      const isArchived = !!p.archived_at
+      if (projectView === 'active')   return !isArchived
+      if (projectView === 'archived') return  isArchived
+      return true
+    })
+    .filter(p => {
+      if (!q) return true
+      const hay = `${p.name || ''} ${p.description || ''}`.toLowerCase()
+      return hay.includes(q)
+    })
+
   return (
     <div className="flex flex-col h-full">
 
-      {/* Header — taller to give logo more presence */}
+      {/* Header */}
       <div className="flex items-center gap-3 px-4 py-4 border-b border-surface-border flex-shrink-0 pl-10">
         <img
           src="/logo.png"
@@ -48,7 +78,11 @@ export default function ProjectList({ onRegisterNewProject }) {
       <div className="flex border-b border-surface-border flex-shrink-0">
         {[['projects','Projects'],['agenda','Upcoming']].map(([key, label]) => (
           <button key={key} onClick={() => setSidebarTab(key)}
-            className={`flex-1 py-2 text-xs font-semibold transition-colors ${sidebarTab === key ? 'text-gold border-b-2 border-gold' : 'text-text-muted hover:text-text-primary'}`}>
+            className={`flex-1 py-2 text-xs font-semibold transition-colors ${
+              sidebarTab === key
+                ? 'text-gold border-b-2 border-gold'
+                : 'text-text-muted hover:text-text-primary'
+            }`}>
             {label}
           </button>
         ))}
@@ -58,7 +92,41 @@ export default function ProjectList({ onRegisterNewProject }) {
       <div className="flex-1 overflow-y-auto">
         {sidebarTab === 'projects' ? (
           <div className="p-3 space-y-2">
-            {projects.length === 0 ? (
+
+            {/* View toggle + Search + Refresh */}
+            <div className="flex items-center gap-2 pb-1">
+              <div className="flex bg-surface-elevated border border-surface-border rounded-lg overflow-hidden flex-shrink-0">
+                {VIEW_OPTIONS.map(v => (
+                  <button
+                    key={v.key}
+                    onClick={() => setProjectView(v.key)}
+                    className={`px-2.5 py-1.5 text-[10px] font-semibold transition-colors ${
+                      projectView === v.key
+                        ? 'bg-gold text-surface'
+                        : 'text-text-muted hover:text-text-primary'
+                    }`}
+                    title={`Show ${v.label.toLowerCase()} projects`}
+                  >
+                    {v.label}
+                  </button>
+                ))}
+              </div>
+              <input
+                value={search}
+                onChange={e => setSearch(e.target.value)}
+                placeholder="Search projects…"
+                className="flex-1 min-w-0 bg-surface-elevated border border-surface-border rounded-lg px-2.5 py-1.5 text-xs text-text-primary placeholder:text-text-muted/50 outline-none focus:border-gold/40 transition-colors"
+              />
+              <button
+                onClick={refreshProjects}
+                className="flex-shrink-0 text-[10px] px-2 py-1.5 rounded-lg border border-surface-border bg-surface-elevated text-text-muted hover:text-text-primary hover:border-gold/30 transition-colors"
+                title="Refresh projects"
+              >
+                ↺
+              </button>
+            </div>
+
+            {visibleProjects.length === 0 ? (
               <div className="flex flex-col items-center justify-center py-10 px-4 text-center">
                 <div className="opacity-20 mb-3">
                   <svg width="56" height="56" viewBox="0 0 56 56" fill="none">
@@ -70,14 +138,16 @@ export default function ProjectList({ onRegisterNewProject }) {
                     <line x1="17" y1="39" x2="30" y2="39" stroke="#C9A84C" strokeWidth="1.5" strokeDasharray="4 2.5"/>
                   </svg>
                 </div>
-                <p className="text-text-muted text-sm font-medium">No projects yet</p>
+                <p className="text-text-muted text-sm font-medium">
+                  {q ? 'No matching projects' : projectView === 'archived' ? 'No archived projects' : 'No projects yet'}
+                </p>
                 <p className="text-text-muted/50 text-xs mt-1">
                   Press <kbd className="bg-surface-border px-1.5 py-0.5 rounded text-[10px] font-mono">N</kbd> or click + Project
                 </p>
               </div>
             ) : (
-              projects.map(p => (
-                <ProjectCard key={p.id} project={p} onEdit={handleEdit} onDelete={handleDelete} />
+              visibleProjects.map(p => (
+                <ProjectCard key={p.id} project={p} onEdit={handleEdit} onDelete={handleDelete} onArchiveToggle={refreshProjects} />
               ))
             )}
           </div>