feat: compare, mirror navigation, and file browser improvements

README.md

@@ -26,6 +26,7 @@ Get the latest version from the [Releases page](https://github.com/dynamicweb/dw
 
 - Move files between your local machine and DW10 environments
 - Browse and manage remote files visually
+- Compare local and remote folder contents at a glance and filter to only files that differ
 - Work across multiple environments (dev, staging, production)
 - Handle large transfers with progress tracking and logs
 
@@ -35,6 +36,12 @@ Get the latest version from the [Releases page](https://github.com/dynamicweb/dw
 - **Dual-pane file browser**  
   Local files on one side, remote environment on the other
 
+- **Mirror navigation**  
+  Navigate both panes together when folder structures match; arrow buttons snap either pane to the other's path
+
+- **Compare mode**  
+  Colour-coded diff between local and remote folders — different, local-only, remote-only, identical — with per-status filters
+
 - **Drag & drop transfers**  
   Upload and download files with real-time progress
 

dw-desktop/TODOS-ForReview.md

@@ -45,37 +45,6 @@ handling.
 
 ---
 
-### Folder compare view
-
-**What:** A side-by-side diff view that highlights which files differ between the
-local and remote pane (by name, size, modified date). Color-code: only-on-left,
-only-on-right, both-but-different, identical.
-
-**Why:** This is the single most common question a partner asks during deployment:
-"is my remote actually up to date with my local build?" Today there is no answer
-without manually downloading and diffing.
-
-**Pros:** Pure client-side feature on already-listed entries. Acts as a direct
-precursor to folder sync — once you can compare, sync is the obvious follow-up.
-
-**Cons:** No content hashing in the API — comparison is limited to name,
-`sizeInBytes`, and `updatedAt` (all confirmed returned by `AssetsByDirectory`).
-This is sufficient for typical deployment validation but won't catch a file
-modified and then reverted to the exact same byte size.
-
-**Context:** The existing dual-pane layout is structurally perfect for this — the
-comparison is a styling overlay on existing FileList rows. All required metadata
-(`sizeInBytes`, `updatedAt`) is already fetched and stored in `FileEntry`.
-
-**Value:** Very High — directly answers the primary deployment question; transforms
-the app from "file browser" to "deployment tool".
-
-**Difficulty:** Low-Medium — all the data already exists in loaded `FileEntry`
-arrays; no new API calls needed. The work is purely visual (diff overlay on
-FileList rows) plus straightforward name+size+mtime comparison logic.
-
----
-
 ### Keyboard shortcuts
 
 **What:** Add shortcuts for common actions: upload (Cmd/Ctrl+U), download

dw-desktop/src/main/ipc/files.ts

@@ -19,13 +19,21 @@ async function listLocalEntries(dirPath: string): Promise<FileEntry[]> {
   const entries = await Promise.all(
     children.map(async (child) => {
       const childPath = join(dirPath, child.name)
-      const childStat = await stat(childPath)
-      return {
-        name: child.name,
-        path: childPath,
-        type: (child.isDirectory() ? 'directory' : 'file') as 'file' | 'directory',
-        size: childStat.isFile() ? childStat.size : undefined,
-        modified: childStat.mtime.toISOString()
+      const type: 'file' | 'directory' = child.isDirectory() ? 'directory' : 'file'
+      // stat() can fail on protected entries at the drive root (System Volume
+      // Information, $Recycle.Bin, pagefile.sys, etc). Fall back to dirent info
+      // so a single inaccessible entry doesn't break the whole listing.
+      try {
+        const childStat = await stat(childPath)
+        return {
+          name: child.name,
+          path: childPath,
+          type,
+          size: childStat.isFile() ? childStat.size : undefined,
+          modified: childStat.mtime.toISOString()
+        }
+      } catch {
+        return { name: child.name, path: childPath, type }
       }
     })
   )
@@ -35,6 +43,26 @@ async function listLocalEntries(dirPath: string): Promise<FileEntry[]> {
   })
 }
 
+/**
+ * Enumerates available drives on Windows (A:\ through Z:\). Detects each by
+ * attempting `stat()` on its root in parallel. Empty array on non-Windows.
+ */
+async function listWindowsDrives(): Promise<FileEntry[]> {
+  if (process.platform !== 'win32') return []
+  const checks: Promise<FileEntry | null>[] = []
+  for (let code = 'A'.charCodeAt(0); code <= 'Z'.charCodeAt(0); code++) {
+    const letter = String.fromCharCode(code)
+    const root = `${letter}:\\`
+    checks.push(
+      stat(root)
+        .then(() => ({ name: `${letter}:`, path: root, type: 'directory' as const }))
+        .catch(() => null)
+    )
+  }
+  const results = await Promise.all(checks)
+  return results.filter((d): d is FileEntry => d !== null)
+}
+
 export function registerFileHandlers(): void {
   ipcMain.handle('files:list', async (_event, { envName, path }: { envName: string; path: string }) => {
     const result = getEnvOrError(envName)
@@ -108,6 +136,13 @@ export function registerFileHandlers(): void {
 
   ipcMain.handle('fs:list', async (_event, { dirPath }: { dirPath: string }): Promise<IPCResult<FileEntry[]>> => {
     try {
+      // Empty path = "above the drive root" view (Windows drives or Unix /).
+      if (!dirPath) {
+        if (process.platform === 'win32') {
+          return { ok: true, data: await listWindowsDrives() }
+        }
+        return { ok: true, data: await listLocalEntries('/') }
+      }
       return { ok: true, data: await listLocalEntries(dirPath) }
     } catch (err) {
       return { ok: false, error: (err as Error).message }

dw-desktop/src/renderer/src/App.tsx

@@ -85,7 +85,7 @@ export default function App(): React.JSX.Element {
                 key={t}
                 type="button"
                 onClick={() => setTab(t)}
-                className="no-drag"
+                className="no-drag nav-btn"
                 style={{
                   padding: '5px 10px',
                   fontSize: 12,

dw-desktop/src/renderer/src/assets/main.css

@@ -144,6 +144,23 @@ input:not(:focus-visible) { outline: none; }
   -webkit-app-region: no-drag;
 }
 
+/* Top navigation tab button (Files, Transfer log, Debug, …) */
+.nav-btn:hover {
+  background: var(--control-hover) !important;
+  color: var(--text) !important;
+}
+.nav-btn:active {
+  background: var(--surface-raised) !important;
+}
+
+/* Segmented toolbar button (Compare, Mirror, Theme, pills) */
+.toolbar-btn:hover:not([disabled]) {
+  filter: brightness(1.12);
+}
+.toolbar-btn:active:not([disabled]) {
+  filter: brightness(0.88);
+}
+
 /* Small icon button (pane headers, toolbars) */
 .icon-btn {
   display: inline-flex;

dw-desktop/src/renderer/src/components/AddEnvModal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useEnvStore } from '../stores/envStore'
 import type { StoredEnv } from '../../../shared/types'
 
@@ -97,10 +97,17 @@ export default function AddEnvModal({ onDone }: AddEnvModalProps): React.JSX.Ele
     }
   }
 
+  const pickingRef = useRef(false)
   async function pickLocalStartPath(): Promise<void> {
-    const result = await window.dw.fs.openDialog(['openDirectory'])
-    if (result.ok && result.data && result.data.paths.length > 0) {
-      setStep1((s) => ({ ...s, localStartPath: result.data!.paths[0] }))
+    if (pickingRef.current) return
+    pickingRef.current = true
+    try {
+      const result = await window.dw.fs.openDialog(['openDirectory'])
+      if (result.ok && result.data && result.data.paths.length > 0) {
+        setStep1((s) => ({ ...s, localStartPath: result.data!.paths[0] }))
+      }
+    } finally {
+      pickingRef.current = false
     }
   }