From 8946f32feba94db554354c0fc024e5e7343c3cfa Mon Sep 17 00:00:00 2001
From: TinsFox <fox@tinsfox.com>
Date: Sat, 16 Aug 2025 22:04:32 +0800
Subject: [PATCH] feat: replace useState with useQueryState for tab management
 in TeamDetails

---
 .../(main)/teams/[teamId]/settings/team/TeamDetails.tsx   | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/app/(main)/teams/[teamId]/settings/team/TeamDetails.tsx b/src/app/(main)/teams/[teamId]/settings/team/TeamDetails.tsx
index f3f258bde..1a2df260e 100644
--- a/src/app/(main)/teams/[teamId]/settings/team/TeamDetails.tsx
+++ b/src/app/(main)/teams/[teamId]/settings/team/TeamDetails.tsx
@@ -3,17 +3,21 @@ import { useLogin, useMessages } from '@/components/hooks';
 import Icons from '@/components/icons';
 import PageHeader from '@/components/layout/PageHeader';
 import { ROLES } from '@/lib/constants';
-import { useContext, useState } from 'react';
+import { useContext } from 'react';
 import { Flexbox, Item, Tabs } from 'react-basics';
 import TeamLeaveButton from '@/app/(main)/settings/teams/TeamLeaveButton';
 import TeamManage from './TeamManage';
 import TeamEditForm from './TeamEditForm';
+import { useQueryState } from 'nuqs';
 
 export function TeamDetails({ teamId }: { teamId: string }) {
   const team = useContext(TeamContext);
   const { formatMessage, labels } = useMessages();
   const { user } = useLogin();
-  const [tab, setTab] = useState('details');
+  const [tab, setTab] = useQueryState('tab', {
+    defaultValue: 'details',
+    parse: value => value as 'details' | 'manage',
+  });
 
   const isTeamOwner =
     !!team?.teamUser?.find(({ userId, role }) => role === ROLES.teamOwner && userId === user.id) &&