Changed route ids to be more explicit.

src/app/(main)/settings/users/[userId]/UserSettings.tsx

@@ -0,0 +1,32 @@
+'use client';
+import { Key, useState } from 'react';
+import { Item, Loading, Tabs } from 'react-basics';
+import Icons from 'components/icons';
+import UserEditForm from '../UserEditForm';
+import PageHeader from 'components/layout/PageHeader';
+import { useMessages, useUser } from 'components/hooks';
+import UserWebsites from './UserWebsites';
+
+export function UserSettings({ userId }: { userId: string }) {
+  const { formatMessage, labels } = useMessages();
+  const [tab, setTab] = useState<Key>('details');
+  const { data: user, isLoading } = useUser(userId, { gcTime: 0 });
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  return (
+    <>
+      <PageHeader title={user?.username} icon={<Icons.User />} />
+      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
+        <Item key="details">{formatMessage(labels.details)}</Item>
+        <Item key="websites">{formatMessage(labels.websites)}</Item>
+      </Tabs>
+      {tab === 'details' && <UserEditForm userId={userId} data={user} />}
+      {tab === 'websites' && <UserWebsites userId={userId} />}
+    </>
+  );
+}
+
+export default UserSettings;

src/app/(main)/settings/users/[userId]/UserWebsites.tsx

@@ -0,0 +1,18 @@
+'use client';
+import WebsitesTable from 'app/(main)/settings/websites/WebsitesTable';
+import DataTable from 'components/common/DataTable';
+import { useWebsites } from 'components/hooks';
+
+export function UserWebsites({ userId }) {
+  const queryResult = useWebsites({ userId });
+
+  return (
+    <DataTable queryResult={queryResult}>
+      {({ data }) => (
+        <WebsitesTable data={data} showActions={true} allowEdit={true} allowView={true} />
+      )}
+    </DataTable>
+  );
+}
+
+export default UserWebsites;

src/app/(main)/settings/users/[userId]/page.tsx

@@ -0,0 +1,9 @@
+import UserSettings from './UserSettings';
+
+export default function ({ params: { userId } }) {
+  if (process.env.cloudMode) {
+    return null;
+  }
+
+  return <UserSettings userId={userId} />;
+}