feat(editor): add context menu and inline editing for tabs

src/renderer/components/editor/Tab.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { useSnippets, useSnippetUpdate } from '@/composables'
+import * as ContextMenu from '@/components/ui/shadcn/context-menu'
+import { useApp, useSnippets, useSnippetUpdate } from '@/composables'
 
 interface Props {
   name: string
@@ -9,6 +10,10 @@ const props = defineProps<Props>()
 
 const { selectedSnippetContent, selectedSnippet } = useSnippets()
 const { addToUpdateContentQueue } = useSnippetUpdate()
+const { highlightedSnippetId, highlightedFolderId } = useApp()
+
+const tabRef = ref<HTMLDivElement>()
+const isEdit = ref(false)
 
 const name = computed({
   get() {
@@ -26,14 +31,48 @@ const name = computed({
     )
   },
 })
+
+function onClickContextMenu() {
+  highlightedSnippetId.value = undefined
+  highlightedFolderId.value = undefined
+}
 </script>
 
 <template>
-  <div class="px-2 py-0.5 select-none">
+  <div
+    ref="tabRef"
+    data-editor-tab
+    class="border-border border-r px-2 py-0.5 select-none last:border-r-0"
+    @contextmenu="onClickContextMenu"
+  >
+    <ContextMenu.Root v-if="!isEdit">
+      <ContextMenu.Trigger>
+        <div
+          class="truncate"
+          @dblclick="isEdit = true"
+        >
+          {{ name }}
+        </div>
+      </ContextMenu.Trigger>
+      <ContextMenu.Content>
+        <ContextMenu.Item @click="isEdit = true">
+          Rename "<span class="max-w-36 truncate">{{ name }}</span>"
+        </ContextMenu.Item>
+        <ContextMenu.Separator />
+        <ContextMenu.Item>
+          Delete "<span class="max-w-36 truncate">{{ name }}</span>"
+        </ContextMenu.Item>
+      </ContextMenu.Content>
+    </ContextMenu.Root>
     <UiInput
+      v-else
       v-model="name"
       variant="ghost"
-      class="w-full px-0 py-0"
+      focus
+      select
+      class="w-full rounded-none px-0 py-0 leading-0"
+      @blur="isEdit = false"
+      @keydown.esc="isEdit = false"
     />
   </div>
 </template>

src/renderer/components/editor/header/Header.vue

@@ -50,12 +50,11 @@ const name = computed({
     </div>
     <div
       v-if="selectedSnippet?.contents && selectedSnippet.contents.length > 1"
-      class="border-border flex gap-1 border-b"
+      class="border-border grid auto-cols-fr grid-flow-col border-b"
     >
       <EditorTab
         v-for="(i, index) in selectedSnippet?.contents"
         :key="i.id"
-        class="flex-1"
         :name="i.label"
         :class="{
           'bg-list-selection text-list-selection-fg':

src/renderer/components/ui/input/Input.vue

@@ -21,6 +21,7 @@ interface Props {
   clearable?: boolean
   type?: 'text' | 'number' | 'textarea'
   focus?: boolean
+  select?: boolean
 }
 
 const model = defineModel<string>()
@@ -38,10 +39,18 @@ watchEffect(() => {
     })
   }
 })
+
+watchEffect(() => {
+  if (props.select) {
+    nextTick(() => {
+      inputRef.value?.select()
+    })
+  }
+})
 </script>
 
 <template>
-  <div class="relative flex">
+  <div :class="{ 'relative flex': clearable && model }">
     <input
       v-if="type !== 'textarea'"
       ref="inputRef"

src/renderer/components/ui/input/variants.ts

@@ -2,7 +2,7 @@ import type { VariantProps } from 'class-variance-authority'
 import { cva } from 'class-variance-authority'
 
 export const variants = cva(
-  'w-full rounded-md transition-colors duration-200 focus:outline-none placeholder:text-text-muted py-1 px-2 border',
+  'w-full rounded-md focus:outline-none placeholder:text-text-muted py-1 px-2 border',
   {
     variants: {
       variant: {