feat(webui): add Keyed display to Home

webui/src/views/Home.svelte

@@ -4,7 +4,8 @@
   import type { Widget } from "../components/EntryView.svelte";
   import EntryView from "../components/EntryView.svelte";
   import { Link, useNavigate } from "svelte-navigator";
-  import { UpListing } from "@upnd/upend";
+  import { Query, UpListing } from "@upnd/upend";
+  import { Any, Variable } from "@upnd/upend/query";
   import UpObject from "../components/display/UpObject.svelte";
   import UpObjectCard from "../components/display/UpObjectCard.svelte";
   import Spinner from "../components/utils/Spinner.svelte";
@@ -16,6 +17,7 @@
   import {
     ATTR_ADDED,
     ATTR_IN,
+    ATTR_KEY,
     ATTR_LABEL,
     HIER_ROOT_ADDR,
   } from "@upnd/upend/constants";
@@ -31,6 +33,18 @@
       .sort(([_, i1], [__, i2]) => i1.localeCompare(i2));
   })();
 
+  const keyed = (async () => {
+    const data = await api.query(
+      Query.join(
+        Query.matches(Variable("keyed"), ATTR_KEY, Any),
+        Query.matches(Variable("keyed"), [ATTR_LABEL, ATTR_KEY], Any),
+      ),
+    );
+    return Object.values(data.objects)
+      .filter((obj) => !obj.get(ATTR_KEY)?.toString()?.startsWith("TYPE"))
+      .map((obj) => obj.address);
+  })();
+
   const groups = (async () => {
     const data = await api.query(`(matches ? "${ATTR_IN}" ?)`);
 
@@ -185,14 +199,31 @@
             {/if}
           </li>
         {:else}
-          <li>No roots :(</li>
+          <li>No roots.</li>
         {/each}
       </ul>
     {/await}
   </section>
 
+  {#await keyed then data}
+    {#if data}
+      <section class="keyed">
+        <h2>{$i18n.t("Keyed")}</h2>
+        <ul>
+          {#each data as address}
+            <li class="root">
+              <UpObject banner={data.length <= 4} link {address} />
+            </li>
+          {/each}
+        </ul>
+      </section>
+    {/if}
+  {/await}
+
   <section class="groups">
-    <h2><Link to="/browse/groups">{$i18n.t("Groups")}</Link></h2>
+    <h2>
+      <Link to="/browse/groups">{$i18n.t("Groups")}</Link>
+    </h2>
     {#await groups}
       <Spinner centered />
     {:then data}
@@ -306,6 +337,7 @@
   .frecent {
     display: flex;
     gap: 2rem;
+
     & > * {
       flex-basis: 50%;
     }
@@ -315,7 +347,8 @@
     }
   }
 
-  .roots {
+  .roots,
+  .keyed {
     ul {
       list-style: none;
       padding: 0;
@@ -323,11 +356,12 @@
       display: flex;
       flex-wrap: wrap;
       width: 80%;
-      gap: 2rem;
+      gap: 1rem;
     }
 
     li {
       flex-basis: calc(50% - 2rem / 2);
+
       &:only-child {
         flex-basis: 100%;
       }
@@ -364,6 +398,7 @@
     border-top: 1px solid var(--foreground);
     text-align: center;
     margin: 1rem 2rem 2.5rem 2rem;
+
     & > * {
       margin: 0.5em;
     }