add favorite system and other small tweaks and fixes.

svelte-ui/src/components/Boi.svelte

@@ -6,6 +6,7 @@
   export let open: ModalData = {name: "none"};
   export let disabled: boolean = false;
   export let compact: boolean = false;
+  export let compacter: boolean = false;
   export let tiny: boolean = false;
 
   const dispatch = createEventDispatcher();
@@ -19,7 +20,7 @@
   }
 </script>
 
-<div class="boi" class:disabled class:compact class:tiny on:click={handleClick}><slot></slot></div>
+<div class="boi" class:disabled class:compact class:compacter class:tiny on:click={handleClick}><slot></slot></div>
 
 <style>
   div.boi {
@@ -52,6 +53,13 @@
     padding: 0.25em;
   }
 
+  div.boi.compacter {
+    font-size: 1em;
+    margin: 0 1ch;
+    border-width: 3px;
+    padding: 0.25em;
+  }
+
   div.boi.tiny {
     display: inline-block;
     margin: auto;

svelte-ui/src/components/DateRangeSelect.svelte

@@ -12,7 +12,7 @@ import EveryMinute from "./EveryMinute.svelte";
 
   export let fromValue: string;
   export let toValue: string;
-  export let disabled: boolean;
+  export let disabled: boolean = false;
   export let styled: boolean;
   export let noFuture: boolean;
   export let label: string = "Time Period";
@@ -23,8 +23,11 @@ import EveryMinute from "./EveryMinute.svelte";
 
   onMount(() => {
     for (const option of options) {
+      console.log(formatFormTime(option.from), fromValue, formatFormTime(option.to), toValue);
       if (formatFormTime(option.from) === fromValue && formatFormTime(option.to) === toValue) {
         selected = option.id;
+        console.log("-- SELECTED")
+        break;
       }
     }
   });

svelte-ui/src/components/FocusHandler.svelte

@@ -2,6 +2,7 @@
   import { onMount } from "svelte";
   import goalStore, { fpGoalStore } from "../stores/goal";
   import logStore from "../stores/logs";
+import markStale from "../stores/markStale";
   import projectStore, { fpProjectStore } from "../stores/project";
 
   let lastFocus = new Date();
@@ -13,11 +14,7 @@
 
     lastFocus = new Date();
 
-    goalStore.markStale();
-    fpGoalStore.markStale();
-    projectStore.markStale();
-    fpProjectStore.markStale();
-    logStore.markStale();
+    markStale("*");
   }
 
   onMount(() => {

svelte-ui/src/components/ParentEntry.svelte

@@ -72,6 +72,7 @@ import TimeProgress from "./TimeProgress.svelte";
           {entry.name}
         {/if}
       </div>
+      <slot name="pre-annotation"></slot>
       {#each annotations as annotation (annotation)}
         <div class="annotation">
           <Icon block name={annotation} />

svelte-ui/src/components/ProjectEntry.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
+import stuffLogClient from "../clients/stufflog";
+
   import type { ProjectResult } from "../models/project";
   import type { TaskResult } from "../models/task";
+import markStale from "../stores/markStale";
   import type { ModalData } from "../stores/modal";
   import IS_MOBILE from "../utils/phone-check";
+  import Icon from "./Icon.svelte";
   import Option from "./Option.svelte";
   import OptionRow from "./OptionRow.svelte";
   import ParentEntry from "./ParentEntry.svelte";
@@ -29,6 +33,24 @@
   let onholdTasks: TaskResult[] = [];
   let failedTasks: TaskResult[] = [];
   let nonHiddenTasks: TaskResult[] = [];
+  let toggling = false;
+
+  function toggleFavorite() {
+    if (toggling) {
+      return
+    }
+    toggling = true
+
+    stuffLogClient.updateProject(project.id, {
+      favorite: !project.favorite,
+    }).then(() => {
+      markStale("project");
+    }).catch(err => {
+      console.warn("Failed to toggle favorite:", err);
+    }).finally(() => {
+      toggling = false;
+    })
+  }
 
   $: mdAddTask = {name:"task.add", project};
   $: mdProjectEdit = {name:"project.edit", project};
@@ -58,8 +80,12 @@
     hideIcon={hideIcon}
     showTimeProgress={!hideProgress}
     removeHook={removeHook}
-    annotations={isFake ? ["list"] : []}
   >
+    <div slot="pre-annotation" class="favorite" class:enabled={project.favorite} class:toggling on:click={toggleFavorite}>
+      {#if !isFake}
+        <Icon block name="star" />
+      {/if}
+    </div>
     {#if showAllOptions}
       <OptionRow>
         <Option open={mdAddTask}>Add Task</Option>
@@ -78,3 +104,21 @@
     {/if}
   </ParentEntry>
 </StatusColor>
+
+<style>
+  div.favorite {
+    margin: auto 0;
+    padding: 0 0.5ch;
+    line-height: 0em;
+    color: #333;
+    cursor: pointer;
+  }
+
+  div.favorite.enabled {
+    color: #e7e55e
+  }
+
+  div.favorite.toggling {
+    opacity: 0.5;
+  }
+</style>

svelte-ui/src/components/ProjectSelect.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-  import { group } from "console";
-import type Project from "../models/project";
-import authStore from "../stores/auth";
+  import type Project from "../models/project";
   import projectStore from "../stores/project";
 
   interface OptGroup {

svelte-ui/src/components/QuestLog.svelte

@@ -7,8 +7,12 @@
   import selectionStore from "../stores/selection";
   import ProjectEntry from "./ProjectEntry.svelte";
   import QlList from "./QLList.svelte";
+  import Boi from "../components/Boi.svelte";
+  import type { ModalData } from "../stores/modal";
 
   export let projects: ProjectResult[];
+  
+  const mdProjectAdd: ModalData = {name: "project.add"};
 
   let expiringProjects: ProjectResult[];
   let activeProjects: ProjectResult[];
@@ -53,6 +57,7 @@
 
 <div class="quest-log">
   <div class="list">
+    <Boi compacter open={mdProjectAdd}>Add Project</Boi>
     <QlList label="Deadlines" projects={expiringProjects} />
     <QlList label="Active" projects={activeProjects} />
     <QlList label="To Do" projects={ideaProjects} />