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+/

src/lib/components/AppSettingsDialog.svelte

@@ -1,22 +1,26 @@
 <script lang="ts">
-  import { Check, Settings, X } from "@lucide/svelte";
-  import type { AnalyticsSettings, AppTheme } from "../types";
+  import { Check, Languages, Settings, X } from "@lucide/svelte";
+  import type { AnalyticsSettings, AppLanguage, AppTheme } from "../types";
 
   interface Props {
     analytics: AnalyticsSettings;
     theme: AppTheme;
-    onSave: (settings: AnalyticsSettings, theme: AppTheme) => void;
+    language: AppLanguage;
+    onSave: (settings: AnalyticsSettings, theme: AppTheme, language: AppLanguage) => void;
     onClose: () => void;
   }
 
-  let { analytics, theme = "system", onSave = () => {}, onClose = () => {} }: Props = $props();
+  let { analytics, theme = "system", language = "en", onSave = () => {}, onClose = () => {} }: Props = $props();
 
   let analyticsEnabled = $state(true);
   let selectedTheme = $state<AppTheme>("system");
+  let selectedLanguage = $state<AppLanguage>("en");
+  const isGerman = $derived(selectedLanguage === "de");
 
   $effect(() => {
     analyticsEnabled = analytics.enabled;
     selectedTheme = theme;
+    selectedLanguage = language;
   });
 
   function save() {
@@ -24,18 +28,18 @@
       ...analytics,
       enabled: analyticsEnabled,
       noticeSeen: true,
-    }, selectedTheme);
+    }, selectedTheme, selectedLanguage);
   }
 </script>
 
 <div class="dialog-backdrop" role="presentation">
-  <div class="dialog app-settings-dialog" role="dialog" aria-modal="true" aria-label="Settings" tabindex="-1">
+  <div class="dialog app-settings-dialog" role="dialog" aria-modal="true" aria-label={isGerman ? "Einstellungen" : "Settings"} tabindex="-1">
     <header class="dialog-header">
       <div>
         <span class="eyebrow">Gitty</span>
-        <h2 class="dialog-title">Settings</h2>
+        <h2 class="dialog-title">{isGerman ? "Einstellungen" : "Settings"}</h2>
       </div>
-      <button class="dialog-close" type="button" onclick={onClose} title="Close">
+      <button class="dialog-close" type="button" onclick={onClose} title={isGerman ? "Schließen" : "Close"}>
         <X size={18} aria-hidden="true" />
       </button>
     </header>
@@ -45,23 +49,44 @@
         <header>
           <Settings size={16} aria-hidden="true" />
           <div>
-            <span class="eyebrow">Appearance</span>
-            <h3>Theme</h3>
+            <span class="eyebrow">{isGerman ? "Darstellung" : "Appearance"}</span>
+            <h3>{isGerman ? "Farbschema" : "Theme"}</h3>
           </div>
         </header>
 
-        <div class="settings-segmented" role="radiogroup" aria-label="Theme">
+        <div class="settings-segmented" role="radiogroup" aria-label={isGerman ? "Farbschema" : "Theme"}>
           <label class:active={selectedTheme === "system"}>
             <input type="radio" bind:group={selectedTheme} value="system" />
             <span>System</span>
           </label>
           <label class:active={selectedTheme === "light"}>
             <input type="radio" bind:group={selectedTheme} value="light" />
-            <span>Light</span>
+            <span>{isGerman ? "Hell" : "Light"}</span>
           </label>
           <label class:active={selectedTheme === "dark"}>
             <input type="radio" bind:group={selectedTheme} value="dark" />
-            <span>Dark</span>
+            <span>{isGerman ? "Dunkel" : "Dark"}</span>
+          </label>
+        </div>
+      </section>
+
+      <section class="settings-section">
+        <header>
+          <Languages size={16} aria-hidden="true" />
+          <div>
+            <span class="eyebrow">{isGerman ? "Sprache" : "Language"}</span>
+            <h3>{isGerman ? "App-Sprache" : "App language"}</h3>
+          </div>
+        </header>
+
+        <div class="settings-segmented settings-language" role="radiogroup" aria-label={isGerman ? "App-Sprache" : "App language"}>
+          <label class:active={selectedLanguage === "en"}>
+            <input type="radio" bind:group={selectedLanguage} value="en" />
+            <span>EN · English</span>
+          </label>
+          <label class:active={selectedLanguage === "de"}>
+            <input type="radio" bind:group={selectedLanguage} value="de" />
+            <span>DE · Deutsch</span>
           </label>
         </div>
       </section>
@@ -71,24 +96,24 @@
           <Settings size={16} aria-hidden="true" />
           <div>
             <span class="eyebrow">Analytics</span>
-            <h3>Anonymous usage analytics</h3>
+            <h3>{isGerman ? "Anonyme Nutzungsanalyse" : "Anonymous usage analytics"}</h3>
           </div>
         </header>
 
         <label class="settings-toggle-row">
           <input type="checkbox" bind:checked={analyticsEnabled} />
           <span>
-            <strong>Allow anonymous Aptabase events</strong>
-            <small>No repository paths, remotes, branches, commit messages, file names, diffs, credentials, or code are sent.</small>
+            <strong>{isGerman ? "Anonyme Aptabase-Ereignisse erlauben" : "Allow anonymous Aptabase events"}</strong>
+            <small>{isGerman ? "Es werden keine Repository-Pfade, Remotes, Branches, Commit-Nachrichten, Dateinamen, Diffs, Zugangsdaten oder Code übertragen." : "No repository paths, remotes, branches, commit messages, file names, diffs, credentials, or code are sent."}</small>
           </span>
         </label>
       </section>
 
       <div class="new-branch-actions">
-        <button class="btn-secondary" type="button" onclick={onClose}>Cancel</button>
+        <button class="btn-secondary" type="button" onclick={onClose}>{isGerman ? "Abbrechen" : "Cancel"}</button>
         <button class="btn-primary" type="submit">
           <Check size={16} aria-hidden="true" />
-          Save
+          {isGerman ? "Speichern" : "Save"}
         </button>
       </div>
     </form>