Unify workspace dropdowns; Update layouts (#458)

Unified Account and Workspace drop-downs; Layout updates, now header lives within the PageBody component; Sidebars now use floating variant

apps/web/app/[locale]/home/(user)/settings/layout.tsx

@@ -0,0 +1,21 @@
+import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
+import { PageBody } from '@kit/ui/page';
+import { Trans } from '@kit/ui/trans';
+
+// local imports
+import { HomeLayoutPageHeader } from '../_components/home-page-header';
+
+function UserSettingsLayout(props: React.PropsWithChildren) {
+  return (
+    <PageBody>
+      <HomeLayoutPageHeader
+        title={<Trans i18nKey={'account.routes.settings'} />}
+        description={<AppBreadcrumbs />}
+      />
+
+      {props.children}
+    </PageBody>
+  );
+}
+
+export default UserSettingsLayout;

apps/web/app/[locale]/home/(user)/settings/page.tsx

@@ -0,0 +1,58 @@
+import { use } from 'react';
+
+import { getTranslations } from 'next-intl/server';
+
+import { PersonalAccountSettingsContainer } from '@kit/accounts/personal-account-settings';
+
+import authConfig from '~/config/auth.config';
+import featureFlagsConfig from '~/config/feature-flags.config';
+import pathsConfig from '~/config/paths.config';
+import { requireUserInServerComponent } from '~/lib/server/require-user-in-server-component';
+
+// Show email option if password, magic link, or OTP is enabled
+const showEmailOption =
+  authConfig.providers.password ||
+  authConfig.providers.magicLink ||
+  authConfig.providers.otp;
+
+const features = {
+  showLinkEmailOption: showEmailOption,
+  enablePasswordUpdate: authConfig.providers.password,
+  enableAccountDeletion: featureFlagsConfig.enableAccountDeletion,
+  enableAccountLinking: authConfig.enableIdentityLinking,
+};
+
+const providers = authConfig.providers.oAuth;
+
+const callbackPath = pathsConfig.auth.callback;
+const accountSettingsPath = pathsConfig.app.accountSettings;
+
+const paths = {
+  callback: callbackPath + `?next=${accountSettingsPath}`,
+};
+
+export const generateMetadata = async () => {
+  const t = await getTranslations('account');
+  const title = t('settingsTab');
+
+  return {
+    title,
+  };
+};
+
+function PersonalAccountSettingsPage() {
+  const user = use(requireUserInServerComponent());
+
+  return (
+    <div className={'flex w-full flex-1 flex-col lg:max-w-2xl'}>
+      <PersonalAccountSettingsContainer
+        userId={user.id}
+        features={features}
+        paths={paths}
+        providers={providers}
+      />
+    </div>
+  );
+}
+
+export default PersonalAccountSettingsPage;