add empty list placeholder.

svelte-ui/src/components/EmptyList.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { IconName } from "../external/icons";
+  import Icon from "./Icon.svelte";
+
+  export let icon: IconName = "moon";
+  export let text: string = "All good!";
+</script>
+
+<div class="empty-list">
+  <div class="icon">
+    <Icon name={icon} />
+  </div>
+  <div class="text">
+    {text}
+  </div>
+</div>
+
+<style>
+  div.empty-list {
+    font-size: 2em;
+    text-align: center;
+    color: #555;
+    padding: 2em 0;
+  }
+
+  div.icon {
+    font-size: 3em;
+  }
+</style>

svelte-ui/src/external/icons.ts

@@ -62,6 +62,14 @@ import { faHome } from "@fortawesome/free-solid-svg-icons/faHome";
 import { faIgloo } from "@fortawesome/free-solid-svg-icons/faIgloo";
 import { faWarehouse } from "@fortawesome/free-solid-svg-icons/faWarehouse";
 import { faToiletPaperSlash } from "@fortawesome/free-solid-svg-icons/faToiletPaperSlash";
+import { faDumpsterFire } from "@fortawesome/free-solid-svg-icons/faDumpsterFire";
+import { faHandPeace } from "@fortawesome/free-solid-svg-icons/faHandPeace";
+import { faList } from "@fortawesome/free-solid-svg-icons/faList";
+import { faListAlt } from "@fortawesome/free-solid-svg-icons/faListAlt";
+import { faThList } from "@fortawesome/free-solid-svg-icons/faThList";
+import { faBars } from "@fortawesome/free-solid-svg-icons/faBars";
+import { faMoon } from "@fortawesome/free-solid-svg-icons/faMoon";
+import { faCloudMoon } from "@fortawesome/free-solid-svg-icons/faCloudMoon";
 
 const icons = {
   "question": faQuestion,
@@ -128,6 +136,14 @@ const icons = {
   "igloo": faIgloo,
   "warehouse": faWarehouse,
   "toilet_paper_slash": faToiletPaperSlash,
+  "dumpster_fire": faDumpsterFire,
+  "hand_peace": faHandPeace,
+  "list": faList,
+  "list_alt": faListAlt,
+  "th_list": faThList,
+  "bars": faBars,
+  "moon": faMoon,
+  "cloud_moon": faCloudMoon,
 };
 
 export type IconName = keyof typeof icons;

svelte-ui/src/forms/TaskAddForm.svelte

@@ -58,7 +58,7 @@
     <input name="name" type="text" bind:value={name} />
     <label for="description">Description</label>
     <textarea name="description" bind:value={description} />
-    <label for="itemId">Item {itemId}</label>
+    <label for="itemId">Item</label>
     <ItemSelect name="itemId" bind:value={itemId} />
     <label for="itemAmount">Amount</label>
     <input name="itemAmount" type="number" bind:value={itemAmount} />

svelte-ui/src/pages/FrontPage.svelte

@@ -1,4 +1,5 @@
 <script>
+  import EmptyList from "../components/EmptyList.svelte";
   import GoalEntry from "../components/GoalEntry.svelte";
   import ProjectEntry from "../components/ProjectEntry.svelte";
   import { fpGoalStore } from "../stores/goal";
@@ -31,6 +32,9 @@
     {#each $fpGoalStore.goals as goal (goal.id)}
       <GoalEntry goal={goal} />
     {/each}
+    {#if !$fpGoalStore.loading && $fpGoalStore.goals.length === 0}
+      <EmptyList icon="list" text="No goals." />
+    {/if}
   </div>
   <div class="right">
     {#if !$fpProjectStore.loading || $fpProjectStore.projects.length > 0}
@@ -39,6 +43,9 @@
     {#each $fpProjectStore.projects as project (project.id)}
       <ProjectEntry project={project} />
     {/each}
+    {#if !$fpProjectStore.loading && $fpProjectStore.projects.length === 0}
+      <EmptyList icon="check" text="All good!" />
+    {/if}
   </div>
 </div>
 

svelte-ui/src/pages/LogsPage.svelte

@@ -4,13 +4,15 @@
   import logStore from "../stores/logs";
   import { formatDate, formatTime, formatWeekdayDate } from "../utils/time";
   import Boi from "../components/Boi.svelte";
+  import EmptyList from "../components/EmptyList.svelte";
 
   let groupedLogs: {day: number, text: string, logs: LogResult[]}[] = [];
-  let earliestDate = $logStore.filter.minTime || new Date(Date.now() - (86400000*30));
+  let minTime = $logStore.filter.minTime || new Date(Date.now() - (86400000*30));
+  let emptyMessage = `No logs since ${formatWeekdayDate(minTime)}.`;
 
   function loadMore() {
     if (!$logStore.stale && !$logStore.loading) {
-      earliestDate = new Date(earliestDate.getTime() - (86400000*30));
+      minTime = new Date(minTime.getTime() - (86400000*30));
       logStore.markStale();
     }
   }
@@ -18,11 +20,17 @@
   $: {
     if ($logStore.stale && !$logStore.loading) {
       logStore.load({
-        minTime: earliestDate,
+        minTime: minTime,
       });
     }
   }
 
+  $: {
+    if (!$logStore.loading && !$logStore.stale) {
+      emptyMessage = `No logs since ${formatWeekdayDate(minTime)}.`;
+    }
+  }
+
   $: {
     if (!$logStore.loading) {
       groupedLogs = [];
@@ -78,6 +86,9 @@
       <LogEntry log={log} />
     {/each}
   {/each}
+  {#if groupedLogs.length === 0}
+    <EmptyList icon="list" text={emptyMessage} />
+  {/if}
   {#if !$logStore.loading && !$logStore.stale}
     <Boi on:click={loadMore}>Load More</Boi>
   {:else}