From 80c4aadad468e86b4a6ff1134ec479f6000604e0 Mon Sep 17 00:00:00 2001
From: Josemaria Nriagu <49484425+josenriagu@users.noreply.github.com>
Date: Tue, 14 May 2024 11:37:53 +0100
Subject: [PATCH 1/2] refactor(topbar): update router config

---
 .../top-bar/src/components/topbar-widget.tsx  |  6 ++---
 .../src/components/widget-routes/index.tsx    | 26 +++++++++++--------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/extensions/widgets/top-bar/src/components/topbar-widget.tsx b/extensions/widgets/top-bar/src/components/topbar-widget.tsx
index 2b0d566249..b9dbb3deb8 100644
--- a/extensions/widgets/top-bar/src/components/topbar-widget.tsx
+++ b/extensions/widgets/top-bar/src/components/topbar-widget.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 import { I18nextProvider } from 'react-i18next';
 import { RouterProvider } from '@tanstack/react-router';
 import { useRootComponentProps } from '@akashaorg/ui-awf-hooks';
-import { createRouter } from './widget-routes';
+import { router } from './widget-routes';
 
 declare module '@tanstack/react-router' {
   interface Register {
-    router: ReturnType<typeof createRouter>;
+    router: typeof router;
   }
 }
 
@@ -15,7 +15,7 @@ const TopbarWidget: React.FC<unknown> = () => {
 
   return (
     <I18nextProvider i18n={getTranslationPlugin().i18n}>
-      <RouterProvider router={createRouter()} />
+      <RouterProvider router={router} />
     </I18nextProvider>
   );
 };
diff --git a/extensions/widgets/top-bar/src/components/widget-routes/index.tsx b/extensions/widgets/top-bar/src/components/widget-routes/index.tsx
index ecfb358bc9..7d01539524 100644
--- a/extensions/widgets/top-bar/src/components/widget-routes/index.tsx
+++ b/extensions/widgets/top-bar/src/components/widget-routes/index.tsx
@@ -1,19 +1,23 @@
 import React from 'react';
-import { rootRouteWithContext, Router } from '@tanstack/react-router';
+import { createRootRoute, createRoute, createRouter, Outlet } from '@tanstack/react-router';
 import RootComponent from './root-component';
 import ErrorComponent from './error-component';
 
-const rootRoute = rootRouteWithContext()({
+const rootRoute = createRootRoute({
+  component: Outlet,
+});
+
+const defaultRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/$',
   component: RootComponent,
 });
 
-const routeTree = rootRoute;
+const routeTree = rootRoute.addChildren([defaultRoute]);
 
-export const createRouter = () =>
-  new Router({
-    routeTree,
-    basepath: '',
-    defaultErrorComponent: ({ error }) => (
-      <ErrorComponent error={(error as unknown as Error).message} />
-    ),
-  });
+export const router = createRouter({
+  routeTree,
+  defaultErrorComponent: ({ error }) => (
+    <ErrorComponent error={(error as unknown as Error).message} />
+  ),
+});

From ea547abb1fc0da4a7f0d3d281d1d0f414f382061 Mon Sep 17 00:00:00 2001
From: Josemaria Nriagu <49484425+josenriagu@users.noreply.github.com>
Date: Tue, 14 May 2024 11:38:13 +0100
Subject: [PATCH 2/2] chore(topbar): fix deprecated icons

---
 extensions/widgets/top-bar/src/components/topbar.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/extensions/widgets/top-bar/src/components/topbar.tsx b/extensions/widgets/top-bar/src/components/topbar.tsx
index 110e88f7b7..9879ef9480 100644
--- a/extensions/widgets/top-bar/src/components/topbar.tsx
+++ b/extensions/widgets/top-bar/src/components/topbar.tsx
@@ -4,8 +4,8 @@ import { ThemingEvents } from '@akashaorg/typings/lib/ui';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
 import Icon from '@akashaorg/design-system-core/lib/components/Icon';
 import {
-  ArrowLeftOnRectangleIcon,
-  ArrowRightOnRectangleIcon,
+  ArrowLeftEndOnRectangleIcon,
+  ArrowRightEndOnRectangleIcon,
   ChevronLeftIcon,
 } from '@akashaorg/design-system-core/lib/components/Icon/hero-icons-outline';
 import { Akasha } from '@akashaorg/design-system-core/lib/components/Icon/akasha-icons';
@@ -115,7 +115,7 @@ const Topbar: React.FC<ITopbarProps> = props => {
       <Stack direction="row" spacing="gap-x-2">
         <Button
           iconOnly={true}
-          icon={sidebarVisible ? <ArrowLeftOnRectangleIcon /> : <ArrowRightOnRectangleIcon />}
+          icon={sidebarVisible ? <ArrowLeftEndOnRectangleIcon /> : <ArrowRightEndOnRectangleIcon />}
           onClick={onSidebarToggle}
           greyBg={true}
           variant="primary"