feat: show edit on hover only

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>

src/components/CollectionList.vue

@@ -112,6 +112,7 @@ const onToggleVisibility = (collection: CollectionObject) => {
               icon="mdi-pencil"
               size="x-small"
               variant="text"
+              class="collection-edit-btn"
               @click.stop="onCollectionEdit(collection)"
             />
           </template>
@@ -145,4 +146,20 @@ const onToggleVisibility = (collection: CollectionObject) => {
 .v-list-item {
   cursor: pointer;
 }
+
+.collection-edit-btn {
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.v-list-item:hover .collection-edit-btn,
+.v-list-item:focus-within .collection-edit-btn {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .collection-edit-btn {
+    opacity: 1;
+  }
+}
 </style>