apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-23 19:05:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: replace button elements with Button component for improved consistency and styling across UI components

Browse source
This commit is contained in:
Anish Sarkar 2026-05-14 13:49:33 +05:30
parent 198c38b335
commit f98bde1e04
7 changed files with 125 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

16
surfsense_web/app/desktop/login/page.tsx
View file

@ -161,17 +161,18 @@ function HotkeyRow({
<RotateCcw className="size-3" /> <RotateCcw className="size-3" />
</Button> </Button>
)} )}
<button <Button
ref={inputRef} ref={inputRef}
type="button" type="button"
variant="ghost"
title={recording ? "Press shortcut keys" : "Click to edit shortcut"} title={recording ? "Press shortcut keys" : "Click to edit shortcut"}
onClick={() => setRecording(true)} onClick={() => setRecording(true)}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
onBlur={() => setRecording(false)} onBlur={() => setRecording(false)}
className={ className={
recording recording
? "flex h-7 items-center rounded-md border border-transparent bg-primary/5 outline-none ring-0 focus:outline-none focus-visible:outline-none focus-visible:ring-0" ? "h-7 border border-transparent bg-primary/5 px-0 outline-none ring-0 focus:outline-none focus-visible:outline-none focus-visible:ring-0"
: "flex h-7 cursor-pointer items-center rounded-md border border-transparent bg-transparent outline-none ring-0 transition-colors hover:bg-accent hover:text-accent-foreground focus:outline-none focus-visible:outline-none focus-visible:ring-0" : "h-7 cursor-pointer border border-transparent bg-transparent px-0 outline-none ring-0 transition-colors hover:bg-accent hover:text-accent-foreground focus:outline-none focus-visible:outline-none focus-visible:ring-0"
} }
> >
{recording ? ( {recording ? (
@ -179,7 +180,7 @@ function HotkeyRow({
) : ( ) : (
<ShortcutKbd keys={displayKeys} className="ml-0 px-1.5 text-foreground/85" /> <ShortcutKbd keys={displayKeys} className="ml-0 px-1.5 text-foreground/85" />
)} )}
</button> </Button>
</div> </div>
</div> </div>
); );
@ -388,10 +389,11 @@ export default function DesktopLoginPage() {
disabled={isLoggingIn} disabled={isLoggingIn}
className="h-9 pr-9" className="h-9 pr-9"
/> />
<button <Button
type="button" type="button"
variant="ghost"
onClick={() => setShowPassword((v) => !v)} onClick={() => setShowPassword((v) => !v)}
className="absolute inset-y-0 right-0 flex items-center pr-2.5 text-muted-foreground hover:text-foreground" className="absolute inset-y-0 right-0 h-auto bg-transparent px-2.5 py-0 text-muted-foreground hover:bg-transparent hover:text-foreground"
tabIndex={-1} tabIndex={-1}
> >
{showPassword ? ( {showPassword ? (
@ -399,7 +401,7 @@ export default function DesktopLoginPage() {
) : ( ) : (
<Eye className="size-3.5" /> <Eye className="size-3.5" />
)} )}
</button> </Button>
</div> </div>
</div> </div>

21
surfsense_web/components/assistant-ui/assistant-message.tsx
View file

@ -144,11 +144,12 @@ const MobileCitationDrawer: FC = () => {
return ( return (
<> <>
<button <Button
type="button" type="button"
variant="ghost"
onClick={() => setOpen(true)} onClick={() => setOpen(true)}
className={cn( 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", "bg-muted/40 outline-none",
"transition-colors duration-150", "transition-colors duration-150",
"hover:bg-accent hover:text-accent-foreground", "hover:bg-accent hover:text-accent-foreground",
@ -194,7 +195,7 @@ const MobileCitationDrawer: FC = () => {
<span className="text-muted-foreground text-sm tabular-nums"> <span className="text-muted-foreground text-sm tabular-nums">
{citations.length} source{citations.length !== 1 && "s"} {citations.length} source{citations.length !== 1 && "s"}
</span> </span>
</button> </Button>
<Drawer open={open} onOpenChange={setOpen}> <Drawer open={open} onOpenChange={setOpen}>
<DrawerContent className="max-h-[85vh] flex flex-col"> <DrawerContent className="max-h-[85vh] flex flex-col">
@ -204,11 +205,12 @@ const MobileCitationDrawer: FC = () => {
</DrawerHeader> </DrawerHeader>
<div className="overflow-y-auto flex-1 min-h-0 px-1 pb-6"> <div className="overflow-y-auto flex-1 min-h-0 px-1 pb-6">
{citations.map((citation) => ( {citations.map((citation) => (
<button <Button
key={citation.id} key={citation.id}
type="button" type="button"
variant="ghost"
onClick={() => handleNavigate(citation)} 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 ? ( {citation.favicon ? (
// biome-ignore lint/performance/noImgElement: external favicon from arbitrary domain // 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> <p className="text-muted-foreground truncate text-xs">{citation.domain}</p>
</div> </div>
<ExternalLink className="text-muted-foreground size-3.5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" /> <ExternalLink className="text-muted-foreground size-3.5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" />
</button> </Button>
))} ))}
</div> </div>
</DrawerContent> </DrawerContent>
@ -506,9 +508,10 @@ export const AssistantMessage: FC = () => {
> >
{/* Fixed trigger slot prevents any vertical reflow when visibility changes */} {/* Fixed trigger slot prevents any vertical reflow when visibility changes */}
<div className="mr-2 mb-1 flex h-7 justify-end"> <div className="mr-2 mb-1 flex h-7 justify-end">
<button <Button
ref={isDesktop ? commentTriggerRef : undefined} ref={isDesktop ? commentTriggerRef : undefined}
type="button" type="button"
variant="ghost"
onClick={ onClick={
showCommentTrigger showCommentTrigger
? isDesktop ? isDesktop
@ -519,7 +522,7 @@ export const AssistantMessage: FC = () => {
aria-hidden={!showCommentTrigger} aria-hidden={!showCommentTrigger}
tabIndex={showCommentTrigger ? 0 : -1} tabIndex={showCommentTrigger ? 0 : -1}
className={cn( 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", "opacity-0 pointer-events-none",
showCommentTrigger && "opacity-100 pointer-events-auto", showCommentTrigger && "opacity-100 pointer-events-auto",
isDesktop && isInlineOpen isDesktop && isInlineOpen
@ -537,7 +540,7 @@ export const AssistantMessage: FC = () => {
) : ( ) : (
<span>Add comment</span> <span>Add comment</span>
)} )}
</button> </Button>
</div> </div>
{/* Desktop floating comment panel — overlays on top of chat content */} {/* Desktop floating comment panel — overlays on top of chat content */}

56
surfsense_web/components/assistant-ui/thread.tsx
View file

@ -161,14 +161,16 @@ const PremiumQuotaPinnedAlert: FC = () => {
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="text-sm">{alert.message}</p> <p className="text-sm">{alert.message}</p>
</div> </div>
<button <Button
type="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" aria-label="Dismiss premium quota alert"
onClick={() => clearPremiumAlertForThread(currentThreadId)} onClick={() => clearPremiumAlertForThread(currentThreadId)}
> >
<X className="size-4" /> <X className="size-4" />
</button> </Button>
</div> </div>
</div> </div>
); );
@ -280,9 +282,11 @@ const ConnectToolsBanner: FC<{ isThreadEmpty: boolean }> = ({ isThreadEmpty }) =
return ( return (
<div className="border-t border-border/50"> <div className="border-t border-border/50">
<div className="flex w-full items-center gap-2.5 px-4 py-2.5"> <div className="flex w-full items-center gap-2.5 px-4 py-2.5">
<button <Button
type="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)} onClick={() => setConnectorDialogOpen(true)}
> >
<Unplug className="size-4 text-muted-foreground shrink-0" /> <Unplug className="size-4 text-muted-foreground shrink-0" />
@ -300,15 +304,17 @@ const ConnectToolsBanner: FC<{ isThreadEmpty: boolean }> = ({ isThreadEmpty }) =
</Avatar> </Avatar>
))} ))}
</AvatarGroup> </AvatarGroup>
</button> </Button>
<button <Button
type="button" type="button"
onClick={handleDismiss} 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" aria-label="Dismiss"
> >
<X className="size-3.5" /> <X className="size-3.5" />
</button> </Button>
</div> </div>
</div> </div>
); );
@ -326,14 +332,16 @@ const PendingScreenImageStrip: FC = () => {
> >
{/* biome-ignore lint/performance/noImgElement: data URL thumbnails from capture */} {/* biome-ignore lint/performance/noImgElement: data URL thumbnails from capture */}
<img src={url} alt="" className="size-full object-cover" draggable={false} /> <img src={url} alt="" className="size-full object-cover" draggable={false} />
<button <Button
type="button" type="button"
onClick={() => setUrls((prev) => prev.filter((_, i) => i !== index))} 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" aria-label="Remove screenshot"
> >
<X className="size-3" /> <X className="size-3" />
</button> </Button>
</div> </div>
))} ))}
</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> <span className="text-xs font-medium text-muted-foreground">From clipboard</span>
<div className="flex-1" /> <div className="flex-1" />
{isLong && ( {isLong && (
<button <Button
type="button" type="button"
onClick={() => setExpanded((v) => !v)} 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" />} {expanded ? <ChevronUp className="size-3.5" /> : <ChevronDown className="size-3.5" />}
</button> </Button>
)} )}
<button <Button
type="button" type="button"
onClick={onDismiss} 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" /> <X className="size-3.5" />
</button> </Button>
</div> </div>
<div className="px-3 pb-2"> <div className="px-3 pb-2">
<p className="text-xs text-foreground/80 whitespace-pre-wrap wrap-break-word leading-relaxed"> <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> </Popover>
)} )}
{hasWebSearchTool && ( {hasWebSearchTool && (
<button <Button
type="button" type="button"
variant="ghost"
size="sm"
aria-label={isWebSearchEnabled ? "Disable web search" : "Enable web search"} aria-label={isWebSearchEnabled ? "Disable web search" : "Enable web search"}
aria-pressed={isWebSearchEnabled} aria-pressed={isWebSearchEnabled}
onClick={() => toggleTool("web_search")} onClick={() => toggleTool("web_search")}
className={cn( 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 isWebSearchEnabled
? "bg-sky-500/15 border-sky-500/60 text-sky-500" ? "bg-sky-500/15 border-sky-500/60 text-sky-500"
: "bg-transparent border-transparent text-muted-foreground hover:text-accent-foreground" : "bg-transparent border-transparent text-muted-foreground hover:text-accent-foreground"
@ -1212,7 +1226,7 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
</motion.span> </motion.span>
)} )}
</AnimatePresence> </AnimatePresence>
</button> </Button>
)} )}
</div> </div>
{!hasModelConfigured && ( {!hasModelConfigured && (

22
surfsense_web/components/new-chat/document-mention-picker.tsx
View file

@ -17,6 +17,7 @@ import {
FOLDER_MENTION_DOCUMENT_TYPE, FOLDER_MENTION_DOCUMENT_TYPE,
type MentionedDocumentInfo, type MentionedDocumentInfo,
} from "@/atoms/chat/mentioned-documents.atom"; } from "@/atoms/chat/mentioned-documents.atom";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons"; import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import type { Document, SearchDocumentTitlesResponse } from "@/contracts/types/document.types"; import type { Document, SearchDocumentTitlesResponse } from "@/contracts/types/document.types";
@ -484,7 +485,7 @@ export const DocumentMentionPicker = forwardRef<
const isHighlighted = !isAlreadySelected && selectableIndex === highlightedIndex; const isHighlighted = !isAlreadySelected && selectableIndex === highlightedIndex;
return ( return (
<button <Button
key={docKey} key={docKey}
ref={(el) => { ref={(el) => {
if (el && selectableIndex >= 0) { if (el && selectableIndex >= 0) {
@ -492,6 +493,7 @@ export const DocumentMentionPicker = forwardRef<
} }
}} }}
type="button" type="button"
variant="ghost"
onClick={() => !isAlreadySelected && handleSelectMention(mention)} onClick={() => !isAlreadySelected && handleSelectMention(mention)}
onMouseEnter={() => { onMouseEnter={() => {
if (!isAlreadySelected && selectableIndex >= 0) { if (!isAlreadySelected && selectableIndex >= 0) {
@ -500,7 +502,7 @@ export const DocumentMentionPicker = forwardRef<
}} }}
disabled={isAlreadySelected} disabled={isAlreadySelected}
className={cn( className={cn(
"w-full flex items-center gap-2 px-3 py-2 text-left transition-colors rounded-md", "h-auto w-full justify-start gap-2 px-3 py-2 text-left transition-colors",
isAlreadySelected ? "opacity-50 cursor-not-allowed" : "cursor-pointer", isAlreadySelected ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
isHighlighted && "bg-accent text-accent-foreground" isHighlighted && "bg-accent text-accent-foreground"
)} )}
@ -511,7 +513,7 @@ export const DocumentMentionPicker = forwardRef<
<span className="flex-1 text-sm truncate" title={doc.title}> <span className="flex-1 text-sm truncate" title={doc.title}>
{doc.title} {doc.title}
</span> </span>
</button> </Button>
); );
})} })}
</> </>
@ -541,7 +543,7 @@ export const DocumentMentionPicker = forwardRef<
const isHighlighted = !isAlreadySelected && selectableIndex === highlightedIndex; const isHighlighted = !isAlreadySelected && selectableIndex === highlightedIndex;
return ( return (
<button <Button
key={docKey} key={docKey}
ref={(el) => { ref={(el) => {
if (el && selectableIndex >= 0) { if (el && selectableIndex >= 0) {
@ -549,6 +551,7 @@ export const DocumentMentionPicker = forwardRef<
} }
}} }}
type="button" type="button"
variant="ghost"
onClick={() => !isAlreadySelected && handleSelectMention(mention)} onClick={() => !isAlreadySelected && handleSelectMention(mention)}
onMouseEnter={() => { onMouseEnter={() => {
if (!isAlreadySelected && selectableIndex >= 0) { if (!isAlreadySelected && selectableIndex >= 0) {
@ -557,7 +560,7 @@ export const DocumentMentionPicker = forwardRef<
}} }}
disabled={isAlreadySelected} disabled={isAlreadySelected}
className={cn( className={cn(
"w-full flex items-center gap-2 px-3 py-2 text-left transition-colors rounded-md", "h-auto w-full justify-start gap-2 px-3 py-2 text-left transition-colors",
isAlreadySelected ? "opacity-50 cursor-not-allowed" : "cursor-pointer", isAlreadySelected ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
isHighlighted && "bg-accent text-accent-foreground" isHighlighted && "bg-accent text-accent-foreground"
)} )}
@ -568,7 +571,7 @@ export const DocumentMentionPicker = forwardRef<
<span className="flex-1 text-sm truncate" title={doc.title}> <span className="flex-1 text-sm truncate" title={doc.title}>
{doc.title} {doc.title}
</span> </span>
</button> </Button>
); );
})} })}
</> </>
@ -595,7 +598,7 @@ export const DocumentMentionPicker = forwardRef<
const isHighlighted = !isAlreadySelected && selectableIndex === highlightedIndex; const isHighlighted = !isAlreadySelected && selectableIndex === highlightedIndex;
return ( return (
<button <Button
key={folderKey} key={folderKey}
ref={(el) => { ref={(el) => {
if (el && selectableIndex >= 0) { if (el && selectableIndex >= 0) {
@ -603,6 +606,7 @@ export const DocumentMentionPicker = forwardRef<
} }
}} }}
type="button" type="button"
variant="ghost"
onClick={() => !isAlreadySelected && handleSelectMention(folder)} onClick={() => !isAlreadySelected && handleSelectMention(folder)}
onMouseEnter={() => { onMouseEnter={() => {
if (!isAlreadySelected && selectableIndex >= 0) { if (!isAlreadySelected && selectableIndex >= 0) {
@ -611,7 +615,7 @@ export const DocumentMentionPicker = forwardRef<
}} }}
disabled={isAlreadySelected} disabled={isAlreadySelected}
className={cn( className={cn(
"w-full flex items-center gap-2 px-3 py-2 text-left transition-colors rounded-md", "h-auto w-full justify-start gap-2 px-3 py-2 text-left transition-colors",
isAlreadySelected ? "opacity-50 cursor-not-allowed" : "cursor-pointer", isAlreadySelected ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
isHighlighted && "bg-accent text-accent-foreground" isHighlighted && "bg-accent text-accent-foreground"
)} )}
@ -622,7 +626,7 @@ export const DocumentMentionPicker = forwardRef<
<span className="flex-1 text-sm truncate" title={folder.title}> <span className="flex-1 text-sm truncate" title={folder.title}>
{folder.title} {folder.title}
</span> </span>
</button> </Button>
); );
})} })}
</> </>

28
surfsense_web/components/new-chat/model-selector.tsx
View file

@ -853,14 +853,15 @@ export function ModelSelector({
: "opacity-100 translate-y-0 pointer-events-auto" : "opacity-100 translate-y-0 pointer-events-auto"
)} )}
> >
<button <Button
type="button" type="button"
variant="ghost"
aria-label="Scroll providers up" aria-label="Scroll providers up"
onClick={() => scrollProviderSidebar("backward")} onClick={() => scrollProviderSidebar("backward")}
className="flex h-4 w-4 items-center justify-center rounded-sm text-muted-foreground/90 hover:text-accent-foreground hover:bg-accent transition-colors" className="h-4 w-4 rounded-sm p-0 text-muted-foreground/90 hover:bg-accent hover:text-accent-foreground"
> >
<ChevronUp className="size-3" /> <ChevronUp className="size-3" />
</button> </Button>
</div> </div>
)} )}
{isMobile && ( {isMobile && (
@ -913,12 +914,13 @@ export function ModelSelector({
))} ))}
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<button <Button
type="button" type="button"
variant="ghost"
onClick={() => setSelectedProvider(provider)} onClick={() => setSelectedProvider(provider)}
tabIndex={-1} tabIndex={-1}
className={cn( className={cn(
"relative flex items-center justify-center rounded-md transition-all duration-150", "relative h-auto rounded-md transition-all duration-150",
isMobile ? "p-2 shrink-0" : "p-1.5 w-full", isMobile ? "p-2 shrink-0" : "p-1.5 w-full",
isActive isActive
? "bg-primary/10 text-primary" ? "bg-primary/10 text-primary"
@ -934,7 +936,7 @@ export function ModelSelector({
className: "size-4", className: "size-4",
}) })
)} )}
</button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent side={isMobile ? "bottom" : "right"}> <TooltipContent side={isMobile ? "bottom" : "right"}>
{isAll ? "All Models" : formatProviderName(provider)} {isAll ? "All Models" : formatProviderName(provider)}
@ -954,14 +956,15 @@ export function ModelSelector({
: "opacity-100 translate-y-0 pointer-events-auto" : "opacity-100 translate-y-0 pointer-events-auto"
)} )}
> >
<button <Button
type="button" type="button"
variant="ghost"
aria-label="Scroll providers down" aria-label="Scroll providers down"
onClick={() => scrollProviderSidebar("forward")} onClick={() => scrollProviderSidebar("forward")}
className="flex h-4 w-4 items-center justify-center rounded-sm text-muted-foreground/90 hover:text-accent-foreground hover:bg-accent transition-colors" className="h-4 w-4 rounded-sm p-0 text-muted-foreground/90 hover:bg-accent hover:text-accent-foreground"
> >
<ChevronDown className="size-3" /> <ChevronDown className="size-3" />
</button> </Button>
</div> </div>
)} )}
{isMobile && ( {isMobile && (
@ -1175,13 +1178,14 @@ export function ModelSelector({
}, },
] as const ] as const
).map(({ value, icon: Icon, label }) => ( ).map(({ value, icon: Icon, label }) => (
<button <Button
key={value} key={value}
type="button" type="button"
variant="ghost"
// onClick={() => setActiveTab(value)} // onClick={() => setActiveTab(value)}
onClick={() => handleTabChange(value)} onClick={() => handleTabChange(value)}
className={cn( className={cn(
"flex items-center justify-center gap-1.5 text-sm font-medium transition-all duration-200 border-b-[1.5px]", "h-auto rounded-none px-0 py-0 gap-1.5 text-sm font-medium transition-all duration-200 border-b-[1.5px] hover:bg-transparent",
activeTab === value activeTab === value
? "border-foreground dark:border-white text-foreground" ? "border-foreground dark:border-white text-foreground"
: "border-transparent text-muted-foreground hover:text-accent-foreground" : "border-transparent text-muted-foreground hover:text-accent-foreground"
@ -1189,7 +1193,7 @@ export function ModelSelector({
> >
<Icon className="size-3.5" /> <Icon className="size-3.5" />
{label} {label}
</button> </Button>
))} ))}
</div> </div>
</div> </div>

31
surfsense_web/components/ui/equation-node.tsx
View file

@ -6,6 +6,7 @@ import type { TEquationElement } from "platejs";
import { PlateElement, type PlateElementProps, useSelected } from "platejs/react"; import { PlateElement, type PlateElementProps, useSelected } from "platejs/react";
import * as React from "react"; import * as React from "react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
export function EquationElement({ children, ...props }: PlateElementProps<TEquationElement>) { export function EquationElement({ children, ...props }: PlateElementProps<TEquationElement>) {
@ -74,20 +75,23 @@ export function EquationElement({ children, ...props }: PlateElementProps<TEquat
{...inputProps} {...inputProps}
/> />
<div className="mt-1 flex justify-end gap-1"> <div className="mt-1 flex justify-end gap-1">
<button <Button
className="rounded px-2 py-1 text-xs text-muted-foreground hover:bg-accent" variant="ghost"
size="sm"
className="h-auto px-2 py-1 text-xs text-muted-foreground"
onClick={onDismiss} onClick={onDismiss}
type="button" type="button"
> >
Cancel Cancel
</button> </Button>
<button <Button
className="rounded bg-primary px-2 py-1 text-xs text-primary-foreground hover:bg-primary/90" size="sm"
className="h-auto px-2 py-1 text-xs"
onClick={onSubmit} onClick={onSubmit}
type="button" type="button"
> >
Done Done
</button> </Button>
</div> </div>
</div> </div>
)} )}
@ -162,20 +166,23 @@ export function InlineEquationElement({ children, ...props }: PlateElementProps<
{...inputProps} {...inputProps}
/> />
<span className="mt-1 flex justify-end gap-1"> <span className="mt-1 flex justify-end gap-1">
<button <Button
className="rounded px-2 py-0.5 text-xs text-muted-foreground hover:bg-accent" variant="ghost"
size="sm"
className="h-auto px-2 py-0.5 text-xs text-muted-foreground"
onClick={onDismiss} onClick={onDismiss}
type="button" type="button"
> >
Cancel Cancel
</button> </Button>
<button <Button
className="rounded bg-primary px-2 py-0.5 text-xs text-primary-foreground hover:bg-primary/90" size="sm"
className="h-auto px-2 py-0.5 text-xs"
onClick={onSubmit} onClick={onSubmit}
type="button" type="button"
> >
Done Done
</button> </Button>
</span> </span>
</span> </span>
)} )}

35
surfsense_web/components/ui/hero-carousel.tsx
View file

@ -3,7 +3,8 @@
import { ChevronLeft, ChevronRight } from "lucide-react"; import { ChevronLeft, ChevronRight } from "lucide-react";
import { AnimatePresence, motion } from "motion/react"; import { AnimatePresence, motion } from "motion/react";
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useRef, useState } from "react";
import { ExpandedGifOverlay, useExpandedGif } from "@/components/ui/expanded-gif-overlay"; import { Button } from "@/components/ui/button";
import { ExpandedMediaOverlay, useExpandedMedia } from "@/components/ui/expanded-gif-overlay";
const carouselItems = [ const carouselItems = [
{ {
@ -70,7 +71,7 @@ function HeroCarouselCard({
src: string; src: string;
onExpandedChange?: (expanded: boolean) => void; onExpandedChange?: (expanded: boolean) => void;
}) { }) {
const { expanded, open, close } = useExpandedGif(); const { expanded, open, close } = useExpandedMedia();
const videoRef = useRef<HTMLVideoElement>(null); const videoRef = useRef<HTMLVideoElement>(null);
const [hasLoaded, setHasLoaded] = useState(false); const [hasLoaded, setHasLoaded] = useState(false);
@ -147,7 +148,7 @@ function HeroCarouselCard({
</div> </div>
<AnimatePresence> <AnimatePresence>
{expanded && <ExpandedGifOverlay src={src} alt={title} onClose={close} />} {expanded && <ExpandedMediaOverlay src={src} alt={title} onClose={close} />}
</AnimatePresence> </AnimatePresence>
</> </>
); );
@ -204,22 +205,26 @@ function HeroCarousel() {
</div> </div>
<div className="relative z-5 mt-4 flex items-center justify-center gap-2"> <div className="relative z-5 mt-4 flex items-center justify-center gap-2">
<button <Button
type="button" type="button"
variant="ghost"
size="icon"
onClick={() => !isGifExpanded && goToPrev()} onClick={() => !isGifExpanded && goToPrev()}
className="flex size-11 items-center justify-center rounded-full border border-neutral-200 bg-white text-neutral-700 shadow-sm transition-colors hover:bg-neutral-100 touch-manipulation dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700" className="size-11 rounded-full border border-neutral-200 bg-white text-neutral-700 shadow-sm hover:bg-neutral-100 touch-manipulation dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
aria-label="Previous slide" aria-label="Previous slide"
> >
<ChevronLeft className="size-5" /> <ChevronLeft className="size-5" />
</button> </Button>
<div className="flex items-center"> <div className="flex items-center">
{carouselItems.map((_, i) => ( {carouselItems.map((carouselItem, i) => (
<button <Button
key={`dot_${i}`} key={carouselItem.src}
type="button" type="button"
variant="ghost"
size="icon"
onClick={() => !isGifExpanded && goTo(i)} onClick={() => !isGifExpanded && goTo(i)}
className="flex h-11 min-w-[28px] items-center justify-center touch-manipulation" className="h-11 min-w-[28px] bg-transparent p-0 hover:bg-transparent touch-manipulation"
aria-label={`Go to slide ${i + 1}`} aria-label={`Go to slide ${i + 1}`}
> >
<span <span
@ -229,18 +234,20 @@ function HeroCarousel() {
: "w-2.5 bg-neutral-300 hover:bg-neutral-400 dark:bg-neutral-600 dark:hover:bg-neutral-500" : "w-2.5 bg-neutral-300 hover:bg-neutral-400 dark:bg-neutral-600 dark:hover:bg-neutral-500"
}`} }`}
/> />
</button> </Button>
))} ))}
</div> </div>
<button <Button
type="button" type="button"
variant="ghost"
size="icon"
onClick={() => !isGifExpanded && goToNext()} onClick={() => !isGifExpanded && goToNext()}
className="flex size-11 items-center justify-center rounded-full border border-neutral-200 bg-white text-neutral-700 shadow-sm transition-colors hover:bg-neutral-100 touch-manipulation dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700" className="size-11 rounded-full border border-neutral-200 bg-white text-neutral-700 shadow-sm hover:bg-neutral-100 touch-manipulation dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
aria-label="Next slide" aria-label="Next slide"
> >
<ChevronRight className="size-5" /> <ChevronRight className="size-5" />
</button> </Button>
</div> </div>
</div> </div>
); );