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: update UI components to use 'bg-popover' for consistent styling

Browse source
This commit is contained in:
Anish Sarkar 2026-05-13 17:21:10 +05:30
parent 6aa4dcef60
commit 0fecff45b9
7 changed files with 29 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

2
surfsense_web/components/assistant-ui/connector-popup.tsx
View file

@ -453,7 +453,7 @@ export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, Connector
</div> </div>
</div> </div>
{/* Bottom fade shadow */} {/* Bottom fade shadow */}
<div className="absolute bottom-0 left-0 right-0 h-7 bg-linear-to-t from-muted via-muted/80 to-transparent pointer-events-none z-10" /> <div className="absolute bottom-0 left-0 right-0 h-7 bg-linear-to-t from-popover via-popover/80 to-transparent pointer-events-none z-10" />
</div> </div>
</Tabs> </Tabs>
)} )}

2
surfsense_web/components/assistant-ui/connector-popup/components/connector-dialog-header.tsx
View file

@ -25,7 +25,7 @@ export const ConnectorDialogHeader: FC<ConnectorDialogHeaderProps> = ({
<div <div
className={cn( className={cn(
"flex-shrink-0 px-4 sm:px-12 pt-5 sm:pt-10 transition-shadow duration-200 relative z-10", "flex-shrink-0 px-4 sm:px-12 pt-5 sm:pt-10 transition-shadow duration-200 relative z-10",
isScrolled && "shadow-xl bg-muted/50 backdrop-blur-md" isScrolled && "bg-popover shadow-xl"
)} )}
> >
<DialogHeader> <DialogHeader>

6
surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx
View file

@ -368,16 +368,16 @@ export const ConnectorEditView: FC<ConnectorEditViewProps> = ({
</div> </div>
{/* Top fade shadow - appears when scrolled */} {/* Top fade shadow - appears when scrolled */}
{isScrolled && ( {isScrolled && (
<div className="absolute top-0 left-0 right-0 h-6 bg-gradient-to-b from-muted/50 to-transparent pointer-events-none z-10" /> <div className="absolute top-0 left-0 right-0 h-6 bg-gradient-to-b from-popover to-transparent pointer-events-none z-10" />
)} )}
{/* Bottom fade shadow - appears when there's more content */} {/* Bottom fade shadow - appears when there's more content */}
{hasMoreContent && ( {hasMoreContent && (
<div className="absolute bottom-0 left-0 right-0 h-3 bg-gradient-to-t from-muted/50 to-transparent pointer-events-none z-10" /> <div className="absolute bottom-0 left-0 right-0 h-3 bg-gradient-to-t from-popover to-transparent pointer-events-none z-10" />
)} )}
</div> </div>
{/* Fixed Footer - Action buttons */} {/* Fixed Footer - Action buttons */}
<div className="flex-shrink-0 flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3 sm:gap-0 px-6 sm:px-12 py-6 sm:py-6 bg-muted border-t border-border"> <div className="flex-shrink-0 flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3 sm:gap-0 px-6 sm:px-12 py-6 sm:py-6 bg-popover">
{showDisconnectConfirm ? ( {showDisconnectConfirm ? (
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 flex-1 sm:flex-initial"> <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 flex-1 sm:flex-initial">
<span className="text-xs sm:text-sm text-muted-foreground sm:whitespace-nowrap"> <span className="text-xs sm:text-sm text-muted-foreground sm:whitespace-nowrap">

4
surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/indexing-configuration-view.tsx
View file

@ -246,11 +246,11 @@ export const IndexingConfigurationView: FC<IndexingConfigurationViewProps> = ({
</div> </div>
{/* Top fade shadow - appears when scrolled */} {/* Top fade shadow - appears when scrolled */}
{isScrolled && ( {isScrolled && (
<div className="absolute top-0 left-0 right-0 h-6 bg-gradient-to-b from-muted/50 to-transparent pointer-events-none z-10" /> <div className="absolute top-0 left-0 right-0 h-6 bg-gradient-to-b from-popover to-transparent pointer-events-none z-10" />
)} )}
{/* Bottom fade shadow - appears when there's more content */} {/* Bottom fade shadow - appears when there's more content */}
{hasMoreContent && ( {hasMoreContent && (
<div className="absolute bottom-0 left-0 right-0 h-3 bg-gradient-to-t from-muted/50 to-transparent pointer-events-none z-10" /> <div className="absolute bottom-0 left-0 right-0 h-3 bg-gradient-to-t from-popover to-transparent pointer-events-none z-10" />
)} )}
</div> </div>

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

@ -108,7 +108,7 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
return ( return (
<div className="flex flex-col h-full"> <div className="flex flex-col h-full">
{/* Header */} {/* Header */}
<div className="px-6 sm:px-12 pt-8 sm:pt-10 pb-1 sm:pb-4 border-b border-border/50 bg-muted"> <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"

18
surfsense_web/components/layout/ui/right-panel/RightPanel.tsx
View file

@ -3,7 +3,7 @@
import { useAtom, useAtomValue, useSetAtom } from "jotai"; import { useAtom, useAtomValue, useSetAtom } from "jotai";
import { PanelRight } from "lucide-react"; import { PanelRight } from "lucide-react";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import { startTransition, useEffect } from "react"; import { startTransition, useEffect, type MouseEvent } from "react";
import { closeReportPanelAtom, reportPanelAtom } from "@/atoms/chat/report-panel.atom"; import { closeReportPanelAtom, reportPanelAtom } from "@/atoms/chat/report-panel.atom";
import { citationPanelAtom, closeCitationPanelAtom } from "@/atoms/citation/citation-panel.atom"; import { citationPanelAtom, closeCitationPanelAtom } from "@/atoms/citation/citation-panel.atom";
import { documentsSidebarOpenAtom } from "@/atoms/documents/ui.atoms"; import { documentsSidebarOpenAtom } from "@/atoms/documents/ui.atoms";
@ -53,6 +53,10 @@ interface RightPanelProps {
}; };
} }
function isKeyboardClick(event: MouseEvent) {
return event.detail === 0;
}
function CollapseButton({ onClick }: { onClick: () => void }) { function CollapseButton({ onClick }: { onClick: () => void }) {
return ( return (
<Tooltip> <Tooltip>
@ -60,7 +64,11 @@ function CollapseButton({ onClick }: { onClick: () => void }) {
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={onClick} tabIndex={-1}
onClick={(event) => {
if (isKeyboardClick(event)) return;
onClick();
}}
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:text-muted-foreground hover:bg-accent"
> >
<PanelRight className="h-4 w-4" /> <PanelRight className="h-4 w-4" />
@ -101,7 +109,11 @@ export function RightPanelExpandButton() {
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={() => startTransition(() => setCollapsed(false))} tabIndex={-1}
onClick={(event) => {
if (isKeyboardClick(event)) return;
startTransition(() => setCollapsed(false));
}}
className="h-8 w-8 shrink-0 -m-0.5 text-muted-foreground hover:text-muted-foreground hover:bg-accent" className="h-8 w-8 shrink-0 -m-0.5 text-muted-foreground hover:text-muted-foreground hover:bg-accent"
> >
<PanelRight className="h-4 w-4" /> <PanelRight className="h-4 w-4" />

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

@ -38,7 +38,6 @@ import {
folderWatchDialogOpenAtom, folderWatchDialogOpenAtom,
folderWatchInitialFolderAtom, folderWatchInitialFolderAtom,
} from "@/atoms/folder-sync/folder-sync.atoms"; } from "@/atoms/folder-sync/folder-sync.atoms";
import { rightPanelCollapsedAtom } from "@/atoms/layout/right-panel.atom";
import { searchSpacesAtom } from "@/atoms/search-spaces/search-space-query.atoms"; import { searchSpacesAtom } from "@/atoms/search-spaces/search-space-query.atoms";
import { CreateFolderDialog } from "@/components/documents/CreateFolderDialog"; import { CreateFolderDialog } from "@/components/documents/CreateFolderDialog";
import type { DocumentNodeDoc } from "@/components/documents/DocumentNode"; import type { DocumentNodeDoc } from "@/components/documents/DocumentNode";
@ -199,7 +198,6 @@ function AuthenticatedDocumentsSidebarBase({
const electronAPI = desktopFeaturesEnabled ? platformElectronAPI : null; const electronAPI = desktopFeaturesEnabled ? platformElectronAPI : null;
const searchSpaceId = Number(params.search_space_id); const searchSpaceId = Number(params.search_space_id);
const setConnectorDialogOpen = useSetAtom(connectorDialogOpenAtom); const setConnectorDialogOpen = useSetAtom(connectorDialogOpenAtom);
const setRightPanelCollapsed = useSetAtom(rightPanelCollapsedAtom);
const openEditorPanel = useSetAtom(openEditorPanelAtom); const openEditorPanel = useSetAtom(openEditorPanelAtom);
const { data: agentFlags } = useAtomValue(agentFlagsAtom); const { data: agentFlags } = useAtomValue(agentFlagsAtom);
const { data: connectors } = useAtomValue(connectorsAtom); const { data: connectors } = useAtomValue(connectorsAtom);
@ -1024,17 +1022,13 @@ function AuthenticatedDocumentsSidebarBase({
useEffect(() => { useEffect(() => {
const handleEscape = (e: KeyboardEvent) => { const handleEscape = (e: KeyboardEvent) => {
if (e.key === "Escape" && open) { if (e.key === "Escape" && open && isMobile) {
if (isMobile) { onOpenChange(false);
onOpenChange(false);
} else {
setRightPanelCollapsed(true);
}
} }
}; };
document.addEventListener("keydown", handleEscape); document.addEventListener("keydown", handleEscape);
return () => document.removeEventListener("keydown", handleEscape); return () => document.removeEventListener("keydown", handleEscape);
}, [open, onOpenChange, isMobile, setRightPanelCollapsed]); }, [open, onOpenChange, isMobile]);
const showFilesystemTabs = const showFilesystemTabs =
!isMobile && !!electronAPI && !!filesystemSettings && localFilesystemEnabled; !isMobile && !!electronAPI && !!filesystemSettings && localFilesystemEnabled;
@ -1585,7 +1579,6 @@ function AnonymousDocumentsSidebar({
const t = useTranslations("documents"); const t = useTranslations("documents");
const tSidebar = useTranslations("sidebar"); const tSidebar = useTranslations("sidebar");
const isMobile = !useMediaQuery("(min-width: 640px)"); const isMobile = !useMediaQuery("(min-width: 640px)");
const setRightPanelCollapsed = useSetAtom(rightPanelCollapsedAtom);
const anonMode = useAnonymousMode(); const anonMode = useAnonymousMode();
const { gate } = useLoginGate(); const { gate } = useLoginGate();
@ -1697,17 +1690,13 @@ function AnonymousDocumentsSidebar({
useEffect(() => { useEffect(() => {
const handleEscape = (e: KeyboardEvent) => { const handleEscape = (e: KeyboardEvent) => {
if (e.key === "Escape" && open) { if (e.key === "Escape" && open && isMobile) {
if (isMobile) { onOpenChange(false);
onOpenChange(false);
} else {
setRightPanelCollapsed(true);
}
} }
}; };
document.addEventListener("keydown", handleEscape); document.addEventListener("keydown", handleEscape);
return () => document.removeEventListener("keydown", handleEscape); return () => document.removeEventListener("keydown", handleEscape);
}, [open, onOpenChange, isMobile, setRightPanelCollapsed]); }, [open, onOpenChange, isMobile]);
const documentsContent = ( const documentsContent = (
<> <>