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/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 Icon from "./Icon.svelte";
+  import ChildEntry from "./ChildEntry.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">
-  <div class="body">
-    <div class="header">
-      <div class="icon">
-        <Icon name={taskIconName} />
-      </div>
-      <div class="name">{log.task.name}</div>
-      <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>
+<ChildEntry entry={log}>
+  <ItemLink item={log.item} />
+  <OptionRow>
+    <Option open={mdLogEdit}>Edit Log</Option>
+    <Option open={mdLogDelete}>Delete Log</Option>
+  </OptionRow>
+</ChildEntry>