Ka-Note/ka-note/client/src/lib/components/WiedervorlageCard.svelte

<script lang="ts">
	import { liveQuery } from 'dexie';
	import { db } from '$lib/db/schema';
	import { resolveWiedervorlage, setWiedervorlage, convertToTopic, softDeleteHistoryEntry } from '$lib/db/repositories';
	import type { HistoryEntry } from '@ka-note/shared';
	import RenderedMarkdown from './RenderedMarkdown.svelte';
	import LinkTitle from './LinkTitle.svelte';

	interface Props {
		entry: HistoryEntry;
	}
	let { entry }: Props = $props();

	let showVerschieben = $state(false);
	let newDate = $state('');
	let showConvert = $state(false);
	let selectedContextId = $state('');

	const meetingContexts = liveQuery(() =>
		db.contexts
			.filter(c => !c.deletedAt && c.type === 'meeting' && c.id !== 'daily-log')
			.sortBy('sortOrder')
	);

	const lines = $derived(entry.text.split('\n'));
	const title = $derived(lines[0]);
	const body = $derived(lines.slice(1).join('\n').trim());

	async function handleOk() {
		await resolveWiedervorlage(entry.id);
	}

	async function handleDelete() {
		await softDeleteHistoryEntry(entry.id);
	}

	async function handleVerschieben() {
		if (!newDate) return;
		await setWiedervorlage(entry.id, newDate);
		showVerschieben = false;
		newDate = '';
	}

	async function handleConvert() {
		if (!selectedContextId) return;
		await convertToTopic(entry.id, selectedContextId);
		showConvert = false;
		selectedContextId = '';
	}
</script>

<div class="mb-3 rounded-lg border border-amber-500/60 bg-amber-950/30 p-3">
	<div class="mb-2 flex items-start gap-2">
		<span class="text-xs font-semibold uppercase tracking-wider text-amber-400">⏰ Wiedervorlage {entry.wiedervorlageDate}</span>
	</div>
	<div class="mb-3">
		<div class="font-bold text-white"><LinkTitle text={title} /></div>
		{#if body}
			<RenderedMarkdown text={body} class="mt-1 text-sm text-[#ccc]" />
		{/if}
	</div>

	{#if showVerschieben}
		<div class="mb-2 flex items-center gap-2">
			<input
				type="date"
				class="rounded border border-[#444] bg-bg px-2 py-1 text-sm text-white"
				bind:value={newDate}
			/>
			<button
				class="rounded bg-amber-600 px-3 py-1 text-sm font-bold text-white hover:brightness-110"
				onclick={handleVerschieben}
			>OK</button>
			<button
				class="rounded bg-[#444] px-3 py-1 text-sm text-white hover:bg-[#555]"
				onclick={() => showVerschieben = false}
			>Abbrechen</button>
		</div>
	{:else if showConvert}
		<div class="mb-2 flex items-center gap-2">
			<select
				class="flex-1 rounded border border-[#444] bg-bg px-2 py-1 text-sm text-white"
				bind:value={selectedContextId}
			>
				<option value="">— Kontext wählen —</option>
				{#each $meetingContexts ?? [] as ctx}
					<option value={ctx.id}>{ctx.name}</option>
				{/each}
			</select>
			<button
				class="rounded bg-accent px-3 py-1 text-sm font-bold text-white hover:brightness-110"
				onclick={handleConvert}
				disabled={!selectedContextId}
			>Erstellen</button>
			<button
				class="rounded bg-[#444] px-3 py-1 text-sm text-white hover:bg-[#555]"
				onclick={() => showConvert = false}
			>Abbrechen</button>
		</div>
	{:else}
		<div class="flex gap-1.5">
			<button
				class="rounded bg-green-700 px-2.5 py-1.5 text-base leading-none text-white hover:brightness-110 active:brightness-90"
				title="Erledigt"
				onclick={handleOk}
			>✓</button>
			<button
				class="rounded bg-amber-700 px-2.5 py-1.5 text-base leading-none text-white hover:brightness-110 active:brightness-90"
				title="Verschieben"
				onclick={() => showVerschieben = true}
			>📅</button>
			<button
				class="rounded bg-[#444] px-2.5 py-1.5 text-base leading-none text-white hover:bg-[#555] active:bg-[#555]"
				title="In Thema wandeln"
				onclick={() => showConvert = true}
			>↗</button>
			<button
				class="ml-auto rounded bg-red-900/60 px-2.5 py-1.5 text-base leading-none text-red-300 hover:bg-red-800 active:bg-red-800"
				title="Löschen"
				onclick={handleDelete}
			>🗑</button>
		</div>
	{/if}
</div>