mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-05-01 20:03:30 +02:00
refactor: update UI component styles and interactions
- Increased gap between action items in Header for improved layout. - Added onCloseAutoFocus to ChatShareButton for better focus management. - Enhanced ChevronDown icon in ModelSelector with rotation effect for better visual feedback. - Adjusted padding in ModelSelector to maintain consistent spacing.
This commit is contained in:
parent
1a0503f683
commit
26ca751a9d
3 changed files with 8 additions and 4 deletions
|
|
@ -125,6 +125,7 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
|
|||
className="w-[280px] md:w-[320px] p-0 rounded-lg shadow-lg border-border/60"
|
||||
align="end"
|
||||
sideOffset={8}
|
||||
onCloseAutoFocus={(e) => e.preventDefault()}
|
||||
>
|
||||
<div className="p-1.5 space-y-1">
|
||||
{/* Updating overlay */}
|
||||
|
|
|
|||
|
|
@ -202,7 +202,10 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
|
|||
<span className="text-muted-foreground hidden md:inline">Select Model</span>
|
||||
</>
|
||||
)}
|
||||
<ChevronDown className="h-3.5 w-3.5 text-muted-foreground ml-1 shrink-0" />
|
||||
<ChevronDown className={cn(
|
||||
"h-3.5 w-3.5 text-muted-foreground ml-1 shrink-0 transition-transform duration-200",
|
||||
open && "rotate-180"
|
||||
)} />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
|
||||
|
|
@ -225,7 +228,7 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
|
|||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-1 md:gap-2 border-b border-border/30 px-2 md:px-3 py-1.5 md:py-2">
|
||||
<div className="flex items-center gap-1 md:gap-2 px-2 md:px-3 py-1.5 md:py-2">
|
||||
<CommandInput
|
||||
placeholder="Search models"
|
||||
value={searchQuery}
|
||||
|
|
@ -238,7 +241,7 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
|
|||
<CommandList className="max-h-[300px] md:max-h-[400px] overflow-y-auto">
|
||||
<CommandEmpty className="py-8 text-center">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<Bot className="size-8 text-muted-foreground/40" />
|
||||
<Bot className="size-8 text-muted-foreground" />
|
||||
<p className="text-sm text-muted-foreground">No models found</p>
|
||||
<p className="text-xs text-muted-foreground/60">Try a different search term</p>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue