WIP humata like UX

src/Home.module.css

+/* There is no real nav disable mecanism so we fake it */
+.nav-disabled>a {
+    pointer-events: none;
+    cursor: default;
+    opacity: 0.6;
+}
\ No newline at end of file

src/Home.tsx

@@ -3,10 +3,13 @@ import { fr } from "@codegouvfr/react-dsfr";
 import { cx } from "@codegouvfr/react-dsfr/tools/cx";
 import { Highlight } from "@codegouvfr/react-dsfr/Highlight";
 
+import styles from "@/Home.module.css";
 import PdfViewerComponent from "@/components/PdfViewerComponent";
 import ViewerSidePanel from "@/components/ViewerSidePanel";
 import { LiriaeDocument } from "@/shared/types";
 import { useAuthContext } from "@/components/AuthProvider";
+import { TabComponent } from "@/components/TabComponent";
+import { SimpleChat } from "./components/SimpleChat";
 
 export function Home({
   onFullScreen,
@@ -19,8 +22,13 @@ export function Home({
     null
   );
   const [initialPageNum, setInitialPageNum] = useState(0);
-  const { currentCollection, isProcessingServiceAvailable, liriaeDocuments } =
-    useAuthContext();
+  const {
+    currentCollection,
+    isProcessingServiceAvailable,
+    liriaeDocuments,
+    userCollections,
+    isChatRequestRunning,
+  } = useAuthContext();
 
   useEffect(() => {
     if (currentDocument) {
@@ -40,7 +48,7 @@ export function Home({
 
   if (!currentCollection) {
     return (
-      <div className={cx(fr.cx("fr-container"), fr.cx("fr-p-32v"))}>
+      <div className={cx(fr.cx("fr-p-32v"))}>
         Impossible de créer ou récupérer une collection. Essayez d'en créer une
         dans le panel d'administration.
       </div>
@@ -65,13 +73,52 @@ export function Home({
           isFullScreen ? fr.cx("fr-grid-row", "fr-ml-4v") : fr.cx("fr-grid-row")
         }
       >
-        <div className={fr.cx("fr-col-2")}>
-          <ViewerSidePanel
-            selectedDocument={currentDocument}
-            onSelection={onDocumentSelected}
+        <div className={fr.cx("fr-col-4")}>
+          <TabComponent
+            tabs={[
+              {
+                isActive: location.pathname.includes("/documents")
+                  ? true
+                  : false,
+                className:
+                  userCollections?.length === 0 ||
+                  isChatRequestRunning ||
+                  !currentCollection
+                    ? styles["nav-disabled"]
+                    : "",
+                linkProps: {
+                  to: currentCollection
+                    ? `/collection/${currentCollection?.id}/documents`
+                    : "/collections",
+                  target: "_self",
+                },
+                text: "Lecture",
+                content: (
+                  <ViewerSidePanel
+                    selectedDocument={currentDocument}
+                    onSelection={onDocumentSelected}
+                  />
+                ),
+              },
+              {
+                isActive: location.pathname.includes("/chat") ? true : false,
+                className:
+                  userCollections?.length === 0 || !currentCollection
+                    ? styles["nav-disabled"]
+                    : "",
+                linkProps: {
+                  to: currentCollection
+                    ? `/collection/${currentCollection.id}/chat`
+                    : "/collections",
+                  target: "_self",
+                },
+                text: "Conversation",
+                content: <SimpleChat/>,
+              },
+            ]}
           />
         </div>
-        <div className={fr.cx("fr-col-10")}>
+        <div className={fr.cx("fr-col-8")}>
           <div className="PDF-viewer">
             {currentDocument ? (
               <PdfViewerComponent
@@ -81,7 +128,7 @@ export function Home({
                 initialPageNum={initialPageNum}
               />
             ) : (
-              <div className={cx(fr.cx("fr-container"), fr.cx("fr-p-32v"))}>
+              <div className={cx(fr.cx("fr-p-32v"))}>
                 Veuillez cliquer sur un document ou en ajouter un.
               </div>
             )}

src/components/TabComponent.tsx

+import React, { ReactElement, useState } from "react";
+import {
+  BrowserRouter as Router,
+  Route,
+  Routes,
+  NavLink,
+  useLocation,
+  LinkProps,
+} from "react-router-dom";
+
+type Tab = {
+  isActive: boolean;
+  className: string;
+  linkProps: LinkProps;
+  text: string;
+  content: ReactElement;
+};
+
+export const TabComponent = ({ tabs }: { tabs: Tab[] }) => {
+  const location = useLocation();
+
+  const [activeTabIndex, setActiveTabIndex] = useState(0);
+
+  const handleTabClick = (index: number) => {
+    setActiveTabIndex(index);
+  };
+
+  return (
+    <div>
+      <nav className="fr-nav" role="navigation" data-fr-js-navigation="true">
+        <ul className="fr-nav__list">
+          {tabs.map((tab, index) => (
+            <li
+              key={index}
+              className={`fr-nav__item ${tab.className}`}
+              data-fr-js-navigation-item="true"
+            >
+              <a
+                id={`fr-header-main-navigation-link-${index}`}
+                className={`fr-nav__link ${
+                  activeTabIndex === index ? "active" : ""
+                }`}
+                href="#"
+                onClick={(e) => {
+                  e.preventDefault();
+                  handleTabClick(index);
+                }}
+                data-discover="true"
+                aria-current={tab.isActive && "page"}
+              >
+                {tab.text}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </nav>
+
+      <div>{tabs[activeTabIndex].content}</div>
+    </div>
+  );
+};

src/components/ViewerSidePanel.tsx

@@ -113,6 +113,7 @@ export default function ViewerSidePanel({
             title: "Erreur",
           });
           setIsUploading(false);
+          setUploadPercentage("0");
         },
         onProgress: function (bytesUploaded, bytesTotal) {
           const tusFile = tusFiles.find((f) => f.fileName === file.name);
@@ -141,11 +142,13 @@ export default function ViewerSidePanel({
           } else {
             console.log("Can't find document in success");
             setIsUploading(false);
+            setUploadPercentage("0");
           }
 
           const allFinish = tusFiles.every((f) => f.finish);
           if (allFinish) {
             setIsUploading(false);
+            setUploadPercentage("0");
           }
 
           const res = await fetch(

src/main.module.css

@@ -4,15 +4,9 @@
 }
 
 .main {
-    margin: auto;
-    max-width: 1600px;
+    /* margin-left: 1rem;
+    margin-right: 1rem; */
+    max-width: auto;
     padding-bottom: 10v;
     padding-top: 10v;
 }
-
-/* There is no real nav disable mecanism so we fake it */
-.nav-disabled>a {
-    pointer-events: none;
-    cursor: default;
-    opacity: 0.6;
-}
\ No newline at end of file