[ui] sort roots

webui/src/views/Home.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import _ from "lodash";
+
   import { UpListing } from "upend";
   import type { ListingResult } from "upend/types";
   import AttributeView from "../components/AttributeView.svelte";
@@ -13,9 +15,10 @@
     const response = await fetch("api/hier_roots");
     const data = (await response.json()) as ListingResult;
     const listing = new UpListing(data);
-    return Object.values(listing.objects).filter((obj) =>
-      Boolean(obj.attr["LBL"])
-    );
+    return Object.values(listing.objects)
+      .filter((obj) => Boolean(obj.attr["LBL"]))
+      .map((obj) => [obj.address, obj.identify().join(" | ")])
+      .sort(([_, i1], [__, i2]) => i1.localeCompare(i2));
   })();
 
   const { result: lastVisitedQuery } = query(`(matches ? "LAST_VISITED" ? )`);
@@ -47,9 +50,9 @@
       <Spinner centered />
     {:then data}
       <ul>
-        {#each data as root}
+        {#each data as [address, _]}
           <li class="root">
-            <UpObjectCard address={root.address} />
+            <UpObjectCard {address} />
           </li>
         {:else}
           <li>No roots :(</li>