mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-05-23 19:05:16 +02:00
refactor: replace button elements with Button component for improved consistency and styling across UI components
This commit is contained in:
Anish Sarkar
parent
198c38b335
commit
f98bde1e04
7 changed files with 125 additions and 84 deletions
|
|
@ -144,11 +144,12 @@ const MobileCitationDrawer: FC = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => setOpen(true)}
|
||||
className={cn(
|
||||
"isolate inline-flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2",
|
||||
"isolate h-auto cursor-pointer gap-2 rounded-lg px-3 py-2",
|
||||
"bg-muted/40 outline-none",
|
||||
"transition-colors duration-150",
|
||||
"hover:bg-accent hover:text-accent-foreground",
|
||||
|
|
@ -194,7 +195,7 @@ const MobileCitationDrawer: FC = () => {
|
|||
<span className="text-muted-foreground text-sm tabular-nums">
|
||||
{citations.length} source{citations.length !== 1 && "s"}
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
<Drawer open={open} onOpenChange={setOpen}>
|
||||
<DrawerContent className="max-h-[85vh] flex flex-col">
|
||||
|
|
@ -204,11 +205,12 @@ const MobileCitationDrawer: FC = () => {
|
|||
</DrawerHeader>
|
||||
<div className="overflow-y-auto flex-1 min-h-0 px-1 pb-6">
|
||||
{citations.map((citation) => (
|
||||
<button
|
||||
<Button
|
||||
key={citation.id}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => handleNavigate(citation)}
|
||||
className="group flex w-full items-center gap-2.5 rounded-md px-3 py-2.5 text-left transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-muted focus-visible:outline-none"
|
||||
className="group h-auto w-full justify-start gap-2.5 px-3 py-2.5 text-left hover:bg-accent hover:text-accent-foreground focus-visible:bg-muted"
|
||||
>
|
||||
{citation.favicon ? (
|
||||
// biome-ignore lint/performance/noImgElement: external favicon from arbitrary domain
|
||||
|
|
@ -230,7 +232,7 @@ const MobileCitationDrawer: FC = () => {
|
|||
<p className="text-muted-foreground truncate text-xs">{citation.domain}</p>
|
||||
</div>
|
||||
<ExternalLink className="text-muted-foreground size-3.5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" />
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</DrawerContent>
|
||||
|
|
@ -506,9 +508,10 @@ export const AssistantMessage: FC = () => {
|
|||
>
|
||||
{/* Fixed trigger slot prevents any vertical reflow when visibility changes */}
|
||||
<div className="mr-2 mb-1 flex h-7 justify-end">
|
||||
<button
|
||||
<Button
|
||||
ref={isDesktop ? commentTriggerRef : undefined}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={
|
||||
showCommentTrigger
|
||||
? isDesktop
|
||||
|
|
@ -519,7 +522,7 @@ export const AssistantMessage: FC = () => {
|
|||
aria-hidden={!showCommentTrigger}
|
||||
tabIndex={showCommentTrigger ? 0 : -1}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 rounded-full px-3 py-1 text-sm transition-colors",
|
||||
"h-auto gap-1.5 rounded-full px-3 py-1 text-sm transition-colors",
|
||||
"opacity-0 pointer-events-none",
|
||||
showCommentTrigger && "opacity-100 pointer-events-auto",
|
||||
isDesktop && isInlineOpen
|
||||
|
|
@ -537,7 +540,7 @@ export const AssistantMessage: FC = () => {
|
|||
) : (
|
||||
<span>Add comment</span>
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Desktop floating comment panel — overlays on top of chat content */}
|
||||
|
|
|
|||
|
|
@ -161,14 +161,16 @@ const PremiumQuotaPinnedAlert: FC = () => {
|
|||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm">{alert.message}</p>
|
||||
</div>
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
className="inline-flex size-6 items-center justify-center text-muted-foreground transition-colors hover:text-accent-foreground"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-6 text-muted-foreground hover:bg-transparent hover:text-accent-foreground"
|
||||
aria-label="Dismiss premium quota alert"
|
||||
onClick={() => clearPremiumAlertForThread(currentThreadId)}
|
||||
>
|
||||
<X className="size-4" />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -280,9 +282,11 @@ const ConnectToolsBanner: FC<{ isThreadEmpty: boolean }> = ({ isThreadEmpty }) =
|
|||
return (
|
||||
<div className="border-t border-border/50">
|
||||
<div className="flex w-full items-center gap-2.5 px-4 py-2.5">
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
className="flex flex-1 items-center gap-2.5 text-left cursor-pointer select-none"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-auto flex-1 justify-start gap-2.5 px-0 py-0 text-left cursor-pointer select-none hover:bg-transparent"
|
||||
onClick={() => setConnectorDialogOpen(true)}
|
||||
>
|
||||
<Unplug className="size-4 text-muted-foreground shrink-0" />
|
||||
|
|
@ -300,15 +304,17 @@ const ConnectToolsBanner: FC<{ isThreadEmpty: boolean }> = ({ isThreadEmpty }) =
|
|||
</Avatar>
|
||||
))}
|
||||
</AvatarGroup>
|
||||
</button>
|
||||
<button
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleDismiss}
|
||||
className="shrink-0 ml-0.5 p-1.5 -mr-1 text-muted-foreground/40 hover:text-accent-foreground transition-colors cursor-pointer"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-auto shrink-0 ml-0.5 -mr-1 p-1.5 text-muted-foreground/40 hover:bg-transparent hover:text-accent-foreground cursor-pointer"
|
||||
aria-label="Dismiss"
|
||||
>
|
||||
<X className="size-3.5" />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -326,14 +332,16 @@ const PendingScreenImageStrip: FC = () => {
|
|||
>
|
||||
{/* biome-ignore lint/performance/noImgElement: data URL thumbnails from capture */}
|
||||
<img src={url} alt="" className="size-full object-cover" draggable={false} />
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => setUrls((prev) => prev.filter((_, i) => i !== index))}
|
||||
className="absolute right-0.5 top-0.5 flex size-5 items-center justify-center rounded-full bg-background/90 text-muted-foreground shadow-sm transition-opacity hover:text-accent-foreground sm:opacity-0 sm:group-hover:opacity-100"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="absolute right-0.5 top-0.5 size-5 rounded-full bg-background/90 text-muted-foreground shadow-sm transition-opacity hover:bg-background/90 hover:text-accent-foreground sm:opacity-0 sm:group-hover:opacity-100"
|
||||
aria-label="Remove screenshot"
|
||||
>
|
||||
<X className="size-3" />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -352,21 +360,25 @@ const ClipboardChip: FC<{ text: string; onDismiss: () => void }> = ({ text, onDi
|
|||
<span className="text-xs font-medium text-muted-foreground">From clipboard</span>
|
||||
<div className="flex-1" />
|
||||
{isLong && (
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => setExpanded((v) => !v)}
|
||||
className="flex items-center text-muted-foreground hover:text-accent-foreground transition-colors"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-5 text-muted-foreground hover:bg-transparent hover:text-accent-foreground"
|
||||
>
|
||||
{expanded ? <ChevronUp className="size-3.5" /> : <ChevronDown className="size-3.5" />}
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
onClick={onDismiss}
|
||||
className="flex items-center text-muted-foreground hover:text-accent-foreground transition-colors"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-5 text-muted-foreground hover:bg-transparent hover:text-accent-foreground"
|
||||
>
|
||||
<X className="size-3.5" />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="px-3 pb-2">
|
||||
<p className="text-xs text-foreground/80 whitespace-pre-wrap wrap-break-word leading-relaxed">
|
||||
|
|
@ -1173,13 +1185,15 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
|
|||
</Popover>
|
||||
)}
|
||||
{hasWebSearchTool && (
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
aria-label={isWebSearchEnabled ? "Disable web search" : "Enable web search"}
|
||||
aria-pressed={isWebSearchEnabled}
|
||||
onClick={() => toggleTool("web_search")}
|
||||
className={cn(
|
||||
"rounded-full transition-[background-color,border-color,color] flex items-center gap-1 px-2 py-1 border h-8 select-none",
|
||||
"rounded-full transition-[background-color,border-color,color] flex items-center gap-1 px-2 py-1 border h-8 select-none hover:bg-transparent",
|
||||
isWebSearchEnabled
|
||||
? "bg-sky-500/15 border-sky-500/60 text-sky-500"
|
||||
: "bg-transparent border-transparent text-muted-foreground hover:text-accent-foreground"
|
||||
|
|
@ -1212,7 +1226,7 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
|
|||
</motion.span>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{!hasModelConfigured && (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue