Add striped rows setting for file lists

- New `listing.stripedRows` boolean setting (off by default) in Listing section
- Alternates row shading in both Full and Brief view modes using data index (stable under virtual scrolling)
- Uses `color-mix()` against existing tokens so it auto-adapts to light/dark mode

Author: vdavid

apps/desktop/src/app.css

@@ -84,6 +84,9 @@
   --color-toast-success-stripe: #16a34a;
   --color-toast-success-bg: #f0fdf4;
 
+  /* === Striped rows (zebra striping for file lists) === */
+  --color-bg-stripe: color-mix(in oklch, var(--color-bg-primary), var(--color-text-primary) 4%);
+
   /* === Selection === */
   --color-selection-fg: #c9a227;
 

apps/desktop/src/lib/file-explorer/views/BriefList.svelte

@@ -19,7 +19,7 @@
         updateIndexSizesInPlace,
     } from './file-list-utils'
     import { buildDirSizeTooltip, hasSizeMismatch } from './full-list-utils'
-    import { getRowHeight, formatFileSize, getSizeMismatchWarning } from '$lib/settings/reactive-settings.svelte'
+    import { getRowHeight, formatFileSize, getSizeMismatchWarning, getStripedRows } from '$lib/settings/reactive-settings.svelte'
     import { getSetting } from '$lib/settings/settings-store'
     import { formatNumber, pluralize } from '../selection/selection-info-utils'
     import { isScanning, isAggregating } from '$lib/indexing/index-state.svelte'
@@ -435,6 +435,9 @@
     // Size mismatch warning setting
     const showSizeMismatchWarning = $derived(getSizeMismatchWarning())
 
+    // Striped rows setting
+    const stripedRows = $derived(getStripedRows())
+
     /** Build tooltip for a directory entry showing recursive size info. */
     function buildDirTooltip(file: FileEntry): string | { html: string } | undefined {
         if (!file.isDirectory) return undefined
@@ -536,6 +539,7 @@
                                 class="file-entry"
                                 class:is-under-cursor={globalIndex === cursorIndex}
                                 class:is-selected={selectedIndices.has(globalIndex)}
+                                class:is-striped={stripedRows && globalIndex % 2 === 1}
                                 data-drop-target-path={file.isDirectory && file.name !== '..' ? file.path : undefined}
                                 use:tooltip={buildDirTooltip(file)}
                                 style="height: {rowHeight}px;"
@@ -650,6 +654,10 @@
         overflow: hidden;
     }
 
+    .file-entry.is-striped {
+        background-color: var(--color-bg-stripe);
+    }
+
     .file-entry.is-under-cursor {
         background-color: var(--color-cursor-inactive);
     }

apps/desktop/src/lib/file-explorer/views/FullList.svelte

@@ -35,6 +35,7 @@
         formatFileSize,
         getSizeDisplayMode,
         getSizeMismatchWarning,
+        getStripedRows,
     } from '$lib/settings/reactive-settings.svelte'
     import { iconCacheCleared } from '$lib/icon-cache'
     import { tooltip } from '$lib/tooltip/tooltip'
@@ -134,6 +135,9 @@
     // Size mismatch warning setting
     const showSizeMismatchWarning = $derived(getSizeMismatchWarning())
 
+    // Striped rows setting
+    const stripedRows = $derived(getStripedRows())
+
     // Drive index state — show spinner while scanning OR aggregating (sizes aren't ready until aggregation finishes)
     const indexing = $derived(isScanning() || isAggregating())
 
@@ -445,6 +449,7 @@
                         class="file-entry"
                         class:is-under-cursor={globalIndex === cursorIndex}
                         class:is-selected={selectedIndices.has(globalIndex)}
+                        class:is-striped={stripedRows && globalIndex % 2 === 1}
                         data-drop-target-path={file.isDirectory && file.name !== '..' ? file.path : undefined}
                         style="height: {rowHeight}px; grid-template-columns: 16px 1fr 60px 115px {dateColumnWidth}px;"
                         onmousedown={(e: MouseEvent) => {
@@ -609,6 +614,10 @@
         padding-bottom: var(--spacing-xs);
     }
 
+    .file-entry.is-striped {
+        background-color: var(--color-bg-stripe);
+    }
+
     .file-entry.is-under-cursor {
         background-color: var(--color-cursor-inactive);
     }

apps/desktop/src/lib/settings/reactive-settings.svelte.ts

@@ -31,6 +31,7 @@ let directorySortMode = $state<DirectorySortMode>('likeFiles')
 let appColor = $state<AppColor>('cmdr-gold')
 let sizeDisplay = $state<SizeDisplayMode>('smart')
 let sizeMismatchWarning = $state<boolean>(true)
+let stripedRows = $state<boolean>(false)
 
 let initialized = false
 let unsubscribe: (() => void) | undefined
@@ -56,6 +57,7 @@ export async function initReactiveSettings(): Promise<void> {
     appColor = getSetting('appearance.appColor')
     sizeDisplay = getSetting('listing.sizeDisplay')
     sizeMismatchWarning = getSetting('listing.sizeMismatchWarning')
+    stripedRows = getSetting('listing.stripedRows')
 
     // Subscribe to changes (including cross-window changes)
     unsubscribe = onSettingChange((id, value) => {
@@ -91,6 +93,9 @@ export async function initReactiveSettings(): Promise<void> {
         case 'listing.sizeMismatchWarning':
           sizeMismatchWarning = value as boolean
           break
+        case 'listing.stripedRows':
+          stripedRows = value as boolean
+          break
       }
     })
 
@@ -149,6 +154,11 @@ export function getSizeMismatchWarning(): boolean {
   return sizeMismatchWarning
 }
 
+/** Get whether striped rows are enabled */
+export function getStripedRows(): boolean {
+  return stripedRows
+}
+
 // ============================================================================
 // Formatting utilities that use reactive settings
 // ============================================================================

apps/desktop/src/lib/settings/sections/ListingSection.svelte

@@ -17,6 +17,7 @@
     const dirSortDef = getSettingDefinition('listing.directorySortMode') ?? { label: '', description: '' }
     const sizeDisplayDef = getSettingDefinition('listing.sizeDisplay') ?? { label: '', description: '' }
     const sizeMismatchDef = getSettingDefinition('listing.sizeMismatchWarning') ?? { label: '', description: '' }
+    const stripedRowsDef = getSettingDefinition('listing.stripedRows') ?? { label: '', description: '' }
 </script>
 
 <SettingsSection title="Listing">
@@ -50,4 +51,14 @@
             <SettingSwitch id="listing.sizeMismatchWarning" />
         </SettingRow>
     {/if}
+    {#if shouldShow('listing.stripedRows')}
+        <SettingRow
+            id="listing.stripedRows"
+            label={stripedRowsDef.label}
+            description={stripedRowsDef.description}
+            {searchQuery}
+        >
+            <SettingSwitch id="listing.stripedRows" />
+        </SettingRow>
+    {/if}
 </SettingsSection>

apps/desktop/src/lib/settings/settings-registry.ts

@@ -157,6 +157,17 @@ export const settingsRegistry: SettingDefinition[] = [
     component: 'switch',
   },
 
+  {
+    id: 'listing.stripedRows',
+    section: ['General', 'Listing'],
+    label: 'Striped rows',
+    description: 'Alternate row shading for easier line tracking. Applies to both Full and Brief view modes.',
+    keywords: ['stripe', 'zebra', 'alternate', 'row', 'shading', 'accessibility', 'a11y'],
+    type: 'boolean',
+    default: false,
+    component: 'switch',
+  },
+
   // ========================================================================
   // General › File operations
   // ========================================================================

apps/desktop/src/lib/settings/types.ts

@@ -99,6 +99,7 @@ export interface SettingsValues {
   'listing.directorySortMode': DirectorySortMode
   'listing.sizeDisplay': SizeDisplayMode
   'listing.sizeMismatchWarning': boolean
+  'listing.stripedRows': boolean
 
   // File operations
   'fileOperations.mtpEnabled': boolean