[FEAT] review and normailise title of the topBar

Signed-off-by: Edouard DUPIN <yui.heero@gmail.com>

front/src/scene/album/AlbumDetailPage.tsx

@@ -45,7 +45,7 @@ export const AlbumDetailPage = () => {
   if (!dataAlbum) {
     return (
       <>
-        <TopBar title="Album detail" />
+        <TopBar title="Album detail" titleLink="/album" />
         <PageLayoutInfoCenter>
           Fail to load artist id: {albumId}
         </PageLayoutInfoCenter>
@@ -54,7 +54,7 @@ export const AlbumDetailPage = () => {
   }
   return (
     <>
-      <TopBar title="Album detail">
+      <TopBar title="Album detail" titleLink="/album">
         <Button
           {...BUTTON_TOP_BAR_PROPERTY}
           onClick={() =>

front/src/scene/album/AlbumsPage.tsx

@@ -28,7 +28,7 @@ export const AlbumsPage = () => {
   if (isLoading) {
     return (
       <>
-        <TopBar title="All Albums" />
+        <TopBar title="All Albums" titleLink="/home" />
         <PageLayoutInfoCenter>No Album available</PageLayoutInfoCenter>
       </>
     );
@@ -36,7 +36,7 @@ export const AlbumsPage = () => {
 
   return (
     <>
-      <TopBar title="All Albums">
+      <TopBar title="All Albums" titleLink="/home">
         <SearchInput onChange={setFilterTitle} />
       </TopBar>
       <PageLayout>

front/src/scene/artist/ArtistAlbumDetailPage.tsx

@@ -55,33 +55,27 @@ export const ArtistAlbumDetailPage = () => {
   }
   return (
     <>
-      <TopBar title={dataArtist ? undefined : 'Album detail'}>
+      <TopBar
+        title={dataArtist ? dataArtist?.name : 'Album detail'}
+        titleLink={dataArtist ? `/artist/${dataArtist.id}` : undefined}
+        titleIcon={
+          <Covers
+            data={dataArtist?.covers}
+            size="35px"
+            borderRadius="full"
+            iconEmpty={<MdPerson />}
+          />
+        }
+      >
         {dataArtist && (
-          <>
+          <Button
-            <Button
+            {...BUTTON_TOP_BAR_PROPERTY}
-              {...BUTTON_TOP_BAR_PROPERTY}
+            onClick={() =>
-              marginRight="auto"
+              navigate(`/album/${albumId}/edit-album/${dataAlbum.id}`)
-              onClick={() => navigate(`/artist/${dataArtist.id}`)}
+            }
-            >
+          >
-              <Covers
+            <MdEdit />
-                data={dataArtist?.covers}
+          </Button>
-                size="35px"
-                borderRadius="full"
-                iconEmpty={<MdPerson />}
-              />
-              <Text fontSize="24px" fontWeight="bold">
-                {dataArtist?.name}
-              </Text>
-            </Button>
-            <Button
-              {...BUTTON_TOP_BAR_PROPERTY}
-              onClick={() =>
-                navigate(`/album/${albumId}/edit-album/${dataAlbum.id}`)
-              }
-            >
-              <MdEdit />
-            </Button>
-          </>
         )}
       </TopBar>
       <PageLayout>

front/src/scene/artist/ArtistDetailPage.tsx

@@ -32,7 +32,7 @@ export const ArtistDetailPage = () => {
   if (!dataArtist) {
     return (
       <>
-        <TopBar title="Artist detail" />
+        <TopBar title="Artists" titleLink="/artist" />
         <PageLayoutInfoCenter>
           Fail to load artist id: {artistId}
         </PageLayoutInfoCenter>
@@ -41,19 +41,12 @@ export const ArtistDetailPage = () => {
   }
   return (
     <>
-      <TopBar>
+      <TopBar
+        title="Artists"
+        titleLink="/artist/all"
+        titleIcon={<MdGroup height="full" />}
+      >
         <>
-          <Button
-            {...BUTTON_TOP_BAR_PROPERTY}
-            marginRight="auto"
-            onClick={() => navigate(`/artist/all`)}
-          >
-            <MdGroup height="full" />
-            <Text fontSize="24px" fontWeight="bold">
-              Artists
-            </Text>
-          </Button>
-
           <Button
             {...BUTTON_TOP_BAR_PROPERTY}
             onClick={() =>

front/src/scene/artist/ArtistsPage.tsx

@@ -63,7 +63,7 @@ export const ArtistsPage = () => {
 
   return (
     <>
-      <TopBar title="All artists">
+      <TopBar title="All artists" titleLink="/home">
         <SearchInput onChange={setFilterName} />
         <Tooltip.Root aria-label="Random play">
           <Button {...BUTTON_TOP_BAR_PROPERTY} onClick={onRandomPlay}>

front/src/scene/gender/GenderDetailPage.tsx

@@ -45,7 +45,7 @@ export const GenderDetailPage = () => {
   if (!dataGender) {
     return (
       <>
-        <TopBar title="Gender detail" />
+        <TopBar title="Gender detail" titleLink="/gender" />
         <PageLayoutInfoCenter>
           Fail to load artist id: {genderId}
         </PageLayoutInfoCenter>
@@ -54,7 +54,7 @@ export const GenderDetailPage = () => {
   }
   return (
     <>
-      <TopBar title="Gender detail">
+      <TopBar title="Gender detail" titleLink="/gender">
         <Button
           {...BUTTON_TOP_BAR_PROPERTY}
           onClick={() =>

front/src/scene/gender/GendersPage.tsx

@@ -23,7 +23,7 @@ export const GendersPage = () => {
   if (isLoading) {
     return (
       <>
-        <TopBar title="All Genders" />
+        <TopBar title="All Genders" titleLink="/home" />
         <PageLayoutInfoCenter>No Gender available</PageLayoutInfoCenter>
       </>
     );
@@ -31,7 +31,7 @@ export const GendersPage = () => {
 
   return (
     <>
-      <TopBar title="All Genders">
+      <TopBar title="All Genders" titleLink="/home">
         <SearchInput onChange={setFilterTitle} />
       </TopBar>
       <PageLayout>

front/src/scene/onAir/OnAirPage.tsx

@@ -97,7 +97,7 @@ export const OnAirPage = () => {
   if (!playTrackList || playTrackList.length == 0) {
     return (
       <>
-        <TopBar title="Album detail" />
+        <TopBar title="On Air ..." titleLink="/home" />
         <PageLayoutInfoCenter>
           No data is currently playing...
         </PageLayoutInfoCenter>
@@ -106,7 +106,7 @@ export const OnAirPage = () => {
   }
   return (
     <>
-      <TopBar title="On Air ...">
+      <TopBar title="On Air ..." titleLink="/home">
         <Button {...BUTTON_TOP_BAR_PROPERTY} onClick={clean}>
           <LuTrash2 />
         </Button>

front/src/scene/track/TrackSelectionPage.tsx

@@ -42,7 +42,7 @@ export const TrackSelectionPage = () => {
   };
   return (
     <>
-      <TopBar title="All Tracks" />
+      <TopBar title="All Tracks" titleLink="/home" />
       <PageLayout>
         <HStack
           wrap="wrap"