feat: Add Library List UI with mocked data for issue #20

.gitignore

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

client/src/components/Library/LibraryEmptyState.tsx

@@ -0,0 +1,65 @@
+import type { ReactNode } from 'react';
+import type { LucideIcon } from 'lucide-react';
+import { FolderOpen, SearchX } from 'lucide-react';
+
+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) {
+  if (isFiltered) {
+    return (
+      <EmptyStateLayout
+        icon={SearchX}
+        title="No matching files"
+        description="Try adjusting your search or filter to find what you are looking for."
+      >
+        {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"
+          >
+            Clear filters
+          </button>
+        )}
+      </EmptyStateLayout>
+    );
+  }
+
+  return (
+    <EmptyStateLayout
+      icon={FolderOpen}
+      title="Your library is empty"
+      description="Files and artifacts from your conversations will appear here."
+    />
+  );
+}

client/src/components/Library/LibraryErrorState.tsx

@@ -0,0 +1,38 @@
+import { AlertCircle } from 'lucide-react';
+import { Button } from '@librechat/client';
+
+interface LibraryErrorStateProps {
+  message?: string;
+  onRetry?: () => void;
+}
+
+export default function LibraryErrorState({
+  message = 'Something went wrong while loading your library.',
+  onRetry,
+}: LibraryErrorStateProps) {
+  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">Unable to load library</p>
+      <p className="mt-1 max-w-sm text-xs text-text-secondary">{message}</p>
+      {onRetry && (
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={onRetry}
+          className="mt-4"
+          aria-label="Retry loading library"
+        >
+          Try again
+        </Button>
+      )}
+    </div>
+  );
+}

client/src/components/Library/LibraryFilters.tsx

@@ -0,0 +1,152 @@
+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 } from '~/hooks';
+import { createDropdownSetter } from '~/utils';
+import {
+  findLibraryOption,
+  LIBRARY_SORT_OPTIONS,
+  LIBRARY_TYPE_FILTER_OPTIONS,
+  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 [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 selectedTypeOption = findLibraryOption(LIBRARY_TYPE_FILTER_OPTIONS, filters.typeFilter);
+
+  const selectedSortOption = findLibraryOption(LIBRARY_SORT_OPTIONS, 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],
+  );
+
+  const itemLabel = totalCount === 1 ? 'item' : 'items';
+
+  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">
+          {/* eslint-disable-next-line i18next/no-literal-string */}
+          <label htmlFor="library-search" className="sr-only">
+            Search library
+          </label>
+          <Input
+            id="library-search"
+            type="search"
+            value={searchInput}
+            onChange={(event) => setSearchInput(event.target.value)}
+            placeholder="Search files and artifacts..."
+            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="Search library"
+            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="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="Filter by type">
+            <SelectDropDown
+              value={selectedTypeOption}
+              setValue={handleTypeChange}
+              availableValues={LIBRARY_TYPE_FILTER_OPTIONS}
+              showAbove={false}
+              showLabel={false}
+              className="h-10 min-w-[9rem] rounded-lg text-sm"
+            />
+          </div>
+          <div role="group" aria-label="Sort library items">
+            <SelectDropDown
+              value={selectedSortOption}
+              setValue={handleSortChange}
+              availableValues={LIBRARY_SORT_OPTIONS}
+              showAbove={false}
+              showLabel={false}
+              className="h-10 min-w-[9rem] rounded-lg text-sm"
+            />
+          </div>
+          <LibraryViewToggle viewMode={viewMode} onViewModeChange={onViewModeChange} />
+        </div>
+      </div>
+
+      {/* eslint-disable i18next/no-literal-string */}
+      <p className="text-xs text-text-secondary" aria-live="polite">
+        Showing {resultCount} of {totalCount} {itemLabel}
+      </p>
+      {/* eslint-enable i18next/no-literal-string */}
+    </div>
+  );
+}

client/src/components/Library/LibraryItemActions.tsx

@@ -0,0 +1,63 @@
+import { Download, ExternalLink, MoreVertical, Share2 } from 'lucide-react';
+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) {
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-0.5',
+        className,
+      )}
+      onClick={(event) => event.stopPropagation()}
+      role="group"
+      aria-label="Quick actions"
+    >
+      <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="Open"
+      >
+        <ExternalLink className="size-4" aria-hidden="true" />
+      </button>
+      <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="Download"
+      >
+        <Download className="size-4" aria-hidden="true" />
+      </button>
+      <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="Share"
+      >
+        <Share2 className="size-4" aria-hidden="true" />
+      </button>
+      <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="More options"
+      >
+        <MoreVertical className="size-4" aria-hidden="true" />
+      </button>
+    </div>
+  );
+}