improve Inspect view, add Address component

ui/src/App.vue

@@ -18,9 +18,11 @@ export default defineComponent({
 @import "../node_modules/@shoelace-style/shoelace/dist/shoelace/shoelace.css";
 
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: Helvetica, Arial, sans-serif;
   color: #2c3e50;
   padding: 1rem;
+
+  --monospace-font: "Fira Code", "Consolas", "JetBrains Mono", "Inconsolata", monospace;
 }
 
 .header {

ui/src/components/Address.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="address">
+    <a v-if="isFile" :href="`/api/raw/${address}`">{{ address }}</a>
+    <template v-else>
+    <router-link v-if="link" :to="{name: 'Inspect', params: {address}}">{{ address }}</router-link>
+    <template v-else>{{ address }}</template>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+
+export default defineComponent({
+  name: "Address",
+  props: {
+    address: String,
+    link: {
+      type: Boolean,
+      default: false
+    },
+    isFile: {
+      type: Boolean,
+      default: false
+    }
+  }
+});
+</script>
+
+<style scoped>
+.address {
+  font-family: var(--monospace-font);
+}
+</style>

ui/src/views/Inspect.vue

@@ -1,30 +1,43 @@
 <template>
   <div class="inspect">
-    <div>
-      inspekt: {{ address }}
-    </div>
+    <h2>
+      <Address :address="address"/>
+    </h2>
     <div v-if="!error">
+      <h3>Own attributes</h3>
       <table>
-        <tr v-for="entry in objectEntries">
-          <td>
-            <template v-if="entry.target !== address">
-            <router-link :to="{params: {address: entry.target}}">{{ entry.target }}</router-link>
-            </template>
-            <template v-else>
-            {{ entry.target }}
-            </template>
-          </td>
+        <tr>
+          <th>Key name</th>
+          <th>Value</th>
+        </tr>
+        <tr v-for="entry in attributes">
           <td>{{ entry.key }}</td>
           <td>
-            <template v-if="entry.value[0] === 'ADDR'">
-            <router-link :to="{params: {address: entry.value[1]}}">{{ entry.value[1] }}</router-link>
-            </template>
+            <Address v-if="entry.value[0] === 'ADDR'"
+                     :address="entry.value[1]"
+                     link
+                     :is-file="entry.key === 'FILE_IS'"/>
             <template v-else>
-            {{ entry.value }}
+            {{ entry.value[1] }}
             </template>
           </td>
         </tr>
       </table>
+      <h3>Referred to</h3>
+      <table>
+        <tr>
+          <th>Targets</th>
+          <th>Key names</th>
+        </tr>
+        <tr v-for="entry in backlinks">
+          <td>
+            <Address link :address="entry.target"/>
+          </td>
+          <td>
+            {{ entry.key }}
+          </td>
+        </tr>
+      </table>
     </div>
     <div v-else class="error">
       {{ error }}
@@ -37,9 +50,13 @@ import {defineComponent} from "vue";
 import useSWRV from "swrv";
 import {fetcher} from "@/utils";
 import {IEntry, ListingResult} from "@/types/base";
+import Address from "@/components/Address.vue";
 
 export default defineComponent({
   name: "Inspect",
+  components: {
+    Address,
+  },
   props: {
     "address": String
   },
@@ -50,10 +67,19 @@ export default defineComponent({
     objectEntries(): IEntry[] {
       if (this.data) {
         const entries = Object.values(this.data) as IEntry[];
-        return entries.sort((a, b) => a.key.localeCompare(b.key));
+        return entries
+          .sort((a, b) => a.value[1].localeCompare(b.value[1]))
+          .sort((a, b) => a.value[0].localeCompare(b.value[0]))
+          .sort((a, b) => a.key.localeCompare(b.key));
       } else {
         return [];
       }
+    },
+    attributes(): IEntry[] {
+      return this.objectEntries.filter((e) => e.target === this.address);
+    },
+    backlinks(): IEntry[] {
+      return this.objectEntries.filter((e) => e.target !== this.address);
     }
   },
   setup(props) {
@@ -66,7 +92,19 @@ export default defineComponent({
   }
 });
 </script>
-<style>
+
+<style scoped lang="scss">
+table {
+  th {
+    text-align: left;
+  }
+
+  td {
+    font-family: var(--monospace-font);
+    padding-right: 1em;
+  }
+}
+
 .error {
   color: red;
 }