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/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">
-  <div class="link-hook" id={item.id} bind:this={linkHook}></div>
-  <div class="body">
-    <div class="header">
-      <div class="icon">
-        {item.groupWeight}
-      </div>
-      <div class="name">{item.name}</div>
-    </div>
-    <div class="description">
-      <p>{item.description}</p>
+<ChildEntry entry={item}>
+  <OptionRow>
+    <Option open={mdItemEdit}>Edit</Option>
+    <Option open={mdItemDelete}>Delete</Option>
+  </OptionRow>
+</ChildEntry>
 
-      <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>