add project groups to frontend.

svelte-ui/src/pages/ProjectPage.svelte

@@ -7,7 +7,7 @@
   import type { ModalData } from "../stores/modal";
   import projectStore from "../stores/project";
 
-  const mdProjectAdd: ModalData = {name: "project.add"};
+  const mdProjectAdd: ModalData = {name: "project.add", groupId: null};
   let showInactive = ($projectStore.filter.active === null);
 
   $: {

svelte-ui/src/pages/QLPage.svelte

@@ -1,17 +1,45 @@
 <script lang="ts">
+  import { tick } from "svelte";
+
+  import { navigate } from "svelte-routing";
+
   import QuestLog from "../components/QuestLog.svelte";
   import RefreshSelection from "../components/RefreshSelection.svelte";
-  import projectStore from "../stores/project";
+  import projectGroupStore from "../stores/projectGroup";
+  import { sortProjects } from "../utils/sorters";
+
+  export let groupId = "";
+  export let projectId = "";
 
   $: {
-    if ($projectStore.stale && !$projectStore.loading) {
-      projectStore.load({});
+    if ($projectGroupStore.stale && !$projectGroupStore.loading) {
+      projectGroupStore.load();
+    }
+  }
+
+  $: {
+    if ($projectGroupStore.groups.length > 0 && groupId === "") {
+      const group = $projectGroupStore.groups[0];
+
+      if (group.projects.length > 0) {
+        const projects = [...group.projects].sort(sortProjects);
+
+        navigate(`/questlog/${group.id}/${projects[0].id}`, {replace: true});
+
+        // There's some weirdness with navigate. This hack will just do a 
+        // groups = [...groups] in the sttore to get the page to update.
+        tick().then(() => {
+          projectGroupStore.fakeRefresh();
+        })
+      } else {
+        navigate(`/questlog/${group.id}`);
+      }
     }
   }
 </script>
 
 <div class="page">
-  <QuestLog projects={$projectStore.projects} />
+  <QuestLog groups={$projectGroupStore.groups} groupId={groupId} projectId={projectId} />
 </div>
 <RefreshSelection />