LibreChat/client/src/components/SidePanel/Bookmarks/BookmarkEmptyState.tsx

22 lines
697 B
TypeScript
Raw Normal View History

🪄 refactor: UI Polish and Admin Dialog Unification (#11108) * refactor(OpenSidebar): removed useless classNames * style(Header): update hover styles across various components for improved UI consistency * style(Nav): update hover styles in AccountSettings and SearchBar for improved UI consistency * style: update button classes for consistent hover effects and improved UI responsiveness * style(Nav, OpenSidebar, Header, Convo): improve UI responsiveness and animation transitions * style(PresetsMenu, NewChat): update icon sizes and improve component styling for better UI consistency * style(Nav, Root): enhance sidebar mobile animations and responsiveness for better UI experience * style(ExportAndShareMenu, BookmarkMenu): update icon sizes for improved UI consistency * style: remove transition duration from button classes for improved UI responsiveness * style(CustomMenu, ModelSelector): update background colors for improved UI consistency and responsiveness * style(ExportAndShareMenu): update icon color for improved UI consistency * style(TemporaryChat): refine button styles for improved UI consistency and responsiveness * style(BookmarkNav): refactor to use DropdownPopup and remove BookmarkNavItems for improved UI consistency and functionality * style(CustomMenu, EndpointItem): enhance UI elements for improved consistency and accessibility * style(EndpointItem): adjust gap in icon container for improved layout consistency * style(CustomMenu, EndpointItem): update focus ring color for improved UI consistency * style(EndpointItem): update icon color for improved UI consistency in dark theme * style: update focus styles for improved accessibility and consistency across components * refactor(Nav): extract sidebar width to NAV_WIDTH constant Centralize mobile (320px) and desktop (260px) sidebar widths in a single exported constant to avoid magic numbers and ensure consistency. * fix(BookmarkNav): memoize handlers used in useMemo Wrap handleTagClick and handleClear in useCallback and add them to the dropdownItems useMemo dependency array to prevent stale closures. * feat: introduce FilterInput component and replace existing inputs with it across multiple components * feat(DataTable): replace custom input with FilterInput component for improved filtering * fix: Nested dialog overlay stacking issue Fixes overlay appearing behind content when opening nested dialogs. Introduced dynamic z-index calculation based on dialog depth using React context. - First dialog: overlay z-50, content z-100 - Nested dialogs increment by 60: overlay z-110/content z-160, etc. Preserves a11y escape key handling from #10975 and #10851. Regression from #11008 (afb67fcf1) which increased content z-index without adjusting overlay z-index for nested dialog scenarios. * Refactor admin settings components to use a unified AdminSettingsDialog - Removed redundant code from AdminSettings, MCPAdminSettings, and Memories AdminSettings components. - Introduced AdminSettingsDialog component to handle permission management for different sections. - Updated permission handling logic to use a consistent structure across components. - Enhanced role selection and permission confirmation features in the new dialog. - Improved UI consistency and maintainability by centralizing dialog functionality. * refactor(Memory): memory management UI components and replace MemoryViewer with MemoryPanel * refactor(Memory): enhance UI components for Memory dialogs and improve input styling * refactor(Bookmarks): improve bookmark management UI with enhanced styling * refactor(translations): remove redundant filter input and bookmark count entries * refactor(Convo): integrate useShiftKey hook for enhanced keyboard interaction and improve UI responsiveness
2025-12-28 17:01:25 +01:00
import { Bookmark } from 'lucide-react';
import { useLocalize } from '~/hooks';
interface BookmarkEmptyStateProps {
isFiltered?: boolean;
}
export default function BookmarkEmptyState({ isFiltered = false }: BookmarkEmptyStateProps) {
const localize = useLocalize();
return (
<div className="flex flex-col items-center justify-center py-8 text-center">
<div className="mb-3 rounded-full bg-surface-secondary p-3">
<Bookmark className="size-6 text-text-tertiary" aria-hidden="true" />
</div>
<p className="text-sm text-text-secondary">
{isFiltered ? localize('com_ui_no_bookmarks_match') : localize('com_ui_no_bookmarks')}
</p>
</div>
);
}