Add shortcut keys to configure alerts and date time filter

Author: samejr

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors._index/route.tsx

@@ -289,6 +289,8 @@ const errorStatusOptions = [
 
 const statusIcon = <IconBugFilled className="size-4" />;
 const statusShortcut = { key: "s" };
+const timeShortcut = { key: "d" };
+const alertsShortcut = { key: "c" };
 
 function StatusFilter() {
   const { values, del } = useSearchParams();
@@ -305,8 +307,9 @@ function StatusFilter() {
                 variant="secondary/small"
                 shortcut={statusShortcut}
                 tooltipTitle="Filter by status"
+                className="pl-1.5"
               >
-                <span className="ml-0.5">Status</span>
+                <span className="ml-1">Status</span>
               </SelectTrigger>
             }
             searchValue={search}
@@ -415,18 +418,19 @@ function FiltersBar({
 
   return (
     <div className="flex items-start justify-between gap-x-2 border-b border-grid-bright p-2">
-      <div className="flex flex-row flex-wrap items-center gap-2">
+      <div className="flex flex-row flex-wrap items-center gap-1.5">
         {list ? (
           <>
+            <SearchInput placeholder="Search errors…" />
             <StatusFilter />
             <LogsTaskFilter possibleTasks={list.filters.possibleTasks} />
             <LogsVersionFilter />
             <TimeFilter
               defaultPeriod={defaultPeriod}
               maxPeriodDays={retentionLimitDays}
               labelName="Occurred"
+              shortcut={timeShortcut}
             />
-            <SearchInput placeholder="Search errors…" />
             {hasFilters && (
               <Form className="h-6">
                 <Button
@@ -439,11 +443,15 @@ function FiltersBar({
           </>
         ) : (
           <>
+            <SearchInput placeholder="Search errors…" />
             <StatusFilter />
             <LogsTaskFilter possibleTasks={[]} />
             <LogsVersionFilter />
-            <TimeFilter defaultPeriod={defaultPeriod} maxPeriodDays={retentionLimitDays} />
-            <SearchInput placeholder="Search errors…" />
+            <TimeFilter
+              defaultPeriod={defaultPeriod}
+              maxPeriodDays={retentionLimitDays}
+              shortcut={timeShortcut}
+            />
             {hasFilters && (
               <Form className="h-6">
                 <Button
@@ -456,12 +464,14 @@ function FiltersBar({
           </>
         )}
       </div>
-      <div className="flex shrink-0 items-center gap-2">
+      <div className="flex shrink-0 items-center gap-1.5">
         <LinkButton
           to={alertsHref}
           variant="secondary/small"
           LeadingIcon={BellAlertIcon}
           leadingIconClassName="text-alerts"
+          shortcut={alertsShortcut}
+          tooltip="Configure alerts"
         >
           Configure alerts
         </LinkButton>