fix: directory table multi select

packages/web/src/directories/directory-page/directory-content-table.tsx

@@ -35,6 +35,10 @@ import {
 	TableHeader,
 	TableRow,
 } from "@/components/ui/table"
+import {
+	isControlOrCommandKeyActive,
+	keyboardModifierAtom,
+} from "@/lib/keyboard"
 import { TextFileIcon } from "../../components/icons/text-file-icon"
 import { Button } from "../../components/ui/button"
 import { LoadingSpinner } from "../../components/ui/loading-spinner"
@@ -67,15 +71,18 @@ const columns: ColumnDef<DirectoryItem>[] = [
 		header: ({ table }) => (
 			<Checkbox
 				checked={table.getIsAllPageRowsSelected()}
-				onCheckedChange={(value) =>
+				onCheckedChange={(value) => {
 					table.toggleAllPageRowsSelected(!!value)
-				}
+				}}
 				aria-label="Select all"
 			/>
 		),
 		cell: ({ row }) => (
 			<Checkbox
 				checked={row.getIsSelected()}
+				onClick={(e) => {
+					e.stopPropagation()
+				}}
 				onCheckedChange={row.getToggleSelectedHandler()}
 				aria-label="Select row"
 			/>
@@ -229,10 +236,25 @@ export function DirectoryContentTableContent() {
 	})
 
 	const selectRow = (row: Row<DirectoryItem>) => {
-		console.log("row.getIsSelected()", row.getIsSelected())
-		if (!row.getIsSelected()) {
-			table.toggleAllPageRowsSelected(false)
+		const keyboardModifiers = store.get(keyboardModifierAtom)
+		const isMultiSelectMode = isControlOrCommandKeyActive(keyboardModifiers)
+		const isRowSelected = row.getIsSelected()
+		console.log({ isMultiSelectMode, isRowSelected })
+		if (isRowSelected && isMultiSelectMode) {
+			row.toggleSelected(false)
+		} else if (isRowSelected && !isMultiSelectMode) {
+			table.setRowSelection({
+				[row.id]: true,
+			})
 			row.toggleSelected(true)
+		} else if (!isRowSelected) {
+			if (isMultiSelectMode) {
+				row.toggleSelected(true)
+			} else {
+				table.setRowSelection({
+					[row.id]: true,
+				})
+			}
 		}
 	}
 

packages/web/src/lib/keyboard.ts

@@ -0,0 +1,85 @@
+import { atom, useSetAtom } from "jotai"
+import { useEffect } from "react"
+
+export enum KeyboardModifier {
+	Alt = "Alt",
+	Control = "Control",
+	Meta = "Meta",
+	Shift = "Shift",
+}
+
+export const keyboardModifierAtom = atom(new Set<KeyboardModifier>())
+
+const addKeyboardModifierAtom = atom(
+	null,
+	(get, set, modifier: KeyboardModifier) => {
+		const activeModifiers = get(keyboardModifierAtom)
+		const nextActiveModifiers = new Set(activeModifiers)
+		nextActiveModifiers.add(modifier)
+		set(keyboardModifierAtom, nextActiveModifiers)
+	},
+)
+const removeKeyboardModifierAtom = atom(
+	null,
+	(get, set, modifier: KeyboardModifier) => {
+		const activeModifiers = get(keyboardModifierAtom)
+		const nextActiveModifiers = new Set(activeModifiers)
+		nextActiveModifiers.delete(modifier)
+		set(keyboardModifierAtom, nextActiveModifiers)
+	},
+)
+
+export function useKeyboardModifierListener() {
+	const addKeyboardModifier = useSetAtom(addKeyboardModifierAtom)
+	const removeKeyboardModifier = useSetAtom(removeKeyboardModifierAtom)
+
+	useEffect(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			switch (event.key) {
+				case "Alt":
+					addKeyboardModifier(KeyboardModifier.Alt)
+					break
+				case "Control":
+					addKeyboardModifier(KeyboardModifier.Control)
+					break
+				case "Meta":
+					addKeyboardModifier(KeyboardModifier.Meta)
+					break
+				case "Shift":
+					addKeyboardModifier(KeyboardModifier.Shift)
+					break
+			}
+		}
+		const handleKeyUp = (event: KeyboardEvent) => {
+			switch (event.key) {
+				case "Alt":
+					removeKeyboardModifier(KeyboardModifier.Alt)
+					break
+				case "Control":
+					removeKeyboardModifier(KeyboardModifier.Control)
+					break
+				case "Meta":
+					removeKeyboardModifier(KeyboardModifier.Meta)
+					break
+				case "Shift":
+					removeKeyboardModifier(KeyboardModifier.Shift)
+					break
+			}
+		}
+		window.addEventListener("keydown", handleKeyDown)
+		window.addEventListener("keyup", handleKeyUp)
+		return () => {
+			window.removeEventListener("keydown", handleKeyDown)
+			window.removeEventListener("keyup", handleKeyUp)
+		}
+	}, [addKeyboardModifier, removeKeyboardModifier])
+}
+
+export function isControlOrCommandKeyActive(
+	keyboardModifiers: Set<KeyboardModifier>,
+) {
+	return (
+		keyboardModifiers.has(KeyboardModifier.Control) ||
+		keyboardModifiers.has(KeyboardModifier.Meta)
+	)
+}

packages/web/src/routes/__root.tsx

@@ -6,6 +6,7 @@ import { AuthKitProvider, useAuth } from "@workos-inc/authkit-react"
 import { ConvexReactClient } from "convex/react"
 import { toast } from "sonner"
 import { formatError } from "@/lib/error"
+import { useKeyboardModifierListener } from "@/lib/keyboard"
 
 export const Route = createRootRoute({
 	component: RootLayout,
@@ -25,6 +26,8 @@ const queryClient = new QueryClient({
 })
 
 function RootLayout() {
+	useKeyboardModifierListener()
+
 	return (
 		<QueryClientProvider client={queryClient}>
 			<AuthKitProvider