feat: tabs icon

Author: codewec

app/components/editoro/header/PinnedBadges.vue

@@ -135,6 +135,11 @@ watch(() => props.badges, async () => {
         class="editoro-file-badge"
         :class="{ 'editoro-file-badge-current': badge.isCurrent }"
       >
+        <UIcon
+          :name="badge.icon"
+          class="editoro-file-badge-leading"
+        />
+
         <button
           type="button"
           class="editoro-file-badge-label"
@@ -214,6 +219,12 @@ watch(() => props.badges, async () => {
   background: color-mix(in oklab, var(--ui-primary) 12%, transparent);
 }
 
+.editoro-file-badge-leading {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+}
+
 .editoro-file-badge-label {
   appearance: none;
   border: 0;

app/composables/useEditoroViewModel.ts

@@ -18,6 +18,28 @@ type ViewModelOptions = {
 }
 
 export function useEditoroViewModel(options: ViewModelOptions) {
+  function getBadgeIcon(path: string, node?: TreeNode) {
+    if (node?.icon) {
+      return node.icon
+    }
+
+    if (node?.type === 'directory') {
+      return 'i-lucide-folder'
+    }
+
+    const extension = getFileExtension(path)
+
+    if (extension === 'md' || extension === 'markdown') {
+      return 'i-simple-icons-markdown'
+    }
+
+    if (isImagePath(path)) {
+      return 'i-lucide-image'
+    }
+
+    return 'i-lucide-file'
+  }
+
   const selectedFolder = computed<DirectoryTreeNode | undefined>(() => {
     return options.selectedNode.value?.type === 'directory' ? options.selectedNode.value : undefined
   })
@@ -70,6 +92,7 @@ export function useEditoroViewModel(options: ViewModelOptions) {
         key: `pinned:${path}`,
         path,
         label: node?.label || getBaseName(path) || path,
+        icon: getBadgeIcon(path, node),
         isCurrent: currentPath === path,
         isPinned: true,
         canPin: true
@@ -84,6 +107,7 @@ export function useEditoroViewModel(options: ViewModelOptions) {
         label: currentNode.type === 'directory'
           ? currentNode.path
           : (currentNode.label || getBaseName(currentNode.path) || currentNode.path),
+        icon: getBadgeIcon(currentNode.path, currentNode),
         isCurrent: true,
         isPinned: false,
         canPin: true
@@ -93,6 +117,7 @@ export function useEditoroViewModel(options: ViewModelOptions) {
         key: 'root',
         path: '',
         label: options.t('main.root'),
+        icon: 'i-lucide-house',
         isCurrent: true,
         isPinned: false,
         canPin: false

app/types/editoro.ts

@@ -34,6 +34,7 @@ export type EditorPinnedBadge = {
   key: string
   path: string
   label: string
+  icon: string
   isCurrent: boolean
   isPinned: boolean
   canPin: boolean