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

<script lang="ts">
  import Boi from "../components/Boi.svelte";
  import GroupEntry from "../components/GroupEntry.svelte";
  import type { ModalData } from "../stores/modal";
  import groupStore from "../stores/group";
  import TableOfContent from "../components/TableOfContent.svelte";
  import RefreshSelection from "../components/RefreshSelection.svelte";

  const mdGroupAdd: ModalData = {name: "group.add"};

  $: {
    if ($groupStore.stale && !$groupStore.loading) {
      groupStore.load();
    }
  }
</script>

<div class="page">
  <TableOfContent groups={$groupStore.groups} />
  {#each $groupStore.groups as group (group.id)}
    <GroupEntry showAllOptions group={group} />
  {/each}
  <Boi open={mdGroupAdd}>Add Group</Boi>
</div>
<RefreshSelection />

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