blürgh.

frontend/src/lib/components/layout/Icon.svelte

@@ -40,6 +40,8 @@
   import { faLightbulb } from "@fortawesome/free-solid-svg-icons/faLightbulb";
   import { faChevronRight } from "@fortawesome/free-solid-svg-icons/faChevronRight";
   import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
+  import { faTrash } from "@fortawesome/free-solid-svg-icons/faTrash";
+  import { faCheckToSlot } from "@fortawesome/free-solid-svg-icons/faCheckToSlot";
   
   const icons = {
     "clock": faClock,
@@ -62,6 +64,8 @@
     "search": faSearch,
     "chevron_right": faChevronRight,
     "chevron_down": faChevronDown,
+    "trash": faTrash,
+    "check_slot": faCheckToSlot,
   };
 
   export type IconName = keyof typeof icons;

frontend/src/lib/components/layout/Main.svelte

@@ -51,21 +51,6 @@
     div.header
       display: flex
 
-      h2
-        font-size: 1.25em
-        margin: 0
-        color: $color-entry10
-
-        span.sub
-          color: $color-entry5
-
-        &.big
-          margin-top: 1em
-          font-size: 2em
-
-        &.small
-          font-size: 1em
-
       div.right
         color: $color-entry2-transparent
         margin-left: auto

frontend/src/lib/components/layout/OptionsRow.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   export let centered = false;
+  export let vertical = false;
 </script>
 
-<div class="option-row" class:centered>
+<div class="option-row" class:vertical class:centered>
   <slot></slot>
 </div>
 
@@ -10,10 +11,18 @@
   div.option-row {
     margin-left: -0.4ch;
     margin-right: -0.4ch;
+    display: flex;
+    flex-direction: row;
   }
 
   div.option-row.centered {
     text-align: center;
     padding-bottom: 0.5em;
   }
+
+  div.vertical {
+    display: flex;
+    flex-direction: column;
+    font-size: 1em;
+  }
 </style>

frontend/src/lib/components/layout/SubSection.svelte

@@ -54,7 +54,6 @@
       opacity: 0.6
       margin-right: 1.5ch
       font-size: 0.75em
-      margin-top: auto
 
       span.event
         font-size: 1.33em
@@ -64,7 +63,8 @@
         display: none
 
       &.blankEvent
-        margin-right: 0.5ch
+        margin-top: 0.35em
+        margin-right: 0.75ch
 
         span.event
           display: none
@@ -78,6 +78,6 @@
         margin-top: auto
 
         &.noProgress
-          margin-top: -0.25em
+          margin-top: 0em
           margin-bottom: auto
 </style>

frontend/src/lib/components/project/ItemSubSection.svelte

@@ -8,40 +8,47 @@
   import Amount from "../common/Amount.svelte";
   import AmountRow from "../common/AmountRow.svelte";
   import type { IconName } from "../layout/Icon.svelte";
+  import Icon from "../layout/Icon.svelte";
+  import { formatTime } from "$lib/utils/date";
 
   export let item: Item;
   export let event: "created" | "scheduled" | "acquired" | "none" = "none";
   export let compact = false;
+  export let showAcquiredTime = false;
 
   let icon: IconName
   let status: Status
+  let eventText: string
 
   $: {
     if (event === "none" || event === "acquired") {
       if (item.acquiredTime) {
         icon = "check";
         status = Status.Completed;
+        eventText = (showAcquiredTime || event === "acquired") ? formatTime(item.acquiredTime) : void(0)
       }
     } else if (event === "scheduled") {
       if (item.acquiredTime) {
         icon = "hourglass";
         status = Status.Blocked;
+        eventText = "scheduled"
       }
     } else if (event === "created") {
         icon = "lightbulb";
         status = Status.Available;
+        eventText = formatTime(item.createdTime)
     }
   }
 </script>
 
-<SubSection small noProgress title={item.name} icon={icon} status={status} event={event}>
+<SubSection small noProgress title={item.name} icon={icon} status={status} event={eventText}>
   <OptionsRow slot="right">
     {#if item.acquiredTime == null}
-      <Option open={{name: "item.acquire", item}} color="green">Acquire</Option>
+      <Option open={{name: "item.acquire", item}} color="green"><Icon name="check_slot" /></Option>
     {/if}
     {#if !compact}
-      <Option open={{name: "item.edit", item}}>Edit</Option>
-      <Option open={{name: "item.delete", item}} color="red">Delete</Option>
+      <Option open={{name: "item.edit", item}}><Icon name="pen" /></Option>
+      <Option open={{name: "item.delete", item}} color="red"><Icon name="trash" /></Option>
     {/if}
   </OptionsRow>
   {#if !compact}

frontend/src/routes/[scope=prettyid]/overview.svelte

@@ -4,11 +4,6 @@
   export const load: Load = async({params, url, fetch}) => {
     const scopeId = parseInt(params.scope.split("-")[0]);
 
-    console.log(
-      datesOf(parseInterval("next:7d", new Date)),
-      parseInterval("today", new Date),
-    )
-
     const scheduledItems = (await sl3(fetch).listItems(scopeId, {
       scheduledDate: datesOf(parseInterval("next:7d", new Date)),
     }))
@@ -92,7 +87,7 @@
       {#if acquiredItems.length > 0}
         <Row title="Today">
           {#each acquiredItems as item (item.id)}
-            <ItemSubSection item={item} />
+            <ItemSubSection showAcquiredTime item={item} />
           {/each}
         </Row>
       {/if}