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: update UI components to enhance hover effects and color consistency

Browse source
This commit is contained in:
Anish Sarkar 2026-05-13 23:53:09 +05:30
parent a9252913cf
commit 75b7a9cc6c
90 changed files with 237 additions and 208 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -258,10 +258,10 @@ export function AllPrivateChatsSidebarContent({
<Button
variant="ghost"
size="icon"
className="h-8 w-8 rounded-full"
className="h-8 w-8 rounded-full text-muted-foreground hover:text-accent-foreground"
onClick={() => onOpenChange(false)}
>
<ChevronLeft className="h-4 w-4 text-muted-foreground" />
<ChevronLeft className="h-4 w-4" />
<span className="sr-only">{t("close") || "Close"}</span>
</Button>
)}

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

@ -257,10 +257,10 @@ export function AllSharedChatsSidebarContent({
<Button
variant="ghost"
size="icon"
className="h-8 w-8 rounded-full"
className="h-8 w-8 rounded-full text-muted-foreground hover:text-accent-foreground"
onClick={() => onOpenChange(false)}
>
<ChevronLeft className="h-4 w-4 text-muted-foreground" />
<ChevronLeft className="h-4 w-4" />
<span className="sr-only">{t("close") || "Close"}</span>
</Button>
)}

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

@ -65,13 +65,13 @@ export function DesktopLocalTabContent({
return (
<div className="flex min-h-0 flex-1 flex-col select-none">
<div className="mx-4 mt-4 mb-3">
<div className="flex h-7 w-full items-stretch rounded-lg border-0 bg-muted text-[11px] text-muted-foreground hover:bg-muted/80">
<div className="flex h-7 w-full items-stretch rounded-lg border-0 bg-muted text-[11px] text-muted-foreground hover:bg-accent hover:text-accent-foreground">
{localRootPaths.length > 0 ? (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button
type="button"
className="min-w-0 flex-1 flex items-center gap-1 rounded-l-lg px-2 text-left transition-colors hover:bg-muted/80 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0"
className="min-w-0 flex-1 flex items-center gap-1 rounded-l-lg px-2 text-left transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0"
title={localRootPaths.join("\n")}
aria-label="Manage selected folders"
>
@ -100,7 +100,7 @@ export function DesktopLocalTabContent({
</span>
<button
type="button"
className="inline-flex size-5 items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground"
className="inline-flex size-5 items-center justify-center rounded text-muted-foreground transition-colors hover:text-accent-foreground"
onClick={(event) => {
event.stopPropagation();
void onRemoveFilesystemRoot(rootPath);
@ -142,7 +142,7 @@ export function DesktopLocalTabContent({
<span className="inline-flex">
<button
type="button"
className="flex w-8 items-center justify-center rounded-r-lg text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:opacity-50"
className="flex w-8 items-center justify-center rounded-r-lg text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:opacity-50"
onClick={() => {
void onPickFilesystemRoot();
}}
@ -169,7 +169,7 @@ export function DesktopLocalTabContent({
</div>
<Input
ref={localSearchInputRef}
className="peer h-8 w-full pl-8 pr-8 text-sm bg-sidebar border-border/60 select-none focus:select-text"
className="peer h-8 w-full border-0 bg-muted pl-8 pr-8 text-sm shadow-none select-none focus:select-text"
value={localSearch}
onChange={(e) => setLocalSearch(e.target.value)}
placeholder="Search local files"
@ -179,7 +179,7 @@ export function DesktopLocalTabContent({
{Boolean(localSearch) && (
<button
type="button"
className="absolute inset-y-0 right-0 flex h-full w-8 items-center justify-center rounded-r-md text-muted-foreground hover:text-foreground transition-colors"
className="absolute inset-y-0 right-0 flex h-full w-8 items-center justify-center rounded-r-md text-muted-foreground hover:text-accent-foreground transition-colors"
aria-label="Clear local search"
onClick={() => {
setLocalSearch("");

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

@ -1043,7 +1043,7 @@ function AuthenticatedDocumentsSidebarBase({
const cloudContent = (
<>
{/* Connected tools strip */}
<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">
<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-accent hover:text-accent-foreground">
<button
type="button"
onClick={() => setConnectorDialogOpen(true)}
@ -1114,7 +1114,7 @@ function AuthenticatedDocumentsSidebarBase({
<button
type="button"
onClick={handleWatchLocalFolder}
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"
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-accent hover:text-accent-foreground"
>
<FolderClock className="size-4 shrink-0 text-muted-foreground" />
<span className="truncate text-xs text-muted-foreground">Watch local folder</span>
@ -1229,10 +1229,10 @@ function AuthenticatedDocumentsSidebarBase({
<Button
variant="ghost"
size="icon"
className="h-8 w-8 rounded-full"
className="h-8 w-8 rounded-full text-muted-foreground hover:text-accent-foreground"
onClick={() => onOpenChange(false)}
>
<ChevronLeft className="h-4 w-4 text-muted-foreground" />
<ChevronLeft className="h-4 w-4" />
<span className="sr-only">{tSidebar("close") || "Close"}</span>
</Button>
)}
@ -1272,7 +1272,7 @@ function AuthenticatedDocumentsSidebarBase({
<Button
variant="ghost"
size="icon"
className="h-8 w-8 rounded-full"
className="h-8 w-8 rounded-full text-muted-foreground hover:text-accent-foreground"
onClick={() => {
if (isDocked) {
onDockedChange(false);
@ -1283,9 +1283,9 @@ function AuthenticatedDocumentsSidebarBase({
}}
>
{isDocked ? (
<ChevronLeft className="h-4 w-4 text-muted-foreground" />
<ChevronLeft className="h-4 w-4" />
) : (
<ChevronRight className="h-4 w-4 text-muted-foreground" />
<ChevronRight className="h-4 w-4" />
)}
<span className="sr-only">{isDocked ? "Collapse panel" : "Expand panel"}</span>
</Button>
@ -1720,10 +1720,10 @@ function AnonymousDocumentsSidebar({
<Button
variant="ghost"
size="icon"
className="h-8 w-8 rounded-full"
className="h-8 w-8 rounded-full text-muted-foreground hover:text-accent-foreground"
onClick={() => onOpenChange(false)}
>
<X className="h-4 w-4 text-muted-foreground" />
<X className="h-4 w-4" />
<span className="sr-only">{tSidebar("close") || "Close"}</span>
</Button>
)}
@ -1733,7 +1733,7 @@ function AnonymousDocumentsSidebar({
<Button
variant="ghost"
size="icon"
className="h-8 w-8 rounded-full"
className="h-8 w-8 rounded-full text-muted-foreground hover:text-accent-foreground"
onClick={() => {
if (isDocked) {
onDockedChange(false);
@ -1744,9 +1744,9 @@ function AnonymousDocumentsSidebar({
}}
>
{isDocked ? (
<ChevronLeft className="h-4 w-4 text-muted-foreground" />
<ChevronLeft className="h-4 w-4" />
) : (
<ChevronRight className="h-4 w-4 text-muted-foreground" />
<ChevronRight className="h-4 w-4" />
)}
<span className="sr-only">{isDocked ? "Collapse panel" : "Expand panel"}</span>
</Button>
@ -1762,7 +1762,7 @@ function AnonymousDocumentsSidebar({
</div>
{/* Connectors strip (gated) */}
<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 bg-muted/50 transition-colors hover:bg-accent hover:text-accent-foreground">
<button
type="button"
onClick={() => gate("connect your data sources")}

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

@ -535,10 +535,10 @@ export function InboxSidebarContent({
<Button
variant="ghost"
size="icon"
className="h-8 w-8 rounded-full"
className="h-8 w-8 rounded-full text-muted-foreground hover:text-accent-foreground"
onClick={() => onOpenChange(false)}
>
<ChevronLeft className="h-4 w-4 text-muted-foreground" />
<ChevronLeft className="h-4 w-4" />
<span className="sr-only">{t("close") || "Close"}</span>
</Button>
)}

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

@ -412,7 +412,7 @@ export function LocalFilesystemBrowser({
<button
type="button"
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-muted/60"
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"
style={{ paddingInlineStart: `${depth * 12 + 8}px` }}
draggable={false}
>
@ -440,7 +440,7 @@ export function LocalFilesystemBrowser({
: undefined
}
className={`flex h-8 w-full items-center gap-1.5 rounded-md px-2 text-left text-sm transition-colors ${
isOpenable ? "hover:bg-muted/60" : "cursor-not-allowed opacity-60"
isOpenable ? "hover:bg-accent hover:text-accent-foreground" : "cursor-not-allowed opacity-60"
}`}
style={{ paddingInlineStart: `${(depth + 1) * 12 + 22}px` }}
title={

2
surfsense_web/components/layout/ui/sidebar/SidebarCollapseButton.tsx
View file

@ -26,7 +26,7 @@ export function SidebarCollapseButton({
variant="ghost"
size="icon"
onClick={onToggle}
className="h-8 w-8 shrink-0 text-muted-foreground hover:text-muted-foreground hover:bg-accent"
className="h-8 w-8 shrink-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
>
<PanelLeft className="h-4 w-4" />
<span className="sr-only">{isCollapsed ? t("expand_sidebar") : t("collapse_sidebar")}</span>

2
surfsense_web/components/layout/ui/sidebar/SidebarSection.tsx
View file

@ -40,7 +40,7 @@ export function SidebarSection({
)}
>
<div className="flex items-center group/section shrink-0 px-2 py-1">
<CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors min-w-0">
<CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-accent-foreground transition-colors min-w-0">
<span className="truncate">{title}</span>
<ChevronRight
className={cn(

8
surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
View file

@ -270,7 +270,7 @@ export function SidebarUserProfile({
onClick={() => handleThemeChange(themeOption.value)}
className={cn(
"mb-1 last:mb-0 transition-all",
"hover:bg-accent/50",
"hover:bg-accent hover:text-accent-foreground",
isSelected && "text-primary"
)}
>
@ -300,7 +300,7 @@ export function SidebarUserProfile({
onClick={() => handleLanguageChange(language.code)}
className={cn(
"mb-1 last:mb-0 transition-all",
"hover:bg-accent/50",
"hover:bg-accent hover:text-accent-foreground",
isSelected && "text-primary"
)}
>
@ -436,7 +436,7 @@ export function SidebarUserProfile({
onClick={() => handleThemeChange(themeOption.value)}
className={cn(
"mb-1 last:mb-0 transition-all",
"hover:bg-accent/50",
"hover:bg-accent hover:text-accent-foreground",
isSelected && "text-primary"
)}
>
@ -466,7 +466,7 @@ export function SidebarUserProfile({
onClick={() => handleLanguageChange(language.code)}
className={cn(
"mb-1 last:mb-0 transition-all",
"hover:bg-accent/50",
"hover:bg-accent hover:text-accent-foreground",
isSelected && "text-primary"
)}
>