ob/sprint
1
0
Fork 0
mirror of https://github.com/hex248/sprint.git synced 2026-02-07 18:23:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

ensure the fullscreen countdown is always on top and not restricted to the parent bounds

Browse Source
This commit is contained in:
Oliver Bryan
2026-01-01 02:27:11 +00:00
parent 0860217d99
commit a9bbb30285
1 changed files with 71 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
packages/frontend/src/components/server-configuration-dialog.tsx
View File

@@ -1,5 +1,6 @@
import { CheckIcon, ServerIcon, Undo2 } from "lucide-react";
import { type ReactNode, useState } from "react";
import { createPortal } from "react-dom";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
@@ -108,76 +109,79 @@ export function ServerConfigurationDialog({ trigger }: { trigger?: ReactNode })
};
return (
<Dialog open={open} onOpenChange={handleOpenChange}>
<DialogTrigger asChild>
{trigger || (
<Button
variant="ghost"
size="icon"
className="absolute top-2 right-2"
title="Server Configuration"
>
<ServerIcon className="size-4" />
</Button>
)}
</DialogTrigger>
<>
<Dialog open={open} onOpenChange={handleOpenChange}>
<DialogTrigger asChild>
{trigger || (
<Button
variant="ghost"
size="icon"
className="absolute top-2 right-2"
title="Server Configuration"
>
<ServerIcon className="size-4" />
</Button>
)}
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Server Configuration</DialogTitle>
</DialogHeader>
<DialogContent>
<DialogHeader>
<DialogTitle>Server Configuration</DialogTitle>
</DialogHeader>
<div className="grid gap-4">
<div className="grid gap-2">
<Label htmlFor="server-url">Server URL</Label>
<div className="flex gap-2">
<Input
id="server-url"
value={serverURL}
onChange={(e) => handleServerURLChange(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter" && canSave && !isCheckingHealth) {
e.preventDefault();
void handleSave();
}
}}
placeholder="https://example.com"
className={!isValid ? "border-destructive" : ""}
/>
<Button
type="button"
size="icon"
variant={canSave ? "default" : "outline"}
disabled={!canSave || isCheckingHealth}
onClick={handleSave}
>
<CheckIcon className="size-4" />
</Button>
<Button
type="button"
size="icon"
variant="secondary"
disabled={!isNotDefault || isCheckingHealth}
onClick={handleResetToDefault}
title="Reset to default"
>
<Undo2 className="size-4" />
</Button>
<div className="grid gap-4">
<div className="grid gap-2">
<Label htmlFor="server-url">Server URL</Label>
<div className="flex gap-2">
<Input
id="server-url"
value={serverURL}
onChange={(e) => handleServerURLChange(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter" && canSave && !isCheckingHealth) {
e.preventDefault();
void handleSave();
}
}}
placeholder="https://example.com"
className={!isValid ? "border-destructive" : ""}
/>
<Button
type="button"
size="icon"
variant={canSave ? "default" : "outline"}
disabled={!canSave || isCheckingHealth}
onClick={handleSave}
>
<CheckIcon className="size-4" />
</Button>
<Button
type="button"
size="icon"
variant="secondary"
disabled={!isNotDefault || isCheckingHealth}
onClick={handleResetToDefault}
title="Reset to default"
>
<Undo2 className="size-4" />
</Button>
</div>
{!isValid && (
<Label className="text-destructive text-sm">Please enter a valid URL</Label>
)}
{healthError && <Label className="text-destructive text-sm">{healthError}</Label>}
</div>
{!isValid && (
<Label className="text-destructive text-sm">Please enter a valid URL</Label>
)}
{healthError && <Label className="text-destructive text-sm">{healthError}</Label>}
</div>
</div>
</DialogContent>
{countdown !== null && (
<div className="fixed inset-0 z-[100] bg-black/50 flex flex-col items-center justify-center pointer-events-auto">
<div className="text-2xl font-bold pointer-events-none noselect">Redirecting</div>
<div className="text-8xl font-bold pointer-events-none noselect">{countdown}</div>
</div>
)}
</Dialog>
</DialogContent>
</Dialog>
{countdown !== null &&
createPortal(
<div className="fixed inset-0 z-[100] bg-black/50 flex flex-col items-center justify-center pointer-events-auto">
<div className="text-2xl font-bold pointer-events-none noselect">Redirecting</div>
<div className="text-8xl font-bold pointer-events-none noselect">{countdown}</div>
</div>,
document.body,
)}
</>
);
}