Merge branch 'v2-workspace-document' into v2-workspace

frontend/src/components/DocumentPaginator/index.tsx

@@ -1,3 +1,4 @@
+import { CaretDown } from '@phosphor-icons/react';
 import { numberWithCommas } from '../../utils/numbers';
 
 function generatePageItems(total: number, current: number) {
@@ -30,17 +31,37 @@ export default function DocumentListPagination({
   gotoPage,
 }: IPaginationProps) {
   const pageItems = generatePageItems(pageCount, currentPage);
+
+  const hasPrevious = currentPage > 1;
+  const hasNext = currentPage < pageCount;
+
+  const goToPrevious = () => {
+    if (currentPage > 1) gotoPage(currentPage - 1);
+  };
+
+  const goToNext = () => {
+    if (currentPage < pageCount) gotoPage(currentPage + 1);
+  };
+
   return (
-    <div className="my-4 flex justify-center">
+    <div className="my-4 mb-8 flex justify-center">
+      {hasPrevious && (
+        <button
+          onClick={goToPrevious}
+          className="rotate-90 px-2 text-white/20 transition-all duration-300 hover:text-sky-400"
+        >
+          <CaretDown size={20} weight="bold" />
+        </button>
+      )}
       <ul className="pagination pagination-sm">
         {pageItems.map((item, i) =>
           typeof item === 'number' ? (
             <button
               key={item}
-              className={`border px-3 py-2 text-sm ${
+              className={`border px-3 py-2 text-sm transition-all duration-300 hover:border-sky-400 hover:bg-sky-400/20 ${
                 currentPage === item
-                  ? 'border-blue-500 text-blue-500'
-                  : 'border-gray-300 text-gray-500'
+                  ? 'border-sky-400 bg-sky-400 bg-opacity-20 text-white'
+                  : 'border-white border-opacity-20 text-white text-opacity-60'
               } ${i === 0 ? 'rounded-l-lg' : ''} ${
                 i === pageItems.length - 1 ? 'rounded-r-lg' : ''
               }`}
@@ -51,13 +72,21 @@ export default function DocumentListPagination({
           ) : (
             <button
               key={item}
-              className={`border border-gray-300 px-3 py-2 text-sm text-gray-500`}
+              className={`border border-white border-opacity-20 px-3 py-2 text-sm text-gray-500`}
             >
               ...
             </button>
           )
         )}
       </ul>
+      {hasNext && (
+        <button
+          onClick={goToNext}
+          className="-rotate-90 px-2 text-white/20 transition-all duration-300 hover:text-sky-400"
+        >
+          <CaretDown size={20} weight="bold" />
+        </button>
+      )}
     </div>
   );
 }

frontend/src/pages/DocumentView/FragmentList/index.tsx

@@ -64,7 +64,10 @@ export default function FragmentList({
   }, [document, currentPage]);
   return (
     <>
-      <div className="max-h-[100vh] bg-main">
+      <div
+        className="flex h-screen flex-col overflow-hidden bg-main transition-all duration-300"
+        style={{ height: `calc(100vh - ${searchMode ? '130px' : '100px'})` }}
+      >
         <div className="">
           <div className="flex flex-col">
             <div className="mb-6 flex w-full items-center justify-between gap-x-12">
@@ -89,7 +92,7 @@ export default function FragmentList({
           </div>
         </div>
 
-        <div className="h-full flex-grow overflow-y-auto rounded-xl border-2 border-white/20 bg-main">
+        <div className="flex-grow overflow-y-auto rounded-xl border-2 border-white/20 bg-main">
           {loading || searching ? (
             <div className="flex h-full w-full items-center justify-center">
               <div className="flex flex-col items-center justify-center gap-y-4 text-center">
@@ -104,7 +107,7 @@ export default function FragmentList({
             </div>
           ) : (
             <table className="w-full rounded-xl text-left text-xs font-medium text-white text-opacity-80">
-              <thead>
+              <thead className="sticky top-0 w-full bg-main">
                 <tr className="mt-10">
                   <th
                     scope="col"
@@ -124,6 +127,12 @@ export default function FragmentList({
                   >
                     Metadata
                   </th>
+                  <th
+                    scope="col"
+                    className="px-6 pb-2 pt-6 text-xs font-light text-white text-opacity-80"
+                  >
+                    {' '}
+                  </th>
                 </tr>
               </thead>
               <tbody>
@@ -144,7 +153,7 @@ export default function FragmentList({
               </tbody>
             </table>
           )}
-          {searchMode && searchFragments.length === 0 && (
+          {searchMode && searchFragments.length === 0 && !searching && (
             <div className="flex h-full w-full items-center justify-center">
               <div className="flex flex-col items-center justify-center gap-y-4 text-center">
                 <p className="text-white text-opacity-80">
@@ -154,7 +163,7 @@ export default function FragmentList({
               </div>
             </div>
           )}
-          {fragments.length === 0 && !searching && (
+          {!searchMode && fragments.length === 0 && !searching && !loading && (
             <div className="flex h-full w-full items-center justify-center">
               <div className="flex flex-col items-center justify-center gap-y-4 text-center">
                 <p className="text-white text-opacity-80">

frontend/src/pages/DocumentView/index.tsx

@@ -122,7 +122,7 @@ export default function DocumentView() {
       }
     >
       <div className="grid grid-cols-12">
-        <div className="col-span-12 xl:col-span-12">
+        <div className="col-span-12 h-screen bg-main xl:col-span-12">
           <FragmentList
             connector={connector}
             document={document}