feat: add new filter for in use images to web ui

web/src/App.tsx

@@ -4,12 +4,16 @@ import Statistic from "./components/Statistic";
 import Image from "./components/Image";
 import { LastChecked } from "./components/LastChecked";
 import Loading from "./components/Loading";
+import { Filters as FiltersType } from "./types";
 import { theme } from "./theme";
 import RefreshButton from "./components/RefreshButton";
 import Search from "./components/Search";
 import { Server } from "./components/Server";
 import { useData } from "./hooks/use-data";
 import DataLoadingError from "./components/DataLoadingError";
+import Filters from "./components/Filters";
+import { Filter, FilterX } from "lucide-react";
+import { WithTooltip } from "./components/ui/Tooltip";
 
 const SORT_ORDER = [
   "monitored_images",
@@ -24,10 +28,22 @@ const SORT_ORDER = [
 
 function App() {
   const { data, isLoading, isError } = useData();
+
+  const [showFilters, setShowFilters] = useState<boolean>(false);
+  const [filters, setFilters] = useState<FiltersType>({
+    onlyInUse: false,
+  });
   const [searchQuery, setSearchQuery] = useState("");
 
   if (isLoading) return <Loading />;
   if (isError || !data) return <DataLoadingError />;
+  const toggleShowFilters = () => {
+    if (showFilters) {
+      setFilters({ onlyInUse: false });
+    }
+    setShowFilters(!showFilters);
+  };
+
   return (
     <div
       className={`flex min-h-screen justify-center bg-white dark:bg-${theme}-950`}
@@ -61,14 +77,26 @@ function App() {
             className={`border shadow-sm border-${theme}-200 dark:border-${theme}-900 my-8 rounded-md`}
           >
             <div
-              className={`flex items-center justify-between px-6 py-4 text-${theme}-500`}
+              className={`flex items-center justify-between gap-3 px-6 py-4 text-${theme}-500`}
             >
               <LastChecked datetime={data.last_updated} />
-              <RefreshButton />
+              <div className="flex gap-3">
+                <WithTooltip
+                  text={showFilters ? "Clear filters" : "Show filters"}
+                >
+                  <button onClick={toggleShowFilters}>
+                    {showFilters ? <FilterX /> : <Filter />}
+                  </button>
+                </WithTooltip>
+                <RefreshButton />
+              </div>
             </div>
             <div className="flex gap-2 px-6 text-black dark:text-white">
               <Search onChange={setSearchQuery} />
             </div>
+            {showFilters && (
+              <Filters filters={filters} setFilters={setFilters} />
+            )}
             <ul>
               {Object.entries(
                 data.images.reduce<Record<string, typeof data.images>>(
@@ -85,6 +113,9 @@ function App() {
                 .map(([server, images]) => (
                   <Server name={server} key={server}>
                     {images
+                      .filter((image) =>
+                        filters.onlyInUse ? !!image.in_use : true,
+                      )
                       .filter((image) => image.reference.includes(searchQuery))
                       .map((image) => (
                         <Image data={image} key={image.reference} />

web/src/components/Filters.tsx

@@ -0,0 +1,33 @@
+import { theme } from "../theme";
+import { Filters as FiltersType } from "../types";
+import { Checkbox } from "./ui/Checkbox";
+
+interface Props {
+  filters: FiltersType;
+  setFilters: (filters: FiltersType) => void;
+}
+
+export default function Filters({ filters, setFilters }: Props) {
+  return (
+      <div className="flex w-fit flex-col gap-2 px-6 py-4">
+        <div className="ml-auto flex items-center space-x-2">
+          <Checkbox
+            id="inUse"
+            checked={filters.onlyInUse}
+            onCheckedChange={(value) => {
+              setFilters({
+                ...filters,
+                onlyInUse: value === "indeterminate" ? false : value,
+              });
+            }}
+          />
+          <label
+            htmlFor="inUse"
+            className={`text-sm font-medium leading-none text-${theme}-600 dark:text-${theme}-400 hover:text-black dark:hover:text-white peer-hover:text-black peer-hover:dark:text-white peer-data-[state=checked]:text-black dark:peer-data-[state=checked]:text-white transition-colors duration-200`}
+          >
+            Hide unused images
+          </label>
+        </div>
+      </div>
+  );
+}

web/src/components/Image.tsx

@@ -5,7 +5,7 @@ import {
   DialogPanel,
   DialogTitle,
 } from "@headlessui/react";
-import { WithTooltip } from "./Tooltip";
+import { WithTooltip } from "./ui/Tooltip";
 import type { Image } from "../types";
 import { theme } from "../theme";
 import { CodeBlock } from "./CodeBlock";

web/src/components/RefreshButton.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { WithTooltip } from "./Tooltip";
+import { WithTooltip } from "./ui/Tooltip";
 
 export default function RefreshButton() {
   const [disabled, setDisabled] = useState(false);

web/src/components/ui/Checkbox.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+import { cn } from "../../utils";
+import { theme } from "../../theme";
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      `border-${theme}-600 dark:border-${theme}-400 group peer h-4 w-4 shrink-0 rounded-sm border shadow transition-colors duration-200 hover:border-black focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-blue-500 data-[state=checked]:border-0 data-[state=checked]:bg-blue-500 data-[state=checked]:text-white hover:data-[state=checked]:bg-blue-600 dark:hover:border-white dark:hover:data-[state=checked]:bg-blue-400`,
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check
+        className={`h-3 w-3 group-data-[state=checked]:text-white dark:group-data-[state=checked]:text-${theme}-950`}
+        strokeWidth={3}
+      />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

web/src/components/ui/Tooltip.tsx

@@ -1,7 +1,7 @@
 import { Provider, Root, Trigger, Content } from "@radix-ui/react-tooltip";
-import { cn } from "../utils";
+import { cn } from "../../utils";
 import { forwardRef, ReactNode } from "react";
-import { theme } from "../theme";
+import { theme } from "../../theme";
 
 const TooltipContent = forwardRef<
   React.ElementRef<typeof Content>,

web/src/types.ts

@@ -28,6 +28,7 @@ export interface Image {
   };
   time: number;
   server: string | null;
+  in_use: boolean | null;
 }
 
 interface VersionInfo {
@@ -43,3 +44,7 @@ interface DigestInfo {
   local_digests: string[];
   remote_digest: string;
 }
+
+export interface Filters {
+  onlyInUse: boolean;
+}