dataforge/kanban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(kanban): stickers feature + dashboard null guards (#0063)

Browse Source 
- backend: Sticker type, idempotent stickers column, PUT /api/cards/:id/stickers, 4 tests
- frontend: emoji-mart picker, toolbar button + ESC, draggable overlay with right-click delete, % coords for resize survival
- dashboard: null guards on metrics arrays

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Egutierrez
2026-05-08 21:00:30 +02:00
parent 2a727eb7c1
commit 656516f219
12 changed files with 552 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/KanbanCard.tsx
+106 -5
View File
@@ -26,7 +26,7 @@ import {
IconUser,
IconUserCircle,
} from "@tabler/icons-react";
import { memo, useState } from "react";
import { memo, useCallback, useRef, useState } from "react";
import type { Card, CardColor, User } from "../types";
import { CARD_COLORS, colorBg, colorBorder, colorSwatch } from "./colors";
import { formatDuration } from "./format";
@@ -40,6 +40,11 @@ interface Props {
onShowHistory: (card: Card) => void;
onToggleLock: (id: string, locked: boolean) => void;
onAssign: (id: string, assignee_id: string | null) => void;
activeSticker?: string | null;
onAddSticker?: (cardId: string, x: number, y: number) => void;
onRemoveSticker?: (cardId: string, index: number) => void;
onMoveSticker?: (cardId: string, index: number, x: number, y: number) => void;
onCommitSticker?: (cardId: string) => void;
users: User[];
assignee?: User;
inDoneColumn?: boolean;
@@ -55,6 +60,11 @@ function KanbanCardImpl({
onShowHistory,
onToggleLock,
onAssign,
activeSticker,
onAddSticker,
onRemoveSticker,
onMoveSticker,
onCommitSticker,
users,
assignee,
inDoneColumn,
@@ -64,12 +74,66 @@ function KanbanCardImpl({
const [colorPopOpen, setColorPopOpen] = useState(false);
const [assigneePopOpen, setAssigneePopOpen] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
const cardElRef = useRef<HTMLElement | null>(null);
const draggingStickerRef = useRef<number | null>(null);
const stickerMode = !!activeSticker;
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
id: card.id,
data: { type: "card", columnId: card.column_id },
disabled: card.locked,
disabled: card.locked || stickerMode,
});
const setCardRef = useCallback((el: HTMLElement | null) => {
cardElRef.current = el;
setNodeRef(el);
}, [setNodeRef]);
const onCardClickAddSticker = (e: React.MouseEvent<HTMLDivElement>) => {
if (!stickerMode || !onAddSticker || isOverlay) return;
if ((e.target as HTMLElement).closest("[data-sticker-overlay]")) return;
const rect = e.currentTarget.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width;
const y = (e.clientY - rect.top) / rect.height;
onAddSticker(card.id, Math.max(0, Math.min(1, x)), Math.max(0, Math.min(1, y)));
};
const startStickerDrag = (index: number) => (e: React.PointerEvent<HTMLSpanElement>) => {
if (stickerMode || isOverlay || !onMoveSticker) return;
if (e.button !== 0) return;
e.stopPropagation();
e.preventDefault();
const rect = cardElRef.current?.getBoundingClientRect();
if (!rect) return;
draggingStickerRef.current = index;
const target = e.currentTarget;
target.setPointerCapture(e.pointerId);
const onMove = (ev: PointerEvent) => {
const idx = draggingStickerRef.current;
if (idx === null) return;
const x = (ev.clientX - rect.left) / rect.width;
const y = (ev.clientY - rect.top) / rect.height;
onMoveSticker(card.id, idx, Math.max(0, Math.min(1, x)), Math.max(0, Math.min(1, y)));
};
const onUp = (ev: PointerEvent) => {
target.releasePointerCapture?.(ev.pointerId);
target.removeEventListener("pointermove", onMove);
target.removeEventListener("pointerup", onUp);
target.removeEventListener("pointercancel", onUp);
draggingStickerRef.current = null;
onCommitSticker?.(card.id);
};
target.addEventListener("pointermove", onMove);
target.addEventListener("pointerup", onUp);
target.addEventListener("pointercancel", onUp);
};
const onStickerContextMenu = (index: number) => (e: React.MouseEvent) => {
if (isOverlay) return;
e.preventDefault();
e.stopPropagation();
onRemoveSticker?.(card.id, index);
};
const style: React.CSSProperties = {
transform: CSS.Transform.toString(transform),
transition,
@@ -216,19 +280,20 @@ function KanbanCardImpl({
return (
<Paper
ref={setNodeRef}
style={{ ...style, cursor: card.locked ? "default" : "grab", touchAction: "none" }}
ref={setCardRef}
style={{ ...style, position: "relative", cursor: stickerMode ? "copy" : card.locked ? "default" : "grab", touchAction: "none" }}
withBorder
p="xs"
shadow={isOverlay ? "lg" : "xs"}
radius="md"
onContextMenu={onContextMenu}
onClick={onCardClickAddSticker}
onDoubleClick={(e) => {
e.stopPropagation();
onEdit(card);
}}
{...attributes}
{...(card.locked ? {} : listeners)}
{...(card.locked || stickerMode ? {} : listeners)}
>
<Stack gap={6}>
<Group justify="space-between" gap={4} wrap="nowrap" align="flex-start">
@@ -315,6 +380,42 @@ function KanbanCardImpl({
</Badge>
</Group>
</Stack>
{card.stickers && card.stickers.length > 0 && (
<div
data-sticker-overlay
style={{
position: "absolute",
inset: 0,
pointerEvents: "none",
overflow: "hidden",
borderRadius: "inherit",
}}
>
{card.stickers.map((s, i) => (
<span
key={i}
onPointerDown={startStickerDrag(i)}
onContextMenu={onStickerContextMenu(i)}
title="Arrastra para mover. Click derecho para borrar."
style={{
position: "absolute",
left: `${s.x * 100}%`,
top: `${s.y * 100}%`,
transform: "translate(-50%, -50%)",
fontSize: 48,
lineHeight: 1,
opacity: 0.6,
userSelect: "none",
cursor: stickerMode || isOverlay ? "default" : "grab",
pointerEvents: stickerMode || isOverlay ? "none" : "auto",
touchAction: "none",
}}
>
{s.emoji}
</span>
))}
</div>
)}
</Paper>
);
}