From bac48a448611fd767c258e6ee9855cbb17e60418 Mon Sep 17 00:00:00 2001
From: enes <enes@nostrdev.com>
Date: Wed, 11 Dec 2024 16:26:16 +0100
Subject: [PATCH] feat(category): indeterminate state, parent marking

---
 .../Filters/CategoryFilterPopup.tsx           | 57 ++++++++++---------
 src/styles/styles.css                         |  9 +++
 2 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/src/components/Filters/CategoryFilterPopup.tsx b/src/components/Filters/CategoryFilterPopup.tsx
index d7c3840..a3da21e 100644
--- a/src/components/Filters/CategoryFilterPopup.tsx
+++ b/src/components/Filters/CategoryFilterPopup.tsx
@@ -348,28 +348,35 @@ const CategoryCheckbox: React.FC<CategoryCheckboxProps> = ({
     const pathString = path.join(':')
     setIsSingleChecked(selectedSingles.includes(name))
     setIsCombinationChecked(selectedCombinations.includes(pathString))
-
-    const childPaths =
-      category.sub && Array.isArray(category.sub)
-        ? category.sub.map((sub) =>
-            typeof sub === 'string'
-              ? [...path, sub].join(':')
-              : [...path, sub.name].join(':')
-          )
-        : []
+    // Recursive function to gather all descendant paths
+    const collectChildPaths = (
+      category: string | Category,
+      basePath: string[]
+    ) => {
+      if (!category.sub || !Array.isArray(category.sub)) {
+        return []
+      }
+      let paths: string[] = []
+      for (const sub of category.sub) {
+        const subPath =
+          typeof sub === 'string'
+            ? [...basePath, sub].join(':')
+            : [...basePath, sub.name].join(':')
+        paths.push(subPath)
+        if (typeof sub === 'object') {
+          paths = paths.concat(collectChildPaths(sub, [...basePath, sub.name]))
+        }
+      }
+      return paths
+    }
+    const childPaths = collectChildPaths(category, path)
     const anyChildCombinationSelected = childPaths.some((childPath) =>
       selectedCombinations.includes(childPath)
     )
-
-    if (
-      anyChildCombinationSelected &&
-      !selectedCombinations.includes(pathString)
-    ) {
-      setIsIndeterminate(true)
-    } else {
-      setIsIndeterminate(false)
-    }
-  }, [selectedSingles, selectedCombinations, path, name, category.sub])
+    setIsIndeterminate(
+      anyChildCombinationSelected && !selectedCombinations.includes(pathString)
+    )
+  }, [category, name, path, selectedCombinations, selectedSingles])
 
   const handleSingleChange = () => {
     setIsSingleChecked(!isSingleChecked)
@@ -407,17 +414,13 @@ const CategoryCheckbox: React.FC<CategoryCheckboxProps> = ({
                   input.indeterminate = isIndeterminate
                 }
               }}
-              className='CheckboxMain'
+              className={`CheckboxMain  ${
+                isIndeterminate ? 'CheckboxIndeterminate' : ''
+              }`}
               checked={isCombinationChecked}
               onChange={handleCombinationChange}
             />
-            <label
-              htmlFor={name}
-              className='form-label labelMain'
-              style={{
-                color: isIndeterminate ? 'green' : 'white'
-              }}
-            >
+            <label htmlFor={name} className='form-label labelMain'>
               {capitalizeEachWord(name)}
             </label>
             <input
diff --git a/src/styles/styles.css b/src/styles/styles.css
index 0aa7209..1bcf19e 100644
--- a/src/styles/styles.css
+++ b/src/styles/styles.css
@@ -530,6 +530,15 @@ h6 {
   align-items: center;
 }
 
+.CheckboxMain.CheckboxIndeterminate::before {
+  content: '\2501';
+  transition: ease 0.2s;
+  transform: scale(1);
+  background: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 0 8px 0 rgb(0, 0, 0, 0.1);
+  border-radius: 6px;
+}
+
 .CheckboxMain:checked::before {
   transition: ease 0.2s;
   transform: scale(1);