🗨️ fix: Prompts Pagination (#9385)

* 🗨️ fix: Prompts Pagination

* ci: Simplify user middleware setup in prompt tests

client/src/components/Prompts/Groups/FilterPrompts.tsx

@@ -11,9 +11,9 @@ import store from '~/store';
 
 export default function FilterPrompts({ className = '' }: { className?: string }) {
   const localize = useLocalize();
-  const { setName } = usePromptGroupsContext();
+  const { name, setName } = usePromptGroupsContext();
   const { categories } = useCategories('h-4 w-4');
-  const [displayName, setDisplayName] = useState('');
+  const [displayName, setDisplayName] = useState(name || '');
   const [isSearching, setIsSearching] = useState(false);
   const [categoryFilter, setCategory] = useRecoilState(store.promptsCategory);
 
@@ -60,13 +60,26 @@ export default function FilterPrompts({ className = '' }: { className?: string }
     [setCategory],
   );
 
+  // Sync displayName with name prop when it changes externally
   useEffect(() => {
+    setDisplayName(name || '');
+  }, [name]);
+
+  useEffect(() => {
+    if (displayName === '') {
+      // Clear immediately when empty
+      setName('');
+      setIsSearching(false);
+      return;
+    }
+
     setIsSearching(true);
     const timeout = setTimeout(() => {
       setIsSearching(false);
+      setName(displayName); // Debounced setName call
     }, 500);
     return () => clearTimeout(timeout);
-  }, [displayName]);
+  }, [displayName, setName]);
 
   return (
     <div className={cn('flex w-full gap-2 text-text-primary', className)}>
@@ -84,7 +97,6 @@ export default function FilterPrompts({ className = '' }: { className?: string }
         value={displayName}
         onChange={(e) => {
           setDisplayName(e.target.value);
-          setName(e.target.value);
         }}
         isSearching={isSearching}
         placeholder={localize('com_ui_filter_prompts_name')}

client/src/components/Prompts/Groups/GroupSidePanel.tsx

@@ -1,10 +1,10 @@
 import { useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useMediaQuery } from '@librechat/client';
-import PanelNavigation from '~/components/Prompts/Groups/PanelNavigation';
 import ManagePrompts from '~/components/Prompts/ManagePrompts';
 import { usePromptGroupsContext } from '~/Providers';
 import List from '~/components/Prompts/Groups/List';
+import PanelNavigation from './PanelNavigation';
 import { cn } from '~/utils';
 
 export default function GroupSidePanel({
@@ -19,38 +19,33 @@ export default function GroupSidePanel({
   const location = useLocation();
   const isSmallerScreen = useMediaQuery('(max-width: 1024px)');
   const isChatRoute = useMemo(() => location.pathname?.startsWith('/c/'), [location.pathname]);
-  const {
-    nextPage,
-    prevPage,
-    isFetching,
-    hasNextPage,
-    groupsQuery,
-    promptGroups,
-    hasPreviousPage,
-  } = usePromptGroupsContext();
+
+  const { promptGroups, groupsQuery, nextPage, prevPage, hasNextPage, hasPreviousPage } =
+    usePromptGroupsContext();
 
   return (
     <div
       className={cn(
-        'mr-2 flex h-auto w-auto min-w-72 flex-col gap-2 lg:w-1/4 xl:w-1/4',
+        'flex h-full w-full flex-col gap-2 md:mr-2 md:w-auto md:min-w-72 lg:w-1/4 xl:w-1/4',
         isDetailView === true && isSmallerScreen ? 'hidden' : '',
         className,
       )}
     >
       {children}
-      <div className="flex-grow overflow-y-auto">
+      <div className={cn('flex-grow overflow-y-auto', isChatRoute ? '' : 'px-2 md:px-0')}>
         <List groups={promptGroups} isChatRoute={isChatRoute} isLoading={!!groupsQuery.isLoading} />
       </div>
-      <div className="flex items-center justify-between">
-        {isChatRoute && <ManagePrompts className="select-none" />}
+      <div className={cn(isChatRoute ? '' : 'px-2 pb-3 pt-2 md:px-0')}>
         <PanelNavigation
-          nextPage={nextPage}
-          prevPage={prevPage}
-          isFetching={isFetching}
+          onPrevious={prevPage}
+          onNext={nextPage}
           hasNextPage={hasNextPage}
-          isChatRoute={isChatRoute}
           hasPreviousPage={hasPreviousPage}
-        />
+          isLoading={groupsQuery.isFetching}
+          isChatRoute={isChatRoute}
+        >
+          {isChatRoute && <ManagePrompts className="select-none" />}
+        </PanelNavigation>
       </div>
     </div>
   );

client/src/components/Prompts/Groups/PanelNavigation.tsx

@@ -3,42 +3,51 @@ import { Button, ThemeSelector } from '@librechat/client';
 import { useLocalize } from '~/hooks';
 
 function PanelNavigation({
-  prevPage,
-  nextPage,
-  hasPreviousPage,
+  onPrevious,
+  onNext,
   hasNextPage,
-  isFetching,
+  hasPreviousPage,
+  isLoading,
   isChatRoute,
+  children,
 }: {
-  prevPage: () => void;
-  nextPage: () => void;
+  onPrevious: () => void;
+  onNext: () => void;
   hasNextPage: boolean;
   hasPreviousPage: boolean;
-  isFetching: boolean;
+  isLoading?: boolean;
   isChatRoute: boolean;
+  children?: React.ReactNode;
 }) {
   const localize = useLocalize();
+
   return (
-    <>
-      <div className="flex gap-2">{!isChatRoute && <ThemeSelector returnThemeOnly={true} />}</div>
-      <div
-        className="flex items-center justify-between gap-2"
-        role="navigation"
-        aria-label="Pagination"
-      >
-        <Button variant="outline" size="sm" onClick={() => prevPage()} disabled={!hasPreviousPage}>
+    <div className="flex items-center justify-between">
+      <div className="flex gap-2">
+        {!isChatRoute && <ThemeSelector returnThemeOnly={true} />}
+        {children}
+      </div>
+      <div className="flex items-center gap-2" role="navigation" aria-label="Pagination">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onPrevious}
+          disabled={!hasPreviousPage || isLoading}
+          aria-label={localize('com_ui_prev')}
+        >
           {localize('com_ui_prev')}
         </Button>
         <Button
           variant="outline"
           size="sm"
-          onClick={() => nextPage()}
-          disabled={!hasNextPage || isFetching}
+          onClick={onNext}
+          disabled={!hasNextPage || isLoading}
+          aria-label={localize('com_ui_next')}
         >
           {localize('com_ui_next')}
         </Button>
       </div>
-    </>
+    </div>
   );
 }
 

client/src/components/Prompts/PromptsAccordion.tsx

@@ -8,7 +8,7 @@ export default function PromptsAccordion() {
   return (
     <div className="flex h-full w-full flex-col">
       <PromptSidePanel className="mt-2 space-y-2 lg:w-full xl:w-full" {...groupsNav}>
-        <FilterPrompts setName={groupsNav.setName} className="items-center justify-center" />
+        <FilterPrompts className="items-center justify-center" />
         <div className="flex w-full flex-row items-center justify-end">
           <AutoSendPrompt className="text-xs dark:text-white" />
         </div>

client/src/components/Prompts/PromptsView.tsx

@@ -39,7 +39,7 @@ export default function PromptsView() {
         <DashBreadcrumb />
         <div className="flex w-full flex-grow flex-row divide-x overflow-hidden dark:divide-gray-600">
           <GroupSidePanel isDetailView={isDetailView}>
-            <div className="mx-2 mt-1 flex flex-row items-center justify-between">
+            <div className="mt-1 flex flex-row items-center justify-between px-2 md:px-2">
               <FilterPrompts />
             </div>
           </GroupSidePanel>