From 10b699a6f72604acf55559d6af3ecb2d2bdc6283 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyasthomas@gmail.com>
Date: Sun, 10 Nov 2019 12:08:10 +0530
Subject: [PATCH] :sparkles: Favorite (star) History entries

---
 assets/css/styles.scss |  7 +++++--
 components/history.vue | 31 ++++++++++++++++++++++++-------
 pages/index.vue        |  3 ++-
 3 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index f288d59c6..220f9aa08 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -671,9 +671,12 @@ fieldset#history {
 
     span {
       position: absolute;
-      top: 12px;
-      right: 12px;
+      top: 8px;
+      right: 8px;
       font-family: 'Roboto Mono', monospace;
+      background-color: var(--bg-color);
+      padding: 4px 8px;
+      border-radius: 8px;
     }
   }
 }
diff --git a/components/history.vue b/components/history.vue
index e4b34cc62..8c322d746 100644
--- a/components/history.vue
+++ b/components/history.vue
@@ -9,7 +9,12 @@
       <div class="show-on-small-screen">
         <li>
           <button class="icon">
-            <i class="material-icons">history</i>
+            <i class="material-icons">details</i>
+          </button>
+        </li>
+        <li>
+          <button class="icon">
+            <i class="material-icons">change_history</i>
           </button>
         </li>
       </div>
@@ -72,11 +77,15 @@
       <ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
         <div class="show-on-small-screen">
           <li>
-            <button v-if="entry.usesScripts" class="icon" v-tooltip="'This entry used pre-request scripts'">
-              <i class="material-icons">code</i>
+            <button class="icon" :class="{ stared: entry.star }" @click="toggleStar(index)" v-tooltip="{ content: !entry.star ? 'Add star' : 'Remove star'}">
+              <i class="material-icons" v-if="entry.star">star</i>
+              <i class="material-icons" v-else>star_border</i>
             </button>
-            <button v-else class="icon" v-tooltip="'No pre-request scripts'">
-              <i class="material-icons">http</i>
+          </li>
+          <li>
+            <button class="icon" v-tooltip="{ content: !entry.usesScripts ? 'No pre-request script' : 'Used pre-request script'}">
+              <i class="material-icons" v-if="!entry.usesScripts">http</i>
+              <i class="material-icons" v-else>code</i>
             </button>
           </li>
         </div>
@@ -177,9 +186,13 @@
     opacity: 0;
   }
 
+  .stared {
+    color: #F8E81C !important;
+  }
+
   @media (max-width: 720px) {
     .virtual-list.filled {
-      min-height: 200px;
+      min-height: 320px;
     }
   }
 
@@ -348,8 +361,12 @@
         this.history = byDuration;
         this.reverse_sort_duration = !this.reverse_sort_duration;
       },
-      toggleCollapse: function() {
+      toggleCollapse() {
         this.show = !this.show
+      },
+      toggleStar(index) {
+        this.history[index]["star"] = !this.history[index]["star"];
+        updateOnLocalStorage("history", this.history);
       }
     }
   };
diff --git a/pages/index.vue b/pages/index.vue
index 075392f48..732b68d16 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1352,7 +1352,8 @@ export default {
             path: this.path,
             usesScripts: Boolean(this.preRequestScript),
             preRequestScript: this.preRequestScript,
-            duration
+            duration,
+            star: false
           };
           this.$refs.historyComponent.addEntry(entry);
         })();