Add tab size option to code review

packages/review-editor/App.tsx

@@ -153,6 +153,7 @@ const ReviewApp: React.FC = () => {
   const diffHideWhitespace = useConfigValue('diffHideWhitespace');
   const diffFontFamily = useConfigValue('diffFontFamily');
   const diffFontSize = useConfigValue('diffFontSize');
+  const diffTabSize = useConfigValue('diffTabSize');
 
   // Load custom diff font and override --font-mono for surrounding review elements
   useEffect(() => {
@@ -167,7 +168,8 @@ const ReviewApp: React.FC = () => {
     } else {
       document.documentElement.style.removeProperty('--diff-font-size-override');
     }
-  }, [diffFontFamily, diffFontSize]);
+    document.documentElement.style.setProperty('--diffs-tab-size', String(diffTabSize));
+  }, [diffFontFamily, diffFontSize, diffTabSize]);
 
   const reviewSidebar = useSidebar<ReviewSidebarTab>(true, 'annotations');
   const [isFileTreeOpen, setIsFileTreeOpen] = useState(true);

packages/review-editor/components/DiffOptionsPopover.tsx

@@ -32,6 +32,36 @@ function CompactSegmented<T extends string>({ options, value, onChange }: {
   );
 }
 
+function CompactStepper({ value, min, max, onChange, label }: {
+  value: number;
+  min: number;
+  max: number;
+  onChange: (v: number) => void;
+  label: string;
+}) {
+  const clamp = (n: number) => Math.max(min, Math.min(max, n));
+  return (
+    <div className="w-full flex items-center justify-between py-1">
+      <span className="text-[11px] text-muted-foreground">{label}</span>
+      <div className="flex items-center gap-px bg-muted/60 rounded-md p-px">
+        <button
+          onClick={() => onChange(clamp(value - 1))}
+          disabled={value <= min}
+          className="px-1.5 py-0.5 text-[11px] rounded-[5px] text-muted-foreground hover:text-foreground hover:bg-background disabled:opacity-40 disabled:hover:bg-transparent"
+          aria-label={`Decrease ${label}`}
+        >−</button>
+        <span className="px-2 text-[11px] tabular-nums w-5 text-center">{value}</span>
+        <button
+          onClick={() => onChange(clamp(value + 1))}
+          disabled={value >= max}
+          className="px-1.5 py-0.5 text-[11px] rounded-[5px] text-muted-foreground hover:text-foreground hover:bg-background disabled:opacity-40 disabled:hover:bg-transparent"
+          aria-label={`Increase ${label}`}
+        >+</button>
+      </div>
+    </div>
+  );
+}
+
 function CompactToggle({ checked, onChange, label }: {
   checked: boolean;
   onChange: (v: boolean) => void;
@@ -64,6 +94,7 @@ export const DiffOptionsPopover: React.FC = () => {
   const diffShowLineNumbers = useConfigValue('diffShowLineNumbers');
   const diffShowBackground = useConfigValue('diffShowBackground');
   const diffHideWhitespace = useConfigValue('diffHideWhitespace');
+  const diffTabSize = useConfigValue('diffTabSize');
 
   return (
     <Popover.Root>
@@ -114,6 +145,13 @@ export const DiffOptionsPopover: React.FC = () => {
               <CompactToggle checked={diffShowLineNumbers} onChange={(v) => configStore.set('diffShowLineNumbers', v)} label="Line numbers" />
               <CompactToggle checked={diffShowBackground} onChange={(v) => configStore.set('diffShowBackground', v)} label="Diff background" />
               <CompactToggle checked={diffHideWhitespace} onChange={(v) => configStore.set('diffHideWhitespace', v)} label="Hide whitespace" />
+              <CompactStepper
+                label="Tab size"
+                value={diffTabSize}
+                min={1}
+                max={8}
+                onChange={(v) => configStore.set('diffTabSize', v)}
+              />
             </div>
           </div>
         </Popover.Content>

packages/shared/config.ts

@@ -21,6 +21,7 @@ export interface DiffOptions {
   showDiffBackground?: boolean;
   fontFamily?: string;
   fontSize?: string;
+  tabSize?: number;
   hideWhitespace?: boolean;
   defaultDiffType?: DefaultDiffType;
 }

packages/ui/config/settings.ts

@@ -180,6 +180,21 @@ export const SETTINGS = {
     },
     toServer: (v: string) => ({ diffOptions: { fontSize: v } }),
   },
+  diffTabSize: {
+    defaultValue: 2 as number,
+    fromCookie: () => {
+      const v = storage.getItem('plannotator-diff-tab-size');
+      const n = v ? parseInt(v, 10) : NaN;
+      return Number.isFinite(n) && n >= 1 && n <= 8 ? n : undefined;
+    },
+    toCookie: (v: number) => storage.setItem('plannotator-diff-tab-size', String(v)),
+    serverKey: 'diffOptions',
+    fromServer: (sc: Record<string, unknown>) => {
+      const v = (sc.diffOptions as Record<string, unknown> | undefined)?.tabSize;
+      return typeof v === 'number' && v >= 1 && v <= 8 ? v : undefined;
+    },
+    toServer: (v: number) => ({ diffOptions: { tabSize: v } }),
+  },
   conventionalComments: {
     defaultValue: false as boolean,
     fromCookie: () => {