refactor(profile): split view/container and update nav state

Signed-off-by: Noa Virellia <noa@requiem.garden>

client/cms/src/stories/nav-user.stories.tsx

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { NavUser_ } from '@/components/sidebar/nav-user';
+
+const meta = {
+  title: 'NavUser',
+  component: NavUser_,
+} satisfies Meta<typeof NavUser_>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};

client/cms/src/stories/profile/edit-profile.dialog.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { EditProfileDialogView } from '@/components/profile/edit-profile.dialog.view';
+
+const meta = {
+  title: 'Profile/EditDialog',
+  component: EditProfileDialogView,
+  decorators: [
+    Story => (
+      <div style={{
+        height: '100vh',
+        maxWidth: '256px',
+        margin: 'auto',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof EditProfileDialogView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    user: {
+      username: 'nvirellia',
+      nickname: 'Noa Virellia',
+      subtitle: '天生骄傲',
+      email: 'noa@requiem.garden',
+      bio: '',
+      avatar: 'https://avatars.githubusercontent.com/u/54884471?v=4',
+    },
+    updateProfile: async () => { },
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};

client/cms/src/stories/profile/profile.stories.tsx

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { Profile } from '@/components/profile/profile';
 import { ProfileError } from '@/components/profile/profile.error';
 import { ProfileSkeleton } from '@/components/profile/profile.skeleton';
+import { ProfileView } from '@/components/profile/profile.view';
 
 const queryClient = new QueryClient();
 
 const meta = {
-  title: 'Profile',
-  component: Profile,
+  title: 'Profile/View',
+  component: ProfileView,
   decorators: [
     Story => (
       <QueryClientProvider client={queryClient}>
@@ -16,7 +16,7 @@ const meta = {
       </QueryClientProvider>
     ),
   ],
-} satisfies Meta<typeof Profile>;
+} satisfies Meta<typeof ProfileView>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -31,13 +31,16 @@ export const Primary: Story = {
       bio: '',
       avatar: 'https://avatars.githubusercontent.com/u/54884471?v=4',
     },
+    onSaveBio: async () => Promise.resolve(),
   },
+
 };
 
 export const Skeleton: Story = {
   render: () => <ProfileSkeleton />,
   args: {
     user: {},
+    onSaveBio: async () => Promise.resolve(),
   },
 };
 
@@ -47,5 +50,6 @@ export const Error: Story = {
     user: {
       allow_public: false,
     },
+    onSaveBio: async () => Promise.resolve(),
   },
 };