feat: add action key shortcuts

nainglinnkhant · Jul 8, 2024 · d3cf9a5 · d3cf9a5
1 parent a37ab99
commit d3cf9a5
Show file tree

Hide file tree

Showing 9 changed files with 219 additions and 62 deletions.
diff --git a/package.json b/package.json
@@ -54,6 +54,7 @@
     "react-day-picker": "^8.10.1",
     "react-dom": "18.3.1",
     "react-hook-form": "^7.51.5",
+    "react-hotkeys-hook": "^4.5.0",
     "server-only": "^0.0.1",
     "sonner": "^1.4.41",
     "tailwind-merge": "^2.3.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/_components/create-task-dialog.tsx b/src/app/_components/create-task-dialog.tsx
@@ -5,6 +5,7 @@ import { tasks } from "@/db/schema"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { PlusIcon } from "@radix-ui/react-icons"
 import { useForm } from "react-hook-form"
+import { useHotkeys } from "react-hotkeys-hook"
 import { toast } from "sonner"
 
 import { Button } from "@/components/ui/button"
@@ -35,6 +36,13 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 import { Textarea } from "@/components/ui/textarea"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { Kbd } from "@/components/kbd"
 import { LoaderIcon } from "@/components/loader-icon"
 
 import { createTask } from "../_lib/actions"
@@ -63,14 +71,31 @@ export function CreateTaskDialog() {
     })
   }
 
+  useHotkeys("shift+n", () => {
+    setTimeout(() => setOpen(true), 100)
+  })
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button variant="outline" size="sm">
-          <PlusIcon className="mr-2 size-4" aria-hidden="true" />
-          New task
-        </Button>
-      </DialogTrigger>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <DialogTrigger asChild>
+              <Button variant="outline" size="sm">
+                <PlusIcon className="mr-2 size-4" aria-hidden="true" />
+                New task
+              </Button>
+            </DialogTrigger>
+          </TooltipTrigger>
+          <TooltipContent className="flex items-center gap-2 border bg-accent font-semibold text-foreground dark:bg-background/95 dark:backdrop-blur-md dark:supports-[backdrop-filter]:bg-background/40">
+            Add new task
+            <div>
+              <Kbd variant="outline">⇧</Kbd> <Kbd variant="outline">N</Kbd>
+            </div>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Create task</DialogTitle>

diff --git a/src/app/_components/tasks-table-floating-bar.tsx b/src/app/_components/tasks-table-floating-bar.tsx
@@ -77,7 +77,7 @@ export function TasksTableFloatingBar({ table }: TasksTableFloatingBarProps) {
                   />
                 </Button>
               </TooltipTrigger>
-              <TooltipContent className="flex items-center border bg-accent px-2 py-1 font-semibold text-foreground dark:bg-zinc-900">
+              <TooltipContent className="flex items-center border bg-accent px-2 py-1 font-semibold text-foreground dark:bg-background/95 dark:backdrop-blur-md dark:supports-[backdrop-filter]:bg-background/40">
                 <p className="mr-2">Clear selection</p>
                 <Kbd abbrTitle="Escape" variant="outline">
                   Esc
@@ -129,7 +129,7 @@ export function TasksTableFloatingBar({ table }: TasksTableFloatingBarProps) {
                     </Button>
                   </TooltipTrigger>
                 </SelectTrigger>
-                <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900">
+                <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-background/95 dark:backdrop-blur-md dark:supports-[backdrop-filter]:bg-background/40">
                   <p>Update status</p>
                 </TooltipContent>
               </Tooltip>
@@ -186,7 +186,7 @@ export function TasksTableFloatingBar({ table }: TasksTableFloatingBarProps) {
                     </Button>
                   </TooltipTrigger>
                 </SelectTrigger>
-                <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900">
+                <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-background/95 dark:backdrop-blur-md dark:supports-[backdrop-filter]:bg-background/40">
                   <p>Update priority</p>
                 </TooltipContent>
               </Tooltip>
@@ -232,7 +232,7 @@ export function TasksTableFloatingBar({ table }: TasksTableFloatingBarProps) {
                   )}
                 </Button>
               </TooltipTrigger>
-              <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900">
+              <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-background/95 dark:backdrop-blur-md dark:supports-[backdrop-filter]:bg-background/40">
                 <p>Export tasks</p>
               </TooltipContent>
             </Tooltip>
@@ -270,7 +270,7 @@ export function TasksTableFloatingBar({ table }: TasksTableFloatingBarProps) {
                   )}
                 </Button>
               </TooltipTrigger>
-              <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900">
+              <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-background/95 dark:backdrop-blur-md dark:supports-[backdrop-filter]:bg-background/40">
                 <p>Delete tasks</p>
               </TooltipContent>
             </Tooltip>

diff --git a/src/app/_components/tasks-table-toolbar-actions.tsx b/src/app/_components/tasks-table-toolbar-actions.tsx
@@ -3,9 +3,17 @@
 import { type Task } from "@/db/schema"
 import { DownloadIcon } from "@radix-ui/react-icons"
 import { type Table } from "@tanstack/react-table"
+import { useHotkeys } from "react-hotkeys-hook"
 
 import { exportTableToCSV } from "@/lib/export"
 import { Button } from "@/components/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { Kbd } from "@/components/kbd"
 
 import { CreateTaskDialog } from "./create-task-dialog"
 import { DeleteTasksDialog } from "./delete-tasks-dialog"
@@ -17,6 +25,13 @@ interface TasksTableToolbarActionsProps {
 export function TasksTableToolbarActions({
   table,
 }: TasksTableToolbarActionsProps) {
+  useHotkeys("shift+e", () =>
+    exportTableToCSV(table, {
+      filename: "tasks",
+      excludeColumns: ["select", "actions"],
+    })
+  )
+
   return (
     <div className="flex items-center gap-2">
       {table.getFilteredSelectedRowModel().rows.length > 0 ? (
@@ -28,19 +43,32 @@ export function TasksTableToolbarActions({
         />
       ) : null}
       <CreateTaskDialog />
-      <Button
-        variant="outline"
-        size="sm"
-        onClick={() =>
-          exportTableToCSV(table, {
-            filename: "tasks",
-            excludeColumns: ["select", "actions"],
-          })
-        }
-      >
-        <DownloadIcon className="mr-2 size-4" aria-hidden="true" />
-        Export
-      </Button>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() =>
+                exportTableToCSV(table, {
+                  filename: "tasks",
+                  excludeColumns: ["select", "actions"],
+                })
+              }
+            >
+              <DownloadIcon className="mr-2 size-4" aria-hidden="true" />
+              Export
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent className="flex items-center gap-2 border bg-accent font-semibold text-foreground dark:bg-background/95 dark:backdrop-blur-md dark:supports-[backdrop-filter]:bg-background/40">
+            Export csv
+            <div>
+              <Kbd variant="outline">⇧</Kbd> <Kbd variant="outline">E</Kbd>
+            </div>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
       {/**
        * Other actions can be added here.
        * For example, import, view, etc.

diff --git a/src/components/data-table/advanced/data-table-filter-combobox.tsx b/src/components/data-table/advanced/data-table-filter-combobox.tsx
@@ -8,6 +8,7 @@ import {
   PlusIcon,
   TextIcon,
 } from "@radix-ui/react-icons"
+import { useHotkeys } from "react-hotkeys-hook"
 
 import { Button } from "@/components/ui/button"
 import {
@@ -24,6 +25,13 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover"
 import { Separator } from "@/components/ui/separator"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { Kbd } from "@/components/kbd"
 
 interface DataTableFilterComboboxProps<TData> {
   selectableOptions: DataTableFilterOption<TData>[]
@@ -48,24 +56,44 @@ export function DataTableFilterCombobox<TData>({
     DataTableFilterOption<TData>
   >(selectableOptions[0] ?? ({} as DataTableFilterOption<TData>))
 
+  const buttonRef = React.useRef<HTMLButtonElement>(null)
+
+  useHotkeys("shift+f", () => {
+    setTimeout(() => buttonRef.current?.click(), 100)
+  })
+
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        {children ?? (
-          <Button
-            variant="outline"
-            size="sm"
-            role="combobox"
-            className="capitalize"
-          >
-            <CaretSortIcon
-              className="mr-2 size-4 shrink-0"
-              aria-hidden="true"
-            />
-            Filter
-          </Button>
-        )}
-      </PopoverTrigger>
+      {children ?? (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <PopoverTrigger asChild>
+                <Button
+                  ref={buttonRef}
+                  variant="outline"
+                  size="sm"
+                  role="combobox"
+                  className="capitalize"
+                >
+                  <CaretSortIcon
+                    className="mr-2 size-4 shrink-0"
+                    aria-hidden="true"
+                  />
+                  Filter
+                </Button>
+              </PopoverTrigger>
+            </TooltipTrigger>
+            <TooltipContent className="flex items-center gap-2 border bg-accent font-semibold text-foreground dark:bg-background/95 dark:backdrop-blur-md dark:supports-[backdrop-filter]:bg-background/40">
+              Open filter
+              <div>
+                <Kbd variant="outline">⇧</Kbd> <Kbd variant="outline">F</Kbd>
+              </div>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
+
       <PopoverContent
         className="w-[12.5rem] p-0 dark:bg-background/95 dark:backdrop-blur-md dark:supports-[backdrop-filter]:bg-background/40"
         align="start"

diff --git a/src/components/data-table/advanced/views/data-table-views-dropdown.tsx b/src/components/data-table/advanced/views/data-table-views-dropdown.tsx
@@ -2,7 +2,9 @@ import { useState } from "react"
 import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import type { View } from "@/db/schema"
 import { CaretDownIcon, Pencil1Icon, PlusIcon } from "@radix-ui/react-icons"
+import { useHotkeys } from "react-hotkeys-hook"
 
+import { getIsMacOS } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import {
   Command,
@@ -18,6 +20,13 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover"
 import { Separator } from "@/components/ui/separator"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { Kbd } from "@/components/kbd"
 import type { FilterParams } from "@/app/_lib/validations"
 
 import { CreateViewForm } from "./create-view-form"
@@ -55,6 +64,11 @@ export function DataTableViewsDropdown({
     })
   }
 
+  const isMac = getIsMacOS()
+  useHotkeys(`${isMac ? "meta" : "ctrl"}+v`, () => {
+    setTimeout(() => setOpen(true), 100)
+  })
+
   return (
     <Popover
       open={open}
@@ -64,16 +78,32 @@ export function DataTableViewsDropdown({
         setIsEditViewFormOpen(false)
       }}
     >
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          size="sm"
-          className="flex w-36 justify-between"
-        >
-          <span className="truncate">{currentView?.name || "All tasks"}</span>
-          <CaretDownIcon aria-hidden="true" className="size-4 shrink-0" />
-        </Button>
-      </PopoverTrigger>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                size="sm"
+                className="flex w-36 justify-between"
+              >
+                <span className="truncate">
+                  {currentView?.name || "All tasks"}
+                </span>
+                <CaretDownIcon aria-hidden="true" className="size-4 shrink-0" />
+              </Button>
+            </PopoverTrigger>
+          </TooltipTrigger>
+          <TooltipContent className="flex items-center gap-2 border bg-accent font-semibold text-foreground dark:bg-background/95 dark:backdrop-blur-md dark:supports-[backdrop-filter]:bg-background/40">
+            Open views
+            <div>
+              <Kbd variant="outline">{isMac ? "⌘" : "ctrl"}</Kbd>{" "}
+              <Kbd variant="outline">V</Kbd>
+            </div>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
       <PopoverContent
         className="w-[12.5rem] p-0 dark:bg-background/95 dark:backdrop-blur-md dark:supports-[backdrop-filter]:bg-background/40"
         align="start"