Skip to content

Commit db501ae

Browse files
bidahbidah
committed
💄 fix(web): restore full-screen agent setup modal on mobile with close icon
1 parent 046f241 commit db501ae

1 file changed

Lines changed: 68 additions & 70 deletions

File tree

‎apps/web/components/claude-model-selector.tsx‎

Lines changed: 68 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -177,80 +177,78 @@ function CompactSelector({
177177
<span className="sm:hidden">{agentType === 'opencode' ? 'OC' : 'CC'}</span>
178178
</Button>
179179
</DialogTrigger>
180-
<DialogContent className="sm:max-w-[360px] border-none p-0 bg-transparent shadow-2xl">
181-
<div className="bg-card border border-border/50 rounded-3xl overflow-hidden shadow-2xl animate-in fade-in zoom-in-95 duration-200 relative p-6">
182-
<button
183-
onClick={() => setOpen(false)}
184-
className="absolute top-4 right-4 z-20 p-2 rounded-full bg-background/50 backdrop-blur-sm border border-border/50 text-foreground hover:bg-background/80 transition-all"
185-
>
186-
<X className="w-4 h-4" />
187-
</button>
188-
<DialogHeader>
189-
<DialogTitle className="text-xl font-bold text-left">Agent Setup</DialogTitle>
190-
</DialogHeader>
191-
192-
<div className="space-y-4 pt-4">
193-
{/* Agent selector */}
194-
{onAgentTypeChange && (
195-
<div className="space-y-2">
196-
<label className="text-xs font-bold uppercase tracking-wider text-muted-foreground">Agent</label>
197-
<div className="grid grid-cols-2 gap-2">
198-
{AGENTS.map((agent) => (
199-
<button
200-
key={agent.id}
201-
type="button"
202-
onClick={() => handleAgentChange(agent.id)}
203-
className={cn(
204-
'relative flex flex-col items-start gap-1 rounded-xl border p-3 text-left transition-all active:scale-[0.98]',
205-
agentType === agent.id
206-
? 'border-primary bg-primary/5 ring-1 ring-primary/20'
207-
: 'border-border hover:border-muted-foreground/30 hover:bg-accent'
208-
)}
209-
>
210-
{agentType === agent.id && (
211-
<Check className="absolute top-2 right-2 h-3.5 w-3.5 text-primary" />
212-
)}
213-
<div className="flex items-center gap-1.5">
214-
<Bot className="h-4 w-4 text-muted-foreground" />
215-
<span className="text-sm font-semibold">{agent.name}</span>
216-
</div>
217-
<span className="text-[10px] text-muted-foreground leading-tight">{agent.description}</span>
218-
</button>
219-
))}
220-
</div>
221-
</div>
222-
)}
180+
<DialogContent className="sm:max-w-[360px]">
181+
<button
182+
onClick={() => setOpen(false)}
183+
className="absolute top-4 right-4 z-20 p-2 rounded-full bg-background/50 backdrop-blur-sm border border-border/50 text-foreground hover:bg-background/80 transition-all sm:hidden"
184+
>
185+
<X className="w-4 h-4" />
186+
</button>
187+
<DialogHeader>
188+
<DialogTitle>Agent Setup</DialogTitle>
189+
</DialogHeader>
223190

224-
{/* Model selector */}
191+
<div className="space-y-4 pt-2">
192+
{/* Agent selector */}
193+
{onAgentTypeChange && (
225194
<div className="space-y-2">
226-
<label className="text-xs font-bold uppercase tracking-wider text-muted-foreground">Model</label>
227-
<div className="space-y-2">
228-
{models.map((model) => {
229-
const isSelected = resolvedValue === model.id
230-
return (
231-
<button
232-
key={model.id}
233-
type="button"
234-
onClick={() => handleModelChange(model.id)}
235-
className={cn(
236-
'relative flex w-full items-start rounded-xl border p-3 text-left transition-all active:scale-[0.98]',
237-
isSelected
238-
? 'border-primary bg-primary/5 ring-1 ring-primary/20'
239-
: 'border-border hover:border-muted-foreground/30 hover:bg-accent'
240-
)}
241-
>
242-
{isSelected && (
243-
<Check className="absolute top-3 right-3 h-4 w-4 text-primary" />
244-
)}
245-
<div className="flex flex-col gap-0.5">
246-
<span className="text-sm font-semibold">{model.name}</span>
247-
<span className="text-xs text-muted-foreground">{model.description}</span>
248-
</div>
249-
</button>
250-
)
251-
})}
195+
<label className="text-sm font-medium text-muted-foreground">Agent</label>
196+
<div className="grid grid-cols-2 gap-2">
197+
{AGENTS.map((agent) => (
198+
<button
199+
key={agent.id}
200+
type="button"
201+
onClick={() => handleAgentChange(agent.id)}
202+
className={cn(
203+
'relative flex flex-col items-start gap-0.5 rounded-lg border p-3 text-left transition-colors',
204+
agentType === agent.id
205+
? 'border-primary bg-primary/5'
206+
: 'border-border hover:border-muted-foreground/30 hover:bg-accent'
207+
)}
208+
>
209+
{agentType === agent.id && (
210+
<Check className="absolute top-2 right-2 h-3.5 w-3.5 text-primary" />
211+
)}
212+
<div className="flex items-center gap-1.5">
213+
<Bot className="h-4 w-4 text-muted-foreground" />
214+
<span className="text-sm font-medium">{agent.name}</span>
215+
</div>
216+
<span className="text-xs text-muted-foreground">{agent.description}</span>
217+
</button>
218+
))}
252219
</div>
253220
</div>
221+
)}
222+
223+
{/* Model selector */}
224+
<div className="space-y-2">
225+
<label className="text-sm font-medium text-muted-foreground">Model</label>
226+
<div className="space-y-1.5">
227+
{models.map((model) => {
228+
const isSelected = resolvedValue === model.id
229+
return (
230+
<button
231+
key={model.id}
232+
type="button"
233+
onClick={() => handleModelChange(model.id)}
234+
className={cn(
235+
'relative flex w-full items-start rounded-lg border p-3 text-left transition-colors',
236+
isSelected
237+
? 'border-primary bg-primary/5'
238+
: 'border-border hover:border-muted-foreground/30 hover:bg-accent'
239+
)}
240+
>
241+
{isSelected && (
242+
<Check className="absolute top-2 right-2 h-3.5 w-3.5 text-primary" />
243+
)}
244+
<div className="flex flex-col gap-0.5">
245+
<span className="text-sm font-medium">{model.name}</span>
246+
<span className="text-xs text-muted-foreground">{model.description}</span>
247+
</div>
248+
</button>
249+
)
250+
})}
251+
</div>
254252
</div>
255253
</div>
256254
</DialogContent>

0 commit comments

Comments
 (0)