@@ -775,7 +1105,10 @@ const BoardCanvas = ({ isVisible }: { isVisible: boolean }) => {
const points = getArrowPoints(fromCard, toCard);
// Calculate distance for control point offset (perpendicular to border)
- const dist = Math.hypot(points.to.x - points.from.x, points.to.y - points.from.y);
+ const dist = Math.hypot(
+ points.to.x - points.from.x,
+ points.to.y - points.from.y,
+ );
const controlDist = Math.max(50, dist * 0.4);
// Control points extend perpendicular to the borders
@@ -791,10 +1124,22 @@ const BoardCanvas = ({ isVisible }: { isVisible: boolean }) => {
// Arrowhead points matching original marker shape: M 0 0 L 12 4 L 0 8 L 3 4 Z
// Back corners (perpendicular to arrow direction)
- const ax1 = points.to.x - arrowLength * Math.cos(angle) + arrowWidth * Math.sin(angle);
- const ay1 = points.to.y - arrowLength * Math.sin(angle) - arrowWidth * Math.cos(angle);
- const ax2 = points.to.x - arrowLength * Math.cos(angle) - arrowWidth * Math.sin(angle);
- const ay2 = points.to.y - arrowLength * Math.sin(angle) + arrowWidth * Math.cos(angle);
+ const ax1 =
+ points.to.x -
+ arrowLength * Math.cos(angle) +
+ arrowWidth * Math.sin(angle);
+ const ay1 =
+ points.to.y -
+ arrowLength * Math.sin(angle) -
+ arrowWidth * Math.cos(angle);
+ const ax2 =
+ points.to.x -
+ arrowLength * Math.cos(angle) -
+ arrowWidth * Math.sin(angle);
+ const ay2 =
+ points.to.y -
+ arrowLength * Math.sin(angle) +
+ arrowWidth * Math.cos(angle);
// Inner notch (25% from back toward tip)
const notchDepth = arrowLength * 0.75;
const axm = points.to.x - notchDepth * Math.cos(angle);
@@ -825,7 +1170,11 @@ const BoardCanvas = ({ isVisible }: { isVisible: boolean }) => {
strokeWidth={2.5}
/>
{/* Arrowhead */}
- {
)}
- {/* Card Context Menu */}
- {cardContextMenu && (
-
-
- )}
-
- {/* Arrow Context Menu */}
- {arrowContextMenu && (
-
- {DEFAULT_CARD_COLORS.map((color) => (
-
- handleDuplicateCard(cardContextMenu.card)}
- >
-
- {t("duplicate")}
- handleDeleteCard(cardContextMenu.card.id)}
- >
-
- {t("delete")}
-
-
);
diff --git a/components/board/BoardCard.tsx b/components/board/BoardCard.tsx
index d8de0bb4..c2b3d963 100644
--- a/components/board/BoardCard.tsx
+++ b/components/board/BoardCard.tsx
@@ -3,10 +3,284 @@
import { useRef, useState, useCallback, useEffect } from "react";
import styles from "./BoardCanvas.module.css";
import { useTranslations } from "next-intl";
+import { Play, Pause } from "lucide-react";
import { BoardCardData } from "@src/lib/project/project-state";
+import { useAssetUrl } from "@src/lib/assets/use-asset-url";
+
+/** Join truthy class names (false/undefined are skipped). */
+const cx = (...parts: (string | false | undefined)[]) => parts.filter(Boolean).join(" ");
+
+/** The card kind, defaulting legacy/undefined cards to plain text notes. */
+type CardKind = NonNullable handleDeleteArrow(arrowContextMenu.arrow.id)}
- >
-
+ {/* Transient asset error (e.g. cloud storage limit reached) */}
+ {assetError && {t("delete")}
-{assetError}
}
+
+ {/* Recording indicator */}
+ {recorder.isRecording && (
+
+
+
+ {formatRecordingTime(recorder.elapsed)}
+
+
)}
{Math.round(scale * 100)}%
-
-
- {t("hints.pan")}
- {t("hints.select")}
- {t("hints.create")}
- {t("hints.move")}
-
+
+
+
+
+
+ {formatTime(duration ? duration - currentTime : 0)}
+
+ e.stopPropagation()}
+ disabled={!assetUrl || !duration}
+ style={
+ {
+ "--audio-progress": `${duration ? (Math.min(currentTime, duration) / duration) * 100 : 0}%`,
+ } as React.CSSProperties
+ }
+ />
+ {assetUrl && (
+
+
+ );
+};
+
+interface DescriptionEditing {
+ editing: boolean;
+ value: string;
+ onChange: (value: string) => void;
+ onBlur: () => void;
+ onKeyDown: (e: React.KeyboardEvent) => void;
+}
+
+const TextBody = ({
+ card,
+ title,
+ description,
+ onStartEditDescription,
+}: {
+ card: BoardCardData;
+ title: TitleEditing;
+ description: DescriptionEditing;
+ onStartEditDescription: (e: React.MouseEvent) => void;
+}) => {
+ const t = useTranslations("board");
+ return (
+ <>
+
+
+
+
+
+ {card.description} +
+ {description.editing && ( +