feat(language): implement internationalization and help overlay
This update introduces comprehensive language support (English/German) across the application, enabling localization for UI elements and settings dialogs. It also adds a dedicated Help Overlay component with detailed guides on using Gitty's core Git features. - Adds language selection to App Settings - Implements German translations in key areas - Introduces global help documentation accessible via Ctrl+/
This commit is contained in:
Christoph Brandau
@@ -0,0 +1,798 @@
|
||||
<script lang="ts">
|
||||
import { onMount, tick } from "svelte";
|
||||
import {
|
||||
AlertTriangle,
|
||||
BookOpen,
|
||||
Check,
|
||||
ChevronRight,
|
||||
CircleHelp,
|
||||
Clipboard,
|
||||
Cloud,
|
||||
Command,
|
||||
GitBranch,
|
||||
GitCommitHorizontal,
|
||||
Home,
|
||||
Keyboard,
|
||||
Lightbulb,
|
||||
Search,
|
||||
Wrench,
|
||||
X,
|
||||
} from "@lucide/svelte";
|
||||
|
||||
interface CommandExample {
|
||||
command: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
interface HelpSection {
|
||||
id: string;
|
||||
title: string;
|
||||
summary: string;
|
||||
steps?: string[];
|
||||
commands?: CommandExample[];
|
||||
note?: string;
|
||||
}
|
||||
|
||||
interface HelpCategory {
|
||||
id: string;
|
||||
label: string;
|
||||
description: string;
|
||||
sections: HelpSection[];
|
||||
}
|
||||
|
||||
interface Props {
|
||||
language: "en" | "de";
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const deCategories: HelpCategory[] = [
|
||||
{
|
||||
id: "start",
|
||||
label: "Erste Schritte",
|
||||
description: "Repository öffnen, Oberfläche verstehen und den ersten Commit erstellen.",
|
||||
sections: [
|
||||
{
|
||||
id: "start-workflow",
|
||||
title: "Dein erster Gitty-Workflow",
|
||||
summary: "Vom Repository bis zum veröffentlichten Commit in fünf klaren Schritten.",
|
||||
steps: [
|
||||
"Öffne ein vorhandenes Repository oder klone ein Projekt über die Repository-Verwaltung.",
|
||||
"Bearbeite deine Dateien. Gitty zeigt Änderungen im Arbeitsverzeichnis automatisch an.",
|
||||
"Prüfe den Diff und stage einzelne Dateien, Zeilen oder alle passenden Änderungen.",
|
||||
"Schreibe eine aussagekräftige Commit-Nachricht und erstelle den Commit.",
|
||||
"Nutze Fetch, Pull und Push, um deinen Stand mit dem Remote-Repository abzugleichen.",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "start-layout",
|
||||
title: "Die Oberfläche im Überblick",
|
||||
summary: "Links findest du Branches, Stashes und Dateien. In der Mitte prüfst und commitest du Änderungen; rechts siehst du Verlauf und Dateihistorie.",
|
||||
note: "Fast alle Bereiche lassen sich über die Trennlinien in der Größe anpassen oder über ihren Kopf einklappen.",
|
||||
},
|
||||
{
|
||||
id: "start-safety",
|
||||
title: "Sicher arbeiten",
|
||||
summary: "Prüfe vor Commit, Pull, Rebase oder Verwerfen immer den aktuellen Branch und die betroffenen Dateien. Gitty fragt bei destruktiven Aktionen nochmals nach.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "app",
|
||||
label: "Arbeiten mit Gitty",
|
||||
description: "Die wichtigsten Funktionen der App Schritt für Schritt.",
|
||||
sections: [
|
||||
{
|
||||
id: "app-changes",
|
||||
title: "Änderungen prüfen und stagen",
|
||||
summary: "Wähle eine geänderte Datei, lies den Diff und verschiebe gezielt Änderungen in den Staging-Bereich.",
|
||||
steps: [
|
||||
"Unstaged enthält noch nicht vorbereitete Änderungen; Staged enthält den nächsten Commit-Inhalt.",
|
||||
"Öffne eine Datei, um hinzugefügte und entfernte Zeilen zu prüfen.",
|
||||
"Stage ganze Dateien oder nutze die Zeilen-/Hunk-Aktionen für kleinere, saubere Commits.",
|
||||
"Verwerfen entfernt lokale Änderungen. Diese Aktion lässt sich nicht immer rückgängig machen.",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "app-history",
|
||||
title: "Verlauf, Suche und Vergleich",
|
||||
summary: "Der Commit-Verlauf zeigt Branches und Merges. Mit der globalen Suche findest du die Einführung von Code oder den Verlauf einer Datei.",
|
||||
steps: [
|
||||
"Klappe einen Commit auf, um seine Dateien zu sehen.",
|
||||
"Vergleiche zwei Commits über Compare in der Titelleiste.",
|
||||
"Nutze Reflog, um auch verschobene oder nicht mehr sichtbare Referenzen wiederzufinden.",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "app-stash",
|
||||
title: "Zwischenstände mit Stash sichern",
|
||||
summary: "Ein Stash parkt unvollständige Änderungen, ohne einen Commit zu erzeugen. Apply behält den Stash, Pop wendet ihn an und entfernt ihn.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "basics",
|
||||
label: "Git-Grundlagen",
|
||||
description: "Alltägliche Befehle für Status, Änderungen, Commits und Wiederherstellung.",
|
||||
sections: [
|
||||
{
|
||||
id: "basics-inspect",
|
||||
title: "Repository prüfen",
|
||||
summary: "Diese Befehle verändern nichts und eignen sich immer als erster Blick auf den aktuellen Zustand.",
|
||||
commands: [
|
||||
{ command: "git status", description: "Arbeitsverzeichnis und Staging-Bereich anzeigen" },
|
||||
{ command: "git diff", description: "Noch nicht gestagte Änderungen anzeigen" },
|
||||
{ command: "git diff --staged", description: "Inhalt des nächsten Commits anzeigen" },
|
||||
{ command: "git log --oneline --graph --decorate --all", description: "Kompakten Branch- und Commit-Verlauf anzeigen" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "basics-commit",
|
||||
title: "Änderungen speichern",
|
||||
summary: "Stage nur zusammengehörige Änderungen und beschreibe im Commit, warum die Änderung nötig ist.",
|
||||
commands: [
|
||||
{ command: "git add <datei>", description: "Eine Datei für den Commit vormerken" },
|
||||
{ command: "git add -p", description: "Änderungen interaktiv und abschnittsweise stagen" },
|
||||
{ command: "git commit -m \"Kurze Beschreibung\"", description: "Einen Commit erstellen" },
|
||||
{ command: "git commit --amend", description: "Den letzten lokalen Commit ergänzen oder umbenennen" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "basics-undo",
|
||||
title: "Änderungen rückgängig machen",
|
||||
summary: "Restore arbeitet am Arbeitsverzeichnis oder Staging-Bereich; Revert erzeugt einen neuen Gegen-Commit und ist für veröffentlichte Historie sicherer.",
|
||||
commands: [
|
||||
{ command: "git restore <datei>", description: "Lokale, noch nicht gestagte Änderung verwerfen" },
|
||||
{ command: "git restore --staged <datei>", description: "Datei aus dem Staging-Bereich entfernen" },
|
||||
{ command: "git revert <commit>", description: "Wirkung eines Commits durch neuen Commit umkehren" },
|
||||
],
|
||||
note: "Vorsicht: git reset --hard verwirft lokale Änderungen. Verwende den Befehl nur, wenn du den Verlust bewusst akzeptierst.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "branches",
|
||||
label: "Branches & Merges",
|
||||
description: "Parallele Arbeit organisieren, zusammenführen und aufräumen.",
|
||||
sections: [
|
||||
{
|
||||
id: "branches-manage",
|
||||
title: "Branches verwalten",
|
||||
summary: "Ein Branch ist ein beweglicher Zeiger auf eine Commit-Linie. Erstelle für jede getrennte Aufgabe einen eigenen Branch.",
|
||||
commands: [
|
||||
{ command: "git switch -c feature/meine-aenderung", description: "Neuen Branch erstellen und wechseln" },
|
||||
{ command: "git switch main", description: "Zu einem vorhandenen Branch wechseln" },
|
||||
{ command: "git branch -vv", description: "Lokale Branches mit Upstream-Status anzeigen" },
|
||||
{ command: "git branch -d <branch>", description: "Bereits zusammengeführten Branch löschen" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "branches-integrate",
|
||||
title: "Merge oder Rebase?",
|
||||
summary: "Merge bewahrt die tatsächliche Verzweigung. Rebase setzt lokale Commits auf eine neue Basis und erzeugt eine lineare Historie.",
|
||||
commands: [
|
||||
{ command: "git merge <branch>", description: "Einen Branch in den aktuellen Branch integrieren" },
|
||||
{ command: "git rebase main", description: "Lokale Commits auf den aktuellen Stand von main setzen" },
|
||||
{ command: "git rebase --continue", description: "Rebase nach gelöstem Konflikt fortsetzen" },
|
||||
{ command: "git rebase --abort", description: "Rebase abbrechen und Ausgangszustand wiederherstellen" },
|
||||
],
|
||||
note: "Rebase keine Commits, an denen andere bereits weiterarbeiten. Das Umschreiben veröffentlichter Historie verursacht unnötige Konflikte.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "remote",
|
||||
label: "Remote & Sync",
|
||||
description: "Änderungen sicher mit GitHub, GitLab oder anderen Remotes austauschen.",
|
||||
sections: [
|
||||
{
|
||||
id: "remote-sync",
|
||||
title: "Fetch, Pull und Push",
|
||||
summary: "Fetch lädt Referenzen ohne deine Dateien zu ändern. Pull integriert Remote-Änderungen. Push veröffentlicht deine Commits.",
|
||||
commands: [
|
||||
{ command: "git fetch --all --prune", description: "Remote-Stände laden und entfernte Referenzen aufräumen" },
|
||||
{ command: "git pull --rebase", description: "Remote-Änderungen laden und lokale Commits darauf neu abspielen" },
|
||||
{ command: "git push -u origin <branch>", description: "Branch erstmals veröffentlichen und Upstream setzen" },
|
||||
{ command: "git remote -v", description: "Konfigurierte Remote-Adressen anzeigen" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "remote-ahead",
|
||||
title: "Ahead und Behind verstehen",
|
||||
summary: "Ahead bedeutet: lokale Commits wurden noch nicht gepusht. Behind bedeutet: im Remote liegen neue Commits, die lokal fehlen. Beides gleichzeitig weist auf auseinanderlaufende Historien hin.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "troubleshooting",
|
||||
label: "Probleme lösen",
|
||||
description: "Konflikte, verlorene Commits und typische Fehlermeldungen verstehen.",
|
||||
sections: [
|
||||
{
|
||||
id: "trouble-conflicts",
|
||||
title: "Merge-Konflikte lösen",
|
||||
summary: "Ein Konflikt entsteht, wenn Git Änderungen nicht eindeutig kombinieren kann. Gitty bietet dafür einen eigenen Resolve-Dialog.",
|
||||
steps: [
|
||||
"Öffne jede Konfliktdatei und vergleiche Current, Incoming und das kombinierte Ergebnis.",
|
||||
"Übernimm eine Seite oder bearbeite den Zielinhalt manuell.",
|
||||
"Markiere die Datei als gelöst und prüfe anschließend den vollständigen Diff.",
|
||||
"Führe Merge, Rebase oder Cherry-pick fort – oder brich die Operation vollständig ab.",
|
||||
],
|
||||
commands: [
|
||||
{ command: "git status", description: "Konfliktdateien und laufende Operation anzeigen" },
|
||||
{ command: "git merge --abort", description: "Laufenden Merge abbrechen" },
|
||||
{ command: "git cherry-pick --abort", description: "Laufenden Cherry-pick abbrechen" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "trouble-reflog",
|
||||
title: "Verlorene Commits wiederfinden",
|
||||
summary: "Reflog protokolliert lokale Bewegungen von HEAD und Branches. Kopiere den Hash des gesuchten Eintrags und erstelle daraus einen Sicherungs-Branch.",
|
||||
commands: [
|
||||
{ command: "git reflog", description: "Lokale Referenzbewegungen anzeigen" },
|
||||
{ command: "git branch recovery/<name> <commit>", description: "Gefundenen Commit dauerhaft über Branch sichern" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "shortcuts",
|
||||
label: "Tastenkürzel",
|
||||
description: "Gitty schneller und ohne Maus bedienen.",
|
||||
sections: [
|
||||
{
|
||||
id: "shortcuts-main",
|
||||
title: "Globale Bedienung",
|
||||
summary: "Die Hilfe ist überall erreichbar. Dialoge lassen sich konsistent schließen und Suchfelder direkt fokussieren.",
|
||||
commands: [
|
||||
{ command: "Ctrl + /", description: "Diese Hilfe öffnen" },
|
||||
{ command: "Escape", description: "Aktuelles Overlay oder Dialogfenster schließen" },
|
||||
{ command: "Tab / Shift + Tab", description: "Zwischen Bedienelementen wechseln" },
|
||||
{ command: "Enter / Leertaste", description: "Fokussierte Aktion ausführen" },
|
||||
],
|
||||
note: "Auf macOS kannst du für Ctrl in der Regel die Command-Taste verwenden.",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const enCategories: HelpCategory[] = [
|
||||
{
|
||||
id: "start",
|
||||
label: "Getting started",
|
||||
description: "Open a repository, understand the interface, and create your first commit.",
|
||||
sections: [
|
||||
{
|
||||
id: "start-workflow",
|
||||
title: "Your first Gitty workflow",
|
||||
summary: "From repository to published commit in five clear steps.",
|
||||
steps: [
|
||||
"Open an existing repository or clone a project from Repository Management.",
|
||||
"Edit your files. Gitty automatically displays working-tree changes.",
|
||||
"Review the diff and stage individual files, lines, or all related changes.",
|
||||
"Write a meaningful commit message and create the commit.",
|
||||
"Use Fetch, Pull, and Push to synchronize with the remote repository.",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "start-layout",
|
||||
title: "Interface overview",
|
||||
summary: "Branches, stashes, and files are on the left. Review and commit changes in the center; history and file history are on the right.",
|
||||
note: "Most areas can be resized using their dividers or collapsed from their header.",
|
||||
},
|
||||
{
|
||||
id: "start-safety",
|
||||
title: "Work safely",
|
||||
summary: "Before committing, pulling, rebasing, or discarding, always check the current branch and affected files. Gitty confirms destructive actions.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "app",
|
||||
label: "Working with Gitty",
|
||||
description: "The app's most important features, explained step by step.",
|
||||
sections: [
|
||||
{
|
||||
id: "app-changes",
|
||||
title: "Review and stage changes",
|
||||
summary: "Select a changed file, review its diff, and move changes into the staging area.",
|
||||
steps: [
|
||||
"Unstaged contains changes not yet prepared; Staged contains the next commit.",
|
||||
"Open a file to review added and removed lines.",
|
||||
"Stage whole files or use line and hunk actions for focused commits.",
|
||||
"Discard removes local changes and cannot always be undone.",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "app-history",
|
||||
title: "History, search, and comparison",
|
||||
summary: "Commit History shows branches and merges. Global Search finds where code was introduced or displays a file's history.",
|
||||
steps: [
|
||||
"Expand a commit to inspect its files.",
|
||||
"Compare two commits with Compare in the title bar.",
|
||||
"Use Reflog to recover moved or otherwise hidden references.",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "app-stash",
|
||||
title: "Save temporary work with Stash",
|
||||
summary: "A stash parks unfinished changes without creating a commit. Apply keeps the stash; Pop applies and removes it.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "basics",
|
||||
label: "Git basics",
|
||||
description: "Everyday commands for status, changes, commits, and recovery.",
|
||||
sections: [
|
||||
{
|
||||
id: "basics-inspect",
|
||||
title: "Inspect a repository",
|
||||
summary: "These commands do not change anything and are always a good first look at the current state.",
|
||||
commands: [
|
||||
{ command: "git status", description: "Show the working tree and staging area" },
|
||||
{ command: "git diff", description: "Show changes that have not been staged" },
|
||||
{ command: "git diff --staged", description: "Show the contents of the next commit" },
|
||||
{ command: "git log --oneline --graph --decorate --all", description: "Show a compact branch and commit graph" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "basics-commit",
|
||||
title: "Save changes",
|
||||
summary: "Stage only related changes and explain why the change is needed in the commit message.",
|
||||
commands: [
|
||||
{ command: "git add <file>", description: "Stage one file" },
|
||||
{ command: "git add -p", description: "Stage changes interactively by hunk" },
|
||||
{ command: "git commit -m \"Short description\"", description: "Create a commit" },
|
||||
{ command: "git commit --amend", description: "Update or rename the latest local commit" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "basics-undo",
|
||||
title: "Undo changes",
|
||||
summary: "Restore changes the working tree or staging area. Revert creates a new inverse commit and is safer for published history.",
|
||||
commands: [
|
||||
{ command: "git restore <file>", description: "Discard an unstaged local change" },
|
||||
{ command: "git restore --staged <file>", description: "Remove a file from the staging area" },
|
||||
{ command: "git revert <commit>", description: "Undo a commit through a new commit" },
|
||||
],
|
||||
note: "Caution: git reset --hard discards local changes. Use it only when that data loss is intentional.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "branches",
|
||||
label: "Branches & merges",
|
||||
description: "Organize parallel work, integrate it, and clean up afterward.",
|
||||
sections: [
|
||||
{
|
||||
id: "branches-manage",
|
||||
title: "Manage branches",
|
||||
summary: "A branch is a movable pointer to a commit line. Create a separate branch for each independent task.",
|
||||
commands: [
|
||||
{ command: "git switch -c feature/my-change", description: "Create and switch to a new branch" },
|
||||
{ command: "git switch main", description: "Switch to an existing branch" },
|
||||
{ command: "git branch -vv", description: "Show local branches and upstream status" },
|
||||
{ command: "git branch -d <branch>", description: "Delete a branch that has already been merged" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "branches-integrate",
|
||||
title: "Merge or rebase?",
|
||||
summary: "Merge preserves the actual branch structure. Rebase moves local commits onto a new base for a linear history.",
|
||||
commands: [
|
||||
{ command: "git merge <branch>", description: "Integrate a branch into the current branch" },
|
||||
{ command: "git rebase main", description: "Move local commits onto the latest main" },
|
||||
{ command: "git rebase --continue", description: "Continue after resolving a conflict" },
|
||||
{ command: "git rebase --abort", description: "Abort and restore the original state" },
|
||||
],
|
||||
note: "Do not rebase commits other people are already using. Rewriting published history creates avoidable conflicts.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "remote",
|
||||
label: "Remote & sync",
|
||||
description: "Exchange changes safely with GitHub, GitLab, or other remotes.",
|
||||
sections: [
|
||||
{
|
||||
id: "remote-sync",
|
||||
title: "Fetch, pull, and push",
|
||||
summary: "Fetch downloads references without changing files. Pull integrates remote changes. Push publishes your commits.",
|
||||
commands: [
|
||||
{ command: "git fetch --all --prune", description: "Download remote state and remove stale references" },
|
||||
{ command: "git pull --rebase", description: "Download changes and replay local commits on top" },
|
||||
{ command: "git push -u origin <branch>", description: "Publish a branch and set its upstream" },
|
||||
{ command: "git remote -v", description: "Show configured remote URLs" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "remote-ahead",
|
||||
title: "Understanding Ahead and Behind",
|
||||
summary: "Ahead means local commits have not been pushed. Behind means remote commits are missing locally. Both at once means the histories have diverged.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "troubleshooting",
|
||||
label: "Troubleshooting",
|
||||
description: "Resolve conflicts, recover lost commits, and understand common errors.",
|
||||
sections: [
|
||||
{
|
||||
id: "trouble-conflicts",
|
||||
title: "Resolve merge conflicts",
|
||||
summary: "A conflict occurs when Git cannot combine changes unambiguously. Gitty provides a dedicated Resolve dialog.",
|
||||
steps: [
|
||||
"Open each conflicted file and compare Current, Incoming, and the combined result.",
|
||||
"Accept one side or edit the final content manually.",
|
||||
"Mark the file resolved and review the complete diff.",
|
||||
"Continue the merge, rebase, or cherry-pick—or abort the operation.",
|
||||
],
|
||||
commands: [
|
||||
{ command: "git status", description: "Show conflicts and the active operation" },
|
||||
{ command: "git merge --abort", description: "Abort the current merge" },
|
||||
{ command: "git cherry-pick --abort", description: "Abort the current cherry-pick" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "trouble-reflog",
|
||||
title: "Recover lost commits",
|
||||
summary: "Reflog records local movements of HEAD and branches. Copy the desired hash and create a recovery branch from it.",
|
||||
commands: [
|
||||
{ command: "git reflog", description: "Show local reference movements" },
|
||||
{ command: "git branch recovery/<name> <commit>", description: "Preserve the recovered commit with a branch" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "shortcuts",
|
||||
label: "Keyboard shortcuts",
|
||||
description: "Use Gitty quickly without reaching for the mouse.",
|
||||
sections: [
|
||||
{
|
||||
id: "shortcuts-main",
|
||||
title: "Global controls",
|
||||
summary: "Help is available everywhere. Dialogs close consistently and search fields receive focus automatically.",
|
||||
commands: [
|
||||
{ command: "Ctrl + /", description: "Open this help center" },
|
||||
{ command: "Escape", description: "Close the current overlay or dialog" },
|
||||
{ command: "Tab / Shift + Tab", description: "Move between controls" },
|
||||
{ command: "Enter / Space", description: "Activate the focused control" },
|
||||
],
|
||||
note: "On macOS, you can generally use Command instead of Ctrl.",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
let { language = "en", onClose = () => {} }: Props = $props();
|
||||
const isGerman = $derived(language === "de");
|
||||
const categories = $derived(isGerman ? deCategories : enCategories);
|
||||
let selectedCategoryId = $state("start");
|
||||
let searchQuery = $state("");
|
||||
let copiedCommand = $state("");
|
||||
let searchInput: HTMLInputElement;
|
||||
let contentElement: HTMLElement;
|
||||
let copyTimer: ReturnType<typeof setTimeout> | undefined;
|
||||
|
||||
const normalizedQuery = $derived(searchQuery.trim().toLocaleLowerCase(language));
|
||||
const selectedCategory = $derived(categories.find((category) => category.id === selectedCategoryId) ?? categories[0]);
|
||||
const visibleGroups = $derived.by(() => {
|
||||
if (!normalizedQuery) return [{ category: selectedCategory, sections: selectedCategory.sections }];
|
||||
return categories.flatMap((category) => {
|
||||
const sections = category.sections.filter((section) => sectionSearchText(category, section).includes(normalizedQuery));
|
||||
return sections.length > 0 ? [{ category, sections }] : [];
|
||||
});
|
||||
});
|
||||
const resultCount = $derived(visibleGroups.reduce((sum, group) => sum + group.sections.length, 0));
|
||||
|
||||
$effect(() => {
|
||||
normalizedQuery;
|
||||
selectedCategoryId;
|
||||
if (contentElement) contentElement.scrollTop = 0;
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
void tick().then(() => searchInput?.focus());
|
||||
return () => {
|
||||
if (copyTimer) clearTimeout(copyTimer);
|
||||
};
|
||||
});
|
||||
|
||||
function sectionSearchText(category: HelpCategory, section: HelpSection): string {
|
||||
return [
|
||||
category.label,
|
||||
category.description,
|
||||
section.title,
|
||||
section.summary,
|
||||
...(section.steps ?? []),
|
||||
...(section.commands?.flatMap((entry) => [entry.command, entry.description]) ?? []),
|
||||
section.note ?? "",
|
||||
].join(" ").toLocaleLowerCase(language);
|
||||
}
|
||||
|
||||
function selectCategory(id: string) {
|
||||
selectedCategoryId = id;
|
||||
searchQuery = "";
|
||||
}
|
||||
|
||||
function isWarningNote(note: string): boolean {
|
||||
return /^(Vorsicht|Rebase|Caution|Do not)/.test(note);
|
||||
}
|
||||
|
||||
async function copyCommand(command: string) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(command);
|
||||
copiedCommand = command;
|
||||
if (copyTimer) clearTimeout(copyTimer);
|
||||
copyTimer = setTimeout(() => { copiedCommand = ""; }, 1800);
|
||||
} catch {
|
||||
copiedCommand = "";
|
||||
}
|
||||
}
|
||||
|
||||
function handleBackdropClick(event: MouseEvent) {
|
||||
if (event.target === event.currentTarget) onClose();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="help-backdrop" role="presentation" onclick={handleBackdropClick}>
|
||||
<div class="help-overlay" role="dialog" aria-modal="true" aria-labelledby="help-title">
|
||||
<header class="help-header">
|
||||
<div class="help-title-wrap">
|
||||
<span class="help-mark"><CircleHelp size={19} aria-hidden="true" /></span>
|
||||
<div>
|
||||
<h2 id="help-title">{isGerman ? "Gitty Hilfe" : "Gitty Help"}</h2>
|
||||
<p>{isGerman ? "App-Anleitung und Git-Wissen an einem Ort" : "App guidance and Git knowledge in one place"}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="help-search">
|
||||
<span class="help-search-icon"><Search size={17} aria-hidden="true" /></span>
|
||||
<input bind:this={searchInput} bind:value={searchQuery} type="search" placeholder={isGerman ? "Hilfe und Git-Befehle durchsuchen …" : "Search help and Git commands …"} aria-label={isGerman ? "Hilfe durchsuchen" : "Search help"} />
|
||||
<kbd>Ctrl /</kbd>
|
||||
</label>
|
||||
|
||||
<button class="help-close" type="button" onclick={onClose} title={isGerman ? "Hilfe schließen" : "Close help"} aria-label={isGerman ? "Hilfe schließen" : "Close help"}>
|
||||
<X size={19} aria-hidden="true" />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="help-layout">
|
||||
<nav class="help-nav" aria-label={isGerman ? "Hilfethemen" : "Help topics"}>
|
||||
<p class="help-nav-label">{isGerman ? "Themen" : "Topics"}</p>
|
||||
{#each categories as category, index}
|
||||
<button
|
||||
type="button"
|
||||
class:active={!normalizedQuery && category.id === selectedCategoryId}
|
||||
onclick={() => selectCategory(category.id)}
|
||||
>
|
||||
<span class="help-nav-icon">
|
||||
{#if index === 0}<Home size={17} aria-hidden="true" />
|
||||
{:else if index === 1}<BookOpen size={17} aria-hidden="true" />
|
||||
{:else if index === 2}<GitCommitHorizontal size={17} aria-hidden="true" />
|
||||
{:else if index === 3}<GitBranch size={17} aria-hidden="true" />
|
||||
{:else if index === 4}<Cloud size={17} aria-hidden="true" />
|
||||
{:else if index === 5}<Wrench size={17} aria-hidden="true" />
|
||||
{:else}<Keyboard size={17} aria-hidden="true" />{/if}
|
||||
</span>
|
||||
<span>{category.label}</span>
|
||||
<span class="help-nav-chevron"><ChevronRight size={14} aria-hidden="true" /></span>
|
||||
</button>
|
||||
{/each}
|
||||
|
||||
<div class="help-nav-tip">
|
||||
<span class="help-tip-icon"><Lightbulb size={16} aria-hidden="true" /></span>
|
||||
<span>{isGerman ? "Suche auch nach Befehlen wie" : "Try commands such as"} <code>rebase</code>, <code>stash</code> {isGerman ? "oder" : "or"} <code>reflog</code>.</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="help-content" bind:this={contentElement}>
|
||||
{#if normalizedQuery}
|
||||
<header class="help-result-header">
|
||||
<div>
|
||||
<span>{isGerman ? "Suchergebnisse" : "Search results"}</span>
|
||||
<h3>{resultCount} {isGerman ? "Treffer für" : resultCount === 1 ? "result for" : "results for"} „{searchQuery.trim()}“</h3>
|
||||
</div>
|
||||
<button type="button" onclick={() => { searchQuery = ""; }}>{isGerman ? "Suche löschen" : "Clear search"}</button>
|
||||
</header>
|
||||
{/if}
|
||||
|
||||
{#if visibleGroups.length === 0}
|
||||
<div class="help-empty">
|
||||
<span class="help-empty-icon"><Search size={28} aria-hidden="true" /></span>
|
||||
<h3>{isGerman ? "Kein Hilfethema gefunden" : "No help topic found"}</h3>
|
||||
<p>{isGerman ? "Versuche einen allgemeineren Begriff wie „Commit“, „Branch“, „Remote“ oder „Konflikt“." : "Try a broader term such as “commit”, “branch”, “remote”, or “conflict”."}</p>
|
||||
<button class="btn-secondary" type="button" onclick={() => { searchQuery = ""; }}>{isGerman ? "Alle Themen anzeigen" : "Show all topics"}</button>
|
||||
</div>
|
||||
{:else}
|
||||
{#each visibleGroups as group}
|
||||
<div class="help-group">
|
||||
<header class="help-group-header">
|
||||
<span>{normalizedQuery ? group.category.label : isGerman ? "Gitty Handbuch" : "Gitty handbook"}</span>
|
||||
<h3>{normalizedQuery ? group.category.label : group.category.label}</h3>
|
||||
<p>{group.category.description}</p>
|
||||
</header>
|
||||
|
||||
{#each group.sections as section, sectionIndex}
|
||||
<article class="help-section" id={section.id}>
|
||||
<div class="help-section-number">{String(sectionIndex + 1).padStart(2, "0")}</div>
|
||||
<div class="help-section-body">
|
||||
<h4>{section.title}</h4>
|
||||
<p>{section.summary}</p>
|
||||
|
||||
{#if section.steps}
|
||||
<ol class="help-steps">
|
||||
{#each section.steps as step}
|
||||
<li><span>{step}</span></li>
|
||||
{/each}
|
||||
</ol>
|
||||
{/if}
|
||||
|
||||
{#if section.commands}
|
||||
<div class="help-commands">
|
||||
{#each section.commands as entry}
|
||||
<div class="help-command-row">
|
||||
<code>{entry.command}</code>
|
||||
<span>{entry.description}</span>
|
||||
<button type="button" onclick={() => copyCommand(entry.command)} aria-label={(isGerman ? "Befehl kopieren: " : "Copy command: ") + entry.command} title={isGerman ? "Befehl kopieren" : "Copy command"}>
|
||||
{#if copiedCommand === entry.command}
|
||||
<Check size={15} aria-hidden="true" /><span>{isGerman ? "Kopiert" : "Copied"}</span>
|
||||
{:else}
|
||||
<Clipboard size={15} aria-hidden="true" /><span>{isGerman ? "Kopieren" : "Copy"}</span>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if section.note}
|
||||
<div class="help-note" class:warning={isWarningNote(section.note)}>
|
||||
{#if isWarningNote(section.note)}
|
||||
<span class="help-note-icon"><AlertTriangle size={16} aria-hidden="true" /></span>
|
||||
{:else}
|
||||
<span class="help-note-icon"><Lightbulb size={16} aria-hidden="true" /></span>
|
||||
{/if}
|
||||
<span>{section.note}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<footer class="help-footer">
|
||||
<span><Command size={14} aria-hidden="true" /> <kbd>Ctrl</kbd><kbd>/</kbd> {isGerman ? "Hilfe öffnen" : "open help"}</span>
|
||||
<span><kbd>Esc</kbd> {isGerman ? "schließen" : "close"}</span>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.help-backdrop {
|
||||
position: fixed;
|
||||
inset: var(--app-titlebar-height, 42px) 0 0;
|
||||
z-index: 70;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
background: rgba(3, 7, 13, 0.82);
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
.help-overlay {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
width: min(1240px, 100%);
|
||||
height: min(820px, 100%);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 12px;
|
||||
color: var(--color-ink);
|
||||
background: var(--app-dialog-bg);
|
||||
box-shadow: var(--app-dialog-shadow);
|
||||
}
|
||||
|
||||
.help-header {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(220px, 0.72fr) minmax(320px, 1.2fr) minmax(44px, 0.72fr);
|
||||
align-items: center;
|
||||
gap: 22px;
|
||||
min-height: 74px;
|
||||
padding: 12px 16px 12px 20px;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
background: var(--app-dialog-chrome);
|
||||
}
|
||||
|
||||
.help-title-wrap { display: flex; align-items: center; gap: 11px; min-width: 0; }
|
||||
.help-mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(90, 140, 248, 0.28); border-radius: 8px; color: var(--color-accent); background: rgba(90, 140, 248, 0.09); }
|
||||
.help-title-wrap h2 { margin: 0; font-size: 17px; line-height: 1.2; }
|
||||
.help-title-wrap p { margin: 3px 0 0; overflow: hidden; color: var(--color-ink-faint); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.help-search { position: relative; display: flex; align-items: center; min-width: 0; }
|
||||
.help-search-icon { position: absolute; left: 12px; display: grid; color: var(--color-ink-faint); pointer-events: none; }
|
||||
.help-search input { width: 100%; height: 40px; padding: 0 68px 0 39px; border-color: var(--color-border-input); border-radius: 8px; background: var(--app-input-bg); color: var(--color-ink); font-size: 12.5px; }
|
||||
.help-search kbd { position: absolute; right: 8px; }
|
||||
.help-close { justify-self: end; width: 36px; min-height: 36px; padding: 0; border-color: transparent; border-radius: 7px; background: transparent; color: var(--color-ink-muted); }
|
||||
|
||||
.help-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 0; }
|
||||
.help-nav { display: flex; flex-direction: column; min-height: 0; padding: 14px 10px 12px; border-right: 1px solid var(--color-border); background: var(--color-surface-dim); }
|
||||
.help-nav-label { margin: 0 10px 8px; color: var(--color-ink-faint); font-size: 9.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
|
||||
.help-nav > button { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 42px; padding: 5px 9px; border-color: transparent; border-radius: 7px; background: transparent; color: var(--color-ink-muted); font-size: 11.5px; font-weight: 650; text-align: left; }
|
||||
.help-nav > button:hover { background: var(--color-surface-hover); color: var(--color-ink); }
|
||||
.help-nav > button.active { border-color: rgba(90, 140, 248, 0.22); background: rgba(90, 140, 248, 0.12); color: var(--color-accent); }
|
||||
.help-nav-icon { display: grid; place-items: center; color: currentColor; }
|
||||
.help-nav-chevron { display: grid; color: var(--color-ink-faint); }
|
||||
.help-nav-tip { display: flex; align-items: flex-start; gap: 8px; margin: auto 6px 0; padding: 11px; border-top: 1px solid var(--color-border-subtle); color: var(--color-ink-faint); font-size: 10.5px; line-height: 1.5; }
|
||||
.help-tip-icon { flex: 0 0 auto; display: grid; margin-top: 2px; color: #d8a13d; }
|
||||
.help-nav-tip code { color: var(--color-ink-muted); font-family: var(--font-mono); }
|
||||
|
||||
.help-content { min-width: 0; min-height: 0; padding: 0 34px 48px; overflow: auto; outline: none; scroll-behavior: smooth; }
|
||||
.help-group { max-width: 850px; margin: 0 auto; }
|
||||
.help-group + .help-group { margin-top: 22px; border-top: 1px solid var(--color-border); }
|
||||
.help-group-header { padding: 34px 0 26px; border-bottom: 1px solid var(--color-border); }
|
||||
.help-group-header > span, .help-result-header span { color: var(--color-accent); font-size: 9.5px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
|
||||
.help-group-header h3 { margin: 7px 0 8px; font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.025em; }
|
||||
.help-group-header p { max-width: 650px; margin: 0; color: var(--color-ink-muted); font-size: 13px; line-height: 1.55; }
|
||||
|
||||
.help-result-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 850px; margin: 0 auto; padding: 22px 0 0; }
|
||||
.help-result-header h3 { margin: 4px 0 0; font-size: 17px; }
|
||||
.help-result-header button { min-height: 30px; padding: 0 10px; border-color: var(--color-border-subtle); background: transparent; color: var(--color-ink-muted); font-size: 10.5px; }
|
||||
|
||||
.help-section { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 2px; padding: 26px 0; border-bottom: 1px solid var(--color-border-subtle); }
|
||||
.help-section-number { padding-top: 3px; color: var(--color-ink-faint); font-family: var(--font-mono); font-size: 10px; }
|
||||
.help-section-body h4 { margin: 0 0 7px; font-size: 16px; }
|
||||
.help-section-body > p { margin: 0; color: var(--color-ink-muted); font-size: 12.5px; line-height: 1.6; }
|
||||
.help-steps { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: help-step; }
|
||||
.help-steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 9px; color: var(--color-ink-muted); font-size: 12px; line-height: 1.5; counter-increment: help-step; }
|
||||
.help-steps li::before { content: counter(help-step); display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid rgba(90, 140, 248, 0.35); border-radius: 50%; color: var(--color-accent); font-family: var(--font-mono); font-size: 9px; font-weight: 800; }
|
||||
|
||||
.help-commands { display: grid; gap: 1px; margin-top: 17px; overflow: hidden; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-border-subtle); }
|
||||
.help-command-row { display: grid; grid-template-columns: minmax(210px, 0.9fr) minmax(190px, 1.2fr) auto; align-items: center; gap: 14px; min-height: 47px; padding: 6px 7px 6px 13px; background: var(--code-surface); }
|
||||
.help-command-row:hover { background: var(--code-hover-bg); }
|
||||
.help-command-row > code { overflow: hidden; color: var(--color-accent); font-family: var(--font-mono); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.help-command-row > span { color: var(--color-ink-faint); font-size: 10.5px; line-height: 1.35; }
|
||||
.help-command-row button { display: inline-flex; align-items: center; gap: 6px; min-width: 83px; min-height: 31px; padding: 0 9px; border-color: var(--color-border-subtle); border-radius: 6px; background: var(--color-surface-raised); color: var(--color-ink-muted); font-size: 10px; }
|
||||
.help-command-row button:hover { border-color: rgba(90, 140, 248, 0.32); color: var(--color-accent); }
|
||||
|
||||
.help-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 15px; padding: 11px 12px; border: 1px solid rgba(90, 140, 248, 0.2); border-radius: 7px; background: rgba(90, 140, 248, 0.07); color: var(--color-ink-muted); font-size: 11px; line-height: 1.5; }
|
||||
.help-note-icon { flex: 0 0 auto; display: grid; margin-top: 1px; color: var(--color-accent); }
|
||||
.help-note.warning { border-color: rgba(224, 160, 64, 0.24); background: rgba(224, 160, 64, 0.07); }
|
||||
.help-note.warning .help-note-icon { color: #d8a13d; }
|
||||
|
||||
.help-empty { display: grid; justify-items: center; max-width: 520px; margin: 90px auto 0; text-align: center; }
|
||||
.help-empty-icon { display: grid; color: var(--color-ink-faint); }
|
||||
.help-empty h3 { margin: 14px 0 5px; font-size: 18px; }
|
||||
.help-empty p { margin: 0 0 18px; color: var(--color-ink-muted); font-size: 12px; line-height: 1.55; }
|
||||
|
||||
.help-footer { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 0 16px 0 20px; border-top: 1px solid var(--color-border); background: var(--app-dialog-chrome); color: var(--color-ink-faint); font-size: 9.5px; }
|
||||
.help-footer span { display: inline-flex; align-items: center; gap: 5px; }
|
||||
kbd { display: inline-grid; place-items: center; min-width: 20px; height: 21px; padding: 0 5px; border: 1px solid var(--color-border-input); border-radius: 5px; background: var(--color-surface-raised); color: var(--color-ink-muted); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04); font-family: var(--font-mono); font-size: 9px; }
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.help-backdrop { padding: 10px; }
|
||||
.help-header { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
|
||||
.help-title-wrap { display: none; }
|
||||
.help-layout { grid-template-columns: 190px minmax(0, 1fr); }
|
||||
.help-content { padding-inline: 20px; }
|
||||
.help-command-row { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; }
|
||||
.help-command-row > span { grid-column: 1; }
|
||||
.help-command-row button { grid-column: 2; grid-row: 1 / 3; }
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.help-layout { grid-template-columns: 1fr; }
|
||||
.help-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--color-border); }
|
||||
.help-nav-label, .help-nav-tip, .help-nav-chevron { display: none; }
|
||||
.help-nav > button { flex: 0 0 auto; width: auto; grid-template-columns: 24px auto; }
|
||||
.help-content { padding-inline: 15px; }
|
||||
.help-section { grid-template-columns: 1fr; }
|
||||
.help-section-number { display: none; }
|
||||
.help-footer { display: none; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user