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 additional UI components

Browse source
This commit is contained in:
Anish Sarkar 2026-05-14 14:40:08 +05:30
parent 3d42712b3f
commit ee72a49ab1
17 changed files with 274 additions and 263 deletions
Download patch file Download diff file Expand all files Collapse all files

24
surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/composio-drive-config.tsx
View file

@ -14,6 +14,7 @@ import {
import type { FC } from "react"; import type { FC } from "react";
import { useCallback, useState } from "react"; import { useCallback, useState } from "react";
import { DriveFolderTree, type SelectedFolder } from "@/components/connectors/drive-folder-tree"; import { DriveFolderTree, type SelectedFolder } from "@/components/connectors/drive-folder-tree";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { import {
Select, Select,
@ -196,14 +197,16 @@ export const ComposioDriveConfig: FC<ConnectorConfigProps> = ({ connector, onCon
> >
<FolderClosed className="size-3.5 shrink-0 text-muted-foreground" /> <FolderClosed className="size-3.5 shrink-0 text-muted-foreground" />
<span className="flex-1 truncate">{folder.name}</span> <span className="flex-1 truncate">{folder.name}</span>
<button <Button
type="button" type="button"
variant="ghost"
size="icon"
onClick={() => handleRemoveFolder(folder.id)} onClick={() => handleRemoveFolder(folder.id)}
className="shrink-0 p-0.5 hover:bg-accent hover:text-accent-foreground rounded transition-colors" className="size-5 shrink-0 rounded p-0 hover:bg-accent hover:text-accent-foreground"
aria-label={`Remove ${folder.name}`} aria-label={`Remove ${folder.name}`}
> >
<X className="size-3.5" /> <X className="size-3.5" />
</button> </Button>
</div> </div>
))} ))}
{selectedFiles.map((file) => ( {selectedFiles.map((file) => (
@ -214,14 +217,16 @@ export const ComposioDriveConfig: FC<ConnectorConfigProps> = ({ connector, onCon
> >
{getFileIconFromName(file.name)} {getFileIconFromName(file.name)}
<span className="flex-1 truncate">{file.name}</span> <span className="flex-1 truncate">{file.name}</span>
<button <Button
type="button" type="button"
variant="ghost"
size="icon"
onClick={() => handleRemoveFile(file.id)} onClick={() => handleRemoveFile(file.id)}
className="shrink-0 p-0.5 hover:bg-accent hover:text-accent-foreground rounded transition-colors" className="size-5 shrink-0 rounded p-0 hover:bg-accent hover:text-accent-foreground"
aria-label={`Remove ${file.name}`} aria-label={`Remove ${file.name}`}
> >
<X className="size-3.5" /> <X className="size-3.5" />
</button> </Button>
</div> </div>
))} ))}
</div> </div>
@ -237,10 +242,11 @@ export const ComposioDriveConfig: FC<ConnectorConfigProps> = ({ connector, onCon
{isEditMode ? ( {isEditMode ? (
<div className="space-y-2"> <div className="space-y-2">
<button <Button
type="button" type="button"
variant="ghost"
onClick={() => setIsFolderTreeOpen((prev) => !prev)} onClick={() => setIsFolderTreeOpen((prev) => !prev)}
className="flex items-center gap-2 text-xs sm:text-sm text-muted-foreground hover:text-accent-foreground transition-colors w-fit" className="h-auto w-fit gap-2 px-0 py-0 text-xs font-normal text-muted-foreground hover:bg-transparent hover:text-accent-foreground sm:text-sm"
> >
Change Selection Change Selection
{isFolderTreeOpen ? ( {isFolderTreeOpen ? (
@ -248,7 +254,7 @@ export const ComposioDriveConfig: FC<ConnectorConfigProps> = ({ connector, onCon
) : ( ) : (
<ChevronRight className="size-4" /> <ChevronRight className="size-4" />
)} )}
</button> </Button>
{isFolderTreeOpen && ( {isFolderTreeOpen && (
<DriveFolderTree <DriveFolderTree
fetchItems={fetchItems} fetchItems={fetchItems}

24
surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/dropbox-config.tsx
View file

@ -14,6 +14,7 @@ import {
import type { FC } from "react"; import type { FC } from "react";
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import { DriveFolderTree, type SelectedFolder } from "@/components/connectors/drive-folder-tree"; import { DriveFolderTree, type SelectedFolder } from "@/components/connectors/drive-folder-tree";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { import {
Select, Select,
@ -177,14 +178,16 @@ export const DropboxConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCha
> >
<FolderClosed className="size-3.5 shrink-0 text-muted-foreground" /> <FolderClosed className="size-3.5 shrink-0 text-muted-foreground" />
<span className="flex-1 truncate">{folder.name}</span> <span className="flex-1 truncate">{folder.name}</span>
<button <Button
type="button" type="button"
variant="ghost"
size="icon"
onClick={() => handleRemoveFolder(folder.id)} onClick={() => handleRemoveFolder(folder.id)}
className="shrink-0 p-0.5 hover:bg-accent hover:text-accent-foreground rounded transition-colors" className="size-5 shrink-0 rounded p-0 hover:bg-accent hover:text-accent-foreground"
aria-label={`Remove ${folder.name}`} aria-label={`Remove ${folder.name}`}
> >
<X className="size-3.5" /> <X className="size-3.5" />
</button> </Button>
</div> </div>
))} ))}
{selectedFiles.map((file) => ( {selectedFiles.map((file) => (
@ -195,14 +198,16 @@ export const DropboxConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCha
> >
{getFileIconFromName(file.name)} {getFileIconFromName(file.name)}
<span className="flex-1 truncate">{file.name}</span> <span className="flex-1 truncate">{file.name}</span>
<button <Button
type="button" type="button"
variant="ghost"
size="icon"
onClick={() => handleRemoveFile(file.id)} onClick={() => handleRemoveFile(file.id)}
className="shrink-0 p-0.5 hover:bg-accent hover:text-accent-foreground rounded transition-colors" className="size-5 shrink-0 rounded p-0 hover:bg-accent hover:text-accent-foreground"
aria-label={`Remove ${file.name}`} aria-label={`Remove ${file.name}`}
> >
<X className="size-3.5" /> <X className="size-3.5" />
</button> </Button>
</div> </div>
))} ))}
</div> </div>
@ -217,10 +222,11 @@ export const DropboxConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCha
{isEditMode ? ( {isEditMode ? (
<div className="space-y-2"> <div className="space-y-2">
<button <Button
type="button" type="button"
variant="ghost"
onClick={() => setIsFolderTreeOpen(!isFolderTreeOpen)} onClick={() => setIsFolderTreeOpen(!isFolderTreeOpen)}
className="flex items-center gap-2 text-xs sm:text-sm text-muted-foreground hover:text-accent-foreground transition-colors w-fit" className="h-auto w-fit gap-2 px-0 py-0 text-xs font-normal text-muted-foreground hover:bg-transparent hover:text-accent-foreground sm:text-sm"
> >
Change Selection Change Selection
{isFolderTreeOpen ? ( {isFolderTreeOpen ? (
@ -228,7 +234,7 @@ export const DropboxConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCha
) : ( ) : (
<ChevronRight className="size-4" /> <ChevronRight className="size-4" />
)} )}
</button> </Button>
{isFolderTreeOpen && ( {isFolderTreeOpen && (
<DriveFolderTree <DriveFolderTree
fetchItems={fetchItems} fetchItems={fetchItems}

27
surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/google-drive-config.tsx
View file

@ -92,11 +92,7 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
const [selectedFiles, setSelectedFiles] = useState<SelectedItem[]>(existingFiles); const [selectedFiles, setSelectedFiles] = useState<SelectedItem[]>(existingFiles);
const [indexingOptions, setIndexingOptions] = useState<IndexingOptions>(existingIndexingOptions); const [indexingOptions, setIndexingOptions] = useState<IndexingOptions>(existingIndexingOptions);
const updateConfig = ( const updateConfig = useCallback((folders: SelectedItem[], files: SelectedItem[], options: IndexingOptions) => {
folders: SelectedItem[],
files: SelectedItem[],
options: IndexingOptions
) => {
if (onConfigChange) { if (onConfigChange) {
onConfigChange({ onConfigChange({
...connector.config, ...connector.config,
@ -105,7 +101,7 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
indexing_options: options, indexing_options: options,
}); });
} }
}; }, [connector.config, onConfigChange]);
const handlePicked = useCallback( const handlePicked = useCallback(
(result: PickerResult) => { (result: PickerResult) => {
@ -115,8 +111,7 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
setSelectedFiles(files); setSelectedFiles(files);
updateConfig(folders, files, indexingOptions); updateConfig(folders, files, indexingOptions);
}, },
// eslint-disable-next-line react-hooks/exhaustive-deps [indexingOptions, updateConfig]
[indexingOptions, connector.config]
); );
const { const {
@ -188,14 +183,16 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
> >
<FolderClosed className="size-3.5 shrink-0 text-muted-foreground" /> <FolderClosed className="size-3.5 shrink-0 text-muted-foreground" />
<span className="flex-1 truncate">{folder.name}</span> <span className="flex-1 truncate">{folder.name}</span>
<button <Button
type="button" type="button"
variant="ghost"
size="icon"
onClick={() => handleRemoveFolder(folder.id)} onClick={() => handleRemoveFolder(folder.id)}
className="shrink-0 p-0.5 hover:bg-accent hover:text-accent-foreground rounded transition-colors" className="size-5 shrink-0 rounded p-0 hover:bg-accent hover:text-accent-foreground"
aria-label={`Remove ${folder.name}`} aria-label={`Remove ${folder.name}`}
> >
<X className="size-3.5" /> <X className="size-3.5" />
</button> </Button>
</div> </div>
))} ))}
{selectedFiles.map((file) => ( {selectedFiles.map((file) => (
@ -206,14 +203,16 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
> >
{getFileIconFromName(file.name)} {getFileIconFromName(file.name)}
<span className="flex-1 truncate">{file.name}</span> <span className="flex-1 truncate">{file.name}</span>
<button <Button
type="button" type="button"
variant="ghost"
size="icon"
onClick={() => handleRemoveFile(file.id)} onClick={() => handleRemoveFile(file.id)}
className="shrink-0 p-0.5 hover:bg-accent hover:text-accent-foreground rounded transition-colors" className="size-5 shrink-0 rounded p-0 hover:bg-accent hover:text-accent-foreground"
aria-label={`Remove ${file.name}`} aria-label={`Remove ${file.name}`}
> >
<X className="size-3.5" /> <X className="size-3.5" />
</button> </Button>
</div> </div>
))} ))}
</div> </div>

24
surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/onedrive-config.tsx
View file

@ -14,6 +14,7 @@ import {
import type { FC } from "react"; import type { FC } from "react";
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import { DriveFolderTree, type SelectedFolder } from "@/components/connectors/drive-folder-tree"; import { DriveFolderTree, type SelectedFolder } from "@/components/connectors/drive-folder-tree";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { import {
Select, Select,
@ -178,14 +179,16 @@ export const OneDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCh
> >
<FolderClosed className="size-3.5 shrink-0 text-muted-foreground" /> <FolderClosed className="size-3.5 shrink-0 text-muted-foreground" />
<span className="flex-1 truncate">{folder.name}</span> <span className="flex-1 truncate">{folder.name}</span>
<button <Button
type="button" type="button"
variant="ghost"
size="icon"
onClick={() => handleRemoveFolder(folder.id)} onClick={() => handleRemoveFolder(folder.id)}
className="shrink-0 p-0.5 hover:bg-accent hover:text-accent-foreground rounded transition-colors" className="size-5 shrink-0 rounded p-0 hover:bg-accent hover:text-accent-foreground"
aria-label={`Remove ${folder.name}`} aria-label={`Remove ${folder.name}`}
> >
<X className="size-3.5" /> <X className="size-3.5" />
</button> </Button>
</div> </div>
))} ))}
{selectedFiles.map((file) => ( {selectedFiles.map((file) => (
@ -196,14 +199,16 @@ export const OneDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCh
> >
{getFileIconFromName(file.name)} {getFileIconFromName(file.name)}
<span className="flex-1 truncate">{file.name}</span> <span className="flex-1 truncate">{file.name}</span>
<button <Button
type="button" type="button"
variant="ghost"
size="icon"
onClick={() => handleRemoveFile(file.id)} onClick={() => handleRemoveFile(file.id)}
className="shrink-0 p-0.5 hover:bg-accent hover:text-accent-foreground rounded transition-colors" className="size-5 shrink-0 rounded p-0 hover:bg-accent hover:text-accent-foreground"
aria-label={`Remove ${file.name}`} aria-label={`Remove ${file.name}`}
> >
<X className="size-3.5" /> <X className="size-3.5" />
</button> </Button>
</div> </div>
))} ))}
</div> </div>
@ -218,10 +223,11 @@ export const OneDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCh
{isEditMode ? ( {isEditMode ? (
<div className="space-y-2"> <div className="space-y-2">
<button <Button
type="button" type="button"
variant="ghost"
onClick={() => setIsFolderTreeOpen((prev) => !prev)} onClick={() => setIsFolderTreeOpen((prev) => !prev)}
className="flex items-center gap-2 text-xs sm:text-sm text-muted-foreground hover:text-accent-foreground transition-colors w-fit" className="h-auto w-fit gap-2 px-0 py-0 text-xs font-normal text-muted-foreground hover:bg-transparent hover:text-accent-foreground sm:text-sm"
> >
Change Selection Change Selection
{isFolderTreeOpen ? ( {isFolderTreeOpen ? (
@ -229,7 +235,7 @@ export const OneDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCh
) : ( ) : (
<ChevronRight className="size-4" /> <ChevronRight className="size-4" />
)} )}
</button> </Button>
{isFolderTreeOpen && ( {isFolderTreeOpen && (
<DriveFolderTree <DriveFolderTree
fetchItems={fetchItems} fetchItems={fetchItems}

14
surfsense_web/components/assistant-ui/connector-popup/views/connector-accounts-list-view.tsx
View file

@ -110,14 +110,15 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
{/* Header */} {/* Header */}
<div className="px-6 sm:px-12 pt-8 sm:pt-10 pb-1 sm:pb-4 bg-popover"> <div className="px-6 sm:px-12 pt-8 sm:pt-10 pb-1 sm:pb-4 bg-popover">
{/* Back button */} {/* Back button */}
<button <Button
type="button" type="button"
variant="ghost"
onClick={onBack} onClick={onBack}
className="flex items-center gap-2 text-xs sm:text-sm text-muted-foreground hover:text-accent-foreground mb-6 w-fit" className="mb-6 h-auto w-fit gap-2 px-0 py-0 text-xs font-normal text-muted-foreground hover:bg-transparent hover:text-accent-foreground sm:text-sm"
> >
<ArrowLeft className="size-4" /> <ArrowLeft className="size-4" />
Back to connectors Back to connectors
</button> </Button>
{/* Connector header */} {/* Connector header */}
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 mb-6"> <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 mb-6">
@ -135,12 +136,13 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
</div> </div>
</div> </div>
{/* Add Account Button with dashed border */} {/* Add Account Button with dashed border */}
<button <Button
type="button" type="button"
variant="ghost"
onClick={onAddAccount} onClick={onAddAccount}
disabled={isConnecting || !isEnabled} disabled={isConnecting || !isEnabled}
className={cn( className={cn(
"flex items-center justify-center gap-1.5 h-8 px-3 rounded-md border-2 border-dashed text-xs sm:text-sm transition-all duration-200 shrink-0 w-full sm:w-auto", "h-8 w-full shrink-0 gap-1.5 rounded-md border-2 border-dashed px-3 text-xs transition-all duration-200 sm:w-auto sm:text-sm",
!isEnabled !isEnabled
? "border-border/30 opacity-50 cursor-not-allowed" ? "border-border/30 opacity-50 cursor-not-allowed"
: "border-slate-400/20 dark:border-white/20 hover:bg-accent hover:text-accent-foreground", : "border-slate-400/20 dark:border-white/20 hover:bg-accent hover:text-accent-foreground",
@ -155,7 +157,7 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
)} )}
</div> </div>
<span className="text-xs sm:text-sm font-medium">{buttonText}</span> <span className="text-xs sm:text-sm font-medium">{buttonText}</span>
</button> </Button>
</div> </div>
</div> </div>

15
surfsense_web/components/assistant-ui/inline-citation.tsx
View file

@ -9,6 +9,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
import { openCitationPanelAtom } from "@/atoms/citation/citation-panel.atom"; import { openCitationPanelAtom } from "@/atoms/citation/citation-panel.atom";
import { useCitationMetadata } from "@/components/assistant-ui/citation-metadata-context"; import { useCitationMetadata } from "@/components/assistant-ui/citation-metadata-context";
import { Citation } from "@/components/tool-ui/citation"; import { Citation } from "@/components/tool-ui/citation";
import { Button } from "@/components/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Spinner } from "@/components/ui/spinner"; import { Spinner } from "@/components/ui/spinner";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
@ -76,15 +77,16 @@ const NumericChunkCitation: FC<{ chunkId: number }> = ({ chunkId }) => {
const openCitationPanel = useSetAtom(openCitationPanelAtom); const openCitationPanel = useSetAtom(openCitationPanelAtom);
return ( return (
<button <Button
type="button" type="button"
variant="ghost"
onClick={() => openCitationPanel({ chunkId })} onClick={() => openCitationPanel({ chunkId })}
className="ml-0.5 inline-flex h-5 min-w-5 cursor-pointer items-center justify-center rounded-md bg-muted/60 px-1.5 text-[11px] font-medium text-muted-foreground align-baseline shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none" className="ml-0.5 h-5 min-w-5 cursor-pointer rounded-md bg-muted/60 px-1.5 text-[11px] font-medium text-muted-foreground align-baseline shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
title={`View source chunk #${chunkId}`} title={`View source chunk #${chunkId}`}
aria-label={`View cited chunk ${chunkId}`} aria-label={`View cited chunk ${chunkId}`}
> >
{chunkId} {chunkId}
</button> </Button>
); );
}; };
@ -121,8 +123,9 @@ const SurfsenseDocCitation: FC<{ chunkId: number }> = ({ chunkId }) => {
return ( return (
<Popover open={open} onOpenChange={setOpen}> <Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<button <Button
type="button" type="button"
variant="ghost"
onClick={() => setOpen((prev) => !prev)} onClick={() => setOpen((prev) => !prev)}
onMouseEnter={() => { onMouseEnter={() => {
cancelClose(); cancelClose();
@ -134,13 +137,13 @@ const SurfsenseDocCitation: FC<{ chunkId: number }> = ({ chunkId }) => {
setOpen(true); setOpen(true);
}} }}
onBlur={scheduleClose} onBlur={scheduleClose}
className="ml-0.5 inline-flex h-5 min-w-5 cursor-pointer items-center justify-center gap-0.5 rounded-md bg-primary/10 px-1.5 text-[11px] font-medium text-primary align-baseline shadow-sm transition-colors hover:bg-primary/15 focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none" className="ml-0.5 h-5 min-w-5 cursor-pointer gap-0.5 rounded-md bg-primary/10 px-1.5 text-[11px] font-medium text-primary align-baseline shadow-sm transition-colors hover:bg-primary/15 focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
aria-label={`Show Surfsense documentation chunk ${chunkId}`} aria-label={`Show Surfsense documentation chunk ${chunkId}`}
title="Surfsense documentation" title="Surfsense documentation"
> >
<FileText className="size-3" /> <FileText className="size-3" />
doc doc
</button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent
className="w-96 max-w-[calc(100vw-2rem)] p-0" className="w-96 max-w-[calc(100vw-2rem)] p-0"

23
surfsense_web/components/connectors/drive-folder-tree.tsx
View file

@ -13,6 +13,7 @@ import {
Presentation, Presentation,
} from "lucide-react"; } from "lucide-react";
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox"; import { Checkbox } from "@/components/ui/checkbox";
import { ScrollArea } from "@/components/ui/scroll-area"; import { ScrollArea } from "@/components/ui/scroll-area";
import { Spinner } from "@/components/ui/spinner"; import { Spinner } from "@/components/ui/spinner";
@ -267,9 +268,11 @@ export function DriveFolderTree({
)} )}
> >
{isFolder ? ( {isFolder ? (
<button <Button
type="button" type="button"
className="flex items-center justify-center w-3 h-3 sm:w-4 sm:h-4 shrink-0 bg-transparent border-0 p-0 cursor-pointer" variant="ghost"
size="icon"
className="h-3 w-3 shrink-0 cursor-pointer bg-transparent p-0 hover:bg-transparent sm:h-4 sm:w-4"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
toggleFolder(item); toggleFolder(item);
@ -283,7 +286,7 @@ export function DriveFolderTree({
) : ( ) : (
<ChevronRight className="h-3 w-3 sm:h-4 sm:w-4" /> <ChevronRight className="h-3 w-3 sm:h-4 sm:w-4" />
)} )}
</button> </Button>
) : ( ) : (
<span className="w-3 h-3 sm:w-4 sm:h-4 shrink-0" /> <span className="w-3 h-3 sm:w-4 sm:h-4 shrink-0" />
)} )}
@ -314,13 +317,14 @@ export function DriveFolderTree({
</div> </div>
{isFolder ? ( {isFolder ? (
<button <Button
type="button" type="button"
className="truncate flex-1 text-left text-xs sm:text-sm min-w-0 bg-transparent border-0 p-0 cursor-pointer" variant="ghost"
className="h-auto min-w-0 flex-1 justify-start truncate bg-transparent p-0 text-left text-xs font-normal hover:bg-transparent hover:text-inherit sm:text-sm"
onClick={() => toggleFolder(item)} onClick={() => toggleFolder(item)}
> >
{item.name} {item.name}
</button> </Button>
) : ( ) : (
<span className="truncate flex-1 text-left text-xs sm:text-sm min-w-0"> <span className="truncate flex-1 text-left text-xs sm:text-sm min-w-0">
{item.name} {item.name}
@ -356,13 +360,14 @@ export function DriveFolderTree({
className="shrink-0 h-3.5 w-3.5 sm:h-4 sm:w-4 border-slate-400/20 dark:border-white/20" className="shrink-0 h-3.5 w-3.5 sm:h-4 sm:w-4 border-slate-400/20 dark:border-white/20"
/> />
<HardDrive className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground shrink-0" /> <HardDrive className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground shrink-0" />
<button <Button
type="button" type="button"
className="font-semibold truncate text-xs sm:text-sm cursor-pointer bg-transparent border-0 p-0 text-left" variant="ghost"
className="h-auto min-w-0 justify-start truncate bg-transparent p-0 text-left text-xs font-semibold hover:bg-transparent hover:text-inherit sm:text-sm"
onClick={() => toggleFolderSelection("root", rootLabel)} onClick={() => toggleFolderSelection("root", rootLabel)}
> >
{rootLabel} {rootLabel}
</button> </Button>
</div> </div>
</div> </div>

24
surfsense_web/components/documents/DocumentNode.tsx
View file

@ -138,10 +138,7 @@ export const DocumentNode = React.memo(function DocumentNode({
return ( return (
<ContextMenu onOpenChange={onContextMenuOpenChange}> <ContextMenu onOpenChange={onContextMenuOpenChange}>
<ContextMenuTrigger asChild> <ContextMenuTrigger asChild>
{/* biome-ignore lint/a11y/useSemanticElements: contains nested interactive children (Checkbox) that render as <button>, making a semantic <button> wrapper invalid */}
<div <div
role="button"
tabIndex={0}
ref={attachRef} ref={attachRef}
className={cn( className={cn(
"group flex h-8 w-full items-center gap-2.5 rounded-md px-1 text-sm hover:bg-accent hover:text-accent-foreground cursor-pointer select-none text-left", "group flex h-8 w-full items-center gap-2.5 rounded-md px-1 text-sm hover:bg-accent hover:text-accent-foreground cursor-pointer select-none text-left",
@ -149,13 +146,6 @@ export const DocumentNode = React.memo(function DocumentNode({
isDragging && "opacity-40" isDragging && "opacity-40"
)} )}
style={{ paddingLeft: `${depth * 16 + 4}px` }} style={{ paddingLeft: `${depth * 16 + 4}px` }}
onClick={handleCheckChange}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleCheckChange();
}
}}
> >
{(() => { {(() => {
if (statusState === "pending") { if (statusState === "pending") {
@ -212,9 +202,17 @@ export const DocumentNode = React.memo(function DocumentNode({
onOpenChange={handleTitleTooltipOpenChange} onOpenChange={handleTitleTooltipOpenChange}
> >
<TooltipTrigger asChild> <TooltipTrigger asChild>
<span ref={titleRef} className="flex-1 min-w-0 truncate"> <Button
{doc.title} type="button"
</span> variant="ghost"
aria-disabled={!isSelectable}
onClick={handleCheckChange}
className="h-full min-w-0 flex-1 justify-start bg-transparent px-0 py-0 text-left font-normal text-inherit hover:bg-transparent hover:text-inherit"
>
<span ref={titleRef} className="min-w-0 flex-1 truncate">
{doc.title}
</span>
</Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent side="bottom" className="max-w-xs break-words"> <TooltipContent side="bottom" className="max-w-xs break-words">
{doc.title} {doc.title}

14
surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
View file

@ -348,8 +348,9 @@ export function AllPrivateChatsSidebarContent({
return ( return (
<div key={thread.id} className="group/item relative w-full"> <div key={thread.id} className="group/item relative w-full">
{isMobile ? ( {isMobile ? (
<button <Button
type="button" type="button"
variant="ghost"
onClick={() => { onClick={() => {
if (wasLongPress()) return; if (wasLongPress()) return;
handleThreadClick(thread.id); handleThreadClick(thread.id);
@ -362,7 +363,7 @@ export function AllPrivateChatsSidebarContent({
onTouchMove={longPressHandlers.onTouchMove} onTouchMove={longPressHandlers.onTouchMove}
disabled={isBusy} disabled={isBusy}
className={cn( className={cn(
"flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-sm text-left", "h-auto w-full justify-start gap-2 overflow-hidden px-2 py-1.5 text-left font-normal",
"group-hover/item:bg-accent group-hover/item:text-accent-foreground", "group-hover/item:bg-accent group-hover/item:text-accent-foreground",
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
isActive && "bg-accent text-accent-foreground", isActive && "bg-accent text-accent-foreground",
@ -370,16 +371,17 @@ export function AllPrivateChatsSidebarContent({
)} )}
> >
<span className="truncate">{thread.title || "New Chat"}</span> <span className="truncate">{thread.title || "New Chat"}</span>
</button> </Button>
) : ( ) : (
<Tooltip delayDuration={600}> <Tooltip delayDuration={600}>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<button <Button
type="button" type="button"
variant="ghost"
onClick={() => handleThreadClick(thread.id)} onClick={() => handleThreadClick(thread.id)}
disabled={isBusy} disabled={isBusy}
className={cn( className={cn(
"flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-sm text-left", "h-auto w-full justify-start gap-2 overflow-hidden px-2 py-1.5 text-left font-normal",
"group-hover/item:bg-accent group-hover/item:text-accent-foreground", "group-hover/item:bg-accent group-hover/item:text-accent-foreground",
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
isActive && "bg-accent text-accent-foreground", isActive && "bg-accent text-accent-foreground",
@ -387,7 +389,7 @@ export function AllPrivateChatsSidebarContent({
)} )}
> >
<span className="truncate">{thread.title || "New Chat"}</span> <span className="truncate">{thread.title || "New Chat"}</span>
</button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent side="bottom" align="start"> <TooltipContent side="bottom" align="start">
<p> <p>

23
surfsense_web/components/layout/ui/sidebar/LocalFilesystemBrowser.tsx
View file

@ -3,9 +3,11 @@
import { ChevronDown, ChevronRight, FileText, Folder, FolderOpen } from "lucide-react"; import { ChevronDown, ChevronRight, FileText, Folder, FolderOpen } from "lucide-react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { DEFAULT_EXCLUDE_PATTERNS } from "@/components/sources/FolderWatchDialog"; import { DEFAULT_EXCLUDE_PATTERNS } from "@/components/sources/FolderWatchDialog";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { Spinner } from "@/components/ui/spinner"; import { Spinner } from "@/components/ui/spinner";
import { useElectronAPI } from "@/hooks/use-platform"; import { useElectronAPI } from "@/hooks/use-platform";
import { cn } from "@/lib/utils";
interface LocalFilesystemBrowserProps { interface LocalFilesystemBrowserProps {
rootPaths: string[]; rootPaths: string[];
@ -409,10 +411,11 @@ export function LocalFilesystemBrowser({
const files = [...folder.files].sort((a, b) => a.relativePath.localeCompare(b.relativePath)); const files = [...folder.files].sort((a, b) => a.relativePath.localeCompare(b.relativePath));
return ( return (
<div key={folder.key} className="select-none"> <div key={folder.key} className="select-none">
<button <Button
type="button" type="button"
variant="ghost"
onClick={() => toggleFolder(folder.key)} onClick={() => toggleFolder(folder.key)}
className="flex h-8 w-full items-center gap-1.5 rounded-md px-2 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground" className="h-8 w-full justify-start gap-1.5 px-2 text-left text-sm font-normal hover:bg-accent hover:text-accent-foreground"
style={{ paddingInlineStart: `${depth * 12 + 8}px` }} style={{ paddingInlineStart: `${depth * 12 + 8}px` }}
draggable={false} draggable={false}
> >
@ -423,7 +426,7 @@ export function LocalFilesystemBrowser({
)} )}
<FolderIcon className="size-3.5 shrink-0 text-muted-foreground" /> <FolderIcon className="size-3.5 shrink-0 text-muted-foreground" />
<span className="truncate">{folder.name}</span> <span className="truncate">{folder.name}</span>
</button> </Button>
{isExpanded && ( {isExpanded && (
<> <>
{childFolders.map((childFolder) => renderFolder(childFolder, depth + 1, mount))} {childFolders.map((childFolder) => renderFolder(childFolder, depth + 1, mount))}
@ -431,17 +434,21 @@ export function LocalFilesystemBrowser({
const extension = getNormalizedExtension(file.relativePath); const extension = getNormalizedExtension(file.relativePath);
const isOpenable = openableExtensions.has(extension); const isOpenable = openableExtensions.has(extension);
return ( return (
<button <Button
key={file.fullPath} key={file.fullPath}
type="button" type="button"
variant="ghost"
onClick={ onClick={
isOpenable isOpenable
? () => onOpenFile(toMountedVirtualPath(mount, file.relativePath)) ? () => onOpenFile(toMountedVirtualPath(mount, file.relativePath))
: undefined : undefined
} }
className={`flex h-8 w-full items-center gap-1.5 rounded-md px-2 text-left text-sm transition-colors ${ className={cn(
isOpenable ? "hover:bg-accent hover:text-accent-foreground" : "cursor-not-allowed opacity-60" "h-8 w-full justify-start gap-1.5 px-2 text-left text-sm font-normal",
}`} isOpenable
? "hover:bg-accent hover:text-accent-foreground"
: "cursor-not-allowed opacity-60"
)}
style={{ paddingInlineStart: `${(depth + 1) * 12 + 22}px` }} style={{ paddingInlineStart: `${(depth + 1) * 12 + 22}px` }}
title={ title={
isOpenable isOpenable
@ -453,7 +460,7 @@ export function LocalFilesystemBrowser({
> >
<FileText className="size-3.5 shrink-0 text-muted-foreground" /> <FileText className="size-3.5 shrink-0 text-muted-foreground" />
<span className="truncate">{getFileName(file.relativePath)}</span> <span className="truncate">{getFileName(file.relativePath)}</span>
</button> </Button>
); );
})} })}
</> </>

88
surfsense_web/components/markdown-viewer.tsx
View file

@ -13,10 +13,7 @@ const code = createCodePlugin({
}); });
const math = createMathPlugin({ const math = createMathPlugin({
// Disabled so currency like "$3,120.00 and ... $0.00" isn't parsed as // Keep currency from being parsed as math; real math is normalized below.
// inline LaTeX. convertLatexDelimiters() below normalises any genuine
// inline math (\(...\), $...$ starting with a LaTeX command, etc.) to
// $$...$$, so this flip doesn't lose any math rendering.
singleDollarTextMath: false, singleDollarTextMath: false,
}); });
@ -24,76 +21,37 @@ interface MarkdownViewerProps {
content: string; content: string;
className?: string; className?: string;
maxLength?: number; maxLength?: number;
/** /** Render citation tokens as interactive badges. */
* When true, render `[citation:N]` / `[citation:URL]` tokens as the
* interactive citation badges/popovers used in chat. Default `false`
* so callers that don't need citations are unchanged.
*
* Note: we deliberately do NOT override `<a>` to inject citations into
* link text — that would produce `<button>` inside `<a>` (invalid
* HTML). A `[citation:N]` token literally placed inside markdown link
* text stays as raw text.
*/
enableCitations?: boolean; enableCitations?: boolean;
} }
const EMPTY_URL_MAP: CitationUrlMap = new Map(); const EMPTY_URL_MAP: CitationUrlMap = new Map();
/** /** Strip a single outer markdown fence when the whole payload is fenced. */
* If the entire content is wrapped in a single ```markdown or ```md
* code fence, strip the fence so the inner markdown renders properly.
*/
function stripOuterMarkdownFence(content: string): string { function stripOuterMarkdownFence(content: string): string {
const trimmed = content.trim(); const trimmed = content.trim();
// Match 3+ backtick fences (LLMs escalate to 4+ when content has triple-backtick blocks)
const match = trimmed.match(/^(`{3,})(?:markdown|md)?\s*\n([\s\S]+?)\n\1\s*$/); const match = trimmed.match(/^(`{3,})(?:markdown|md)?\s*\n([\s\S]+?)\n\1\s*$/);
return match ? match[2] : content; return match ? match[2] : content;
} }
/** /** Normalize common LaTeX delimiters to Streamdown's double-dollar syntax. */
* Convert all LaTeX delimiter styles to the double-dollar syntax
* that Streamdown's @streamdown/math plugin understands.
*
* Streamdown math conventions (different from remark-math!):
* $$...$$ on the SAME line → inline math
* $$\n...\n$$ on SEPARATE lines → block (display) math
*
* Conversions performed:
* \[...\] → $$\n ... \n$$ (block math)
* \(...\) → $$...$$ (inline math, same line)
* \begin{equation}...\end{equation} → $$\n ... \n$$ (block math)
* \begin{displaymath}...\end{displaymath} → $$\n ... \n$$ (block math)
* \begin{math}...\end{math} → $$...$$ (inline math, same line)
* `$$ … $$` → $$ … $$ (strip wrapping backtick code)
* `$ … $` → $ … $ (strip wrapping backtick code)
* $...$ → $$...$$ (normalise single-$ to double-$$)
*/
function convertLatexDelimiters(content: string): string { function convertLatexDelimiters(content: string): string {
// 1. Block math: \[...\] → $$\n...\n$$ (display math on separate lines)
content = content.replace(/\\\[([\s\S]*?)\\\]/g, (_, inner) => `\n$$\n${inner.trim()}\n$$\n`); content = content.replace(/\\\[([\s\S]*?)\\\]/g, (_, inner) => `\n$$\n${inner.trim()}\n$$\n`);
// 2. Inline math: \(...\) → $$...$$ (inline math on same line)
content = content.replace(/\\\(([\s\S]*?)\\\)/g, (_, inner) => `$$${inner.trim()}$$`); content = content.replace(/\\\(([\s\S]*?)\\\)/g, (_, inner) => `$$${inner.trim()}$$`);
// 3. Block: \begin{equation}...\end{equation} → $$\n...\n$$
content = content.replace( content = content.replace(
/\\begin\{equation\}([\s\S]*?)\\end\{equation\}/g, /\\begin\{equation\}([\s\S]*?)\\end\{equation\}/g,
(_, inner) => `\n$$\n${inner.trim()}\n$$\n` (_, inner) => `\n$$\n${inner.trim()}\n$$\n`
); );
// 4. Block: \begin{displaymath}...\end{displaymath} → $$\n...\n$$
content = content.replace( content = content.replace(
/\\begin\{displaymath\}([\s\S]*?)\\end\{displaymath\}/g, /\\begin\{displaymath\}([\s\S]*?)\\end\{displaymath\}/g,
(_, inner) => `\n$$\n${inner.trim()}\n$$\n` (_, inner) => `\n$$\n${inner.trim()}\n$$\n`
); );
// 5. Inline: \begin{math}...\end{math} → $$...$$
content = content.replace( content = content.replace(
/\\begin\{math\}([\s\S]*?)\\end\{math\}/g, /\\begin\{math\}([\s\S]*?)\\end\{math\}/g,
(_, inner) => `$$${inner.trim()}$$` (_, inner) => `$$${inner.trim()}$$`
); );
// 6. Strip backtick wrapping around math: `$$...$$` → $$...$$ and `$...$` → $...$
content = content.replace(/`(\${1,2})((?:(?!\1).)+)\1`/g, "$1$2$1"); content = content.replace(/`(\${1,2})((?:(?!\1).)+)\1`/g, "$1$2$1");
// 7. Normalise single-dollar $...$ to double-dollar $$...$$ so they render // Only convert command-style single-dollar math, leaving currency alone.
// reliably in Streamdown (single-$ has strict no-space rules that often fail).
// We match $…$ where the content starts with a backslash (LaTeX command)
// to avoid converting currency like $50.
content = content.replace( content = content.replace(
/(?<!\$)\$(?!\$)(\\[a-zA-Z][\s\S]*?)(?<!\$)\$(?!\$)/g, /(?<!\$)\$(?!\$)(\\[a-zA-Z][\s\S]*?)(?<!\$)\$(?!\$)/g,
(_, inner) => `$$${inner.trim()}$$` (_, inner) => `$$${inner.trim()}$$`
@ -110,9 +68,7 @@ export function MarkdownViewer({
const isTruncated = maxLength != null && content.length > maxLength; const isTruncated = maxLength != null && content.length > maxLength;
const displayContent = isTruncated ? content.slice(0, maxLength) : content; const displayContent = isTruncated ? content.slice(0, maxLength) : content;
// Preprocess for URL placeholders BEFORE LaTeX so GFM autolinks don't // Rewrite citation URLs before markdown autolinking can split them.
// split `[citation:https://…]` apart. The preprocess is code-fence
// aware so citations inside fenced code stay literal.
const { processedContent, urlMap } = useMemo(() => { const { processedContent, urlMap } = useMemo(() => {
const stripped = stripOuterMarkdownFence(displayContent); const stripped = stripOuterMarkdownFence(displayContent);
if (!enableCitations) { if (!enableCitations) {
@ -128,11 +84,7 @@ export function MarkdownViewer({
}; };
}, [displayContent, enableCitations]); }, [displayContent, enableCitations]);
// Phrasing/block renderers wrap their string children through the // Do not wrap anchors or code; citation buttons inside them would be invalid.
// citation renderer when `enableCitations` is on. We deliberately do
// NOT override `<a>` (would produce <button> inside <a>) and we do
// NOT touch the inline/fenced `code` paths (citations stay literal
// inside code, matching markdown-text.tsx behavior).
const wrap = (children: React.ReactNode): React.ReactNode => const wrap = (children: React.ReactNode): React.ReactNode =>
enableCitations ? processChildrenWithCitations(children, urlMap) : children; enableCitations ? processChildrenWithCitations(children, urlMap) : children;
@ -198,27 +150,21 @@ export function MarkdownViewer({
), ),
hr: ({ ...props }) => <hr className="my-4 border-muted" {...props} />, hr: ({ ...props }) => <hr className="my-4 border-muted" {...props} />,
img: ({ src, alt, width: _w, height: _h, ...props }) => { img: ({ src, alt, width: _w, height: _h, ...props }) => {
const isDataOrUnknownUrl = if (typeof src !== "string") return null;
typeof src === "string" && (src.startsWith("data:") || !src.startsWith("http"));
return isDataOrUnknownUrl ? ( const width = typeof _w === "number" ? _w : Number(_w) || 800;
// eslint-disable-next-line @next/next/no-img-element const height = typeof _h === "number" ? _h : Number(_h) || 600;
<img const shouldSkipOptimization = src.startsWith("data:");
className="max-w-full h-auto my-4 rounded"
alt={alt || "markdown image"} return (
src={src}
loading="lazy"
{...props}
/>
) : (
<Image <Image
className="max-w-full h-auto my-4 rounded" className="max-w-full h-auto my-4 rounded"
alt={alt || "markdown image"} alt={alt || "markdown image"}
src={typeof src === "string" ? src : ""} src={src}
width={_w || 800} width={width}
height={_h || 600} height={height}
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 75vw, 60vw" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 75vw, 60vw"
unoptimized={isDataOrUnknownUrl} unoptimized={shouldSkipOptimization}
{...props} {...props}
/> />
); );

15
surfsense_web/components/new-chat/prompt-picker.tsx
View file

@ -15,6 +15,7 @@ import {
import { promptsAtom } from "@/atoms/prompts/prompts-query.atoms"; import { promptsAtom } from "@/atoms/prompts/prompts-query.atoms";
import { userSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms"; import { userSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@ -150,17 +151,18 @@ export const PromptPicker = forwardRef<PromptPickerRef, PromptPickerProps>(funct
Saved Prompts Saved Prompts
</div> </div>
{filtered.map((action, index) => ( {filtered.map((action, index) => (
<button <Button
key={action.id} key={action.id}
ref={(el) => { ref={(el) => {
if (el) itemRefs.current.set(index, el); if (el) itemRefs.current.set(index, el);
else itemRefs.current.delete(index); else itemRefs.current.delete(index);
}} }}
type="button" type="button"
variant="ghost"
onClick={() => handleSelect(index)} onClick={() => handleSelect(index)}
onMouseEnter={() => setHighlightedIndex(index)} onMouseEnter={() => setHighlightedIndex(index)}
className={cn( className={cn(
"w-full flex items-center gap-2 px-3 py-2 text-left text-sm transition-colors rounded-md cursor-pointer", "h-auto w-full justify-start gap-2 rounded-md px-3 py-2 text-left text-sm font-normal transition-colors",
index === highlightedIndex && "bg-accent text-accent-foreground" index === highlightedIndex && "bg-accent text-accent-foreground"
)} )}
> >
@ -168,20 +170,21 @@ export const PromptPicker = forwardRef<PromptPickerRef, PromptPickerProps>(funct
<Zap className="size-4" /> <Zap className="size-4" />
</span> </span>
<span className="flex-1 text-sm truncate">{action.name}</span> <span className="flex-1 text-sm truncate">{action.name}</span>
</button> </Button>
))} ))}
<div className="mx-2 my-1 border-t border-popover-border" /> <div className="mx-2 my-1 border-t border-popover-border" />
<button <Button
ref={(el) => { ref={(el) => {
if (el) itemRefs.current.set(createPromptIndex, el); if (el) itemRefs.current.set(createPromptIndex, el);
else itemRefs.current.delete(createPromptIndex); else itemRefs.current.delete(createPromptIndex);
}} }}
type="button" type="button"
variant="ghost"
onClick={() => handleSelect(createPromptIndex)} onClick={() => handleSelect(createPromptIndex)}
onMouseEnter={() => setHighlightedIndex(createPromptIndex)} onMouseEnter={() => setHighlightedIndex(createPromptIndex)}
className={cn( className={cn(
"w-full flex items-center gap-2 px-3 py-2 text-left text-sm transition-colors rounded-md cursor-pointer text-muted-foreground", "h-auto w-full justify-start gap-2 rounded-md px-3 py-2 text-left text-sm font-normal text-muted-foreground transition-colors",
highlightedIndex === createPromptIndex highlightedIndex === createPromptIndex
? "bg-accent text-accent-foreground" ? "bg-accent text-accent-foreground"
: "hover:text-accent-foreground hover:bg-accent" : "hover:text-accent-foreground hover:bg-accent"
@ -191,7 +194,7 @@ export const PromptPicker = forwardRef<PromptPickerRef, PromptPickerProps>(funct
<Plus className="size-4" /> <Plus className="size-4" />
</span> </span>
<span>Create prompt</span> <span>Create prompt</span>
</button> </Button>
</div> </div>
)} )}
</div> </div>

23
surfsense_web/components/settings/buy-pages-content.tsx
View file

@ -72,44 +72,49 @@ export function BuyPagesContent() {
<div className="space-y-3"> <div className="space-y-3">
{/* Stepper */} {/* Stepper */}
<div className="flex items-center justify-center gap-3"> <div className="flex items-center justify-center gap-3">
<button <Button
type="button" type="button"
variant="outline"
size="icon"
onClick={() => setQuantity((q) => Math.max(1, q - 1))} onClick={() => setQuantity((q) => Math.max(1, q - 1))}
disabled={quantity <= 1 || purchaseMutation.isPending} disabled={quantity <= 1 || purchaseMutation.isPending}
className="flex h-8 w-8 items-center justify-center rounded-md border transition-colors hover:bg-muted disabled:opacity-40" className="size-8 shadow-none transition-colors hover:bg-muted disabled:opacity-40"
> >
<Minus className="h-3.5 w-3.5" /> <Minus className="h-3.5 w-3.5" />
</button> </Button>
<span className="min-w-28 text-center text-lg font-semibold tabular-nums"> <span className="min-w-28 text-center text-lg font-semibold tabular-nums">
{totalPages.toLocaleString()} {totalPages.toLocaleString()}
</span> </span>
<button <Button
type="button" type="button"
variant="outline"
size="icon"
onClick={() => setQuantity((q) => Math.min(100, q + 1))} onClick={() => setQuantity((q) => Math.min(100, q + 1))}
disabled={quantity >= 100 || purchaseMutation.isPending} disabled={quantity >= 100 || purchaseMutation.isPending}
className="flex h-8 w-8 items-center justify-center rounded-md border transition-colors hover:bg-muted disabled:opacity-40" className="size-8 shadow-none transition-colors hover:bg-muted disabled:opacity-40"
> >
<Plus className="h-3.5 w-3.5" /> <Plus className="h-3.5 w-3.5" />
</button> </Button>
</div> </div>
{/* Quick-pick presets */} {/* Quick-pick presets */}
<div className="flex flex-wrap justify-center gap-1.5"> <div className="flex flex-wrap justify-center gap-1.5">
{PRESET_MULTIPLIERS.map((m) => ( {PRESET_MULTIPLIERS.map((m) => (
<button <Button
key={m} key={m}
type="button" type="button"
variant="ghost"
onClick={() => setQuantity(m)} onClick={() => setQuantity(m)}
disabled={purchaseMutation.isPending} disabled={purchaseMutation.isPending}
className={cn( className={cn(
"rounded-md border px-2.5 py-1 text-xs font-medium tabular-nums transition-colors disabled:opacity-60", "h-auto rounded-md border px-2.5 py-1 text-xs font-medium tabular-nums transition-colors hover:text-foreground disabled:opacity-60",
quantity === m quantity === m
? "border-emerald-500 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" ? "border-emerald-500 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
: "border-border hover:border-emerald-500/40 hover:bg-muted/40" : "border-border hover:border-emerald-500/40 hover:bg-muted/40"
)} )}
> >
{(m * PAGE_PACK_SIZE).toLocaleString()} {(m * PAGE_PACK_SIZE).toLocaleString()}
</button> </Button>
))} ))}
</div> </div>

23
surfsense_web/components/settings/buy-tokens-content.tsx
View file

@ -105,43 +105,48 @@ export function BuyTokensContent() {
<div className="space-y-3"> <div className="space-y-3">
<div className="flex items-center justify-center gap-3"> <div className="flex items-center justify-center gap-3">
<button <Button
type="button" type="button"
variant="outline"
size="icon"
onClick={() => setQuantity((q) => Math.max(1, q - 1))} onClick={() => setQuantity((q) => Math.max(1, q - 1))}
disabled={quantity <= 1 || purchaseMutation.isPending} disabled={quantity <= 1 || purchaseMutation.isPending}
className="flex h-8 w-8 items-center justify-center rounded-md border transition-colors hover:bg-muted disabled:opacity-40" className="size-8 shadow-none transition-colors hover:bg-muted disabled:opacity-40"
> >
<Minus className="h-3.5 w-3.5" /> <Minus className="h-3.5 w-3.5" />
</button> </Button>
<span className="min-w-32 text-center text-lg font-semibold tabular-nums"> <span className="min-w-32 text-center text-lg font-semibold tabular-nums">
${(totalCreditMicros / 1_000_000).toFixed(0)} of credit ${(totalCreditMicros / 1_000_000).toFixed(0)} of credit
</span> </span>
<button <Button
type="button" type="button"
variant="outline"
size="icon"
onClick={() => setQuantity((q) => Math.min(100, q + 1))} onClick={() => setQuantity((q) => Math.min(100, q + 1))}
disabled={quantity >= 100 || purchaseMutation.isPending} disabled={quantity >= 100 || purchaseMutation.isPending}
className="flex h-8 w-8 items-center justify-center rounded-md border transition-colors hover:bg-muted disabled:opacity-40" className="size-8 shadow-none transition-colors hover:bg-muted disabled:opacity-40"
> >
<Plus className="h-3.5 w-3.5" /> <Plus className="h-3.5 w-3.5" />
</button> </Button>
</div> </div>
<div className="flex flex-wrap justify-center gap-1.5"> <div className="flex flex-wrap justify-center gap-1.5">
{PRESET_MULTIPLIERS.map((m) => ( {PRESET_MULTIPLIERS.map((m) => (
<button <Button
key={m} key={m}
type="button" type="button"
variant="ghost"
onClick={() => setQuantity(m)} onClick={() => setQuantity(m)}
disabled={purchaseMutation.isPending} disabled={purchaseMutation.isPending}
className={cn( className={cn(
"rounded-md border px-2.5 py-1 text-xs font-medium tabular-nums transition-colors disabled:opacity-60", "h-auto rounded-md border px-2.5 py-1 text-xs font-medium tabular-nums transition-colors hover:text-foreground disabled:opacity-60",
quantity === m quantity === m
? "border-purple-500 bg-purple-500/10 text-purple-600 dark:text-purple-400" ? "border-purple-500 bg-purple-500/10 text-purple-600 dark:text-purple-400"
: "border-border hover:border-purple-500/40 hover:bg-muted/40" : "border-border hover:border-purple-500/40 hover:bg-muted/40"
)} )}
> >
${m} ${m}
</button> </Button>
))} ))}
</div> </div>

147
surfsense_web/components/settings/roles-manager.tsx
View file

@ -462,47 +462,44 @@ function RolesContent({
return ( return (
<div key={role.id} className="rounded-lg border border-border/60 overflow-hidden"> <div key={role.id} className="rounded-lg border border-border/60 overflow-hidden">
{/* biome-ignore lint/a11y/useSemanticElements: row contains nested interactive elements (DropdownMenu); using a <button> would produce invalid nested-button markup */}
<div <div
role="button" className="group/role-header flex items-center gap-4 p-4 transition-colors hover:bg-accent hover:text-accent-foreground focus-within:bg-accent focus-within:text-accent-foreground"
tabIndex={0}
aria-expanded={isExpanded}
className="flex items-center gap-4 p-4 transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
onClick={() => setExpandedRoleId(isExpanded ? null : role.id)}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
setExpandedRoleId(isExpanded ? null : role.id);
}
}}
> >
<div className="flex-1 min-w-0 text-left"> <Button
<div className="flex items-center gap-2"> type="button"
<span className="font-medium text-sm">{role.name}</span> variant="ghost"
{role.is_system_role && ( aria-expanded={isExpanded}
<span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-medium"> className="h-auto min-w-0 flex-1 justify-start gap-4 p-0 text-left font-normal hover:bg-transparent hover:text-inherit focus-visible:ring-0"
System onClick={() => setExpandedRoleId(isExpanded ? null : role.id)}
</span> >
)} <div className="flex-1 min-w-0 text-left">
{role.is_default && ( <div className="flex items-center gap-2">
<span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-medium"> <span className="font-medium text-sm">{role.name}</span>
Default {role.is_system_role && (
</span> <span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-medium">
System
</span>
)}
{role.is_default && (
<span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-medium">
Default
</span>
)}
</div>
{role.description && (
<p className="text-xs text-muted-foreground mt-0.5 truncate">
{role.description}
</p>
)} )}
</div> </div>
{role.description && (
<p className="text-xs text-muted-foreground mt-0.5 truncate">
{role.description}
</p>
)}
</div>
<div className="shrink-0"> <div className="shrink-0">
<PermissionsBadge permissions={role.permissions} /> <PermissionsBadge permissions={role.permissions} />
</div> </div>
</Button>
{!role.is_system_role && ( {!role.is_system_role && (
<div className="shrink-0" role="none" onClick={(e) => e.stopPropagation()}> <div className="shrink-0">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="h-8 w-8"> <Button variant="ghost" size="icon" className="h-8 w-8">
@ -552,14 +549,22 @@ function RolesContent({
</div> </div>
)} )}
<div className="shrink-0 p-1"> <Button
type="button"
variant="ghost"
size="icon"
aria-label={isExpanded ? `Collapse ${role.name}` : `Expand ${role.name}`}
aria-expanded={isExpanded}
className="size-6 shrink-0 p-1 hover:bg-transparent hover:text-inherit focus-visible:ring-0"
onClick={() => setExpandedRoleId(isExpanded ? null : role.id)}
>
<ChevronRight <ChevronRight
className={cn( className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200", "h-4 w-4 text-muted-foreground transition-transform duration-200",
isExpanded && "rotate-90" isExpanded && "rotate-90"
)} )}
/> />
</div> </Button>
</div> </div>
{isExpanded && ( {isExpanded && (
@ -692,40 +697,44 @@ function PermissionsEditor({
return ( return (
<div key={category} className="rounded-lg border border-border/60 overflow-hidden"> <div key={category} className="rounded-lg border border-border/60 overflow-hidden">
{/* biome-ignore lint/a11y/useSemanticElements: row contains a nested interactive Checkbox; using a <button> would produce invalid nested-button markup */}
<div <div
role="button" className="group/category-header flex items-center justify-between px-3 py-2.5 transition-colors hover:bg-accent hover:text-accent-foreground focus-within:bg-accent focus-within:text-accent-foreground"
tabIndex={0}
aria-expanded={isExpanded}
className="flex items-center justify-between px-3 py-2.5 hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
onClick={() => toggleCategoryExpanded(category)}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
toggleCategoryExpanded(category);
}
}}
> >
<div className="flex-1 flex items-center gap-2.5"> <Button
type="button"
variant="ghost"
aria-expanded={isExpanded}
className="h-auto min-w-0 flex-1 justify-start gap-2.5 p-0 text-left font-normal hover:bg-transparent hover:text-inherit focus-visible:ring-0"
onClick={() => toggleCategoryExpanded(category)}
>
<IconComponent className="h-4 w-4 text-muted-foreground shrink-0" /> <IconComponent className="h-4 w-4 text-muted-foreground shrink-0" />
<span className="font-medium text-sm">{config.label}</span> <span className="font-medium text-sm">{config.label}</span>
<span className="text-[11px] text-muted-foreground tabular-nums"> <span className="text-[11px] text-muted-foreground tabular-nums">
{stats.selected}/{stats.total} {stats.selected}/{stats.total}
</span> </span>
</div> </Button>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Checkbox <Checkbox
checked={stats.allSelected} checked={stats.allSelected}
onClick={(e) => e.stopPropagation()}
onCheckedChange={() => onToggleCategory(category)} onCheckedChange={() => onToggleCategory(category)}
aria-label={`Select all ${config.label} permissions`} aria-label={`Select all ${config.label} permissions`}
/> />
<ChevronRight <Button
className={cn( type="button"
"h-4 w-4 text-muted-foreground transition-transform duration-200", variant="ghost"
isExpanded && "rotate-90" size="icon"
)} aria-label={isExpanded ? `Collapse ${config.label}` : `Expand ${config.label}`}
/> aria-expanded={isExpanded}
className="size-6 p-1 hover:bg-transparent hover:text-inherit focus-visible:ring-0"
onClick={() => toggleCategoryExpanded(category)}
>
<ChevronRight
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
isExpanded && "rotate-90"
)}
/>
</Button>
</div> </div>
</div> </div>
@ -745,16 +754,19 @@ function PermissionsEditor({
isSelected ? "bg-muted/60 hover:bg-accent hover:text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground" isSelected ? "bg-muted/60 hover:bg-accent hover:text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
)} )}
> >
<button <Button
type="button" type="button"
className="flex-1 min-w-0 text-left cursor-pointer focus:outline-none focus-visible:outline-none" variant="ghost"
className="h-auto flex-1 min-w-0 justify-start p-0 text-left font-normal hover:bg-transparent hover:text-inherit focus-visible:ring-0"
onClick={() => onTogglePermission(perm.value)} onClick={() => onTogglePermission(perm.value)}
> >
<span className="text-sm font-medium">{actionLabel}</span> <span className="min-w-0">
<p className="text-xs text-muted-foreground truncate"> <span className="block text-sm font-medium">{actionLabel}</span>
{perm.description} <span className="block text-xs text-muted-foreground truncate">
</p> {perm.description}
</button> </span>
</span>
</Button>
<Checkbox <Checkbox
checked={isSelected} checked={isSelected}
onCheckedChange={() => onTogglePermission(perm.value)} onCheckedChange={() => onTogglePermission(perm.value)}
@ -871,12 +883,13 @@ function CreateRoleDialog({
<Label className="text-sm font-medium">Start from a template</Label> <Label className="text-sm font-medium">Start from a template</Label>
<div className="grid grid-cols-3 gap-2"> <div className="grid grid-cols-3 gap-2">
{Object.entries(ROLE_PRESETS).map(([key, preset]) => ( {Object.entries(ROLE_PRESETS).map(([key, preset]) => (
<button <Button
key={key} key={key}
type="button" type="button"
variant="outline"
onClick={() => applyPreset(key as keyof typeof ROLE_PRESETS)} onClick={() => applyPreset(key as keyof typeof ROLE_PRESETS)}
className={cn( className={cn(
"p-3 rounded-lg border transition-colors hover:bg-accent hover:text-accent-foreground", "h-auto p-3 whitespace-normal transition-colors hover:bg-accent hover:text-accent-foreground",
"flex items-center justify-center text-center sm:block sm:text-left", "flex items-center justify-center text-center sm:block sm:text-left",
selectedPermissions.length > 0 && selectedPermissions.length > 0 &&
preset.permissions.every((p) => selectedPermissions.includes(p)) preset.permissions.every((p) => selectedPermissions.includes(p))
@ -888,7 +901,7 @@ function CreateRoleDialog({
<p className="hidden sm:block text-xs text-muted-foreground mt-0.5 line-clamp-2"> <p className="hidden sm:block text-xs text-muted-foreground mt-0.5 line-clamp-2">
{preset.description} {preset.description}
</p> </p>
</button> </Button>
))} ))}
</div> </div>
</div> </div>

15
surfsense_web/components/settings/settings-dialog.tsx
View file

@ -2,6 +2,7 @@
import type * as React from "react"; import type * as React from "react";
import { useCallback, useRef, useState } from "react"; import { useCallback, useRef, useState } from "react";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"; import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@ -55,12 +56,13 @@ export function SettingsDialog({
<nav className="hidden md:flex w-[220px] shrink-0 flex-col border-r border-border p-3 pt-6"> <nav className="hidden md:flex w-[220px] shrink-0 flex-col border-r border-border p-3 pt-6">
<div className="flex flex-col gap-0.5"> <div className="flex flex-col gap-0.5">
{navItems.map((item) => ( {navItems.map((item) => (
<button <Button
key={item.value} key={item.value}
type="button" type="button"
variant="ghost"
onClick={() => onItemChange(item.value)} onClick={() => onItemChange(item.value)}
className={cn( className={cn(
"flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors text-left focus:outline-none focus-visible:outline-none", "h-auto justify-start gap-3 rounded-lg px-3 py-2.5 text-left text-sm font-medium transition-colors focus:outline-none focus-visible:outline-none",
activeItem === item.value activeItem === item.value
? "bg-accent text-accent-foreground" ? "bg-accent text-accent-foreground"
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
@ -68,7 +70,7 @@ export function SettingsDialog({
> >
{item.icon} {item.icon}
{item.label} {item.label}
</button> </Button>
))} ))}
</div> </div>
</nav> </nav>
@ -88,13 +90,14 @@ export function SettingsDialog({
> >
<div className="flex gap-1 px-4 pb-2"> <div className="flex gap-1 px-4 pb-2">
{navItems.map((item) => ( {navItems.map((item) => (
<button <Button
key={item.value} key={item.value}
ref={activeItem === item.value ? activeRef : undefined} ref={activeItem === item.value ? activeRef : undefined}
type="button" type="button"
variant="ghost"
onClick={() => handleItemChange(item.value)} onClick={() => handleItemChange(item.value)}
className={cn( className={cn(
"flex items-center gap-2 whitespace-nowrap rounded-full px-3 py-1.5 text-xs font-medium transition-colors shrink-0 focus:outline-none focus-visible:outline-none", "h-auto shrink-0 gap-2 rounded-full px-3 py-1.5 text-xs font-medium transition-colors focus:outline-none focus-visible:outline-none",
activeItem === item.value activeItem === item.value
? "bg-accent text-accent-foreground" ? "bg-accent text-accent-foreground"
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
@ -102,7 +105,7 @@ export function SettingsDialog({
> >
{item.icon} {item.icon}
{item.label} {item.label}
</button> </Button>
))} ))}
</div> </div>
</div> </div>

14
surfsense_web/components/shared/llm-config-form.tsx
View file

@ -407,9 +407,10 @@ export function LLMConfigForm({
<Separator /> <Separator />
<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}> <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
<CollapsibleTrigger asChild> <CollapsibleTrigger asChild>
<button <Button
type="button" type="button"
className="flex w-full items-center justify-between py-2 text-xs sm:text-sm font-medium text-muted-foreground hover:text-accent-foreground transition-colors" variant="ghost"
className="h-auto w-full justify-between px-0 py-2 text-xs font-medium text-muted-foreground hover:bg-transparent hover:text-accent-foreground sm:text-sm"
> >
<span>Advanced Parameters</span> <span>Advanced Parameters</span>
<ChevronDown <ChevronDown
@ -418,7 +419,7 @@ export function LLMConfigForm({
advancedOpen && "rotate-180" advancedOpen && "rotate-180"
)} )}
/> />
</button> </Button>
</CollapsibleTrigger> </CollapsibleTrigger>
<CollapsibleContent className="space-y-4 pt-2"> <CollapsibleContent className="space-y-4 pt-2">
<FormField <FormField
@ -445,9 +446,10 @@ export function LLMConfigForm({
<Separator /> <Separator />
<Collapsible open={systemInstructionsOpen} onOpenChange={setSystemInstructionsOpen}> <Collapsible open={systemInstructionsOpen} onOpenChange={setSystemInstructionsOpen}>
<CollapsibleTrigger asChild> <CollapsibleTrigger asChild>
<button <Button
type="button" type="button"
className="flex w-full items-center justify-between py-2 text-xs sm:text-sm font-medium text-muted-foreground hover:text-accent-foreground transition-colors" variant="ghost"
className="h-auto w-full justify-between px-0 py-2 text-xs font-medium text-muted-foreground hover:bg-transparent hover:text-accent-foreground sm:text-sm"
> >
<span>System Instructions</span> <span>System Instructions</span>
<ChevronDown <ChevronDown
@ -456,7 +458,7 @@ export function LLMConfigForm({
systemInstructionsOpen && "rotate-180" systemInstructionsOpen && "rotate-180"
)} )}
/> />
</button> </Button>
</CollapsibleTrigger> </CollapsibleTrigger>
<CollapsibleContent className="space-y-4 pt-2"> <CollapsibleContent className="space-y-4 pt-2">
{/* System Instructions */} {/* System Instructions */}