ui: add tooltips & clear table button

src/components/DT/data-table.tsx

@@ -29,18 +29,26 @@ import {
     DropdownMenuSeparator,
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { useState } from "react";
 import { DataTableViewOptions } from "@/components/DT/DataTableViewOptions";
-import { LucideScanSearch } from "lucide-react";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { LucideScanSearch, Trash2 } from "lucide-react";
+import { useState } from "react";
 
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
+    setData: React.Dispatch<React.SetStateAction<TData[]>>;
 }
 
 export function DataTable<TData, TValue>({
     columns,
     data,
+    setData,
 }: DataTableProps<TData, TValue>) {
     const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
     const [searchColumn, setSearchColumn] = useState("label");
@@ -79,10 +87,24 @@ export function DataTable<TData, TValue>({
                         className="max-w-sm"
                     />
                     <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                            <Button variant="outline" size="icon">
-                                <LucideScanSearch strokeWidth={1.25} />
-                            </Button>
+                        <DropdownMenuTrigger>
+                            <TooltipProvider delayDuration={0}>
+                                <Tooltip>
+                                    <TooltipTrigger asChild>
+                                        <Button variant="outline" size="icon">
+                                            <LucideScanSearch
+                                                strokeWidth={1.25}
+                                            />
+                                            <span className="sr-only">
+                                                Choose a column to search
+                                            </span>
+                                        </Button>
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+                                        Choose a column to search
+                                    </TooltipContent>
+                                </Tooltip>
+                            </TooltipProvider>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent>
                             <DropdownMenuLabel>Search Column</DropdownMenuLabel>
@@ -107,6 +129,21 @@ export function DataTable<TData, TValue>({
                             </DropdownMenuRadioGroup>
                         </DropdownMenuContent>
                     </DropdownMenu>
+                    <TooltipProvider delayDuration={0}>
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <Button
+                                    variant="destructive"
+                                    size="icon"
+                                    onClick={() => setData([])}
+                                >
+                                    <Trash2 strokeWidth={1.25} />
+                                    <span className="sr-only">Clear table</span>
+                                </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>Clear table</TooltipContent>
+                        </Tooltip>
+                    </TooltipProvider>
                 </div>
                 <DataTableViewOptions table={table} />
             </div>

src/components/MagikaProcess.tsx

@@ -19,22 +19,19 @@ const MagikaProcess = () => {
 
     useEffect(() => {
         if (loading) return;
-        const unlisten = listen(
-            "tauri://file-drop",
-            async ({ payload }: any) => {
-                setLoading(true);
-                const filepaths: string[] = payload.paths;
-                const filepredictions: any[] = [];
+        listen("tauri://file-drop", async ({ payload }: any) => {
+            setLoading(true);
+            const filepaths: string[] = payload.paths;
+            const filepredictions: any[] = [];
 
-                for await (const filepath of filepaths) {
-                    const prediction = await getPrediction(filepath);
-                    filepredictions.push(prediction);
-                }
-
-                setPredictions(filepredictions);
-                setLoading(false);
+            for await (const filepath of filepaths) {
+                const prediction = await getPrediction(filepath);
+                filepredictions.push(prediction);
             }
-        );
+
+            setPredictions(filepredictions);
+            setLoading(false);
+        });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
@@ -68,7 +65,6 @@ const MagikaProcess = () => {
             }
             setPredictions(filePredictions);
         } else if (selected === null) {
-            // user cancelled the selection
             console.log("User cancelled selection");
         } else {
             // user selected a single file
@@ -110,7 +106,11 @@ const MagikaProcess = () => {
                     </p>
                 </div>
                 {predictions.length > 0 && (
-                    <DataTable columns={columns} data={predictions} />
+                    <DataTable
+                        columns={columns}
+                        data={predictions}
+                        setData={setPredictions}
+                    />
                 )}
             </div>
         </div>

src/components/SideBar/Info.tsx

@@ -11,23 +11,38 @@ import {
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { open } from "@tauri-apps/plugin-shell";
 
 const Settings = () => {
     return (
         <Dialog>
-            <DialogTrigger asChild>
+            <DialogTrigger>
                 {/* <SettingsIcon strokeWidth={1.25} /> */}
-                <Button variant="ghost" size="icon">
-                    <Info strokeWidth={1.25} />
-                </Button>
+                <TooltipProvider delayDuration={0}>
+                    <Tooltip>
+                        <TooltipTrigger asChild>
+                            <Button variant="ghost" size="icon">
+                                <Info strokeWidth={1.25} />
+                                <span className="sr-only">About fformat</span>
+                            </Button>
+                        </TooltipTrigger>
+                        <TooltipContent side="right">
+                            About fformat
+                        </TooltipContent>
+                    </Tooltip>
+                </TooltipProvider>
             </DialogTrigger>
             <DialogContent>
                 <DialogHeader>
                     <DialogTitle>fformat</DialogTitle>
                     <p className="text-sm text-muted-foreground">
-                        Identify potential file content types on your local
-                        device.
+                        Identify potential file content types on your device.
                     </p>
                     <Separator />
                     <ul className="list-disc text-sm text-muted-foreground ml-4 mt-2">

src/components/ThemeSwitch.tsx

@@ -3,20 +3,35 @@
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
 import { Button } from "@/components/ui/button";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 const ThemeSwitch = () => {
     const { theme, setTheme } = useTheme();
 
     return (
-        <Button
-            onClick={() => setTheme(theme === "light" ? "dark" : "light")}
-            variant="ghost"
-            size="icon"
-        >
-            <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-            <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-            <span className="sr-only">Toggle theme</span>
-        </Button>
+        <TooltipProvider delayDuration={0}>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <Button
+                        onClick={() =>
+                            setTheme(theme === "light" ? "dark" : "light")
+                        }
+                        variant="ghost"
+                        size="icon"
+                    >
+                        <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+                        <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+                        <span className="sr-only">Toggle theme</span>
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent side="right">Toggle theme</TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
     );
 };
 

src/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }