feat(ui): redesign grouped application shell

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 
 import {
   Box,
@@ -47,6 +47,7 @@ export default function QuickCommandDialog({ open, onClose, onNavigate, onOpenAd
   const [query, setQuery] = useState("");
   const [jobs, setJobs] = useState<JobSearchItem[]>([]);
   const [companies, setCompanies] = useState<CompanySearchItem[]>([]);
+  const searchInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     if (!open) {
@@ -115,12 +116,13 @@ export default function QuickCommandDialog({ open, onClose, onNavigate, onOpenAd
   ];
 
   return (
-    <Dialog open={open} onClose={onClose} slotProps={{ paper: { "aria-label": t("quickSearch") } }} fullWidth maxWidth="sm">
+    <Dialog open={open} onClose={onClose} slotProps={{ paper: { "aria-label": t("quickSearch") }, transition: { onEntered: () => searchInputRef.current?.focus() } }} fullWidth maxWidth="sm">
       <DialogContent sx={{ p: 1.5 }}>
         <Box sx={{ display: "flex", alignItems: "center", gap: 1, px: 1, pt: 0.5 }}>
           <SearchIcon fontSize="small" />
           <TextField
             autoFocus
+            inputRef={searchInputRef}
             variant="standard"
             fullWidth
             placeholder={t("searchPlaceholder")}