diff --git a/src/app/p/[clientSlug]/[projectSlug]/page.tsx b/src/app/p/[clientSlug]/[projectSlug]/page.tsx index 1ede8f5..7ec55de 100644 --- a/src/app/p/[clientSlug]/[projectSlug]/page.tsx +++ b/src/app/p/[clientSlug]/[projectSlug]/page.tsx @@ -31,6 +31,8 @@ export default async function BoardPage({ diff --git a/src/components/board/board.tsx b/src/components/board/board.tsx index 0241af4..eb59cc8 100644 --- a/src/components/board/board.tsx +++ b/src/components/board/board.tsx @@ -28,10 +28,14 @@ import type { CardRecord, ColumnRecord, Role } from "@/lib/pb/types"; function SortableCard({ card, role, + clientSlug, + projectSlug, onPatched, }: { card: CardRecord; role: Role; + clientSlug: string; + projectSlug: string; onPatched: (card: CardRecord) => void; }) { const draggable = role === "owner"; @@ -43,6 +47,7 @@ function SortableCard({ ref={setNodeRef} card={card} dragging={isDragging} + href={`/p/${clientSlug}/${projectSlug}/c/${card.id}`} style={{ transform: CSS.Translate.toString(transform), transition }} className={draggable ? "cursor-grab active:cursor-grabbing" : undefined} {...(draggable ? attributes : {})} @@ -81,11 +86,15 @@ function Droppable({ export function Board({ role, projectId, + clientSlug, + projectSlug, columns, initialCards, }: { role: Role; projectId: string; + clientSlug: string; + projectSlug: string; columns: ColumnRecord[]; initialCards: CardRecord[]; }) { @@ -218,6 +227,8 @@ export function Board({ key={card.id} card={card} role={role} + clientSlug={clientSlug} + projectSlug={projectSlug} onPatched={onPatched} /> ))} diff --git a/src/components/board/card-tile.tsx b/src/components/board/card-tile.tsx index 760a389..6b50baa 100644 --- a/src/components/board/card-tile.tsx +++ b/src/components/board/card-tile.tsx @@ -1,7 +1,8 @@ "use client"; import { forwardRef } from "react"; -import { Inbox, CalendarDays } from "lucide-react"; +import Link from "next/link"; +import { Inbox, CalendarDays, Maximize2 } from "lucide-react"; import { Pill } from "@/components/ui/pill"; import { cn } from "@/lib/cn"; @@ -27,10 +28,11 @@ export const CardTile = forwardRef< { card: CardRecord; dragging?: boolean; + href?: string; className?: string; children?: React.ReactNode; } & React.HTMLAttributes ->(function CardTile({ card, dragging, className, children, ...props }, ref) { +>(function CardTile({ card, dragging, href, className, children, ...props }, ref) { const due = classifyDueDate(card.target_date); const dueLabel = formatDueDate(card.target_date); @@ -38,16 +40,30 @@ export const CardTile = forwardRef< - - {card.title} - + + + {card.title} + + {href && ( + event.stopPropagation()} + className="shrink-0 rounded p-0.5 text-text-muted opacity-0 transition-opacity hover:text-text-primary focus-visible:opacity-100 group-hover/tile:opacity-100" + > + + + )} +
- {card.title} -
+ {card.title} +