add multiple statuses to proejcts, though it's a bit hacked on.

svelte-ui/src/components/QLListItem.svelte

@@ -3,8 +3,10 @@
   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 TimeProgress from "./TimeProgress.svelte";
+  import StatusColor from "./StatusColor.svelte";
+  import TimeProgress from "./TimeProgress.svelte";
 
   export let project: ProjectResult;
 
@@ -20,25 +22,27 @@ import TimeProgress from "./TimeProgress.svelte";
   $: completed = !project.active;
 </script>
 
-<div class="ql-list-item" on:click={handleClick} class:selected>
-  <div class="icon" class:completed>
-    <Icon block name={project.icon} />
-  </div>
-  <div class="header">
-    <div class="name">
-      <div class="content">{project.name}</div>
+<StatusColor project={project} selected={selected}>
+  <div class="ql-list-item" on:click={handleClick} class:selected>
+    <div class="icon sccfg" class:completed>
+      <Icon block name={project.icon} />
+    </div>
+    <div class="header">
+      <div class="name">
+        <div class="content">{project.name}</div>
+        {#if project.endTime}
+          <div class="times">
+            <DaysLeft compact startTime={project.createdTime} endTime={project.endTime} />
+          </div>
+        {/if}
+      </div>
+      <ProjectProgress project={project} />
       {#if project.endTime}
-        <div class="times">
-          <DaysLeft compact startTime={project.createdTime} endTime={project.endTime} />
-        </div>
+        <TimeProgress startTime={project.createdTime} endTime={project.endTime} />
       {/if}
     </div>
-    <ProjectProgress project={project} />
-    {#if project.endTime}
-      <TimeProgress startTime={project.createdTime} endTime={project.endTime} />
-    {/if}
   </div>
-</div>
+</StatusColor>
 
 <style>
   div.ql-list-item {
@@ -54,33 +58,22 @@ import TimeProgress from "./TimeProgress.svelte";
     cursor: pointer;
   }
   div.ql-list-item:hover {
-    color: #ccc;
     background-color: #191919;
   }
-
   div.ql-list-item.selected {
     background-color: #222;
+    color: #aaa;
+  }
+  div.ql-list-item:hover {
+    color: #ccc;
   }
 
-  div.icon {
-    color: #444;
 
+  div.icon {
     padding: 0.3em 0.5ch;
     padding-right: 1ch;
     padding-top: 0.4em;
   }
-  div.ql-list-item.selected div.icon {
-    color: #666;
-  }
-  div.icon.completed {
-    color: #484;
-  }
-  div.ql-list-item.selected div.icon.completed {
-    color: #78ff78;
-  }
-  div.ql-list-item:hover div.icon {
-    color: #ccc;
-  }
 
   div.header {
     flex-grow: 1;