diff --git a/src/app/_components/HelpButton.tsx b/src/app/_components/HelpButton.tsx index 9c5b52c..122bcbb 100644 --- a/src/app/_components/HelpButton.tsx +++ b/src/app/_components/HelpButton.tsx @@ -4,29 +4,31 @@ import { useState } from 'react'; import { HelpModal } from './HelpModal'; import { Button } from './ui/button'; import { HelpCircle } from 'lucide-react'; +import { useTranslation } from '@/lib/i18n/useTranslation'; interface HelpButtonProps { initialSection?: string; } export function HelpButton({ initialSection }: HelpButtonProps) { + const { t } = useTranslation('helpButton'); const [isOpen, setIsOpen] = useState(false); return ( <>
- Need help? + {t('needHelp')}
diff --git a/src/app/_components/ResyncButton.tsx b/src/app/_components/ResyncButton.tsx index ffcfbfa..c945c6f 100644 --- a/src/app/_components/ResyncButton.tsx +++ b/src/app/_components/ResyncButton.tsx @@ -4,8 +4,10 @@ import { useState } from 'react'; import { api } from '~/trpc/react'; import { Button } from './ui/button'; import { ContextualHelpIcon } from './ContextualHelpIcon'; +import { useTranslation } from '@/lib/i18n/useTranslation'; export function ResyncButton() { + const { t } = useTranslation('resyncButton'); const [isResyncing, setIsResyncing] = useState(false); const [lastSync, setLastSync] = useState(null); const [syncMessage, setSyncMessage] = useState(null); @@ -15,20 +17,20 @@ export function ResyncButton() { setIsResyncing(false); setLastSync(new Date()); if (data.success) { - setSyncMessage(data.message ?? 'Scripts synced successfully'); + setSyncMessage(data.message ?? t('messages.success')); // Reload the page after successful sync setTimeout(() => { window.location.reload(); }, 2000); // Wait 2 seconds to show the success message } else { - setSyncMessage(data.error ?? 'Failed to sync scripts'); + setSyncMessage(data.error ?? t('messages.failed')); // Clear message after 3 seconds for errors setTimeout(() => setSyncMessage(null), 3000); } }, onError: (error) => { setIsResyncing(false); - setSyncMessage(`Error: ${error.message}`); + setSyncMessage(t('messages.error', { values: { message: error.message } })); setTimeout(() => setSyncMessage(null), 3000); }, }); @@ -42,7 +44,7 @@ export function ResyncButton() { return (
- Sync scripts with ProxmoxVE repo + {t('syncDescription')}
@@ -56,30 +58,30 @@ export function ResyncButton() { {isResyncing ? ( <>
- Syncing... + {t('syncing')} ) : ( <> - Sync Json Files + {t('syncJsonFiles')} )} - +
{lastSync && (
- Last sync: {lastSync.toLocaleTimeString()} + {t('lastSync', { values: { time: lastSync.toLocaleTimeString() } })}
)}
{syncMessage && (
diff --git a/src/app/_components/ViewToggle.tsx b/src/app/_components/ViewToggle.tsx index b251d9f..3e39b27 100644 --- a/src/app/_components/ViewToggle.tsx +++ b/src/app/_components/ViewToggle.tsx @@ -3,6 +3,7 @@ import React from 'react'; import { Button } from './ui/button'; import { Grid3X3, List } from 'lucide-react'; +import { useTranslation } from '@/lib/i18n/useTranslation'; interface ViewToggleProps { viewMode: 'card' | 'list'; @@ -10,6 +11,8 @@ interface ViewToggleProps { } export function ViewToggle({ viewMode, onViewModeChange }: ViewToggleProps) { + const { t } = useTranslation('viewToggle'); + return (
@@ -24,7 +27,7 @@ export function ViewToggle({ viewMode, onViewModeChange }: ViewToggleProps) { }`} > - Card View + {t('cardView')}
diff --git a/src/lib/i18n/messages/de.ts b/src/lib/i18n/messages/de.ts index a6d5945..ec641f4 100644 --- a/src/lib/i18n/messages/de.ts +++ b/src/lib/i18n/messages/de.ts @@ -115,6 +115,27 @@ export const deMessages: NestedMessages = { settingUp: 'Wird eingerichtet...', }, }, + helpButton: { + needHelp: 'Brauchen Sie Hilfe?', + openHelp: 'Hilfe öffnen', + help: 'Hilfe', + }, + resyncButton: { + syncDescription: 'Skripte mit ProxmoxVE-Repo synchronisieren', + syncing: 'Synchronisiere...', + syncJsonFiles: 'JSON-Dateien synchronisieren', + helpTooltip: 'Hilfe zum Sync-Button', + lastSync: 'Letzte Synchronisierung: {time}', + messages: { + success: 'Skripte erfolgreich synchronisiert', + failed: 'Fehler beim Synchronisieren der Skripte', + error: 'Fehler: {message}', + }, + }, + viewToggle: { + cardView: 'Karten-Ansicht', + listView: 'Listen-Ansicht', + }, layout: { title: 'PVE Skriptverwaltung', tagline: 'Verwalte und starte lokale Proxmox-Hilfsskripte mit Live-Ausgabe', diff --git a/src/lib/i18n/messages/en.ts b/src/lib/i18n/messages/en.ts index ca2edf3..fa2206e 100644 --- a/src/lib/i18n/messages/en.ts +++ b/src/lib/i18n/messages/en.ts @@ -349,4 +349,25 @@ export const enMessages: NestedMessages = { settingUp: 'Setting Up...', }, }, + helpButton: { + needHelp: 'Need help?', + openHelp: 'Open Help', + help: 'Help', + }, + resyncButton: { + syncDescription: 'Sync scripts with ProxmoxVE repo', + syncing: 'Syncing...', + syncJsonFiles: 'Sync Json Files', + helpTooltip: 'Help with Sync Button', + lastSync: 'Last sync: {time}', + messages: { + success: 'Scripts synced successfully', + failed: 'Failed to sync scripts', + error: 'Error: {message}', + }, + }, + viewToggle: { + cardView: 'Card View', + listView: 'List View', + }, };