implement toolsbar in orthanc content

src/content/studies/StudyRoot.tsx

@@ -1,21 +1,30 @@
 import React, { useMemo, useState } from 'react';
+
+import { useDispatch } from 'react-redux';
 import { useCustomMutation } from '../../utils/reactQuery';
+import { useCustomToast } from '../../utils/toastify';
+import { Colors } from '../../utils';
+import { addStudyIdToDeleteList, addSeriesToExportList, addStudyIdToAnonymizeList } from '../../utils/actionsUtils';
+
 import { deleteStudy } from '../../services/orthanc';
+import { exportRessource } from '../../services/export';
+import { useConfirm } from '../../services/ConfirmContextProvider';
+
+import Patient from '../../model/Patient';
+
 import StudyTable from './StudyTable';
 import EditStudy from './EditStudy';
 import PreviewStudy from './PreviewStudy';
-import { useConfirm } from '../../services/ConfirmContextProvider';
-import { useCustomToast } from '../../utils/toastify';
-import Patient from '../../model/Patient';
 import AiStudy from './AiStudy';
-import { exportRessource } from '../../services/export';
-import { useDispatch } from 'react-redux';
-import { Button } from '../../ui';
-import { Colors } from '../../utils';
-import { addStudyIdToDeleteList, addSeriesToExportList, addStudyIdToAnonymizeList } from '../../utils/actionsUtils';
+
 import Toolsbar from '../../ui/Toolsbar';
+import { Button } from '../../ui';
 import { addStudyToAnonymizeList } from '../../reducers/AnonymizeSlice';
 
+import AnonIcon from '../../ui/AnonIcon';
+import { BsTrashFill as DeleteIcon } from "react-icons/bs";
+import { FaFileExport as ExportIcon } from "react-icons/fa";
+
 type StudyRootProps = {
     patient: Patient;
     onStudyUpdated: () => void;
@@ -28,14 +37,15 @@ const StudyRoot: React.FC<StudyRootProps> = ({ patient, onStudyUpdated, onStudyS
     const [aiStudyId, setAIStudyId] = useState<string | null>(null);
     const [previewStudyId, setPreviewStudyId] = useState<string | null>(null);
     const [selectedStudies, setSelectedStudies] = useState<{ [studyId: string]: boolean }>({});
-
+    const [isToolsbarVisible, setIsToolsbarVisible] = useState(true);
+
     const { confirm } = useConfirm();
     const { toastSuccess, toastError, updateExistingToast } = useCustomToast();
-    
+
     const studies = useMemo(() => {
         return patient.getStudies().map(study => study.toJSON());
     }, [patient]);
-    
+
     const { mutate: mutateDeleteStudy } = useCustomMutation<void, { id: string }>(
         ({ id }) => deleteStudy(id),
         [[]],
@@ -49,11 +59,11 @@ const StudyRoot: React.FC<StudyRootProps> = ({ patient, onStudyUpdated, onStudyS
             },
         }
     );
-    
+
     const handleRowClick = (studyId: string) => {
         onStudySelected && onStudySelected(studyId);
     };
-    
+
     const handleDeleteStudy = async (studyId: string) => {
         const confirmContent = (
             <div className="italic">
@@ -65,31 +75,31 @@ const StudyRoot: React.FC<StudyRootProps> = ({ patient, onStudyUpdated, onStudyS
             mutateDeleteStudy({ id: studyId });
         }
     };
-    
+
     const handlePreviewStudy = (studyId: string) => {
         setPreviewStudyId(studyId);
     };
-    
+
     const handleAIStudy = (studyId: string) => {
         setAIStudyId(studyId);
     };
-    
+
     const handleDownloadStudy = (studyId: string) => {
         const id = toastSuccess("Download started, follow progression in console");
-        exportRessource("studies", studyId, (mb) => updateExistingToast(id, "Downloaded " + mb + " mb"));
+        exportRessource("studies", studyId, (mb) => updateExistingToast(id, `Downloaded ${mb} mb`));
     };
-    
-    const handleRowSelectionChange = (selectedState) => {
+
+    const handleRowSelectionChange = (selectedState: { [studyId: string]: boolean }) => {
         setSelectedStudies(selectedState);
     };
-    
+
     const handleSendDeleteList = async () => {
         const studyIds = Object.keys(selectedStudies);
         for (const studyId of studyIds) {
             await addStudyIdToDeleteList(studyId);
         }
     };
-    
+
     const handleSendExportList = () => {
         const studyIds = Object.keys(selectedStudies);
         studyIds.forEach(studyId => {
@@ -131,7 +141,7 @@ const StudyRoot: React.FC<StudyRootProps> = ({ patient, onStudyUpdated, onStudyS
                 break;
         }
     };
-    
+
     const handleStudyEdit = () => {
         onStudyUpdated();
         setEditingStudy(null);
@@ -170,17 +180,35 @@ const StudyRoot: React.FC<StudyRootProps> = ({ patient, onStudyUpdated, onStudyS
                     />
                 )}
             </div>
-            <Toolsbar isSticky={true} className="fixed bottom-0 left-0 w-full py-2 bg-gray-100">
-                <Button color={Colors.danger} className="text-sm" onClick={handleSendDeleteList}>
-                    Send to delete
-                </Button>
-                <Button color={Colors.secondary} className="text-sm" onClick={handleSendExportList}>
-                    Send to Export
-                </Button>
-                <Button color={Colors.secondary} className="text-sm" onClick={handleSendAnonymizeList}>
-                    Send to Anonymize
-                </Button>
-            </Toolsbar>
+
+            {isToolsbarVisible && (
+                <Toolsbar isSticky={true} className="sticky bottom-0 flex items-center justify-center w-full bg-white">
+                    <Button
+                        color={Colors.danger}
+                        className="flex items-center mx-2 text-sm transition-transform duration-200 hover:scale-105"
+                        onClick={handleSendDeleteList}
+                    >
+                        <DeleteIcon className="text-xl" />
+                        <span className="ml-2">Send to delete</span>
+                    </Button>
+
+                    <Button
+                        color={Colors.secondary}
+                        className="flex items-center mx-2 text-sm transition-transform duration-200 hover:scale-105"
+                        onClick={handleSendExportList}
+                    >
+                        <ExportIcon className="text-xl" />
+                        <span className="ml-2">Send to Export</span>
+                    </Button>
+
+                    <Button // TODO: Add anonymize action
+                        className="flex items-center mx-2 text-sm transition-transform duration-200 bg-blue-700 hover:scale-105"
+                        onClick={handleSendAnonymizeList}>
+                        <AnonIcon className="text-xl" onClick={undefined} />
+                        <span className="ml-2">Send to Anonymize</span>
+                    </Button>
+                </Toolsbar>
+            )}
         </div>
     );
 };

src/ui/Toolsbar.tsx

@@ -1,15 +1,9 @@
-// src/ui/menu/Toolsbar.js
 import React from 'react';
 
 const Toolsbar = ({ children }) => {
     return (
-        <div
-            className="fixed bottom-0 left-0 z-50 flex items-center justify-between w-full p-4 transition-all duration-300 bg-white rounded-lg shadow-md"
-        >
-
-            <div className="flex items-center gap-2">
-                {children} {/* Include buttons or other elements */}
-            </div>
+        <div className="fixed flex items-center justify-center w-full h-16 max-w-5xl gap-10 mx-auto transition-all duration-300 bg-white shadow-xl bottom-4 rounded-xl"> 
+            {children}
         </div>
     );
 };

src/welcome/SignInForm.tsx

@@ -70,7 +70,7 @@ export const SignInForm = () => {
         <form onSubmit={handleSubmit} className="relative z-10 flex flex-col items-center w-full">
           <h1 className="mb-4 text-4xl font-semibold text-center text-dark">
             {t("titleSignInForm")} 
-          </h1>
+          </h1>)
           <p className="mb-10 text-lg text-center text-dark">
             Please Log in to your Account
           </p>

stories/Toolsbar.stories.tsx

@@ -1,22 +1,10 @@
-import { Meta, StoryObj } from '@storybook/react';
+// import { Meta, StoryObj } from '@storybook/react';
 
-import Toolsbar from '../src/ui/Toolsbar';
+// import Toolsbar from '../src/ui/Toolsbar';
 
-const meta: Meta<typeof Toolsbar> = {
-    title: 'GAELO FLOW UI/Toolsbar', // Corrected the title spelling
-    component: Toolsbar,
-    args: {
-        isToggled: false,
-    },
-    argTypes: {
-        isToggled: {
-            control: { type: "boolean" },
-        },
-    },
-    tags: ["autodocs"],
-};
 
-export default meta;
-type Story = StoryObj<typeof Toolsbar>;
 
-export const ToggleSwitchStory: Story = {}; // Corrected the story name spelling
+// export default meta;
+// type Story = StoryObj<typeof Toolsbar>;
+
+// export const ToggleSwitchStory: Story = {};