feat: add dblclick to edit folder and fragment name (#73)

src/renderer/components/sidebar/SidebarListItem.vue

@@ -9,6 +9,7 @@
     }"
     v-on="$listeners"
     @click="onClick"
+    @dblclick="onDblClick"
     @contextmenu="onContext"
   >
     <div @click="$emit('click:toggle')">
@@ -21,6 +22,7 @@
     </div>
     <AppIcon :name="icon" />
     <input
+      v-if="editable"
       ref="input"
       v-model="folderName"
       class="sidebar-list-item__input"
@@ -31,6 +33,10 @@
       :disabled="!editable"
       @keydown.enter="onClickOutside"
     >
+    <span
+      v-else
+      class="folder-name"
+    > {{ folderName }}</span>
     <slot />
   </div>
 </template>
@@ -128,6 +134,10 @@ export default {
     },
     isEditable () {
       return this.editableId === this.id
+    },
+    isSystem () {
+      const libraryItems = ['inBox', 'favorites', 'allSnippets', 'trash']
+      return libraryItems.includes(this.id)
     }
   },
 
@@ -145,16 +155,16 @@ export default {
         this.$store.commit('tags/SET_SELECTED_ID', this.id)
       }
     },
+    onDblClick () {
+      if (!this.isSystem) this.setEditable()
+    },
     onContext () {
       if (!this.tag) {
-        const libraryItems = ['inBox', 'favorites', 'allSnippets', 'trash']
-        const isLibrary = libraryItems.includes(this.id)
-
         if (this.id === 'trash') {
-          this.trashContext()
+          return this.trashContext()
         }
 
-        if (isLibrary) return
+        if (this.isSystem) return
 
         this.folderContext()
       } else {
@@ -291,6 +301,11 @@ export default {
       color: var(--color-contrast-higher);
     }
   }
+  .folder-name {
+    display: flex;
+    height: 20px;
+    align-items: center;
+  }
   svg {
     width: 16px;
     height: 16px;

src/renderer/components/snippets/SnippetTabsItem.vue

@@ -6,9 +6,11 @@
       active: isActive
     }"
     v-on="$listeners"
+    @dblclick="onDblClick"
     @contextmenu="onTabContext"
   >
     <input
+      v-if="editable"
       ref="input"
       v-model="computedLabel"
       :class="{
@@ -18,6 +20,10 @@
       :disabled="!editable"
       @keydown.enter="onClickOutside"
     >
+    <span
+      v-else
+      class="fragment-name"
+    >{{ computedLabel }}</span>
   </div>
 </template>
 
@@ -61,17 +67,21 @@ export default {
   },
 
   methods: {
+    setEditable () {
+      this.editable = true
+      this.$nextTick(() => {
+        this.$refs.input.focus()
+        this.$refs.input.select()
+      })
+    },
+    onDblClick () {
+      this.setEditable()
+    },
     onTabContext () {
       menu.popup([
         {
           label: `Rename "${this.label}"`,
-          click: () => {
-            this.editable = true
-            this.$nextTick(() => {
-              this.$refs.input.focus()
-              this.$refs.input.select()
-            })
-          }
+          click: () => this.setEditable()
         },
         {
           type: 'separator'
@@ -107,10 +117,11 @@ export default {
   align-items: center;
   justify-content: center;
   height: 100%;
+  width: 100%;
   padding: 0 var(--spacing-xs);
   color: var(--color-contrast-medium);
   font-size: var(--text-sm);
-  -webkit-user-select: none;
+  user-select: none;
   input {
     width: 100%;
     color: var(--color-contrast-medium);
@@ -120,7 +131,6 @@ export default {
     outline: none;
     &[disabled] {
       color: var(--color-contrast-medium);
-      -webkit-user-select: none;
     }
     &.is-editable {
       border: 1px solid var(--color-primary);