mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 21:01:08 +02:00
feat(dreams): symbol library with detail view, meaning, mood stats
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>
This commit is contained in:
Till JS
parent
feb1674203
commit
980a5e996c
6 changed files with 1018 additions and 223 deletions
|
|
@ -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">🌙</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">✨ {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)}>× Filter</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{#if viewMode === 'symbols'}
|
||||
<SymbolsView />
|
||||
{:else}
|
||||
<!-- Quick create -->
|
||||
<form onsubmit={(e) => e.preventDefault()} class="quick-add">
|
||||
<span class="add-icon">🌙</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')}
|
||||
>
|
||||
✨ 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">✨ {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)}>× 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')}
|
||||
>
|
||||
✨ 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} />
|
||||
✨ 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} />
|
||||
↻ 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">✨</span>{/if}
|
||||
{#if dream.isRecurring}<span class="badge">↻</span>{/if}
|
||||
{#if dream.isPinned}<span class="badge">📌</span>{/if}
|
||||
{#if dream.isPrivate}<span class="badge">🔒</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} />
|
||||
✨ Klartraum
|
||||
</label>
|
||||
<label class="lucid-toggle">
|
||||
<input type="checkbox" bind:checked={editIsRecurring} />
|
||||
↻ 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">✨</span>{/if}
|
||||
{#if dream.isRecurring}<span class="badge">↻</span>{/if}
|
||||
{#if dream.isPinned}<span class="badge">📌</span>{/if}
|
||||
{#if dream.isPrivate}<span class="badge">🔒</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;
|
||||
|
|
|
|||
|
|
@ -15,6 +15,9 @@ export {
|
|||
groupByMonth,
|
||||
formatDreamDate,
|
||||
computeInsights,
|
||||
getDreamsWithSymbol,
|
||||
getMoodDistribution,
|
||||
getCooccurringSymbols,
|
||||
} from './queries';
|
||||
|
||||
// ─── Collections ─────────────────────────────────────────
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue