fix(i18n): translate submit button, density/view toggles; rename watchlist guide to Merkliste; add guide help buttons

artifacts/toolrate/src/components/view-toggle.tsx

@@ -1,12 +1,13 @@
 import { LayoutGrid, List, Rows3 } from "lucide-react";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { useTranslation } from "react-i18next";
 
 export type ViewMode = "grid" | "table" | "rows";
 
-const OPTIONS: { value: ViewMode; label: string; Icon: typeof LayoutGrid }[] = [
-  { value: "grid", label: "Grid", Icon: LayoutGrid },
-  { value: "table", label: "Table", Icon: List },
-  { value: "rows", label: "Rows", Icon: Rows3 },
+const OPTIONS: { value: ViewMode; labelKey: string; Icon: typeof LayoutGrid }[] = [
+  { value: "grid", labelKey: "common.viewGrid", Icon: LayoutGrid },
+  { value: "table", labelKey: "common.viewTable", Icon: List },
+  { value: "rows", labelKey: "common.viewRows", Icon: Rows3 },
 ];
 
 export function ViewToggle({
@@ -16,6 +17,7 @@ export function ViewToggle({
   value: ViewMode;
   onValueChange: (v: ViewMode) => void;
 }) {
+  const { t } = useTranslation();
   return (
     <ToggleGroup
       type="single"
@@ -25,10 +27,16 @@ export function ViewToggle({
       }}
       variant="outline"
       size="sm"
-      aria-label="View mode"
+      aria-label={t("common.viewMode")}
     >
-      {OPTIONS.map(({ value: v, label, Icon }) => (
-        <ToggleGroupItem key={v} value={v} aria-label={label} title={label} data-testid={`view-${v}`}>
+      {OPTIONS.map(({ value: v, labelKey, Icon }) => (
+        <ToggleGroupItem
+          key={v}
+          value={v}
+          aria-label={t(labelKey)}
+          title={t(labelKey)}
+          data-testid={`view-${v}`}
+        >
           <Icon className="w-4 h-4" />
         </ToggleGroupItem>
       ))}