add times left indicator to questlog.

svelte-ui/src/components/DaysLeft.svelte

@@ -3,6 +3,7 @@
 
   export let startTime: Date | string = new Date();
   export let endTime: Date | string = new Date();
+  export let compact: boolean = false;
 
   let started = false;
   let overdue = false;
@@ -61,6 +62,10 @@
       amountStr = amount.toString()
     }
 
+    if (compact) {
+      unit = unit.slice(0, 1);
+    }
+
     titleTimeStr = `${formatTime(new Date(startTime))} – ${formatTime(new Date(endTime))}`
   }
 </script>
@@ -68,15 +73,19 @@
 <EveryMinute bind:now={now} />
 <span title={titleTimeStr}>
   {#if (overdue)}
-    <span class="overdue">{amountStr} {unit} ago</span>
+    <span class="overdue">{amountStr}{compact ? "" : " "}{unit} {!compact ? "ago" : ""}</span>
   {:else if (started)}
-    <span class:danger class="started">{amountStr} {unit} left</span>
+    <span class:danger class="started">{amountStr}{compact ? "" : " "}{unit} {!compact ? "left" : ""}</span>
   {:else}
-    <span class="pending">In {amountStr} {unit}</span>
+    <span class="pending">In {amountStr}{compact ? "" : " "}{unit}</span>
   {/if}
 </span>
 
 <style>
+  span {
+    color: #ccc;
+  }
+
   span.pending {
     color: #2797e2;
   }

svelte-ui/src/components/QLListItem.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { ProjectResult } from "../models/project";
   import selectionStore from "../stores/selection";
+  import DaysLeft from "./DaysLeft.svelte";
   import Icon from "./Icon.svelte";
   import ProjectProgress from "./ProjectProgress.svelte";
 
@@ -23,7 +24,14 @@
     <Icon block name={project.icon} />
   </div>
   <div class="header">
-    <div class="name">{project.name}</div>
+    <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} />
   </div>
 </div>
@@ -74,4 +82,13 @@
     flex-shrink: 0;
     padding-right: 0.5ch;
   }
+
+  div.name {
+    display: flex;
+    flex-direction: row;
+  }
+
+  div.name > div.times {
+    margin-left: auto;
+  }
 </style>