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

svelte-ui/src/components/GoalEntry.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
+  import type { IconName } from "../external/icons";
   import type { GoalResult } from "../models/goal";
   import type { ModalData } from "../stores/modal";
-import Composition from "./Composition.svelte";
-  import EveryMinute from "./EveryMinute.svelte";
+  import Composition from "./Composition.svelte";
   import Option from "./Option.svelte";
   import OptionRow from "./OptionRow.svelte";
   import ParentEntry from "./ParentEntry.svelte";
   import Progress from "./Progress.svelte";
-import TimeProgress from "./TimeProgress.svelte";
+  import TimeProgress from "./TimeProgress.svelte";
 
   export let goal: GoalResult = null;
   export let showAllOptions = false;
@@ -15,15 +15,29 @@ import TimeProgress from "./TimeProgress.svelte";
 
   let mdGoalEdit: ModalData;
   let mdGoalDelete: ModalData;
+  let annotations: IconName[];
 
   $: mdGoalEdit = {name:"goal.edit", goal};
   $: mdGoalDelete = {name:"goal.delete", goal};
+  $: {
+    annotations = [];
+    if (goal.unweighted) {
+      annotations.push("balance_scale")
+    }
+    if (goal.taskFilter) {
+      annotations.push("filter")
+    }
+    if (goal.itemFilter) {
+      annotations.push("filter")
+    }
+  }
 </script>
 
 <ParentEntry
   full={showAllOptions} 
   entry={goal} 
   headerLink={linkGoal ? "/goals#"+goal.id : ""}
+  annotations={annotations}
 >
   {#if showAllOptions}
     <OptionRow>

svelte-ui/src/components/IconSelect.svelte

@@ -1,18 +1,34 @@
 <script lang="ts">
+  import { commonIcons, uncommonIcons } from "../external/icons";
   import type { IconName } from "../external/icons";
-  import { iconNames } from "../external/icons";
   import Icon from "./Icon.svelte";
 
   export let value: IconName;
   export let disabled: boolean;
+
+  let showAll = !commonIcons.includes(value);
+
+  function toggleShowAll() {
+    showAll = !showAll;
+  }
 </script>
 
 <div class:disabled class="icon-select">
-  {#each iconNames as iconName (iconName)}
-    <div class="icon-item" class:selected={value===iconName} on:click={() => {if (!disabled) { value = iconName }}}>
+  {#each commonIcons as iconName (iconName)}
+    <div class="icon-item common" class:selected={value===iconName} on:click={() => {if (!disabled) { value = iconName }}}>
       <Icon name={iconName} />
     </div>
   {/each}
+  <div class="show-all" on:click={toggleShowAll}>
+    { showAll ? "Hide uncommon icons" : "Show uncommon icons" }
+  </div>
+  {#if showAll}
+    {#each uncommonIcons as iconName (iconName)}
+      <div class="icon-item" class:selected={value===iconName} on:click={() => {if (!disabled) { value = iconName }}}>
+        <Icon name={iconName} />
+      </div>
+    {/each}
+  {/if}
 </div>
 
 <style>
@@ -37,6 +53,9 @@ div.icon-item {
 
   cursor: pointer;
 }
+div.icon-item.uncommon {
+  color: #888;
+}
 div.icon-item:hover {
   background-color: #292929;
 }
@@ -53,4 +72,15 @@ div.icon-select.disabled > div.icon-item {
 div.icon-select.disabled > div.icon-item.selected {
   background-color: #555;
 }
+
+div.show-all {
+  color: #777;
+  cursor: pointer;
+  text-align: center;
+  padding: 0.25em 0;
+}
+div.show-all:hover {
+  color: #ccc;
+  background-color: #2c2c2c;
+}
 </style>

svelte-ui/src/components/ParentEntry.svelte

@@ -34,6 +34,7 @@ import TimeProgress from "./TimeProgress.svelte";
   export let hideProgress: boolean = false;
   export let hideIcon: boolean = false;
   export let showTimeProgress: boolean = false;
+  export let annotations: IconName[] = [];
 
   let iconName: IconName;
 
@@ -68,6 +69,11 @@ import TimeProgress from "./TimeProgress.svelte";
           {entry.name}
         {/if}
       </div>
+      {#each annotations as annotation (annotation)}
+        <div class="annotation">
+          <Icon block name={annotation} />
+        </div>
+      {/each}
       {#if entry.endTime != null}
         <div class="days-left">
           <DaysLeft startTime={entry.startTime || entry.createdTime} endTime={entry.endTime} />
@@ -122,6 +128,15 @@ import TimeProgress from "./TimeProgress.svelte";
     vertical-align: middle;
     font-weight: 100;
   }
+  div.annotation {
+    margin: auto 0;
+    padding: 0 0.5ch;
+    line-height: 0em;
+    color: #333;
+  }
+  div.annotation + div.annotation {
+    padding-left: 0;
+  }
   div.days-left {
     margin-left: auto; 
     margin-right: 0.25ch;

svelte-ui/src/components/ProjectEntry.svelte

@@ -14,6 +14,7 @@
   export let hideProgress: boolean = false;
   export let linkProject: boolean = false;
   export let hideIcon: boolean = false;
+  export let isFake: boolean = false;
 
   let mdAddTask: ModalData;
   let mdProjectEdit: ModalData;
@@ -58,6 +59,7 @@
     hideProgress={hideProgress}
     hideIcon={hideIcon}
     showTimeProgress={!hideProgress}
+    annotations={isFake ? ["list"] : []}
   >
     {#if showAllOptions}
       <OptionRow>

svelte-ui/src/components/QuestLog.svelte

@@ -11,7 +11,7 @@
   let inactiveProjects: ProjectResult[];
   let completedProjects: ProjectResult[];
   let failedProjects: ProjectResult[];
-  let posponedProjects: ProjectResult[];
+  let onholdProjects: ProjectResult[];
   let ideaProjects: ProjectResult[];
   let project: ProjectResult = null;
 
@@ -21,7 +21,7 @@
   $: inactiveProjects = projects.filter(p => !p.active).sort((a,b) => a.name.localeCompare(b.name));
   $: completedProjects = inactiveProjects.filter(p => p.statusTag === "completed" || p.statusTag == null);
   $: failedProjects = inactiveProjects.filter(p => p.statusTag === "failed" || p.statusTag === "declined");
-  $: postponedProjects = inactiveProjects.filter(p => p.statusTag === "on hold" || p.statusTag === "postponed");
+  $: onholdProjects = inactiveProjects.filter(p => p.statusTag === "on hold" || p.statusTag === "onhold");
   $: ideaProjects = inactiveProjects.filter(p => p.statusTag === "to do" || p.statusTag === "idea");
 
   $: {
@@ -39,7 +39,7 @@
     <QlList label="Deadlines" projects={expiringProjects} />
     <QlList label="Active" projects={activeProjects} />
     <QlList label="To Do" projects={ideaProjects} />
-    <QlList label="On Hold" projects={postponedProjects} />
+    <QlList label="On Hold" projects={onholdProjects} />
     <QlList label="Completed" projects={completedProjects} />
     <QlList label="Failed" projects={failedProjects} />
   </div>