Add tasks page (#1015)

* Refactor top bar component

* Add task page with tabs

* Add tasks

* Add logic for task status

* Fix isoweek definition

* Enable click on task

* Deduplicate component

* Lint

---------

Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>

front/src/modules/ui/table/table-header/components/TableHeader.tsx

@@ -6,6 +6,7 @@ import SortAndFilterBar from '@/ui/filter-n-sort/components/SortAndFilterBar';
 import { SortDropdownButton } from '@/ui/filter-n-sort/components/SortDropdownButton';
 import { FiltersHotkeyScope } from '@/ui/filter-n-sort/types/FiltersHotkeyScope';
 import { SelectedSortType, SortType } from '@/ui/filter-n-sort/types/interface';
+import { TopBar } from '@/ui/top-bar/TopBar';
 
 import { TableContext } from '../../states/TableContext';
 
@@ -16,23 +17,6 @@ type OwnProps<SortField> = {
   onSortsUpdate?: (sorts: Array<SelectedSortType<SortField>>) => void;
 };
 
-const StyledContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-const StyledTableHeader = styled.div`
-  align-items: center;
-  color: ${({ theme }) => theme.font.color.secondary};
-  display: flex;
-  flex-direction: row;
-  font-weight: ${({ theme }) => theme.font.weight.medium};
-  height: 40px;
-  justify-content: space-between;
-  padding-left: ${({ theme }) => theme.spacing(3)};
-  padding-right: ${({ theme }) => theme.spacing(2)};
-`;
-
 const StyledIcon = styled.div`
   display: flex;
   margin-left: ${({ theme }) => theme.spacing(1)};
@@ -43,16 +27,6 @@ const StyledIcon = styled.div`
   }
 `;
 
-const StyledViewSection = styled.div`
-  display: flex;
-`;
-
-const StyledFilters = styled.div`
-  display: flex;
-  font-weight: ${({ theme }) => theme.font.weight.regular};
-  gap: 2px;
-`;
-
 export function TableHeader<SortField>({
   viewName,
   viewIcon,
@@ -82,35 +56,37 @@ export function TableHeader<SortField>({
   );
 
   return (
-    <StyledContainer>
-      <StyledTableHeader>
-        <StyledViewSection>
+    <TopBar
+      leftComponent={
+        <>
           <StyledIcon>{viewIcon}</StyledIcon>
           {viewName}
-        </StyledViewSection>
-        <StyledFilters>
-          <FilterDropdownButton
-            context={TableContext}
-            HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
-          />
-          <SortDropdownButton<SortField>
-            isSortSelected={sorts.length > 0}
-            availableSorts={availableSorts || []}
-            onSortSelect={sortSelect}
-            HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
-          />
-        </StyledFilters>
-      </StyledTableHeader>
-      <SortAndFilterBar
-        context={TableContext}
-        sorts={sorts}
-        onRemoveSort={sortUnselect}
-        onCancelClick={() => {
-          innerSetSorts([]);
-          onSortsUpdate && onSortsUpdate([]);
-        }}
-      />
-    </StyledContainer>
+        </>
+      }
+      rightComponents={[
+        <FilterDropdownButton
+          context={TableContext}
+          HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
+        />,
+        <SortDropdownButton<SortField>
+          isSortSelected={sorts.length > 0}
+          availableSorts={availableSorts || []}
+          onSortSelect={sortSelect}
+          HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
+        />,
+      ]}
+      bottomComponent={
+        <SortAndFilterBar
+          context={TableContext}
+          sorts={sorts}
+          onRemoveSort={sortUnselect}
+          onCancelClick={() => {
+            innerSetSorts([]);
+            onSortsUpdate && onSortsUpdate([]);
+          }}
+        />
+      }
+    />
   );
 }