Feature: Notizen

Überblick

Das Notiz-Feature ist eine digitale Notiz- und Dokumentationsfunktion für den Alltag in einer Webanwendung. Es erlaubt Nutzern, schnell Informationen festzuhalten, Inhalte zu strukturieren, Bilder und Textdateien anzuhängen und handschriftliche Einträge zu erstellen. Die Funktion ist bewusst so aufgebaut, dass sie für Endanwender einfach und schnell nutzbar ist, aber gleichzeitig als flexibler Baustein für eine größere Produktivitäts- und Kalender-Umgebung dient.

Im aktuellen Projekt ist das Feature eng in das Portal integriert und wird direkt im Kontext von Workflows verwendet: neben Notizbüchern, schnellen Notizen, Handzettel-ähnlichen Skizzen und Textdateien.

Für Nicht-Entwickler: Was ist das Feature?

Zweck

Das Notiz-Feature ersetzt lose Papiernotizen, unfertige Textblöcke und verstreute Informationen. Die Nutzer können:

• schnell eine Notiz anlegen
• Texte schreiben und später wieder aufrufen
• Bilder an eine Notiz hängen
• Textdateien hochladen und bearbeiten
• handschriftliche Notizen mit einer Zeichenfläche anlegen
• Notizbücher sinnvoll gruppieren
• Inhalte nach Themen und Kontext sortieren

Typische Nutzungsszenarien

• Projektideen notieren
• Aufgaben und Beobachtungen aufzeichnen
• kurzfristige Informationen zwischen Teams teilen
• Notizen zu einem Termin oder Datum ergänzen
• Skizzen, kleine Entwürfe oder Markerungen anlegen
• Dokumente und Textsammlungen verwalten

Warum ist das nützlich?

Die größte Stärke besteht darin, dass es keine „separate App“ für Notizen braucht, sondern direkt in den Arbeitsprozess eingebettet ist. Das heißt:

• weniger Reibung bei der Erfassung
• weniger Informationsverlust
• schnellere Rückkehr zu vorhandenen Einträgen
• besserer Überblick über Aufgaben, Ideen und Kontexte

Für Entwickler: Architektur und Funktionsprinzip

Technischer Kontext

Das Feature ist in einer Blazor WebAssembly-Anwendung eingebettet. Die UI liegt in der Komponente:

• mkaWebCenter.Client/kApp-features/Notizen/Notizen_RouteView.razor

Die Logik für das Speichern, Laden und Verwalten der Daten liegt im Backend im Bereich:

• mkaWebCenter/app_routes/api/KalenderApi.cs
• mkaWebCenter/app_data/KalenderRepository.cs
• mkaWebCenter/app_base/services/NotizFileService.cs

Grundidee

Das System ist modular aufgebaut:

1. Die UI rendert die Notizliste, das Editor-Formular und die verschiedenen Medienarten.
2. Ein API-Endpunkt übernimmt den Datenfluss und persistiert Inhalte.
3. Datei- und Bildinhalte werden separat gespeichert, damit die DB nicht mit großen Binärdaten überladen wird.
4. Notizen können mehrere Formate enthalten:
   • Text
   • Bilder
   • Textdateien
   • handschriftliche Zeichnungen (Ink / Whiteboard)

Datenmodell

Das Feature unterstützt eine Mischung aus strukturierten und unstrukturierten Inhalten:

• Notiztitel
• Textinhalt
• optional zugeordnetes Notizbuch
• Bilder mit Dateipfad und Dateiname
• Textdateien mit Dateiname und Inhalt
• handschriftliche Zeichnungen als JSON-Strokes oder Preview-Bilder

Das ist besonders wichtig, weil es das Feature sowohl als „einfaches Aufschreiben“ als auch als „dokumentationsfreundliche Sammelstelle“ nutzbar macht.

Wichtige UI-Elemente

Im Notizen_RouteView.razor gibt es mehrere zentrale Bereiche:

1. Notizbuch-Filter

Der Nutzer kann Notizen nach Notizbüchern filtern. Das macht die Übersicht deutlich besser, wenn mehrere Themen parallel geführt werden.

<div class="notizbuch-bar">
	<button class="notizbuch-chip @(_filterNotizbuchId is null ? "active" : "")" @onclick="() => SetFilter(null)">Alle Notizen</button>
	@foreach (var buch in _notizbuecher)
	{
		<button class="notizbuch-chip @(_filterNotizbuchId == buch.Id ? "active" : "")" title="@buch.Beschreibung" @onclick="() => SetFilter(buch.Id)">📓 @buch.Name</button>
	}
</div>

Wirkung:

• weniger Überforderung bei vielen Einträgen
• klare Kontext-Filters
• einfaches Gruppieren von Notizen nach Thema

2. Notiz-Editor

Ein Notiz-Editor erlaubt Text, Titel und optionales Notizbuch.

<label>Titel</label>
<input @bind="_editNotiz.Titel" placeholder="Titel der Notiz" />

<label>Text</label>
<textarea rows="8" @bind="_editNotiz.Text" placeholder="Dein Notiztext…"></textarea>

Das ist der Kern des Features: Wenn ein Nutzer eine Notiz öffnet, kann er im selben Formular alles verwalten, was zu dieser Notiz gehört.

3. Bilder und Medien

Notizen können mit eingebetteten Bildern erweitert werden.

<label>Bilder</label>
<div class="notiz-bilder">
	@foreach (var bild in _editNotiz.Bilder)
	{
		<div class="notiz-bild">
			<img src="@bild.DateiPfad" alt="@bild.DateiName" />
			<button class="btn-del" title="Bild löschen" @onclick="() => DeleteBildAsync(bild)">✕</button>
		</div>
	}
	<label class="bild-upload">
		+ Bild
		<InputFile OnChange="OnBildSelected" accept="image/*" multiple hidden />
	</label>
</div>

Das ist wichtig, weil Notizen oft nicht nur Text sind: Screenshots, Dokumentenbilder, Visions, Skizzen und Markierungen sind im Alltag üblich.

4. Textdateien

Das Projekt erlaubt zusätzlich das Hochladen und Bearbeiten von Text- und Markdown-Dateien.

<label>Textdateien</label>
<div class="notiz-textdateien">
	@foreach (var datei in _editNotiz.TextDateien)
	{
		<div class="notiz-textdatei @(_openTextDatei?.Id == datei.Id ? "open" : "")" title="Öffnen und bearbeiten" @onclick="() => OpenTextDateiAsync(datei)">
			<span>📄 @datei.DateiName</span>
			<button class="btn-del" title="Datei löschen" @onclick="() => DeleteTextDateiAsync(datei)" @onclick:stopPropagation>✕</button>
		</div>
	}
</div>

Das dient vor allem als Übergang von „flüchtiger Notiz“ zu „dokumentierter Information“.

5. Handgeschriebene Notizen / Ink / Whiteboard

Das Feature unterstützt handschriftliche Einträge und Whiteboard-ähnliche Skizzen. Diese Inhalte sind ein echter Mehrwert, weil sie visuell und sehr schnell erfasst werden können.

<label>Handschriftliche Notizen</label>
<div class="notiz-inks">
	@foreach (var ink in _editNotiz.Inks)
	{
		<div class="notiz-ink" title="Öffnen und bearbeiten" @onclick="() => OpenInk(ink)">
			@if (!string.IsNullOrEmpty(ink.PreviewPfad))
			{
				<img src="@AppendVersion(ink.PreviewPfad, ink.GeaendertAm?.Ticks ?? ink.ErstelltAm.Ticks)" alt="Skizze" />
			}
		</div>
	}
	<button class="ink-new" @onclick="OpenNewInk">✍️ Neue Skizze (Infinite Canvas)</button>
</div>

Das ist besonders attraktiv für:

• Entwurfsskizzen
• Mindmaps
• Handnotizen
• schnelle Ideen auf einem digitalen Whiteboard

Backend-API: Wie werden Notizen gespeichert?

Das Backend nutzt die API-Endpunkte aus KalenderApi.cs.

Beispiel: Notiz anlegen

group.MapPost("/notizen", async (KalenderNotizSaveRequest request, KalenderRepository repo, NotizFileService files) =>
{
	var notiz = new KalenderNotiz_dbm
	{
		UserId = request.UserId,
		Datum = request.Datum.Date,
		Titel = string.IsNullOrWhiteSpace(request.Titel) ? null : request.Titel.Trim(),
		ErstelltAm = DateTime.Now
	};

	var id = repo.InsertKalenderNotiz(notiz);
	if (id <= 0) return Results.Problem("Kalendernotiz konnte nicht angelegt werden.");

	notiz.Id = id;
	notiz.StrokesPfad = await files.SaveKalenderNotizStrokesAsync(id, request.StrokesJson);

	if (!string.IsNullOrWhiteSpace(request.PreviewPngBase64))
		notiz.PreviewPfad = await files.SaveKalenderNotizPreviewAsync(id, request.PreviewPngBase64);

	repo.UpdateKalenderNotiz(notiz);

	return Results.Ok(ToDto(notiz));
});

Was passiert hier?

• KalenderNotizSaveRequest enthält die Daten der neuen Notiz.
• Ein Datensatz wird in die Datenbank geschrieben.
• Zeichnungen / Strokes und Bildvorschauen werden nicht direkt in der DB abgelegt, sondern in Dateien gespeichert.
• Danach wird der Datensatz aktualisiert und als DTO zurückgegeben.

Notizen abrufen

group.MapGet("/notizen", (int userId, int jahr, int monat, KalenderRepository repo) =>
{
	var notizen = repo.GetKalenderNotizenByUserIdAndMonth(userId, jahr, monat).Select(ToDto).ToList();
	return Results.Ok(notizen);
});

Das ist wichtig, weil Notizen oft nach Datum, Zeit oder Monat abgefragt werden. In einer Kalender- oder Workflow-Umgebung ist das sehr hilfreich.

Dateispeicherung und Medien-Handling

Die Speicherung von Assets erfolgt nicht automatisch in der Datenbank, sondern über NotizFileService.

Dieser Service kümmert sich um:

• das Schreiben von Skizzen-Dateien
• das Speichern von Vorschaubildern
• das Lesen von Dateien
• das Bereinigen beim Löschen

Beispiel: Strokes speichern

public async Task<string> SaveKalenderNotizStrokesAsync(int notizId, string strokesJson)
{
	var dir = GetKalenderNotizDir(notizId);
	Directory.CreateDirectory(dir);

	var file = Path.Combine(dir, "strokes.json");
	await File.WriteAllTextAsync(file, strokesJson ?? "{}");
	return file;
}

Warum so?

• große Datenmengen werden besser verwaltet
• Bild- und Zeichnungsdateien bleiben unabhängig von den Datenbankeinträgen
• das System ist flexibler und leichter wartbar
• Dateinamen, Pfade und Preview-Generierung können zentral kontrolliert werden

Notizbücher und Kontext

Ein zentraler Teil des Features ist die Notizbuch-Logik. Nutzer können Notizen nicht nur einzeln verwalten, sondern in thematischen Sammlungen organisieren.

Beispiel aus der UI:

<button class="notizbuch-chip @(_filterNotizbuchId is null ? "active" : "")" @onclick="() => SetFilter(null)">Alle Notizen</button>

Das ist wichtig für reale Projekte, weil Nutzer oft nach Themen arbeiten:

• Projekt A
• Kundenkommunikation
• Meeting-Protokolle
• Ideen und Brainstorming
• technische Hinweise

Ohne diese Struktur würde die Notizliste schnell unübersichtlich.

Beispiel: Typischer Ablauf eines Nutzers

Einfache Nutzung

1. Benutzer klickt auf „Neue Notiz“.
2. Titel und Text werden eingegeben.
3. optional ein Notizbuch wird gewählt.
4. Notiz wird gespeichert.
5. Nach erneuter Öffnung erscheint sie in der Übersicht.

Detaillierter Ablauf mit Medien

1. Notiz wird angelegt.
2. Bild wird hochgeladen oder Handzeichnung erstellt.
3. Strokes werden als JSON gespeichert.
4. Vorschaubild wird erzeugt.
5. Die Notiz wird wiederum im Verlauf als Karte/Miniatur dargestellt.

Was ist besonders gut an diesem Feature?

Für Nutzer

• sehr niedriges Hindernis bei der Erstellung
• schnell nutzbar
• gut passend in alltägliche Workflows
• flexibel für verschiedene Szenarien

Für Entwickler

• klarer Aufbau zwischen UI, API und Speicherung
• modularer Fokus auf verschiedene Medienarten
• gut erweiterbar für weitere Features
• einfach zu testen, weil Daten und Dateiaufbereitung sauber getrennt sind

Erweiterungsmöglichkeiten

Das Feature ist bereits stark, aber es kann noch weiter ausgebaut werden:

• Suche nach Notizen per Text oder Tag
• Kategorien oder Farbcodes
• Freigabe bestimmter Notizbücher
• Export als PDF oder Markdown
• Automatische Vorschau bei Bild- und Whiteboard-Elementen
• Notiz-Templates für wiederkehrende Vorgänge
• Versionierung und Verlauf

Zusammenfassung

Das Notiz-Feature ist kein bloßes Textfeld, sondern ein kleines, aber leistungsfähiges Arbeitswerkzeug. Es verbindet:

• schnelle Eingabe
• Organisation durch Notizbücher
• Bilder und Textdateien
• handschriftliche Skizzen
• einfache Speicherung im Backend

Das macht es für Endanwender sehr angenehm und für Entwickler als Grundlage für weitere Produktivitätsfunktionen sehr wertvoll.

Referenzpfade im Projekt

• UI: mkaWebCenter.Client/kApp-features/Notizen/Notizen_RouteView.razor
• API: mkaWebCenter/app_routes/api/KalenderApi.cs
• Repository: mkaWebCenter/app_data/KalenderRepository.cs
• Datei-Handling: mkaWebCenter/app_base/services/NotizFileService.cs

Wenn du möchtest, kann ich dir als Nächstes noch eine zweite Version dieses Dokuments in „Projekt-Readme-Format“ erstellen, also mit kürzerem Überblick, Architektur-Schema und einer Team-Übersicht für Stakeholder statt für Entwickler.