Add Account Settings page (#4558)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR updates account and team-related UI components and settings pages.

### Detailed summary
- Updated titles in account and team UI components
- Added confirmation dialog to setting cards
- Improved layout in account and team pages
- Implemented account authentication logic

> The following files were skipped due to too many changes: `apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/GeneralSettingsPage.tsx`, `apps/dashboard/src/app/account/settings/AccountSettingsPageUI.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/@/components/blocks/SidebarLayout.tsx

@@ -1,3 +1,4 @@
+import { cn } from "../../lib/utils";
 import { MobileSidebar } from "./MobileSidebar";
 import { Sidebar, type SidebarLink } from "./Sidebar";
 
@@ -6,10 +7,16 @@ export function SidebarLayout(props: {
   children: React.ReactNode;
   desktopSidebarClassName?: string;
   mobileSidebarClassName?: string;
+  className?: string;
 }) {
   const { sidebarLinks, children } = props;
   return (
-    <div className="flex flex-col lg:flex-row gap-6 container px-4 w-full grow max-sm:pt-6">
+    <div
+      className={cn(
+        "flex flex-col lg:flex-row gap-6 container px-4 w-full grow max-sm:pt-6",
+        props.className,
+      )}
+    >
       <Sidebar links={sidebarLinks} className={props.desktopSidebarClassName} />
       <MobileSidebar
         links={sidebarLinks}

apps/dashboard/src/app/account/layout.tsx

@@ -13,7 +13,15 @@ export default async function AccountLayout(props: {
     <div className="min-h-full flex flex-col bg-background">
       <div className="grow flex flex-col">
         <HeaderAndNav />
+        <div className="py-10 border-b border-border">
+          <div className="max-w-[1100px] mx-auto px-6">
+            <h1 className="text-3xl tracking-tight font-semibold">
+              My Account
+            </h1>
+          </div>
+        </div>
         <SidebarLayout
+          className="max-w-[1100px]"
           sidebarLinks={[
             {
               href: "/account",

apps/dashboard/src/app/account/overview/AccountTeamsUI.stories.tsx

@@ -4,7 +4,7 @@ import { BadgeContainer, mobileViewport } from "../../../stories/utils";
 import { AccountTeamsUI } from "./AccountTeamsUI";
 
 const meta = {
-  title: "Account/Teams",
+  title: "Account/Pages/Teams",
   component: Variants,
   parameters: {
     nextjs: {

apps/dashboard/src/app/account/settings/AccountSettingsPageUI.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Toaster } from "sonner";
+import { ThirdwebProvider } from "thirdweb/react";
+import { mobileViewport } from "../../../stories/utils";
+import { AccountSettingsPageUI } from "./AccountSettingsPageUI";
+
+const meta = {
+  title: "Account/Pages/Settings",
+  component: Variants,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Variants>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {
+    type: "desktop",
+  },
+};
+
+export const Mobile: Story = {
+  args: {
+    type: "mobile",
+  },
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function Variants() {
+  return (
+    <ThirdwebProvider>
+      <div className="container py-10 max-w-[1132px] mx-auto w-full flex flex-col gap-10">
+        <AccountSettingsPageUI
+          account={{
+            name: "John Doe",
+            email: "johndoe@gmail.com",
+          }}
+        />
+      </div>
+      <Toaster richColors />
+    </ThirdwebProvider>
+  );
+}