feat: add hotkey for grouping & refresh

package.json

@@ -29,8 +29,10 @@
     "nuqs": "^2.1.2",
     "react": "19.0.0-rc-02c0e824-20241028",
     "react-dom": "19.0.0-rc-02c0e824-20241028",
+    "react-hotkeys-hook": "^4.6.1",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
+    "ts-key-enum": "^3.0.13",
     "vaul": "^1.1.1",
     "yaml": "^2.6.0",
     "zod": "^3.23.8"

src/app/layout.tsx

@@ -6,6 +6,7 @@ import { ThemeProvider } from "next-themes";
 import { NuqsAdapter } from 'nuqs/adapters/next/app'
 import { AppLayout } from "@/components/layout/app-layout";
 import { AlertsProvider } from "@/contexts/alerts";
+import { TooltipProvider } from "@/components/ui/tooltip";
 
 export const dynamic = "force-dynamic";
 
@@ -53,13 +54,15 @@ export default async function RootLayout({
             enableSystem
             disableTransitionOnChange
           >
-            <ConfigProvider>
-              <AlertsProvider>
-                <AppLayout>
-                  {children}
-                </AppLayout>
-              </AlertsProvider>
-            </ConfigProvider>
+            <TooltipProvider delayDuration={150}>
+              <ConfigProvider>
+                <AlertsProvider>
+                  <AppLayout>
+                    {children}
+                  </AppLayout>
+                </AlertsProvider>
+              </ConfigProvider>
+            </TooltipProvider>
           </ThemeProvider>
         </NuqsAdapter>
       </body>

src/components/alerts/group-select.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { Label } from "@/components/ui/label";
-import { Check, ChevronDown } from "lucide-react";
 import { useState } from "react";
+import { Boxes, Check, ChevronDown } from "lucide-react";
 import { useQueryState } from "nuqs";
+import { useHotkeys } from "react-hotkeys-hook";
 import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
 import {
   Command,
   CommandEmpty,
@@ -15,6 +16,7 @@ import {
 } from "@/components/ui/command";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 
 type Props = {
   labels: string[];
@@ -27,9 +29,25 @@ export default function GroupSelect(props: Props) {
   const [open, setOpen] = useState<boolean>(false);
   const [value, setValue] = useQueryState('group', { defaultValue, history: 'push' });
 
+  useHotkeys('g', (e) => {
+    e.preventDefault(); // Prevent typing in input field
+    setOpen(true)
+  }, []);
+
   return (
     <div className="flex space-x-2 items-center">
-      <Label htmlFor="group-select" className="text-nowrap text-muted-foreground">Group by</Label>
+      <Label htmlFor="group-select" className="text-nowrap text-muted-foreground">
+        <span className="sr-only">Group by</span>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Boxes size={16} className="shrink-0" />
+          </TooltipTrigger>
+          <TooltipContent side="left" className="flex items-center gap-2">
+            <span>Group by</span>
+            <span className="font-mono flex items-center justify-center h-5 w-5 text-muted-foreground border-muted-foreground border rounded-sm">G</span>
+          </TooltipContent>
+        </Tooltip>
+      </Label>
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
           <Button

src/components/alerts/template.tsx

@@ -23,6 +23,7 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 import GroupSelect from './group-select'
+import { useHotkeys } from 'react-hotkeys-hook'
 
 type Props = {
   view: string
@@ -41,6 +42,8 @@ export function AlertsTemplate(props: Props) {
   const [view, setView] = useState<ViewConfig | null>(null)
   const [alertGroups, setAlertGroups] = useState<Group[]>([])
 
+  useHotkeys('r', () => refreshAlerts(), []);
+
   // Load view config
   useEffect(() => setView(config.views[viewName]), [viewName, config])
 
@@ -137,17 +140,25 @@ export function AlertsTemplate(props: Props) {
 
           <div className='grow' />
 
-          <button
-            disabled={loading}
-            onClick={() => refreshAlerts()}
-            className={loading ? 'cursor-not-allowed text-muted-foreground ' : ''}
-          >
-            {loading && (
-              <LoaderCircle size={16} className='animate-[spin_1s]' />
-            ) || (
-                <RefreshCcw size={16} />
-              )}
-          </button>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                disabled={loading}
+                onClick={() => refreshAlerts()}
+                className={loading ? 'cursor-not-allowed text-muted-foreground ' : ''}
+              >
+                {loading && (
+                  <LoaderCircle size={16} className='animate-[spin_1s]' />
+                ) || (
+                    <RefreshCcw size={16} />
+                  )}
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="left" className="flex items-center gap-2">
+              <span>Refresh</span>
+              <span className="font-mono flex items-center justify-center h-5 w-5 text-muted-foreground border-muted-foreground border rounded-sm">R</span>
+            </TooltipContent>
+          </Tooltip>
 
           <div>
             <Select value={`${refreshInterval}`} onValueChange={(value) => setRefreshInterval(Number(value))}>