{formatDate(data.updatedAt || "")}
@@ -403,6 +392,14 @@ const ContactBlock = memo(({ id, data, selected }: ContactBlockProps) => {
+
+ > & {
isReadOnly?: boolean;
@@ -30,12 +32,6 @@ interface PaletteMetadata {
const PaletteBlock = memo(({ id, data, selected }: PaletteBlockProps) => {
const { dict, lang } = useI18n();
const { setNodes, getNode, getEdges } = useReactFlow();
- const [showPicker, setShowPicker] = useState(false);
- const [pickerPosition, setPickerPosition] = useState<
- { x: number; y: number } | undefined
- >(undefined);
- const [editingIndex, setEditingIndex] = useState(null);
-
const { rippleRef } = useTouch();
const currentUser = data.currentUser;
@@ -46,10 +42,24 @@ const PaletteBlock = memo(({ id, data, selected }: PaletteBlockProps) => {
const isProjectOwner = currentUser?.id && projectOwnerId === currentUser.id;
const isOwner = currentUser?.id && ownerId === currentUser.id;
-
const isReadOnly =
isPreviewMode || (isLocked ? !isOwner && !isProjectOwner : false);
+ const { handleReact, handleRemoveReaction } = useBlockReactions({
+ id,
+ data,
+ currentUser,
+ isReadOnly,
+ });
+
+ const isBeingMoved = !!data.movingUserColor;
+ const borderColor = isBeingMoved ? data.movingUserColor : "var(--border)";
+
+ const [showPicker, setShowPicker] = useState(false);
+ const [pickerPosition, setPickerPosition] = useState<
+ { x: number; y: number } | undefined
+ >(undefined);
+ const [editingIndex, setEditingIndex] = useState(null);
const [title, setTitle] = useState(data.title || "");
const metadata = useMemo(() => {
try {
@@ -79,6 +89,7 @@ const PaletteBlock = memo(({ id, data, selected }: PaletteBlockProps) => {
editor,
JSON.stringify(newMetadata),
title,
+ data.reactions,
);
},
[id, data, currentUser, dict, title],
@@ -180,6 +191,7 @@ const PaletteBlock = memo(({ id, data, selected }: PaletteBlockProps) => {
editor,
data.metadata,
newTitle,
+ data.reactions,
);
},
[id, data, currentUser, dict],
@@ -277,9 +289,6 @@ const PaletteBlock = memo(({ id, data, selected }: PaletteBlockProps) => {
const isBottomTargetConnected = isHandleConnected("bottom-target");
const isBottomSourceConnected = isHandleConnected("bottom");
- const isBeingMoved = data.movingUserColor !== undefined;
- const borderColor = data.movingUserColor || "var(--border)";
-
return (
-
{formatDate(data.updatedAt || "")}
@@ -174,6 +202,14 @@ const NoteBlock = memo(({ data, selected, id }: NoteBlockProps) => {
{
>
{
+
+ {
+ _setLinks((eds) =>
+ eds.map((edge) => {
+ if (edge.id === edgeId) {
+ return {
+ ...edge,
+ data: { ...edge.data, label, isEditing: false },
+ };
+ }
+ return edge;
+ }),
+ );
+ },
+ [_setLinks],
+ );
+
+ const handleEdgeLabelCancel = useCallback(
+ (edgeId: string) => {
+ _setLinks((eds) =>
+ eds.map((edge) => {
+ if (edge.id === edgeId) {
+ return {
+ ...edge,
+ data: { ...edge.data, isEditing: false },
+ };
+ }
+ return edge;
+ }),
+ );
+ },
+ [_setLinks],
+ );
+
+ const onLinkDoubleClick = useCallback(
+ (event: React.MouseEvent, edge: Edge) => {
+ if (isPreviewMode) return;
+ _setLinks((eds) =>
+ eds.map((e) => {
+ if (e.id === edge.id) {
+ return {
+ ...e,
+ data: {
+ ...e.data,
+ isEditing: true,
+ onLabelSubmit: handleEdgeLabelSubmit,
+ onLabelCancel: handleEdgeLabelCancel,
+ },
+ };
+ }
+ return e;
+ }),
+ );
+ },
+ [isPreviewMode, _setLinks, handleEdgeLabelSubmit, handleEdgeLabelCancel],
+ );
+
const commands = useMemo(() => {
if (isPreviewMode) return [];
@@ -572,9 +629,10 @@ function ProjectCanvasContent({ initialProjectId }: ProjectCanvasProps) {
data: {
...block.data,
isPreviewMode,
+ currentUser: currentUser || undefined,
},
}));
- }, [blocks, isPreviewMode]);
+ }, [blocks, isPreviewMode, currentUser]);
return (
<>
@@ -614,459 +672,468 @@ function ProjectCanvasContent({ initialProjectId }: ProjectCanvasProps) {
)}
-
-
-
+
-
-
-
{formatDate(data.updatedAt || "")}
@@ -404,6 +413,14 @@ const PaletteBlock = memo(({ id, data, selected }: PaletteBlockProps) => {
-
-
+
- )}
-
- {!isPreviewMode && (
-
-
- {isPreviewMode && (
- > & {
isReadOnly?: boolean;
@@ -134,13 +136,6 @@ const SketchBlock = memo(({ id, data, selected }: SketchBlockProps) => {
onTouchEnd: stopPropagation,
};
- // Sync title
- useEffect(() => {
- if (data.title !== undefined && data.title !== title) {
- setTitle(data.title);
- }
- }, [data.title]);
-
const currentUser = data.currentUser;
const projectOwnerId = data.projectOwnerId;
const ownerId = data.ownerId;
@@ -152,9 +147,46 @@ const SketchBlock = memo(({ id, data, selected }: SketchBlockProps) => {
const isReadOnly =
isPreviewMode || (isLocked ? !isOwner && !isProjectOwner : false);
+ const { handleReact, handleRemoveReaction } = useBlockReactions({
+ id,
+ data,
+ currentUser,
+ isReadOnly,
+ });
+
const isBeingMoved = !!data.movingUserColor;
const borderColor = isBeingMoved ? data.movingUserColor : "var(--border)";
+ const handleTitleChange = useCallback(
+ (e: React.ChangeEvent) => {
+ const newTitle = e.target.value;
+ setTitle(newTitle);
+ const now = new Date().toISOString();
+ const editor =
+ currentUser?.displayName ||
+ currentUser?.username ||
+ dict.project.anonymous;
+
+ data.onContentChange?.(
+ id,
+ data.content,
+ now,
+ editor,
+ JSON.stringify({ strokes }),
+ newTitle,
+ data.reactions,
+ );
+ },
+ [id, data, currentUser, dict, strokes],
+ );
+
+ // Sync title
+ useEffect(() => {
+ if (data.title !== undefined && data.title !== title) {
+ setTitle(data.title);
+ }
+ }, [data.title]);
+
// Initialize from metadata
useEffect(() => {
if (data.metadata && !isLoaded) {
@@ -196,7 +228,6 @@ const SketchBlock = memo(({ id, data, selected }: SketchBlockProps) => {
}
}, [data.metadata, isLoaded]);
- // Persistence
const save = useCallback(
(newStrokes: Stroke[]) => {
try {
@@ -213,6 +244,7 @@ const SketchBlock = memo(({ id, data, selected }: SketchBlockProps) => {
editorName,
JSON.stringify({ strokes: newStrokes }),
title,
+ data.reactions,
);
} catch (e) {
console.error("Failed to save sketch", e);
@@ -322,29 +354,6 @@ const SketchBlock = memo(({ id, data, selected }: SketchBlockProps) => {
triggerSave([]);
};
- const handleTitleChange = useCallback(
- (e: React.ChangeEvent) => {
- const newTitle = e.target.value;
- setTitle(newTitle);
-
- const now = new Date().toISOString();
- const editorName =
- currentUser?.displayName ||
- currentUser?.username ||
- dict.project.anonymous;
-
- data.onContentChange?.(
- id,
- data.content,
- now,
- editorName,
- JSON.stringify({ strokes }),
- newTitle,
- );
- },
- [data, id, currentUser, dict, strokes],
- );
-
const formatDate = (isoString: string) => {
if (!isoString) return "";
const date = new Date(isoString);
@@ -425,14 +434,7 @@ const SketchBlock = memo(({ id, data, selected }: SketchBlockProps) => {
);
return (
-
+
-
+
+
+
Magic Paste
+{dict.project.onboardingHint}
+
-
+ {!isPreviewMode && (
+
+ )}
Magic Paste
-{dict.project.onboardingHint}
+ + )} +
+
+ {dict.project.shareCursor}
+
+ {
+ e.stopPropagation();
+ setShareCursor(e.target.checked);
+ }}
+ />
-
-
- {dict.project.shareCursor}
-
- {
- e.stopPropagation();
- setShareCursor(e.target.checked);
- }}
- />
-
- )}
-
-
- {dict.canvas.previewMode}
-
-
+
-
- {currentUser?.id === projectOwnerId && (
+
+ {isPreviewMode && (
+
- )}
+ )}
-
+
+ {dict.canvas.previewMode}
+
+
-
- )}
+ {currentUser?.id === projectOwnerId && (
+
+ )}
+
- {!isPreviewMode && (
-
- {activeUsers.map((u) => (
-
-
+
-
+
-
+ {!isPreviewMode && (
+
- )}
-
+ {activeUsers.map((u) => (
- ))}
-
- 
-
+
+
+
-
- {u.displayName || u.username}
-
+
-
+ {u.displayName || u.username}
+
+
-
- {currentUser?.id === projectOwnerId && (
+ ))}
+
+ )}
+
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {contextMenu && (
- {
+ navigator.clipboard
+ .writeText(errorMessage)
+ .then(() => {
+ toast.success(dict.common.copiedToClipboard);
+ })
+ .catch(() => {
+ toast.error(dict.common.failedToCopy);
+ });
+ };
+
+ return (
+ {
public state: State = {
hasError: false,
@@ -32,35 +91,8 @@ export class ProjectCanvasErrorBoundary extends Component {
if (this.props.fallback) {
return this.props.fallback;
}
-
- return (
- >;
const ProjectCoreBlock = memo(
({ data, selected, id }: ProjectCoreBlockProps) => {
const { dict } = useI18n();
+ const { setNodes, getEdges } = useReactFlow();
+
+ const currentUser = data.currentUser;
+ const projectOwnerId = data.projectOwnerId;
+ const ownerId = data.ownerId;
+ const isPreviewMode = data.isPreviewMode;
+ const isLocked = data.isLocked;
+
+ const isProjectOwner = currentUser?.id && projectOwnerId === currentUser.id;
+ const isOwner = currentUser?.id && ownerId === currentUser.id;
+ const isReadOnly =
+ isPreviewMode || (isLocked ? !isOwner && !isProjectOwner : false);
+
+ const { handleReact, handleRemoveReaction } = useBlockReactions({
+ id,
+ data,
+ currentUser,
+ isReadOnly,
+ });
+
const [title, setTitle] = useState(data.content || "");
const [description, setDescription] = useState("");
const lastDimensions = useRef({
@@ -52,10 +74,24 @@ const ProjectCoreBlock = memo(
}
}, [data.content, data.metadata]);
+ const syncToYjs = useCallback(
+ (text: string) => {
+ if (!data.yText) return;
+ if (data.yText.toString() === text) return;
+
+ data.yText.doc?.transact(() => {
+ data.yText?.delete(0, data.yText.length);
+ data.yText?.insert(0, text);
+ }, data.yText.doc.clientID);
+ },
+ [data.yText],
+ );
+
const handleTitleChange = useCallback(
(e: React.ChangeEvent) => {
const newTitle = e.target.value;
setTitle(newTitle);
+ syncToYjs(newTitle);
const meta = { description };
data.onContentChange?.(
@@ -64,9 +100,11 @@ const ProjectCoreBlock = memo(
new Date().toISOString(),
data.lastEditor,
JSON.stringify(meta),
+ undefined,
+ data.reactions,
);
},
- [id, data.onContentChange, data.lastEditor, description],
+ [id, data.onContentChange, data.lastEditor, description, data.reactions],
);
const handleDescriptionChange = useCallback(
@@ -80,13 +118,13 @@ const ProjectCoreBlock = memo(
new Date().toISOString(),
data.lastEditor,
JSON.stringify(meta),
+ undefined,
+ data.reactions,
);
},
- [id, data.onContentChange, data.lastEditor, title],
+ [id, data.onContentChange, data.lastEditor, title, data.reactions],
);
- const { setNodes, getEdges } = useReactFlow();
-
const edges = getEdges();
const isHandleConnected = (handleId: string) =>
edges.some(
@@ -134,7 +172,7 @@ const ProjectCoreBlock = memo(
return (
<>
@@ -184,13 +222,21 @@ const ProjectCoreBlock = memo(
-
-
- {zoom}%
-
+
-
+
-
+
+
+ {zoom}%
+
+
e.stopPropagation()}
- onClick={(e) => e.stopPropagation()}
- >
- {contextMenu.type === "pane" ? (
- <>
- {!isPreviewMode && (
- <>
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
e.stopPropagation()}
+ onClick={(e) => e.stopPropagation()}
+ >
+ {contextMenu.type === "pane" ? (
+ <>
+ {!isPreviewMode && (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ ) : contextMenu.type === "block" ? (
+ (() => {
+ const block = contextMenuBlock;
+ if (!block || !currentUser) return null;
+ const isOwner =
+ currentUser.id &&
+ (block.data as BlockData)?.ownerId === currentUser.id;
+ const isProjectOwner =
+ currentUser.id && projectOwnerId === currentUser.id;
+ const canManage = isOwner || isProjectOwner;
+ const isLocked = !!(block.data as BlockData).isLocked;
+
+ return (
+ <>
+ {canManage && (
+ <>
+
+
+
+
+
+ )}
+ {!canManage && (
+
- )}
-
+ );
+ })()
+ ) : null}
+
+ {dict.blocks.viewOnly || "View Only"}
+
+ )}
+
+ );
+ })()
+ ) : contextMenu.type === "edge" ? (
+ (() => {
+ const edgeId = contextMenu.id;
+ if (!edgeId) return null;
+
+ return (
-
-
- )}
-
- ) : contextMenu.type === "block" ? (
- (() => {
- const block = contextMenuBlock;
- if (!block || !currentUser) return null;
- const isOwner =
- currentUser.id &&
- (block.data as BlockData)?.ownerId === currentUser.id;
- const isProjectOwner =
- currentUser.id && projectOwnerId === currentUser.id;
- const canManage = isOwner || isProjectOwner;
- const isLocked = !!(block.data as BlockData).isLocked;
-
- return (
- <>
- {canManage && (
- <>
-
-
-
-
-
- )}
- {!canManage && (
-
- {dict.blocks.viewOnly || "View Only"}
-
- )}
-
- );
- })()
- ) : contextMenu.type === "edge" ? (
- (() => {
- const edgeId = contextMenu.id;
- if (!edgeId) return null;
-
- return (
-
- );
- })()
- ) : null}
-
+
+ );
+}
+
export class ProjectCanvasErrorBoundary extends Component
+
+
+
+ + {dict.common.canvasErrorTitle} +
+{dict.common.canvasErrorDescription}
+
+
+ {dict.common.clickToCopyError}
+
+
+
+
+ {errorMessage}
+
+
-
- );
+ return
-
-
-
- - Something went wrong -
-- We encountered an error while rendering the canvas. This might be - due to a temporary glitch or a corrupted block. -
-
- {this.state.error?.message || "Unknown error"}
-
-
-
+ <>
{
onResize={handleResize}
onResizeEnd={handleResizeEnd}
/>
+
+
+ {/* Header */}
+
+
- {/* Header */}
-
+
+
+
+
+
-
-
- {!isReadOnly && (
-
-
-
-
-
-
- {/* Pen Tool */}
-
-
-
+
+ UserPresence | undefined;
+}
+
+const UserMapContext = createContext({
+ resolveUser: () => undefined,
+});
+
+export const useUserMap = () => useContext(UserMapContext);
+
+export const UserMapProvider = ({
+ children,
+ activeUsers,
+}: {
+ children: ReactNode;
+ activeUsers: UserPresence[];
+}) => {
+ const userMap = useMemo(() => {
+ const map = new Map();
+ activeUsers.forEach((u) => map.set(u.id, u));
+ return map;
+ }, [activeUsers]);
+
+ const resolveUser = (userId: string) => {
+ return userMap.get(userId);
+ };
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/app/components/project/VideoBlock.tsx b/src/app/components/project/VideoBlock.tsx
index 1c06442..3975388 100644
--- a/src/app/components/project/VideoBlock.tsx
+++ b/src/app/components/project/VideoBlock.tsx
@@ -16,6 +16,8 @@ import {
} from "@xyflow/react";
import { BlockData } from "./CanvasBlock";
import { DEFAULT_BLOCK_WIDTH, DEFAULT_BLOCK_HEIGHT } from "./utils/constants";
+import { BlockReactions } from "./BlockReactions";
+import { useBlockReactions } from "./hooks/useBlockReactions";
type VideoBlockProps = NodeProps> & {
isReadOnly?: boolean;
@@ -25,6 +27,28 @@ const VideoBlock = memo(({ id, data, selected }: VideoBlockProps) => {
const { dict, lang } = useI18n();
const { rippleRef } = useTouch();
const { setNodes, getNode, getEdges } = useReactFlow();
+
+ const currentUser = data.currentUser;
+ const projectOwnerId = data.projectOwnerId;
+ const ownerId = data.ownerId;
+ const isPreviewMode = data.isPreviewMode;
+ const isLocked = data.isLocked;
+
+ const isProjectOwner = currentUser?.id && projectOwnerId === currentUser.id;
+ const isOwner = currentUser?.id && ownerId === currentUser.id;
+ const isReadOnly =
+ isPreviewMode || (isLocked ? !isOwner && !isProjectOwner : false);
+
+ const { handleReact, handleRemoveReaction } = useBlockReactions({
+ id,
+ data,
+ currentUser,
+ isReadOnly,
+ });
+
+ const isBeingMoved = !!data.movingUserColor;
+ const borderColor = isBeingMoved ? data.movingUserColor : "var(--border)";
+
const [url, setUrl] = useState(data.content || "");
const [title, setTitle] = useState(data.title || "");
const [isEditing, setIsEditing] = useState(false);
@@ -78,20 +102,6 @@ const VideoBlock = memo(({ id, data, selected }: VideoBlockProps) => {
return () => yText.unobserve(observer);
}, [data.yText, isEditing, url]);
- const currentUser = data.currentUser;
- const projectOwnerId = data.projectOwnerId;
- const ownerId = data.ownerId;
- const isPreviewMode = data.isPreviewMode;
- const isLocked = data.isLocked;
-
- const isProjectOwner = currentUser?.id && projectOwnerId === currentUser.id;
- const isOwner = currentUser?.id && ownerId === currentUser.id;
- const isReadOnly =
- isPreviewMode || (isLocked ? !isOwner && !isProjectOwner : false);
-
- const isBeingMoved = !!data.movingUserColor;
- const borderColor = isBeingMoved ? data.movingUserColor : "var(--border)";
-
const onLongPress = useCallback((e: React.TouchEvent | TouchEvent) => {
const target = e.target as HTMLElement;
const event = new MouseEvent("contextmenu", {
@@ -127,6 +137,7 @@ const VideoBlock = memo(({ id, data, selected }: VideoBlockProps) => {
editor,
data.metadata,
newTitle,
+ data.reactions,
);
},
[id, data, currentUser, dict],
@@ -144,7 +155,15 @@ const VideoBlock = memo(({ id, data, selected }: VideoBlockProps) => {
currentUser?.username ||
dict.project.anonymous;
- data.onContentChange?.(id, newUrl, now, editor, data.metadata, title);
+ data.onContentChange?.(
+ id,
+ newUrl,
+ now,
+ editor,
+ data.metadata,
+ title,
+ data.reactions,
+ );
},
[id, data, currentUser, dict, syncToYjs, title],
);
@@ -275,7 +294,7 @@ const VideoBlock = memo(({ id, data, selected }: VideoBlockProps) => {
>
{
)}
-
{formatDate(data.updatedAt || "")}
@@ -473,6 +485,14 @@ const SnippetBlock = memo(({ id, data, selected }: SnippetBlockProps) => {
+
+ {
+ const { setNodes } = useReactFlow();
+ const { dict } = useI18n();
+
+ const handleReact = useCallback(
+ (emoji: string) => {
+ if (isReadOnly) return;
+
+ const currentReactions = data.reactions || [];
+ const existingIndex = currentReactions.findIndex(
+ (r) => r.emoji === emoji,
+ );
+ const userId = currentUser?.id;
+ if (!userId) return;
+
+ let newReactions;
+ if (existingIndex > -1) {
+ const reaction = currentReactions[existingIndex];
+ const hasReacted = reaction.users.some((u) =>
+ typeof u === "string" ? u === userId : u.id === userId,
+ );
+
+ if (hasReacted) return;
+
+ newReactions = [...currentReactions];
+ newReactions[existingIndex] = {
+ ...reaction,
+ count: reaction.count + 1,
+ users: [
+ ...reaction.users,
+ {
+ id: userId,
+ username:
+ currentUser?.username ||
+ currentUser?.displayName ||
+ dict.project.anonymous,
+ },
+ ],
+ };
+ } else {
+ newReactions = [
+ ...currentReactions,
+ {
+ emoji,
+ count: 1,
+ users: [
+ {
+ id: userId,
+ username:
+ currentUser?.username ||
+ currentUser?.displayName ||
+ dict.project.anonymous,
+ },
+ ],
+ },
+ ];
+ }
+
+ const now = new Date().toISOString();
+ const editor =
+ currentUser?.displayName ||
+ currentUser?.username ||
+ dict.project.anonymous;
+
+ if (setNodes) {
+ setNodes((nds) =>
+ nds.map((n) =>
+ n.id === id
+ ? {
+ ...n,
+ data: {
+ ...n.data,
+ reactions: newReactions,
+ updatedAt: now,
+ lastEditor: editor,
+ },
+ }
+ : n,
+ ),
+ );
+ }
+
+ data.onContentChange?.(
+ id,
+ data.content,
+ now,
+ editor,
+ data.metadata,
+ data.title,
+ newReactions,
+ );
+ },
+ [id, data, isReadOnly, currentUser, dict.project.anonymous, setNodes],
+ );
+
+ const handleRemoveReaction = useCallback(
+ (emoji: string) => {
+ if (isReadOnly) return;
+
+ const currentReactions = data.reactions || [];
+ const existingIndex = currentReactions.findIndex(
+ (r) => r.emoji === emoji,
+ );
+ const userId = currentUser?.id;
+ if (!userId || existingIndex === -1) return;
+
+ const reaction = currentReactions[existingIndex];
+ const hasReacted = reaction.users.some((u) =>
+ typeof u === "string" ? u === userId : u.id === userId,
+ );
+
+ if (!hasReacted) return;
+
+ let newReactions = [...currentReactions];
+ const newUsers = reaction.users.filter((u) =>
+ typeof u === "string" ? u !== userId : u.id !== userId,
+ );
+
+ if (newUsers.length === 0) {
+ newReactions = newReactions.filter((r) => r.emoji !== emoji);
+ } else {
+ newReactions[existingIndex] = {
+ ...reaction,
+ count: reaction.count - 1,
+ users: newUsers,
+ };
+ }
+
+ const now = new Date().toISOString();
+ const editor =
+ currentUser?.displayName ||
+ currentUser?.username ||
+ dict.project.anonymous;
+
+ if (setNodes) {
+ setNodes((nds) =>
+ nds.map((n) =>
+ n.id === id
+ ? {
+ ...n,
+ data: {
+ ...n.data,
+ reactions: newReactions,
+ updatedAt: now,
+ lastEditor: editor,
+ },
+ }
+ : n,
+ ),
+ );
+ }
+
+ data.onContentChange?.(
+ id,
+ data.content,
+ now,
+ editor,
+ data.metadata,
+ data.title,
+ newReactions,
+ );
+ },
+ [id, data, isReadOnly, currentUser, dict.project.anonymous, setNodes],
+ );
+
+ return { handleReact, handleRemoveReaction };
+};
diff --git a/src/app/components/project/hooks/useProjectCanvasGraph.ts b/src/app/components/project/hooks/useProjectCanvasGraph.ts
index aa4b422..41b545e 100644
--- a/src/app/components/project/hooks/useProjectCanvasGraph.ts
+++ b/src/app/components/project/hooks/useProjectCanvasGraph.ts
@@ -273,6 +273,7 @@ export const useProjectCanvasGraph = ({
type: "connection",
markerEnd: "connection-arrow",
data: { label: "" },
+ zIndex: 2000,
};
setLinks((lks) => addEdge(link, lks || []));
@@ -293,21 +294,19 @@ export const useProjectCanvasGraph = ({
(_: React.MouseEvent, block: Node) => {
if (block.type === "core") return;
- const adjustedPos = getAdjustedPosition(
- {
- x: block.position.x,
- y: block.position.y,
- width: block.measured?.width || block.width || DEFAULT_BLOCK_WIDTH,
- height:
- block.measured?.height || block.height || DEFAULT_BLOCK_HEIGHT,
- },
- {
- x: CORE_BLOCK_X,
- y: CORE_BLOCK_Y,
- width: CORE_BLOCK_WIDTH,
- height: CORE_BLOCK_HEIGHT,
- },
- );
+ const blockRect = {
+ x: block.position.x,
+ y: block.position.y,
+ width: block.measured?.width || block.width || DEFAULT_BLOCK_WIDTH,
+ height: block.measured?.height || block.height || DEFAULT_BLOCK_HEIGHT,
+ };
+
+ const adjustedPos = getAdjustedPosition(blockRect, {
+ x: CORE_BLOCK_X,
+ y: CORE_BLOCK_Y,
+ width: CORE_BLOCK_WIDTH,
+ height: CORE_BLOCK_HEIGHT,
+ });
const adjustedBlock = {
...block,
@@ -328,21 +327,19 @@ export const useProjectCanvasGraph = ({
if (block.type === "core") return;
updateMyPresence({ draggingBlockId: null });
- const adjustedPos = getAdjustedPosition(
- {
- x: block.position.x,
- y: block.position.y,
- width: block.measured?.width || block.width || DEFAULT_BLOCK_WIDTH,
- height:
- block.measured?.height || block.height || DEFAULT_BLOCK_HEIGHT,
- },
- {
- x: CORE_BLOCK_X,
- y: CORE_BLOCK_Y,
- width: CORE_BLOCK_WIDTH,
- height: CORE_BLOCK_HEIGHT,
- },
- );
+ const blockRect = {
+ x: block.position.x,
+ y: block.position.y,
+ width: block.measured?.width || block.width || DEFAULT_BLOCK_WIDTH,
+ height: block.measured?.height || block.height || DEFAULT_BLOCK_HEIGHT,
+ };
+
+ const adjustedPos = getAdjustedPosition(blockRect, {
+ x: CORE_BLOCK_X,
+ y: CORE_BLOCK_Y,
+ width: CORE_BLOCK_WIDTH,
+ height: CORE_BLOCK_HEIGHT,
+ });
const adjustedBlock = {
...block,
@@ -357,7 +354,7 @@ export const useProjectCanvasGraph = ({
),
});
},
- [applyMutation, updateMyPresence, links, blocks, setLinks],
+ [applyMutation, updateMyPresence],
);
const onContentChange = useCallback(
@@ -368,6 +365,11 @@ export const useProjectCanvasGraph = ({
lastEditor: string,
metadata?: string,
title?: string,
+ reactions?: {
+ emoji: string;
+ count: number;
+ users: (string | { id: string; username: string })[];
+ }[],
) => {
setBlocks((blocks) =>
blocks.map((b) =>
@@ -381,6 +383,7 @@ export const useProjectCanvasGraph = ({
lastEditor,
...(metadata !== undefined ? { metadata } : {}),
...(title !== undefined ? { title } : {}),
+ ...(reactions !== undefined ? { reactions } : {}),
},
}
: b,
diff --git a/src/app/components/project/hooks/useProjectCanvasState.ts b/src/app/components/project/hooks/useProjectCanvasState.ts
index b0f2b9f..d5174a9 100644
--- a/src/app/components/project/hooks/useProjectCanvasState.ts
+++ b/src/app/components/project/hooks/useProjectCanvasState.ts
@@ -31,6 +31,9 @@ const cleanBlockDataForSync = (
onCaretMove: _onCaretMove,
onResize: _onResize,
onResizeEnd: _onResizeEnd,
+ currentUser: _currentUser,
+ initialProjectId: _initialProjectId,
+ projectOwnerId: _projectOwnerId,
...rest
} = data;
return rest;
@@ -203,7 +206,18 @@ export const useProjectCanvasState = (
const rl = yLinks.get(key);
if (rl) {
if (index >= 0) {
- next[index] = { ...rl, selected: next[index].selected };
+ const localData = next[index].data as Record;
+ const remoteData = rl.data as Record;
+ next[index] = {
+ ...rl,
+ selected: next[index].selected,
+ data: {
+ ...remoteData,
+ isEditing: localData?.isEditing,
+ onLabelSubmit: localData?.onLabelSubmit,
+ onLabelCancel: localData?.onLabelCancel,
+ },
+ };
} else {
next.push({ ...rl, selected: false } as Edge);
}
@@ -356,6 +370,20 @@ export const useProjectCanvasState = (
if (isSummaryUpdate && isExistingDetailed) {
return;
}
+ const isUpgradeToDetailed =
+ !isSummaryUpdate && existing?.data?.isSummary;
+ if (isUpgradeToDetailed) {
+ const currentYText = yContents.get(block.id);
+ const newContent = (block.data?.content as string) || "";
+ if (
+ currentYText &&
+ currentYText.toString() === "" &&
+ newContent !== ""
+ ) {
+ currentYText.delete(0, currentYText.length);
+ currentYText.insert(0, newContent);
+ }
+ }
const hasChanged =
!existing ||
@@ -405,7 +433,14 @@ export const useProjectCanvasState = (
if (!isPreviewModeRef.current) {
yLinks.doc?.transact(() => {
nextLinks.forEach((link) => {
- const { selected, ...linkToSync } = link;
+ const { selected, data, ...rest } = link;
+ const {
+ isEditing: _,
+ onLabelSubmit: __,
+ onLabelCancel: ___,
+ ...cleanData
+ } = (data as Record) || {};
+ const linkToSync = { ...rest, data: cleanData };
const existing = yLinks.get(link.id);
const hasChanged =
diff --git a/src/app/components/project/hooks/useProjectData.ts b/src/app/components/project/hooks/useProjectData.ts
index 5b7ab2e..ce42da5 100644
--- a/src/app/components/project/hooks/useProjectData.ts
+++ b/src/app/components/project/hooks/useProjectData.ts
@@ -78,6 +78,7 @@ export const useProjectData = ({
...l,
type: l.type || "connection",
markerEnd: "connection-arrow",
+ zIndex: 2000,
}),
);
diff --git a/src/app/components/project/hooks/useTouchGestures.ts b/src/app/components/project/hooks/useTouchGestures.ts
index 62f38c9..196b090 100644
--- a/src/app/components/project/hooks/useTouchGestures.ts
+++ b/src/app/components/project/hooks/useTouchGestures.ts
@@ -23,7 +23,7 @@ export const useTouchGestures = ({
onDoubleTap,
longPressDelay = 500,
doubleTapDelay = 300,
- moveThreshold = 10,
+ moveThreshold = 25,
stopPropagation = false,
}: UseTouchGesturesProps) => {
const timerRef = useRef(null);
diff --git a/src/app/components/project/utils/collision.ts b/src/app/components/project/utils/collision.ts
index 37139cb..40eec13 100644
--- a/src/app/components/project/utils/collision.ts
+++ b/src/app/components/project/utils/collision.ts
@@ -66,3 +66,38 @@ export function getAdjustedPosition(
return { x: adjustedX, y: adjustedY };
}
+
+/**
+ * Finds the closest rect within a threshold.
+ */
+export function getClosestRect(
+ sourceRect: Rect,
+ targets: { id: string; rect: Rect }[],
+ threshold: number = 150,
+): string | null {
+ let closestId: string | null = null;
+ let minDistance = threshold;
+
+ const sourceCenter = {
+ x: sourceRect.x + sourceRect.width / 2,
+ y: sourceRect.y + sourceRect.height / 2,
+ };
+
+ for (const target of targets) {
+ const targetCenter = {
+ x: target.rect.x + target.rect.width / 2,
+ y: target.rect.y + target.rect.height / 2,
+ };
+
+ const dx = sourceCenter.x - targetCenter.x;
+ const dy = sourceCenter.y - targetCenter.y;
+ const distance = Math.sqrt(dx * dx + dy * dy);
+
+ if (distance < minDistance) {
+ minDistance = distance;
+ closestId = target.id;
+ }
+ }
+
+ return closestId;
+}
diff --git a/src/app/db/migrations/19AddLabelsAndReactions.ts b/src/app/db/migrations/19AddLabelsAndReactions.ts
new file mode 100644
index 0000000..213c8bf
--- /dev/null
+++ b/src/app/db/migrations/19AddLabelsAndReactions.ts
@@ -0,0 +1,25 @@
+import { Kysely } from "kysely";
+import { database } from "../../lib/types/db";
+
+export async function up(db: Kysely): Promise {
+ await db.schema.alterTable("links").addColumn("label", "text").execute();
+
+ await db.schema
+ .createTable("blockReactions")
+ .ifNotExists()
+ .addColumn("id", "text", (col) => col.primaryKey())
+ .addColumn("blockId", "text", (col) =>
+ col.notNull().references("blocks.id").onDelete("cascade"),
+ )
+ .addColumn("userId", "text", (col) =>
+ col.notNull().references("users.id").onDelete("cascade"),
+ )
+ .addColumn("emoji", "text", (col) => col.notNull())
+ .addColumn("createdAt", "text", (col) => col.notNull())
+ .execute();
+}
+
+export async function down(db: Kysely): Promise {
+ await db.schema.dropTable("blockReactions").execute();
+ await db.schema.alterTable("links").dropColumn("label").execute();
+}
diff --git a/src/app/global.css b/src/app/global.css
index d560d04..da942bc 100644
--- a/src/app/global.css
+++ b/src/app/global.css
@@ -22,7 +22,7 @@
--sidebar-collapsed-width: 0px;
--core-block-width: 640px;
--core-block-height: 480px;
- --accent: #004225;
+ --accent: #000080;
--warning: #f2c94c;
--danger: #eb5757;
--toast-bg: #404040;
@@ -470,7 +470,8 @@ body {
background-color: var(--user-color, #000);
}
-.user-presence-item:hover .user-presence-tooltip {
+.user-presence-item:hover .user-presence-tooltip,
+.reaction-badge:hover .user-presence-tooltip {
opacity: 1;
}
@@ -2147,6 +2148,42 @@ input:-webkit-autofill:active {
color: var(--danger);
}
+.error-message-hint {
+ display: block;
+ width: 100%;
+ text-align: left;
+ font-size: 10px;
+ font-weight: 700;
+ color: var(--text-muted);
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ opacity: 0.6;
+ padding-left: 10px;
+}
+
+.error-message {
+ background-color: var(--bg-sidebar);
+ padding: 1rem;
+ text-align: center;
+ font-size: 0.75rem;
+ font-family: monospace;
+ color: var(--text-muted);
+ max-width: 56rem;
+ width: 100%;
+ cursor: pointer;
+ border-radius: 0.5rem;
+ border: 1px solid var(--border);
+ transition: all 0.2s ease;
+}
+
+.error-message:hover {
+ background-color: rgba(128, 128, 128, 0.1);
+}
+
+.error-message:active {
+ transform: scale(0.99);
+}
+
.github-error-hint {
font-size: 0.75rem;
opacity: 0.6;
@@ -2517,6 +2554,14 @@ input:-webkit-autofill:active {
text-overflow: ellipsis;
}
+.mr-2 {
+ margin-right: 8px;
+}
+
+.ml-2 {
+ margin-left: 8px;
+}
+
.\!ml-12 {
margin-left: 48px !important;
}
@@ -3254,6 +3299,10 @@ input:-webkit-autofill:active {
/* Connection handles styles */
+.react-flow__edge {
+ z-index: 2000 !important;
+}
+
.mental-canvas .react-flow__edge-path {
stroke: var(--text-main);
opacity: 0.3;
@@ -4053,6 +4102,133 @@ input:-webkit-autofill:active {
transition: 0.4s;
}
+/* Block Reactions Styles */
+.block-reactions-container {
+ position: absolute;
+ top: 100%;
+ right: 16px;
+ left: auto;
+ transform: translateY(-50%);
+ z-index: 100;
+ pointer-events: auto;
+}
+
+.reactions-wrapper {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.reactions-list {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ background-color: var(--bg-island);
+ border: 1px solid var(--border);
+ border-radius: 9999px;
+ padding: 4px 6px;
+ box-shadow:
+ 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+ 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.reaction-badge {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ padding: 2px 6px;
+ border-radius: 9999px;
+ font-size: 12px;
+ line-height: 1;
+ cursor: pointer;
+ border: 1px solid transparent;
+ background-color: transparent;
+ color: var(--text-secondary);
+ transition: all 0.2s;
+}
+
+.reaction-badge:hover {
+ background-color: rgba(255, 255, 255, 0.05);
+ color: var(--text-main);
+}
+
+.reaction-badge.active {
+ background-color: rgba(var(--accent-rgb), 0.1);
+ border-color: rgba(var(--accent-rgb), 0.2);
+ color: var(--accent);
+}
+
+.add-reaction-group {
+ position: relative;
+ display: flex;
+ align-items: center;
+}
+
+.add-reaction-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ background-color: var(--bg-island);
+ border: 1px solid var(--border);
+ color: var(--text-secondary);
+ cursor: pointer;
+ transition: all 0.2s;
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.add-reaction-btn:hover,
+.add-reaction-btn.active {
+ background-color: var(--bg-island);
+ border-color: var(--text-secondary);
+ color: var(--text-main);
+ transform: scale(1.1);
+}
+
+.emoji-picker-overlay {
+ position: fixed;
+ inset: 0;
+ z-index: 998;
+}
+
+.emoji-picker-tooltip {
+ position: absolute;
+ bottom: 100%;
+ right: 0;
+ left: auto;
+ transform: none;
+ margin-bottom: 8px;
+ background-color: var(--bg-island);
+ border: 1px solid var(--border);
+ border-radius: 8px;
+ padding: 8px;
+ display: flex;
+ gap: 4px;
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+ z-index: 999;
+}
+
+.emoji-option-btn {
+ font-size: 16px;
+ padding: 6px;
+ border-radius: 6px;
+ cursor: pointer;
+ background: transparent;
+ border: none;
+ transition: background-color 0.2s;
+}
+
+.emoji-option-btn:hover {
+ background-color: rgba(255, 255, 255, 0.05);
+ transform: scale(1.2);
+}
+
+.emoji-option-btn.active {
+ background-color: rgba(var(--accent-rgb), 0.1);
+}
+
.theme-checkbox:checked::before {
left: calc(100% - 2.25em - 0.438em);
background-position: 0;
diff --git a/src/app/i18n/en.json b/src/app/i18n/en.json
index 8735a15..ad70efb 100644
--- a/src/app/i18n/en.json
+++ b/src/app/i18n/en.json
@@ -86,6 +86,7 @@
},
"blocks": {
"addColor": "Add Color",
+ "addReaction": "Add Reaction",
"addTask": "Add task",
"blockTransferred": "Ownership transferred successfully",
"blockTypeChecklist": "Checklist",
@@ -153,6 +154,7 @@
"phonePlaceholder": "+00 000 000 000",
"pulls": "Open Pull Requests",
"release": "Latest Release",
+ "searchEmoji": "Search Emoji",
"stars": "Stars",
"taskPlaceholder": "Task...",
"title": "Title",
@@ -196,11 +198,17 @@
"enabled": "Enabled",
"error": "Error",
"export": "Export",
+ "failedToCopy": "Failed to copy",
"import": "Import",
"loading": "Loading...",
"me": "Me",
"notFound": "Not found",
"refresh": "Refresh",
+ "reloadPage": "Reload Page",
+ "contactSupport": "Contact Support",
+ "canvasErrorTitle": "Something went wrong",
+ "canvasErrorDescription": "We encountered an error while rendering the canvas. This might be due to a temporary glitch or a corrupted block.",
+ "clickToCopyError": "Error message (click to copy it) :",
"rename": "Rename",
"restore": "Restore",
"save": "Save",
@@ -210,6 +218,7 @@
"showMore": "Show more",
"success": "Success",
"unknown": "Unknown",
+ "unknownError": "Unknown error",
"update": "Update"
},
"dashboard": {
@@ -229,7 +238,8 @@
"statusMine": "Mine",
"statusShared": "Shared",
"team": "Team",
- "trash": "Trash"
+ "trash": "Trash",
+ "emptyTrashButton": "Empty Trash"
},
"gitTokens": {
"add": "Add Token",
@@ -306,6 +316,8 @@
"deletePermanently": "Delete Permanently",
"deleteProjectDescription": "Are you sure you want to delete this project? This action is irreversible.",
"deleteProjectTitle": "Delete Project?",
+ "emptyTrashTitle": "Empty Trash?",
+ "emptyTrashDescription": "Are you sure you want to permanently delete all items in the trash? This action is irreversible.",
"deleteUserDescription": "This action is irreversible. The user will lose all access to the workspace.",
"deleteUserTitle": "Delete user?",
"directInviteLabel": "Invite link:",
diff --git a/src/app/i18n/fr.json b/src/app/i18n/fr.json
index ee5ef9c..e98227b 100644
--- a/src/app/i18n/fr.json
+++ b/src/app/i18n/fr.json
@@ -86,6 +86,7 @@
},
"blocks": {
"addColor": "Ajouter une couleur",
+ "addReaction": "Ajouter une réaction",
"addTask": "Ajouter une tâche",
"blockTransferred": "Propriété transférée avec succès",
"blockTypeChecklist": "Checklist",
@@ -153,6 +154,7 @@
"phonePlaceholder": "+00 000 000 000",
"pulls": "Pull Requests Ouvertes",
"release": "Dernière Release",
+ "searchEmoji": "Rechercher un emoji",
"stars": "Étoiles",
"taskPlaceholder": "Tâche...",
"title": "Titre",
@@ -196,11 +198,17 @@
"enabled": "Activé",
"error": "Erreur",
"export": "Exporter",
+ "failedToCopy": "Échec de la copie",
"import": "Importer",
"loading": "Chargement...",
"me": "Moi",
"notFound": "Introuvable",
"refresh": "Actualiser",
+ "reloadPage": "Actualiser la page",
+ "contactSupport": "Contacter le support",
+ "canvasErrorTitle": "Quelque chose s'est mal passé",
+ "canvasErrorDescription": "Nous avons rencontré une erreur lors du rendu du canevas. Cela peut être dû à un problème temporaire ou à un bloc corrompu.",
+ "clickToCopyError": "Message d'erreur (cliquez pour copier) :",
"rename": "Renommer",
"restore": "Restaurer",
"save": "Enregistrer",
@@ -210,6 +218,7 @@
"showMore": "Afficher plus",
"success": "Succès",
"unknown": "Inconnu",
+ "unknownError": "Erreur inconnue",
"update": "Mettre à jour"
},
"dashboard": {
@@ -227,10 +236,11 @@
"recent": "Récents",
"sharedWithMe": "Partagés avec moi",
"starred": "Favoris",
- "statusMine": "Perso",
+ "statusMine": "Moi",
"statusShared": "Partagé",
"team": "Équipe",
- "trash": "Corbeille"
+ "trash": "Corbeille",
+ "emptyTrashButton": "Vider la corbeille"
},
"gitTokens": {
"add": "Ajouter un jeton",
@@ -307,6 +317,9 @@
"deletePermanently": "Supprimer définitivement",
"deleteProjectDescription": "Êtes-vous sûr de vouloir supprimer ce projet ? Cette action est irréversible.",
"deleteProjectTitle": "Supprimer le projet ?",
+ "emptyTrashTitle": "Vider la corbeille ?",
+ "emptyTrashDescription": "Êtes-vous sûr de vouloir supprimer définitivement tous les éléments de la corbeille ? Cette action est irréversible.",
+ "exportProject": "Exporter le projet",
"deleteUserDescription": "Cette action est irréversible. L'utilisateur perdra tout accès à l'espace de travail.",
"deleteUserTitle": "Supprimer l'utilisateur ?",
"directInviteLabel": "Lien d'invitation :",
diff --git a/src/app/i18n/it.json b/src/app/i18n/it.json
index 888e508..0d82665 100644
--- a/src/app/i18n/it.json
+++ b/src/app/i18n/it.json
@@ -86,6 +86,7 @@
},
"blocks": {
"addColor": "Aggiungi Colore",
+ "addReaction": "Aggiungi reazione",
"addTask": "Aggiungi attività",
"blockTransferred": "Proprietà trasferita con successo",
"blockTypeChecklist": "Checklist",
@@ -152,7 +153,8 @@
"paletteTitle": "Colori",
"phonePlaceholder": "+00 000 000 000",
"pulls": "Pull Request Aperte",
- "release": "Ultima Release",
+ "release": "Ultima versione",
+ "searchEmoji": "Cerca Emoji",
"stars": "Stelle",
"taskPlaceholder": "Attività...",
"title": "Titolo",
@@ -196,11 +198,17 @@
"enabled": "Abilitato",
"error": "Errore",
"export": "Esporta",
+ "failedToCopy": "Copia fallita",
"import": "Importa",
"loading": "Caricamento in corso...",
"me": "Io",
"notFound": "Non trovato",
"refresh": "Aggiorna",
+ "reloadPage": "Aggiorna la pagina",
+ "contactSupport": "Contatta il supporto",
+ "canvasErrorTitle": "Qualcosa è andato storto",
+ "canvasErrorDescription": "Abbiamo riscontrato un errore durante il rendering del canvas. Potrebbe essere dovuto a un problema temporaneo o a un blocco corrotto.",
+ "clickToCopyError": "Messaggio di errore (clicca per copiare) :",
"rename": "Rinomina",
"restore": "Ripristina",
"save": "Salva",
@@ -210,6 +218,7 @@
"showMore": "Mostra altro",
"success": "Successo",
"unknown": "Sconosciuto",
+ "unknownError": "Errore sconosciuto",
"update": "Aggiorna"
},
"dashboard": {
@@ -230,7 +239,8 @@
"statusMine": "Miei",
"statusShared": "Condivisi",
"team": "Team",
- "trash": "Cestino"
+ "trash": "Cestino",
+ "emptyTrashButton": "Svuota cestino"
},
"gitTokens": {
"add": "Aggiungi Token",
@@ -307,6 +317,9 @@
"deletePermanently": "Elimina definitivamente",
"deleteProjectDescription": "Sei sicuro di voler eliminare questo progetto? Questa azione è irreversibile.",
"deleteProjectTitle": "Eliminare Progetto?",
+ "emptyTrashDescription": "Sei sicuro di voler eliminare permanentemente tutti gli elementi nel cestino? Questa azione è irreversibile.",
+ "emptyTrashTitle": "Svuota cestino?",
+ "exportProject": "Esporta progetto",
"deleteUserDescription": "Questa azione è irreversibile. L'utente perderà ogni accesso all'area di lavoro.",
"deleteUserTitle": "Eliminare l'utente?",
"directInviteLabel": "Link di invito:",
diff --git a/src/app/lib/db.ts b/src/app/lib/db.ts
index 8ce5f6c..819f2c9 100644
--- a/src/app/lib/db.ts
+++ b/src/app/lib/db.ts
@@ -69,6 +69,12 @@ export function getPostgresConfig() {
export function getSqlitePath() {
const storageDir = getStorageDir();
+
+ // Force memory or test db during tests to prevent data loss
+ if (process.env.VITEST) {
+ return process.env.SQLITE_PATH || ":memory:";
+ }
+
if (process.env.SQLITE_PATH === ":memory:") {
return ":memory:";
}
@@ -151,6 +157,14 @@ function getSqlite(): DatabaseDriver.Database {
if (state.sqliteInstance) return state.sqliteInstance;
const dbPath = getSqlitePath();
+ if (process.env.VITEST && dbPath !== ":memory:") {
+ throw new Error(
+ `CRITICAL: Vitest is attempting to connect to a physical database file at ${dbPath}. ` +
+ "Tests must ONLY use :memory: to prevent data loss. " +
+ "Check your environment variables and vitest.config.ts.",
+ );
+ }
+
if (!process.env.VITEST) {
logger.info(`Using SQLite database at: ${dbPath}`);
}
diff --git a/src/app/lib/graph.ts b/src/app/lib/graph.ts
index 7db6d73..44e0b98 100644
--- a/src/app/lib/graph.ts
+++ b/src/app/lib/graph.ts
@@ -157,6 +157,7 @@ export function transformLink(dbLink: Record): Edge {
animated?: number | boolean;
type?: string;
data?: string | Record;
+ label?: string;
markerEnd?: string;
};
@@ -172,7 +173,7 @@ export function transformLink(dbLink: Record): Edge {
type: link.type || "connection",
animated: Boolean(link.animated),
markerEnd: link.markerEnd || "connection-arrow",
- data,
+ data: { ...data, label: link.label },
};
}
@@ -190,6 +191,7 @@ export function prepareLinkForDb(link: Edge, projectId: string) {
animated: link.animated ? 1 : 0,
type: link.type || "connection",
data: JSON.stringify(link.data || {}),
+ label: (link.data as Record)?.label as string | null,
updatedAt: new Date().toISOString(),
};
}
diff --git a/src/app/lib/migrations.ts b/src/app/lib/migrations.ts
index 9ac3202..750dc39 100644
--- a/src/app/lib/migrations.ts
+++ b/src/app/lib/migrations.ts
@@ -18,6 +18,7 @@ import * as fixFolderRlsRecursionMigration from "../db/migrations/15FixFolderRls
import * as addLinkPreviewsMigration from "../db/migrations/16AddLinkPreviews";
import * as migrateLinkMetadataMigration from "../db/migrations/17MigrateLinkMetadata";
import * as addSketchBlockTypeMigration from "../db/migrations/18AddSketchBlockType";
+import * as addLabelsAndReactionsMigration from "../db/migrations/19AddLabelsAndReactions";
class StaticMigrationProvider implements MigrationProvider {
async getMigrations(): Promise> {
@@ -38,6 +39,7 @@ class StaticMigrationProvider implements MigrationProvider {
"16AddLinkPreviews": addLinkPreviewsMigration,
"17MigrateLinkMetadata": migrateLinkMetadataMigration,
"18AddSketchBlockType": addSketchBlockTypeMigration,
+ "19AddLabelsAndReactions": addLabelsAndReactionsMigration,
};
}
}
diff --git a/src/app/lib/types/db.ts b/src/app/lib/types/db.ts
index 2905ffa..076027c 100644
--- a/src/app/lib/types/db.ts
+++ b/src/app/lib/types/db.ts
@@ -28,6 +28,9 @@ export type Block = Selectable;
export type NewBlock = Insertable;
export type BlockUpdate = Updateable;
+export type BlockReaction = Selectable;
+export type NewBlockReaction = Insertable;
+
export type Link = Selectable;
export type NewLink = Insertable;
@@ -156,10 +159,19 @@ export interface linksTable {
sourceOrientation: string | null;
targetOrientation: string | null;
data: string | null; // JSON string
+ label: string | null;
createdAt: ColumnType;
updatedAt: ColumnType;
}
+export interface blockReactionsTable {
+ id: Generated;
+ blockId: string;
+ userId: string;
+ emoji: string;
+ createdAt: ColumnType;
+}
+
export interface linkPreviewsTable {
id: Generated;
blockId: string;
@@ -280,6 +292,7 @@ export interface database {
githubRepoStats: githubRepoStatsTable;
linkPreviews: linkPreviewsTable;
userGitTokens: userGitTokensTable;
+ blockReactions: blockReactionsTable;
}
export interface githubRepoStatsTable {
diff --git a/src/app/login/LoginClient.tsx b/src/app/login/LoginClient.tsx
index 0e42393..f6f7395 100644
--- a/src/app/login/LoginClient.tsx
+++ b/src/app/login/LoginClient.tsx
@@ -290,7 +290,7 @@ export function LoginClient() {
>
{dict.auth.continueWith}{" "}
- {dict.common[provider as keyof typeof dict.common]}
+ {dict.auth[provider as keyof typeof dict.auth]}
) : (
@@ -335,7 +335,7 @@ export function LoginClient() {
>
{dict.auth.continueWith}{" "}
- {dict.common[provider as keyof typeof dict.common]}
+ {dict.auth[provider as keyof typeof dict.auth]}
);
diff --git a/src/auth.ts b/src/auth.ts
index 2452e24..4c65eda 100644
--- a/src/auth.ts
+++ b/src/auth.ts
@@ -202,6 +202,8 @@ export const { handlers, signIn, signOut, auth } = NextAuth(async () => {
username: user.username,
displayName: user.displayName,
role: user.role,
+ avatarUrl: user.avatarUrl,
+ color: user.color,
};
},
}),
@@ -357,29 +359,55 @@ export const { handlers, signIn, signOut, auth } = NextAuth(async () => {
},
async jwt({ token, user, account }) {
if (user && account) {
- const email = user.email?.toLowerCase();
- // For OAuth providers, user.id is the provider's ID.
- // We need to find our internal user by email.
- const dbUser = await db
- .selectFrom("users")
- .select([
- "id",
- "role",
- "avatarUrl",
- "color",
- "username",
- "displayName",
- ])
- .where("email", "=", email!)
- .executeTakeFirst();
+ // 1. Credentials Provider: user object already contains internal DB data from authorize()
+ if (account.provider === "credentials") {
+ if (isAuthUser(user)) {
+ token.id = user.id;
+ token.role = user.role;
+ token.avatarUrl = user.avatarUrl;
+ token.color = user.color;
+ token.username = user.username;
+ token.displayName = user.displayName;
+ } else {
+ console.warn(
+ "[Auth] Invalid user object from credentials provider",
+ user,
+ );
+ }
+ } else {
+ // 2. OAuth Provider: user.id is provider ID, need to fetch internal user
+ const email = user.email?.toLowerCase();
+ if (email) {
+ const dbUser = await db
+ .selectFrom("users")
+ .select([
+ "id",
+ "role",
+ "avatarUrl",
+ "color",
+ "username",
+ "displayName",
+ ])
+ .where("email", "=", email)
+ .executeTakeFirst();
+
+ if (dbUser) {
+ token.id = dbUser.id;
+ token.role = dbUser.role;
+ token.avatarUrl = dbUser.avatarUrl;
+ token.color = dbUser.color;
+ token.username = dbUser.username;
+ token.displayName = dbUser.displayName;
+ }
+ }
+ }
- if (dbUser) {
- token.id = dbUser.id;
- token.role = dbUser.role;
- token.avatarUrl = dbUser.avatarUrl;
- token.color = dbUser.color;
- token.username = dbUser.username;
- token.displayName = dbUser.displayName;
+ // Log warning if ID is missing
+ if (!token.id && !token.sub) {
+ console.warn("[Auth] JWT callback: Token has no ID or SUB", {
+ accountProvider: account?.provider,
+ userEmail: user?.email,
+ });
}
}
return token;
@@ -387,11 +415,13 @@ export const { handlers, signIn, signOut, auth } = NextAuth(async () => {
async session({ session, token }) {
if (token && session.user) {
const user = session.user as unknown as AuthUser;
- user.id = token.id as string;
- user.role = token.role as "superadmin" | "admin" | "member";
+ // Fallback to sub if id is missing
+ user.id = (token.id || token.sub) as string;
+ user.role =
+ (token.role as "superadmin" | "admin" | "member") || "member";
user.avatarUrl = token.avatarUrl as string | null;
user.color = token.color as string | null;
- user.username = token.username as string;
+ user.username = (token.username as string) || "";
user.displayName = token.displayName as string | null;
}
return session;
@@ -427,6 +457,17 @@ export interface AuthUser {
color?: string | null;
}
+export function isAuthUser(user: unknown): user is AuthUser {
+ return (
+ typeof user === "object" &&
+ user !== null &&
+ typeof (user as AuthUser).id === "string" &&
+ typeof (user as AuthUser).email === "string" &&
+ typeof (user as AuthUser).username === "string" &&
+ ["superadmin", "admin", "member"].includes((user as AuthUser).role)
+ );
+}
+
export async function getAuthUser(): Promise {
const session = await auth();
const user = session?.user as unknown as AuthUser | undefined;
diff --git a/src/test/setup.ts b/src/test/setup.ts
index 556aa55..d48e08c 100644
--- a/src/test/setup.ts
+++ b/src/test/setup.ts
@@ -1,15 +1,7 @@
-import { beforeAll, afterAll } from "vitest";
+import { beforeAll } from "vitest";
import { runMigrations } from "../app/lib/migrations";
beforeAll(async () => {
- // Use in-memory SQLite for tests
- process.env.SQLITE_PATH = ":memory:";
- Object.assign(process.env, { NODE_ENV: "development" });
-
// Initialize and migrate
await runMigrations();
});
-
-afterAll(async () => {
- // Cleanup if needed
-});
diff --git a/tsconfig.json b/tsconfig.json
index 9665250..1ae6e44 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,7 @@
{
"compilerOptions": {
"target": "ES2020",
- "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "lib": ["ES2021", "DOM", "DOM.Iterable"],
"module": "ESNext",
"moduleResolution": "bundler",
"allowJs": false,
diff --git a/vitest.config.ts b/vitest.config.ts
index a102c38..c53e1a4 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -6,9 +6,12 @@ export default defineConfig({
test: {
environment: "node",
setupFiles: ["src/test/setup.ts"],
+ env: {
+ SQLITE_PATH: ":memory:",
+ NODE_ENV: "development",
+ },
include: ["**/*.test.ts"],
fileParallelism: false,
- singleThread: true,
coverage: {
provider: "v8",
reporter: ["text", "json", "html"],
{formatDate(data.updatedAt || "")}
@@ -358,6 +377,14 @@ const VideoBlock = memo(({ id, data, selected }: VideoBlockProps) => {