separate File view with previews

ui/src/components/Address.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="['address', { identified: Boolean(inferredId) }]" ref="root">
     <hash-badge :address="address" class="hash-badge" />
-    <a v-if="isFile" :href="`/api/raw/${address}`">{{ address }}</a>
+    <router-link v-if="isFile" :to="{name: 'file'}">{{address}}</router-link>
     <template v-else>
       <router-link v-if="link" :to="{ name: 'inspect', params: { address } }">
         {{ inferredId || address }}

ui/src/router/index.ts

@@ -2,6 +2,7 @@ import Inspect from "@/views/Inspect.vue";
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 import Home from "../views/Home.vue";
 import Search from '../views/Search.vue';
+import File from '../views/File.vue';
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -20,6 +21,12 @@ const routes: Array<RouteRecordRaw> = [
     component: Inspect,
     props: true
   },
+  {
+    path: "/file/:address",
+    name: "file",
+    component: File,
+    props: true
+  },
   {
     path: '/about',
     name: 'about',

ui/src/views/File.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="inspect">
+    <h2>
+      <Address
+        v-if="!fileNames"
+        :address="address"
+        :resolve="false"
+      />
+      <template v-else>
+        <hash-badge :address="address" class="hash-badge" />
+        <a :href="`/api/raw/${address}`">
+          {{ fileNames.join(", ") }}
+        </a>
+      </template>
+    </h2>
+    <div v-if="!error">
+      <div class="preview" v-if="mimeType">
+        <template v-if="mimeType.startsWith('audio')">
+          <audio controls :src="`/api/raw/${address}`" />
+        </template>
+        <template v-if="mimeType.startsWith('image')">
+          <a :href="`/api/raw/${address}`">
+            <img :src="`/api/raw/${address}`" />
+          </a>
+        </template>
+      </div>
+      <template v-if="attributes.length">
+        <h3>Own attributes ({{ attributes.length }})</h3>
+        <table>
+          <tr>
+            <th>Attribute name</th>
+            <th>Value</th>
+          </tr>
+          <tr v-for="[id, entry] in attributes" :key="id">
+            <td>{{ entry.attribute }}</td>
+            <td>
+              <Address
+                link
+                v-if="entry.value.t === 'Address'"
+                :address="entry.value.c"
+              />
+              <template v-else>
+                {{ entry.value.c }}
+              </template>
+            </td>
+          </tr>
+        </table>
+      </template>
+      <template v-if="backlinks.length">
+        <h3>Referred to ({{ backlinks.length }})</h3>
+        <table>
+          <tr>
+            <th>Entities</th>
+            <th>Attribute names</th>
+          </tr>
+          <tr v-for="[id, entry] in backlinks" :key="id">
+            <td>
+              <Address link :address="entry.entity" />
+            </td>
+            <td>
+              {{ entry.attribute }}
+            </td>
+          </tr>
+        </table>
+      </template>
+    </div>
+    <div v-else class="error">
+      {{ error }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+import Address from "@/components/Address.vue";
+import { useEntity } from "@/lib/entity";
+import HashBadge from "@/components/HashBadge.vue";
+
+export default defineComponent({
+  name: "File",
+  components: {
+    Address,
+    HashBadge,
+  },
+  props: {
+    address: {
+      type: String,
+      required: true,
+    },
+  },
+  data: () => {
+    return {
+      newEntryAttribute: "",
+      newEntryValue: "",
+    };
+  },
+  computed: {
+    mimeType(): string | undefined {
+      return this.attributes.find(([_, e]) => e.attribute === "FILE_MIME")?.[1]
+        .value.c;
+    },
+  },
+  setup(props) {
+    const { attributes, backlinks, error } = useEntity(props.address);
+
+    const fileNames = computed(() => {
+      const extantAddresses = backlinks.value
+        .filter(([_, e]) => e.attribute == "FILE_IS")
+        .map(([_, e]) => e.entity);
+
+      const result = new Set();
+      extantAddresses.forEach((address) => {
+        const { attributes } = useEntity(address);
+        result.add(
+          attributes.value.find(([_, e]) => e.attribute == "FILE_NAME")?.[1]
+            .value.c
+        );
+      });
+      return Array.from(result);
+    });
+
+    return {
+      attributes,
+      backlinks,
+      fileNames,
+      error,
+    };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+h2 a {
+  text-decoration: none;
+}
+
+.preview {
+  img {
+    max-height: 256px;
+  }
+}
+
+.hash-badge {
+  margin-right: 0.5em;
+}
+
+.error {
+  color: red;
+}
+</style>