From 980a5e996c0a024ca6682a1e8f67b8cc866a03a2 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Tue, 7 Apr 2026 14:22:17 +0200
Subject: [PATCH] feat(dreams): symbol library with detail view, meaning, mood
 stats
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a Symbols view to the Dreams module — the long-term differentiator
that lets users build a personal symbol vocabulary instead of relying
on generic dream-dictionary entries.

- New view-mode tabs (Träume / Symbole) at the top of the Dreams view
- SymbolsView: wordcloud-style list of all symbols sized by frequency,
  with name search and inline color dots
- SymbolDetailView: editable name + personal meaning + color picker,
  mood distribution bars, co-occurring symbols, and chronological
  list of all dreams that reference the symbol
- dreamsStore.updateSymbol: rename propagates to all referencing dreams,
  collisions auto-merge with the existing symbol
- dreamsStore.deleteSymbol: removes the symbol from all dreams
- dreamsStore.mergeSymbols: rewrites references and sums counts
- New query helpers: getDreamsWithSymbol, getMoodDistribution,
  getCooccurringSymbols

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/lib/modules/dreams/ListView.svelte    | 498 ++++++++++--------
 .../apps/web/src/lib/modules/dreams/index.ts  |   3 +
 .../web/src/lib/modules/dreams/queries.ts     |  41 ++
 .../modules/dreams/stores/dreams.svelte.ts    |  87 +++
 .../dreams/views/SymbolDetailView.svelte      | 462 ++++++++++++++++
 .../modules/dreams/views/SymbolsView.svelte   | 150 ++++++
 6 files changed, 1018 insertions(+), 223 deletions(-)
 create mode 100644 apps/mana/apps/web/src/lib/modules/dreams/views/SymbolDetailView.svelte
 create mode 100644 apps/mana/apps/web/src/lib/modules/dreams/views/SymbolsView.svelte

diff --git a/apps/mana/apps/web/src/lib/modules/dreams/ListView.svelte b/apps/mana/apps/web/src/lib/modules/dreams/ListView.svelte
index 7e8318e29..4058b15b5 100644
--- a/apps/mana/apps/web/src/lib/modules/dreams/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/dreams/ListView.svelte
@@ -15,9 +15,13 @@
 	import type { ViewProps } from '$lib/app-registry';
 	import { ContextMenu, type ContextMenuItem } from '@mana/shared-ui';
 	import { PencilSimple, PushPin, Trash } from '@mana/shared-icons';
+	import SymbolsView from './views/SymbolsView.svelte';
 
 	let { navigate, goBack, params }: ViewProps = $props();
 
+	type ViewMode = 'list' | 'symbols';
+	let viewMode = $state<ViewMode>('list');
+
 	let dreams$ = useAllDreams();
 	let dreams = $derived(dreams$.value);
 
@@ -165,256 +169,275 @@
 </script>
 
 <div class="app-view">
-	<!-- Quick create -->
-	<form onsubmit={(e) => e.preventDefault()} class="quick-add">
-		<span class="add-icon">&#x1f319;</span>
-		<input
-			class="add-input"
-			type="text"
-			placeholder="Was hast du geträumt? (Enter)"
-			bind:value={newTitle}
-			onkeydown={handleQuickCreate}
-		/>
-	</form>
+	<!-- View switcher -->
+	<div class="view-tabs">
+		<button class="view-tab" class:active={viewMode === 'list'} onclick={() => (viewMode = 'list')}>
+			Träume
+		</button>
+		<button
+			class="view-tab"
+			class:active={viewMode === 'symbols'}
+			onclick={() => (viewMode = 'symbols')}
+		>
+			Symbole
+		</button>
+	</div>
 
-	<!-- Insights ribbon -->
-	{#if insights.total > 0}
-		<div class="insights">
-			<span class="ins-stat">{insights.total} Träume</span>
-			{#if insights.lucidCount > 0}
-				<span class="ins-stat">&#x2728; {insights.lucidCount} Klarträume</span>
-			{/if}
-			{#each insights.topSymbols as sym}
-				<button
-					class="ins-symbol"
-					class:active={symbolFilter === sym.name}
-					onclick={() => selectSymbol(sym.name)}
-				>
-					{sym.name} · {sym.count}
-				</button>
-			{/each}
-			{#if symbolFilter}
-				<button class="ins-clear" onclick={() => (symbolFilter = null)}>×&nbsp;Filter</button>
-			{/if}
-		</div>
-	{/if}
+	{#if viewMode === 'symbols'}
+		<SymbolsView />
+	{:else}
+		<!-- Quick create -->
+		<form onsubmit={(e) => e.preventDefault()} class="quick-add">
+			<span class="add-icon">&#x1f319;</span>
+			<input
+				class="add-input"
+				type="text"
+				placeholder="Was hast du geträumt? (Enter)"
+				bind:value={newTitle}
+				onkeydown={handleQuickCreate}
+			/>
+		</form>
 
-	<!-- Filter tabs -->
-	{#if dreams.length > 0}
-		<div class="filter-tabs">
-			<button
-				class="filter-tab"
-				class:active={filterMode === 'all'}
-				onclick={() => (filterMode = 'all')}
-			>
-				Alle
-			</button>
-			<button
-				class="filter-tab"
-				class:active={filterMode === 'lucid'}
-				onclick={() => (filterMode = 'lucid')}
-			>
-				&#x2728; Klarträume
-			</button>
-			<button
-				class="filter-tab"
-				class:active={filterMode === 'nightmare'}
-				onclick={() => (filterMode = 'nightmare')}
-			>
-				Albträume
-			</button>
-			<button
-				class="filter-tab"
-				class:active={filterMode === 'recurring'}
-				onclick={() => (filterMode = 'recurring')}
-			>
-				Wiederkehrend
-			</button>
-		</div>
-	{/if}
-
-	<!-- Search -->
-	{#if dreams.length > 5}
-		<input
-			class="search-input"
-			type="text"
-			placeholder="Träume durchsuchen..."
-			bind:value={searchQuery}
-		/>
-	{/if}
-
-	<!-- Dream list -->
-	<div class="dream-list">
-		{#each grouped as group (group.label)}
-			<div class="month-label">{group.label}</div>
-			{#each group.dreams as dream (dream.id)}
-				{#if editingId === dream.id}
-					<!-- Inline editor -->
-					<div
-						class="dream-item editing"
-						onkeydown={(e) => {
-							if (e.key === 'Escape') saveEdit();
-						}}
+		<!-- Insights ribbon -->
+		{#if insights.total > 0}
+			<div class="insights">
+				<span class="ins-stat">{insights.total} Träume</span>
+				{#if insights.lucidCount > 0}
+					<span class="ins-stat">&#x2728; {insights.lucidCount} Klarträume</span>
+				{/if}
+				{#each insights.topSymbols as sym}
+					<button
+						class="ins-symbol"
+						class:active={symbolFilter === sym.name}
+						onclick={() => selectSymbol(sym.name)}
 					>
-						<input
-							class="ed-title"
-							type="text"
-							bind:value={editTitle}
-							placeholder="Titel (optional)..."
-							autofocus
-						/>
-						<textarea
-							class="ed-content"
-							bind:value={editContent}
-							placeholder="Erzähl mir den Traum..."
-							rows="5"
-						></textarea>
-						<input
-							class="ed-symbols"
-							type="text"
-							bind:value={editSymbols}
-							placeholder="Symbole (Komma-getrennt): Wasser, Fliegen, Tür"
-						/>
+						{sym.name} · {sym.count}
+					</button>
+				{/each}
+				{#if symbolFilter}
+					<button class="ins-clear" onclick={() => (symbolFilter = null)}>×&nbsp;Filter</button>
+				{/if}
+			</div>
+		{/if}
 
-						<div class="ed-row">
-							<div class="mood-picker">
-								{#each MOODS as mood}
-									<button
-										class="mood-btn"
-										class:active={editMood === mood}
-										style="--mood-color: {MOOD_COLORS[mood]}"
-										onclick={() => (editMood = editMood === mood ? null : mood)}
-										title={MOOD_LABELS[mood]}
-									>
-										<span class="mood-dot"></span>
-										{MOOD_LABELS[mood]}
-									</button>
-								{/each}
-							</div>
-						</div>
+		<!-- Filter tabs -->
+		{#if dreams.length > 0}
+			<div class="filter-tabs">
+				<button
+					class="filter-tab"
+					class:active={filterMode === 'all'}
+					onclick={() => (filterMode = 'all')}
+				>
+					Alle
+				</button>
+				<button
+					class="filter-tab"
+					class:active={filterMode === 'lucid'}
+					onclick={() => (filterMode = 'lucid')}
+				>
+					&#x2728; Klarträume
+				</button>
+				<button
+					class="filter-tab"
+					class:active={filterMode === 'nightmare'}
+					onclick={() => (filterMode = 'nightmare')}
+				>
+					Albträume
+				</button>
+				<button
+					class="filter-tab"
+					class:active={filterMode === 'recurring'}
+					onclick={() => (filterMode = 'recurring')}
+				>
+					Wiederkehrend
+				</button>
+			</div>
+		{/if}
 
-						<div class="ed-row sleep-row">
-							<label class="ed-field">
-								<span class="ed-label">Nacht</span>
-								<input type="date" bind:value={editDreamDate} class="ed-input-sm" />
-							</label>
-							<label class="ed-field">
-								<span class="ed-label">Ins Bett</span>
-								<input type="time" bind:value={editBedtime} class="ed-input-sm" />
-							</label>
-							<label class="ed-field">
-								<span class="ed-label">Aufgewacht</span>
-								<input type="time" bind:value={editWakeTime} class="ed-input-sm" />
-							</label>
-						</div>
+		<!-- Search -->
+		{#if dreams.length > 5}
+			<input
+				class="search-input"
+				type="text"
+				placeholder="Träume durchsuchen..."
+				bind:value={searchQuery}
+			/>
+		{/if}
 
-						<div class="ed-row">
-							<div class="ed-field">
-								<span class="ed-label">Schlafqualität</span>
-								<div class="stars">
-									{#each [1, 2, 3, 4, 5] as q}
+		<!-- Dream list -->
+		<div class="dream-list">
+			{#each grouped as group (group.label)}
+				<div class="month-label">{group.label}</div>
+				{#each group.dreams as dream (dream.id)}
+					{#if editingId === dream.id}
+						<!-- Inline editor -->
+						<div
+							class="dream-item editing"
+							onkeydown={(e) => {
+								if (e.key === 'Escape') saveEdit();
+							}}
+						>
+							<input
+								class="ed-title"
+								type="text"
+								bind:value={editTitle}
+								placeholder="Titel (optional)..."
+								autofocus
+							/>
+							<textarea
+								class="ed-content"
+								bind:value={editContent}
+								placeholder="Erzähl mir den Traum..."
+								rows="5"
+							></textarea>
+							<input
+								class="ed-symbols"
+								type="text"
+								bind:value={editSymbols}
+								placeholder="Symbole (Komma-getrennt): Wasser, Fliegen, Tür"
+							/>
+
+							<div class="ed-row">
+								<div class="mood-picker">
+									{#each MOODS as mood}
 										<button
-											class="star"
-											class:filled={editSleepQuality !== null && editSleepQuality >= q}
-											onclick={() => setSleepQuality(q as SleepQuality)}
-											aria-label={`${q} Sterne`}
+											class="mood-btn"
+											class:active={editMood === mood}
+											style="--mood-color: {MOOD_COLORS[mood]}"
+											onclick={() => (editMood = editMood === mood ? null : mood)}
+											title={MOOD_LABELS[mood]}
 										>
-											★
+											<span class="mood-dot"></span>
+											{MOOD_LABELS[mood]}
 										</button>
 									{/each}
 								</div>
 							</div>
-							<div class="toggles">
-								<label class="lucid-toggle">
-									<input type="checkbox" bind:checked={editIsLucid} />
-									&#x2728; Klartraum
+
+							<div class="ed-row sleep-row">
+								<label class="ed-field">
+									<span class="ed-label">Nacht</span>
+									<input type="date" bind:value={editDreamDate} class="ed-input-sm" />
 								</label>
-								<label class="lucid-toggle">
-									<input type="checkbox" bind:checked={editIsRecurring} />
-									&#x21bb; Wiederkehrend
+								<label class="ed-field">
+									<span class="ed-label">Ins Bett</span>
+									<input type="time" bind:value={editBedtime} class="ed-input-sm" />
+								</label>
+								<label class="ed-field">
+									<span class="ed-label">Aufgewacht</span>
+									<input type="time" bind:value={editWakeTime} class="ed-input-sm" />
 								</label>
 							</div>
-						</div>
 
-						<div class="ed-actions">
-							<button class="ed-btn danger" onclick={() => handleDelete(dream.id)}>Löschen</button>
-							<button class="ed-btn primary" onclick={saveEdit}>Fertig</button>
-						</div>
-					</div>
-				{:else}
-					<!-- Dream row -->
-					<div
-						class="dream-item"
-						role="button"
-						tabindex="0"
-						onclick={() => startEdit(dream)}
-						onkeydown={(e) => {
-							if (e.key === 'Enter' || e.key === ' ') {
-								e.preventDefault();
-								startEdit(dream);
-							}
-						}}
-						oncontextmenu={(e) => handleItemContextMenu(e, dream)}
-					>
-						{#if dream.mood}
-							<span class="mood-dot-row" style="background: {MOOD_COLORS[dream.mood]}"></span>
-						{:else}
-							<span class="mood-dot-row empty"></span>
-						{/if}
-
-						<div class="dream-content">
-							<div class="dream-top">
-								<span class="dream-title">{dream.title || 'Traum ohne Titel'}</span>
-								{#if dream.isLucid}<span class="badge lucid">&#x2728;</span>{/if}
-								{#if dream.isRecurring}<span class="badge">&#x21bb;</span>{/if}
-								{#if dream.isPinned}<span class="badge">&#x1f4cc;</span>{/if}
-								{#if dream.isPrivate}<span class="badge">&#x1f512;</span>{/if}
-							</div>
-							{#if dream.content}
-								<p class="dream-preview">{dream.content.split('\n')[0]}</p>
-							{/if}
-							<div class="dream-meta">
-								<span>{formatDreamDate(dream.dreamDate)}</span>
-								{#if dream.symbols.length > 0}
-									<span class="dot">·</span>
-									<span class="symbol-chips">
-										{#each dream.symbols.slice(0, 3) as sym}
+							<div class="ed-row">
+								<div class="ed-field">
+									<span class="ed-label">Schlafqualität</span>
+									<div class="stars">
+										{#each [1, 2, 3, 4, 5] as q}
 											<button
-												class="symbol-chip"
-												class:active={symbolFilter === sym}
-												onclick={(e) => {
-													e.stopPropagation();
-													selectSymbol(sym);
-												}}
+												class="star"
+												class:filled={editSleepQuality !== null && editSleepQuality >= q}
+												onclick={() => setSleepQuality(q as SleepQuality)}
+												aria-label={`${q} Sterne`}
 											>
-												{sym}
+												★
 											</button>
 										{/each}
-									</span>
-								{/if}
+									</div>
+								</div>
+								<div class="toggles">
+									<label class="lucid-toggle">
+										<input type="checkbox" bind:checked={editIsLucid} />
+										&#x2728; Klartraum
+									</label>
+									<label class="lucid-toggle">
+										<input type="checkbox" bind:checked={editIsRecurring} />
+										&#x21bb; Wiederkehrend
+									</label>
+								</div>
+							</div>
+
+							<div class="ed-actions">
+								<button class="ed-btn danger" onclick={() => handleDelete(dream.id)}>Löschen</button
+								>
+								<button class="ed-btn primary" onclick={saveEdit}>Fertig</button>
 							</div>
 						</div>
-					</div>
-				{/if}
+					{:else}
+						<!-- Dream row -->
+						<div
+							class="dream-item"
+							role="button"
+							tabindex="0"
+							onclick={() => startEdit(dream)}
+							onkeydown={(e) => {
+								if (e.key === 'Enter' || e.key === ' ') {
+									e.preventDefault();
+									startEdit(dream);
+								}
+							}}
+							oncontextmenu={(e) => handleItemContextMenu(e, dream)}
+						>
+							{#if dream.mood}
+								<span class="mood-dot-row" style="background: {MOOD_COLORS[dream.mood]}"></span>
+							{:else}
+								<span class="mood-dot-row empty"></span>
+							{/if}
+
+							<div class="dream-content">
+								<div class="dream-top">
+									<span class="dream-title">{dream.title || 'Traum ohne Titel'}</span>
+									{#if dream.isLucid}<span class="badge lucid">&#x2728;</span>{/if}
+									{#if dream.isRecurring}<span class="badge">&#x21bb;</span>{/if}
+									{#if dream.isPinned}<span class="badge">&#x1f4cc;</span>{/if}
+									{#if dream.isPrivate}<span class="badge">&#x1f512;</span>{/if}
+								</div>
+								{#if dream.content}
+									<p class="dream-preview">{dream.content.split('\n')[0]}</p>
+								{/if}
+								<div class="dream-meta">
+									<span>{formatDreamDate(dream.dreamDate)}</span>
+									{#if dream.symbols.length > 0}
+										<span class="dot">·</span>
+										<span class="symbol-chips">
+											{#each dream.symbols.slice(0, 3) as sym}
+												<button
+													class="symbol-chip"
+													class:active={symbolFilter === sym}
+													onclick={(e) => {
+														e.stopPropagation();
+														selectSymbol(sym);
+													}}
+												>
+													{sym}
+												</button>
+											{/each}
+										</span>
+									{/if}
+								</div>
+							</div>
+						</div>
+					{/if}
+				{/each}
 			{/each}
-		{/each}
 
-		{#if filtered.length === 0 && dreams.length > 0}
-			<p class="empty">Keine Treffer</p>
+			{#if filtered.length === 0 && dreams.length > 0}
+				<p class="empty">Keine Treffer</p>
+			{/if}
+		</div>
+
+		{#if dreams.length === 0}
+			<p class="empty">Tippe oben, um deinen ersten Traum festzuhalten.</p>
 		{/if}
-	</div>
 
-	{#if dreams.length === 0}
-		<p class="empty">Tippe oben, um deinen ersten Traum festzuhalten.</p>
+		<ContextMenu
+			visible={ctxMenu.visible}
+			x={ctxMenu.x}
+			y={ctxMenu.y}
+			items={ctxMenuItems}
+			onClose={() => (ctxMenu = { ...ctxMenu, visible: false, dream: null })}
+		/>
 	{/if}
-
-	<ContextMenu
-		visible={ctxMenu.visible}
-		x={ctxMenu.x}
-		y={ctxMenu.y}
-		items={ctxMenuItems}
-		onClose={() => (ctxMenu = { ...ctxMenu, visible: false, dream: null })}
-	/>
 </div>
 
 <style>
@@ -426,6 +449,35 @@
 		height: 100%;
 	}
 
+	/* ── View Tabs ─────────────────────────────── */
+	.view-tabs {
+		display: flex;
+		gap: 0.25rem;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+		padding-bottom: 0.5rem;
+		margin-bottom: 0.25rem;
+	}
+	:global(.dark) .view-tabs {
+		border-bottom-color: rgba(255, 255, 255, 0.06);
+	}
+	.view-tab {
+		background: transparent;
+		border: none;
+		padding: 0.25rem 0.625rem;
+		font-size: 0.75rem;
+		color: #9ca3af;
+		cursor: pointer;
+		border-radius: 0.25rem;
+		font-weight: 500;
+	}
+	.view-tab:hover {
+		color: #6366f1;
+	}
+	.view-tab.active {
+		color: #6366f1;
+		background: rgba(99, 102, 241, 0.08);
+	}
+
 	/* ── Quick Add ─────────────────────────────── */
 	.quick-add {
 		display: flex;
diff --git a/apps/mana/apps/web/src/lib/modules/dreams/index.ts b/apps/mana/apps/web/src/lib/modules/dreams/index.ts
index e8d86b90d..b239b2aca 100644
--- a/apps/mana/apps/web/src/lib/modules/dreams/index.ts
+++ b/apps/mana/apps/web/src/lib/modules/dreams/index.ts
@@ -15,6 +15,9 @@ export {
 	groupByMonth,
 	formatDreamDate,
 	computeInsights,
+	getDreamsWithSymbol,
+	getMoodDistribution,
+	getCooccurringSymbols,
 } from './queries';
 
 // ─── Collections ─────────────────────────────────────────
diff --git a/apps/mana/apps/web/src/lib/modules/dreams/queries.ts b/apps/mana/apps/web/src/lib/modules/dreams/queries.ts
index b82af774c..21e583aa9 100644
--- a/apps/mana/apps/web/src/lib/modules/dreams/queries.ts
+++ b/apps/mana/apps/web/src/lib/modules/dreams/queries.ts
@@ -120,6 +120,47 @@ export function formatDreamDate(iso: string): string {
 	return date.toLocaleDateString('de-DE', { day: 'numeric', month: 'short', year: 'numeric' });
 }
 
+/** All dreams that contain the given symbol, newest first. */
+export function getDreamsWithSymbol(dreams: Dream[], symbolName: string): Dream[] {
+	return dreams
+		.filter((d) => d.symbols?.includes(symbolName))
+		.sort((a, b) => b.dreamDate.localeCompare(a.dreamDate));
+}
+
+/** Mood distribution across dreams that contain the given symbol. */
+export function getMoodDistribution(
+	dreams: Dream[],
+	symbolName: string
+): Array<{ mood: string; count: number }> {
+	const buckets = new Map<string, number>();
+	for (const d of dreams) {
+		if (!d.symbols?.includes(symbolName)) continue;
+		const key = d.mood ?? 'unbekannt';
+		buckets.set(key, (buckets.get(key) ?? 0) + 1);
+	}
+	return Array.from(buckets, ([mood, count]) => ({ mood, count })).sort(
+		(a, b) => b.count - a.count
+	);
+}
+
+/** Other symbols that frequently co-occur with the given symbol. */
+export function getCooccurringSymbols(
+	dreams: Dream[],
+	symbolName: string
+): Array<{ name: string; count: number }> {
+	const counts = new Map<string, number>();
+	for (const d of dreams) {
+		if (!d.symbols?.includes(symbolName)) continue;
+		for (const sym of d.symbols) {
+			if (sym === symbolName) continue;
+			counts.set(sym, (counts.get(sym) ?? 0) + 1);
+		}
+	}
+	return Array.from(counts, ([name, count]) => ({ name, count }))
+		.sort((a, b) => b.count - a.count)
+		.slice(0, 10);
+}
+
 /** Compute insights snapshot from dreams collection. */
 export function computeInsights(dreams: Dream[]) {
 	const total = dreams.length;
diff --git a/apps/mana/apps/web/src/lib/modules/dreams/stores/dreams.svelte.ts b/apps/mana/apps/web/src/lib/modules/dreams/stores/dreams.svelte.ts
index 1bd47b2ab..e23b20e02 100644
--- a/apps/mana/apps/web/src/lib/modules/dreams/stores/dreams.svelte.ts
+++ b/apps/mana/apps/web/src/lib/modules/dreams/stores/dreams.svelte.ts
@@ -139,6 +139,93 @@ export const dreamsStore = {
 		});
 	},
 
+	/** Edit a symbol's metadata (name, meaning, color). */
+	async updateSymbol(
+		id: string,
+		data: { name?: string; meaning?: string | null; color?: string | null }
+	) {
+		const existing = await dreamSymbolTable.get(id);
+		if (!existing) return;
+
+		// If renaming, propagate to all dreams that reference the old name
+		if (data.name && data.name !== existing.name) {
+			const newName = data.name.trim();
+			if (!newName) return;
+
+			// Check if a symbol with the new name already exists -> merge instead
+			const collision = await dreamSymbolTable.where('name').equals(newName).first();
+			if (collision && collision.id !== id) {
+				await this.mergeSymbols(id, collision.id);
+				return;
+			}
+
+			const allDreams = await dreamTable.toArray();
+			for (const dream of allDreams) {
+				if (dream.deletedAt || !dream.symbols?.includes(existing.name)) continue;
+				const updated = dream.symbols.map((s) => (s === existing.name ? newName : s));
+				await dreamTable.update(dream.id, {
+					symbols: updated,
+					updatedAt: new Date().toISOString(),
+				});
+			}
+		}
+
+		await dreamSymbolTable.update(id, {
+			...data,
+			...(data.name ? { name: data.name.trim() } : {}),
+			updatedAt: new Date().toISOString(),
+		});
+	},
+
+	/** Soft-delete a symbol and remove it from all dreams that reference it. */
+	async deleteSymbol(id: string) {
+		const symbol = await dreamSymbolTable.get(id);
+		if (!symbol) return;
+
+		const allDreams = await dreamTable.toArray();
+		for (const dream of allDreams) {
+			if (dream.deletedAt || !dream.symbols?.includes(symbol.name)) continue;
+			await dreamTable.update(dream.id, {
+				symbols: dream.symbols.filter((s) => s !== symbol.name),
+				updatedAt: new Date().toISOString(),
+			});
+		}
+
+		await dreamSymbolTable.update(id, {
+			deletedAt: new Date().toISOString(),
+			updatedAt: new Date().toISOString(),
+		});
+	},
+
+	/** Merge `sourceId` into `targetId`: rewrite all dreams, sum counts, soft-delete source. */
+	async mergeSymbols(sourceId: string, targetId: string) {
+		if (sourceId === targetId) return;
+		const source = await dreamSymbolTable.get(sourceId);
+		const target = await dreamSymbolTable.get(targetId);
+		if (!source || !target) return;
+
+		const allDreams = await dreamTable.toArray();
+		for (const dream of allDreams) {
+			if (dream.deletedAt || !dream.symbols?.includes(source.name)) continue;
+			const set = new Set(dream.symbols);
+			set.delete(source.name);
+			set.add(target.name);
+			await dreamTable.update(dream.id, {
+				symbols: Array.from(set),
+				updatedAt: new Date().toISOString(),
+			});
+		}
+
+		await dreamSymbolTable.update(targetId, {
+			count: (target.count ?? 0) + (source.count ?? 0),
+			updatedAt: new Date().toISOString(),
+		});
+		await dreamSymbolTable.update(sourceId, {
+			deletedAt: new Date().toISOString(),
+			updatedAt: new Date().toISOString(),
+		});
+	},
+
 	/** Increment or decrement counts for the given symbol names. Creates symbols on demand. */
 	async touchSymbols(names: string[], delta: number) {
 		for (const name of names) {
diff --git a/apps/mana/apps/web/src/lib/modules/dreams/views/SymbolDetailView.svelte b/apps/mana/apps/web/src/lib/modules/dreams/views/SymbolDetailView.svelte
new file mode 100644
index 000000000..5be321c4f
--- /dev/null
+++ b/apps/mana/apps/web/src/lib/modules/dreams/views/SymbolDetailView.svelte
@@ -0,0 +1,462 @@
+<!--
+  Dreams — Symbol detail
+  Editable name + meaning + color, mood distribution, co-occurring symbols, dream list.
+-->
+<script lang="ts">
+	import {
+		formatDreamDate,
+		getCooccurringSymbols,
+		getDreamsWithSymbol,
+		getMoodDistribution,
+		useAllDreams,
+		useAllDreamSymbols,
+	} from '../queries';
+	import { dreamsStore } from '../stores/dreams.svelte';
+	import { MOOD_COLORS, MOOD_LABELS, type DreamMood } from '../types';
+
+	let { symbolId, onBack }: { symbolId: string; onBack: () => void } = $props();
+
+	let symbols$ = useAllDreamSymbols();
+	let dreams$ = useAllDreams();
+
+	let symbols = $derived(symbols$.value);
+	let dreams = $derived(dreams$.value);
+	let symbol = $derived(symbols.find((s) => s.id === symbolId));
+
+	// Local edit buffer
+	let editName = $state('');
+	let editMeaning = $state('');
+	let editColor = $state<string>('#6366f1');
+	let initialized = $state(false);
+
+	$effect(() => {
+		if (symbol && !initialized) {
+			editName = symbol.name;
+			editMeaning = symbol.meaning ?? '';
+			editColor = symbol.color ?? '#6366f1';
+			initialized = true;
+		}
+	});
+
+	let dirty = $derived(
+		symbol !== undefined &&
+			(editName !== symbol.name ||
+				editMeaning !== (symbol.meaning ?? '') ||
+				editColor !== (symbol.color ?? '#6366f1'))
+	);
+
+	let dreamsWithSymbol = $derived(symbol ? getDreamsWithSymbol(dreams, symbol.name) : []);
+	let moodDist = $derived(symbol ? getMoodDistribution(dreams, symbol.name) : []);
+	let cooccurring = $derived(symbol ? getCooccurringSymbols(dreams, symbol.name) : []);
+	let totalForBars = $derived(moodDist.reduce((sum, m) => sum + m.count, 0) || 1);
+
+	const PALETTE = ['#6366f1', '#22c55e', '#f59e0b', '#ef4444', '#06b6d4', '#a855f7', '#ec4899'];
+
+	async function save() {
+		if (!symbol || !dirty) return;
+		await dreamsStore.updateSymbol(symbol.id, {
+			name: editName.trim() || symbol.name,
+			meaning: editMeaning.trim() || null,
+			color: editColor,
+		});
+	}
+
+	async function handleDelete() {
+		if (!symbol) return;
+		const ok = confirm(
+			`Symbol "${symbol.name}" wirklich löschen? Es wird aus allen Träumen entfernt.`
+		);
+		if (!ok) return;
+		await dreamsStore.deleteSymbol(symbol.id);
+		onBack();
+	}
+
+	function moodColor(mood: string): string {
+		if (mood in MOOD_COLORS) return MOOD_COLORS[mood as DreamMood];
+		return '#9ca3af';
+	}
+
+	function moodLabel(mood: string): string {
+		if (mood in MOOD_LABELS) return MOOD_LABELS[mood as DreamMood];
+		return 'Unbekannt';
+	}
+</script>
+
+<div class="detail-view">
+	<div class="header">
+		<button class="back-btn" onclick={onBack}>← Symbole</button>
+		{#if symbol}
+			<button class="del-btn" onclick={handleDelete}>Löschen</button>
+		{/if}
+	</div>
+
+	{#if !symbol}
+		<p class="empty">Symbol nicht gefunden.</p>
+	{:else}
+		<!-- Editable header -->
+		<div class="sym-header">
+			<input
+				class="name-input"
+				type="text"
+				bind:value={editName}
+				placeholder="Symbolname"
+				style="color: {editColor}"
+			/>
+			<span class="count-badge">{symbol.count} {symbol.count === 1 ? 'Traum' : 'Träume'}</span>
+		</div>
+
+		<!-- Color picker -->
+		<div class="palette">
+			{#each PALETTE as color}
+				<button
+					class="palette-swatch"
+					class:active={editColor === color}
+					style="background: {color}"
+					onclick={() => (editColor = color)}
+					aria-label={`Farbe ${color}`}
+				></button>
+			{/each}
+		</div>
+
+		<!-- Meaning -->
+		<div class="section">
+			<span class="section-label">Meine Bedeutung</span>
+			<textarea
+				class="meaning-input"
+				bind:value={editMeaning}
+				placeholder="Was bedeutet dieses Symbol für dich? (optional)"
+				rows="3"
+			></textarea>
+		</div>
+
+		{#if dirty}
+			<div class="save-row">
+				<button class="save-btn" onclick={save}>Speichern</button>
+			</div>
+		{/if}
+
+		<!-- Mood distribution -->
+		{#if moodDist.length > 0}
+			<div class="section">
+				<span class="section-label">Stimmungs-Verteilung</span>
+				<div class="bars">
+					{#each moodDist as m}
+						<div class="bar-row">
+							<span class="bar-label" style="color: {moodColor(m.mood)}">{moodLabel(m.mood)}</span>
+							<div class="bar-track">
+								<div
+									class="bar-fill"
+									style="width: {(m.count / totalForBars) * 100}%; background: {moodColor(m.mood)}"
+								></div>
+							</div>
+							<span class="bar-count">{m.count}</span>
+						</div>
+					{/each}
+				</div>
+			</div>
+		{/if}
+
+		<!-- Co-occurring -->
+		{#if cooccurring.length > 0}
+			<div class="section">
+				<span class="section-label">Häufig zusammen mit</span>
+				<div class="cooc-row">
+					{#each cooccurring as c}
+						<span class="cooc-chip">{c.name} <span class="cooc-count">{c.count}</span></span>
+					{/each}
+				</div>
+			</div>
+		{/if}
+
+		<!-- Dream list -->
+		{#if dreamsWithSymbol.length > 0}
+			<div class="section">
+				<span class="section-label">Träume mit diesem Symbol</span>
+				<div class="dream-refs">
+					{#each dreamsWithSymbol as d (d.id)}
+						<div class="dream-ref">
+							{#if d.mood}
+								<span class="ref-dot" style="background: {MOOD_COLORS[d.mood]}"></span>
+							{:else}
+								<span class="ref-dot empty"></span>
+							{/if}
+							<div class="ref-content">
+								<span class="ref-title">{d.title || 'Traum ohne Titel'}</span>
+								<span class="ref-date">{formatDreamDate(d.dreamDate)}</span>
+							</div>
+						</div>
+					{/each}
+				</div>
+			</div>
+		{/if}
+	{/if}
+</div>
+
+<style>
+	.detail-view {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		flex: 1;
+		min-height: 0;
+		overflow-y: auto;
+	}
+
+	.header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.back-btn {
+		background: transparent;
+		border: none;
+		color: #6366f1;
+		font-size: 0.75rem;
+		cursor: pointer;
+		padding: 0.25rem 0;
+	}
+	.back-btn:hover {
+		text-decoration: underline;
+	}
+
+	.del-btn {
+		background: transparent;
+		border: 1px solid rgba(239, 68, 68, 0.3);
+		color: #ef4444;
+		font-size: 0.6875rem;
+		padding: 0.25rem 0.625rem;
+		border-radius: 0.25rem;
+		cursor: pointer;
+	}
+	.del-btn:hover {
+		background: rgba(239, 68, 68, 0.08);
+	}
+
+	.sym-header {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+	}
+
+	.name-input {
+		flex: 1;
+		background: transparent;
+		border: none;
+		font-size: 1.125rem;
+		font-weight: 600;
+		padding: 0;
+		outline: none;
+	}
+
+	.count-badge {
+		font-size: 0.625rem;
+		color: #9ca3af;
+		padding: 0.125rem 0.5rem;
+		border-radius: 9999px;
+		background: rgba(0, 0, 0, 0.04);
+	}
+	:global(.dark) .count-badge {
+		background: rgba(255, 255, 255, 0.06);
+	}
+
+	.palette {
+		display: flex;
+		gap: 0.375rem;
+	}
+
+	.palette-swatch {
+		width: 20px;
+		height: 20px;
+		border-radius: 9999px;
+		border: 2px solid transparent;
+		cursor: pointer;
+		padding: 0;
+	}
+	.palette-swatch.active {
+		border-color: #374151;
+		transform: scale(1.1);
+	}
+	:global(.dark) .palette-swatch.active {
+		border-color: #f3f4f6;
+	}
+
+	.section {
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+	}
+
+	.section-label {
+		font-size: 0.5625rem;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: #c0bfba;
+		font-weight: 600;
+	}
+	:global(.dark) .section-label {
+		color: #4b5563;
+	}
+
+	.meaning-input {
+		background: transparent;
+		border: 1px solid rgba(0, 0, 0, 0.08);
+		border-radius: 0.375rem;
+		padding: 0.5rem;
+		font-size: 0.75rem;
+		color: #374151;
+		outline: none;
+		resize: vertical;
+		font-family: inherit;
+		line-height: 1.5;
+	}
+	.meaning-input:focus {
+		border-color: #6366f1;
+	}
+	:global(.dark) .meaning-input {
+		border-color: rgba(255, 255, 255, 0.08);
+		color: #f3f4f6;
+	}
+
+	.save-row {
+		display: flex;
+		justify-content: flex-end;
+	}
+	.save-btn {
+		padding: 0.25rem 0.75rem;
+		border-radius: 0.25rem;
+		font-size: 0.6875rem;
+		font-weight: 500;
+		background: #6366f1;
+		color: white;
+		border: none;
+		cursor: pointer;
+	}
+	.save-btn:hover {
+		background: #5558e6;
+	}
+
+	/* Bars */
+	.bars {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+	.bar-row {
+		display: grid;
+		grid-template-columns: 80px 1fr 24px;
+		align-items: center;
+		gap: 0.5rem;
+		font-size: 0.6875rem;
+	}
+	.bar-label {
+		font-weight: 500;
+	}
+	.bar-track {
+		background: rgba(0, 0, 0, 0.04);
+		border-radius: 9999px;
+		height: 6px;
+		overflow: hidden;
+	}
+	:global(.dark) .bar-track {
+		background: rgba(255, 255, 255, 0.06);
+	}
+	.bar-fill {
+		height: 100%;
+		border-radius: 9999px;
+		transition: width 0.3s;
+	}
+	.bar-count {
+		font-size: 0.625rem;
+		color: #9ca3af;
+		text-align: right;
+	}
+
+	/* Co-occurring */
+	.cooc-row {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.375rem;
+	}
+	.cooc-chip {
+		padding: 0.125rem 0.5rem;
+		border-radius: 9999px;
+		background: rgba(99, 102, 241, 0.08);
+		color: #6366f1;
+		font-size: 0.6875rem;
+	}
+	.cooc-count {
+		font-size: 0.5625rem;
+		opacity: 0.7;
+		margin-left: 0.125rem;
+	}
+
+	/* Dream refs */
+	.dream-refs {
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+	}
+	.dream-ref {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.375rem 0.25rem;
+		border-radius: 0.25rem;
+	}
+	.dream-ref:hover {
+		background: rgba(0, 0, 0, 0.03);
+	}
+	:global(.dark) .dream-ref:hover {
+		background: rgba(255, 255, 255, 0.04);
+	}
+
+	.ref-dot {
+		width: 6px;
+		height: 6px;
+		border-radius: 9999px;
+		flex-shrink: 0;
+	}
+	.ref-dot.empty {
+		background: rgba(0, 0, 0, 0.08);
+	}
+	:global(.dark) .ref-dot.empty {
+		background: rgba(255, 255, 255, 0.08);
+	}
+
+	.ref-content {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		flex: 1;
+		min-width: 0;
+	}
+
+	.ref-title {
+		font-size: 0.75rem;
+		color: #374151;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	:global(.dark) .ref-title {
+		color: #e5e7eb;
+	}
+
+	.ref-date {
+		font-size: 0.625rem;
+		color: #c0bfba;
+		flex-shrink: 0;
+		margin-left: 0.5rem;
+	}
+	:global(.dark) .ref-date {
+		color: #4b5563;
+	}
+
+	.empty {
+		padding: 2rem 0;
+		text-align: center;
+		font-size: 0.8125rem;
+		color: #9ca3af;
+	}
+</style>
diff --git a/apps/mana/apps/web/src/lib/modules/dreams/views/SymbolsView.svelte b/apps/mana/apps/web/src/lib/modules/dreams/views/SymbolsView.svelte
new file mode 100644
index 000000000..acb8dff1b
--- /dev/null
+++ b/apps/mana/apps/web/src/lib/modules/dreams/views/SymbolsView.svelte
@@ -0,0 +1,150 @@
+<!--
+  Dreams — Symbols overview
+  Wordcloud-ish list of all symbols, sized by frequency.
+  Click → opens detail panel.
+-->
+<script lang="ts">
+	import { useAllDreamSymbols } from '../queries';
+	import type { DreamSymbol } from '../types';
+	import SymbolDetailView from './SymbolDetailView.svelte';
+
+	let symbols$ = useAllDreamSymbols();
+	let symbols = $derived(symbols$.value);
+
+	let searchQuery = $state('');
+	let selectedSymbolId = $state<string | null>(null);
+
+	let filtered = $derived(
+		searchQuery.trim()
+			? symbols.filter((s) => s.name.toLowerCase().includes(searchQuery.toLowerCase()))
+			: symbols
+	);
+
+	let maxCount = $derived(filtered.reduce((m, s) => Math.max(m, s.count), 1));
+
+	function fontSize(sym: DreamSymbol): string {
+		// Scale 0.75rem .. 1.5rem based on count
+		const ratio = Math.max(0.2, sym.count / maxCount);
+		return `${0.75 + ratio * 0.75}rem`;
+	}
+</script>
+
+{#if selectedSymbolId}
+	<SymbolDetailView symbolId={selectedSymbolId} onBack={() => (selectedSymbolId = null)} />
+{:else}
+	<div class="symbols-view">
+		{#if symbols.length > 5}
+			<input
+				class="search-input"
+				type="text"
+				placeholder="Symbol suchen..."
+				bind:value={searchQuery}
+			/>
+		{/if}
+
+		{#if filtered.length === 0}
+			<p class="empty">
+				{symbols.length === 0
+					? 'Noch keine Symbole. Füge Symbole zu deinen Träumen hinzu, um sie hier zu sehen.'
+					: 'Keine Treffer'}
+			</p>
+		{:else}
+			<div class="cloud">
+				{#each filtered as sym (sym.id)}
+					<button
+						class="sym-chip"
+						style="font-size: {fontSize(sym)}; --sym-color: {sym.color ?? '#6366f1'}"
+						onclick={() => (selectedSymbolId = sym.id)}
+					>
+						<span class="sym-dot"></span>
+						<span class="sym-name">{sym.name}</span>
+						<span class="sym-count">{sym.count}</span>
+					</button>
+				{/each}
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.symbols-view {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		flex: 1;
+		min-height: 0;
+	}
+
+	.search-input {
+		padding: 0.3rem 0.5rem;
+		border-radius: 0.375rem;
+		border: 1px solid rgba(0, 0, 0, 0.08);
+		background: transparent;
+		font-size: 0.75rem;
+		color: #374151;
+		outline: none;
+	}
+	.search-input:focus {
+		border-color: #6366f1;
+	}
+	:global(.dark) .search-input {
+		border-color: rgba(255, 255, 255, 0.08);
+		color: #f3f4f6;
+	}
+
+	.cloud {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: baseline;
+		gap: 0.5rem 0.75rem;
+		padding: 0.5rem 0.25rem;
+		overflow-y: auto;
+	}
+
+	.sym-chip {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.25rem 0.625rem;
+		border-radius: 9999px;
+		border: 1px solid rgba(0, 0, 0, 0.06);
+		background: transparent;
+		color: var(--sym-color);
+		cursor: pointer;
+		transition: all 0.15s;
+		font-weight: 500;
+		line-height: 1.4;
+	}
+	.sym-chip:hover {
+		background: color-mix(in srgb, var(--sym-color) 10%, transparent);
+		border-color: var(--sym-color);
+	}
+	:global(.dark) .sym-chip {
+		border-color: rgba(255, 255, 255, 0.08);
+	}
+
+	.sym-dot {
+		width: 6px;
+		height: 6px;
+		border-radius: 9999px;
+		background: var(--sym-color);
+		flex-shrink: 0;
+	}
+
+	.sym-name {
+		font-weight: 500;
+	}
+
+	.sym-count {
+		font-size: 0.625rem;
+		color: #9ca3af;
+		font-weight: 400;
+	}
+
+	.empty {
+		padding: 2rem 0;
+		text-align: center;
+		font-size: 0.8125rem;
+		color: #9ca3af;
+	}
+</style>