refactor(frontend): reorder settings page tabs (#188)

Adjust tab order in settings page from "Integrations → Bot → Team → General"
to "Bot → Team → Integrations → General" for better user experience.

Changes:
- Updated tabIndexToName and tabNameToIndex mappings
- Reordered desktop sidebar menu items
- Reordered mobile top tab bar items
- Adjusted Tab.Panel components to match new order
- Updated default tab to 'bots' instead of 'integrations'

Both desktop and mobile layouts now display tabs in consistent order,
with Bot as the first visible option when entering settings.

Co-authored-by: qdaxb <[email protected]>

Author: qdaxb

frontend/src/app/settings/page.tsx

@@ -27,9 +27,9 @@ function DashboardContent() {
   // Tab index to name mapping
   const tabIndexToName = useMemo(
     (): Record<number, string> => ({
-      0: 'integrations',
-      1: 'bots',
-      2: 'team',
+      0: 'bots',
+      1: 'team',
+      2: 'integrations',
       3: 'notifications',
     }),
     []
@@ -38,9 +38,9 @@ function DashboardContent() {
   // Tab name to index mapping
   const tabNameToIndex = useMemo(
     (): Record<string, number> => ({
-      integrations: 0,
-      bots: 1,
-      team: 2,
+      bots: 0,
+      team: 1,
+      integrations: 2,
       notifications: 3,
     }),
     []
@@ -73,7 +73,7 @@ function DashboardContent() {
   const handleTabChange = useCallback(
     (idx: number) => {
       setTabIndex(idx);
-      const tabName = tabIndexToName[idx] || 'integrations';
+      const tabName = tabIndexToName[idx] || 'bots';
       router.replace(`?tab=${tabName}`);
     },
     [router, tabIndexToName]
@@ -111,8 +111,8 @@ function DashboardContent() {
                         }`
                       }
                     >
-                      <PuzzlePieceIcon className="w-4 h-4" />
-                      <span>{t('settings.integrations')}</span>
+                      <RiRobot2Line className="w-4 h-4" />
+                      <span>{t('settings.bot')}</span>
                     </Tab>
 
                     <Tab
@@ -124,8 +124,8 @@ function DashboardContent() {
                         }`
                       }
                     >
-                      <RiRobot2Line className="w-4 h-4" />
-                      <span>{t('settings.bot')}</span>
+                      <UsersIcon className="w-4 h-4" />
+                      <span>{t('settings.team')}</span>
                     </Tab>
 
                     <Tab
@@ -137,8 +137,8 @@ function DashboardContent() {
                         }`
                       }
                     >
-                      <UsersIcon className="w-4 h-4" />
-                      <span>{t('settings.team')}</span>
+                      <PuzzlePieceIcon className="w-4 h-4" />
+                      <span>{t('settings.integrations')}</span>
                     </Tab>
 
                     <Tab
@@ -157,15 +157,15 @@ function DashboardContent() {
 
                   <div className="flex-1 min-h-0 px-8 py-4 overflow-y-auto min-w-0">
                     <Tab.Panels>
-                      <Tab.Panel className="focus:outline-none">
-                        <GitHubIntegration />
-                      </Tab.Panel>
                       <Tab.Panel className="focus:outline-none">
                         <BotList />
                       </Tab.Panel>
                       <Tab.Panel className="focus:outline-none">
                         <TeamList />
                       </Tab.Panel>
+                      <Tab.Panel className="focus:outline-none">
+                        <GitHubIntegration />
+                      </Tab.Panel>
                       <Tab.Panel className="focus:outline-none">
                         <NotificationSettings />
                       </Tab.Panel>
@@ -186,8 +186,8 @@ function DashboardContent() {
                           }`
                         }
                       >
-                        <PuzzlePieceIcon className="w-3 h-3" />
-                        <span className="hidden xs:inline">{t('settings.integrations')}</span>
+                        <RiRobot2Line className="w-3 h-3" />
+                        <span className="hidden xs:inline">{t('settings.bot')}</span>
                       </Tab>
 
                       <Tab
@@ -199,8 +199,8 @@ function DashboardContent() {
                           }`
                         }
                       >
-                        <RiRobot2Line className="w-3 h-3" />
-                        <span className="hidden xs:inline">{t('settings.bot')}</span>
+                        <UsersIcon className="w-3 h-3" />
+                        <span className="hidden xs:inline">{t('settings.team')}</span>
                       </Tab>
 
                       <Tab
@@ -212,8 +212,8 @@ function DashboardContent() {
                           }`
                         }
                       >
-                        <UsersIcon className="w-3 h-3" />
-                        <span className="hidden xs:inline">{t('settings.team')}</span>
+                        <PuzzlePieceIcon className="w-3 h-3" />
+                        <span className="hidden xs:inline">{t('settings.integrations')}</span>
                       </Tab>
 
                       <Tab
@@ -233,15 +233,15 @@ function DashboardContent() {
 
                   <div className="flex-1 min-h-0 px-2 py-2 overflow-y-auto min-w-0">
                     <Tab.Panels>
-                      <Tab.Panel className="focus:outline-none">
-                        <GitHubIntegration />
-                      </Tab.Panel>
                       <Tab.Panel className="focus:outline-none">
                         <BotList />
                       </Tab.Panel>
                       <Tab.Panel className="focus:outline-none">
                         <TeamList />
                       </Tab.Panel>
+                      <Tab.Panel className="focus:outline-none">
+                        <GitHubIntegration />
+                      </Tab.Panel>
                       <Tab.Panel className="focus:outline-none">
                         <NotificationSettings />
                       </Tab.Panel>