fix: adapt in-app titlebar layout to the native Windows title bar

[djdevpro]

The overlay drag strips (h-11/h-10) and the pl-22 traffic-light clearance exist only for the macOS overlay title bar. On Windows — which keeps a native, DWM-themed title bar (#136) — they left a dead gap above the content and a large empty gutter when the sidebar was collapsed.

• add an isWindows helper and a single platform-<os> class on
• hide the overlay drag strips on Windows (kept on macOS/Linux)
• add a top border + small breathing padding under the native caption
• skip the pl-22 traffic-light clearance on Windows

Summary by CodeRabbit

• New Features

  • Enhanced Windows compatibility with platform-specific layout optimizations and improved native title bar integration

• Style

  • Refined spacing, padding, and visual adjustments for improved appearance and consistency on Windows

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 43298ed8-c67a-4c91-a03c-41ab7f08391c

📥 Commits

Reviewing files that changed from the base of the PR and between a638f02 and b60114f.

📒 Files selected for processing (7)

• src/App.css
• src/App.tsx
• src/components/editor/Editor.tsx
• src/components/layout/FolderPicker.tsx
• src/components/layout/Sidebar.tsx
• src/components/settings/SettingsPage.tsx
• src/lib/platform.ts

---

📝 Walkthrough

Walkthrough

This PR introduces Windows platform detection and applies platform-specific UI adjustments across the app. It adds an isWindows helper to the platform utility, uses it in the app root to apply a platform-windows CSS class, and conditionally disables Tauri drag-region elements and adjusts layout padding in multiple components when running on Windows.

Changes

Windows Platform Detection and Component UI Adaptation

Layer / File(s)	Summary
Platform detection infrastructure src/lib/platform.ts	New isWindows export checks navigator.userAgent for Windows platform detection.
App-level platform setup and styling src/App.tsx, src/App.css	App startup effect now uses isMac and isWindows helpers to apply platform-specific CSS classes instead of inline user agent checks; Windows-specific top border added to app root to separate caption area from content.
Editor component Windows adjustments src/components/editor/Editor.tsx	Editor imports isWindows and conditionally renders drag-region divs in preview-loading, selected-note-loading, and folder-empty return paths; titlebar padding adjustment skipped on Windows.
Layout components Windows adjustments src/components/layout/FolderPicker.tsx, src/components/layout/Sidebar.tsx, src/components/settings/SettingsPage.tsx	FolderPicker, Sidebar, and SettingsPage each import isWindows and conditionally render Tauri drag-region elements only on non-Windows platforms; header and content containers add extra top padding (pt-2) on Windows.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• erictli/scratch#11: Adds/modifies the shared src/lib/platform.ts platform-detection utilities that this PR extends with isWindows detection and applies across layout components.

Suggested reviewers

• erictli

Poem

🐰 A Windows path, distinct and true,
No Tauri drag-zones needed here, it's due!
Borders drawn and padding set,
Platform harmony—our best bet!
The caption bar knows when to rest.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 28.57% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and specifically describes the main objective: adapting the in-app titlebar layout for Windows, which is the focus of all changes across multiple files addressing Windows-specific platform differences.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}