[ui] hier is now a list widget by default, fix widgets

ui/src/components/AttributeView.svelte

@@ -14,7 +14,7 @@
   export let editable = false;
   export let reverse = false;
 
-  let currentWidget = "table";
+  let currentWidget: string | undefined;
 
   let availableWidgets: Widget[] = [];
   $: {
@@ -33,6 +33,7 @@
     if (type?.widgetInfo) {
       availableWidgets = [type.widgetInfo, ...availableWidgets];
     }
+    currentWidget = availableWidgets[0].name;
   }
 
   let components: Component[] = [];
@@ -62,7 +63,7 @@
       {/if}
     </h3>
 
-    {#if availableWidgets.length > 1 || editable}
+    {#if currentWidget && (availableWidgets.length > 1 || editable)}
       <div class="views">
         {#each availableWidgets as widget (widget.name)}
           <sl-icon-button
@@ -118,10 +119,6 @@
         sl-icon {
           margin-bottom: -2px;
         }
-
-        a {
-          text-decoration: none;
-        }
       }
 
       h3 {

ui/src/components/widgets/List.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { OrderedListing } from "upend/types";
+  import Table from "./Table.svelte";
+
+  export let attributes: OrderedListing;
+  export let attribute: string;
+  export let editable = false;
+
+  $: filteredAttributes = attributes.filter(
+    ([_, entry]) => entry.attribute === attribute
+  );
+</script>
+
+<Table
+  columns="value"
+  header={false}
+  attributes={filteredAttributes}
+  {editable}
+/>

ui/src/lib/types.ts

@@ -1,4 +1,5 @@
 import type { SvelteComponent, SvelteComponentTyped } from "svelte";
+import List from "../components/widgets/List.svelte";
 
 export class UpType {
   address: string;
@@ -35,6 +36,18 @@ const TYPE_ICONS: { [key: string]: string } = {
 };
 
 const TYPE_WIDGETS: { [key: string]: Widget } = {
+  HIER: {
+    name: "hierarchical-listing",
+    icon: "folder",
+    components: [
+      {
+        component: List,
+        props: {
+          attribute: "HAS",
+        },
+      },
+    ],
+  },
   KSX_TRACK_MOODS: {
     name: "ksx-track-compass",
     icon: "plus-square",
@@ -63,7 +76,6 @@ const TYPE_WIDGETS: { [key: string]: Widget } = {
   },
 };
 
-
 export type AttributeChange =
   | AttributeCreate
   | AttributeUpdate