fix: harden widget review follow-ups

packages/widgets/src/vpn/component.tsx

@@ -3,7 +3,7 @@
 import { Center, Flex, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentLocale, useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
 import { VpnIntegrationCard } from "./vpn-card";
@@ -21,6 +21,7 @@ export default function VpnWidget({
   });
   const t = useScopedI18n("widget.vpn");
   const tCommon = useScopedI18n("common");
+  const locale = useCurrentLocale();
   const dense = displayMode === "compact" && (width < 240 || height < 120);
 
   if (isPending || integrations.length === 0) {
@@ -56,7 +57,7 @@ export default function VpnWidget({
               <VpnIntegrationCard vpn={result.summary} integrationName={result.integration.name} variant="list" />
               {!result.error && new Date(result.integration.updatedAt).getTime() > 0 && (
                 <Text size="xs" c="dimmed" ta="right">
-                  {new Date(result.integration.updatedAt).toLocaleString()}
+                  {new Date(result.integration.updatedAt).toLocaleString(locale)}
                 </Text>
               )}
             </Stack>

packages/widgets/src/vpn/vpn-card.tsx

@@ -102,8 +102,12 @@ function VpnStatusColumn({
   compact: boolean;
   dense: boolean;
 }) {
+  const t = useScopedI18n("widget.vpn");
   // Connected shows a shield with a check; anything else (stopped or unavailable) shows a shield with a cross.
   const ShieldIcon = vpnStatus === RUNNING_STATUS ? IconShieldCheck : IconShieldX;
+  const statusLabel = t(
+    vpnStatus === RUNNING_STATUS ? "status.running" : vpnStatus ? "status.notRunning" : "status.unavailable",
+  );
 
   return (
     <Flex
@@ -114,7 +118,7 @@ function VpnStatusColumn({
       align="center"
     >
       <ShieldIcon
-        aria-label={vpnStatus || "unavailable"}
+        aria-label={t("status.vpn", { status: statusLabel })}
         stroke={2}
         color={getStatusColor(vpnStatus)}
         size={dense ? 32 : compact ? 44 : 52}
@@ -181,7 +185,11 @@ function VpnProviderDetails({ provider, protocol }: { provider: string; protocol
 }
 
 function DnsStatusBadge({ status }: { status: string }) {
+  const t = useScopedI18n("widget.vpn");
   const StatusIcon = status === RUNNING_STATUS ? IconCircleCheckFilled : IconCircleXFilled;
+  const statusLabel = t(
+    status === RUNNING_STATUS ? "status.running" : status ? "status.notRunning" : "status.unavailable",
+  );
   return (
     <Badge
       variant="outline"
@@ -191,7 +199,7 @@ function DnsStatusBadge({ status }: { status: string }) {
       leftSection={<StatusIcon aria-hidden size={9} />}
     >
       DNS
-      <VisuallyHidden> {status || "unavailable"}</VisuallyHidden>
+      <VisuallyHidden> {statusLabel}</VisuallyHidden>
     </Badge>
   );
 }