jason/fabdash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
jasonMPM
2026-03-05 15:19:38 -06:00
committed by GitHub
parent 9ec74eaeca
commit 05ff3006f4
4 changed files with 293 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
frontend/src/components/Projects/ProjectCard.jsx
View File

@@ -1,6 +1,11 @@
import { useState } from 'react'
import Badge from '../UI/Badge'
import { formatDate } from '../../utils/dateHelpers'
import useFocusStore from '../../store/useFocusStore'
import useProjectStore from '../../store/useProjectStore'
import { deleteDeliverable } from '../../api/deliverables'
import DeliverableModal from '../Deliverables/DeliverableModal'
import ContextMenu from '../UI/ContextMenu'
function DriveIcon() {
return (
@@ -16,35 +21,74 @@ function DriveIcon() {
}
export default function ProjectCard({ project, onEdit, onDelete }) {
const openFocus = useFocusStore(s => s.openFocus)
const openFocus = useFocusStore(s => s.openFocus)
const { removeDeliverable } = useProjectStore()
const [delModal, setDelModal] = useState({ open: false, deliverable: null })
const [ctxMenu, setCtxMenu] = useState(null)
const openDelEdit = (d) => setDelModal({ open: true, deliverable: d })
const handleRowCtx = (e, d) => {
e.preventDefault()
e.stopPropagation()
setCtxMenu({
x: e.clientX, y: e.clientY,
items: [
{ icon: '✎', label: 'Edit Deliverable', action: () => openDelEdit(d) },
{ icon: '◎', label: 'Open Focus View', action: () => openFocus(project.id, d.id) },
{ separator: true },
{
icon: '✕', label: 'Delete Deliverable', danger: true,
action: async () => {
if (window.confirm(`Delete "${d.title}"?`)) {
await deleteDeliverable(d.id)
removeDeliverable(d.id)
}
},
},
],
})
}
const handleHeaderCtx = (e) => {
e.preventDefault()
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') }] : []),
{ separator: true },
{ icon: '✕', label: 'Delete Project', danger: true, action: () => onDelete(project) },
],
})
}
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">
{/* Header row */}
<div className="flex items-start justify-between mb-1.5">
{/* 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 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">✎</button>
<button onClick={() => onDelete(project)} className="text-text-muted hover:text-red-400 p-1 transition-colors text-sm">✕</button>
<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>
@@ -55,8 +99,14 @@ export default function ProjectCard({ project, onEdit, onDelete }) {
{/* Deliverable rows */}
<div className="space-y-1">
{(project.deliverables || []).map(d => (
<button key={d.id} onClick={() => openFocus(project.id, d.id)}
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">
<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>
@@ -70,6 +120,18 @@ export default function ProjectCard({ project, onEdit, onDelete }) {
</div>
</div>
{/* Local deliverable edit modal */}
<DeliverableModal
isOpen={delModal.open}
onClose={() => setDelModal({ open: false, deliverable: null })}
deliverable={delModal.deliverable}
projectId={project.id}
/>
{ctxMenu && (
<ContextMenu x={ctxMenu.x} y={ctxMenu.y} items={ctxMenu.items} onClose={() => setCtxMenu(null)} />
)}
</div>
)
}