lashman/openpylon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

fix: window controls, dragging, and text selection

Browse Source 
- Add Tauri permissions for window minimize/maximize/close/drag
- Rewrite WindowControls with plain buttons + stopPropagation
  to prevent drag region from capturing button clicks
- Add data-tauri-drag-region to TopBar child containers
- Make OpenPylon text pointer-events-none and select-none
This commit is contained in:
Your Name
2026-02-15 21:19:24 +02:00
parent a226eabba4
commit 08fbeaa1b2
3 changed files with 45 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/layout/TopBar.tsx
View File

@@ -81,7 +81,7 @@ export function TopBar() {
style={{ borderBottom: isBoardView && board ? `2px solid ${board.color}` : '1px solid var(--border)' }}
>
{/* Left section */}
<div className="flex items-center gap-2">
<div data-tauri-drag-region className="flex items-center gap-2">
{isBoardView && (
<Tooltip>
<TooltipTrigger asChild>
@@ -104,7 +104,7 @@ export function TopBar() {
</div>
{/* Center section */}
<div className="flex flex-1 items-center justify-center">
<div data-tauri-drag-region className="flex flex-1 items-center justify-center select-none">
{isBoardView && board ? (
editing ? (
<input
@@ -128,7 +128,7 @@ export function TopBar() {
</button>
)
) : (
<span className="font-heading text-lg text-pylon-text">
<span className="pointer-events-none font-heading text-lg text-pylon-text">
OpenPylon
</span>
)}

60
src/components/layout/WindowControls.tsx
View File

@@ -1,8 +1,6 @@
import { useState, useEffect } from "react";
import { useState, useEffect, useCallback } from "react";
import { getCurrentWindow } from "@tauri-apps/api/window";
import { motion } from "framer-motion";
import { Minus, Square, Copy, X } from "lucide-react";
import { springs } from "@/lib/motion";
export function WindowControls() {
const [isMaximized, setIsMaximized] = useState(false);
@@ -22,32 +20,44 @@ export function WindowControls() {
};
}, []);
const appWindow = getCurrentWindow();
const handleMinimize = useCallback((e: React.MouseEvent) => {
e.stopPropagation();
e.preventDefault();
getCurrentWindow().minimize();
}, []);
const handleToggleMaximize = useCallback((e: React.MouseEvent) => {
e.stopPropagation();
e.preventDefault();
getCurrentWindow().toggleMaximize();
}, []);
const handleClose = useCallback((e: React.MouseEvent) => {
e.stopPropagation();
e.preventDefault();
getCurrentWindow().close();
}, []);
return (
<div className="flex items-center">
<div className="flex items-center" onMouseDown={(e) => e.stopPropagation()}>
{/* Separator */}
<div className="mx-2 h-4 w-px bg-pylon-text-secondary/20" />
{/* Minimize */}
<motion.button
onClick={() => appWindow.minimize()}
className="flex size-8 items-center justify-center rounded-md text-pylon-text-secondary transition-colors hover:bg-pylon-accent/10 hover:text-pylon-text"
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
transition={springs.snappy}
<button
onClick={handleMinimize}
onMouseDown={(e) => e.stopPropagation()}
className="flex size-8 items-center justify-center rounded-md text-pylon-text-secondary transition-all hover:scale-110 hover:bg-pylon-accent/10 hover:text-pylon-text active:scale-90"
aria-label="Minimize"
>
<Minus className="size-4" />
</motion.button>
</button>
{/* Maximize / Restore */}
<motion.button
onClick={() => appWindow.toggleMaximize()}
className="flex size-8 items-center justify-center rounded-md text-pylon-text-secondary transition-colors hover:bg-pylon-accent/10 hover:text-pylon-text"
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
transition={springs.snappy}
<button
onClick={handleToggleMaximize}
onMouseDown={(e) => e.stopPropagation()}
className="flex size-8 items-center justify-center rounded-md text-pylon-text-secondary transition-all hover:scale-110 hover:bg-pylon-accent/10 hover:text-pylon-text active:scale-90"
aria-label={isMaximized ? "Restore" : "Maximize"}
>
{isMaximized ? (
@@ -55,19 +65,17 @@ export function WindowControls() {
) : (
<Square className="size-3.5" />
)}
</motion.button>
</button>
{/* Close */}
<motion.button
onClick={() => appWindow.close()}
className="flex size-8 items-center justify-center rounded-md text-pylon-text-secondary transition-colors hover:bg-pylon-danger/15 hover:text-pylon-danger"
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
transition={springs.snappy}
<button
onClick={handleClose}
onMouseDown={(e) => e.stopPropagation()}
className="flex size-8 items-center justify-center rounded-md text-pylon-text-secondary transition-all hover:scale-110 hover:bg-pylon-danger/15 hover:text-pylon-danger active:scale-90"
aria-label="Close"
>
<X className="size-4" />
</motion.button>
</button>
</div>
);
}