i18n(notes): translate /notes +page.svelte via $_() — header, toolbar, create form, sections

- <title>, page H1, "{n} Notizen" stats counter
- Search placeholder + "+ Neue Notiz" action
- Create form: Titel/Schreibe etwas placeholders + Abbrechen/Erstellen actions
- "Unbenannt" fallback used in mutation + 2 card titles
- Section labels (Angepinnt / Weitere)
- Empty: "Noch keine Notizen." + "Erste Notiz erstellen" action
- Loading: "Laden..."

Baselines: hardcoded 1058 → 1050 (8 cleared); missing-keys baseline unchanged.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-27 14:45:15 +02:00
parent b290ed7c69
commit 2cf3a06a3e
2 changed files with 24 additions and 18 deletions

View file

@ -7,6 +7,7 @@
import { notesStore } from '$lib/modules/notes/stores/notes.svelte'; import { notesStore } from '$lib/modules/notes/stores/notes.svelte';
import { NOTE_COLORS } from '$lib/modules/notes/types'; import { NOTE_COLORS } from '$lib/modules/notes/types';
import { RoutePage } from '$lib/components/shell'; import { RoutePage } from '$lib/components/shell';
import { _ } from 'svelte-i18n';
const allNotes$: Observable<Note[]> = getContext('notes'); const allNotes$: Observable<Note[]> = getContext('notes');
@ -35,7 +36,7 @@
e.preventDefault(); e.preventDefault();
if (!newTitle.trim() && !newContent.trim()) return; if (!newTitle.trim() && !newContent.trim()) return;
const note = await notesStore.createNote({ const note = await notesStore.createNote({
title: newTitle.trim() || 'Unbenannt', title: newTitle.trim() || $_('notes.page.untitled'),
content: newContent, content: newContent,
color: newColor, color: newColor,
}); });
@ -48,16 +49,18 @@
</script> </script>
<svelte:head> <svelte:head>
<title>Notes - Mana</title> <title>{$_('notes.page.page_title_html')}</title>
</svelte:head> </svelte:head>
<RoutePage appId="notes"> <RoutePage appId="notes">
<div class="notes-page"> <div class="notes-page">
<header class="notes-header"> <header class="notes-header">
<div> <div>
<h1 class="notes-title">Notes</h1> <h1 class="notes-title">{$_('notes.page.title')}</h1>
{#if isLoaded} {#if isLoaded}
<div class="notes-stats">{notes.length} Notizen</div> <div class="notes-stats">
{$_('notes.page.stats_count', { values: { n: notes.length } })}
</div>
{/if} {/if}
</div> </div>
</header> </header>
@ -67,10 +70,12 @@
<input <input
class="search-input" class="search-input"
type="text" type="text"
placeholder="Notizen durchsuchen..." placeholder={$_('notes.page.search_placeholder')}
bind:value={searchQuery} bind:value={searchQuery}
/> />
<button class="add-btn" onclick={() => (showCreate = !showCreate)}>+ Neue Notiz</button> <button class="add-btn" onclick={() => (showCreate = !showCreate)}
>{$_('notes.page.action_new')}</button
>
</div> </div>
<!-- Create Form --> <!-- Create Form -->
@ -80,13 +85,13 @@
<input <input
class="create-title" class="create-title"
type="text" type="text"
placeholder="Titel..." placeholder={$_('notes.page.placeholder_title')}
bind:value={newTitle} bind:value={newTitle}
autofocus autofocus
/> />
<textarea <textarea
class="create-content" class="create-content"
placeholder="Schreibe etwas..." placeholder={$_('notes.page.placeholder_content')}
bind:value={newContent} bind:value={newContent}
rows="4" rows="4"
></textarea> ></textarea>
@ -106,9 +111,9 @@
</div> </div>
<div class="create-actions"> <div class="create-actions">
<button type="button" class="btn-cancel" onclick={() => (showCreate = false)} <button type="button" class="btn-cancel" onclick={() => (showCreate = false)}
>Abbrechen</button >{$_('notes.page.action_cancel')}</button
> >
<button type="submit" class="btn-save">Erstellen</button> <button type="submit" class="btn-save">{$_('notes.page.action_create')}</button>
</div> </div>
</div> </div>
</form> </form>
@ -118,7 +123,7 @@
<!-- Pinned --> <!-- Pinned -->
{#if pinnedNotes.length > 0} {#if pinnedNotes.length > 0}
<section class="section"> <section class="section">
<h2 class="section-label">Angepinnt</h2> <h2 class="section-label">{$_('notes.page.section_pinned')}</h2>
<div class="notes-grid"> <div class="notes-grid">
{#each pinnedNotes as note (note.id)} {#each pinnedNotes as note (note.id)}
<a <a
@ -126,7 +131,7 @@
class="note-card" class="note-card"
style:border-top-color={note.color ?? 'transparent'} style:border-top-color={note.color ?? 'transparent'}
> >
<div class="card-title">{note.title || 'Unbenannt'}</div> <div class="card-title">{note.title || $_('notes.page.untitled')}</div>
<div class="card-preview">{getPreview(note.content, 120)}</div> <div class="card-preview">{getPreview(note.content, 120)}</div>
<div class="card-meta">{formatRelativeTime(note.updatedAt)}</div> <div class="card-meta">{formatRelativeTime(note.updatedAt)}</div>
</a> </a>
@ -139,7 +144,7 @@
{#if unpinnedNotes.length > 0} {#if unpinnedNotes.length > 0}
<section class="section"> <section class="section">
{#if pinnedNotes.length > 0} {#if pinnedNotes.length > 0}
<h2 class="section-label">Weitere</h2> <h2 class="section-label">{$_('notes.page.section_others')}</h2>
{/if} {/if}
<div class="notes-grid"> <div class="notes-grid">
{#each unpinnedNotes as note (note.id)} {#each unpinnedNotes as note (note.id)}
@ -148,7 +153,7 @@
class="note-card" class="note-card"
style:border-top-color={note.color ?? 'transparent'} style:border-top-color={note.color ?? 'transparent'}
> >
<div class="card-title">{note.title || 'Unbenannt'}</div> <div class="card-title">{note.title || $_('notes.page.untitled')}</div>
<div class="card-preview">{getPreview(note.content, 120)}</div> <div class="card-preview">{getPreview(note.content, 120)}</div>
<div class="card-meta">{formatRelativeTime(note.updatedAt)}</div> <div class="card-meta">{formatRelativeTime(note.updatedAt)}</div>
</a> </a>
@ -159,12 +164,14 @@
{#if notes.length === 0 && !showCreate} {#if notes.length === 0 && !showCreate}
<div class="empty"> <div class="empty">
<p>Noch keine Notizen.</p> <p>{$_('notes.page.empty_no_notes')}</p>
<button class="add-btn" onclick={() => (showCreate = true)}>Erste Notiz erstellen</button> <button class="add-btn" onclick={() => (showCreate = true)}
>{$_('notes.page.empty_action')}</button
>
</div> </div>
{/if} {/if}
{:else} {:else}
<div class="loading">Laden...</div> <div class="loading">{$_('notes.page.loading')}</div>
{/if} {/if}
</div> </div>
</RoutePage> </RoutePage>

View file

@ -270,7 +270,6 @@
"apps/mana/apps/web/src/routes/(app)/news/saved/+page.svelte": 1, "apps/mana/apps/web/src/routes/(app)/news/saved/+page.svelte": 1,
"apps/mana/apps/web/src/routes/(app)/news/sources/+page.svelte": 1, "apps/mana/apps/web/src/routes/(app)/news/sources/+page.svelte": 1,
"apps/mana/apps/web/src/routes/(app)/notes/[id]/+page.svelte": 5, "apps/mana/apps/web/src/routes/(app)/notes/[id]/+page.svelte": 5,
"apps/mana/apps/web/src/routes/(app)/notes/+page.svelte": 8,
"apps/mana/apps/web/src/routes/(app)/observatory/+page.svelte": 6, "apps/mana/apps/web/src/routes/(app)/observatory/+page.svelte": 6,
"apps/mana/apps/web/src/routes/(app)/onboarding/+layout.svelte": 3, "apps/mana/apps/web/src/routes/(app)/onboarding/+layout.svelte": 3,
"apps/mana/apps/web/src/routes/(app)/onboarding/look/+page.svelte": 6, "apps/mana/apps/web/src/routes/(app)/onboarding/look/+page.svelte": 6,