Polish UI, harden company creation, and add error pages

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

@@ -14,6 +14,7 @@ import {
 import SearchIcon from "@mui/icons-material/Search";
 
 import { api } from "../api";
+import { useI18n } from "../i18n/I18nProvider";
 
 type CommandItem = {
   id: string;
@@ -41,6 +42,7 @@ interface Props {
 }
 
 export default function QuickCommandDialog({ open, onClose, onNavigate, onOpenAddJob }: Props) {
+  const { t } = useI18n();
   const [query, setQuery] = useState("");
   const [jobs, setJobs] = useState<JobSearchItem[]>([]);
   const [companies, setCompanies] = useState<CompanySearchItem[]>([]);
@@ -82,31 +84,31 @@ export default function QuickCommandDialog({ open, onClose, onNavigate, onOpenAd
 
   const commands = useMemo<CommandItem[]>(() => {
     const base: CommandItem[] = [
-      { id: "go-dashboard", label: "Go to dashboard", hint: "Analytics overview", action: () => onNavigate("/dashboard") },
-      { id: "go-jobs", label: "Go to jobs", hint: "Main applications table", action: () => onNavigate("/jobs") },
-      { id: "go-reminders", label: "Go to reminders", hint: "Follow-up queue", action: () => onNavigate("/reminders") },
-      { id: "go-companies", label: "Go to companies", hint: "CRM and source tracking", action: () => onNavigate("/companies") },
-      { id: "go-settings", label: "Go to settings", hint: "Preferences and admin tools", action: () => onNavigate("/settings") },
-      { id: "add-job", label: "Add new job", hint: "Open the add-job modal", action: onOpenAddJob },
+      { id: "go-dashboard", label: t("goToDashboard"), hint: t("analyticsOverview"), action: () => onNavigate("/dashboard") },
+      { id: "go-jobs", label: t("goToJobs"), hint: t("mainApplicationsTable"), action: () => onNavigate("/jobs") },
+      { id: "go-reminders", label: t("goToReminders"), hint: t("followUpQueue"), action: () => onNavigate("/reminders") },
+      { id: "go-companies", label: t("goToCompanies"), hint: t("crmAndSourceTracking"), action: () => onNavigate("/companies") },
+      { id: "go-settings", label: t("goToSettings"), hint: t("preferencesAndAdminTools"), action: () => onNavigate("/settings") },
+      { id: "add-job", label: t("addNewJob"), hint: t("openAddJobModal"), action: onOpenAddJob },
     ];
 
     const q = query.trim().toLowerCase();
     if (!q) return base;
     return base.filter((item) => item.label.toLowerCase().includes(q) || item.hint?.toLowerCase().includes(q));
-  }, [onNavigate, onOpenAddJob, query]);
+  }, [onNavigate, onOpenAddJob, query, t]);
 
   const allItems: CommandItem[] = [
     ...commands,
     ...jobs.slice(0, 6).map((job) => ({
       id: `job-${job.id}`,
-      label: `${job.company?.name ?? "Company"} - ${job.jobTitle}`,
-      hint: "Open job list and search result",
+      label: `${job.company?.name ?? t("company")} - ${job.jobTitle}`,
+      hint: t("openJobListAndSearchResult"),
       action: () => onNavigate(`/jobs?open=${job.id}`),
     })),
     ...companies.slice(0, 6).map((company) => ({
       id: `company-${company.id}`,
       label: company.name,
-      hint: "Open companies",
+      hint: t("openCompanies"),
       action: () => onNavigate(`/companies?edit=${company.id}`),
     })),
   ];
@@ -120,7 +122,7 @@ export default function QuickCommandDialog({ open, onClose, onNavigate, onOpenAd
             autoFocus
             variant="standard"
             fullWidth
-            placeholder="Search jobs, companies, or actions"
+            placeholder={t("searchPlaceholder")}
             value={query}
             onChange={(e) => setQuery(e.target.value)}
             InputProps={{ disableUnderline: true }}
@@ -133,7 +135,7 @@ export default function QuickCommandDialog({ open, onClose, onNavigate, onOpenAd
         <List sx={{ mt: 1 }}>
           {allItems.length === 0 ? (
             <Box sx={{ px: 2, py: 3 }}>
-              <Typography sx={{ color: "text.secondary" }}>No matching commands or records.</Typography>
+              <Typography sx={{ color: "text.secondary" }}>{t("noMatchingCommands")}</Typography>
             </Box>
           ) : (
             allItems.map((item) => (