From 52d4d36727639516ae6219dc1531b10e68684b8a Mon Sep 17 00:00:00 2001
From: SocioWire <admin@sociowire.com>
Date: Sun, 11 Jan 2026 06:15:39 +0000
Subject: [PATCH] Subcategories: all selected by default, cleaner UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Inverted subcategory logic: empty = all active
- Click to exclude/filter out subcategories
- Excluded items shown dimmed/smaller

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/Map/RadialMenu.css | 6 ++++++
 src/components/Map/RadialMenu.jsx | 9 ++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/Map/RadialMenu.css b/src/components/Map/RadialMenu.css
index 76e5da1..283b738 100644
--- a/src/components/Map/RadialMenu.css
+++ b/src/components/Map/RadialMenu.css
@@ -181,6 +181,12 @@
   --color: #3b82f6;
 }
 
+.fab-sub.is-excluded {
+  opacity: 0.35;
+  filter: grayscale(0.8);
+  transform: translate(var(--x), var(--y)) scale(0.85);
+}
+
 @keyframes fab-pop-in {
   from {
     opacity: 0;
diff --git a/src/components/Map/RadialMenu.jsx b/src/components/Map/RadialMenu.jsx
index e60a679..60b7246 100644
--- a/src/components/Map/RadialMenu.jsx
+++ b/src/components/Map/RadialMenu.jsx
@@ -135,17 +135,20 @@ export default function RadialMenu({
                 </button>
 
                 {/* Subcategories - appear around the category when active */}
+                {/* Logic: empty = all selected, clicking toggles exclusion */}
                 {isActive && leftOpen && subcats.map((sub, si) => {
-                  const subAngle = angle - 25 + (si * 38); // More spacing
+                  const subAngle = angle - 25 + (si * 38);
                   const subRad = (subAngle * Math.PI) / 180;
                   const subX = x + Math.cos(subRad) * subRadius;
                   const subY = y + Math.sin(subRad) * subRadius;
-                  const isSubActive = activeSubcategories.includes(`${cat.id}:${sub.id}`);
+                  // Inverted logic: active if NOT in excluded list, or if list is empty
+                  const catSubs = activeSubcategories.filter(s => s.startsWith(cat.id + ":"));
+                  const isSubActive = catSubs.length === 0 || activeSubcategories.includes(`${cat.id}:${sub.id}`);
 
                   return (
                     <button
                       key={`${cat.id}-${sub.id}`}
-                      className={`fab-item fab-sub ${isSubActive ? "is-active" : ""}`}
+                      className={`fab-item fab-sub ${isSubActive ? "is-active" : "is-excluded"}`}
                       style={{
                         "--x": `${subX}px`,
                         "--y": `${subY}px`,