move type section styling and markup to AttributeView

ui/src/components/AttributeView.vue

@@ -1,5 +1,12 @@
 <template>
-  <div class="attribute-view">
+  <section class="attribute-view">
+    <h3>
+      <up-link v-if="type" :to="{ entity: type.address }">
+        <sl-icon v-if="type.icon" :name="type.icon" />
+        {{ type.name || "???" }}
+      </up-link>
+      <template v-else> {{ title || "???" }} </template>
+    </h3>
     <component
       v-for="component in components"
       :key="component.id"
@@ -10,10 +17,11 @@
       :reverse="reverse"
       @edit="processChange"
     />
-  </div>
+  </section>
 </template>
 
 <script lang="ts">
+import UpLink from "@/components/UpLink.vue";
 import Compass from "@/components/widgets/Compass.vue";
 import Table from "@/components/widgets/Table.vue";
 import { UpType } from "@/lib/types";
@@ -23,22 +31,27 @@ import { ComponentOptions, defineComponent, PropType } from "vue";
 export default defineComponent({
   name: "AttributeView",
   components: {
+    UpLink,
     Table,
     Compass,
   },
   emits: ["edit"],
   props: {
-    address: {
-      type: String,
+    attributes: {
+      type: Array as PropType<[string, IEntry][]>,
       required: true,
     },
     type: {
       type: Object as PropType<UpType>,
     },
-    attributes: {
-      type: Array as PropType<[string, IEntry][]>,
+    address: {
+      type: String,
       required: true,
     },
+    title: {
+      type: String,
+      required: false,
+    },
     insertable: {
       type: Boolean,
       default: false,
@@ -89,4 +102,35 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
+section {
+  position: relative;
+  overflow: visible;
+
+  margin-top: 1.66em;
+  padding: 1ex 1em;
+
+  border: 1px solid var(--foreground);
+  border-radius: 4px;
+
+  h3 {
+    display: inline-block;
+
+    background: var(--background);
+    font-weight: 600;
+
+    position: absolute;
+    top: -1.66em;
+    left: 1ex;
+    line-height: 1;
+    padding: 0 0.75ex;
+
+    sl-icon {
+      margin-bottom: -2px;
+    }
+
+    a {
+      text-decoration: none;
+    }
+  }
+}
 </style>

ui/src/lib/entity.ts

@@ -7,7 +7,7 @@ import { computed, ComputedRef, Ref } from "vue";
 export function useEntity(address: string | (() => string), condition?: () => Boolean) {
     const { data, error, mutate } = useSWRV<ListingResult, unknown>(
         () => (condition === undefined || condition()) ? `/api/obj/${typeof address === "string" ? address : address()}` : null,
-        fetcher
+        fetcher, { revalidateOnFocus: false }
     );
 
     const entries = computed(() => {
@@ -46,7 +46,7 @@ export function useEntity(address: string | (() => string), condition?: () => Bo
 export function query(query: string | (() => string), condition?: () => Boolean) {
     const { data, error, mutate } = useSWRV<ListingResult, unknown>(
         () => (condition === undefined || condition()) ? `/api/obj?query=${typeof query === "string" ? query : query()}` : null,
-        fetcher
+        fetcher, { revalidateOnFocus: false }
     );
 
     const result = computed(() => {

ui/src/lib/types.ts

@@ -1,9 +1,14 @@
 import { ComponentOptions } from "vue";
 
 export class UpType {
+    address: string;
     name: string | null = null;
     attributes: string[] = [];
 
+    constructor(address: string) {
+        this.address = address;
+    }
+
     public get icon(): string | undefined {
         return this.name ? TYPE_ICONS[this.name] : undefined;
     }

ui/src/views/Inspect.vue

@@ -8,42 +8,28 @@
     </h2>
     <blob-preview :address="address" />
     <div v-if="!error">
-      <section
-        class="typed-attribute-list"
+      <AttributeView
         v-for="(attributes, typeAddr) in typedAttributes"
         :key="typeAddr"
-      >
-        <h3>
-          <up-link :to="{ entity: typeAddr }">
-            <sl-icon v-if="types[typeAddr].icon" :name="types[typeAddr].icon" />
-            {{ types[typeAddr]?.name || "???" }}
-          </up-link>
-        </h3>
-        <AttributeView
-          :address="address"
-          :type="types[typeAddr]"
-          :attributes="attributes"
-          @edit="mutate()"
-        />
-      </section>
-      <section class="untyped-attribute-list">
-        <h3>
-          <sl-icon name="question-diamond" />
-          Other attributes
-        </h3>
-        <AttributeView
-          insertable
-          :address="address"
-          :attributes="untypedAttributes"
-          @change="mutate()"
-        />
-      </section>
-      <template v-if="backlinks.length">
-        <section class="backlinks">
-          <h3>Referred to ({{ backlinks.length }})</h3>
-          <AttributeView :address="address" :attributes="backlinks" reverse />
-        </section>
-      </template>
+        :address="address"
+        :type="types[typeAddr]"
+        :attributes="attributes"
+        @edit="mutate()"
+      />
+      <AttributeView
+        title="Other attributes"
+        insertable
+        :address="address"
+        :attributes="untypedAttributes"
+        @change="mutate()"
+      />
+      <AttributeView
+        v-if="backlinks.length"
+        :title="`Referred to (${backlinks.length})`"
+        :address="address"
+        :attributes="backlinks"
+        reverse
+      />
     </div>
     <div v-else class="error">
       {{ error }}
@@ -101,7 +87,7 @@ export default defineComponent({
       const result = {} as { [key: string]: UpType };
       allTypeEntries.value.forEach(([_, entry]) => {
         if (result[entry.entity] === undefined) {
-          result[entry.entity] = new UpType();
+          result[entry.entity] = new UpType(entry.entity);
         }
 
         switch (entry.attribute) {
@@ -167,42 +153,8 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
-.inspect {
-  section {
-    position: relative;
-    overflow: visible;
-
-    margin-top: 1.66em;
-    padding: 1ex 1em;
-
-    border: 1px solid var(--foreground);
-    border-radius: 4px;
-
-    h3 {
-      display: inline-block;
-
-      background: var(--background);
-      font-weight: 600;
-
-      position: absolute;
-      top: -1.66em;
-      left: 1ex;
-      line-height: 1;
-      padding: 0 0.75ex;
-
-      sl-icon {
-        margin-bottom: -2px;
-      }
-    }
-
-    &.typed-attribute-list h3 a {
-      text-decoration: none;
-    }
-  }
-
-  .error {
-    color: red;
-  }
+<style scoped lang="scss">
+.error {
+  color: red;
 }
 </style>