feat: add multi-tag filtering with AND logic

Author: onikiienko

src/components/Tags/Tags.tsx

@@ -11,16 +11,39 @@ import { cn } from "@/lib/utils";
 type TagProps = {
   tag: string;
   isActive?: boolean;
+  activeTags?: string[];
 } & Omit<LinkProps, "href"> &
   ComponentPropsWithoutRef<"a">;
 
-export function Tag({ tag, isActive, className, ...props }: TagProps) {
+export function Tag({
+  tag,
+  isActive,
+  activeTags = [],
+  className,
+  ...props
+}: TagProps) {
   const Icon = isActive ? IconRemove : IconTag;
+
+  // Generate URL based on tag state:
+  // - If active: remove this tag from URL
+  // - If inactive: add this tag to existing active tags
+  const remainingTags = isActive
+    ? activeTags.filter((t) => t !== tag)
+    : [...activeTags, tag];
+
+  const searchParams = new URLSearchParams();
+  if (remainingTags.length) {
+    remainingTags.forEach((tag) => {
+      searchParams.append("tag", encodeURIComponent(tag));
+    });
+  }
+  const href = remainingTags.length ? `/?${searchParams.toString()}` : "/";
+
   return (
     <Link
       {...props}
       className={cn(styles.tag, className, isActive && styles.active)}
-      href={isActive ? "/" : `/?tag=${encodeURIComponent(tag)}`}
+      href={href}
     >
       <Icon className={cn(styles.icon)} />
       <span className={styles.label}>{tag}</span>
@@ -30,17 +53,23 @@ export function Tag({ tag, isActive, className, ...props }: TagProps) {
 
 interface TagsProps {
   tags: string[];
-  activeTag?: string;
+  activeTags: string[];
   className?: string;
 }
 
-export function Tags({ tags, activeTag, className }: TagsProps) {
+export function Tags({ tags, activeTags, className }: TagsProps) {
   const label = getLabel("filterByTag");
   return (
     <div className={cn(styles.tags, className)}>
       {!!label && <h3>{label}</h3>}
       {tags.map((tag) => (
-        <Tag key={tag} tag={tag} isActive={activeTag == tag} scroll={false} />
+        <Tag
+          key={tag}
+          tag={tag}
+          isActive={activeTags.includes(tag)}
+          activeTags={activeTags}
+          scroll={false}
+        />
       ))}
     </div>
   );

src/pages/index.tsx

@@ -20,7 +20,7 @@ import { CustomPage } from "@/pages/_app";
 
 const Home: CustomPage = () => {
   const router = useRouter();
-  const tag = router.query.tag as string | undefined;
+  const tagQuery = router.query.tag;
   const appName = getAppName();
   const metaDescription = getLabel("metaDescription");
   const chartConfig = getChartConfig();
@@ -29,9 +29,32 @@ const Home: CustomPage = () => {
   const rings = getRings();
   const quadrants = getQuadrants();
   const tags = getTags();
-  const items = getItems(undefined, true).filter(
-    (item) => !tag || item.tags?.includes(tag),
-  );
+
+  // Parse active tags from URL query parameters
+  const activeTags = Array.isArray(tagQuery)
+    ? tagQuery.map((tag) => decodeURIComponent(tag))
+    : tagQuery
+      ? [decodeURIComponent(tagQuery)]
+      : [];
+
+  // Remove empty tag parameter from URL
+  if (tagQuery === "") {
+    router.replace("/", undefined, { shallow: true });
+  }
+
+  // Filter items based on selected tags
+  const items = getItems(undefined, true).filter((item) => {
+    // Show all items if no tags are selected
+    if (!activeTags.length) return true;
+
+    // Handle potentially undefined tags with a default empty array
+    const itemTags = item.tags ?? [];
+
+    // Show item only if it has all selected tags (AND logic)
+    return (
+      itemTags.length > 0 && activeTags.every((tag) => itemTags.includes(tag))
+    );
+  });
 
   return (
     <>
@@ -65,7 +88,7 @@ const Home: CustomPage = () => {
             return (
               getToggle("showTagFilter") &&
               tags.length > 0 && (
-                <Tags key={section} tags={tags} activeTag={tag} />
+                <Tags key={section} tags={tags} activeTags={activeTags} />
               )
             );
           case "list":