feat(Header): ✨ Add drag and no-drag regions for desktop app #23
Conversation
* Implemented `.hd-drag` and `.hd-btns` classes for better window management in the Electron app. * Updated `Header.tsx` to utilize these new classes for improved user experience.
|
Caution Review failedThe pull request is closed. WalkthroughThe PR adds Electron-focused refinements: introduces draggable header and non-draggable button areas via new CSS classes and applies them in Header.tsx; updates Electron window icon; sets Vite base to './'; augments CI with macOS signing/notarization; expands .gitignore entries. No public APIs or runtime logic were changed. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Renderer as Web UI (Header.tsx)
participant CSS as CSS (.hd-drag / .hd-btns)
participant Electron as Electron Window
User->>Renderer: Click-drag on header
Renderer->>CSS: Element has .hd-drag
CSS-->>Electron: -webkit-app-region: drag
Electron-->>Electron: Move window
User->>Renderer: Click on button in header
Renderer->>CSS: Element has .hd-btns
CSS-->>Electron: no-drag (interaction allowed)
Electron-->>Renderer: Event delivered to button
note over CSS,Electron: Drag zone applies only to regions without .hd-btns
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (2)
✨ Finishing Touches
🧪 Generate 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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
.gitignore (1)
11-11: Consider keeping the originaldistpattern for broader coverage.The change from
disttodist/*means thedistdirectory itself won't be ignored, only its contents. This could lead to the emptydistdirectory being tracked in git, which may not be intended.If you want to ignore the entire
distdirectory (which is typical for build outputs), consider reverting to:-dist/* +distvite.config.ts (1)
10-10: Remove unnecessary blank line.The extra blank line inside the
optimizeDepsobject serves no purpose and should be removed for consistency.optimizeDeps: { exclude: ['lucide-react'], - },src/components/Header.tsx (1)
101-101: Scope drag to Electron and re-enable selection in no-drag zonesApplying
hd-dragunconditionally can disable text selection across the header on the web (since.hd-dragsetsuser-select: none). Make the class conditional for Electron, and ensure.hd-btnsrestores text selection.Apply this diff within the component:
- <header className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-50 hd-drag"> + <header className={`bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-50 ${isElectron ? 'hd-drag' : ''}`}>Add near the top of the component (outside JSX):
const isElectron = typeof navigator !== 'undefined' && navigator.userAgent.includes('Electron');And in index.css (or Tailwind layer) ensure no-drag areas allow selection:
.hd-btns { -webkit-app-region: no-drag; user-select: text; -webkit-user-select: text; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (6)
.gitignore(2 hunks)package.json(2 hunks)scripts/build-desktop.cjs(3 hunks)src/components/Header.tsx(3 hunks)src/index.css(1 hunks)vite.config.ts(1 hunks)
🔇 Additional comments (11)
.gitignore (1)
27-28: LGTM! Appropriate ignore entries for Electron build artifacts.The addition of
releaseandelectrondirectories aligns well with the Electron build tooling being added in this PR.vite.config.ts (1)
6-6: LGTM! Correct base path configuration for Electron.Setting
base: './'is necessary for Electron apps to properly resolve static assets when loaded viafile://protocol instead of HTTP.scripts/build-desktop.cjs (2)
11-11: LGTM! Consistent with pnpm usage.The switch from
npm run buildtopnpm run buildaligns with the project's package manager choice.
165-165: LGTM! Consistent with pnpm usage.The switch from
npm installtopnpm installaligns with the project's package manager choice and matches the dependency installation in package.json.package.json (2)
11-11: LGTM! Correct script path update.The script path correctly reflects the file extension change from
.jsto.cjs.
31-32: Electron v37.4.0 is up-to-date and stable. It’s the current stable release (Aug 27, 2025) with no major regressions, and pairs smoothly with electron-builder ^26.0.12.src/index.css (3)
12-12: LGTM! Proper closure of utilities layer.The closing brace correctly terminates the
@layer utilitiesblock, allowing the new drag-related classes to be defined outside the layer.
14-18: LGTM! Proper draggable region implementation.The
.hd-dragclass correctly implements the WebKit-specific CSS properties needed for draggable regions in Electron apps. Disabling text selection is appropriate for drag handles.
20-22: LGTM! Proper non-draggable region for interactive elements.The
.hd-btnsclass correctly uses-webkit-app-region: no-dragto ensure buttons and interactive elements within the draggable header remain clickable.src/components/Header.tsx (2)
124-158: Nav correctly excluded from drag region
hd-btnson the nav ensures buttons remain interactive within a draggable header. Looks good.
161-210: User actions correctly marked no-drag
hd-btnshere preserves clicks/hover on sync/theme/logout controls within the draggable header. LGTM.
* Implemented `.hd-drag` and `.hd-btns` classes for better window management in the Electron app. * Updated `Header.tsx` to utilize these new classes for improved user experience.
* Implemented `.hd-drag` and `.hd-btns` classes for better window management in the Electron app. * Updated `Header.tsx` to utilize these new classes for improved user experience.
* Implemented `.hd-drag` and `.hd-btns` classes for better window management in the Electron app. * Updated `Header.tsx` to utilize these new classes for improved user experience.
* Implemented `.hd-drag` and `.hd-btns` classes for better window management in the Electron app. * Updated `Header.tsx` to utilize these new classes for improved user experience.
This is a merge commit the virtual branches in your workspace. Due to GitButler managing multiple virtual branches, you cannot switch back and forth between git branches and virtual branches easily. If you switch to another branch, GitButler will need to be reinitialized. If you commit on this branch, GitButler will throw it away. Here are the branches that are currently applied: - fix/build-and-drag-window (refs/gitbutler/fix/build-and-drag-window) - electron-builder.yml - dist/index.html For more information about what we're doing here, check out our docs: https://docs.gitbutler.com/features/virtual-branches/integration-branch
* Implemented `.hd-drag` and `.hd-btns` classes for better window management in the Electron app. * Updated `Header.tsx` to utilize these new classes for improved user experience.
* Implemented `.hd-drag` and `.hd-btns` classes for better window management in the Electron app. * Updated `Header.tsx` to utilize these new classes for improved user experience.
* Implemented `.hd-drag` and `.hd-btns` classes for better window management in the Electron app. * Updated `Header.tsx` to utilize these new classes for improved user experience.
* Implemented `.hd-drag` and `.hd-btns` classes for better window management in the Electron app. * Updated `Header.tsx` to utilize these new classes for improved user experience.
3 participants
Summary by CodeRabbit