Add component bookmarkButton + interact bookmark (#560)

* add component bookmarkButton + interact bookmark

* Stared entrypoints in list + visibility control

* Refactoring + add tooltip

* Add preview for diaolog + fixes

* Rework dialog

* Fix button hover

* Rework bookmark preview and btn click

src/components/Bookmarks/BookmarkButton.vue

@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <v-tooltip top v-if="isBookmark || showEmpty">
+      <template v-slot:activator="{ on }">
+        <v-btn
+          v-on="on"
+          small
+          :class="customClass"
+          :outlined="isTextButton"
+          :icon="!isTextButton"
+          @click.prevent.stop="bookmarkState"
+        >
+          <v-icon v-if="showEmpty" :small="isTextButton">{{ isBookmark ? 'mdi-star' : 'mdi-star-outline' }}</v-icon>
+          <v-icon v-else small>mdi-star</v-icon>
+          <span v-if="isTextButton" class="ml-1 text--secondary">{{ isBookmark ? 'Remove bookmark' : 'Add bookmark' }}</span>
+        </v-btn>
+      </template>
+      <span v-if="!isTextButton">{{ isBookmark ? 'Remove bookmark' : 'Add bookmark' }}</span>
+    </v-tooltip>
+    <BookmarkDialog v-if="showEmpty"
+      v-model="openBookMarkDialog"
+      :alias="alias || ``"
+      :network="network"
+      @added="onBookmarkAdded"
+    />
+  </div>
+</template>
+
+
+<script>
+import BookmarkDialog from "./BookmarkDialog.vue";
+
+export default {
+  name: "BookmarkButton",
+  components: {
+    BookmarkDialog,
+  },
+  props: {
+    address: String,
+    network: String,
+    alias: String,
+    entrypoint: String,
+    customClass: String,
+    size: String,
+    isTextButton: Boolean,
+    showEmpty: Boolean,
+  },
+  data: () => ({
+    items: {},
+    showList: false,
+    isBookmark: false,
+    openBookMarkDialog: false,
+  }),
+  created() {
+    this.bookmarks.registerObserver(this.onBookmarkStateChanged);
+    this.detectBookmark();
+  },
+  computed: {
+    keysCount() {
+        return Object.keys(this.items).length;
+    },
+    bookmarkKey() {
+      return `${this.network}_${this.address}${this.entrypoint ? '_' + this.entrypoint : ''}`
+    }
+  },
+  methods: {
+    bookmarkState() {
+      if (this.isBookmark) {
+        this.bookmarks.remove(this.bookmarkKey);
+      } else {
+        this.openBookMarkDialog = !this.openBookMarkDialog;
+        this.name = this.alias || "";
+        
+      }
+    },
+    detectBookmark() {
+      let bookmarks = this.bookmarks.getAll();
+      this.isBookmark = bookmarks[this.bookmarkKey] !== undefined;
+    },
+    onBookmarkStateChanged(event, key) {
+      if (this.bookmarkKey !== key) {
+        return;
+      }
+      if (event === 'remove') {
+        this.isBookmark = false;
+      } else {
+        this.isBookmark = true;
+      }
+    },
+    onBookmarkAdded(value) {
+      let bookmark = {}
+      if (!this.entrypoint) {
+        bookmark = {
+          network: this.network,
+          address: this.address,
+          alias: value || this.alias,          
+        }
+      } else {
+        bookmark = {
+          network: this.network,
+          address: this.address,
+          entrypoint: this.entrypoint,
+          alias: value || this.alias,          
+        }
+      }
+      this.bookmarks.add(this.bookmarkKey, bookmark);
+      this.openBookMarkDialog = false;
+    },
+  }
+}
+</script>
+
+
+<style scoped>
+</style>

src/components/BookmarkDialog.vue → src/components/Bookmarks/BookmarkDialog.vue

@@ -1,14 +1,14 @@
 <template>
-    <v-dialog v-model="show" max-width="500" @keydown.esc="show = false" @keydown.enter="saveOnEnter" persistent>
+    <v-dialog v-model="show" max-width="550" @keydown.esc="show = false" @keydown.enter="saveOnEnter" persistent>
       <v-card flat outlined>
         <v-card-title class="sidebar d-flex justify-center py-2">
-          <span class="body-1 font-weight-medium text-uppercase text--secondary">Your contract name</span>
+          <span class="body-1 font-weight-medium text-uppercase text--secondary">Your bookmark name</span>
           <v-spacer></v-spacer>
           <v-btn icon small @click.stop="show = false">
             <v-icon>mdi-close</v-icon>
           </v-btn>
         </v-card-title>
-        <v-card-text class="pt-6 pb-0">
+        <v-card-text class="pt-3 pb-0">
           <v-text-field
               v-model="name"
               hide-details
@@ -18,8 +18,21 @@
               >
           </v-text-field>
         </v-card-text>
-        <v-card-actions class="justify-end px-5">
-          <v-btn color="primary" text @click="add">Add bookmark</v-btn>
+        <v-card-actions class="pb-3 px-6 d-flex justify-space-between justify-end align-end">
+          <div>
+            <span class="text--disabled">In bookmarks, will look like:</span>
+            <v-list-item v-if="name" class="item py-0 mt-1 px-3">
+              <v-list-item-content class="pa-0">
+
+                <v-list-item-title>{{ name }}</v-list-item-title>
+                <v-list-item-subtitle class="overline">{{ network }}</v-list-item-subtitle>
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-icon color="primary">mdi-star</v-icon>
+              </v-list-item-action>
+            </v-list-item>
+          </div>
+          <v-btn class="d-flex justify-center" color="primary" text @click="add">Add</v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -30,7 +43,8 @@ export default {
     name: "BookmarkDialog",
     props: {
         value: Boolean,
-        alias: String
+        alias: String,
+        network: String,
     },
     data: () => ({
         name: ""
@@ -62,4 +76,17 @@ export default {
         }
     }
 }
-</script>
+</script>
+
+<style scoped>
+  .item-text {
+    max-width: 315px !important;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .item {
+    max-width: 380px !important;
+    background-color: var(--v-data-base) !important;
+  }
+</style>

src/components/Bookmarks.vue → src/components/Bookmarks/Bookmarks.vue

@@ -1,13 +1,13 @@
 <template>
     <v-menu offset-y max-height="500" max-width="400">
       <template v-slot:activator="{ on, attrs }">
-        <v-btn class="btn-class text--secondary" icon v-bind="attrs" v-on="on">
+        <v-btn class="btn-class text--secondary" icon v-bind="attrs" v-on="on" @click="updateBookmarks">
             <v-icon v-if="keysCount > 0">mdi-star</v-icon>
             <v-icon v-else>mdi-star-outline</v-icon>
         </v-btn>
       </template>
       <v-list v-if="keysCount > 0" class="pa-0">
-        <v-list-item v-for="(item, index) in items" :key="index" :to="`/${item.network}/${item.address}/operations`">
+        <v-list-item v-for="(item, index) in items" :key="index" :to="getItemLink(item)">
             <v-list-item-content>
                 <v-list-item-title>{{ item.alias || item.address }}</v-list-item-title>
                 <v-list-item-subtitle class="overline">{{ item.network }}</v-list-item-subtitle>
@@ -21,7 +21,7 @@
       </v-list>
       <v-list v-else>
         <v-list-item>
-            <v-list-item-subtitle>You don't have favorite accounts yet. Add them by clicking on ⭐️ on the account page.</v-list-item-subtitle>
+            <span class="text--secondary">You don't have favorite accounts yet. Add them by clicking on ⭐️ on the account page or on the Interact tab.</span>
         </v-list-item>
       </v-list>
     </v-menu>
@@ -55,7 +55,10 @@ export default {
     },
     onStatusChanged() {
         this.updateBookmarks();
-    }
+    },
+    getItemLink(item) {
+        return `/${item.network}/${item.address}${item.entrypoint ? '/interact/' + item.entrypoint : ''}`;
+    },
   }
 }
 </script>

src/components/MainHeaderDescriptive.vue

@@ -39,7 +39,7 @@
 import SocialsList from "./SocialsList";
 import SearchBox from "./SearchBox";
 import ThemeSwitcher from "./ThemeSwitcher";
-import Bookmarks from "./Bookmarks";
+import Bookmarks from "./Bookmarks/Bookmarks";
 import ConnectWallet from "@/components/ConnectWallet";
 
 export default {

src/components/schema/schemaComponents/SchemaHeader.vue

@@ -4,15 +4,28 @@
       <span class="hash">{{ header }}</span>
       <span class="accent--text">{{ isForkPage ? (alias || shortcutOnly(address)) : storageName }}</span>
     </div>
+    <BookmarkButton v-if="isInteractPage"
+      :customClass="'text--secondary'"
+      showEmpty
+      :key="storageName"
+      :network="network"
+      :address="address"
+      :entrypoint="storageName"
+      :alias="`${storageName} ${alias}`"
+    />
   </h2>
 </template>
 
 <script>
 import { shortcutOnly } from "../../../utils/tz";
 import {mapActions} from "vuex";
+import BookmarkButton from "../../Bookmarks/BookmarkButton.vue";
 
 export default {
   name: "SchemaHeader",
+  components: {
+    BookmarkButton,
+  },
   props: {
     isStorage: Boolean,
     storageHtml: String,
@@ -22,23 +35,47 @@ export default {
     alias: String,
     network: String,
   },
-  methods: {
-    ...mapActions(["showClipboardOK"]),
-    shortcutOnly,
+  data: () => ({
+    page: '',
+  }),
+  created() {
+    this.setPage();
   },
   computed: {
     isForkPage() {
-      return this.$route.name === 'fork';
+      return this.page === 'fork';
+    },
+    isInteractPage() {
+      return this.page === 'interact';
     },
     header() {
-      if (this.$route.name === 'fork') {
+      if (this.page === 'fork') {
         return 'Fork: ';
       }
-      if (this.$route.name === 'deploy') {
+      if (this.page === 'deploy') {
         return 'Deploy';
       }
       return 'Interact: '
     }
   },
+  methods: {
+    ...mapActions(["showClipboardOK"]),
+    shortcutOnly,
+
+    setPage() {
+      if (this.$route.name === 'fork') {
+        this.page = 'fork';
+      } else if (this.$route.name === 'deploy') {
+        this.page = 'deploy';
+      } else {
+        this.page = 'interact';
+      }
+    },
+  },
+  watch: {
+    $route() {
+      this.setPage()
+    },
+  },
 }
 </script>