Better filterbar style

src/App.svelte

@@ -89,6 +89,10 @@
 <div class="fc-toolbar-title" />
 
 <style>
+  :global(.fc-event) {
+    cursor: pointer;
+  }
+
   @media (max-width: 765px) {
     :global(.fc-header-toolbar) {
       flex-direction: column;

src/FilterItem.svelte

@@ -7,12 +7,13 @@
   import { Icon } from 'sveltestrap';
 
   export let item = null;
+  export let level = 1;
 
   export let children = [];
   export let selected = [];
   export let filtering = createTriState(CHECKED);
   let subfiltering = createTriStates(CHECKED, Object.entries(children).length);
-  let subselected = Array.from({ length: Object.entries(children).length }, e => []);
+  let subselected = Array.from({ length: Object.entries(children).length }, _ => []);
 
   function isVal(val) {
     return function (other) {
@@ -67,49 +68,33 @@
     dispatch('change', { value: evt.detail.value });
   }
 
-  $: icon = () => {
-    switch ($filtering) {
-      case UNCHECKED:
-        return 'circle';
-      case WEIRD:
-        return 'circle-half';
-      case CHECKED:
-        return 'check-circle-fill';
-    }
-  };
-
   $: selected =
     $filtering === CHECKED ? [item, ...subselected.flat()] : subselected.flat();
 </script>
 
-{#if item != null}
-  <li>
-    <TriStateCheckbox
-      state={$filtering}
-      on:change={handleChange}
-      value={item}
-      initialValue={true}
-    />
-    <span><Icon name={icon()} />{item}</span>
-    <ul>
-      {#each Object.entries(children) as [toplevel, subchildren], i}
-        {#if subchildren}
-          <svelte:self
-            item={toplevel}
-            children={subchildren}
-            on:change={handleChildChange(i)}
-            filtering={subfiltering.storeAt(i)}
-            bind:selected={subselected[i]}
-          />
-        {:else}
-          <svelte:self
-            item={toplevel}
-            on:change={handleChildChange(i)}
-            filtering={subfiltering.storeAt(i)}
-            bind:selected={subselected[i]}
-          />
-        {/if}
-      {/each}
-    </ul>
-  </li>
+{#if item}
+  <div class="ml-1" style="padding-left: {2 * level}em">
+    <TriStateCheckbox state={$filtering} on:change={handleChange} value={item} />
+  </div>
+
+  {#each Object.entries(children) as [toplevel, subchildren], i}
+    {#if subchildren}
+      <svelte:self
+        item={toplevel}
+        children={subchildren}
+        on:change={handleChildChange(i)}
+        filtering={subfiltering.storeAt(i)}
+        bind:selected={subselected[i]}
+        level={level + 1}
+      />
+    {:else}
+      <svelte:self
+        item={toplevel}
+        on:change={handleChildChange(i)}
+        filtering={subfiltering.storeAt(i)}
+        bind:selected={subselected[i]}
+        level={level + 1}
+      />
+    {/if}
+  {/each}
 {/if}

src/TriStateCheckbox.svelte

@@ -1,5 +1,6 @@
 <script>
-  export let initialValue;
+  import { Icon } from 'sveltestrap';
+
   export let state;
   export let value;
 
@@ -8,30 +9,44 @@
 
   const dispatch = createEventDispatcher();
 
-  let node;
-  let checkedValue = false;
-
-  $: {
-    if (node) {
-      if (state === CHECKED) {
-        checkedValue = true;
-      } else {
-        checkedValue = false;
-      }
-
-      node.indeterminate = state === WEIRD;
-
-    }
-  }
-
-  function handleClick(evt) {
-    if (evt.target.checked) {
-      state = CHECKED;
-    } else if (!evt.target.checked) {
+  function handleClick() {
+    if (state === CHECKED) {
       state = UNCHECKED;
+    } else {
+      state = CHECKED;
     }
     dispatch('change', { value: state });
   }
+
+  $: icon = () => {
+    switch (state) {
+      case UNCHECKED:
+        return 'square';
+      case WEIRD:
+        return 'square-half';
+      case CHECKED:
+        return 'check-square-fill';
+    }
+  };
 </script>
 
-<input type="checkbox" checked={checkedValue} on:click={handleClick} bind:this={node} value={value} />
+<span class="cal w-100 d-block" on:click={handleClick}>
+  <span class="ms-2">
+    <Icon name={icon()} />
+  </span>
+  <span class="ms-1">{value}</span>
+</span>
+
+<style>
+  .cal {
+    cursor: pointer;
+    padding: 0.2em;
+    border-radius: 4px;
+  }
+
+  .cal:hover {
+    /* background-color: #62a1fe; */
+    background-color: #6c757d;
+    color: #fff;
+  }
+</style>