add clear button to filter inputs in all systems and containers tables (#1447)

internal/site/src/components/containers-table/containers-table.tsx

@@ -26,7 +26,7 @@ import { Sheet, SheetTitle, SheetHeader, SheetContent, SheetDescription } from "
 import { Dialog, DialogContent, DialogTitle } from "../ui/dialog"
 import { Button } from "@/components/ui/button"
 import { $allSystemsById } from "@/lib/stores"
-import { MaximizeIcon, RefreshCwIcon } from "lucide-react"
+import { MaximizeIcon, RefreshCwIcon, XIcon } from "lucide-react"
 import { Separator } from "../ui/separator"
 import { $router, Link } from "../router"
 import { listenKeys } from "nanostores"
@@ -147,12 +147,26 @@ export default function ContainersTable({ systemId }: { systemId?: string }) {
 							<Trans>Click on a container to view more information.</Trans>
 						</CardDescription>
 					</div>
+					<div className="relative ms-auto w-full max-w-full md:w-64">
 						<Input
 							placeholder={t`Filter...`}
 							value={globalFilter}
 							onChange={(e) => setGlobalFilter(e.target.value)}
-						className="ms-auto px-4 w-full max-w-full md:w-64"
+							className="ps-4 pe-10 w-full"
 						/>
+						{globalFilter && (
+							<Button
+								type="button"
+								variant="ghost"
+								size="icon"
+								aria-label={t`Clear filter`}
+								className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 text-muted-foreground"
+								onClick={() => setGlobalFilter("")}
+							>
+								<XIcon className="h-4 w-4" />
+							</Button>
+						)}
+					</div>
 				</div>
 			</CardHeader>
 			<div className="rounded-md">

internal/site/src/components/systems-table/systems-table.tsx

@@ -24,6 +24,7 @@ import {
 	LayoutGridIcon,
 	LayoutListIcon,
 	Settings2Icon,
+	XIcon,
 } from "lucide-react"
 import { memo, useEffect, useMemo, useRef, useState } from "react"
 import { Button } from "@/components/ui/button"
@@ -60,7 +61,7 @@ export default function SystemsTable() {
 	const upSystems = $upSystems.get()
 	const pausedSystems = $pausedSystems.get()
 	const { i18n, t } = useLingui()
-	const [filter, setFilter] = useState<string>()
+	const [filter, setFilter] = useState<string>("")
 	const [statusFilter, setStatusFilter] = useState<StatusFilter>("all")
 	const [sorting, setSorting] = useBrowserStorage<SortingState>(
 		"sortMode",
@@ -145,7 +146,26 @@ export default function SystemsTable() {
 					</div>
 
 					<div className="flex gap-2 ms-auto w-full md:w-80">
-						<Input placeholder={t`Filter...`} onChange={(e) => setFilter(e.target.value)} className="px-4" />
+						<div className="relative flex-1">
+							<Input
+								placeholder={t`Filter...`}
+								onChange={(e) => setFilter(e.target.value)}
+								value={filter}
+								className="ps-4 pe-10 w-full"
+							/>
+							{filter && (
+								<Button
+									type="button"
+									variant="ghost"
+									size="icon"
+									aria-label="Clear filter"
+									className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 text-muted-foreground"
+									onClick={() => setFilter("")}
+								>
+									<XIcon className="h-4 w-4" />
+								</Button>
+							)}
+						</div>
 						<DropdownMenu>
 							<DropdownMenuTrigger asChild>
 								<Button variant="outline">
@@ -278,6 +298,7 @@ export default function SystemsTable() {
 		upSystemsLength,
 		downSystemsLength,
 		pausedSystemsLength,
+		filter,
 	])
 
 	return (