feat: create Settings/Accounts page (#2837)

Closes #2815

front/src/App.tsx

@@ -15,9 +15,13 @@ import { VerifyEffect } from '~/pages/auth/VerifyEffect';
 import { ImpersonateEffect } from '~/pages/impersonate/ImpersonateEffect';
 import { NotFound } from '~/pages/not-found/NotFound';
 import { Opportunities } from '~/pages/opportunities/Opportunities';
+import { SettingsAccounts } from '~/pages/settings/accounts/SettingsAccounts';
 import { SettingsNewObject } from '~/pages/settings/data-model/SettingsNewObject';
 import { SettingsObjectDetail } from '~/pages/settings/data-model/SettingsObjectDetail';
 import { SettingsObjectEdit } from '~/pages/settings/data-model/SettingsObjectEdit';
+import { SettingsObjectFieldEdit } from '~/pages/settings/data-model/SettingsObjectFieldEdit';
+import { SettingsObjectNewFieldStep1 } from '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1';
+import { SettingsObjectNewFieldStep2 } from '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2';
 import { SettingsObjects } from '~/pages/settings/data-model/SettingsObjects';
 import { SettingsDevelopersApiKeyDetail } from '~/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail';
 import { SettingsDevelopersApiKeys } from '~/pages/settings/developers/api-keys/SettingsDevelopersApiKeys';
@@ -29,10 +33,6 @@ import { SettingsWorkspaceMembers } from '~/pages/settings/SettingsWorkspaceMemb
 import { Tasks } from '~/pages/tasks/Tasks';
 import { getPageTitleFromPath } from '~/utils/title-utils';
 
-import { SettingsObjectFieldEdit } from './pages/settings/data-model/SettingsObjectFieldEdit';
-import { SettingsObjectNewFieldStep1 } from './pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1';
-import { SettingsObjectNewFieldStep2 } from './pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2';
-
 export const App = () => {
   const { pathname } = useLocation();
   const pageTitle = getPageTitleFromPath(pathname);
@@ -69,6 +69,10 @@ export const App = () => {
                   path={SettingsPath.Appearance}
                   element={<SettingsAppearance />}
                 />
+                <Route
+                  path={SettingsPath.Accounts}
+                  element={<SettingsAccounts />}
+                />
                 <Route
                   path={SettingsPath.WorkspaceMembersPage}
                   element={<SettingsWorkspaceMembers />}

front/src/modules/settings/components/SettingsNavbar.tsx

@@ -4,6 +4,7 @@ import { useMatch, useNavigate, useResolvedPath } from 'react-router-dom';
 import { useAuth } from '@/auth/hooks/useAuth';
 import { AppPath } from '@/types/AppPath';
 import {
+  IconAt,
   IconColorSwatch,
   IconHierarchy2,
   IconLogout,
@@ -11,7 +12,7 @@ import {
   IconSettings,
   IconUserCircle,
   IconUsers,
-} from '@/ui/display/icon/index';
+} from '@/ui/display/icon';
 import NavItem from '@/ui/navigation/navigation-drawer/components/NavItem';
 import NavTitle from '@/ui/navigation/navigation-drawer/components/NavTitle';
 import SubMenuNavbar from '@/ui/navigation/navigation-drawer/components/SubMenuNavbar';
@@ -51,6 +52,18 @@ export const SettingsNavbar = () => {
           })
         }
       />
+      <NavItem
+        label="Accounts"
+        to="/settings/accounts"
+        Icon={IconAt}
+        active={
+          !!useMatch({
+            path: useResolvedPath('/settings/accounts').pathname,
+            end: true,
+          })
+        }
+      />
+
       <NavTitle label="Workspace" />
       <NavItem
         label="General"
@@ -74,7 +87,6 @@ export const SettingsNavbar = () => {
           })
         }
       />
-
       <NavItem
         label="Data model"
         to="/settings/objects"
@@ -86,7 +98,6 @@ export const SettingsNavbar = () => {
           })
         }
       />
-
       <NavItem
         label="Developers"
         to="/settings/developers/api-keys"
@@ -98,6 +109,7 @@ export const SettingsNavbar = () => {
           })
         }
       />
+
       <NavTitle label="Other" />
       <NavItem label="Logout" onClick={handleLogout} Icon={IconLogout} />
     </SubMenuNavbar>

front/src/modules/types/SettingsPath.ts

@@ -1,6 +1,7 @@
 export enum SettingsPath {
   ProfilePage = 'profile',
   Appearance = 'profile/appearance',
+  Accounts = 'accounts',
   Objects = 'objects',
   ObjectDetail = 'objects/:objectSlug',
   ObjectEdit = 'objects/:objectSlug/edit',

front/src/modules/ui/display/icon/index.ts

@@ -10,6 +10,7 @@ export {
   IconArrowRight,
   IconArrowUp,
   IconArrowUpRight,
+  IconAt,
   IconBaselineDensitySmall,
   IconBell,
   IconBox,

front/src/pages/settings/accounts/SettingsAccounts.tsx

@@ -0,0 +1,12 @@
+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { IconSettings } from '@/ui/display/icon';
+import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
+import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+
+export const SettingsAccounts = () => (
+  <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
+    <SettingsPageContainer>
+      <Breadcrumb links={[{ children: 'Accounts' }]} />
+    </SettingsPageContainer>
+  </SubMenuTopBarContainer>
+);