stufflog2/svelte-ui/src/pages/ProjectPage.svelte

<script lang="ts">
  import Boi from "../components/Boi.svelte";
  import Checkbox from "../components/Checkbox.svelte";
  import ProjectEntry from "../components/ProjectEntry.svelte";
  import RefreshSelection from "../components/RefreshSelection.svelte";
  import TableOfContent from "../components/TableOfContent.svelte";
  import type { ModalData } from "../stores/modal";
  import projectStore from "../stores/project";

  const mdProjectAdd: ModalData = {name: "project.add", groupId: null};
  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: showInactive ? null : true,
      });
    }
  }
</script>

<div class="page">
  <div class="options">
    <Checkbox centered bind:checked={showInactive} label="Show completed tasks and projects." />
  </div>
  <TableOfContent hideInactive={!showInactive} projects={$projectStore.projects} />
  {#each $projectStore.projects as project (project.id)}
    <ProjectEntry hideInactive={!showInactive} showAllOptions project={project} />
  {/each}
  <Boi open={mdProjectAdd}>Add Project</Boi>
</div>
<RefreshSelection />

<style>
  div.page {
    display: block;
    margin: auto;
    max-width: 100%;
    width: 640px;
    margin-top: 0;
    box-sizing: border-box;
  }

  div.options {
    display: flex;
    margin: 1em auto;
  }
</style>