445 lines
24 KiB
TypeScript
445 lines
24 KiB
TypeScript
'use client'
|
||
|
||
import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||
import { useSession } from 'next-auth/react'
|
||
import { BookmarkDetailSheet } from '@/components/bookmark-detail-sheet'
|
||
import { Badge } from '@/components/ui/badge'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Input } from '@/components/ui/input'
|
||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
|
||
import { ExternalLink, Calendar, GripVertical, Plus, MoreHorizontal, Pencil, Trash2, ArrowLeft, ArrowRight, Check, X } from 'lucide-react'
|
||
import { toast } from 'sonner'
|
||
import type { Bookmark } from '@/components/app-shell'
|
||
import { fetchBookmarks } from '@/lib/bookmarks'
|
||
import { invalidateReference } from '@/lib/reference-data'
|
||
import { cn } from '@/lib/utils'
|
||
|
||
type Column = { id: string; label: string; color: string; position: number; key: string | null }
|
||
type CardDrop = { columnId: string; index: number }
|
||
const PALETTE = ['#64748b', '#3b82f6', '#f59e0b', '#22c55e', '#8b5cf6', '#ec4899', '#ef4444', '#14b8a6']
|
||
|
||
function columnFor(b: Bookmark, cols: Column[]) {
|
||
const explicit = (b as any).kanbanColumnId as string | null
|
||
if (explicit && cols.some(c => c.id === explicit)) return explicit
|
||
return cols.find(c => c.key === b.kanbanStatus)?.id ?? cols[0]?.id
|
||
}
|
||
|
||
function sortCards(a: Bookmark, b: Bookmark, currentUserId?: string) {
|
||
// Owned cards keep their persisted board order. Shared cards are read-only
|
||
// and sort after owned ones so they cannot disturb the owner's positions.
|
||
if (currentUserId) {
|
||
const aOwned = a.ownerId === currentUserId
|
||
const bOwned = b.ownerId === currentUserId
|
||
if (aOwned !== bOwned) return aOwned ? -1 : 1
|
||
}
|
||
const ap = a.kanbanPosition ?? 0
|
||
const bp = b.kanbanPosition ?? 0
|
||
if (ap !== bp) return ap - bp
|
||
return b.updatedAt.localeCompare(a.updatedAt) || b.id.localeCompare(a.id)
|
||
}
|
||
|
||
export function KanbanClient() {
|
||
const { data: session } = useSession()
|
||
const currentUserId = session?.user?.id
|
||
const [bookmarks, setBookmarks] = useState<Bookmark[]>([])
|
||
const [columns, setColumns] = useState<Column[]>([])
|
||
const [loading, setLoading] = useState(true)
|
||
const [selectedBookmark, setSelectedBookmark] = useState<Bookmark | null>(null)
|
||
const [draggedId, setDraggedId] = useState<string | null>(null)
|
||
const [draggedColumnId, setDraggedColumnId] = useState<string | null>(null)
|
||
const [cardDrop, setCardDrop] = useState<CardDrop | null>(null)
|
||
const [columnDropId, setColumnDropId] = useState<string | null>(null)
|
||
const [editingId, setEditingId] = useState<string | null>(null)
|
||
const [editLabel, setEditLabel] = useState('')
|
||
const [adding, setAdding] = useState(false)
|
||
const [newLabel, setNewLabel] = useState('')
|
||
const suppressClick = useRef(false)
|
||
|
||
const load = useCallback(async () => {
|
||
setLoading(true)
|
||
try {
|
||
const [bookmarks, cRes] = await Promise.all([fetchBookmarks(), fetch('/api/kanban/columns')])
|
||
setBookmarks(bookmarks)
|
||
if (cRes.ok) setColumns(await cRes.json())
|
||
} catch (e) { console.error('Kanban load failed', e) }
|
||
setLoading(false)
|
||
}, [])
|
||
|
||
useEffect(() => { const timer = setTimeout(load, 0); window.addEventListener('computer:bookmarks-changed', load); return () => { clearTimeout(timer); window.removeEventListener('computer:bookmarks-changed', load) } }, [load])
|
||
|
||
const isOwned = useCallback((b: Bookmark) => !currentUserId || b.ownerId === currentUserId, [currentUserId])
|
||
|
||
const cardsByColumn = useMemo(() => {
|
||
const groups: Record<string, Bookmark[]> = {}
|
||
for (const col of columns) groups[col.id] = []
|
||
for (const b of bookmarks) {
|
||
const columnId = columnFor(b, columns)
|
||
if (columnId && groups[columnId]) groups[columnId].push(b)
|
||
}
|
||
for (const list of Object.values(groups)) list.sort((a, b) => sortCards(a, b, currentUserId))
|
||
return groups
|
||
}, [bookmarks, columns, currentUserId])
|
||
|
||
const clearDrag = useCallback(() => {
|
||
setDraggedId(null)
|
||
setDraggedColumnId(null)
|
||
setCardDrop(null)
|
||
setColumnDropId(null)
|
||
}, [])
|
||
|
||
const finishDrag = useCallback(() => {
|
||
clearDrag()
|
||
// Drag gestures can still emit a click in some browsers; do not open the
|
||
// detail sheet when the pointer was dragging a card.
|
||
setTimeout(() => { suppressClick.current = false }, 0)
|
||
}, [clearDrag])
|
||
|
||
const saveColumnOrder = useCallback(async (next: Column[]) => {
|
||
setColumns(next)
|
||
const res = await fetch('/api/kanban/columns', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ order: next.map(c => c.id) }) })
|
||
if (res.ok) invalidateReference('columns')
|
||
else { toast.error('Could not reorder columns'); load() }
|
||
}, [load])
|
||
|
||
const reorderColumn = useCallback((sourceId: string, targetId: string) => {
|
||
if (sourceId === targetId) return
|
||
const from = columns.findIndex(c => c.id === sourceId)
|
||
const to = columns.findIndex(c => c.id === targetId)
|
||
if (from < 0 || to < 0) return
|
||
const next = [...columns]
|
||
const [moved] = next.splice(from, 1)
|
||
// Drop before the target column; this is the least surprising direction
|
||
// for both leftward and rightward moves.
|
||
next.splice(from < to ? to - 1 : to, 0, moved)
|
||
saveColumnOrder(next)
|
||
}, [columns, saveColumnOrder])
|
||
|
||
// Position among the owner's cards, ignoring read-only shared cards and the
|
||
// card being dragged. The server normalizes the target column in this order.
|
||
const ownedDropIndex = useCallback((columnId: string, rawIndex: number, movedId: string) => {
|
||
const list = cardsByColumn[columnId] ?? []
|
||
let index = 0
|
||
for (let i = 0; i < Math.min(rawIndex, list.length); i++) {
|
||
const card = list[i]
|
||
if (card.id === movedId || !isOwned(card)) continue
|
||
index++
|
||
}
|
||
return index
|
||
}, [cardsByColumn, isOwned])
|
||
|
||
const moveCardTo = useCallback(async (bookmarkId: string, columnId: string, position: number) => {
|
||
const current = bookmarks.find(b => b.id === bookmarkId)
|
||
if (!current) return
|
||
if (currentUserId && current.ownerId !== currentUserId) {
|
||
toast.error('Only the owner can move a shared bookmark')
|
||
return
|
||
}
|
||
const target = (cardsByColumn[columnId] ?? []).filter(b => b.id !== bookmarkId && isOwned(b))
|
||
const clamped = Math.max(0, Math.min(position, target.length))
|
||
const optimistic = [...target]
|
||
optimistic.splice(clamped, 0, { ...current, kanbanColumnId: columnId })
|
||
const positions = new Map(optimistic.map((b, i) => [b.id, i]))
|
||
setBookmarks(prev => prev.map(b => {
|
||
if (b.id === bookmarkId) return { ...b, kanbanColumnId: columnId, kanbanPosition: clamped }
|
||
const next = positions.get(b.id)
|
||
return next === undefined ? b : { ...b, kanbanPosition: next }
|
||
}))
|
||
try {
|
||
const res = await fetch(`/api/kanban/cards/${bookmarkId}`, {
|
||
method: 'PUT', headers: { 'Content-Type': 'application/json' },
|
||
// Optimistic concurrency (review CR-04): the move carries the card's
|
||
// version; a card edited or moved elsewhere is a 409, and the board
|
||
// reloads the true state instead of silently clobbering it.
|
||
body: JSON.stringify({ columnId, position: clamped, version: current.version ?? 0 }),
|
||
})
|
||
if (res.status === 409) {
|
||
toast.error('This bookmark was changed elsewhere — the board reloaded without your move')
|
||
load()
|
||
return
|
||
}
|
||
if (!res.ok) throw new Error(await res.text())
|
||
const saved = await res.json().catch(() => null)
|
||
if (saved) setBookmarks(prev => prev.map(b => b.id === bookmarkId ? saved : b))
|
||
} catch (e) { console.error(e); toast.error('Failed to move'); load() }
|
||
}, [bookmarks, cardsByColumn, currentUserId, isOwned, load])
|
||
|
||
const addColumn = async () => {
|
||
if (!newLabel.trim()) return
|
||
const res = await fetch('/api/kanban/columns', {
|
||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ label: newLabel, color: PALETTE[columns.length % PALETTE.length] }),
|
||
})
|
||
if (res.ok) { const col = await res.json(); setColumns(c => [...c, col]); setNewLabel(''); setAdding(false); invalidateReference('columns') }
|
||
else toast.error('Could not add column')
|
||
}
|
||
|
||
const saveColumn = async (id: string, data: Partial<Column>) => {
|
||
const res = await fetch(`/api/kanban/columns/${id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) })
|
||
if (res.ok) { const col = await res.json(); setColumns(cs => cs.map(c => c.id === id ? col : c)); invalidateReference('columns') }
|
||
else toast.error('Could not update column')
|
||
setEditingId(null)
|
||
}
|
||
|
||
const deleteColumn = async (col: Column) => {
|
||
if (columns.length <= 1) { toast.error('A board needs at least one column'); return }
|
||
const dest = columns.find(c => c.id !== col.id)
|
||
if (!confirm(`Delete "${col.label}"? Its bookmarks will move to "${dest?.label}".`)) return
|
||
const res = await fetch(`/api/kanban/columns/${col.id}`, { method: 'DELETE' })
|
||
if (res.ok) { toast.success('Column deleted'); invalidateReference('columns'); load() } else toast.error((await res.json())?.error ?? 'Could not delete')
|
||
}
|
||
|
||
const moveColumn = (index: number, dir: -1 | 1) => {
|
||
const next = [...columns]
|
||
const j = index + dir
|
||
if (j < 0 || j >= next.length) return
|
||
;[next[index], next[j]] = [next[j], next[index]]
|
||
saveColumnOrder(next)
|
||
}
|
||
|
||
// Keyboard alternative to drag-and-drop: focus a card, Arrow Left/Right
|
||
// moves it to the adjacent column.
|
||
const moveCard = (b: Bookmark, dir: -1 | 1) => {
|
||
if (!isOwned(b)) { toast.error('Only the owner can move a shared bookmark'); return }
|
||
const current = columnFor(b, columns)
|
||
const idx = columns.findIndex(c => c.id === current)
|
||
const j = idx + dir
|
||
if (idx < 0 || j < 0 || j >= columns.length) return
|
||
moveCardTo(b.id, columns[j].id, cardsByColumn[columns[j].id]?.filter(c => c.id !== b.id && isOwned(c)).length ?? 0)
|
||
toast.success(`Moved to ${columns[j].label}`)
|
||
}
|
||
|
||
const handleCardDragOver = (e: React.DragEvent<HTMLElement>, col: Column, index: number) => {
|
||
if (!draggedId || draggedColumnId) return
|
||
e.preventDefault()
|
||
e.stopPropagation()
|
||
e.dataTransfer.dropEffect = 'move'
|
||
const rect = e.currentTarget.getBoundingClientRect()
|
||
const before = e.clientY < rect.top + rect.height / 2
|
||
setCardDrop({ columnId: col.id, index: before ? index : index + 1 })
|
||
}
|
||
|
||
const handleColumnDragOver = (e: React.DragEvent<HTMLElement>, col: Column) => {
|
||
if (draggedColumnId) {
|
||
if (draggedColumnId === col.id) return
|
||
e.preventDefault()
|
||
e.dataTransfer.dropEffect = 'move'
|
||
setColumnDropId(col.id)
|
||
setCardDrop(null)
|
||
return
|
||
}
|
||
if (!draggedId) return
|
||
e.preventDefault()
|
||
e.dataTransfer.dropEffect = 'move'
|
||
// The pointer is over the column body, not a card: append to the end.
|
||
setCardDrop(prev => prev?.columnId === col.id ? prev : { columnId: col.id, index: (cardsByColumn[col.id] ?? []).length })
|
||
}
|
||
|
||
const handleColumnDrop = (e: React.DragEvent<HTMLElement>, col: Column) => {
|
||
e.preventDefault()
|
||
if (draggedColumnId) {
|
||
reorderColumn(draggedColumnId, col.id)
|
||
finishDrag()
|
||
return
|
||
}
|
||
if (draggedId) {
|
||
const rawIndex = cardDrop?.columnId === col.id ? cardDrop.index : (cardsByColumn[col.id] ?? []).length
|
||
moveCardTo(draggedId, col.id, ownedDropIndex(col.id, rawIndex, draggedId))
|
||
finishDrag()
|
||
}
|
||
}
|
||
|
||
const handleColumnDragLeave = (e: React.DragEvent<HTMLElement>) => {
|
||
if (e.currentTarget.contains(e.relatedTarget as Node | null)) return
|
||
if (draggedColumnId) setColumnDropId(null)
|
||
if (draggedId) setCardDrop(null)
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<div className="flex items-end justify-between gap-4">
|
||
<div>
|
||
<h1 className="font-display text-2xl font-bold tracking-tight">Kanban Board</h1>
|
||
<p className="text-sm text-muted-foreground mt-1">Drag cards within or between columns, drag a column by its grip to reorder it, or focus a card and press Arrow Left/Right. Touch users can use each card’s menu.</p>
|
||
</div>
|
||
{!adding ? (
|
||
<Button size="sm" variant="outline" className="gap-1.5" onClick={() => setAdding(true)}><Plus className="h-4 w-4" /> Add column</Button>
|
||
) : (
|
||
<div className="flex items-center gap-1.5">
|
||
<Input autoFocus value={newLabel} onChange={e => setNewLabel(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') addColumn(); if (e.key === 'Escape') setAdding(false) }} placeholder="Column name" className="h-8 w-40" />
|
||
<Button size="icon-sm" onClick={addColumn}><Check className="h-4 w-4" /></Button>
|
||
<Button size="icon-sm" variant="ghost" onClick={() => setAdding(false)}><X className="h-4 w-4" /></Button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="flex gap-4 overflow-x-auto pb-2 h-[calc(100vh-180px)]">
|
||
{columns.map((col, idx) => {
|
||
const colBookmarks = cardsByColumn[col.id] ?? []
|
||
const isCardTarget = !!draggedId && cardDrop?.columnId === col.id
|
||
const isColumnTarget = !!draggedColumnId && columnDropId === col.id && draggedColumnId !== col.id
|
||
return (
|
||
<div
|
||
key={col.id}
|
||
data-column-id={col.id}
|
||
className={cn(
|
||
'rounded-lg border bg-muted/30 flex flex-col w-72 shrink-0 transition-[box-shadow,background-color,border-color] duration-150',
|
||
isCardTarget && 'bg-primary/[0.04] border-primary/30 shadow-sm',
|
||
isColumnTarget && 'ring-2 ring-primary/50 border-primary/40',
|
||
)}
|
||
style={{ borderTopColor: col.color, borderTopWidth: 3 }}
|
||
onDragOver={e => handleColumnDragOver(e, col)}
|
||
onDragLeave={handleColumnDragLeave}
|
||
onDrop={e => handleColumnDrop(e, col)}
|
||
>
|
||
<div className="px-3 py-2 border-b flex items-center justify-between gap-2">
|
||
<div className="flex items-center gap-1.5 min-w-0">
|
||
<span
|
||
draggable
|
||
onDragStart={e => {
|
||
setDraggedColumnId(col.id)
|
||
setDraggedId(null)
|
||
setCardDrop(null)
|
||
e.dataTransfer.effectAllowed = 'move'
|
||
e.dataTransfer.setData('text/plain', col.id)
|
||
}}
|
||
onDragEnd={finishDrag}
|
||
className="cursor-grab active:cursor-grabbing text-muted-foreground/40 hover:text-muted-foreground transition-colors"
|
||
title="Drag to reorder column"
|
||
aria-label={`Drag ${col.label} column`}
|
||
>
|
||
<GripVertical className="h-4 w-4" />
|
||
</span>
|
||
{editingId === col.id ? (
|
||
<Input autoFocus value={editLabel} onChange={e => setEditLabel(e.target.value)} onBlur={() => saveColumn(col.id, { label: editLabel })}
|
||
onKeyDown={e => { if (e.key === 'Enter') saveColumn(col.id, { label: editLabel }); if (e.key === 'Escape') setEditingId(null) }} className="h-7 text-sm" />
|
||
) : (
|
||
<h3 className="text-sm font-medium truncate flex items-center gap-2">
|
||
<span className="h-2 w-2 rounded-full shrink-0" style={{ backgroundColor: col.color }} />{col.label}
|
||
</h3>
|
||
)}
|
||
</div>
|
||
<div className="flex items-center gap-1 shrink-0">
|
||
<span className="text-xs text-muted-foreground bg-muted rounded-full px-2 py-0.5">{colBookmarks.length}</span>
|
||
<DropdownMenu>
|
||
<DropdownMenuTrigger asChild>
|
||
<Button size="icon-sm" variant="ghost" aria-label={`Column ${col.label} options`}><MoreHorizontal className="h-4 w-4" /></Button>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent align="end">
|
||
<DropdownMenuItem onClick={() => { setEditingId(col.id); setEditLabel(col.label) }}><Pencil className="h-3.5 w-3.5 mr-2" />Rename</DropdownMenuItem>
|
||
<DropdownMenuItem disabled={idx === 0} onClick={() => moveColumn(idx, -1)}><ArrowLeft className="h-3.5 w-3.5 mr-2" />Move left</DropdownMenuItem>
|
||
<DropdownMenuItem disabled={idx === columns.length - 1} onClick={() => moveColumn(idx, 1)}><ArrowRight className="h-3.5 w-3.5 mr-2" />Move right</DropdownMenuItem>
|
||
<DropdownMenuSeparator />
|
||
<div className="flex gap-1.5 px-2 py-1.5">
|
||
{PALETTE.map(c => (
|
||
<button key={c} aria-label={`Color ${c}`} onClick={() => saveColumn(col.id, { color: c })} className="h-4 w-4 rounded-full ring-offset-1 hover:ring-2 ring-ring" style={{ backgroundColor: c }} />
|
||
))}
|
||
</div>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuItem className="text-destructive" onClick={() => deleteColumn(col)}><Trash2 className="h-3.5 w-3.5 mr-2" />Delete column</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</div>
|
||
</div>
|
||
<div className="flex-1 overflow-y-auto p-2 space-y-2">
|
||
{loading ? (
|
||
Array.from({ length: 3 }).map((_, i) => <div key={i} className="h-20 rounded-lg bg-muted/50 animate-pulse" />)
|
||
) : colBookmarks.length === 0 ? (
|
||
<div className={cn('flex h-24 items-center justify-center rounded-lg border border-dashed text-xs text-muted-foreground transition-colors', isCardTarget && 'border-primary/50 bg-primary/[0.03] text-primary')}>
|
||
{draggedId ? 'Drop card here' : 'No cards yet'}
|
||
</div>
|
||
) : colBookmarks.map((b, index) => {
|
||
const canMove = isOwned(b)
|
||
const showLine = isCardTarget && cardDrop?.index === index
|
||
const currentColumn = columnFor(b, columns)
|
||
return (
|
||
<Fragment key={b.id}>
|
||
{showLine && <div className="mx-1 h-1 rounded-full bg-primary/70 shadow-sm" />}
|
||
<div
|
||
draggable={canMove}
|
||
role="button"
|
||
tabIndex={0}
|
||
data-bookmark-id={b.id}
|
||
aria-label={canMove
|
||
? `${b.title ?? 'Untitled'}. Enter opens details; Arrow Left or Right moves to the adjacent column.`
|
||
: `${b.title ?? 'Untitled'} (shared). Enter opens details.`}
|
||
onDragStart={e => {
|
||
if (!canMove) { e.preventDefault(); return }
|
||
suppressClick.current = true
|
||
setDraggedId(b.id)
|
||
setDraggedColumnId(null)
|
||
setColumnDropId(null)
|
||
e.dataTransfer.effectAllowed = 'move'
|
||
e.dataTransfer.setData('text/plain', b.id)
|
||
}}
|
||
onDragEnd={finishDrag}
|
||
onDragOver={e => handleCardDragOver(e, col, index)}
|
||
onClick={() => { if (!suppressClick.current) setSelectedBookmark(b) }}
|
||
onKeyDown={e => {
|
||
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSelectedBookmark(b) }
|
||
else if (canMove && e.key === 'ArrowLeft') { e.preventDefault(); moveCard(b, -1) }
|
||
else if (canMove && e.key === 'ArrowRight') { e.preventDefault(); moveCard(b, 1) }
|
||
}}
|
||
className={cn(
|
||
'rounded-lg border bg-card p-3 shadow-sm transition-[transform,box-shadow,opacity] duration-150 group focus-visible:outline-2 focus-visible:outline-primary',
|
||
canMove ? 'cursor-grab active:cursor-grabbing hover:-translate-y-0.5 hover:shadow-md' : 'cursor-default',
|
||
draggedId === b.id && 'opacity-40 scale-[0.98]',
|
||
)}
|
||
>
|
||
<div className="flex items-start gap-2">
|
||
<GripVertical className={cn('h-4 w-4 text-muted-foreground/50 mt-0.5 shrink-0', !canMove && 'opacity-30')} />
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center gap-1.5">
|
||
{b.favicon && <img src={b.favicon} alt="" referrerPolicy="no-referrer" className="h-3.5 w-3.5 rounded" onError={(e: any) => { e.target.style.display = 'none' }} />}
|
||
<p className="text-sm font-medium truncate">{b.title ?? 'Untitled'}</p>
|
||
{!canMove && <Badge variant="outline" className="text-[9px] px-1 py-0 shrink-0">Shared</Badge>}
|
||
</div>
|
||
<div className="flex flex-wrap gap-1 mt-1.5">
|
||
{(b.tags ?? []).slice(0, 2).map((bt: any) => (
|
||
<Badge key={bt?.tag?.id} variant="secondary" className="text-[9px] px-1 py-0" style={{ backgroundColor: `${bt?.tag?.color}20`, color: bt?.tag?.color }}>{bt?.tag?.name}</Badge>
|
||
))}
|
||
</div>
|
||
{b.dueDate && (
|
||
<p className="text-[10px] text-muted-foreground mt-1 flex items-center gap-1">
|
||
<Calendar className="h-3 w-3" />
|
||
{new Date(b.dueDate).toLocaleDateString('en-US', { month: 'short', day: 'numeric', timeZone: 'UTC' })}
|
||
</p>
|
||
)}
|
||
</div>
|
||
<div className="flex items-center gap-0.5 opacity-60 group-hover:opacity-100 focus-within:opacity-100 shrink-0" onDragStart={e => { e.preventDefault(); e.stopPropagation() }}>
|
||
<a href={b.url} target="_blank" rel="noopener noreferrer" onClick={e => e.stopPropagation()} className="rounded p-0.5" aria-label="Open link">
|
||
<ExternalLink className="h-3.5 w-3.5 text-muted-foreground hover:text-primary" />
|
||
</a>
|
||
<DropdownMenu>
|
||
<DropdownMenuTrigger asChild>
|
||
<Button size="icon-sm" variant="ghost" className="h-6 w-6" onClick={e => e.stopPropagation()} aria-label={`${b.title ?? 'Bookmark'} options`}><MoreHorizontal className="h-3.5 w-3.5" /></Button>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent align="end">
|
||
<DropdownMenuItem onClick={() => setSelectedBookmark(b)}><ExternalLink className="h-3.5 w-3.5 mr-2" />Open details</DropdownMenuItem>
|
||
{canMove && columns.length > 1 && <DropdownMenuSeparator />}
|
||
{canMove && columns.filter(c => c.id !== currentColumn).map(c => (
|
||
<DropdownMenuItem key={c.id} onClick={() => moveCardTo(b.id, c.id, cardsByColumn[c.id]?.filter(x => x.id !== b.id && isOwned(x)).length ?? 0)}>
|
||
<span className="h-2 w-2 rounded-full mr-2 shrink-0" style={{ backgroundColor: c.color }} />Move to {c.label}
|
||
</DropdownMenuItem>
|
||
))}
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Fragment>
|
||
)
|
||
})}
|
||
{!loading && isCardTarget && cardDrop?.index === colBookmarks.length && colBookmarks.length > 0 && (
|
||
<div className="mx-1 h-1 rounded-full bg-primary/70 shadow-sm" />
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
|
||
<BookmarkDetailSheet bookmark={selectedBookmark} onClose={() => setSelectedBookmark(null)} onUpdate={load} />
|
||
</div>
|
||
)
|
||
}
|