add header for browse

ui/src/views/Browse.vue

@@ -1,15 +1,26 @@
 <template>
   <div class="browser">
-    <div class="view" v-for="address in addresses" :key="address">
+    <div class="view" v-for="(address, idx) in addresses" :key="address">
+      <header :class="{ disabled: addresses.length === 1 }">
+        <sl-icon-button
+          class="this-button"
+          name="bookmark"
+          @click="visit(idx)"
+        />
+        <sl-icon-button
+          class="close-button"
+          name="x-circle"
+          @click="close(idx)"
+        />
+      </header>
       <Inspect :address="address" />
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
-import { useEntity } from "@/lib/entity";
 import Inspect from "@/views/Inspect.vue";
+import { defineComponent, PropType } from "vue";
 
 export default defineComponent({
   name: "Browse",
@@ -25,7 +36,20 @@ export default defineComponent({
   data: () => {
     return {};
   },
-  setup(props) {
+  setup(props) {},
+  methods: {
+    visit(idx: number) {
+      this.$router.push({
+        params: { addresses: [this.$route.params.addresses[idx]] },
+      });
+    },
+    close(idx: number) {
+      const addresses = [...this.$route.params.addresses];
+      addresses.splice(idx, 1);
+      this.$router.push({
+        params: { addresses },
+      });
+    },
   },
 });
 </script>
@@ -46,5 +70,27 @@ export default defineComponent({
 
   margin: 1rem 0;
   padding: 0 1rem;
+
+  header {
+    position: relative;
+    margin: 0;
+    min-height: 1em;
+
+    .this-button {
+      position: absolute;
+      left: 50%;
+      translate: transformX(-50%);
+    }
+
+    .close-button {
+      position: absolute;
+      right: 0;
+    }
+
+    &.disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
 }
 </style>