feat: add BackButton component and integrate into various routes for improved navigation.

Author: ErwanDecoster

src/components/ui/BackButton.tsx

@@ -0,0 +1,22 @@
+import { useRouter, useCanGoBack } from '@tanstack/react-router';
+import { ChevronLeft } from 'lucide-react';
+import { Button } from './button';
+
+export function BackButton({ className = '' }: { className?: string }) {
+  const router = useRouter();
+  const canGoBack = useCanGoBack();
+
+  if (!canGoBack) return null;
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      className={`text-grey-400 border-grey-300 pr-4! uppercase ${className}`}
+      onClick={() => router.history.back()}
+    >
+      <ChevronLeft />
+      Back
+    </Button>
+  );
+}

src/routes/$chainSlug/_layout/account.tsx

@@ -10,6 +10,7 @@ import { Stepper } from '@/components/Stepper';
 import IexecAccountIcon from '@/components/icons/IexecAccountIcon';
 import WalletIcon from '@/components/icons/WalletIcon';
 import { ChainSelector } from '@/components/navbar/ChainSelector';
+import { BackButton } from '@/components/ui/BackButton';
 import { Button } from '@/components/ui/button';
 import { getIExec } from '@/externals/iexecSdkClient';
 import { useLoginLogout } from '@/hooks/useLoginLogout';
@@ -184,7 +185,10 @@ function RouteComponent() {
 
   return (
     <div className="mt-8 flex flex-col gap-10">
-      <AccountBreadcrumbs />
+      <div className="flex items-center gap-2">
+        <BackButton />
+        <AccountBreadcrumbs />
+      </div>
       <div className="flex flex-col items-center gap-2">
         <h1 className="flex items-center gap-2 text-2xl font-extrabold">
           IExec Wallet Manager

src/routes/$chainSlug/_layout/address/$addressAddress.tsx

@@ -5,6 +5,7 @@ import { createFileRoute } from '@tanstack/react-router';
 import { LoaderCircle } from 'lucide-react';
 import { useState } from 'react';
 import AddressIcon from '@/components/icons/AddressIcon';
+import { BackButton } from '@/components/ui/BackButton';
 import { DetailsTable } from '@/modules/DetailsTable';
 import { ErrorAlert } from '@/modules/ErrorAlert';
 import { Tabs } from '@/modules/Tabs';
@@ -132,7 +133,10 @@ function AddressRoute() {
             <LoaderCircle className="animate-spin" />
           )}
         </h1>
-        <AddressBreadcrumbs addressId={addressAddress} />
+        <div className="flex items-center gap-2">
+          <BackButton />
+          <AddressBreadcrumbs addressId={addressAddress} />
+        </div>
       </div>
 
       {hasPastError && !addressOverview ? (

src/routes/$chainSlug/_layout/app/$appAddress.tsx

@@ -4,6 +4,7 @@ import { useQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 import { LoaderCircle } from 'lucide-react';
 import AppIcon from '@/components/icons/AppIcon';
+import { BackButton } from '@/components/ui/BackButton';
 import { DetailsTable } from '@/modules/DetailsTable';
 import { ErrorAlert } from '@/modules/ErrorAlert';
 import { AppBreadcrumbs } from '@/modules/apps/app/AppBreadcrumbs';
@@ -92,7 +93,10 @@ function AppsRoute() {
             <LoaderCircle className="animate-spin" />
           )}
         </h1>
-        <AppBreadcrumbs appId={appAddress} />
+        <div className="flex items-center gap-2">
+          <BackButton />
+          <AppBreadcrumbs appId={appAddress} />
+        </div>
       </div>
 
       <div className="space-y-10">

src/routes/$chainSlug/_layout/apps.tsx

@@ -6,6 +6,7 @@ import { LoaderCircle } from 'lucide-react';
 import { DataTable } from '@/components/DataTable';
 import { PaginatedNavigation } from '@/components/PaginatedNavigation';
 import AppIcon from '@/components/icons/AppIcon';
+import { BackButton } from '@/components/ui/BackButton';
 import { usePageParam } from '@/hooks/usePageParam';
 import { ErrorAlert } from '@/modules/ErrorAlert';
 import { AppBreadcrumbsList } from '@/modules/apps/AppBreadcrumbs';
@@ -94,7 +95,10 @@ function AppsRoute() {
             <LoaderCircle className="animate-spin" />
           )}
         </h1>
-        <AppBreadcrumbsList />
+        <div className="flex items-center gap-2">
+          <BackButton />
+          <AppBreadcrumbsList />
+        </div>
       </div>
 
       {hasPastError && !data.length ? (

src/routes/$chainSlug/_layout/dataset/$datasetAddress.tsx

@@ -4,6 +4,7 @@ import { useQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 import { LoaderCircle } from 'lucide-react';
 import DatasetIcon from '@/components/icons/DatasetIcon';
+import { BackButton } from '@/components/ui/BackButton';
 import { DetailsTable } from '@/modules/DetailsTable';
 import { ErrorAlert } from '@/modules/ErrorAlert';
 import { DatasetBreadcrumbs } from '@/modules/datasets/dataset/DatasetBreadcrumbs';
@@ -95,7 +96,10 @@ function DatasetsRoute() {
             <LoaderCircle className="animate-spin" />
           )}
         </h1>
-        <DatasetBreadcrumbs datasetId={datasetAddress} />
+        <div className="flex items-center gap-2">
+          <BackButton />
+          <DatasetBreadcrumbs datasetId={datasetAddress} />
+        </div>
       </div>
 
       <div className="space-y-10">

src/routes/$chainSlug/_layout/datasets.tsx

@@ -6,6 +6,7 @@ import { LoaderCircle } from 'lucide-react';
 import { DataTable } from '@/components/DataTable';
 import { PaginatedNavigation } from '@/components/PaginatedNavigation';
 import DatasetIcon from '@/components/icons/DatasetIcon';
+import { BackButton } from '@/components/ui/BackButton';
 import { usePageParam } from '@/hooks/usePageParam';
 import { ErrorAlert } from '@/modules/ErrorAlert';
 import { DatasetBreadcrumbsList } from '@/modules/datasets/DatasetBreadcrumbs';
@@ -94,7 +95,10 @@ function DatasetsRoute() {
             <LoaderCircle className="animate-spin" />
           )}
         </h1>
-        <DatasetBreadcrumbsList />
+        <div className="flex items-center gap-2">
+          <BackButton />
+          <DatasetBreadcrumbsList />
+        </div>
       </div>
 
       {hasPastError && !data.length ? (

src/routes/$chainSlug/_layout/deal/$dealAddress.tsx

@@ -5,6 +5,7 @@ import { createFileRoute } from '@tanstack/react-router';
 import { LoaderCircle } from 'lucide-react';
 import { useState } from 'react';
 import DealIcon from '@/components/icons/DealIcon';
+import { BackButton } from '@/components/ui/BackButton';
 import { DetailsTable } from '@/modules/DetailsTable';
 import { ErrorAlert } from '@/modules/ErrorAlert';
 import { Tabs } from '@/modules/Tabs';
@@ -97,7 +98,10 @@ function DealsRoute() {
             <LoaderCircle className="animate-spin" />
           )}
         </h1>
-        <DealBreadcrumbs dealId={dealAddress} />
+        <div className="flex items-center gap-2">
+          <BackButton />
+          <DealBreadcrumbs dealId={dealAddress} />
+        </div>
       </div>
 
       <Tabs

src/routes/$chainSlug/_layout/deals.tsx

@@ -6,6 +6,7 @@ import { LoaderCircle } from 'lucide-react';
 import { DataTable } from '@/components/DataTable';
 import { PaginatedNavigation } from '@/components/PaginatedNavigation';
 import DealIcon from '@/components/icons/DealIcon';
+import { BackButton } from '@/components/ui/BackButton';
 import { usePageParam } from '@/hooks/usePageParam';
 import { ErrorAlert } from '@/modules/ErrorAlert';
 import { AllDealsBreadcrumbs } from '@/modules/deals/DealBreadcrumbs';
@@ -94,7 +95,10 @@ function DealsRoute() {
             <LoaderCircle className="animate-spin" />
           )}
         </h1>
-        <AllDealsBreadcrumbs />
+        <div className="flex items-center gap-2">
+          <BackButton />
+          <AllDealsBreadcrumbs />
+        </div>
       </div>
       {hasPastError && !data.length ? (
         <ErrorAlert message="An error occurred during deals loading." />

src/routes/$chainSlug/_layout/task/$taskAddress.tsx

@@ -4,6 +4,7 @@ import { useQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 import { LoaderCircle } from 'lucide-react';
 import TaskIcon from '@/components/icons/TaskIcon';
+import { BackButton } from '@/components/ui/BackButton';
 import { DetailsTable } from '@/modules/DetailsTable';
 import { ErrorAlert } from '@/modules/ErrorAlert';
 import { SearcherBar } from '@/modules/search/SearcherBar';
@@ -91,7 +92,10 @@ function TasksRoute() {
             <LoaderCircle className="animate-spin" />
           )}
         </h1>
-        <TaskBreadcrumbs taskId={taskAddress} />
+        <div className="flex items-center gap-2">
+          <BackButton />
+          <TaskBreadcrumbs taskId={taskAddress} />
+        </div>
       </div>
 
       {hasPastError && !taskDetails ? (