feat: add localized Library list prototype

.gitignore

@@ -3,7 +3,7 @@
 # Logs
 data-node
 meili_data*
-data/
+/data/
 logs
 *.log
 

client/src/components/Library/LibraryEmptyState.tsx

@@ -0,0 +1,68 @@
+import type { ReactNode } from 'react';
+import type { LucideIcon } from 'lucide-react';
+import { FolderOpen, SearchX } from 'lucide-react';
+import { useLocalize } from '~/hooks';
+
+interface LibraryEmptyStateProps {
+  /** True when filters/search produced no matches but the library has items. */
+  isFiltered?: boolean;
+  onClearFilters?: () => void;
+}
+
+interface EmptyStateLayoutProps {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  children?: ReactNode;
+}
+
+function EmptyStateLayout({ icon: Icon, title, description, children }: EmptyStateLayoutProps) {
+  return (
+    <div
+      className="flex flex-col items-center justify-center rounded-xl border border-border-light bg-transparent px-6 py-12 text-center"
+      role="status"
+    >
+      <div className="mb-3 flex size-12 items-center justify-center rounded-full bg-surface-tertiary">
+        <Icon className="size-6 text-text-secondary" aria-hidden="true" />
+      </div>
+      <p className="text-sm font-medium text-text-primary">{title}</p>
+      <p className="mt-1 max-w-sm text-xs text-text-secondary">{description}</p>
+      {children}
+    </div>
+  );
+}
+
+export default function LibraryEmptyState({
+  isFiltered = false,
+  onClearFilters,
+}: LibraryEmptyStateProps) {
+  const localize = useLocalize();
+
+  if (isFiltered) {
+    return (
+      <EmptyStateLayout
+        icon={SearchX}
+        title={localize('com_ui_library_no_matches_title')}
+        description={localize('com_ui_library_no_matches_description')}
+      >
+        {onClearFilters && (
+          <button
+            type="button"
+            onClick={onClearFilters}
+            className="mt-4 rounded-lg border border-border-medium px-4 py-2 text-xs font-medium text-text-primary transition-colors hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {localize('com_ui_library_clear_filters')}
+          </button>
+        )}
+      </EmptyStateLayout>
+    );
+  }
+
+  return (
+    <EmptyStateLayout
+      icon={FolderOpen}
+      title={localize('com_ui_library_empty_title')}
+      description={localize('com_ui_library_empty_description')}
+    />
+  );
+}

client/src/components/Library/LibraryErrorState.tsx

@@ -0,0 +1,41 @@
+import { AlertCircle } from 'lucide-react';
+import { Button } from '@librechat/client';
+import { useLocalize } from '~/hooks';
+
+interface LibraryErrorStateProps {
+  message?: string;
+  onRetry?: () => void;
+}
+
+export default function LibraryErrorState({ message, onRetry }: LibraryErrorStateProps) {
+  const localize = useLocalize();
+  const displayMessage = message ?? localize('com_ui_library_error_default');
+
+  return (
+    <div
+      className="flex flex-col items-center justify-center rounded-xl border border-border-light px-6 py-12 text-center"
+      role="alert"
+      aria-live="assertive"
+    >
+      <div className="mb-3 flex size-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/20">
+        <AlertCircle className="size-6 text-red-600 dark:text-red-400" aria-hidden="true" />
+      </div>
+      <p className="text-sm font-medium text-text-primary">
+        {localize('com_ui_library_error_title')}
+      </p>
+      <p className="mt-1 max-w-sm text-xs text-text-secondary">{displayMessage}</p>
+      {onRetry && (
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={onRetry}
+          className="mt-4"
+          aria-label={localize('com_ui_library_try_again')}
+        >
+          {localize('com_ui_library_try_again')}
+        </Button>
+      )}
+    </div>
+  );
+}

client/src/components/Library/LibraryFilters.tsx

@@ -0,0 +1,156 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type Dispatch,
+  type SetStateAction,
+} from 'react';
+import { Search } from 'lucide-react';
+import { CrossIcon } from '@librechat/client';
+import { Input, SelectDropDown } from '@librechat/client';
+import type { LibraryFiltersState, LibraryViewMode } from '~/types/library';
+import { useDebounce, useLocalize } from '~/hooks';
+import { createDropdownSetter } from '~/utils';
+import {
+  findLibraryOption,
+  createLibrarySortOptions,
+  createLibraryTypeFilterOptions,
+  parseLibrarySortOption,
+  parseLibraryTypeFilter,
+} from './libraryUtils';
+import LibraryViewToggle from './LibraryViewToggle';
+
+interface LibraryFiltersProps {
+  filters: LibraryFiltersState;
+  onFiltersChange: Dispatch<SetStateAction<LibraryFiltersState>>;
+  resultCount: number;
+  totalCount: number;
+  viewMode: LibraryViewMode;
+  onViewModeChange: (mode: LibraryViewMode) => void;
+}
+
+export default function LibraryFilters({
+  filters,
+  onFiltersChange,
+  resultCount,
+  totalCount,
+  viewMode,
+  onViewModeChange,
+}: LibraryFiltersProps) {
+  const localize = useLocalize();
+  const [searchInput, setSearchInput] = useState(filters.search);
+  const debouncedSearch = useDebounce(searchInput, 300);
+
+  useEffect(() => {
+    setSearchInput(filters.search);
+  }, [filters.search]);
+
+  useEffect(() => {
+    if (debouncedSearch !== filters.search && debouncedSearch === searchInput) {
+      onFiltersChange((prev) => ({ ...prev, search: debouncedSearch }));
+    }
+  }, [debouncedSearch, filters.search, onFiltersChange, searchInput]);
+
+  const handleClearSearch = useCallback(() => {
+    setSearchInput('');
+    onFiltersChange((prev) => ({ ...prev, search: '' }));
+  }, [onFiltersChange]);
+
+  const typeFilterOptions = useMemo(() => createLibraryTypeFilterOptions(localize), [localize]);
+  const sortOptions = useMemo(() => createLibrarySortOptions(localize), [localize]);
+
+  const selectedTypeOption = findLibraryOption(typeFilterOptions, filters.typeFilter);
+
+  const selectedSortOption = findLibraryOption(sortOptions, filters.sortBy);
+
+  const handleTypeChange = useMemo(
+    () =>
+      createDropdownSetter((value) => {
+        const typeFilter = parseLibraryTypeFilter(value);
+        onFiltersChange((prev) =>
+          prev.typeFilter === typeFilter ? prev : { ...prev, typeFilter },
+        );
+      }),
+    [onFiltersChange],
+  );
+
+  const handleSortChange = useMemo(
+    () =>
+      createDropdownSetter((value) => {
+        const sortBy = parseLibrarySortOption(value);
+        onFiltersChange((prev) => (prev.sortBy === sortBy ? prev : { ...prev, sortBy }));
+      }),
+    [onFiltersChange],
+  );
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
+        <div className="relative min-w-0 flex-1" role="search">
+          <label htmlFor="library-search" className="sr-only">
+            {localize('com_ui_library_search')}
+          </label>
+          <Input
+            id="library-search"
+            type="search"
+            value={searchInput}
+            onChange={(event) => setSearchInput(event.target.value)}
+            placeholder={localize('com_ui_library_search_placeholder')}
+            className="h-10 rounded-lg border-border-medium bg-transparent pl-10 pr-10 text-sm text-text-primary placeholder:text-text-secondary focus:ring-0"
+            aria-label={localize('com_ui_library_search')}
+            autoComplete="off"
+            spellCheck={false}
+          />
+          <Search
+            className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-text-secondary"
+            aria-hidden="true"
+          />
+          {searchInput && (
+            <button
+              type="button"
+              onClick={handleClearSearch}
+              className="absolute right-3 top-1/2 flex size-5 -translate-y-1/2 items-center justify-center rounded-full text-text-secondary transition-colors hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              aria-label={localize('com_ui_clear_search')}
+            >
+              <CrossIcon className="size-4" aria-hidden="true" />
+            </button>
+          )}
+        </div>
+
+        <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+          <div role="group" aria-label={localize('com_ui_library_filter_by_type')}>
+            <SelectDropDown
+              title={localize('com_ui_library_filter_by_type')}
+              value={selectedTypeOption}
+              setValue={handleTypeChange}
+              availableValues={typeFilterOptions}
+              showAbove={false}
+              showLabel={false}
+              className="h-10 min-w-[9rem] rounded-lg text-sm"
+            />
+          </div>
+          <div role="group" aria-label={localize('com_ui_library_sort_items')}>
+            <SelectDropDown
+              title={localize('com_ui_library_sort_items')}
+              value={selectedSortOption}
+              setValue={handleSortChange}
+              availableValues={sortOptions}
+              showAbove={false}
+              showLabel={false}
+              className="h-10 min-w-[9rem] rounded-lg text-sm"
+            />
+          </div>
+          <LibraryViewToggle viewMode={viewMode} onViewModeChange={onViewModeChange} />
+        </div>
+      </div>
+
+      <p className="text-xs text-text-secondary" aria-live="polite">
+        {localize(
+          totalCount === 1 ? 'com_ui_library_items_count_one' : 'com_ui_library_items_count_other',
+          { resultCount, totalCount },
+        )}
+      </p>
+    </div>
+  );
+}

client/src/components/Library/LibraryItemActions.tsx

@@ -0,0 +1,75 @@
+import { Download, ExternalLink, MoreVertical, Share2 } from 'lucide-react';
+import { useLocalize } from '~/hooks';
+import { cn } from '~/utils';
+
+interface LibraryItemActionsProps {
+  onOpen?: () => void;
+  onDownload?: () => void;
+  onShare?: () => void;
+  onMore?: () => void;
+  className?: string;
+}
+
+export default function LibraryItemActions({
+  onOpen,
+  onDownload,
+  onShare,
+  onMore,
+  className,
+}: LibraryItemActionsProps) {
+  const localize = useLocalize();
+
+  if (!onOpen && !onDownload && !onShare && !onMore) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn('flex items-center gap-0.5', className)}
+      onClick={(event) => event.stopPropagation()}
+      role="group"
+      aria-label={localize('com_ui_library_quick_actions')}
+    >
+      {onOpen && (
+        <button
+          type="button"
+          onClick={onOpen}
+          className="inline-flex size-7 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-surface-tertiary hover:text-green-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          aria-label={localize('com_ui_library_open')}
+        >
+          <ExternalLink className="size-4" aria-hidden="true" />
+        </button>
+      )}
+      {onDownload && (
+        <button
+          type="button"
+          onClick={onDownload}
+          className="inline-flex size-7 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-surface-tertiary hover:text-green-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          aria-label={localize('com_ui_download')}
+        >
+          <Download className="size-4" aria-hidden="true" />
+        </button>
+      )}
+      {onShare && (
+        <button
+          type="button"
+          onClick={onShare}
+          className="inline-flex size-7 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-surface-tertiary hover:text-green-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          aria-label={localize('com_ui_share')}
+        >
+          <Share2 className="size-4" aria-hidden="true" />
+        </button>
+      )}
+      {onMore && (
+        <button
+          type="button"
+          onClick={onMore}
+          className="inline-flex size-7 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-surface-tertiary hover:text-green-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          aria-label={localize('com_ui_library_more_options')}
+        >
+          <MoreVertical className="size-4" aria-hidden="true" />
+        </button>
+      )}
+    </div>
+  );
+}