popup: move remove button to overflow/toggle menu to support further actions in the future

Author: craftamap

src/popup/components/InstanceItem.vue

@@ -50,15 +50,26 @@
             </div>
           </div>
           <div id="right">
-            <div class="instance-icon-bar-remove">
-              <RemoveIcon
-                @click="toggleRemove"
+            <div class="instance-icon-bar-chevron">
+              <ChevronIcon
+                :orientation="showHidden ? 'up' : 'down'"
+                @click="toggleHidden"
               />
             </div>
           </div>
         </div>
       </div>
     </div>
+    <div
+      v-if="showHidden"
+      class="instance-hidden-icon-bar"
+    >
+      <div class="instance-icon-bar-remove">
+        <RemoveIcon
+          @click="toggleRemove"
+        />
+      </div>
+    </div>
     <div
       v-if="showRemove"
       class="delete-section"
@@ -78,13 +89,15 @@ import stripHtml from '../../shared/util/stripHtml'
 import ViewerIcon from './icons/ViewerIcon.vue'
 import UptimeIcon from './icons/UptimeIcon.vue'
 import RemoveIcon from './icons/RemoveIcon.vue'
+import ChevronIcon from './icons/ChevronIcon.vue'
 
 export default {
 	name: 'InstanceItem',
 	components: {
 		ViewerIcon,
 		UptimeIcon,
 		RemoveIcon,
+		ChevronIcon,
 	},
 	props: {
 		instance: {
@@ -94,6 +107,7 @@ export default {
 	},
 	data () {
 		return {
+			showHidden: false,
 			showRemove: false,
 		}
 	},
@@ -108,6 +122,9 @@ export default {
 		},
 	},
 	methods: {
+		toggleHidden () {
+			this.showHidden = !this.showHidden
+		},
 		toggleRemove () {
 			this.showRemove = !this.showRemove
 		},
@@ -201,12 +218,12 @@ export default {
     }
   }
 
-  .instance-icon-bar {
+  .instance-icon-bar, .instance-hidden-icon-bar {
     display: flex;
     justify-content: space-between;
     align-items: center;
 
-    .instance-icon-bar-viewers, .instance-icon-bar-uptime, .instance-icon-bar-remove {
+    .instance-icon-bar-viewers, .instance-icon-bar-uptime, .instance-icon-bar-chevron, .instance-icon-bar-remove {
       display: inline-block;
       vertical-align: middle;
     }

src/popup/components/icons/ChevronIcon.vue

@@ -0,0 +1,50 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="chevron-icon"
+    :class="`chevron-icon-${orientation}`"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    @click="emitClick"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+	name: 'ChevronIcon',
+	props: {
+		orientation: {
+			type: String,
+			default: 'down',
+		},
+	},
+	emits: [
+		'click',
+	],
+	methods: {
+		emitClick () {
+			this.$emit('click')
+		},
+	},
+}
+</script>
+
+<style lang="scss">
+.chevron-icon {
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  cursor: pointer;
+}
+
+.chevron-icon-up {
+		transform: rotate(180deg);
+}
+
+</style>