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/tab/components/Tab.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 
 type OwnProps = {
   title: string;
+  icon?: React.ReactNode;
   active?: boolean;
   className?: string;
   onClick?: () => void;
@@ -28,10 +29,16 @@ const StyledTab = styled.div<{ active?: boolean }>`
   }
 `;
 
-export function Tab({ title, active = false, onClick, className }: OwnProps) {
+export function Tab({
+  title,
+  icon,
+  active = false,
+  onClick,
+  className,
+}: OwnProps) {
   return (
     <StyledTab onClick={onClick} active={active} className={className}>
-      {title}
+      {icon} {title}
     </StyledTab>
   );
 }

front/src/modules/ui/tab/components/TabList.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+
+import { activeTabIdScopedState } from '../states/activeTabIdScopedState';
+
+import { Tab } from './Tab';
+
+type SingleTabProps = {
+  title: string;
+  icon?: React.ReactNode;
+  id: string;
+};
+
+type OwnProps = {
+  tabs: SingleTabProps[];
+  context: React.Context<string | null>;
+};
+
+export function TabList({ tabs, context }: OwnProps) {
+  const initialActiveTabId = tabs[0].id;
+
+  const [activeTabId, setActiveTabId] = useRecoilScopedState(
+    activeTabIdScopedState,
+    context,
+  );
+
+  React.useEffect(() => {
+    setActiveTabId(initialActiveTabId);
+  }, [initialActiveTabId, setActiveTabId]);
+
+  return (
+    <>
+      {tabs.map((tab) => (
+        <Tab
+          key={tab.id}
+          title={tab.title}
+          icon={tab.icon}
+          active={tab.id === activeTabId}
+          onClick={() => {
+            setActiveTabId(tab.id);
+          }}
+        />
+      ))}
+    </>
+  );
+}

front/src/modules/ui/tab/components/__stories__/Tab.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { IconCheckbox } from '@tabler/icons-react';
 
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
@@ -22,7 +23,7 @@ export const Default: Story = {
 };
 
 export const Catalog: Story = {
-  args: { title: 'Tab title' },
+  args: { title: 'Tab title', icon: <IconCheckbox /> },
   argTypes: {
     active: { control: false },
     onClick: { control: false },

front/src/modules/ui/tab/states/activeTabIdScopedState.ts

@@ -0,0 +1,6 @@
+import { atomFamily } from 'recoil';
+
+export const activeTabIdScopedState = atomFamily<string | null, string>({
+  key: 'activeTabIdScopedState',
+  default: null,
+});