add support for project inactivity, added new checkbox component.

svelte-ui/src/pages/ProjectPage.svelte

@@ -1,21 +1,35 @@
 <script lang="ts">
   import Boi from "../components/Boi.svelte";
+  import Checkbox from "../components/Checkbox.svelte";
   import ProjectEntry from "../components/ProjectEntry.svelte";
   import type { ModalData } from "../stores/modal";
   import projectStore from "../stores/project";
 
   const mdProjectAdd: ModalData = {name: "project.add"};
+  let showInactive = ($projectStore.filter.active === null);
+
+  $: {
+    if (showInactive && $projectStore.filter.active === true) {
+      projectStore.markStale();
+    } 
+    if (!showInactive && $projectStore.filter.active == null) {
+      projectStore.markStale();
+    }
+  }
 
   $: {
     if ($projectStore.stale && !$projectStore.loading) {
       projectStore.load({
-        active: true,
+        active: showInactive ? null : true,
       });
     }
   }
 </script>
 
 <div class="page">
+  <div class="options">
+    <Checkbox centered bind:checked={showInactive} label="Show inactive projects." />
+  </div>
   {#each $projectStore.projects as project (project.id)}
     <ProjectEntry showAllOptions project={project} />
   {/each}
@@ -31,4 +45,9 @@
     margin-top: 0;
     box-sizing: border-box;
   }
+
+  div.options {
+    display: flex;
+    margin: 1em auto;
+  }
 </style>