Subcategories: all selected by default, cleaner UI

- 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>
This commit is contained in:
SocioWire 2026-01-11 06:15:39 +00:00
parent b0ccd024b9
commit 52d4d36727
2 changed files with 12 additions and 3 deletions

View File

@ -181,6 +181,12 @@
--color: #3b82f6; --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 { @keyframes fab-pop-in {
from { from {
opacity: 0; opacity: 0;

View File

@ -135,17 +135,20 @@ export default function RadialMenu({
</button> </button>
{/* Subcategories - appear around the category when active */} {/* Subcategories - appear around the category when active */}
{/* Logic: empty = all selected, clicking toggles exclusion */}
{isActive && leftOpen && subcats.map((sub, si) => { {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 subRad = (subAngle * Math.PI) / 180;
const subX = x + Math.cos(subRad) * subRadius; const subX = x + Math.cos(subRad) * subRadius;
const subY = y + Math.sin(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 ( return (
<button <button
key={`${cat.id}-${sub.id}`} key={`${cat.id}-${sub.id}`}
className={`fab-item fab-sub ${isSubActive ? "is-active" : ""}`} className={`fab-item fab-sub ${isSubActive ? "is-active" : "is-excluded"}`}
style={{ style={{
"--x": `${subX}px`, "--x": `${subX}px`,
"--y": `${subY}px`, "--y": `${subY}px`,