fix: handle file-directory transitions in compare

WIP

Author: taskylizard

app/components/diff/Line.vue

@@ -26,7 +26,9 @@ const lineNumberOld = computed(() => {
   if (props.line.type === 'normal') {
     return props.line.oldLineNumber
   }
-  return props.line.type === 'delete' ? props.line.lineNumber ?? props.line.oldLineNumber : undefined
+  return props.line.type === 'delete'
+    ? (props.line.lineNumber ?? props.line.oldLineNumber)
+    : undefined
 })
 
 const rowClasses = computed(() => {
@@ -74,15 +76,13 @@ function normalizeLanguage(raw?: string): 'javascript' | 'typescript' | 'json' |
   const lang = raw.toLowerCase()
   if (lang.includes('json')) return 'json'
   if (lang === 'ts' || lang.includes('typescript') || lang.includes('tsx')) return 'typescript'
-  if (lang === 'js' || lang.includes('javascript') || lang.includes('mjs') || lang.includes('cjs')) return 'javascript'
+  if (lang === 'js' || lang.includes('javascript') || lang.includes('mjs') || lang.includes('cjs'))
+    return 'javascript'
   return 'plaintext'
 }
 
 function escapeHtml(str: string): string {
-  return str
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
+  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
 }
 
 async function highlightSegments() {
@@ -91,7 +91,10 @@ async function highlightSegments() {
   const lang = normalizeLanguage(diffContext?.language?.value)
   // If language unsupported, keep escaped plain text
   if (lang === 'plaintext') {
-    renderedSegments.value = props.line.content.map(seg => ({ html: escapeHtml(seg.value), type: seg.type }))
+    renderedSegments.value = props.line.content.map(seg => ({
+      html: escapeHtml(seg.value),
+      type: seg.type,
+    }))
     return
   }
 

app/components/diff/Table.vue

@@ -10,7 +10,6 @@ const props = defineProps<{
   wordWrap?: boolean
 }>()
 
-
 const language = computed(() => {
   if (!props.fileName) return 'text'
   return guessLanguageFromPath(props.fileName)

app/components/diff/ViewerPanel.vue

@@ -102,7 +102,9 @@ function computeDiff() {
   }
 
   const hunksWithSkips = insertSkipBlocks(
-    parsed.hunks.filter((h): h is typeof parsed.hunks[number] & { type: 'hunk' } => h.type === 'hunk'),
+    parsed.hunks.filter(
+      (h): h is (typeof parsed.hunks)[number] & { type: 'hunk' } => h.type === 'hunk',
+    ),
   )
   const stats = countDiffStats(hunksWithSkips)
 
@@ -187,7 +189,6 @@ const changeRatioPercent = computed(() => calcPercent(maxChangeRatio.value, 0, 1
 const diffDistancePercent = computed(() => calcPercent(maxDiffDistance.value, 1, 60))
 const charEditPercent = computed(() => calcPercent(inlineMaxCharEdits.value, 0, 10))
 
-
 function formatBytes(bytes: number | undefined): string {
   if (bytes === undefined) return ''
   if (bytes < 1024) return `${bytes} B`
@@ -225,10 +226,7 @@ function getCodeUrl(version: string): string {
 
         <!-- Stats -->
         <template v-if="diff?.stats">
-          <span
-            v-if="diff.stats.additions > 0"
-            class="text-xs text-green-500 font-mono shrink-0"
-          >
+          <span v-if="diff.stats.additions > 0" class="text-xs text-green-500 font-mono shrink-0">
             +{{ diff.stats.additions }}
           </span>
           <span v-if="diff.stats.deletions > 0" class="text-xs text-red-500 font-mono shrink-0">
@@ -261,7 +259,10 @@ function getCodeUrl(version: string): string {
           >
             <span class="i-carbon-settings w-3.5 h-3.5" />
             Options
-            <span class="i-carbon-chevron-down w-3 h-3 transition-transform" :class="{ 'rotate-180': showOptions }" />
+            <span
+              class="i-carbon-chevron-down w-3 h-3 transition-transform"
+              :class="{ 'rotate-180': showOptions }"
+            />
           </button>
 
           <!-- Dropdown menu -->
@@ -316,12 +317,18 @@ function getCodeUrl(version: string): string {
               </div>
 
               <!-- Sliders -->
-              <motion.div class="flex flex-col gap-2" :animate="{ opacity: mergeModifiedLines ? 1 : 0 }">
+              <motion.div
+                class="flex flex-col gap-2"
+                :animate="{ opacity: mergeModifiedLines ? 1 : 0 }"
+              >
                 <!-- Change ratio slider -->
                 <div class="sr-only">
                   <label for="change-ratio">Change ratio</label>
                 </div>
-                <div class="slider-shell min-w-[360px]" :class="{ 'is-disabled': !mergeModifiedLines }">
+                <div
+                  class="slider-shell min-w-[360px]"
+                  :class="{ 'is-disabled': !mergeModifiedLines }"
+                >
                   <div class="slider-labels">
                     <span class="slider-label">Change ratio</span>
                     <span class="slider-value tabular-nums">{{ maxChangeRatio.toFixed(2) }}</span>
@@ -351,7 +358,10 @@ function getCodeUrl(version: string): string {
                 <div class="sr-only">
                   <label for="diff-distance">Diff distance</label>
                 </div>
-                <div class="slider-shell min-w-[360px]" :class="{ 'is-disabled': !mergeModifiedLines }">
+                <div
+                  class="slider-shell min-w-[360px]"
+                  :class="{ 'is-disabled': !mergeModifiedLines }"
+                >
                   <div class="slider-labels">
                     <span class="slider-label">Diff distance</span>
                     <span class="slider-value tabular-nums">{{ maxDiffDistance }}</span>
@@ -381,7 +391,10 @@ function getCodeUrl(version: string): string {
                 <div class="sr-only">
                   <label for="char-edits">Char edits</label>
                 </div>
-                <div class="slider-shell min-w-[360px]" :class="{ 'is-disabled': !mergeModifiedLines }">
+                <div
+                  class="slider-shell min-w-[360px]"
+                  :class="{ 'is-disabled': !mergeModifiedLines }"
+                >
                   <div class="slider-labels">
                     <span class="slider-label">Char edits</span>
                     <span class="slider-value tabular-nums">{{ inlineMaxCharEdits }}</span>
@@ -465,7 +478,6 @@ function getCodeUrl(version: string): string {
         :enable-shiki="true"
         :word-wrap="wordWrap"
       />
-
     </div>
   </div>
 </template>
@@ -494,7 +506,10 @@ function getCodeUrl(version: string): string {
   border-radius: 12px;
   overflow: hidden;
   cursor: grab;
-  transition: background-color 150ms ease, border-color 150ms ease, opacity 150ms ease;
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease,
+    opacity 150ms ease;
 }
 
 .slider-shell:hover {
@@ -569,7 +584,9 @@ function getCodeUrl(version: string): string {
   inset: 0 auto 0 0;
   background: var(--bg-subtle);
   border-radius: 10px;
-  transition: width 150ms ease-out, background-color 150ms ease-out;
+  transition:
+    width 150ms ease-out,
+    background-color 150ms ease-out;
   z-index: 2;
   pointer-events: none;
 }

app/pages/compare/[...path].vue

@@ -121,7 +121,6 @@ function getChangeIcon(type: FileChange['type']): string {
   }
 }
 
-
 const fromVersionUrlPattern = computed(() => {
   return `/compare/${packageName.value}/v/{version}...${toVersion.value}`
 })
@@ -204,7 +203,9 @@ useSeoMeta({
 
     <!-- Error: invalid route -->
     <div v-if="!parsedRoute.range" class="container py-20 text-center">
-      <p class="text-fg-muted mb-4">Invalid comparison URL. Use format: /compare/package/v/from...to</p>
+      <p class="text-fg-muted mb-4">
+        Invalid comparison URL. Use format: /compare/package/v/from...to
+      </p>
       <NuxtLink :to="packageRoute()" class="btn">Go to package</NuxtLink>
     </div>
 
@@ -239,7 +240,9 @@ useSeoMeta({
                   <span class="text-yellow-500">~{{ compare.stats.filesModified }}</span>
                 </span>
                 <span v-if="compare.dependencyChanges.length > 0" class="text-fg-muted">
-                  {{ compare.dependencyChanges.length }} dep{{ compare.dependencyChanges.length !== 1 ? 's' : '' }}
+                  {{ compare.dependencyChanges.length }} dep{{
+                    compare.dependencyChanges.length !== 1 ? 's' : ''
+                  }}
                 </span>
               </div>
             </div>
@@ -272,11 +275,10 @@ useSeoMeta({
               </summary>
 
               <div class="space-y-2 ml-5 max-h-40 overflow-y-auto">
-                <div
-                  v-for="[section, changes] in groupedDeps"
-                  :key="section"
-                >
-                  <div class="text-[10px] font-medium text-fg-subtle uppercase tracking-wide mb-1.5">
+                <div v-for="[section, changes] in groupedDeps" :key="section">
+                  <div
+                    class="text-[10px] font-medium text-fg-subtle uppercase tracking-wide mb-1.5"
+                  >
                     {{ formatSection(section) }}
                   </div>
                   <div class="space-y-1">
@@ -306,11 +308,19 @@ useSeoMeta({
                       </NuxtLink>
 
                       <!-- Version change -->
-                      <div class="flex items-center gap-1.5 text-fg-muted font-mono text-[10px] ml-auto shrink-0">
-                        <span v-if="dep.from" :class="{ 'line-through opacity-50': dep.type === 'updated' }">
+                      <div
+                        class="flex items-center gap-1.5 text-fg-muted font-mono text-[10px] ml-auto shrink-0"
+                      >
+                        <span
+                          v-if="dep.from"
+                          :class="{ 'line-through opacity-50': dep.type === 'updated' }"
+                        >
                           {{ dep.from }}
                         </span>
-                        <span v-if="dep.type === 'updated'" class="i-carbon-arrow-right w-2.5 h-2.5" />
+                        <span
+                          v-if="dep.type === 'updated'"
+                          class="i-carbon-arrow-right w-2.5 h-2.5"
+                        />
                         <span v-if="dep.to">{{ dep.to }}</span>
                       </div>
 
@@ -345,7 +355,7 @@ useSeoMeta({
               <span class="i-carbon-document w-3.5 h-3.5" />
               Changed Files
             </h2>
-            
+
             <!-- Filter dropdown -->
             <select
               v-model="fileFilter"
@@ -371,7 +381,9 @@ useSeoMeta({
               :key="file.path"
               type="button"
               class="w-full px-3 py-2 flex items-center gap-2 text-sm text-left hover:bg-bg-muted transition-colors group"
-              :class="{ 'bg-bg-muted border-l-3 border-l-blue-500': selectedFile?.path === file.path }"
+              :class="{
+                'bg-bg-muted border-l-3 border-l-blue-500': selectedFile?.path === file.path,
+              }"
               @click="selectedFile = file"
             >
               <!-- File icon -->
@@ -391,7 +403,6 @@ useSeoMeta({
 
       <!-- Right side: Diff viewer -->
       <div class="flex-1 flex flex-col min-w-0 overflow-hidden">
-
         <!-- Diff viewer panel -->
         <div class="flex-1 overflow-hidden bg-bg-subtle">
           <DiffViewerPanel
@@ -403,7 +414,9 @@ useSeoMeta({
           />
           <div v-else class="h-full flex items-center justify-center text-center p-8">
             <div>
-              <span class="i-carbon-document-blank w-16 h-16 mx-auto text-fg-subtle/50 block mb-4" />
+              <span
+                class="i-carbon-document-blank w-16 h-16 mx-auto text-fg-subtle/50 block mb-4"
+              />
               <p class="text-fg-muted">Select a file from the sidebar to view its diff</p>
             </div>
           </div>

app/utils/cn.ts

@@ -1,5 +1,5 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))

app/utils/language-detection.ts

@@ -9,62 +9,62 @@ export function guessLanguageFromPath(filePath: string): string {
   // Extension-based mapping
   const extMap: Record<string, string> = {
     // JavaScript/TypeScript
-    'js': 'javascript',
-    'mjs': 'javascript',
-    'cjs': 'javascript',
-    'jsx': 'jsx',
-    'ts': 'typescript',
-    'mts': 'typescript',
-    'cts': 'typescript',
-    'tsx': 'tsx',
+    js: 'javascript',
+    mjs: 'javascript',
+    cjs: 'javascript',
+    jsx: 'jsx',
+    ts: 'typescript',
+    mts: 'typescript',
+    cts: 'typescript',
+    tsx: 'tsx',
 
     // Web
-    'html': 'html',
-    'htm': 'html',
-    'css': 'css',
-    'scss': 'scss',
-    'sass': 'scss',
-    'less': 'less',
-    'vue': 'vue',
-    'svelte': 'svelte',
-    'astro': 'astro',
+    html: 'html',
+    htm: 'html',
+    css: 'css',
+    scss: 'scss',
+    sass: 'scss',
+    less: 'less',
+    vue: 'vue',
+    svelte: 'svelte',
+    astro: 'astro',
 
     // Data/Config
-    'json': 'json',
-    'jsonc': 'jsonc',
-    'json5': 'json',
-    'yaml': 'yaml',
-    'yml': 'yaml',
-    'toml': 'toml',
-    'xml': 'xml',
-    'svg': 'xml',
+    json: 'json',
+    jsonc: 'jsonc',
+    json5: 'json',
+    yaml: 'yaml',
+    yml: 'yaml',
+    toml: 'toml',
+    xml: 'xml',
+    svg: 'xml',
 
     // Documentation
-    'md': 'markdown',
-    'mdx': 'markdown',
-    'txt': 'text',
+    md: 'markdown',
+    mdx: 'markdown',
+    txt: 'text',
 
     // Shell
-    'sh': 'bash',
-    'bash': 'bash',
-    'zsh': 'bash',
-    'fish': 'bash',
+    sh: 'bash',
+    bash: 'bash',
+    zsh: 'bash',
+    fish: 'bash',
 
     // Other languages
-    'py': 'python',
-    'rs': 'rust',
-    'go': 'go',
-    'sql': 'sql',
-    'graphql': 'graphql',
-    'gql': 'graphql',
-    'diff': 'diff',
-    'patch': 'diff',
+    py: 'python',
+    rs: 'rust',
+    go: 'go',
+    sql: 'sql',
+    graphql: 'graphql',
+    gql: 'graphql',
+    diff: 'diff',
+    patch: 'diff',
   }
 
   // Special filename mapping
   const filenameMap: Record<string, string> = {
-    'Dockerfile': 'dockerfile',
-    'Makefile': 'makefile',
+    Dockerfile: 'dockerfile',
+    Makefile: 'makefile',
   }
 
   if (filenameMap[fileName]) {

lunaria/files/en-US.json

@@ -642,4 +642,4 @@
     "lines_hidden": "{count} lines hidden",
     "compare_versions": "Compare versions"
   }
-}
+}