More

frontend/src/components/map/POIPane.tsx

@@ -3,6 +3,8 @@ import { useCollapsibleGroups } from '../../hooks/useCollapsibleGroups';
 import type { POICategoryGroup } from '../../types';
 import InfoPopup from '../ui/InfoPopup';
 import { SearchInput } from '../ui/SearchInput';
+import { PillToggle } from '../ui/PillToggle';
+import { PillGroup } from '../ui/PillGroup';
 import { InfoIcon, ChevronIcon } from '../ui/icons';
 import { IconButton } from '../ui/IconButton';
 
@@ -162,39 +164,32 @@ export default function POIPane({
                 >
                   <ChevronIcon direction="right" className="w-3 h-3" />
                 </button>
-                <label className="flex items-center gap-2 flex-1 cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={allInGroupSelected}
-                    ref={(el) => {
-                      if (el) el.indeterminate = someInGroupSelected;
-                    }}
-                    onChange={() => toggleGroup(group.name)}
-                    className="rounded accent-teal-600"
-                  />
-                  <span className="text-xs font-semibold text-warm-700 dark:text-warm-300">
-                    {group.name}
-                  </span>
-                </label>
-                <span className="text-xs text-warm-400">
+                <PillToggle
+                  label={group.name}
+                  active={allInGroupSelected}
+                  indeterminate={someInGroupSelected}
+                  onClick={() => toggleGroup(group.name)}
+                  size="xs"
+                />
+                <span className="text-xs text-warm-400 ml-auto">
                   {groupSelected}/{group.categories.length}
                 </span>
               </div>
-              {!isCollapsed &&
-                group.categories.map((category) => (
-                  <label
-                    key={category}
-                    className="flex items-center gap-2 px-3 pl-8 py-1.5 hover:bg-warm-50 dark:hover:bg-navy-700 cursor-pointer dark:text-warm-300"
-                  >
-                    <input
-                      type="checkbox"
-                      checked={selectedCategories.has(category)}
-                      onChange={() => toggleCategory(category)}
-                      className="rounded accent-teal-600"
-                    />
-                    <span className="text-sm flex-1">{category}</span>
-                  </label>
-                ))}
+              {!isCollapsed && (
+                <div className="px-3 py-2">
+                  <PillGroup>
+                    {group.categories.map((category) => (
+                      <PillToggle
+                        key={category}
+                        label={category}
+                        active={selectedCategories.has(category)}
+                        onClick={() => toggleCategory(category)}
+                        size="xs"
+                      />
+                    ))}
+                  </PillGroup>
+                </div>
+              )}
             </div>
           );
         })}