Sticky Note

1<script lang="ts" module>
2	import { tv, type VariantProps } from 'tailwind-variants';
3 
4	export const stickyNoteVariants = tv({
5		base: 'group relative flex flex-col gap-1 rounded-sm p-3 text-sm shadow-md transition-shadow',
6		variants: {
7			color: {
8				yellow: 'bg-amber-200 text-amber-950',
9				pink: 'bg-pink-200 text-pink-950',
10				blue: 'bg-sky-200 text-sky-950',
11				green: 'bg-emerald-200 text-emerald-950',
12				purple: 'bg-violet-200 text-violet-950',
13				gray: 'bg-neutral-200 text-neutral-900'
14			},
15			size: {
16				sm: 'min-h-24 w-40',
17				md: 'min-h-32 w-52',
18				lg: 'min-h-44 w-64'
19			}
20		},
21		defaultVariants: { color: 'yellow', size: 'md' }
22	});
23 
24	export type StickyNoteColor = NonNullable<VariantProps<typeof stickyNoteVariants>['color']>;
25	export type StickyNoteSize = VariantProps<typeof stickyNoteVariants>['size'];
26 
27	export const STICKY_NOTE_COLORS: StickyNoteColor[] = [
28		'yellow',
29		'pink',
30		'blue',
31		'green',
32		'purple',
33		'gray'
34	];
35 
36	/** Swatch fills for the palette. Kept separate so the classes stay statically visible to Tailwind. */
37	export const STICKY_NOTE_SWATCH: Record<StickyNoteColor, string> = {
38		yellow: 'bg-amber-200',
39		pink: 'bg-pink-200',
40		blue: 'bg-sky-200',
41		green: 'bg-emerald-200',
42		purple: 'bg-violet-200',
43		gray: 'bg-neutral-200'
44	};
45</script>
46 
47<script lang="ts">
48	import { cn } from '$UTILS$';
49	import { tick, type Snippet } from 'svelte';
50	import { X } from '@lucide/svelte';
51 
52	let {
53		text = $bindable(''),
54		color = $bindable<StickyNoteColor>('yellow'),
55		size = 'md',
56		placeholder = 'Write something…',
57		editable = true,
58		showPalette = true,
59		removable = false,
60		rotate = 0,
61		author,
62		class: className,
63		onremove,
64		onedit,
65		children,
66		...rest
67	}: {
68		text?: string;
69		color?: StickyNoteColor;
70		size?: StickyNoteSize;
71		placeholder?: string;
72		editable?: boolean;
73		/** Show the colour swatches on hover. */
74		showPalette?: boolean;
75		removable?: boolean;
76		/** Degrees of tilt, for a pinned-to-the-wall look. */
77		rotate?: number;
78		author?: string;
79		class?: string;
80		onremove?: () => void;
81		onedit?: (text: string) => void;
82		children?: Snippet;
83		[key: string]: unknown;
84	} = $props();
85 
86	let editing = $state(false);
87	let field = $state<HTMLTextAreaElement | null>(null);
88 
89	async function startEditing() {
90		if (!editable) return;
91		editing = true;
92		await tick();
93		field?.focus();
94		field?.setSelectionRange(text.length, text.length);
95	}
96 
97	function stopEditing() {
98		editing = false;
99		onedit?.(text);
100	}
101</script>
102 
103// … truncated