add project tags.

svelte-ui/src/components/ParentEntry.svelte

@@ -92,6 +92,7 @@ import TimeProgress from "./TimeProgress.svelte";
         <TimeProgress startTime={entry.startTime || entry.createdTime} endTime={entry.endTime} />
       {/if}
     {/if}
+    <slot name="above-description"></slot>
     {#if (full)}
       <Markdown source={entry.description} />
     {/if}

svelte-ui/src/components/ProjectEntry.svelte

@@ -12,6 +12,7 @@ import stuffLogClient from "../clients/stufflog";
   import ParentEntry from "./ParentEntry.svelte";
   import ProgressNumbers from "./ProgressNumbers.svelte";
   import StatusColor from "./StatusColor.svelte";
+  import TagList from "./TagList.svelte";
   import TaskList from "./TaskList.svelte";
 
   export let project: ProjectResult = null;
@@ -113,6 +114,9 @@ import stuffLogClient from "../clients/stufflog";
     <div slot="post-seprator">
       <ProgressNumbers project={project} />
     </div>
+    <div slot="above-description">
+      <TagList tags={project.tags} />
+    </div>
     {#if showAllOptions}
       <OptionRow>
         <Option open={mdAddTask}>Add Task</Option>

svelte-ui/src/components/QLListItem.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
-  import type { ProjectResult } from "../models/project";
+  import App from "../App.svelte";
+import type { ProjectResult } from "../models/project";
   import selectionStore from "../stores/selection";
   import DaysLeft from "./DaysLeft.svelte";
   import Icon from "./Icon.svelte";
   import ProjectIcon from "./ProjectIcon.svelte";
   import ProjectProgress from "./ProjectProgress.svelte";
   import StatusColor from "./StatusColor.svelte";
+import Tag from "./Tag.svelte";
   import TimeProgress from "./TimeProgress.svelte";
 
   export let project: ProjectResult;
@@ -30,6 +32,9 @@
     </div>
     <div class="header">
       <div class="name">
+        {#if project.tags.length > 0}
+          <Tag small value={project.tags[0]} />
+        {/if}
         <div class="content">{project.name}</div>
         {#if project.endTime}
           <div class="times">

svelte-ui/src/components/Tag.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  export let value = "";
+  export let small = false;
+
+  let style = "";
+
+  $: {
+    let hash = 0;
+    for (let i = 0; i < value.length; i++) {
+        hash = value.charCodeAt(i) + ((hash << 5) - hash);
+        hash = hash & hash;
+    }
+
+    console.log(value, hash);
+    
+    style = `color: hsl(${(hash << 4) % 360}, ${40 + (hash % 8)}%, ${50+(hash % 4)}%)`
+  }
+</script>
+
+<div style={style} class="tag" class:small>{value}</div>
+
+<style>
+  div.tag {
+    padding: 0.25em 0.75ch;
+    margin: 0.25em 0.5ch;
+    font-size: 0.75em;
+    border: 1px solid;
+  }
+
+  div.tag.small {
+    padding: 0em 0.5ch;
+  }
+</style>

svelte-ui/src/components/TagList.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import Tag from "./Tag.svelte";
+
+  export let tags: string[] = [];
+</script>
+
+<div class="tag-list">
+  {#each tags as tag (tag)}
+    <Tag value={tag} />
+  {/each}
+</div>
+
+<style>
+  div.tag-list {
+    display: flex;
+    margin-top: 0.15em;
+  }
+</style>