refactor(Nav): improve toggle animation, refactor to TS (#755)

* style(Nav): match transition effect of official site

* fix(Pages): fix bug when searchResults pageSize is < prev PageSize causes currentPage to be impossible value

* refactor/fix(Nav): fix width transition animation and refactor to TS

client/src/components/Conversations/Pages.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { PagesProps } from 'librechat-data-provider';
+
+export default function Pages({
+  pageNumber,
+  pages,
+  nextPage,
+  previousPage,
+  setPageNumber,
+}: PagesProps) {
+  const clickHandler =
+    (func: () => Promise<void>) => async (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+      await func();
+    };
+
+  if (pageNumber > pages) {
+    setPageNumber(pages);
+  }
+
+  return pageNumber == 1 && pages == 1 ? null : (
+    <div className="m-auto mb-2 mt-4 flex items-center justify-center gap-2">
+      <button
+        onClick={clickHandler(previousPage)}
+        className={
+          'btn btn-small bg-transition m-auto flex gap-2 transition hover:bg-gray-800 disabled:text-gray-300 dark:text-white dark:disabled:text-gray-400' +
+          (pageNumber <= 1 ? ' hidden-visibility' : '')
+        }
+        disabled={pageNumber <= 1}
+      >
+        &lt;&lt;
+      </button>
+      <span className="flex-none text-gray-400">
+        {pageNumber} / {pages}
+      </span>
+      <button
+        onClick={clickHandler(nextPage)}
+        className={
+          'btn btn-small bg-transition m-auto flex gap-2 transition hover:bg-gray-800 disabled:text-gray-300 dark:text-white dark:disabled:text-gray-400' +
+          (pageNumber >= pages ? ' hidden-visibility' : '')
+        }
+        disabled={pageNumber >= pages}
+      >
+        &gt;&gt;
+      </button>
+    </div>
+  );
+}