feat(shared-ui,shared-stores): add FavoriteButton component and toggleField utility

FavoriteButton: reusable heart/star/pin toggle with filled/outline states,
accessible labels, configurable colors. toggleField: generic boolean field
toggle for Dexie records (isFavorite, isPinned, etc.) with timestamp.
Includes 11 tests (6 FavoriteButton + 5 toggleField).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

packages/shared-ui/src/index.ts

@@ -2,7 +2,15 @@
 export { Text, Button, Badge, Card } from './atoms';
 
 // Molecules
-export { Toggle, Input, Select, Textarea, Checkbox, FilterDropdown } from './molecules';
+export {
+	Toggle,
+	Input,
+	Select,
+	Textarea,
+	Checkbox,
+	FilterDropdown,
+	FavoriteButton,
+} from './molecules';
 export type { SelectOption, FilterDropdownOption } from './molecules';
 
 // Stats

packages/shared-ui/src/molecules/FavoriteButton.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { Heart, Star, PushPin } from '@manacore/shared-icons';
+
+	/**
+	 * Reusable favorite/pin toggle button.
+	 * Renders a heart, star, or pin icon that toggles between filled and outline.
+	 */
+
+	interface Props {
+		active: boolean;
+		onclick: () => void;
+		/** Icon variant */
+		variant?: 'heart' | 'star' | 'pin';
+		/** Icon size in pixels */
+		size?: number;
+		/** Active color (CSS color) */
+		activeColor?: string;
+		/** Inactive color (CSS color) */
+		inactiveColor?: string;
+		/** Extra CSS classes on the button */
+		class?: string;
+		/** Accessible label */
+		label?: string;
+	}
+
+	let {
+		active,
+		onclick,
+		variant = 'heart',
+		size = 18,
+		activeColor = variant === 'pin' ? 'var(--color-primary, #3b82f6)' : '#ef4444',
+		inactiveColor = 'currentColor',
+		class: className = '',
+		label,
+	}: Props = $props();
+
+	const defaultLabel = $derived(
+		variant === 'pin'
+			? active
+				? 'Loslösen'
+				: 'Anpinnen'
+			: active
+				? 'Favorit entfernen'
+				: 'Favorit'
+	);
+
+	const icons = { heart: Heart, star: Star, pin: PushPin };
+	const Icon = $derived(icons[variant]);
+</script>
+
+<button
+	type="button"
+	{onclick}
+	class="inline-flex items-center justify-center rounded-md p-1 transition-colors hover:bg-black/5 dark:hover:bg-white/10 {className}"
+	aria-label={label ?? defaultLabel}
+	title={label ?? defaultLabel}
+>
+	<Icon
+		{size}
+		weight={active ? 'fill' : 'regular'}
+		class="transition-colors"
+		style="color: {active ? activeColor : inactiveColor}"
+	/>
+</button>

packages/shared-ui/src/molecules/FavoriteButton.test.ts

@@ -0,0 +1,47 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import FavoriteButton from './FavoriteButton.svelte';
+
+describe('FavoriteButton', () => {
+	it('renders with heart icon by default', () => {
+		const { container } = render(FavoriteButton, {
+			props: { active: false, onclick: vi.fn() },
+		});
+		expect(container.querySelector('button')).toBeInTheDocument();
+	});
+
+	it('has correct aria-label when inactive', () => {
+		render(FavoriteButton, {
+			props: { active: false, onclick: vi.fn() },
+		});
+		expect(screen.getByRole('button', { name: 'Favorit' })).toBeInTheDocument();
+	});
+
+	it('has correct aria-label when active', () => {
+		render(FavoriteButton, {
+			props: { active: true, onclick: vi.fn() },
+		});
+		expect(screen.getByRole('button', { name: 'Favorit entfernen' })).toBeInTheDocument();
+	});
+
+	it('calls onclick when clicked', async () => {
+		const onclick = vi.fn();
+		render(FavoriteButton, { props: { active: false, onclick } });
+		await fireEvent.click(screen.getByRole('button'));
+		expect(onclick).toHaveBeenCalledOnce();
+	});
+
+	it('uses pin labels for pin variant', () => {
+		render(FavoriteButton, {
+			props: { active: false, onclick: vi.fn(), variant: 'pin' },
+		});
+		expect(screen.getByRole('button', { name: 'Anpinnen' })).toBeInTheDocument();
+	});
+
+	it('uses custom label when provided', () => {
+		render(FavoriteButton, {
+			props: { active: false, onclick: vi.fn(), label: 'Custom' },
+		});
+		expect(screen.getByRole('button', { name: 'Custom' })).toBeInTheDocument();
+	});
+});

packages/shared-ui/src/molecules/index.ts

@@ -4,6 +4,7 @@ export { default as Select } from './Select.svelte';
 export { default as Textarea } from './Textarea.svelte';
 export { default as Checkbox } from './Checkbox.svelte';
 export { default as FilterDropdown } from './FilterDropdown.svelte';
+export { default as FavoriteButton } from './FavoriteButton.svelte';
 export type { SelectOption } from './Select.types';
 export type { FilterDropdownOption } from './FilterDropdown.types';