feat: add new filters

web/src/App.tsx

@@ -14,6 +14,7 @@ import DataLoadingError from "./components/DataLoadingError";
 import Filters from "./components/Filters";
 import { Filter, FilterX } from "lucide-react";
 import { WithTooltip } from "./components/ui/Tooltip";
+import { getDescription } from "./utils";
 
 const SORT_ORDER = [
   "monitored_images",
@@ -32,6 +33,8 @@ function App() {
   const [showFilters, setShowFilters] = useState<boolean>(false);
   const [filters, setFilters] = useState<FiltersType>({
     onlyInUse: false,
+    registries: [],
+    statuses: [],
   });
   const [searchQuery, setSearchQuery] = useState("");
 
@@ -39,7 +42,7 @@ function App() {
   if (isError || !data) return <DataLoadingError />;
   const toggleShowFilters = () => {
     if (showFilters) {
-      setFilters({ onlyInUse: false });
+      setFilters({ onlyInUse: false, registries: [], statuses: [] });
     }
     setShowFilters(!showFilters);
   };
@@ -95,7 +98,13 @@ function App() {
               <Search onChange={setSearchQuery} />
             </div>
             {showFilters && (
-              <Filters filters={filters} setFilters={setFilters} />
+              <Filters
+                filters={filters}
+                setFilters={setFilters}
+                registries={[
+                  ...new Set(data.images.map((image) => image.parts.registry)),
+                ]}
+              />
             )}
             <ul>
               {Object.entries(
@@ -116,6 +125,16 @@ function App() {
                       .filter((image) =>
                         filters.onlyInUse ? !!image.in_use : true,
                       )
+                      .filter((image) =>
+                        filters.registries.length == 0
+                          ? true
+                          : filters.registries.includes(image.parts.registry),
+                      )
+                      .filter((image) =>
+                        filters.statuses.length == 0
+                          ? true
+                          : filters.statuses.includes(getDescription(image)),
+                      )
                       .filter((image) => image.reference.includes(searchQuery))
                       .map((image) => (
                         <Image data={image} key={image.reference} />

web/src/components/Filters.tsx

@@ -1,33 +1,81 @@
+import { useState } from "react";
 import { theme } from "../theme";
 import { Filters as FiltersType } from "../types";
 import { Checkbox } from "./ui/Checkbox";
+import Select from "./ui/Select";
+import { Server } from "lucide-react";
 
 interface Props {
   filters: FiltersType;
   setFilters: (filters: FiltersType) => void;
+  registries: string[];
 }
 
-export default function Filters({ filters, setFilters }: Props) {
+const STATUSES = [
+  "Major update",
+  "Minor update",
+  "Patch update",
+  "Digest update",
+  "Up to date",
+  "Unknown",
+];
+
+export default function Filters({ filters, setFilters, registries }: Props) {
+  const [selectedRegistries, setSelectedRegistries] = useState<
+    FiltersType["registries"]
+  >([]);
+  const [selectedStatuses, setSelectedStatuses] = useState<
+    FiltersType["statuses"]
+  >([]);
+  const handleSelectRegistries = (registries: string[]) => {
+    setSelectedRegistries(registries);
+    setFilters({
+      ...filters,
+      registries,
+    });
+  };
+  const handleSelectStatuses = (statuses: string[]) => {
+    if (statuses.every((status) => STATUSES.includes(status))) {
+      setSelectedStatuses(statuses as FiltersType["statuses"]);
+      setFilters({
+        ...filters,
+        statuses: statuses as FiltersType["statuses"],
+      });
+    }
+  };
   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 className="flex w-full flex-col gap-4 px-6 py-4 sm:flex-row">
+      <div className="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 transition-colors duration-200 hover:text-black peer-hover:text-black peer-data-[state=checked]:text-black dark:hover:text-white peer-hover:dark:text-white dark:peer-data-[state=checked]:text-white`}
+        >
+          Hide unused images
+        </label>
       </div>
+      <Select
+        Icon={Server}
+        items={registries}
+        placeholder="Registry"
+        selectedItems={selectedRegistries}
+        setSelectedItems={handleSelectRegistries}
+      />
+      <Select
+        items={STATUSES}
+        placeholder="Update type"
+        selectedItems={selectedStatuses}
+        setSelectedItems={handleSelectStatuses}
+      />
+    </div>
   );
 }

web/src/components/Image.tsx

@@ -19,6 +19,7 @@ import {
   X,
 } from "lucide-react";
 import Badge from "./Badge";
+import { getDescription } from "../utils";
 
 const clickable_registries = [
   "registry-1.docker.io",
@@ -39,7 +40,7 @@ export default function Image({ data }: { data: Image }) {
     data.result.info?.type == "version"
       ? data.reference.split(":")[0] + ":" + data.result.info.new_tag
       : data.reference;
-  const info = getInfo(data)!;
+  const info = getInfo(data);
   let url: string | null = null;
   if (data.url) {
     url = data.url;
@@ -182,54 +183,49 @@ export default function Image({ data }: { data: Image }) {
   );
 }
 
-function getInfo(data: Image):
-  | {
-      color: string;
-      icon: typeof HelpCircle;
-      description: string;
-    }
-  | undefined {
-  switch (data.result.has_update) {
-    case null:
+function getInfo(data: Image): {
+  color: string;
+  icon: typeof HelpCircle;
+  description: string;
+} {
+  const description = getDescription(data);
+  switch (description) {
+    case "Unknown":
       return {
         color: "text-gray-500",
         icon: HelpCircle,
-        description: "Unknown",
+        description,
       };
-    case false:
+    case "Up to date":
       return {
         color: "text-green-500",
         icon: CircleCheck,
-        description: "Up to date",
+        description,
+      };
+
+    case "Major update":
+      return {
+        color: "text-red-500",
+        icon: CircleArrowUp,
+        description,
+      };
+    case "Minor update":
+      return {
+        color: "text-yellow-500",
+        icon: CircleArrowUp,
+        description,
+      };
+    case "Patch update":
+      return {
+        color: "text-blue-500",
+        icon: CircleArrowUp,
+        description,
+      };
+    case "Digest update":
+      return {
+        color: "text-blue-500",
+        icon: CircleArrowUp,
+        description,
       };
-    case true:
-      if (data.result.info?.type === "version") {
-        switch (data.result.info.version_update_type) {
-          case "major":
-            return {
-              color: "text-red-500",
-              icon: CircleArrowUp,
-              description: "Major update",
-            };
-          case "minor":
-            return {
-              color: "text-yellow-500",
-              icon: CircleArrowUp,
-              description: "Minor update",
-            };
-          case "patch":
-            return {
-              color: "text-blue-500",
-              icon: CircleArrowUp,
-              description: "Patch update",
-            };
-        }
-      } else if (data.result.info?.type === "digest") {
-        return {
-          color: "text-blue-500",
-          icon: CircleArrowUp,
-          description: "Update available",
-        };
-      }
   }
 }

web/src/components/ui/Select.tsx

@@ -0,0 +1,84 @@
+import {
+  Listbox,
+  ListboxButton,
+  ListboxOptions,
+  ListboxOption,
+} from "@headlessui/react";
+import { ChevronDown, Check } from "lucide-react";
+import { theme } from "../../theme";
+import { cn } from "../../utils";
+import { Server } from "lucide-react";
+
+export default function Select({
+  items,
+  Icon,
+  placeholder,
+  selectedItems,
+  setSelectedItems,
+}: {
+  items: string[];
+  Icon?: typeof Server;
+  placeholder: string;
+  selectedItems: string[];
+  setSelectedItems: (items: string[]) => void;
+}) {
+  return (
+    <Listbox value={selectedItems} onChange={setSelectedItems} multiple>
+      <div className="relative">
+        <ListboxButton
+          className={cn(
+            `flex overflow-x-hidden w-full gap-2 rounded-md bg-${theme}-100 dark:bg-${theme}-900 border border-${theme}-200 dark:border-${theme}-700 group relative items-center py-1.5 pl-3 pr-2 text-left transition-colors duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-blue-500 sm:text-sm/6`,
+            selectedItems.length == 0
+              ? `text-${theme}-600 dark:text-${theme}-400 hover:text-black hover:dark:text-white`
+              : "text-black dark:text-white",
+          )}
+        >
+          {Icon && (
+            <Icon
+              className={cn(
+                "size-4 shrink-0",
+                selectedItems.length == 0
+                  ? `text-${theme}-600 dark:text-${theme}-400 hover:text-black hover:dark:text-white`
+                  : "text-black dark:text-white",
+              )}
+            />
+          )}
+          <span className="truncate">
+          {selectedItems.length == 0
+            ? placeholder
+            : selectedItems.length == 1
+              ? selectedItems[0]
+              : `${selectedItems[0]} +${(selectedItems.length - 1).toString()} more`}</span>
+
+          <ChevronDown
+            aria-hidden="true"
+            className={`size-5 shrink-0 ml-auto self-center text-${theme}-600 dark:text-${theme}-400 transition-colors duration-200 group-hover:text-black sm:size-4 group-hover:dark:text-white`}
+          />
+          <div
+            className="absolute -bottom-px left-1/2 h-full w-0 -translate-x-1/2 rounded-md border-b-2 border-b-blue-600 transition-all duration-200 group-data-[open]:w-[calc(100%+2px)]"
+            style={{ clipPath: "inset(calc(100% - 2px) 0 0 0)" }}
+          ></div>
+        </ListboxButton>
+        <ListboxOptions
+          transition
+          className={`absolute z-10 mt-1 max-h-56 w-max overflow-y-auto overflow-x-hidden rounded-md bg-${theme}-100 dark:bg-${theme}-900 border border-${theme}-200 dark:border-${theme}-700 text-base shadow-lg ring-1 ring-black/5 focus:outline-none data-[closed]:data-[leave]:opacity-0 data-[leave]:transition data-[leave]:duration-100 data-[leave]:ease-in sm:text-sm`}
+        >
+          {items.map((item) => (
+            <ListboxOption
+              key={item}
+              value={item}
+              className={`group relative cursor-pointer text-nowrap py-2 pl-3 pr-9 data-[focus]:outline-none text-${theme}-600 dark:text-${theme}-400 transition-colors duration-200 data-[focus]:bg-black/10 data-[focus]:text-black dark:data-[focus]:bg-white/10 data-[focus]:dark:text-white`}
+            >
+              {item}
+              <span
+                className={`absolute inset-y-0 right-2 flex items-center text-${theme}-600 dark:text-${theme}-400 group-[:not([data-selected])]:hidden group-data-[focus]:text-black group-data-[focus]:dark:text-white`}
+              >
+                <Check aria-hidden="true" className="size-4" />
+              </span>
+            </ListboxOption>
+          ))}
+        </ListboxOptions>
+      </div>
+    </Listbox>
+  );
+}

web/src/types.ts

@@ -47,4 +47,13 @@ interface DigestInfo {
 
 export interface Filters {
   onlyInUse: boolean;
+  registries: string[];
+  statuses: (
+    | "Major update"
+    | "Minor update"
+    | "Patch update"
+    | "Digest update"
+    | "Up to date"
+    | "Unknown"
+  )[];
 }

web/src/utils.ts

@@ -1,6 +1,30 @@
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
+import type { Image } from "./types";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+export function getDescription(image: Image) {
+  switch (image.result.has_update) {
+    case null:
+      return "Unknown";
+    case false:
+      return "Up to date";
+    case true:
+      if (image.result.info?.type === "version") {
+        switch (image.result.info.version_update_type) {
+          case "major":
+            return "Major update";
+          case "minor":
+            return "Minor update";
+          case "patch":
+            return "Patch update";
+        }
+      } else if (image.result.info?.type === "digest") {
+        return "Digest update";
+      }
+      return "Unknown";
+  }
+}

web/tailwind.config.js

@@ -32,14 +32,14 @@ export default {
     },
     {
       pattern: /text-(gray|neutral)-600/,
-      variants: ["*", "dark", "hover", "placeholder"],
+      variants: ["*", "dark", "hover", "placeholder", "data-[placeholder]"],
     },
     {
       pattern: /text-(gray|neutral)-400/,
-      variants: ["*:dark", "dark", "dark:hover", "placeholder:dark"],
+      variants: ["*:dark", "dark", "dark:hover", "placeholder:dark", "data-[placeholder]:dark"],
     },
     {
-      pattern: /text-(gray|neutral)-700/,
+      pattern: /text-(gray|neutral)-(500|700)/,
     },
     {
       pattern: /text-(gray|neutral)-950/,