feat(ui): refine global shell utilities

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

@@ -2,6 +2,8 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 
 import {
   Box,
+  Alert,
+  Button,
   Dialog,
   DialogContent,
   List,
@@ -47,13 +49,19 @@ export default function QuickCommandDialog({ open, onClose, onNavigate, onOpenAd
   const [query, setQuery] = useState("");
   const [jobs, setJobs] = useState<JobSearchItem[]>([]);
   const [companies, setCompanies] = useState<CompanySearchItem[]>([]);
+  const [searchState, setSearchState] = useState<"idle" | "loading" | "ready" | "error">("idle");
+  const [searchAttempt, setSearchAttempt] = useState(0);
+  const [activeIndex, setActiveIndex] = useState(-1);
   const searchInputRef = useRef<HTMLInputElement>(null);
+  const resultRefs = useRef<Array<HTMLElement | null>>([]);
 
   useEffect(() => {
     if (!open) {
       setQuery("");
       setJobs([]);
       setCompanies([]);
+      setSearchState("idle");
+      setActiveIndex(-1);
       return;
     }
   }, [open]);
@@ -64,25 +72,28 @@ export default function QuickCommandDialog({ open, onClose, onNavigate, onOpenAd
     if (!q) {
       setJobs([]);
       setCompanies([]);
+      setSearchState("idle");
       return;
     }
-
+    const controller = new AbortController();
+    setJobs([]);
+    setCompanies([]);
+    setSearchState("loading");
     const timeout = window.setTimeout(() => {
-      api
-        .get<{ items: JobSearchItem[] }>("/jobapplications", { params: { q, page: 1, pageSize: 15 } })
-        .then((r) => setJobs(r.data?.items ?? []))
-        .catch(() => setJobs([]));
-      api
-        .get<CompanySearchItem[]>("/companies")
-        .then((r) => {
-          const matches = (r.data ?? []).filter((c) => c.name.toLowerCase().includes(q.toLowerCase())).slice(0, 8);
-          setCompanies(matches);
+      Promise.all([
+        api.get<{ items: JobSearchItem[] }>("/jobapplications", { params: { q, page: 1, pageSize: 15 }, signal: controller.signal }),
+        api.get<CompanySearchItem[]>("/companies", { signal: controller.signal }),
+      ])
+        .then(([jobResponse, companyResponse]) => {
+          if (controller.signal.aborted) return;
+          setJobs(jobResponse.data?.items ?? []);
+          setCompanies((companyResponse.data ?? []).filter((c) => c.name.toLowerCase().includes(q.toLowerCase())).slice(0, 8));
+          setSearchState("ready");
         })
-        .catch(() => setCompanies([]));
+        .catch(() => { if (!controller.signal.aborted) setSearchState("error"); });
     }, 250);
-
-    return () => window.clearTimeout(timeout);
-  }, [open, query]);
+    return () => { window.clearTimeout(timeout); controller.abort(); };
+  }, [open, query, searchAttempt]);
 
   const commands = useMemo<CommandItem[]>(() => {
     const base: CommandItem[] = [
@@ -99,25 +110,44 @@ export default function QuickCommandDialog({ open, onClose, onNavigate, onOpenAd
     return base.filter((item) => item.label.toLowerCase().includes(q) || item.hint?.toLowerCase().includes(q));
   }, [onNavigate, onOpenAddJob, query, t]);
 
-  const allItems: CommandItem[] = [
-    ...commands,
-    ...jobs.slice(0, 6).map((job) => ({
+  const jobItems: CommandItem[] = jobs.slice(0, 6).map((job) => ({
       id: `job-${job.id}`,
       label: `${job.company?.name ?? t("company")} - ${job.jobTitle}`,
       hint: t("openJobListAndSearchResult"),
       action: () => onNavigate(`/jobs/${job.id}`),
-    })),
-    ...companies.slice(0, 6).map((company) => ({
+    }));
+  const companyItems: CommandItem[] = companies.slice(0, 6).map((company) => ({
       id: `company-${company.id}`,
       label: company.name,
       hint: t("openCompanies"),
       action: () => onNavigate(`/companies?edit=${company.id}`),
-    })),
+    }));
+  const groups = [
+    { label: t("commandActions"), items: commands },
+    { label: t("commandJobs"), items: jobItems },
+    { label: t("commandCompanies"), items: companyItems },
   ];
+  const allItems = groups.flatMap((group) => group.items);
+  const activate = (item: CommandItem) => { item.action(); onClose(); };
+  const onKeys = (event: React.KeyboardEvent) => {
+    if (event.nativeEvent.isComposing || event.keyCode === 229 || !allItems.length) return;
+    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+      event.preventDefault();
+      const current = event.target === searchInputRef.current ? activeIndex : resultRefs.current.indexOf(event.target as HTMLElement);
+      const next = event.key === "Home" ? 0 : event.key === "End" ? allItems.length - 1
+        : event.key === "ArrowDown" ? (current + 1) % allItems.length
+          : (current < 0 ? allItems.length - 1 : (current - 1 + allItems.length) % allItems.length);
+      setActiveIndex(next);
+      if (event.target !== searchInputRef.current) resultRefs.current[next]?.focus();
+    } else if (event.key === "Enter" && event.target === searchInputRef.current) {
+      event.preventDefault();
+      activate(allItems[activeIndex < 0 ? 0 : activeIndex]);
+    }
+  };
 
   return (
     <Dialog open={open} onClose={onClose} slotProps={{ paper: { "aria-label": t("quickSearch") }, transition: { onEntered: () => searchInputRef.current?.focus() } }} fullWidth maxWidth="sm">
-      <DialogContent sx={{ p: 1.5 }}>
+      <DialogContent onKeyDown={onKeys} sx={{ p: 1.5, maxHeight: "min(70vh, 620px)" }}>
         <Box sx={{ display: "flex", alignItems: "center", gap: 1, px: 1, pt: 0.5 }}>
           <SearchIcon fontSize="small" />
           <TextField
@@ -128,7 +158,7 @@ export default function QuickCommandDialog({ open, onClose, onNavigate, onOpenAd
             placeholder={t("searchPlaceholder")}
             slotProps={{ htmlInput: { "aria-label": t("quickSearch") } }}
             value={query}
-            onChange={(e) => setQuery(e.target.value)}
+            onChange={(e) => { setQuery(e.target.value); setActiveIndex(-1); }}
             InputProps={{ disableUnderline: true }}
           />
           <Typography variant="caption" sx={{ color: "text.secondary", whiteSpace: "nowrap" }}>
@@ -136,27 +166,22 @@ export default function QuickCommandDialog({ open, onClose, onNavigate, onOpenAd
           </Typography>
         </Box>
 
-        <List sx={{ mt: 1 }}>
-          {allItems.length === 0 ? (
-            <ListItem sx={{ px: 2, py: 3 }}>
-              <Typography sx={{ color: "text.secondary" }}>{t("noMatchingCommands")}</Typography>
-            </ListItem>
-          ) : (
-            allItems.map((item) => (
-              <ListItem key={item.id} disablePadding>
-                <ListItemButton
-                  onClick={() => {
-                    item.action();
-                    onClose();
-                  }}
-                  sx={{ borderRadius: 2 }}
-                >
-                  <ListItemText primary={item.label} secondary={item.hint} />
-                </ListItemButton>
-              </ListItem>
-            ))
-          )}
-        </List>
+        <Box aria-live="polite" sx={{ position: "absolute", width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }}>
+          {searchState === "loading" ? t("loading") : searchState === "ready" ? t("searchResultsCount", { count: allItems.length }) : ""}
+          {activeIndex >= 0 ? ` ${allItems[activeIndex]?.label ?? ""}` : ""}
+        </Box>
+        {searchState === "error" ? <Alert severity="error" sx={{ mt: 1 }} action={<Button color="inherit" size="small" onClick={() => setSearchAttempt((value) => value + 1)}>{t("retry")}</Button>}>{t("searchLoadFailed")}</Alert> : null}
+        {groups.map((group) => group.items.length ? <Box component="section" key={group.label} sx={{ mt: 1 }}>
+          <Typography component="h2" variant="caption" color="text.secondary" sx={{ px: 2, fontWeight: 700 }}>{group.label}</Typography>
+          <List dense aria-label={group.label}>
+            {group.items.map((item) => <ListItem key={item.id} disablePadding>
+              <ListItemButton ref={(node) => { resultRefs.current[allItems.indexOf(item)] = node; }} selected={activeIndex === allItems.indexOf(item)} onFocus={() => setActiveIndex(allItems.indexOf(item))} onClick={() => activate(item)} sx={{ borderRadius: 2 }}>
+                <ListItemText primary={item.label} secondary={item.hint} />
+              </ListItemButton>
+            </ListItem>)}
+          </List>
+        </Box> : null)}
+        {allItems.length === 0 && searchState !== "loading" && searchState !== "error" ? <Typography color="text.secondary" sx={{ px: 2, py: 3 }}>{t("noMatchingCommands")}</Typography> : null}
       </DialogContent>
     </Dialog>
   );