old4ever/local-cal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: mobile-first AI toolbar layout

Browse Source
This commit is contained in:
Dmytro Stanchiev
2026-04-08 01:50:06 -04:00
parent 0807779c9b
commit 0f46e9322f
1 changed files with 47 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/components/ai-toolbar.tsx
View File

@@ -78,7 +78,8 @@ export const AIToolbar = ({
{/* AI command — only shown when authenticated */} {/* AI command — only shown when authenticated */}
{isAuthenticated ? ( {isAuthenticated ? (
<> <>
<div className="flex items-start gap-3"> {/* Textarea fills full width; action icons sit below on mobile, to the right on sm+ */}
<div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:gap-3">
<div className="flex-1 space-y-2"> <div className="flex-1 space-y-2">
<div className="flex items-center gap-2 mb-1.5"> <div className="flex items-center gap-2 mb-1.5">
<Sparkles className="h-3.5 w-3.5 text-primary shrink-0" /> <Sparkles className="h-3.5 w-3.5 text-primary shrink-0" />
@@ -121,7 +122,9 @@ export const AIToolbar = ({
)} )}
</AnimatePresence> </AnimatePresence>
</div> </div>
<div className="flex flex-col gap-1.5 pt-6">
{/* On mobile: horizontal row below textarea. On sm+: vertical column beside textarea */}
<div className="flex flex-row gap-1.5 sm:flex-col sm:pt-6">
<ImagePicker <ImagePicker
onFileSelect={onImageSelect} onFileSelect={onImageSelect}
disabled={aiLoading} disabled={aiLoading}
@@ -158,46 +161,50 @@ export const AIToolbar = ({
)} )}
{/* Action buttons — always visible */} {/* Action buttons — always visible */}
<div className="flex items-center gap-2 flex-wrap"> {/* On mobile: two rows — actions top, meta (badge + summarize) below */}
<Button size="sm" onClick={onAddEvent} className="text-xs"> {/* On sm+: single row with meta pushed to the right */}
<CalendarPlus className="h-3.5 w-3.5" /> <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:flex-wrap">
Add Event <div className="flex items-center gap-2 flex-wrap">
</Button> <Button size="sm" onClick={onAddEvent} className="text-xs">
<CalendarPlus className="h-3.5 w-3.5" />
Add Event
</Button>
<IcsFilePicker <IcsFilePicker
onFileSelect={onImport} onFileSelect={onImport}
variant="outline" variant="outline"
size="sm" size="sm"
className="text-xs" className="text-xs"
> >
<FileUp className="h-3.5 w-3.5" /> <FileUp className="h-3.5 w-3.5" />
Import Import
</IcsFilePicker> </IcsFilePicker>
{events.length > 0 && ( {events.length > 0 && (
<> <>
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
onClick={onExport} onClick={onExport}
className="text-xs" className="text-xs"
> >
<Download className="h-3.5 w-3.5" /> <Download className="h-3.5 w-3.5" />
Export Export
</Button> </Button>
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={onClearAll} onClick={onClearAll}
className="text-xs text-muted-foreground hover:text-destructive" className="text-xs text-muted-foreground hover:text-destructive"
> >
<Trash2 className="h-3.5 w-3.5" /> <Trash2 className="h-3.5 w-3.5" />
Clear Clear
</Button> </Button>
</> </>
)} )}
</div>
<div className="ml-auto flex items-center gap-3"> <div className="flex items-center gap-3 sm:ml-auto">
{events.length > 0 && ( {events.length > 0 && (
<Badge variant="secondary" className="text-xs"> <Badge variant="secondary" className="text-xs">
{events.length} event{events.length !== 1 ? "s" : ""} {events.length} event{events.length !== 1 ? "s" : ""}
@@ -211,7 +218,7 @@ export const AIToolbar = ({
disabled={aiLoading} disabled={aiLoading}
className="text-xs h-7" className="text-xs h-7"
> >
<Bot className="h-3 w-3 mr-1.5" /> <Bot className="h-3 w-3" />
{aiLoading ? "Summarizing..." : "Summarize"} {aiLoading ? "Summarizing..." : "Summarize"}
</Button> </Button>
)} )}