add times left indicator to questlog.

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>