fix: compact filter popover; feat: i18n (de/en)

artifacts/toolrate/src/pages/login.tsx

@@ -8,8 +8,10 @@ import { Label } from "@/components/ui/label";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { Wrench, AlertCircle } from "lucide-react";
+import { useTranslation } from "react-i18next";
 
 export default function Login() {
+  const { t } = useTranslation();
   const [, setLocation] = useLocation();
   const search = useSearch();
   const params = new URLSearchParams(search);
@@ -33,7 +35,7 @@ export default function Login() {
           setLocation(returnTo);
         },
         onError: (err) => {
-          setError(err.data?.error || err.message || "Invalid username or password");
+          setError(err.data?.error || err.message || t("auth.invalidCredentials"));
         },
       },
     );
@@ -50,18 +52,18 @@ export default function Login() {
             <Wrench className="w-7 h-7" />
             <span>toolr</span>
           </Link>
-          <p className="text-muted-foreground text-sm">Sign in to your account</p>
+          <p className="text-muted-foreground text-sm">{t("auth.loginSubtitle")}</p>
         </div>
 
         <Card>
           <CardHeader className="pb-4">
-            <CardTitle className="text-lg">Sign in</CardTitle>
-            <CardDescription>Enter your credentials to continue</CardDescription>
+            <CardTitle className="text-lg">{t("auth.signIn")}</CardTitle>
+            <CardDescription>{t("auth.loginDescription")}</CardDescription>
           </CardHeader>
           <CardContent>
             <form onSubmit={handleSubmit} className="space-y-4">
               <div className="space-y-2">
-                <Label htmlFor="username">Username</Label>
+                <Label htmlFor="username">{t("auth.username")}</Label>
                 <Input
                   id="username"
                   type="text"
@@ -73,7 +75,7 @@ export default function Login() {
                 />
               </div>
               <div className="space-y-2">
-                <Label htmlFor="password">Password</Label>
+                <Label htmlFor="password">{t("auth.password")}</Label>
                 <Input
                   id="password"
                   type="password"
@@ -95,7 +97,7 @@ export default function Login() {
                 className="w-full"
                 disabled={localLogin.isPending}
               >
-                {localLogin.isPending ? "Signing in..." : "Sign in"}
+                {localLogin.isPending ? t("common.loading") : t("auth.signIn")}
               </Button>
             </form>
           </CardContent>
@@ -103,7 +105,7 @@ export default function Login() {
 
         <div className="text-center">
           <Link href="/" className="text-sm text-muted-foreground hover:text-primary transition-colors">
-            Back to Home
+            {t("notFound.backHome")}
           </Link>
         </div>
       </div>