Allow collapsing of groups

src/FilterItem.svelte

@@ -16,6 +16,8 @@
   let subfiltering = createTriStates(UNCHECKED, Object.entries(children).length);
   let subselected = Array.from({ length: Object.entries(children).length }, _ => []);
 
+  let collapsed = Object.entries(children).length ? false : undefined;
+
   function isVal(val) {
     return function (other) {
       return other === val;
@@ -78,31 +80,39 @@
 
   $: selected =
     $filtering === CHECKED ? [item, ...subselected.flat()] : subselected.flat();
+  $: subHidden = () => (collapsed ? 'd-none' : '');
 </script>
 
 {#if item}
   <div class="ml-1" style="padding-left: {2 * level}em">
-    <TriStateCheckbox state={$filtering} on:change={handleChange} value={item} />
+    <TriStateCheckbox
+      state={$filtering}
+      on:change={handleChange}
+      value={item}
+      bind:collapsed
+    />
   </div>
 
-  {#each Object.entries(children) as [toplevel, subchildren], i}
+  <div class={subHidden()}>
-    {#if subchildren}
+    {#each Object.entries(children) as [toplevel, subchildren], i}
-      <svelte:self
+      {#if subchildren}
-        item={toplevel}
+        <svelte:self
-        children={subchildren}
+          item={toplevel}
-        on:change={handleChildChange(i)}
+          children={subchildren}
-        filtering={subfiltering.storeAt(i)}
+          on:change={handleChildChange(i)}
-        bind:selected={subselected[i]}
+          filtering={subfiltering.storeAt(i)}
-        level={level + 1}
+          bind:selected={subselected[i]}
-      />
+          level={level + 1}
-    {:else}
+        />
-      <svelte:self
+      {:else}
-        item={toplevel}
+        <svelte:self
-        on:change={handleChildChange(i)}
+          item={toplevel}
-        filtering={subfiltering.storeAt(i)}
+          on:change={handleChildChange(i)}
-        bind:selected={subselected[i]}
+          filtering={subfiltering.storeAt(i)}
-        level={level + 1}
+          bind:selected={subselected[i]}
-      />
+          level={level + 1}
-    {/if}
+        />
-  {/each}
+      {/if}
+    {/each}
+  </div>
 {/if}

src/TriStateCheckbox.svelte

@@ -3,6 +3,7 @@
 
   export let state;
   export let value;
+  export let collapsed = undefined;
 
   import { UNCHECKED, CHECKED, WEIRD } from './stores';
   import { createEventDispatcher } from 'svelte';
@@ -18,6 +19,10 @@
     dispatch('change', { value: state });
   }
 
+  function handleCollapse(evt) {
+    collapsed = !collapsed;
+  }
+
   $: icon = () => {
     switch (state) {
       case UNCHECKED:
@@ -28,6 +33,10 @@
         return 'check-square-fill';
     }
   };
+
+  $: colIcon = () => {
+    return collapsed ? 'chevron-expand' : 'chevron-contract';
+  };
 </script>
 
 <span class="cal w-100 d-block" on:click={handleClick}>
@@ -35,6 +44,11 @@
     <Icon name={icon()} />
   </span>
   <span class="ms-1">{value}</span>
+  {#if collapsed !== undefined}
+    <span class="float-end" on:click|stopPropagation={handleCollapse}>
+      <Icon name={colIcon()} />
+    </span>
+  {/if}
 </span>
 
 <style>