first working browse/uplink, css tweaks

ui/src/components/Address.vue

@@ -1,13 +1,13 @@
 <template>
   <div :class="['address', { identified: Boolean(inferredIds) }]" ref="root">
     <hash-badge :address="address" class="hash-badge" />
-    <router-link v-if="isFile" :to="{ name: 'file', params: { address } }">
+    <up-link v-if="isFile" :to="{ entity: address }">
       {{ address }}
-    </router-link>
+    </up-link>
     <template v-else>
-      <router-link v-if="link" :to="{ name: 'inspect', params: { address } }">
+      <up-link v-if="link" :to="{ entity: address }">
         {{ inferredIds.join(" | ") || address }}
-      </router-link>
+      </up-link>
       <template v-else>
         {{ inferredIds.join(" | ") || address }}
       </template>
@@ -17,19 +17,18 @@
 
 <script lang="ts">
 import { identify, useEntity } from "@/lib/entity";
-import { IEntry } from "@/types/base";
 import {
   computed,
   ComputedRef,
   defineComponent,
   onMounted,
-  reactive,
   ref,
 } from "vue";
 import HashBadge from "./HashBadge.vue";
+import UpLink from "./UpLink.vue";
 
 export default defineComponent({
-  components: { HashBadge },
+  components: { HashBadge, UpLink },
   name: "Address",
   props: {
     address: {
@@ -84,7 +83,8 @@ export default defineComponent({
   align-items: center;
 }
 
-.address, .address a {
+.address,
+.address a {
   line-break: anywhere;
 }
 

ui/src/components/UpLink.vue

@@ -0,0 +1,47 @@
+<template>
+  <router-link :to="routerTo">
+    <slot />
+  </router-link>
+</template>
+
+<script lang="ts">
+import { Address, VALUE_TYPE } from "@/types/base";
+import { defineComponent, PropType } from "vue";
+import { RouteLocationRaw } from "vue-router";
+
+interface IPointer {
+  entity?: Address;
+  attribute?: string;
+  value?: { t: VALUE_TYPE; c: string };
+}
+
+export default defineComponent({
+  name: "UpLink",
+  props: {
+    to: {
+      type: Object as PropType<IPointer>,
+      required: true,
+    },
+  },
+  computed: {
+    routerTo(): RouteLocationRaw {
+      if (this.$route.name == "browse") {
+        if (this.to.entity) {
+          return {
+            name: "browse",
+            params: {
+              addresses: [...this.$route.params.addresses].concat([
+                this.to.entity,
+              ]),
+            },
+          };
+        }
+      }
+      return {};
+    },
+  },
+});
+</script>
+
+<style scoped lang="scss">
+</style>

ui/src/views/Browse.vue

@@ -33,12 +33,13 @@ export default defineComponent({
 <style scoped lang="scss">
 .browser {
   display: flex;
-
   min-height: 100%;
+  overflow-x: auto;
 }
 
 .view {
-  max-width: 33em;
+  min-width: 30em;
+  max-width: 30em;
 
   border-left: 1px solid var(--foreground);
   border-right: 1px solid var(--foreground);