Merge pull request #204 from multica-ai/forrestchang/fix-onboarding-drag

fix(desktop): make login and onboarding windows draggable on macOS
This commit is contained in:
Jiayuan Zhang 2026-02-15 21:28:47 +08:00 committed by GitHub
commit 08b8c71dcb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 49 additions and 41 deletions

View file

@ -23,46 +23,51 @@ export default function LoginPage() {
if (isLoading) {
return (
<div
className="flex h-screen items-center justify-center bg-background"
style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
>
<Loading className="size-6" />
<div className="flex h-screen flex-col bg-background">
<header
className="shrink-0 h-12"
style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
/>
<div className="flex flex-1 items-center justify-center">
<Loading className="size-6" />
</div>
</div>
)
}
return (
<div
className="flex h-screen flex-col items-center justify-center bg-background p-8 animate-in fade-in duration-300"
style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
>
<div className="w-full max-w-sm flex flex-col items-center text-center space-y-6">
{/* Brand */}
<div className="flex items-center gap-2">
<MulticaIcon bordered animate size="md" />
<h1 className="text-lg tracking-wide font-brand">Multica</h1>
<div className="flex h-screen flex-col bg-background">
<header
className="shrink-0 h-12"
style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
/>
<div className="flex flex-1 flex-col items-center justify-center p-8 animate-in fade-in duration-300">
<div className="w-full max-w-sm flex flex-col items-center text-center space-y-6">
{/* Brand */}
<div className="flex items-center gap-2">
<MulticaIcon bordered animate size="md" />
<h1 className="text-lg tracking-wide font-brand">Multica</h1>
</div>
{/* Tagline */}
<p className="text-sm text-muted-foreground leading-relaxed">
An AI assistant that gets things done.
</p>
{/* Sign In */}
<Button
onClick={startLogin}
size="lg"
className="px-8"
>
Sign In to Continue
</Button>
{/* Helper */}
<p className="text-xs text-muted-foreground/60">
Opens browser for authentication
</p>
</div>
{/* Tagline */}
<p className="text-sm text-muted-foreground leading-relaxed">
An AI assistant that gets things done.
</p>
{/* Sign In */}
<Button
onClick={startLogin}
size="lg"
className="px-8"
style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
>
Sign In to Continue
</Button>
{/* Helper */}
<p className="text-xs text-muted-foreground/60">
Opens browser for authentication
</p>
</div>
</div>
)

View file

@ -44,12 +44,12 @@ export default function OnboardingPage() {
return (
<div className="h-dvh flex flex-col bg-background">
<header className="shrink-0 h-12 flex items-center pr-4">
{/* Left: Draggable area for traffic lights */}
<div
className="w-20 h-full shrink-0"
style={{ WebkitAppRegion: "drag" } as React.CSSProperties}
/>
<header
className="shrink-0 h-12 flex items-center pr-4"
style={{ WebkitAppRegion: "drag" } as React.CSSProperties}
>
{/* Left: Traffic light spacing */}
<div className="w-20 h-full shrink-0" />
{/* Brand */}
<div className="flex items-center gap-2 shrink-0">
@ -65,7 +65,10 @@ export default function OnboardingPage() {
</div>
{/* Right: Theme toggle */}
<div className="shrink-0">
<div
className="shrink-0"
style={{ WebkitAppRegion: "no-drag" } as React.CSSProperties}
>
<ModeToggle />
</div>
</header>