WIP

WIP

fix: detect file modifications using hashes

fix: surface diff fetch failures

fix: handle file-directory transitions in compare

WIP

Author: taskylizard

app/components/diff/ViewerPanel.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { FileDiffResponse, FileChange } from '#shared/types'
 import { createDiff, insertSkipBlocks, countDiffStats } from '#shared/utils/diff'
+// @ts-expect-error: (tasky): idk why this is type-erroring even if it has types? /shrug
 import { motion } from 'motion-v'
 
 const props = defineProps<{
@@ -14,7 +15,7 @@ const mergeModifiedLines = ref(true)
 const maxChangeRatio = ref(0.45)
 const maxDiffDistance = ref(30)
 const inlineMaxCharEdits = ref(2)
-const wordWrap = ref(true)
+const wordWrap = ref(false)
 const showOptions = ref(false)
 const loading = ref(true)
 const loadError = ref<Error | null>(null)
@@ -276,11 +277,11 @@ function getCodeUrl(version: string): string {
           <!-- Dropdown menu -->
           <motion.div
             v-if="showOptions"
-            class="absolute right-0 top-full mt-2 z-20 p-4 bg-bg-elevated border border-border shadow-2xl overflow-hidden"
-            :initial="{ width: 220, height: 100, borderRadius: 20 }"
+            class="absolute right-0 top-full mt-2 z-20 p-4 bg-bg-elevated/40 backdrop-blur-sm border border-border shadow-2xl overflow-hidden"
+            :initial="{ width: 220, height: 110, borderRadius: 20 }"
             :animate="{
               width: mergeModifiedLines ? 400 : 220,
-              height: mergeModifiedLines ? 220 : 100,
+              height: mergeModifiedLines ? 260 : 110,
               borderRadius: mergeModifiedLines ? 14 : 20,
             }"
             :transition="{
@@ -292,11 +293,37 @@ function getCodeUrl(version: string): string {
             }"
           >
             <div class="flex flex-col gap-2">
-              <!-- Merge modified lines toggle -->
-              <Toggle label="Merge modified lines" v-model="mergeModifiedLines" />
-
-              <!-- Word wrap toggle -->
-              <Toggle label="Word wrap" v-model="wordWrap" />
+              <!-- Merge modified lines checkbox -->
+              <div class="flex items-center gap-2">
+                <input
+                  id="merge-modified-lines"
+                  v-model="mergeModifiedLines"
+                  type="checkbox"
+                  class="w-4 h-4 rounded border-border bg-bg text-blue-500 focus:ring-2 focus:ring-blue-500/50 cursor-pointer"
+                />
+                <label
+                  for="merge-modified-lines"
+                  class="text-sm cursor-pointer select-none whitespace-nowrap w-full"
+                >
+                  Merge modified lines
+                </label>
+              </div>
+
+              <!-- Word wrap checkbox -->
+              <div class="flex items-center gap-2">
+                <input
+                  id="word-wrap"
+                  v-model="wordWrap"
+                  type="checkbox"
+                  class="w-4 h-4 rounded border-border bg-bg text-blue-500 focus:ring-2 focus:ring-blue-500/50 cursor-pointer"
+                />
+                <label
+                  for="word-wrap"
+                  class="text-sm cursor-pointer select-none whitespace-nowrap w-full"
+                >
+                  Word wrap
+                </label>
+              </div>
 
               <!-- Sliders -->
               <motion.div
@@ -320,7 +347,7 @@ function getCodeUrl(version: string): string {
                       v-for="mark in changeRatioMarks"
                       :key="`cr-${mark}`"
                       class="slider-mark"
-                      :style="{ left: `calc(${mark}% - 1.5px)` }"
+                      :style="{ left: `calc(${mark}% - 11px)` }"
                     />
                     <div class="slider-range" :style="{ width: `${changeRatioPercent}%` }" />
                   </div>
@@ -353,7 +380,7 @@ function getCodeUrl(version: string): string {
                       v-for="mark in diffDistanceMarks"
                       :key="`dd-${mark}`"
                       class="slider-mark"
-                      :style="{ left: `calc(${mark}% - 1.5px)` }"
+                      :style="{ left: `calc(${mark}% - 11px)` }"
                     />
                     <div class="slider-range" :style="{ width: `${diffDistancePercent}%` }" />
                   </div>
@@ -386,7 +413,7 @@ function getCodeUrl(version: string): string {
                       v-for="mark in charEditMarks"
                       :key="`ce-${mark}`"
                       class="slider-mark"
-                      :style="{ left: `calc(${mark}% - 1.5px)` }"
+                      :style="{ left: `calc(${mark}% - 11px)` }"
                     />
                     <div class="slider-range" :style="{ width: `${charEditPercent}%` }" />
                   </div>
@@ -481,17 +508,21 @@ function getCodeUrl(version: string): string {
   position: relative;
   display: flex;
   align-items: center;
-  height: 36px;
+  height: 48px;
   width: 100%;
   border: 1px solid var(--border);
   background: var(--bg-subtle);
-  border-radius: 6px;
+  border-radius: 12px;
   overflow: hidden;
   cursor: grab;
-  transition: border-color 200ms ease;
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease,
+    opacity 150ms ease;
 }
 
 .slider-shell:hover {
+  background: var(--bg-muted);
   border-color: var(--border-hover);
 }
 
@@ -510,32 +541,36 @@ function getCodeUrl(version: string): string {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 12px;
+  padding: 0 16px;
   pointer-events: none;
   z-index: 3;
 }
 
 .slider-label {
-  font-size: 0.75rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  color: var(--fg);
+  color: color-mix(in srgb, var(--fg) 30%, transparent);
   letter-spacing: -0.01em;
-  transition: color 200ms ease;
+  transition: color 150ms ease;
+}
+
+.slider-shell:hover .slider-label {
+  color: var(--fg);
 }
 
 .slider-value {
-  min-width: 24px;
+  min-width: 32px;
   text-align: right;
-  font-size: 0.75rem;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--fg);
 }
 
 .slider-track {
   position: absolute;
   inset: 0;
-  background: var(--bg-subtle);
-  border-radius: 5px;
+  background: var(--bg-muted);
+  border-radius: 10px;
   overflow: hidden;
   z-index: 1;
   pointer-events: none;
@@ -544,25 +579,44 @@ function getCodeUrl(version: string): string {
 .slider-mark {
   position: absolute;
   top: 50%;
-  width: 3px;
-  height: 3px;
+  width: 6px;
+  height: 6px;
   border-radius: 50%;
-  background: var(--border);
+  background: color-mix(in srgb, var(--fg) 20%, transparent);
   transform: translateY(-50%);
   pointer-events: none;
-  opacity: 0.6;
+  opacity: 0.9;
 }
 
 .slider-range {
   position: absolute;
   inset: 0 auto 0 0;
-  background: var(--bg-muted);
-  border-radius: 5px;
-  transition: width 150ms ease-out;
+  background: var(--bg-subtle);
+  border-radius: 10px;
+  transition:
+    width 150ms ease-out,
+    background-color 150ms ease-out;
   z-index: 2;
   pointer-events: none;
 }
 
+.slider-range::after {
+  content: '';
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  width: 2px;
+  height: 28px;
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--fg) 20%, transparent);
+  transform: translateY(-50%);
+  transition: background-color 150ms ease;
+}
+
+.slider-shell:hover .slider-range::after {
+  background: color-mix(in srgb, var(--fg) 50%, transparent);
+}
+
 .slider-input {
   position: absolute;
   inset: 0;
@@ -579,13 +633,13 @@ function getCodeUrl(version: string): string {
 
 .slider-input::-webkit-slider-thumb {
   -webkit-appearance: none;
-  height: 24px;
-  width: 12px;
+  height: 32px;
+  width: 16px;
 }
 
 .slider-input::-moz-range-thumb {
-  height: 24px;
-  width: 12px;
+  height: 32px;
+  width: 16px;
   border: none;
   background: transparent;
 }