Improve individual tasks on the front page, compact icon selector, and add annotaions.

svelte-ui/src/pages/FrontPage.svelte

@@ -5,10 +5,11 @@
   import RefreshSelection from "../components/RefreshSelection.svelte";
   import type { ProjectResult } from "../models/project";
   import { fpGoalStore } from "../stores/goal";
-  import { fpProjectStore } from "../stores/project";
+  import projectStore, { fpProjectStore } from "../stores/project";
   import { fpTaskStore } from "../stores/tasks";
 
-  let fakeProject: ProjectResult
+  let fakeMap: {[projectId: string]: boolean} = {}
+  let fakeProjects: ProjectResult[]
   let sortedProjects: ProjectResult[]
 
   $: {
@@ -39,27 +40,38 @@
   }
 
   $: {
-    fakeProject = {
-      id: "P_fakeProject",
-      active: true,
-      createdTime: "1970-01-01T00:00:00Z",
-      description: "",
-      icon: "list",
-      name: "Individual Tasks",
-      tasks: $fpTaskStore.tasks.filter(t => $fpProjectStore.projects.find(p => p.id === t.id) == null)
-        .sort((a,b) => Date.parse(a.endTime) - Date.parse(b.endTime)),
-      endTime: null,
+    const individualTasks = $fpTaskStore.tasks
+      .filter(t => $fpProjectStore.projects.find(p => p.id === t.projectId) == null)
+      .sort((a,b) => Date.parse(a.endTime) - Date.parse(b.endTime));
+    
+    fakeProjects = [];
+    fakeMap = {};
+    for (let task of individualTasks) {
+      if (!task.project.active) {
+        continue;
+      }
+
+      let fakeProject = fakeProjects.find(p => p.id === task.id);
+      if (fakeProject == null) {
+        fakeMap[task.projectId] = true;
+        fakeProjects.push({
+          ...task.project,
+          tasks: [task],
+        });
+      } else {
+        fakeProject.tasks.push(task);
+      }
     }
 
-    if (fakeProject.tasks.length > 0) {
+    for (const fakeProject of fakeProjects) {
       fakeProject.createdTime = fakeProject.tasks.map(t => t.createdTime).sort()[0];
       fakeProject.endTime = fakeProject.tasks[0].endTime;
     }
   }
 
   $: {
-    const projects = fakeProject.tasks.length > 0 ? [...$fpProjectStore.projects, fakeProject] : [...$fpProjectStore.projects];
-    sortedProjects = projects.sort((a,b) => Date.parse(a.endTime) - Date.parse(b.endTime));
+    sortedProjects = [...fakeProjects, ...$fpProjectStore.projects]
+      .sort((a,b) => Date.parse(a.endTime) - Date.parse(b.endTime));
   }
 </script>
 
@@ -80,9 +92,9 @@
       <h1>Upcoming Deadlines</h1>
     {/if}
     {#each sortedProjects as project (project.id)}
-      <ProjectEntry linkProject={project != fakeProject} hideInactive project={project} />
+      <ProjectEntry isFake={fakeMap[project.id]} linkProject hideInactive project={project} />
     {/each}
-    {#if fakeProject.tasks.length === 0 && !$fpProjectStore.loading && $fpProjectStore.projects.length === 0}
+    {#if !$fpProjectStore.loading && $fpProjectStore.projects.length === 0}
       <EmptyList icon="check" text="All good!" />
     {/if}
   </div>