Skip to content

Commit c5500dd

Browse files
ctatectate
authored
Change homepage task options to dropdown instead of dialog (#181)
Co-authored-by: Chris Tate <ctate@users.noreply.github.com>
1 parent fd405bc commit c5500dd

File tree

1 file changed

+60
-79
lines changed

1 file changed

+60
-79
lines changed

‎components/task-form.tsx‎

Lines changed: 60 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,12 @@ import { Checkbox } from '@/components/ui/checkbox'
88
import { Label } from '@/components/ui/label'
99
import { Badge } from '@/components/ui/badge'
1010
import {
11-
Dialog,
12-
DialogContent,
13-
DialogDescription,
14-
DialogHeader,
15-
DialogTitle,
16-
DialogTrigger,
17-
} from '@/components/ui/dialog'
11+
DropdownMenu,
12+
DropdownMenuContent,
13+
DropdownMenuLabel,
14+
DropdownMenuSeparator,
15+
DropdownMenuTrigger,
16+
} from '@/components/ui/dropdown-menu'
1817
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
1918
import { Loader2, ArrowUp, Settings, X, Cable, Users } from 'lucide-react'
2019
import { Claude, Codex, Copilot, Cursor, Gemini, OpenCode } from '@/components/logos'
@@ -172,7 +171,6 @@ export function TaskForm({
172171
const [installDependencies, setInstallDependenciesState] = useState(initialInstallDependencies)
173172
const [maxDuration, setMaxDurationState] = useState(initialMaxDuration)
174173
const [keepAlive, setKeepAliveState] = useState(initialKeepAlive)
175-
const [showOptionsDialog, setShowOptionsDialog] = useState(false)
176174
const [showMcpServersDialog, setShowMcpServersDialog] = useState(false)
177175

178176
// Connectors state
@@ -544,11 +542,7 @@ export function TaskForm({
544542
{(!installDependencies || maxDuration !== maxSandboxDuration || keepAlive) && (
545543
<div className="hidden sm:flex items-center gap-2 flex-wrap">
546544
{!installDependencies && (
547-
<Badge
548-
variant="secondary"
549-
className="text-xs h-6 px-2 gap-1 cursor-pointer hover:bg-muted/20 bg-transparent border-0"
550-
onClick={() => setShowOptionsDialog(true)}
551-
>
545+
<Badge variant="secondary" className="text-xs h-6 px-2 gap-1 bg-transparent border-0">
552546
Skip Install
553547
<Button
554548
variant="ghost"
@@ -564,11 +558,7 @@ export function TaskForm({
564558
</Badge>
565559
)}
566560
{maxDuration !== maxSandboxDuration && (
567-
<Badge
568-
variant="secondary"
569-
className="text-xs h-6 px-2 gap-1 cursor-pointer hover:bg-muted/20 bg-transparent border-0"
570-
onClick={() => setShowOptionsDialog(true)}
571-
>
561+
<Badge variant="secondary" className="text-xs h-6 px-2 gap-1 bg-transparent border-0">
572562
{maxDuration}m
573563
<Button
574564
variant="ghost"
@@ -584,11 +574,7 @@ export function TaskForm({
584574
</Badge>
585575
)}
586576
{keepAlive && (
587-
<Badge
588-
variant="secondary"
589-
className="text-xs h-6 px-2 gap-1 cursor-pointer hover:bg-muted/20 bg-transparent border-0"
590-
onClick={() => setShowOptionsDialog(true)}
591-
>
577+
<Badge variant="secondary" className="text-xs h-6 px-2 gap-1 bg-transparent border-0">
592578
Keep Alive
593579
<Button
594580
variant="ghost"
@@ -637,10 +623,10 @@ export function TaskForm({
637623
</TooltipContent>
638624
</Tooltip>
639625

640-
<Dialog open={showOptionsDialog} onOpenChange={setShowOptionsDialog}>
626+
<DropdownMenu>
641627
<Tooltip>
642628
<TooltipTrigger asChild>
643-
<DialogTrigger asChild>
629+
<DropdownMenuTrigger asChild>
644630
<Button
645631
type="button"
646632
variant="ghost"
@@ -664,58 +650,55 @@ export function TaskForm({
664650
) : null
665651
})()}
666652
</Button>
667-
</DialogTrigger>
653+
</DropdownMenuTrigger>
668654
</TooltipTrigger>
669655
<TooltipContent>
670656
<p>Task Options</p>
671657
</TooltipContent>
672658
</Tooltip>
673-
<DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
674-
<DialogHeader>
675-
<DialogTitle>Task Options</DialogTitle>
676-
<DialogDescription>Configure settings for your task execution.</DialogDescription>
677-
</DialogHeader>
678-
<div className="space-y-6 py-4 overflow-y-auto flex-1">
679-
<div className="space-y-4">
680-
<h3 className="text-sm font-semibold">Task Settings</h3>
681-
<div className="flex items-center space-x-2">
682-
<Checkbox
683-
id="install-deps"
684-
checked={installDependencies}
685-
onCheckedChange={(checked) => updateInstallDependencies(checked === true)}
686-
/>
687-
<Label
688-
htmlFor="install-deps"
689-
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
690-
>
691-
Install Dependencies?
692-
</Label>
693-
</div>
694-
<div className="space-y-2">
695-
<Label htmlFor="max-duration" className="text-sm font-medium">
696-
Maximum Duration
697-
</Label>
698-
<Select
699-
value={maxDuration.toString()}
700-
onValueChange={(value) => updateMaxDuration(parseInt(value))}
701-
>
702-
<SelectTrigger id="max-duration" className="w-full">
703-
<SelectValue />
704-
</SelectTrigger>
705-
<SelectContent>
706-
<SelectItem value="5">5 minutes</SelectItem>
707-
<SelectItem value="10">10 minutes</SelectItem>
708-
<SelectItem value="15">15 minutes</SelectItem>
709-
<SelectItem value="30">30 minutes</SelectItem>
710-
<SelectItem value="45">45 minutes</SelectItem>
711-
<SelectItem value="60">1 hour</SelectItem>
712-
<SelectItem value="120">2 hours</SelectItem>
713-
<SelectItem value="180">3 hours</SelectItem>
714-
<SelectItem value="240">4 hours</SelectItem>
715-
<SelectItem value="300">5 hours</SelectItem>
716-
</SelectContent>
717-
</Select>
718-
</div>
659+
<DropdownMenuContent className="w-72" align="end">
660+
<DropdownMenuLabel>Task Options</DropdownMenuLabel>
661+
<DropdownMenuSeparator />
662+
<div className="p-2 space-y-4">
663+
<div className="flex items-center space-x-2">
664+
<Checkbox
665+
id="install-deps"
666+
checked={installDependencies}
667+
onCheckedChange={(checked) => updateInstallDependencies(checked === true)}
668+
/>
669+
<Label
670+
htmlFor="install-deps"
671+
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
672+
>
673+
Install Dependencies?
674+
</Label>
675+
</div>
676+
<div className="space-y-2">
677+
<Label htmlFor="max-duration" className="text-sm font-medium">
678+
Maximum Duration
679+
</Label>
680+
<Select
681+
value={maxDuration.toString()}
682+
onValueChange={(value) => updateMaxDuration(parseInt(value))}
683+
>
684+
<SelectTrigger id="max-duration" className="w-full h-8">
685+
<SelectValue />
686+
</SelectTrigger>
687+
<SelectContent>
688+
<SelectItem value="5">5 minutes</SelectItem>
689+
<SelectItem value="10">10 minutes</SelectItem>
690+
<SelectItem value="15">15 minutes</SelectItem>
691+
<SelectItem value="30">30 minutes</SelectItem>
692+
<SelectItem value="45">45 minutes</SelectItem>
693+
<SelectItem value="60">1 hour</SelectItem>
694+
<SelectItem value="120">2 hours</SelectItem>
695+
<SelectItem value="180">3 hours</SelectItem>
696+
<SelectItem value="240">4 hours</SelectItem>
697+
<SelectItem value="300">5 hours</SelectItem>
698+
</SelectContent>
699+
</Select>
700+
</div>
701+
<div className="space-y-2">
719702
<div className="flex items-center space-x-2">
720703
<Checkbox
721704
id="keep-alive"
@@ -724,18 +707,16 @@ export function TaskForm({
724707
/>
725708
<Label
726709
htmlFor="keep-alive"
727-
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
710+
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
728711
>
729-
Keep Alive ({maxSandboxDuration} minutes max)
712+
Keep Alive ({maxSandboxDuration}m max)
730713
</Label>
731714
</div>
732-
<p className="text-xs text-muted-foreground">
733-
Keep the sandbox running after task completion to reuse it for follow-up messages.
734-
</p>
715+
<p className="text-xs text-muted-foreground pl-6">Keep sandbox running after completion.</p>
735716
</div>
736717
</div>
737-
</DialogContent>
738-
</Dialog>
718+
</DropdownMenuContent>
719+
</DropdownMenu>
739720
</TooltipProvider>
740721

741722
<Button

0 commit comments

Comments
 (0)