Public components page

package.json

@@ -32,11 +32,11 @@
     "@fortawesome/react-fontawesome": "0.2.2",
     "@hookform/resolvers": "4.1.3",
     "@react-spring/web": "9.7.5",
-    "@tailwindcss/vite": "4.0.10",
-    "@tanstack/react-query": "5.67.1",
-    "@tanstack/react-query-devtools": "5.67.1",
+    "@tailwindcss/vite": "4.0.12",
+    "@tanstack/react-query": "5.67.2",
+    "@tanstack/react-query-devtools": "5.67.2",
     "@tanstack/react-table": "8.21.2",
-    "axios": "1.8.1",
+    "axios": "1.8.2",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "dayjs": "1.11.13",
@@ -48,16 +48,16 @@
     "react-dom": "18.3.1",
     "react-hook-form": "7.54.2",
     "react-i18next": "15.4.1",
-    "react-router-dom": "7.2.0",
+    "react-router-dom": "7.3.0",
     "recharts": "2.15.1",
     "tailwind-merge": "3.0.2",
-    "tailwindcss": "4.0.10",
+    "tailwindcss": "4.0.12",
     "uuid": "11.1.0",
     "yup": "1.6.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "3.2.5",
-    "@eslint/js": "9.21.0",
+    "@eslint/js": "9.22.0",
     "@storybook/addon-essentials": "8.6.4",
     "@storybook/addon-interactions": "8.6.4",
     "@storybook/addon-onboarding": "8.6.4",
@@ -76,8 +76,8 @@
     "@types/react-dom": "18.3.1",
     "@types/uuid": "10.0.0",
     "@vitejs/plugin-react": "4.3.4",
-    "@vitest/coverage-v8": "3.0.7",
-    "eslint": "9.21.0",
+    "@vitest/coverage-v8": "3.0.8",
+    "eslint": "9.22.0",
     "eslint-plugin-react-hooks": "5.2.0",
     "eslint-plugin-react-refresh": "0.4.19",
     "eslint-plugin-storybook": "0.11.4",
@@ -90,7 +90,7 @@
     "storybook": "8.6.4",
     "typescript": "5.7.3",
     "typescript-eslint": "8.26.0",
-    "vite": "6.2.0",
-    "vitest": "3.0.7"
+    "vite": "6.2.1",
+    "vitest": "3.0.8"
   }
 }

src/common/components/Header/AppMenu.tsx

@@ -49,7 +49,7 @@ const AppMenu = ({ side = 'right', testId = 'menu-app', ...props }: AppMenuProps
           <MenuNavLink to="/app/settings" title="Settings" icon="sliders">
             Settings
           </MenuNavLink>
-          <MenuNavLink to="/app/components" title="Components" icon="puzzlePiece">
+          <MenuNavLink to="/pub/components" title="Components" icon="puzzlePiece">
             Components
           </MenuNavLink>
           <MenuNavLink to="/app/tasks" title={t('tasks', { ns: 'tasks' })} icon="listCheck">
@@ -65,7 +65,7 @@ const AppMenu = ({ side = 'right', testId = 'menu-app', ...props }: AppMenuProps
             Need an account? Sign Up
           </MenuNavLink>
           <MenuSeparator />
-          <MenuNavLink to="/app/components" title="Components" icon="puzzlePiece">
+          <MenuNavLink to="/pub/components" title="Components" icon="puzzlePiece">
             Components
           </MenuNavLink>
         </>

src/common/components/Router/Router.tsx

@@ -51,7 +51,7 @@ export const routes: RouteObject[] = [
       {
         path: 'auth',
         children: [
-          { index: true, element: <Navigate to="signin" /> },
+          { index: true, element: <Navigate to="signin" replace /> },
           {
             path: 'signin',
             element: <SigninPage />,
@@ -63,31 +63,16 @@ export const routes: RouteObject[] = [
         ],
       },
       {
-        path: 'app',
-        element: <PrivateOutlet />,
+        path: 'pub',
         children: [
-          { index: true, element: <Navigate to="tasks" /> },
-          {
-            path: 'settings',
-            element: <SettingsPage />,
-            children: [
-              {
-                index: true,
-                element: <Navigate to="appearance" />,
-              },
-              {
-                path: 'appearance',
-                element: <AppearanceSettings />,
-              },
-            ],
-          },
+          { index: true, element: <Navigate to="components" replace /> },
           {
             path: 'components',
             element: <ComponentsPage />,
             children: [
               {
                 index: true,
-                element: <Navigate to="alert" />,
+                element: <Navigate to="alert" replace />,
               },
               {
                 path: 'alert',
@@ -135,6 +120,27 @@ export const routes: RouteObject[] = [
               },
             ],
           },
+        ],
+      },
+      {
+        path: 'app',
+        element: <PrivateOutlet />,
+        children: [
+          { index: true, element: <Navigate to="tasks" replace /> },
+          {
+            path: 'settings',
+            element: <SettingsPage />,
+            children: [
+              {
+                index: true,
+                element: <Navigate to="appearance" replace />,
+              },
+              {
+                path: 'appearance',
+                element: <AppearanceSettings />,
+              },
+            ],
+          },
           {
             path: 'tasks',
             element: <TasksPage />,

src/pages/Components/components/ComponentsPageBreadcrumbs.tsx

@@ -22,7 +22,7 @@ const ComponentsPageBreadcrumbs = ({
         </Breadcrumbs.Item>
         <Breadcrumbs.Separator />
         <Breadcrumbs.Item>
-          <Breadcrumbs.Link to="/app/components">Components</Breadcrumbs.Link>
+          <Breadcrumbs.Link to="/pub/components">Components</Breadcrumbs.Link>
         </Breadcrumbs.Item>
         {!!pathElements[3] && (
           <>

src/pages/Components/components/__tests__/ComponentsPageBreadcrumbs.test.tsx

@@ -10,9 +10,9 @@ describe('ComponentsPageBreadcrumbs', () => {
     // ARRANGE
     render(
       <Routes>
-        <Route path="/app/components" element={<ComponentsPageBreadcrumbs />} />
-        <Route path="/app/components/alert" element={<ComponentsPageBreadcrumbs />} />
-        <Route path="/" element={<Navigate to="/app/components/alert" />} />
+        <Route path="/pub/components" element={<ComponentsPageBreadcrumbs />} />
+        <Route path="/pub/components/alert" element={<ComponentsPageBreadcrumbs />} />
+        <Route path="/" element={<Navigate to="/pub/components/alert" />} />
       </Routes>,
     );
     await screen.findByTestId('page-components-breadcrumbs');
@@ -25,9 +25,9 @@ describe('ComponentsPageBreadcrumbs', () => {
     // ARRANGE
     render(
       <Routes>
-        <Route path="/app/components" element={<ComponentsPageBreadcrumbs />} />
-        <Route path="/app/components/alert" element={<ComponentsPageBreadcrumbs />} />
-        <Route path="/" element={<Navigate to="/app/components/alert" />} />
+        <Route path="/pub/components" element={<ComponentsPageBreadcrumbs />} />
+        <Route path="/pub/components/alert" element={<ComponentsPageBreadcrumbs />} />
+        <Route path="/" element={<Navigate to="/pub/components/alert" />} />
       </Routes>,
     );
     await screen.findByTestId('page-components-breadcrumbs-page-alert');

src/pages/Landing/LandingPage.tsx

@@ -17,7 +17,7 @@ const LandingPage = (): JSX.Element => {
   const authContext = useAuth();
 
   if (authContext.isAuthenticated) {
-    return <Navigate to="/app/tasks" />;
+    return <Navigate to="/app/tasks" replace />;
   }
 
   return (