[ui] use AttributeView on Home, add Gallery view

also AttributeView doesn't need a title and UpType doesn't require an address

webui/src/components/AttributeView.svelte

@@ -46,7 +46,7 @@
 <section class="attribute-view labelborder">
   <header>
     <h3>
-      {#if type && type !== UNTYPED}
+      {#if !title && type?.address}
         <UpLink to={{ entity: type.address }}>
           {#if type.icon}
             <div class="icon">
@@ -60,7 +60,7 @@
           {/if}
         </UpLink>
       {:else}
-        {title || "???"}
+        {title || ""}
       {/if}
     </h3>
 

webui/src/components/util.scss

@@ -17,7 +17,7 @@ section.labelborder {
 
         margin: 0;
 
-        background: var(--background-lighter);
+        background: var(--current-background, var(--background-lighter));
         font-weight: 600;
 
         line-height: 1;

webui/src/components/widgets/Gallery.svelte

@@ -3,11 +3,12 @@
 
   import type { UpEntry, UpListing } from "upend";
   import { query } from "../../lib/entity";
-  import { defaultEntitySort } from "../../util/sort";
+  import { defaultEntitySort, entityValueSort } from "../../util/sort";
   import Thumbnail from "./gallery/Thumbnail.svelte";
 
   export let entries: UpEntry[];
   export let editable = false;
+  export let showEntities = false;
 
   // Sorting
   let sortedAttributes = entries;
@@ -48,7 +49,9 @@
   }
 
   function sortAttributes() {
-    sortedAttributes = defaultEntitySort(entries, sortKeys);
+    sortedAttributes = showEntities
+      ? entityValueSort(entries, sortKeys)
+      : defaultEntitySort(entries, sortKeys);
   }
 
   $: {
@@ -89,7 +92,7 @@
   {#each sortedAttributes as entry (entry.address)}
     <div class="thumbnail">
       <Thumbnail
-        address={String(entry.value.c)}
+        address={String(showEntities ? entry.entity : entry.value.c)}
         on:resolved={(event) => {
           addSortKeys(String(entry.value.c), event.detail);
         }}

webui/src/lib/types.ts

@@ -2,7 +2,7 @@ import Table from "../components/widgets/Table.svelte";
 import Gallery from "../components/widgets/Gallery.svelte";
 
 export class UpType {
-  address: string;
+  address: string | undefined;
   name: string | null = null;
   label: string | null = null;
   attributes: string[] = [];
@@ -20,7 +20,7 @@ export class UpType {
   }
 }
 
-export const UNTYPED = new UpType("UNTYPED");
+export const UNTYPED = new UpType();
 
 export interface Component {
   component: any; // TODO
@@ -91,4 +91,33 @@ const TYPE_WIDGETS: { [key: string]: Widget[] } = {
       ],
     },
   ],
+  HOME_VIEW: [
+    {
+      name: "list-table",
+      icon: "list-ul",
+      components: [
+        {
+          component: Table,
+          props: {
+            columns: "value, entity",
+            orderByValue: true,
+            unfixed: true,
+            header: false,
+          },
+        },
+      ],
+    },
+    {
+      name: "gallery-view",
+      icon: "image",
+      components: [
+        {
+          component: Gallery,
+          props: {
+            showEntities: true,
+          },
+        },
+      ],
+    },
+  ],
 };

webui/src/views/Home.svelte

@@ -2,11 +2,13 @@
   import { formatRelative } from "date-fns";
   import { UpListing } from "upend";
   import type { ListingResult } from "upend/types";
+  import AttributeView from "../components/AttributeView.svelte";
   import UpObject from "../components/display/UpObject.svelte";
   import UpObjectCard from "../components/display/UpObjectCard.svelte";
   import Spinner from "../components/utils/Spinner.svelte";
   import Table from "../components/widgets/Table.svelte";
   import { query } from "../lib/entity";
+  import { UpType } from "../lib/types";
   import { vaultInfo } from "../util/info";
   import { updateTitle } from "../util/title";
 
@@ -25,6 +27,9 @@
   const { result: latestQuery } = query(`(matches ? "ADDED" ?)`);
   $: latest = ($latestQuery?.entries || []).slice(0, 25);
 
+  const HomeViewType = new UpType();
+  HomeViewType.name = "HOME_VIEW";
+
   updateTitle("Home");
 </script>
 
@@ -56,11 +61,10 @@
       {#if $lastVisitedQuery == undefined}
         <Spinner centered />
       {:else}
-        <Table
-          columns="value, entity"
+        <AttributeView
+          --current-background="var(--background)"
           entries={lastVisited}
-          orderByValue
-          unfixed
+          type={HomeViewType}
         />
       {/if}
     </section>
@@ -72,7 +76,11 @@
       {#if $latestQuery == undefined}
         <Spinner centered />
       {:else}
-        <Table columns="value, entity" entries={latest} orderByValue unfixed />
+        <AttributeView
+          --current-background="var(--background)"
+          entries={latest}
+          type={HomeViewType}
+        />
       {/if}
     </section>
   {/if}
@@ -98,7 +106,7 @@
 
   .latest,
   .lastVisited {
-    margin: 1rem;
+    margin: 2rem;
   }
 
   .roots {