peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(i18n): translate remaining components (HU/EN/DE)

Browse source 
Feed, VideoCard, Sidebar, PlayerModal, Channels, Stats, SettingsPanel,
OnboardingWizard, NotificationCenter, Toaster, ErrorBoundary and the relativeTime
helper are now fully translated in Hungarian, English and German, each with its own
locale area file (auto-loaded). Key parity verified across all three languages.
This commit is contained in:
npeter83 2026-06-15 00:47:04 +02:00
parent b38ae92d8d
commit 9c61bd898d
45 changed files with 1522 additions and 355 deletions
Download patch file Download diff file Expand all files Collapse all files

28
frontend/src/components/Toaster.tsx
View file

@ -1,4 +1,5 @@
import { useSyncExternalStore } from "react";
import { useTranslation } from "react-i18next";
import {
AlertCircle,
AlertTriangle,
@ -26,44 +27,45 @@ export const LEVEL_STYLE: Record<
};
export default function Toaster() {
const { t } = useTranslation();
const toasts = useSyncExternalStore(subscribe, getActiveToasts, getActiveToasts);
return (
<div className="fixed top-4 right-4 z-50 flex flex-col gap-2 w-80 max-w-[calc(100vw-2rem)]">
{toasts.map((t) => {
const { icon: Icon, color, bar } = LEVEL_STYLE[t.level];
{toasts.map((toast) => {
const { icon: Icon, color, bar } = LEVEL_STYLE[toast.level];
return (
<div
key={t.id}
key={toast.id}
className="glass relative overflow-hidden rounded-xl px-3 py-3 flex items-start gap-3 animate-[popIn_0.16s_ease]"
>
<Icon className={`w-5 h-5 shrink-0 mt-0.5 ${color}`} />
<div className="min-w-0 flex-1">
{t.title && <div className="text-sm font-semibold">{t.title}</div>}
<div className="text-sm break-words">{t.message}</div>
{t.action && (
{toast.title && <div className="text-sm font-semibold">{toast.title}</div>}
<div className="text-sm break-words">{toast.message}</div>
{toast.action && (
<button
onClick={() => {
t.action!.onClick();
dismiss(t.id);
toast.action!.onClick();
dismiss(toast.id);
}}
className="mt-1 text-accent text-sm font-semibold hover:underline"
>
{t.action.label}
{toast.action.label}
</button>
)}
</div>
<button
onClick={() => dismiss(t.id)}
onClick={() => dismiss(toast.id)}
className="shrink-0 text-muted hover:text-fg"
title="Dismiss"
title={t("notifications.dismiss")}
>
<X className="w-4 h-4" />
</button>
{t.duration && (
{toast.duration && (
<div
className={`absolute left-0 bottom-0 h-0.5 w-full origin-left ${bar}`}
style={{ animation: `toastbar ${t.duration}ms linear forwards` }}
style={{ animation: `toastbar ${toast.duration}ms linear forwards` }}
/>
)}
</div>