feat: update actions

Author: sadmann7

src/app/_components/tasks-table-action-bar.tsx

@@ -3,27 +3,22 @@
 import { type Task, tasks } from "@/db/schema";
 import { SelectTrigger } from "@radix-ui/react-select";
 import type { Table } from "@tanstack/react-table";
-import { ArrowUp, CheckCircle2, Download, Trash2, X } from "lucide-react";
+import { ArrowUp, CheckCircle2, Download, Trash2 } from "lucide-react";
 import * as React from "react";
 import { toast } from "sonner";
 
 import {
   DataTableActionBar,
   DataTableActionBarAction,
+  DataTableActionBarSelection,
 } from "@/components/data-table-action-bar";
-import { Button } from "@/components/ui/button";
 import {
   Select,
   SelectContent,
   SelectGroup,
   SelectItem,
 } from "@/components/ui/select";
 import { Separator } from "@/components/ui/separator";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { exportTableToCSV } from "@/lib/export";
 import { deleteTasks, updateTasks } from "../_lib/actions";
 
@@ -104,35 +99,7 @@ export function TasksTableActionBar({ table }: TasksTableActionBarProps) {
 
   return (
     <DataTableActionBar table={table} visible={rows.length > 0}>
-      <div className="flex h-7 items-center rounded-md border pr-1 pl-2.5">
-        <span className="whitespace-nowrap text-xs">
-          {rows.length} selected
-        </span>
-        <Separator
-          orientation="vertical"
-          className="mr-1 ml-2 data-[orientation=vertical]:h-4"
-        />
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="size-5 [&>svg]:size-3.5"
-              onClick={() => table.toggleAllRowsSelected(false)}
-            >
-              <X />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent className="flex items-center gap-2 border bg-accent px-2 py-1 font-semibold text-foreground dark:bg-zinc-900">
-            <p>Clear selection</p>
-            <kbd className="select-none rounded border bg-background px-1.5 py-px font-mono font-normal text-[0.7rem] text-foreground shadow-xs disabled:opacity-50">
-              <abbr title="Escape" className="no-underline">
-                Esc
-              </abbr>
-            </kbd>
-          </TooltipContent>
-        </Tooltip>
-      </div>
+      <DataTableActionBarSelection table={table} />
       <Separator
         orientation="vertical"
         className="hidden data-[orientation=vertical]:h-5 sm:block"

src/app/_components/update-task-sheet.tsx

@@ -62,7 +62,7 @@ export function UpdateTaskSheet({ task, ...props }: UpdateTaskSheetProps) {
 
   return (
     <Sheet {...props}>
-      <SheetContent className="flex flex-col gap-6 sm:max-w-md ">
+      <SheetContent className="flex flex-col gap-6 sm:max-w-md">
         <SheetHeader className="text-left">
           <SheetTitle>Update task</SheetTitle>
           <SheetDescription>

src/components/data-table-action-bar.tsx

@@ -1,14 +1,15 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import type { Table } from "@tanstack/react-table";
-import { Loader } from "lucide-react";
+import { Loader, X } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
@@ -123,4 +124,55 @@ function DataTableActionBarAction({
   );
 }
 
-export { DataTableActionBar, DataTableActionBarAction };
+interface DataTableActionBarSelectionProps<TData> {
+  table: Table<TData>;
+}
+
+function DataTableActionBarSelection<TData>({
+  table,
+}: DataTableActionBarSelectionProps<TData>) {
+  const onClearSelection = React.useCallback(() => {
+    table.toggleAllRowsSelected(false);
+  }, [table]);
+
+  return (
+    <div className="flex h-7 items-center rounded-md border pr-1 pl-2.5">
+      <span className="whitespace-nowrap text-xs">
+        {table.getFilteredSelectedRowModel().rows.length} selected
+      </span>
+      <Separator
+        orientation="vertical"
+        className="mr-1 ml-2 data-[orientation=vertical]:h-4"
+      />
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-5"
+            onClick={onClearSelection}
+          >
+            <X className="size-3.5" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent
+          sideOffset={10}
+          className="flex items-center gap-2 border bg-accent px-2 py-1 font-semibold text-foreground dark:bg-zinc-900 [&>span]:hidden"
+        >
+          <p>Clear selection</p>
+          <kbd className="select-none rounded border bg-background px-1.5 py-px font-mono font-normal text-[0.7rem] text-foreground shadow-xs disabled:opacity-50">
+            <abbr title="Escape" className="no-underline">
+              Esc
+            </abbr>
+          </kbd>
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  );
+}
+
+export {
+  DataTableActionBar,
+  DataTableActionBarAction,
+  DataTableActionBarSelection,
+};