Add shortcut based multiple deletes. Remove previous implementation.

src/components/ImageItem.vue

 <template>
   <div
-    @mouseover="hovered = true"
-    @mouseleave="hovered = checked ? true : false"
-    @click.ctrl="
+    @click.ctrl.shift.exact="
       checked = !checked;
       $emit('checked', checked, hash);
     "
@@ -13,13 +11,12 @@
         checked = !checked;
         $emit('checked', checked, hash);
       "
-      :style="{ color: checked ? 'white' : 'black' }"
-      v-show="hovered"
+      v-show="checked"
       id="checkmark"
     >
       X
     </div>
-    <a @click.ctrl.prevent :href="`/${hash}`">
+    <a @click.ctrl.shift.prevent :href="`/${hash}`">
       <img :src="`/api/image/${hash}/file`" />
     </a>
   </div>
@@ -29,7 +26,6 @@
 export default {
   data: () => {
     return {
-      hovered: false,
       checked: false,
     };
   },
@@ -53,10 +49,11 @@ img {
 #checkmark {
   font-family: "Lucida Console", monospace;
   font-weight: bold;
-  background: rgb(194, 184, 184);
+  color: white;
+  background: rgb(209, 39, 39);
   position: absolute;
   top: 0.4em;
   left: 0.4em;
-  padding: 0.4em 0.4em;
+  padding: 0.4em 0.6em;
 }
 </style>
\ No newline at end of file

src/components/ImageList.vue

@@ -3,7 +3,7 @@
     <div id="item-container" v-for="(hash, index) in hashArray" :key="index">
       <ImageItem :hash="hash" @checked="appendToDeleteArray"></ImageItem>
     </div>
-    <button @click="deleteImages(deleteArray)">Delete</button>
+    <button v-show="deleteArray.length" @click="deleteImages(deleteArray)">Delete</button>
   </section>
 </template>
 

src/components/ImageUpload.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import { mapActions, mapState } from "vuex";
+import { mapActions } from "vuex";
 export default {
   data: () => {
     return {
@@ -34,7 +34,6 @@ export default {
     noImage: function () {
       return !this.imageList;
     },
-    // ...mapState(["stateHashArray"]),
   },
   methods: {
     updateImageList() {