feat: file search, use octicons

Author: taskylizard

app/components/diff/FileTree.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { FileChange } from '#shared/types'
-import { getFileIcon } from '~/utils/file-icons'
 
 interface DiffTreeNode {
   name: string
@@ -113,11 +112,11 @@ function isExpanded(path: string): boolean {
 function getChangeIcon(type: 'added' | 'removed' | 'modified') {
   switch (type) {
     case 'added':
-      return 'i-carbon-add-alt text-green-500'
+      return 'i-octicon-diff-added-16 text-green-500'
     case 'removed':
-      return 'i-carbon-subtract-alt text-red-500'
+      return 'i-octicon-diff-removed-16 text-red-500'
     case 'modified':
-      return 'i-carbon-edit text-yellow-500'
+      return 'i-octicon-diff-modified-16 text-yellow-500'
   }
 }
 
@@ -172,8 +171,7 @@ function handleFileClick(node: DiffTreeNode) {
           :style="{ paddingLeft: `${depth * 12 + 32}px` }"
           @click="handleFileClick(node)"
         >
-          <span class="w-4 h-4 shrink-0" :class="getFileIcon(node.name)" />
-          <span class="w-3 h-3 shrink-0" :class="getChangeIcon(node.changeType!)" />
+          <span class="w-4 h-4 shrink-0" :class="getChangeIcon(node.changeType!)" />
           <span class="truncate">{{ node.name }}</span>
         </button>
       </template>

app/components/diff/SidebarPanel.vue

@@ -39,9 +39,18 @@ const sectionList = computed(() => {
     .sort((a, b) => a.order - b.order)
 })
 
+const fileSearch = ref('')
+
 const filteredChanges = computed(() => {
-  if (fileFilter.value === 'all') return props.allChanges
-  return props.allChanges.filter(f => f.type === fileFilter.value)
+  let files = props.allChanges
+  if (fileFilter.value !== 'all') {
+    files = files.filter(f => f.type === fileFilter.value)
+  }
+  if (fileSearch.value.trim()) {
+    const query = fileSearch.value.trim().toLowerCase()
+    files = files.filter(f => f.path.toLowerCase().includes(query))
+  }
+  return files
 })
 
 function getSemverBadgeClass(semverDiff: string | null | undefined): string {
@@ -185,33 +194,51 @@ function handleFileSelect(file: FileChange) {
         />
       </summary>
 
-      <div class="border-b border-border px-3 py-2 shrink-0 flex items-center justify-end">
-        <select
-          v-model="fileFilter"
-          :aria-label="$t('compare.filter_files_label')"
-          class="text-[10px] px-2 py-1 bg-bg-subtle border border-border rounded font-mono cursor-pointer hover:border-border-hover transition-colors"
-        >
-          <option value="all">
-            {{ $t('compare.file_filter_option.all', { count: allChanges.length }) }}
-          </option>
-          <option value="added">
-            {{ $t('compare.file_filter_option.added', { count: compare.stats.filesAdded }) }}
-          </option>
-          <option value="removed">
-            {{ $t('compare.file_filter_option.removed', { count: compare.stats.filesRemoved }) }}
-          </option>
-          <option value="modified">
-            {{ $t('compare.file_filter_option.modified', { count: compare.stats.filesModified }) }}
-          </option>
-        </select>
+      <div class="border-b border-border px-3 py-2 shrink-0 space-y-2">
+        <div class="relative">
+          <span
+            class="absolute left-2 top-1/2 -translate-y-1/2 i-carbon-search w-3 h-3 text-fg-subtle pointer-events-none"
+          />
+          <input
+            v-model="fileSearch"
+            type="search"
+            :placeholder="$t('compare.search_files_placeholder')"
+            :aria-label="$t('compare.search_files_placeholder')"
+            class="w-full text-[11px] pl-6.5 pr-2 py-1 bg-bg-subtle border border-border rounded font-mono placeholder:text-fg-subtle transition-colors hover:border-border-hover focus:border-accent focus:outline-none"
+          />
+        </div>
+        <div class="flex items-center justify-end">
+          <select
+            v-model="fileFilter"
+            :aria-label="$t('compare.filter_files_label')"
+            class="text-[10px] px-2 py-1 bg-bg-subtle border border-border rounded font-mono cursor-pointer hover:border-border-hover transition-colors"
+          >
+            <option value="all">
+              {{ $t('compare.file_filter_option.all', { count: allChanges.length }) }}
+            </option>
+            <option value="added">
+              {{ $t('compare.file_filter_option.added', { count: compare.stats.filesAdded }) }}
+            </option>
+            <option value="removed">
+              {{ $t('compare.file_filter_option.removed', { count: compare.stats.filesRemoved }) }}
+            </option>
+            <option value="modified">
+              {{
+                $t('compare.file_filter_option.modified', { count: compare.stats.filesModified })
+              }}
+            </option>
+          </select>
+        </div>
       </div>
 
       <div class="flex-1 overflow-y-auto min-h-0">
         <div v-if="filteredChanges.length === 0" class="p-8 text-center text-xs text-fg-muted">
           {{
-            fileFilter === 'all'
-              ? $t('compare.no_files_all')
-              : $t('compare.no_files_filtered', { filter: $t(`compare.filter.${fileFilter}`) })
+            fileSearch.trim()
+              ? $t('compare.no_files_search', { query: fileSearch.trim() })
+              : fileFilter === 'all'
+                ? $t('compare.no_files_all')
+                : $t('compare.no_files_filtered', { filter: $t(`compare.filter.${fileFilter}`) })
           }}
         </div>
 

i18n/locales/en.json

@@ -1011,7 +1011,9 @@
       "removed": "Removed ({count})",
       "modified": "Modified ({count})"
     },
+    "search_files_placeholder": "Search files...",
     "no_files_all": "No files",
+    "no_files_search": "No files matching \"{query}\"",
     "no_files_filtered": "No {filter} files",
     "filter": {
       "added": "added",

lunaria/files/en-GB.json

@@ -1011,7 +1011,9 @@
       "removed": "Removed ({count})",
       "modified": "Modified ({count})"
     },
+    "search_files_placeholder": "Search files...",
     "no_files_all": "No files",
+    "no_files_search": "No files matching \"{query}\"",
     "no_files_filtered": "No {filter} files",
     "filter": {
       "added": "added",

lunaria/files/en-US.json

@@ -1011,7 +1011,9 @@
       "removed": "Removed ({count})",
       "modified": "Modified ({count})"
     },
+    "search_files_placeholder": "Search files...",
     "no_files_all": "No files",
+    "no_files_search": "No files matching \"{query}\"",
     "no_files_filtered": "No {filter} files",
     "filter": {
       "added": "added",

package.json

@@ -50,6 +50,7 @@
     "@floating-ui/vue": "1.1.10",
     "@iconify-json/carbon": "1.2.18",
     "@iconify-json/lucide": "1.2.87",
+    "@iconify-json/octicon": "1.2.20",
     "@iconify-json/simple-icons": "1.2.68",
     "@iconify-json/svg-spinners": "1.2.4",
     "@iconify-json/vscode-icons": "1.2.40",