mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 19:01:08 +02:00
refactor(shared-help): extract shared translations, add Zitare + Mukke help pages
- Add defaultTranslationsDE/EN and getHelpTranslations() to shared-help-ui so apps only need to override the subtitle instead of duplicating ~80 lines - Refactor all 6 existing help pages to use getHelpTranslations() (Contacts, Calendar, Todo, Storage, Chat, Picture) - Add help page to Zitare (FAQ, features, contact — no shortcuts) - Migrate Mukke from custom SettingsPage-based help to shared HelpPage (FAQ with audio formats, lyrics editor, playlists; features; shortcuts) All 8 web apps now use the unified shared help system. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS
parent
23261aab51
commit
bdab272267
15 changed files with 581 additions and 923 deletions
|
|
@ -44,6 +44,8 @@
|
|||
"@manacore/shared-feedback-service": "workspace:^",
|
||||
"@manacore/shared-feedback-ui": "workspace:^",
|
||||
"@manacore/shared-i18n": "workspace:*",
|
||||
"@manacore/shared-help-types": "workspace:*",
|
||||
"@manacore/shared-help-ui": "workspace:*",
|
||||
"@manacore/shared-icons": "workspace:*",
|
||||
"@manacore/shared-splitscreen": "workspace:^",
|
||||
"@manacore/shared-stores": "workspace:*",
|
||||
|
|
|
|||
153
apps/mukke/apps/web/src/lib/content/help/index.ts
Normal file
153
apps/mukke/apps/web/src/lib/content/help/index.ts
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
/**
|
||||
* Help content for Mukke app
|
||||
*/
|
||||
|
||||
import type { HelpContent } from '@manacore/shared-help-types';
|
||||
|
||||
export function getMukkeHelpContent(locale: string): HelpContent {
|
||||
const isDE = locale === 'de';
|
||||
|
||||
return {
|
||||
faq: [
|
||||
{
|
||||
id: 'faq-upload',
|
||||
question: isDE
|
||||
? 'Welche Audioformate werden unterstützt?'
|
||||
: 'Which audio formats are supported?',
|
||||
answer: isDE
|
||||
? '<p>Mukke unterstützt eine Vielzahl von Formaten:</p><ul><li><strong>Volle Unterstützung</strong>: MP3, WAV, FLAC, AAC/M4A, OGG, OPUS</li><li><strong>Upload & Metadaten</strong>: AIFF, WMA, APE, WavPack, DSF/DFF</li></ul><p>Metadaten (ID3-Tags) werden automatisch beim Upload extrahiert — Titel, Künstler, Album, Cover-Art und mehr.</p>'
|
||||
: '<p>Mukke supports a wide range of formats:</p><ul><li><strong>Full support</strong>: MP3, WAV, FLAC, AAC/M4A, OGG, OPUS</li><li><strong>Upload & metadata</strong>: AIFF, WMA, APE, WavPack, DSF/DFF</li></ul><p>Metadata (ID3 tags) is automatically extracted on upload — title, artist, album, cover art, and more.</p>',
|
||||
category: 'features',
|
||||
order: 1,
|
||||
language: isDE ? 'de' : 'en',
|
||||
tags: isDE ? ['upload', 'formate', 'audio', 'mp3'] : ['upload', 'formats', 'audio', 'mp3'],
|
||||
},
|
||||
{
|
||||
id: 'faq-editor',
|
||||
question: isDE ? 'Wie funktioniert der Lyrics-Editor?' : 'How does the lyrics editor work?',
|
||||
answer: isDE
|
||||
? '<p>Der Editor ermöglicht synchronisierte Lyrics:</p><ol><li>Erstelle ein <strong>Projekt</strong> aus einem Song deiner Bibliothek</li><li>Sieh die <strong>Wellenform</strong> und setze Beat-Marker</li><li>Gib Lyrics ein und <strong>synchronisiere</strong> sie mit den Zeitstempeln</li><li><strong>Exportiere</strong> als LRC, SRT oder JSON</li></ol>'
|
||||
: '<p>The editor enables synchronized lyrics:</p><ol><li>Create a <strong>project</strong> from a song in your library</li><li>View the <strong>waveform</strong> and set beat markers</li><li>Enter lyrics and <strong>sync</strong> them with timestamps</li><li><strong>Export</strong> as LRC, SRT, or JSON</li></ol>',
|
||||
category: 'features',
|
||||
order: 2,
|
||||
language: isDE ? 'de' : 'en',
|
||||
featured: true,
|
||||
tags: isDE
|
||||
? ['editor', 'lyrics', 'sync', 'wellenform']
|
||||
: ['editor', 'lyrics', 'sync', 'waveform'],
|
||||
},
|
||||
{
|
||||
id: 'faq-playlists',
|
||||
question: isDE ? 'Wie erstelle ich Playlists?' : 'How do I create playlists?',
|
||||
answer: isDE
|
||||
? '<p>Gehe zu <strong>Playlists</strong> und klicke auf das <strong>+</strong> Symbol. Füge Songs per Drag & Drop oder über das Kontextmenü hinzu. Die Reihenfolge lässt sich ebenfalls per Drag & Drop anpassen.</p>'
|
||||
: '<p>Go to <strong>Playlists</strong> and click the <strong>+</strong> icon. Add songs via drag & drop or the context menu. The order can also be adjusted via drag & drop.</p>',
|
||||
category: 'features',
|
||||
order: 3,
|
||||
language: isDE ? 'de' : 'en',
|
||||
tags: isDE ? ['playlist', 'erstellen', 'sortieren'] : ['playlist', 'create', 'sort'],
|
||||
},
|
||||
{
|
||||
id: 'faq-privacy',
|
||||
question: isDE ? 'Wie werden meine Daten geschützt?' : 'How is my data protected?',
|
||||
answer: isDE
|
||||
? '<p>Deine Musik ist sicher:</p><ul><li><strong>Privat</strong>: Nur du hast Zugriff auf deine Bibliothek</li><li><strong>Verschlüsselung</strong>: Alle Daten werden bei der Übertragung (TLS) verschlüsselt</li><li><strong>DSGVO-konform</strong>: Wir halten uns an die EU-Datenschutzverordnung</li></ul>'
|
||||
: '<p>Your music is secure:</p><ul><li><strong>Private</strong>: Only you have access to your library</li><li><strong>Encryption</strong>: All data is encrypted in transit (TLS)</li><li><strong>GDPR Compliant</strong>: We follow EU data protection regulations</li></ul>',
|
||||
category: 'privacy',
|
||||
order: 4,
|
||||
language: isDE ? 'de' : 'en',
|
||||
featured: true,
|
||||
tags: isDE ? ['datenschutz', 'dsgvo', 'sicherheit'] : ['privacy', 'gdpr', 'security'],
|
||||
},
|
||||
],
|
||||
features: [
|
||||
{
|
||||
id: 'feature-library',
|
||||
title: isDE ? 'Musikbibliothek' : 'Music Library',
|
||||
description: isDE
|
||||
? 'Verwalte deine Sammlung nach Künstler, Album und Genre'
|
||||
: 'Manage your collection by artist, album, and genre',
|
||||
icon: '🎵',
|
||||
category: 'core',
|
||||
highlights: isDE
|
||||
? ['Auto-Metadaten', 'Cover-Art', 'Künstler/Alben/Genres']
|
||||
: ['Auto metadata', 'Cover art', 'Artists/Albums/Genres'],
|
||||
content: '',
|
||||
order: 1,
|
||||
language: isDE ? 'de' : 'en',
|
||||
},
|
||||
{
|
||||
id: 'feature-player',
|
||||
title: 'Player',
|
||||
description: isDE
|
||||
? 'Integrierter Musikplayer mit Wiedergabesteuerung'
|
||||
: 'Built-in music player with playback controls',
|
||||
icon: '▶️',
|
||||
category: 'core',
|
||||
highlights: isDE
|
||||
? ['Streaming', 'Playlists', 'Play-Count']
|
||||
: ['Streaming', 'Playlists', 'Play count'],
|
||||
content: '',
|
||||
order: 2,
|
||||
language: isDE ? 'de' : 'en',
|
||||
},
|
||||
{
|
||||
id: 'feature-editor',
|
||||
title: isDE ? 'Lyrics-Editor' : 'Lyrics Editor',
|
||||
description: isDE
|
||||
? 'Synchronisiere Lyrics mit Wellenform-Visualisierung'
|
||||
: 'Sync lyrics with waveform visualization',
|
||||
icon: '🎤',
|
||||
category: 'advanced',
|
||||
highlights: isDE
|
||||
? ['Wellenform', 'Beat-Marker', 'LRC/SRT Export']
|
||||
: ['Waveform', 'Beat markers', 'LRC/SRT export'],
|
||||
content: '',
|
||||
order: 3,
|
||||
language: isDE ? 'de' : 'en',
|
||||
},
|
||||
{
|
||||
id: 'feature-visualizer',
|
||||
title: 'Visualizer',
|
||||
description: isDE
|
||||
? 'Audio-Visualisierungen mit verschiedenen Themes'
|
||||
: 'Audio visualizations with various themes',
|
||||
icon: '🌈',
|
||||
category: 'advanced',
|
||||
highlights: isDE
|
||||
? ['Butterchurn-Presets', 'WebGL', 'Theme-Auswahl']
|
||||
: ['Butterchurn presets', 'WebGL', 'Theme selection'],
|
||||
content: '',
|
||||
order: 4,
|
||||
language: isDE ? 'de' : 'en',
|
||||
},
|
||||
],
|
||||
shortcuts: [
|
||||
{
|
||||
id: 'shortcuts-nav',
|
||||
category: 'navigation',
|
||||
title: 'Navigation',
|
||||
language: isDE ? 'de' : 'en',
|
||||
order: 1,
|
||||
shortcuts: [
|
||||
{ shortcut: 'Ctrl + 1-5', action: 'Navigation' },
|
||||
{ shortcut: 'Space', action: isDE ? 'Wiedergabe/Pause' : 'Play/Pause' },
|
||||
],
|
||||
},
|
||||
],
|
||||
gettingStarted: [],
|
||||
changelog: [],
|
||||
contact: {
|
||||
id: 'contact-support',
|
||||
title: isDE ? 'Support kontaktieren' : 'Contact Support',
|
||||
content: isDE
|
||||
? '<p>Unser Support-Team hilft dir bei allen Fragen rund um Mukke.</p>'
|
||||
: '<p>Our support team is here to help you with any questions about Mukke.</p>',
|
||||
language: isDE ? 'de' : 'en',
|
||||
order: 1,
|
||||
supportEmail: 'support@mana.how',
|
||||
documentationUrl: 'https://mana.how/docs',
|
||||
responseTime: isDE ? 'Normalerweise innerhalb von 24 Stunden' : 'Usually within 24 hours',
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
@ -1,59 +1,32 @@
|
|||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { SettingsPage, SettingsSection, SettingsCard, SettingsRow } from '@manacore/shared-ui';
|
||||
import { Question, Keyboard, EnvelopeSimple } from '@manacore/shared-icons';
|
||||
import { locale } from 'svelte-i18n';
|
||||
import { HelpPage, getHelpTranslations } from '@manacore/shared-help-ui';
|
||||
import { getMukkeHelpContent } from '$lib/content/help/index.js';
|
||||
|
||||
const content = $derived(getMukkeHelpContent($locale ?? 'de'));
|
||||
const translations = $derived(
|
||||
getHelpTranslations($locale ?? 'de', {
|
||||
subtitle:
|
||||
$locale === 'de'
|
||||
? 'Finde Antworten und lerne Mukke kennen'
|
||||
: 'Find answers and learn how to use Mukke',
|
||||
})
|
||||
);
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Help - Mukke</title>
|
||||
<title>{translations.title} | Mukke</title>
|
||||
</svelte:head>
|
||||
|
||||
<SettingsPage title="Help & Support" subtitle="Learn how to use Mukke">
|
||||
<SettingsSection title="Getting Started">
|
||||
{#snippet icon()}<Question size={20} />{/snippet}
|
||||
<SettingsCard>
|
||||
<SettingsRow
|
||||
label="Upload Music"
|
||||
description="Drag and drop audio files or click Browse to upload MP3, WAV, FLAC, and more."
|
||||
/>
|
||||
<SettingsRow
|
||||
label="Auto Tag Extraction"
|
||||
description="ID3 tags (title, artist, album, cover art) are automatically extracted from uploaded files."
|
||||
/>
|
||||
<SettingsRow
|
||||
label="Edit Metadata"
|
||||
description="Click the pencil icon on any song in your library to edit metadata. Use 'Write to File' to save tags back to MP3 files."
|
||||
/>
|
||||
<SettingsRow
|
||||
label="Playlists"
|
||||
description="Create playlists to organize your music. Add songs from the library or search."
|
||||
/>
|
||||
<SettingsRow
|
||||
label="Editor Projects"
|
||||
description="Open songs in the editor for waveform visualization, BPM detection, and synced lyrics creation."
|
||||
/>
|
||||
</SettingsCard>
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsSection title="Keyboard Shortcuts">
|
||||
{#snippet icon()}<Keyboard size={20} />{/snippet}
|
||||
<SettingsCard>
|
||||
<SettingsRow
|
||||
label="Ctrl + 1-5"
|
||||
description="Navigate to Library, Playlists, Editor, Upload, Settings"
|
||||
/>
|
||||
<SettingsRow label="Space" description="Play / Pause (in editor)" />
|
||||
</SettingsCard>
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsSection title="Contact">
|
||||
{#snippet icon()}<EnvelopeSimple size={20} />{/snippet}
|
||||
<SettingsCard>
|
||||
<SettingsRow
|
||||
label="Feedback"
|
||||
description="Send us your suggestions and bug reports"
|
||||
href="/feedback"
|
||||
/>
|
||||
</SettingsCard>
|
||||
</SettingsSection>
|
||||
</SettingsPage>
|
||||
<HelpPage
|
||||
{content}
|
||||
appName="Mukke"
|
||||
appId="mukke"
|
||||
{translations}
|
||||
showBackButton
|
||||
onBack={() => goto('/dashboard')}
|
||||
showGettingStarted={false}
|
||||
showChangelog={false}
|
||||
defaultSection="faq"
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue