color gradient

Author: brendan-kellam

packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/blameAgeColors.ts

@@ -0,0 +1,46 @@
+// Shared color ramp for the age-of-commit indicator. Used by the blame gutter
+// (left border of each cell) and the legend rendered next to the toolbar.
+//
+// Tailwind's JIT scanner reads class names from source, so each class must
+// appear as a complete literal string. Don't try to construct these via
+// template strings.
+
+export const BLAME_AGE_BUCKET_COUNT = 10;
+
+// In dark mode the ramp is flipped: pale shades (amber-50/100) are
+// high-contrast against a dark background, dark shades blend in. We want
+// "newer" to pop visually in both themes, so the dark-mode bucket-0 (oldest)
+// is amber-900 (low contrast → fades) and dark-mode bucket-9 (newest) is
+// amber-50 (high contrast → pops). The light-mode ramp stays unchanged.
+export const BLAME_AGE_BG_CLASSES = [
+    'bg-slate-50 dark:bg-slate-900',
+    'bg-slate-100 dark:bg-slate-800',
+    'bg-slate-200 dark:bg-slate-700',
+    'bg-slate-300 dark:bg-slate-600',
+    'bg-slate-400 dark:bg-slate-500',
+    'bg-slate-500 dark:bg-slate-400',
+    'bg-slate-600 dark:bg-slate-300',
+    'bg-slate-700 dark:bg-slate-200',
+    'bg-slate-800 dark:bg-slate-100',
+    'bg-slate-900 dark:bg-slate-50',
+] as const;
+
+/**
+ * Linear time mapping: given a commit date (ISO 8601) and the file's overall
+ * date range, returns a bucket 0..9 (palest..darkest). Clamps out-of-range
+ * inputs (e.g., clock-skewed future dates) to the endpoints.
+ */
+export const computeAgeBucket = (
+    isoDate: string,
+    oldestMs: number,
+    newestMs: number,
+): number => {
+    const max = BLAME_AGE_BUCKET_COUNT - 1;
+    if (newestMs === oldestMs) {
+        return max;
+    }
+    const t = new Date(isoDate).getTime();
+    const ratio = (t - oldestMs) / (newestMs - oldestMs);
+    const bucket = Math.floor(ratio * max);
+    return Math.max(0, Math.min(max, bucket));
+};

packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/blameAgeLegend.tsx

@@ -0,0 +1,19 @@
+import { BLAME_AGE_BG_CLASSES } from "./blameAgeColors";
+import { cn } from "@/lib/utils";
+
+export const BlameAgeLegend = () => {
+    return (
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <span>Older</span>
+            <div className="flex items-center gap-px">
+                {BLAME_AGE_BG_CLASSES.map((bg, i) => (
+                    <div
+                        key={i}
+                        className={cn('h-2 w-2', bg)}
+                    />
+                ))}
+            </div>
+            <span>Newer</span>
+        </div>
+    );
+};

packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/blameGutterExtension.ts

@@ -3,6 +3,7 @@ import { EditorState, Extension, Prec, Range as CMRange, RangeSet, StateField }
 import { formatDistanceToNowStrict } from "date-fns";
 import type { FileBlameResponse } from "@/features/git";
 import { cn } from "@/lib/utils";
+import { BLAME_AGE_BG_CLASSES, computeAgeBucket } from "./blameAgeColors";
 
 type LineEntry = {
     hash: string;
@@ -17,6 +18,9 @@ type LineEntry = {
     // True for first-line cells except line 1 of the file, so the divider
     // border doesn't render at the very top of the gutter.
     showStartBorder: boolean;
+    // 0..9 bucket for the age-of-commit indicator stripe. Same value across
+    // every line of a region (continuation lines included).
+    ageBucket: number;
 };
 
 // @see: https://lucide.dev/icons/file-stack
@@ -29,11 +33,23 @@ const buildCellDom = (
     onReblameClick: (previous: { hash: string; path: string }) => void,
 ): HTMLElement => {
     const cell = document.createElement('div');
+    // `relative` so the absolutely-positioned age stripe inside has a
+    // positioning context. The stripe is a child <div> rather than a
+    // border-left because tailwind-merge collapses any same-group border-color
+    // class (e.g. `border-border` on the region divider) with the per-side
+    // amber color, dropping the stripe on first-line cells.
     cell.className = cn(
-        'flex items-start h-full px-2 overflow-hidden text-xs text-muted-foreground',
+        'relative flex items-start h-full pl-2 pr-2 overflow-hidden text-xs text-muted-foreground',
         entry.showStartBorder && 'border-t border-border',
     );
 
+    const stripe = document.createElement('div');
+    stripe.className = cn(
+        'absolute inset-y-0 left-0 w-0.5',
+        BLAME_AGE_BG_CLASSES[entry.ageBucket],
+    );
+    cell.appendChild(stripe);
+
     if (entry.message === null || entry.date === null) {
         // Continuation line — empty cell with a non-breaking space so the row
         // still occupies its full line height.
@@ -105,6 +121,7 @@ class BlameMarker extends GutterMarker {
             a.date === b.date &&
             a.authorEmail === b.authorEmail &&
             a.showStartBorder === b.showStartBorder &&
+            a.ageBucket === b.ageBucket &&
             a.previous?.hash === b.previous?.hash &&
             a.previous?.path === b.previous?.path
         );
@@ -155,9 +172,26 @@ const computeActive = (
 };
 
 const buildLineIndex = (blame: FileBlameResponse): Map<number, LineEntry> => {
+    // Compute the file's overall date range so each commit's age can be
+    // mapped to a 0..9 bucket. We assume blame.commits' `date` fields are
+    // ISO 8601 strings.
+    const dateMs = Object.values(blame.commits)
+        .map(c => new Date(c.date).getTime())
+        .filter(t => Number.isFinite(t));
+    const oldestMs = dateMs.length > 0 ? Math.min(...dateMs) : 0;
+    const newestMs = dateMs.length > 0 ? Math.max(...dateMs) : 0;
+
+    // Per-commit bucket cache so every line of a region gets the same value
+    // (and we don't recompute for each line).
+    const bucketByHash = new Map<string, number>();
+    for (const [hash, commit] of Object.entries(blame.commits)) {
+        bucketByHash.set(hash, computeAgeBucket(commit.date, oldestMs, newestMs));
+    }
+
     const index = new Map<number, LineEntry>();
     for (const range of blame.ranges) {
         const commit = blame.commits[range.hash];
+        const ageBucket = bucketByHash.get(range.hash) ?? 0;
         for (let i = 0; i < range.lineCount; i++) {
             const lineNumber = range.startLine + i;
             const isFirstLineOfRange = i === 0;
@@ -170,6 +204,7 @@ const buildLineIndex = (blame: FileBlameResponse): Map<number, LineEntry> => {
                     authorEmail: commit.authorEmail,
                     previous: commit.previous ?? null,
                     showStartBorder,
+                    ageBucket,
                 });
             } else {
                 index.set(lineNumber, {
@@ -179,6 +214,7 @@ const buildLineIndex = (blame: FileBlameResponse): Map<number, LineEntry> => {
                     authorEmail: null,
                     previous: null,
                     showStartBorder,
+                    ageBucket,
                 });
             }
         }

packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx

@@ -8,6 +8,7 @@ import { X } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { getBrowsePath } from "../../../hooks/utils";
+import { BlameAgeLegend } from "./blameAgeLegend";
 import { BlameViewToggle } from "./blameViewToggle";
 import { PureCodePreviewPanel } from "./pureCodePreviewPanel";
 import { getFileBlame, getFileSource } from '@/features/git';
@@ -127,6 +128,12 @@ export const CodePreviewPanel = async ({ path, repoName, revisionName, previewRe
                     <span className="text-sm text-muted-foreground">
                         {lineCount.toLocaleString()} lines · {fileSize}
                     </span>
+                    {blame && (
+                        <>
+                            <Separator orientation="vertical" className="h-4" />
+                            <BlameAgeLegend />
+                        </>
+                    )}
                 </div>
             )}
             {previewRef && (