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

refactor(styles): standardize input and button styles across various components; enhance hover effects and background management for improved UI consistency

Browse source
This commit is contained in:
Anish Sarkar 2026-05-04 04:03:14 +05:30
parent 5c77864b14
commit d302fbd272
8 changed files with 23 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

13
surfsense_web/components/documents/DocumentsFilters.tsx
View file

@ -78,13 +78,13 @@ export function DocumentsFilters({
<div className="flex select-none"> <div className="flex select-none">
<div className="flex items-center gap-2 w-full"> <div className="flex items-center gap-2 w-full">
{/* New Folder + AI Sort + Filter Toggle Group */} {/* New Folder + AI Sort + Filter Toggle Group */}
<ToggleGroup type="multiple" variant="outline" value={[]} className="overflow-visible"> <ToggleGroup type="multiple" value={[]} className="overflow-visible">
{onCreateFolder && ( {onCreateFolder && (
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<ToggleGroupItem <ToggleGroupItem
value="folder" value="folder"
className="h-8 w-8 shrink-0 border bg-muted/50 text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground" className="h-8 w-8 shrink-0 border-0 bg-muted text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
onCreateFolder(); onCreateFolder();
@ -104,7 +104,8 @@ export function DocumentsFilters({
value="ai-sort" value="ai-sort"
disabled={aiSortBusy} disabled={aiSortBusy}
className={cn( className={cn(
"h-8 w-8 shrink-0 border bg-muted/50 transition-colors", "h-8 w-8 shrink-0 border-0 bg-muted transition-colors",
"relative before:absolute before:left-0 before:top-1/2 before:h-4 before:w-px before:-translate-y-1/2 before:bg-border/60 before:content-[''] dark:before:bg-white/10",
"disabled:pointer-events-none disabled:opacity-50", "disabled:pointer-events-none disabled:opacity-50",
aiSortEnabled aiSortEnabled
? "bg-accent text-accent-foreground hover:bg-accent" ? "bg-accent text-accent-foreground hover:bg-accent"
@ -142,7 +143,7 @@ export function DocumentsFilters({
<PopoverTrigger asChild> <PopoverTrigger asChild>
<ToggleGroupItem <ToggleGroupItem
value="filter" value="filter"
className="relative h-8 w-8 shrink-0 overflow-visible border bg-muted/50 text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground" className="relative h-8 w-8 shrink-0 overflow-visible border-0 bg-muted text-muted-foreground transition-colors before:absolute before:left-0 before:top-1/2 before:h-4 before:w-px before:-translate-y-1/2 before:bg-border/60 before:content-[''] hover:bg-muted/80 hover:text-foreground dark:before:bg-white/10"
> >
<ListFilter size={13} /> <ListFilter size={13} />
{activeTypes.length > 0 && ( {activeTypes.length > 0 && (
@ -226,13 +227,13 @@ export function DocumentsFilters({
{/* Search Input */} {/* Search Input */}
<div className="relative flex-1 min-w-0"> <div className="relative flex-1 min-w-0">
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"> <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground">
<Search size={13} aria-hidden="true" /> <Search size={13} aria-hidden="true" />
</div> </div>
<Input <Input
id={`${id}-input`} id={`${id}-input`}
ref={inputRef} ref={inputRef}
className="h-8 w-full select-none pl-8 pr-7 text-sm focus:select-text" className="h-8 w-full select-none border-0 bg-muted pl-8 pr-7 text-sm shadow-none focus:select-text"
value={searchValue} value={searchValue}
onChange={(e) => onSearch(e.target.value)} onChange={(e) => onSearch(e.target.value)}
placeholder="Search docs" placeholder="Search docs"

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

@ -275,13 +275,13 @@ export function AllPrivateChatsSidebarContent({
placeholder={t("search_chats") || "Search chats..."} placeholder={t("search_chats") || "Search chats..."}
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="h-8 pl-8 pr-7 text-sm" className="h-8 border-0 bg-muted pl-8 pr-7 text-sm shadow-none"
/> />
{searchQuery && ( {searchQuery && (
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2" className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2 rounded-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
onClick={handleClearSearch} onClick={handleClearSearch}
> >
<X className="h-3.5 w-3.5" /> <X className="h-3.5 w-3.5" />

4
surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
View file

@ -274,13 +274,13 @@ export function AllSharedChatsSidebarContent({
placeholder={t("search_chats") || "Search chats..."} placeholder={t("search_chats") || "Search chats..."}
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="h-8 pl-8 pr-7 text-sm" className="h-8 border-0 bg-muted pl-8 pr-7 text-sm shadow-none"
/> />
{searchQuery && ( {searchQuery && (
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2" className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2 rounded-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
onClick={handleClearSearch} onClick={handleClearSearch}
> >
<X className="h-3.5 w-3.5" /> <X className="h-3.5 w-3.5" />

4
surfsense_web/components/layout/ui/sidebar/DesktopLocalTabContent.tsx
View file

@ -65,7 +65,7 @@ export function DesktopLocalTabContent({
return ( return (
<div className="flex min-h-0 flex-1 flex-col select-none"> <div className="flex min-h-0 flex-1 flex-col select-none">
<div className="mx-4 mt-4 mb-3"> <div className="mx-4 mt-4 mb-3">
<div className="flex h-7 w-full items-stretch rounded-lg border bg-muted/50 text-[11px] text-muted-foreground"> <div className="flex h-7 w-full items-stretch rounded-lg border-0 bg-muted text-[11px] text-muted-foreground hover:bg-muted/80">
{localRootPaths.length > 0 ? ( {localRootPaths.length > 0 ? (
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
@ -134,7 +134,7 @@ export function DesktopLocalTabContent({
)} )}
<Separator <Separator
orientation="vertical" orientation="vertical"
className="data-[orientation=vertical]:h-3 self-center bg-border" className="data-[orientation=vertical]:h-3 self-center bg-border/60 dark:bg-white/10"
/> />
{electronAvailable ? ( {electronAvailable ? (
<Tooltip> <Tooltip>

4
surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
View file

@ -1052,7 +1052,7 @@ function AuthenticatedDocumentsSidebarBase({
const cloudContent = ( const cloudContent = (
<> <>
{/* Connected tools strip */} {/* Connected tools strip */}
<div className="shrink-0 mx-4 mt-6 mb-2.5 flex select-none items-center gap-2 rounded-lg border bg-muted/50 transition-colors hover:bg-muted/80"> <div className="shrink-0 mx-4 mt-6 mb-2.5 flex select-none items-center gap-2 rounded-lg border-0 bg-muted transition-colors hover:bg-muted/80">
<button <button
type="button" type="button"
onClick={() => setConnectorDialogOpen(true)} onClick={() => setConnectorDialogOpen(true)}
@ -1123,7 +1123,7 @@ function AuthenticatedDocumentsSidebarBase({
<button <button
type="button" type="button"
onClick={handleWatchLocalFolder} onClick={handleWatchLocalFolder}
className="shrink-0 mx-4 mb-2.5 flex select-none items-center gap-2 rounded-lg border bg-muted/50 px-3 py-1.5 transition-colors hover:bg-muted/80" className="shrink-0 mx-4 mb-2.5 flex select-none items-center gap-2 rounded-lg border-0 bg-muted px-3 py-1.5 transition-colors hover:bg-muted/80"
> >
<FolderClock className="size-4 shrink-0 text-muted-foreground" /> <FolderClock className="size-4 shrink-0 text-muted-foreground" />
<span className="truncate text-xs text-muted-foreground">Watch local folder</span> <span className="truncate text-xs text-muted-foreground">Watch local folder</span>

4
surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx
View file

@ -817,13 +817,13 @@ export function InboxSidebarContent({
placeholder={t("search_inbox") || "Search inbox"} placeholder={t("search_inbox") || "Search inbox"}
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="h-8 pl-8 pr-7 text-sm" className="h-8 border-0 bg-muted pl-8 pr-7 text-sm shadow-none"
/> />
{searchQuery && ( {searchQuery && (
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2" className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2 rounded-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
onClick={handleClearSearch} onClick={handleClearSearch}
> >
<X className="h-3.5 w-3.5" /> <X className="h-3.5 w-3.5" />

8
surfsense_web/components/new-chat/chat-share-button.tsx
View file

@ -173,7 +173,7 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent
className="w-[280px] md:w-[320px] p-0 rounded-lg shadow-lg border-border/60 dark:bg-neutral-900 dark:border dark:border-white/5 select-none" className="w-[280px] md:w-[320px] p-0 rounded-lg shadow-lg bg-muted border-border/60 dark:border dark:border-neutral-700 select-none"
align="end" align="end"
sideOffset={8} sideOffset={8}
onCloseAutoFocus={(e) => e.preventDefault()} onCloseAutoFocus={(e) => e.preventDefault()}
@ -191,9 +191,9 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
onClick={() => handleVisibilityChange(option.value)} onClick={() => handleVisibilityChange(option.value)}
className={cn( className={cn(
"w-full flex items-center gap-2.5 px-2.5 py-2 rounded-md transition-all", "w-full flex items-center gap-2.5 px-2.5 py-2 rounded-md transition-all",
"hover:bg-accent/50 dark:hover:bg-white/10 cursor-pointer", "hover:bg-accent/40 cursor-pointer",
"focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
isSelected && "bg-accent/80 dark:bg-white/10" isSelected && "bg-primary/6 dark:bg-primary/8"
)} )}
> >
<div <div
@ -240,7 +240,7 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
disabled={isCreatingSnapshot} disabled={isCreatingSnapshot}
className={cn( className={cn(
"w-full flex items-center gap-2.5 px-2.5 py-2 rounded-md transition-all", "w-full flex items-center gap-2.5 px-2.5 py-2 rounded-md transition-all",
"hover:bg-accent/50 dark:hover:bg-white/10 cursor-pointer", "hover:bg-accent/40 cursor-pointer",
"focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
"disabled:opacity-50 disabled:cursor-not-allowed" "disabled:opacity-50 disabled:cursor-not-allowed"
)} )}

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

@ -1146,7 +1146,7 @@ export function ModelSelector({
return ( return (
<div className="flex flex-col w-full overflow-hidden"> <div className="flex flex-col w-full overflow-hidden">
{/* Tab header */} {/* Tab header */}
<div className="border-b border-border/80 dark:border-neutral-800"> <div className="border-b border-border/50">
<div className="w-full grid grid-cols-3 h-11"> <div className="w-full grid grid-cols-3 h-11">
{( {(
[ [
@ -1425,7 +1425,7 @@ export function ModelSelector({
<Popover open={open} onOpenChange={handleOpenChange}> <Popover open={open} onOpenChange={handleOpenChange}>
<PopoverTrigger asChild>{triggerButton}</PopoverTrigger> <PopoverTrigger asChild>{triggerButton}</PopoverTrigger>
<PopoverContent <PopoverContent
className="w-[300px] md:w-[380px] p-0 rounded-lg shadow-lg overflow-hidden bg-white border-border/60 dark:bg-neutral-900 dark:border dark:border-white/5 select-none" className="w-[300px] md:w-[380px] p-0 rounded-lg shadow-lg overflow-hidden bg-muted border-border/60 dark:border dark:border-neutral-700 select-none"
align="start" align="start"
sideOffset={8} sideOffset={8}
onCloseAutoFocus={(e) => e.preventDefault()} onCloseAutoFocus={(e) => e.preventDefault()}