Polish settings and auth UX

job-tracker-ui/src/components/RulesSettingsCard.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 
-import { Box, Button, Paper, TextField, Typography } from "@mui/material";
+import { Alert, Box, Button, Paper, TextField, Typography } from "@mui/material";
 
 import { api } from "../api";
 import { useToast } from "../toast";
@@ -21,10 +21,19 @@ export default function RulesSettingsCard() {
   const { t } = useI18n();
   const [s, setS] = useState<RuleSettings | null>(null);
   const [saving, setSaving] = useState(false);
+  const [loadError, setLoadError] = useState<string | null>(null);
 
   useEffect(() => {
-    api.get<RuleSettings>("/rules").then((r) => setS(r.data));
-  }, []);
+    api.get<RuleSettings>("/rules")
+      .then((r) => {
+        setS(r.data);
+        setLoadError(null);
+      })
+      .catch((e: any) => {
+        setS(null);
+        setLoadError(String(e?.response?.data || e?.message || t("rulesLoadFailed")));
+      });
+  }, [t]);
 
   const save = async () => {
     if (!s) return;
@@ -39,7 +48,16 @@ export default function RulesSettingsCard() {
     }
   };
 
-  if (!s) return null;
+  if (!s) {
+    return (
+      <Paper sx={{ mt: 2, p: 2 }}>
+        <Typography variant="h6" sx={{ mb: 1 }}>
+          {t("rulesTitle")}
+        </Typography>
+        {loadError ? <Alert severity="error">{loadError}</Alert> : <Typography sx={{ color: "text.secondary" }}>{t("rulesLoading")}</Typography>}
+      </Paper>
+    );
+  }
 
   const num = (k: keyof RuleSettings) => ({
     value: s[k],