bvandeusenandClaude Opus 4.8
894dd4ac42
Backend /api/graph now returns ALL non-trashed notes as nodes, each with its first label's color; edges unchanged. GraphView reworked: drag a node to reposition it (pins to cursor + reheats the sim), pan the background, wheel- zoom toward the cursor, a "Show unlinked notes" toggle (connected-only by default), a Reset view button, and nodes filled by label color. Click (a press without a drag) still opens the note; re-fetches on view open. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FRgehjoz7Yv8LkUfADxACm
87 lines
3.3 KiB
TypeScript
87 lines
3.3 KiB
TypeScript
// Note color palette. Keys match the backend's NOTE_COLORS; the actual tints live
|
|
// here (frontend concern). Class strings are full literals so Tailwind's content
|
|
// scanner (src/**/*.ts) keeps them in the build.
|
|
|
|
export const NOTE_COLOR_KEYS = [
|
|
"default",
|
|
"red",
|
|
"orange",
|
|
"yellow",
|
|
"green",
|
|
"teal",
|
|
"blue",
|
|
"purple",
|
|
"pink",
|
|
"gray",
|
|
] as const;
|
|
|
|
export type NoteColor = (typeof NOTE_COLOR_KEYS)[number];
|
|
|
|
export const NOTE_CARD_CLASSES: Record<NoteColor, string> = {
|
|
default: "bg-white border-neutral-200 dark:bg-neutral-900 dark:border-neutral-700",
|
|
red: "bg-red-50 border-red-200 dark:bg-red-950/40 dark:border-red-900",
|
|
orange: "bg-orange-50 border-orange-200 dark:bg-orange-950/40 dark:border-orange-900",
|
|
yellow: "bg-amber-50 border-amber-200 dark:bg-amber-950/40 dark:border-amber-900",
|
|
green: "bg-green-50 border-green-200 dark:bg-green-950/40 dark:border-green-900",
|
|
teal: "bg-teal-50 border-teal-200 dark:bg-teal-950/40 dark:border-teal-900",
|
|
blue: "bg-blue-50 border-blue-200 dark:bg-blue-950/40 dark:border-blue-900",
|
|
purple: "bg-purple-50 border-purple-200 dark:bg-purple-950/40 dark:border-purple-900",
|
|
pink: "bg-pink-50 border-pink-200 dark:bg-pink-950/40 dark:border-pink-900",
|
|
gray: "bg-neutral-100 border-neutral-300 dark:bg-neutral-800 dark:border-neutral-700",
|
|
};
|
|
|
|
export const NOTE_SWATCH_CLASSES: Record<NoteColor, string> = {
|
|
default: "bg-white dark:bg-neutral-600",
|
|
red: "bg-red-300 dark:bg-red-700",
|
|
orange: "bg-orange-300 dark:bg-orange-700",
|
|
yellow: "bg-amber-300 dark:bg-amber-700",
|
|
green: "bg-green-300 dark:bg-green-700",
|
|
teal: "bg-teal-300 dark:bg-teal-700",
|
|
blue: "bg-blue-300 dark:bg-blue-700",
|
|
purple: "bg-purple-300 dark:bg-purple-700",
|
|
pink: "bg-pink-300 dark:bg-pink-700",
|
|
gray: "bg-neutral-400 dark:bg-neutral-500",
|
|
};
|
|
|
|
// Label chip tints (bg + readable text), keyed by the same color vocabulary.
|
|
export const LABEL_CHIP_CLASSES: Record<NoteColor, string> = {
|
|
default: "bg-black/5 text-neutral-600 dark:bg-white/10 dark:text-neutral-300",
|
|
red: "bg-red-100 text-red-700 dark:bg-red-950/50 dark:text-red-300",
|
|
orange: "bg-orange-100 text-orange-700 dark:bg-orange-950/50 dark:text-orange-300",
|
|
yellow: "bg-amber-100 text-amber-800 dark:bg-amber-950/50 dark:text-amber-300",
|
|
green: "bg-green-100 text-green-700 dark:bg-green-950/50 dark:text-green-300",
|
|
teal: "bg-teal-100 text-teal-700 dark:bg-teal-950/50 dark:text-teal-300",
|
|
blue: "bg-blue-100 text-blue-700 dark:bg-blue-950/50 dark:text-blue-300",
|
|
purple: "bg-purple-100 text-purple-700 dark:bg-purple-950/50 dark:text-purple-300",
|
|
pink: "bg-pink-100 text-pink-700 dark:bg-pink-950/50 dark:text-pink-300",
|
|
gray: "bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200",
|
|
};
|
|
|
|
// Solid fills for graph nodes (SVG needs concrete colors, not Tailwind bg classes).
|
|
// Mid-tone hues read on both the light and dark graph background.
|
|
export const NOTE_NODE_FILL: Record<NoteColor, string> = {
|
|
default: "#9ca3af",
|
|
red: "#ef4444",
|
|
orange: "#f97316",
|
|
yellow: "#f59e0b",
|
|
green: "#22c55e",
|
|
teal: "#14b8a6",
|
|
blue: "#3b82f6",
|
|
purple: "#a855f7",
|
|
pink: "#ec4899",
|
|
gray: "#6b7280",
|
|
};
|
|
|
|
export const NOTE_COLOR_LABELS: Record<NoteColor, string> = {
|
|
default: "Default",
|
|
red: "Red",
|
|
orange: "Orange",
|
|
yellow: "Yellow",
|
|
green: "Green",
|
|
teal: "Teal",
|
|
blue: "Blue",
|
|
purple: "Purple",
|
|
pink: "Pink",
|
|
gray: "Gray",
|
|
};
|