refactored Item, Task and Log entry to share code. TaskEntry is still a bit messy, but that's because of the weird icon stuffs.

svelte-ui/src/components/ChildEntry.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+  import type { IconName, iconNames } from "../external/icons";
+  import DaysLeft from "./DaysLeft.svelte";
+  import Icon from "./Icon.svelte";
+  import LinkHook from "./LinkHook.svelte";
+
+  interface EntryCommon {
+    id: string
+    name?: string
+    description: string
+    icon?: IconName
+
+    startTime?: string
+    endTime?: string
+    createdTime?: string
+
+    active?: boolean
+    completedAmount?: number
+    itemAmount?: number
+    task?: EntryCommonSub
+  }
+  
+  interface EntryCommonSub {
+    name: string
+    icon: IconName
+  }
+
+  export let entry: EntryCommon = null;
+
+  let iconName: IconName;
+  let displayName: string;
+
+  $: iconName = entry.task?.icon || entry.icon;
+  $: displayName = entry.name || entry.task?.name || "";
+</script>
+
+<div class="child-entry">
+  <LinkHook id={entry.id} />
+  <div class="body">
+    <div class="header">
+      <slot name="icon">
+        <div class="icon">
+          <Icon name={iconName} />
+        </div>
+      </slot>
+      <div class="name">{entry.name}</div>
+      {#if (entry.endTime != null)}
+        <div class="times">
+          <DaysLeft startTime={entry.startTime || entry.createdTime} endTime={entry.endTime} />
+        </div>
+      {/if}
+    </div>
+    <div class="description">
+      <p>{entry.description}</p>
+      <slot></slot>
+    </div>
+  </div>
+</div>
+
+<style>
+  div.child-entry {
+    display: flex;
+    flex-direction: row;
+    margin: 0.25em 0 0.75em 0;
+  }
+  div.icon {
+    display: flex;
+    flex-direction: column;
+    font-size: 1em;
+    padding: 0.2em .5ch;
+
+    margin-right: 0.5em;
+    background: #444;
+    color: #CCC;
+  }
+
+  div.body {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+  div.header {
+    display: flex;
+    flex-direction: row;
+    background: #333;
+  }
+
+  div.name {
+    font-size: 1em;
+    font-weight: 100;
+    margin: auto 0;
+    vertical-align: middle;
+    padding: 0.125em .5ch;
+  }
+  div.times {
+    margin-left: auto; 
+    margin-right: 0.25ch;
+    padding: 0.125em 0;
+  }
+
+  div.description {
+    padding: 0.25em 1ch;
+    background: #222;
+    color: #aaa;
+    border-bottom-right-radius: 0.5em;
+  }
+  div.description p {
+    padding: 0;
+    margin: 0.25em 0;
+  }
+</style>

svelte-ui/src/components/ItemEntry.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { onMount } from "svelte";
   import type { GroupResult } from "../models/group";
   import type { default as Item } from "../models/item";
   import type { ModalData } from "../stores/modal";
+  import ChildEntry from "./ChildEntry.svelte";
   import Option from "./Option.svelte";
   import OptionRow from "./OptionRow.svelte";
 
@@ -11,89 +11,15 @@
 
   let mdItemEdit: ModalData;
   let mdItemDelete: ModalData;
-  let linkHook: HTMLElement;
-  
-  onMount(() => {
-    if (window.location.hash === "#" + item.id) {
-      window.scrollTo({top: linkHook.getBoundingClientRect().top});
-    }
-  });
   
   $: mdItemEdit = {name: "item.edit", item: {...item, group}};
   $: mdItemDelete = {name: "item.delete", item: {...item, group}};
 </script>
 
-<div class="item">
+<ChildEntry entry={item}>
-  <div class="link-hook" id={item.id} bind:this={linkHook}></div>
+  <OptionRow>
-  <div class="body">
+    <Option open={mdItemEdit}>Edit</Option>
-    <div class="header">
+    <Option open={mdItemDelete}>Delete</Option>
-      <div class="icon">
+  </OptionRow>
-        {item.groupWeight}
+</ChildEntry>
-      </div>
-      <div class="name">{item.name}</div>
-    </div>
-    <div class="description">
-      <p>{item.description}</p>
 
-      <OptionRow>
-        <Option open={mdItemEdit}>Edit</Option>
-        <Option open={mdItemDelete}>Delete</Option>
-      </OptionRow>
-    </div>
-  </div>
-</div>
-
-<style>
-  div.link-hook {
-    position: relative;
-    top: -2em;
-  }
-
-  div.item {
-    display: flex;
-    flex-direction: row;
-    margin: 0.25em 0 0.75em 0;
-  }
-  div.body {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-  div.header {
-    display: flex;
-    flex-direction: row;
-    background: #333;
-  }
-
-  div.icon {
-    display: flex;
-    flex-direction: column;
-    font-size: 1em;
-    padding: 0.125em .5ch;
-    min-width: 2ch;
-    text-align: center;
-
-    margin-right: 0.5em;
-    background: #444;
-    color: #CCC;
-  }
-
-  div.name {
-    font-size: 1em;
-    font-weight: 100;
-    margin: auto 0;
-    vertical-align: middle;
-    padding: 0.125em .5ch;
-  }
-
-  div.description {
-    padding: 0.25em 1ch;
-    background: #222;
-    color: #aaa;
-    border-bottom-right-radius: 0.5em;
-  }
-  div.description p {
-    padding: 0;
-    margin: 0.25em 0;
-  }
-</style>

svelte-ui/src/components/ItemLink.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type Item from "../models/item";
+  import Icon from "./Icon.svelte";
+
+  export let item: Item = null;
+</script>
+
+<div class="item">
+  <div class="item-icon">
+    <Icon name={item.icon} />
+  </div>
+  <div class="item-name">
+    <a href="/items#{item.groupId}">{item.name} ({item.groupWeight})</a>
+  </div>
+</div>
+
+<style>
+  div.item {
+    display: flex;
+    flex-direction: row;
+    margin-top: 0.25em;
+    margin-bottom: 0em;
+    font-size: 0.75em;
+  }
+  div.item a {
+    color: inherit;
+  }
+  div.item div.item-icon {
+    padding: 0.25em 0.5ch 0.25em 0;
+  }
+  div.item div.item-name {
+    padding: 0.125em;
+  }
+</style>

svelte-ui/src/components/LogEntry.svelte

@@ -2,8 +2,8 @@
   import type { IconName } from "../external/icons";
   import type { LogResult } from "../models/log";
   import type { ModalData } from "../stores/modal";
-  import { formatTime } from "../utils/time";
+  import ChildEntry from "./ChildEntry.svelte";
-  import Icon from "./Icon.svelte";
+  import ItemLink from "./ItemLink.svelte";
   import Option from "./Option.svelte";
   import OptionRow from "./OptionRow.svelte";
 
@@ -20,102 +20,10 @@
   $: mdLogDelete = {name: "log.delete", log};
 </script>
 
-<div class="log">
+<ChildEntry entry={log}>
-  <div class="body">
+  <ItemLink item={log.item} />
-    <div class="header">
+  <OptionRow>
-      <div class="icon">
+    <Option open={mdLogEdit}>Edit Log</Option>
-        <Icon name={taskIconName} />
+    <Option open={mdLogDelete}>Delete Log</Option>
-      </div>
+  </OptionRow>
-      <div class="name">{log.task.name}</div>
+</ChildEntry>
-      <div class="times">{formatTime(log.loggedTime)}</div>
-    </div>
-    <div class="description">
-      <p>{log.description}</p>
-      <div class="item">
-        <div class="item-icon">
-          <Icon name={itemIconName} />
-        </div>
-        <div class="item-name">
-          <a href="/items#{log.item.groupId}">{log.item.name} ({log.item.groupWeight})</a>
-        </div>
-      </div>
-      <OptionRow>
-        <Option open={mdLogEdit}>Edit Log</Option>
-        <Option open={mdLogDelete}>Delete Log</Option>
-      </OptionRow>
-    </div>
-  </div>
-</div>
-
-<style>
-  div.log {
-    display: flex;
-    flex-direction: row;
-    margin: 0.25em 0;
-  }
-  div.icon {
-    display: flex;
-    flex-direction: column;
-    font-size: 1em;
-    padding: 0.125em .5ch;
-    padding-top: 0.2em;
-
-    margin-right: 0.5em;
-    background: #444;
-    color: #CCC;
-  }
-  div.body {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-  div.header {
-    display: flex;
-    flex-direction: row;
-    background: #333;
-  }
-
-  div.name {
-    font-size: 1em;
-    font-weight: 100;
-    margin: auto 0;
-    vertical-align: middle;
-    padding: 0.125em .5ch;
-  }
-  div.times {
-    margin-left: auto; 
-    margin-right: 0.25ch;
-  }
-
-  div.description {
-    padding: 0.25em 1ch;
-    background: #222;
-    color: #aaa;
-    border-bottom-right-radius: 0.5em;
-  }
-  div.description p {
-    padding: 0;
-    margin: 0.25em 0;
-  }
-
-  div.log {
-    padding: 0.25em 1ch;
-  }
-
-  div.item {
-    display: flex;
-    flex-direction: row;
-    margin-top: 0.25em;
-    margin-bottom: 0em;
-    font-size: 0.75em;
-  }
-  div.item a {
-    color: inherit;
-  }
-  div.item div.item-icon {
-    padding: 0.25em 0.5ch 0.25em 0;
-  }
-  div.item div.item-name {
-    padding: 0.125em;
-  }
-</style>

svelte-ui/src/components/TaskEntry.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-  import { onMount } from "svelte";
   import type Project from "../models/project";
   import type { TaskResult } from "../models/task";
   import type { ModalData } from "../stores/modal";
+  import ChildEntry from "./ChildEntry.svelte";
   import DateSpan from "./DateSpan.svelte";
-  import DaysLeft from "./DaysLeft.svelte";
   import Icon from "./Icon.svelte";
   import Option from "./Option.svelte";
   import OptionRow from "./OptionRow.svelte";
@@ -17,13 +16,6 @@
   let mdLogAdd: ModalData;
   let mdTaskEdit: ModalData;
   let mdTaskDelete: ModalData;
-  let linkHook: HTMLElement;
-
-  onMount(() => {
-    if (window.location.hash === "#" + task.id) {
-      window.scrollTo({top: linkHook.getBoundingClientRect().top});
-    }
-  });
 
   function toggleShowLogs() {
     showLogs = !showLogs;
@@ -34,74 +26,48 @@
   $: mdTaskDelete = {name: "task.delete", task: {...task, project}};
 </script>
 
-<div class="task">
+<ChildEntry entry={task}>
-  <div class="link-hook" id={task.id} bind:this={linkHook}></div>
+  <div slot="icon" class="icon" class:done={!task.active}>
-  <div class="body">
+    {#if !task.active}
-    <div class="header">
+      <span class="on"><Icon block name="check" /></span>
-      {#if !task.active}
+      <span class="off">
-        <div class="icon done">
+        {task.completedAmount}&nbsp;/&nbsp;{task.itemAmount}
-          <span class="on"><Icon block name="check" /></span>
+      </span>
-          <span class="off">
+    {:else}
-            {task.completedAmount}&nbsp;/&nbsp;{task.itemAmount}
+      {task.completedAmount}&nbsp;/&nbsp;{task.itemAmount}
-          </span>
+    {/if}
-        </div>
+  </div>
-      {:else}
+  <div class="item">
-        <div class="icon">
+    <div class="item-icon">
-          {task.completedAmount}&nbsp;/&nbsp;{task.itemAmount}
+      <Icon name={task.item.icon} />
-        </div>
-      {/if}
-      <div class="name">{task.name}</div>
-      {#if (task.endTime != null)}
-        <div class="times">
-          <DaysLeft startTime={task.createdTime} endTime={task.endTime} />
-        </div>
-      {/if}
     </div>
-    <div class="description">
+    <div class="item-name">
-      <p>{task.description}</p>
+      <a href="/items#{task.item.groupId}">{task.item.name} ({task.item.groupWeight})</a>
-      <div class="item">
-        <div class="item-icon">
-          <Icon name={task.item.icon} />
-        </div>
-        <div class="item-name">
-          <a href="/items#{task.item.groupId}">{task.item.name} ({task.item.groupWeight})</a>
-        </div>
-      </div>
-      <OptionRow>
-        {#if task.logs.length > 0}
-          <Option on:click={toggleShowLogs}>{showLogs ? "Hide Logs" : "Show Logs"}</Option>
-        {/if}
-        <Option open={mdLogAdd}>Add Log</Option>
-        {#if showAllOptions}
-          <Option open={mdTaskEdit}>Edit</Option>
-          <Option open={mdTaskDelete}>Delete</Option>
-        {/if}
-      </OptionRow>
-      {#if showLogs && task.logs.length > 0}
-        <div class="log-list">
-          {#each task.logs as log (log.id)}
-            <div class="log">
-              <div class="log-time"><DateSpan time={log.loggedTime} /></div>
-              <div class="log-description">{log.description}</div>
-            </div>
-          {/each}
-        </div>
-      {/if}
     </div>
   </div>
-</div>
+  <OptionRow>
+    {#if task.logs.length > 0}
+      <Option on:click={toggleShowLogs}>{showLogs ? "Hide Logs" : "Show Logs"}</Option>
+    {/if}
+    <Option open={mdLogAdd}>Add Log</Option>
+    {#if showAllOptions}
+      <Option open={mdTaskEdit}>Edit</Option>
+      <Option open={mdTaskDelete}>Delete</Option>
+    {/if}
+  </OptionRow>
+  {#if showLogs && task.logs.length > 0}
+    <div class="log-list">
+      {#each task.logs as log (log.id)}
+        <div class="log">
+          <div class="log-time"><DateSpan time={log.loggedTime} /></div>
+          <div class="log-description">{log.description}</div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</ChildEntry>
 
 <style>
-  div.link-hook {
-    position: relative;
-    top: -2em;
-  }
-
-  div.task {
-    display: flex;
-    flex-direction: row;
-    margin: 0.25em 0 0.75em 0;
-  }
   div.icon {
     display: flex;
     flex-direction: column;
@@ -132,40 +98,6 @@
   div.icon.done:hover span.off {
     display: inline;
   }
-  div.body {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-  div.header {
-    display: flex;
-    flex-direction: row;
-    background: #333;
-  }
-
-  div.name {
-    font-size: 1em;
-    font-weight: 100;
-    margin: auto 0;
-    vertical-align: middle;
-    padding: 0.125em .5ch;
-  }
-  div.times {
-    margin-left: auto; 
-    margin-right: 0.25ch;
-    padding: 0.125em 0;
-  }
-
-  div.description {
-    padding: 0.25em 1ch;
-    background: #222;
-    color: #aaa;
-    border-bottom-right-radius: 0.5em;
-  }
-  div.description p {
-    padding: 0;
-    margin: 0.25em 0;
-  }
 
   div.log-list {
     padding: 0.5em 0;