feat: webext display added time

webext/src/App.svelte

@@ -113,23 +113,33 @@
   let urlEntriesCount: number | undefined = undefined;
   let contentEntriesCount: number | undefined = undefined;
 
+  let urlAdded: Date | undefined;
+  let contentAdded: Date | undefined;
+
   $: urlAddress &&
     api
       .fetchEntity(urlAddress)
-      .then(
-        (obj) => (urlEntriesCount = Object.keys(obj.listing.entries).length)
-      )
+      .then((obj) => {
+        urlEntriesCount = Object.keys(obj.listing.entries).length;
+        let added = obj.get("ADDED");
+        urlAdded =
+          typeof added === "number" ? new Date(added * 1000) : undefined;
+      })
       .catch((err) => {
         console.error(err);
         urlEntriesCount = undefined;
+        urlAdded = undefined;
       });
 
   $: contentAddress &&
     api
       .fetchEntity(contentAddress)
-      .then(
-        (obj) => (contentEntriesCount = Object.keys(obj.listing.entries).length)
-      )
+      .then((obj) => {
+        contentEntriesCount = Object.keys(obj.listing.entries).length;
+        let added = obj.get("ADDED");
+        contentAdded =
+          typeof added === "number" ? new Date(added * 1000) : undefined;
+      })
       .catch((err) => {
         console.error(err);
         contentEntriesCount = undefined;
@@ -209,31 +219,49 @@
     >
       {primaryAction} as {primaryType}
     </button>
-    <div class="label">Content type: {contentType || "???"}</div>
+    <div class="sublabel">Content type: {contentType || "???"}</div>
   </div>
   <div class="controls row">
-    <button
-      class="button"
-      disabled={urlEntriesCount === undefined}
-      on:click={performUrl}
-    >
-      {urlEntriesCount === undefined
-        ? "???"
-        : urlEntriesCount > 0
-        ? "Open"
-        : "Save"} URL
-    </button>
-    <button
-      class="button"
-      disabled={contentEntriesCount === undefined}
-      on:click={performContent}
-    >
-      {contentEntriesCount === undefined
-        ? "???"
-        : contentEntriesCount > 0
-        ? "Open"
-        : "Save"} Content
-    </button>
+    <div class="labeled-button">
+      <button
+        class="button"
+        disabled={urlEntriesCount === undefined}
+        on:click={performUrl}
+      >
+        {urlEntriesCount === undefined
+          ? "???"
+          : urlEntriesCount > 0
+          ? "Open"
+          : "Save"} URL
+      </button>
+      <div class="sublabel">
+        {#if urlAdded}
+          Added at {urlAdded.toLocaleString()}
+        {:else}
+          ---
+        {/if}
+      </div>
+    </div>
+    <div class="labeled-button">
+      <button
+        class="button"
+        disabled={contentEntriesCount === undefined}
+        on:click={performContent}
+      >
+        {contentEntriesCount === undefined
+          ? "???"
+          : contentEntriesCount > 0
+          ? "Open"
+          : "Save"} Content
+      </button>
+      <div class="sublabel">
+        {#if contentAdded}
+          Added at {contentAdded.toLocaleString()}
+        {:else}
+          ---
+        {/if}
+      </div>
+    </div>
   </div>
   {#if opening && !openError}
     <div class="status-label">Working, please wait...</div>
@@ -315,9 +343,6 @@
     .button {
       font-size: 1.5rem;
     }
-    .label {
-      font-size: 0.75rem;
-    }
   }
 
   .row {
@@ -326,11 +351,21 @@
     gap: 1rem;
   }
 
+  .labeled-button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
   .status-label {
     margin-top: 1rem;
     text-align: center;
   }
 
+  .sublabel {
+    font-size: 0.75rem;
+  }
+
   .error {
     color: colors.$red;
   }