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

Signed-off-by: Noa Virellia <noa@requiem.garden>
feat(client): add storybook and workbench profile flow
2026-01-31 18:30:34 +08:00 · 2026-01-31 12:29:58 +08:00
43 changed files with 2103 additions and 191 deletions
--- a/client/cms/.gitignore
+++ b/client/cms/.gitignore
@@ -24,3 +24,6 @@ dist-ssr
 *.sw?

 .direnv
+
+*storybook.log
+storybook-static
--- a/client/cms/.storybook/main.ts
+++ b/client/cms/.storybook/main.ts
@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@chromatic-com/storybook",
+    "@storybook/addon-vitest",
+    "@storybook/addon-a11y",
+    "@storybook/addon-docs",
+    "@storybook/addon-onboarding"
+  ],
+  "framework": "@storybook/react-vite"
+};
+export default config;
--- a/client/cms/.storybook/preview.tsx
+++ b/client/cms/.storybook/preview.tsx
@@ -0,0 +1,24 @@
+import type { Preview } from '@storybook/react-vite';
+import { ThemeProvider } from '../src/components/theme-provider';
+import '../src/index.css';
+
+const preview: Preview = {
+  decorators: [(Story) => <ThemeProvider defaultTheme="dark"><Story /></ThemeProvider >],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo'
+    }
+  },
+};
+
+export default preview;
--- a/client/cms/.storybook/vitest.setup.ts
+++ b/client/cms/.storybook/vitest.setup.ts
@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);
--- a/client/cms/.zed/settings.json
+++ b/client/cms/.zed/settings.json
@@ -0,0 +1,18 @@
+{
+  "file_scan_exclusions": [
+    "src/components/ui",
+    ".tanstack",
+    "node_modules",
+    "dist",
+
+    // default values below
+    "**/.git",
+    "**/.svn",
+    "**/.hg",
+    "**/CVS",
+    "**/.DS_Store",
+    "**/Thumbs.db",
+    "**/.classpath",
+    "**/.settings",
+  ],
+}
--- a/client/cms/eslint.config.js
+++ b/client/cms/eslint.config.js
@@ -1,3 +1,4 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
 import antfu from '@antfu/eslint-config';
 import pluginQuery from '@tanstack/eslint-plugin-query';

--- a/client/cms/package.json
+++ b/client/cms/package.json
@@ -9,7 +9,9 @@
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview",
-    "gen": "openapi-ts"
+    "gen": "openapi-ts",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
  },
  "dependencies": {
    "@base-ui/react": "^1.1.0",
@@ -58,6 +60,7 @@
    "qrcode": "^1.5.4",
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
+    "react-error-boundary": "^6.1.0",
    "react-hook-form": "^7.69.0",
    "react-markdown": "^10.1.0",
    "recharts": "2.15.4",
@@ -71,9 +74,16 @@
  },
  "devDependencies": {
    "@antfu/eslint-config": "^6.7.1",
+    "@chromatic-com/storybook": "^5.0.0",
    "@eslint-react/eslint-plugin": "^2.3.13",
    "@eslint/js": "^9.39.1",
    "@hey-api/openapi-ts": "0.91.0",
+    "@storybook/addon-a11y": "^10.2.3",
+    "@storybook/addon-docs": "^10.2.3",
+    "@storybook/addon-onboarding": "^10.2.3",
+    "@storybook/addon-themes": "^10.2.3",
+    "@storybook/addon-vitest": "^10.2.3",
+    "@storybook/react-vite": "^10.2.3",
    "@tailwindcss/typography": "^0.5.19",
    "@tanstack/eslint-plugin-query": "^5.91.2",
    "@tanstack/router-plugin": "^1.141.7",
@@ -86,18 +96,24 @@
    "@types/react-dom": "^19.2.3",
    "@types/utf8": "^3.0.3",
    "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
    "eslint": "^9.39.1",
    "eslint-plugin-react-hooks": "^7.0.1",
    "eslint-plugin-react-refresh": "^0.4.26",
+    "eslint-plugin-storybook": "^10.2.3",
    "globals": "^16.5.0",
    "lint-staged": "^16.2.7",
+    "playwright": "^1.58.0",
    "simple-git-hooks": "^2.13.1",
+    "storybook": "^10.2.3",
    "tw-animate-css": "^1.4.0",
    "type-fest": "^5.4.1",
    "typescript": "~5.9.3",
    "typescript-eslint": "^8.46.4",
    "vite": "^7.2.4",
-    "vite-plugin-svgr": "^4.5.0"
+    "vite-plugin-svgr": "^4.5.0",
+    "vitest": "^4.0.18"
  },
  "simple-git-hooks": {
    "pre-commit": "bun run lint-staged"
--- a/client/cms/pnpm-lock.yaml
+++ b/client/cms/pnpm-lock.yaml
--- a/client/cms/src/client/@tanstack/react-query.gen.ts
+++ b/client/cms/src/client/@tanstack/react-query.gen.ts
@@ -3,8 +3,8 @@
 import { type InfiniteData, infiniteQueryOptions, queryOptions, type UseMutationOptions } from '@tanstack/react-query';

 import { client } from '../client.gen';
-import { getAuthRedirect, getEventCheckin, getEventCheckinQuery, getEventInfo, getEventList, getUserInfo, getUserList, type Options, patchUserUpdate, postAuthExchange, postAuthMagic, postAuthRefresh, postAuthToken, postEventCheckinSubmit } from '../sdk.gen';
-import type { GetAuthRedirectData, GetAuthRedirectError, GetEventCheckinData, GetEventCheckinError, GetEventCheckinQueryData, GetEventCheckinQueryError, GetEventCheckinQueryResponse, GetEventCheckinResponse, GetEventInfoData, GetEventInfoError, GetEventInfoResponse, GetEventListData, GetEventListError, GetEventListResponse, GetUserInfoData, GetUserInfoError, GetUserInfoResponse, GetUserListData, GetUserListError, GetUserListResponse, PatchUserUpdateData, PatchUserUpdateError, PatchUserUpdateResponse, PostAuthExchangeData, PostAuthExchangeError, PostAuthExchangeResponse, PostAuthMagicData, PostAuthMagicError, PostAuthMagicResponse, PostAuthRefreshData, PostAuthRefreshError, PostAuthRefreshResponse, PostAuthTokenData, PostAuthTokenError, PostAuthTokenResponse, PostEventCheckinSubmitData, PostEventCheckinSubmitError, PostEventCheckinSubmitResponse } from '../types.gen';
+import { getAuthRedirect, getEventCheckin, getEventCheckinQuery, getEventInfo, getEventList, getUserInfo, getUserInfoByUserId, getUserList, type Options, patchUserUpdate, postAuthExchange, postAuthMagic, postAuthRefresh, postAuthToken, postEventCheckinSubmit } from '../sdk.gen';
+import type { GetAuthRedirectData, GetAuthRedirectError, GetEventCheckinData, GetEventCheckinError, GetEventCheckinQueryData, GetEventCheckinQueryError, GetEventCheckinQueryResponse, GetEventCheckinResponse, GetEventInfoData, GetEventInfoError, GetEventInfoResponse, GetEventListData, GetEventListError, GetEventListResponse, GetUserInfoByUserIdData, GetUserInfoByUserIdError, GetUserInfoByUserIdResponse, GetUserInfoData, GetUserInfoError, GetUserInfoResponse, GetUserListData, GetUserListError, GetUserListResponse, PatchUserUpdateData, PatchUserUpdateError, PatchUserUpdateResponse, PostAuthExchangeData, PostAuthExchangeError, PostAuthExchangeResponse, PostAuthMagicData, PostAuthMagicError, PostAuthMagicResponse, PostAuthRefreshData, PostAuthRefreshError, PostAuthRefreshResponse, PostAuthTokenData, PostAuthTokenError, PostAuthTokenResponse, PostEventCheckinSubmitData, PostEventCheckinSubmitError, PostEventCheckinSubmitResponse } from '../types.gen';

 /**
 * Exchange Auth Code
@@ -312,6 +312,26 @@ export const getUserInfoOptions = (options?: Options<GetUserInfoData>) => queryO
    queryKey: getUserInfoQueryKey(options)
 });

+export const getUserInfoByUserIdQueryKey = (options: Options<GetUserInfoByUserIdData>) => createQueryKey('getUserInfoByUserId', options);
+
+/**
+ * Get Other User Information
+ *
+ * Fetches the complete profile data for the user associated with the provided session/token.
+ */
+export const getUserInfoByUserIdOptions = (options: Options<GetUserInfoByUserIdData>) => queryOptions<GetUserInfoByUserIdResponse, GetUserInfoByUserIdError, GetUserInfoByUserIdResponse, ReturnType<typeof getUserInfoByUserIdQueryKey>>({
+    queryFn: async ({ queryKey, signal }) => {
+        const { data } = await getUserInfoByUserId({
+            ...options,
+            ...queryKey[0],
+            signal,
+            throwOnError: true
+        });
+        return data;
+    },
+    queryKey: getUserInfoByUserIdQueryKey(options)
+});
+
 export const getUserListQueryKey = (options: Options<GetUserListData>) => createQueryKey('getUserList', options);

 /**
--- a/client/cms/src/client/index.ts
+++ b/client/cms/src/client/index.ts
@@ -1,4 +1,4 @@
 // This file is auto-generated by @hey-api/openapi-ts

-export { getAuthRedirect, getEventCheckin, getEventCheckinQuery, getEventInfo, getEventList, getUserInfo, getUserList, type Options, patchUserUpdate, postAuthExchange, postAuthMagic, postAuthRefresh, postAuthToken, postEventCheckinSubmit } from './sdk.gen';
-export type { ClientOptions, DataEventIndexDoc, DataUserIndexDoc, GetAuthRedirectData, GetAuthRedirectError, GetAuthRedirectErrors, GetEventCheckinData, GetEventCheckinError, GetEventCheckinErrors, GetEventCheckinQueryData, GetEventCheckinQueryError, GetEventCheckinQueryErrors, GetEventCheckinQueryResponse, GetEventCheckinQueryResponses, GetEventCheckinResponse, GetEventCheckinResponses, GetEventInfoData, GetEventInfoError, GetEventInfoErrors, GetEventInfoResponse, GetEventInfoResponses, GetEventListData, GetEventListError, GetEventListErrors, GetEventListResponse, GetEventListResponses, GetUserInfoData, GetUserInfoError, GetUserInfoErrors, GetUserInfoResponse, GetUserInfoResponses, GetUserListData, GetUserListError, GetUserListErrors, GetUserListResponse, GetUserListResponses, PatchUserUpdateData, PatchUserUpdateError, PatchUserUpdateErrors, PatchUserUpdateResponse, PatchUserUpdateResponses, PostAuthExchangeData, PostAuthExchangeError, PostAuthExchangeErrors, PostAuthExchangeResponse, PostAuthExchangeResponses, PostAuthMagicData, PostAuthMagicError, PostAuthMagicErrors, PostAuthMagicResponse, PostAuthMagicResponses, PostAuthRefreshData, PostAuthRefreshError, PostAuthRefreshErrors, PostAuthRefreshResponse, PostAuthRefreshResponses, PostAuthTokenData, PostAuthTokenError, PostAuthTokenErrors, PostAuthTokenResponse, PostAuthTokenResponses, PostEventCheckinSubmitData, PostEventCheckinSubmitError, PostEventCheckinSubmitErrors, PostEventCheckinSubmitResponse, PostEventCheckinSubmitResponses, ServiceAuthExchangeData, ServiceAuthExchangeResponse, ServiceAuthMagicData, ServiceAuthMagicResponse, ServiceAuthRefreshData, ServiceAuthTokenData, ServiceAuthTokenResponse, ServiceEventCheckinQueryResponse, ServiceEventCheckinResponse, ServiceEventCheckinSubmitData, ServiceEventEventInfoResponse, ServiceUserUserInfoData, UtilsRespStatus } from './types.gen';
+export { getAuthRedirect, getEventCheckin, getEventCheckinQuery, getEventInfo, getEventList, getUserInfo, getUserInfoByUserId, getUserList, type Options, patchUserUpdate, postAuthExchange, postAuthMagic, postAuthRefresh, postAuthToken, postEventCheckinSubmit } from './sdk.gen';
+export type { ClientOptions, DataEventIndexDoc, DataUserIndexDoc, GetAuthRedirectData, GetAuthRedirectError, GetAuthRedirectErrors, GetEventCheckinData, GetEventCheckinError, GetEventCheckinErrors, GetEventCheckinQueryData, GetEventCheckinQueryError, GetEventCheckinQueryErrors, GetEventCheckinQueryResponse, GetEventCheckinQueryResponses, GetEventCheckinResponse, GetEventCheckinResponses, GetEventInfoData, GetEventInfoError, GetEventInfoErrors, GetEventInfoResponse, GetEventInfoResponses, GetEventListData, GetEventListError, GetEventListErrors, GetEventListResponse, GetEventListResponses, GetUserInfoByUserIdData, GetUserInfoByUserIdError, GetUserInfoByUserIdErrors, GetUserInfoByUserIdResponse, GetUserInfoByUserIdResponses, GetUserInfoData, GetUserInfoError, GetUserInfoErrors, GetUserInfoResponse, GetUserInfoResponses, GetUserListData, GetUserListError, GetUserListErrors, GetUserListResponse, GetUserListResponses, PatchUserUpdateData, PatchUserUpdateError, PatchUserUpdateErrors, PatchUserUpdateResponse, PatchUserUpdateResponses, PostAuthExchangeData, PostAuthExchangeError, PostAuthExchangeErrors, PostAuthExchangeResponse, PostAuthExchangeResponses, PostAuthMagicData, PostAuthMagicError, PostAuthMagicErrors, PostAuthMagicResponse, PostAuthMagicResponses, PostAuthRefreshData, PostAuthRefreshError, PostAuthRefreshErrors, PostAuthRefreshResponse, PostAuthRefreshResponses, PostAuthTokenData, PostAuthTokenError, PostAuthTokenErrors, PostAuthTokenResponse, PostAuthTokenResponses, PostEventCheckinSubmitData, PostEventCheckinSubmitError, PostEventCheckinSubmitErrors, PostEventCheckinSubmitResponse, PostEventCheckinSubmitResponses, ServiceAuthExchangeData, ServiceAuthExchangeResponse, ServiceAuthMagicData, ServiceAuthMagicResponse, ServiceAuthRefreshData, ServiceAuthTokenData, ServiceAuthTokenResponse, ServiceEventCheckinQueryResponse, ServiceEventCheckinResponse, ServiceEventCheckinSubmitData, ServiceUserUserInfoData, UtilsRespStatus } from './types.gen';
--- a/client/cms/src/client/sdk.gen.ts
+++ b/client/cms/src/client/sdk.gen.ts
@@ -2,7 +2,7 @@

 import type { Client, Options as Options2, TDataShape } from './client';
 import { client } from './client.gen';
-import type { GetAuthRedirectData, GetAuthRedirectErrors, GetEventCheckinData, GetEventCheckinErrors, GetEventCheckinQueryData, GetEventCheckinQueryErrors, GetEventCheckinQueryResponses, GetEventCheckinResponses, GetEventInfoData, GetEventInfoErrors, GetEventInfoResponses, GetEventListData, GetEventListErrors, GetEventListResponses, GetUserInfoData, GetUserInfoErrors, GetUserInfoResponses, GetUserListData, GetUserListErrors, GetUserListResponses, PatchUserUpdateData, PatchUserUpdateErrors, PatchUserUpdateResponses, PostAuthExchangeData, PostAuthExchangeErrors, PostAuthExchangeResponses, PostAuthMagicData, PostAuthMagicErrors, PostAuthMagicResponses, PostAuthRefreshData, PostAuthRefreshErrors, PostAuthRefreshResponses, PostAuthTokenData, PostAuthTokenErrors, PostAuthTokenResponses, PostEventCheckinSubmitData, PostEventCheckinSubmitErrors, PostEventCheckinSubmitResponses } from './types.gen';
+import type { GetAuthRedirectData, GetAuthRedirectErrors, GetEventCheckinData, GetEventCheckinErrors, GetEventCheckinQueryData, GetEventCheckinQueryErrors, GetEventCheckinQueryResponses, GetEventCheckinResponses, GetEventInfoData, GetEventInfoErrors, GetEventInfoResponses, GetEventListData, GetEventListErrors, GetEventListResponses, GetUserInfoByUserIdData, GetUserInfoByUserIdErrors, GetUserInfoByUserIdResponses, GetUserInfoData, GetUserInfoErrors, GetUserInfoResponses, GetUserListData, GetUserListErrors, GetUserListResponses, PatchUserUpdateData, PatchUserUpdateErrors, PatchUserUpdateResponses, PostAuthExchangeData, PostAuthExchangeErrors, PostAuthExchangeResponses, PostAuthMagicData, PostAuthMagicErrors, PostAuthMagicResponses, PostAuthRefreshData, PostAuthRefreshErrors, PostAuthRefreshResponses, PostAuthTokenData, PostAuthTokenErrors, PostAuthTokenResponses, PostEventCheckinSubmitData, PostEventCheckinSubmitErrors, PostEventCheckinSubmitResponses } from './types.gen';

 export type Options<TData extends TDataShape = TDataShape, ThrowOnError extends boolean = boolean> = Options2<TData, ThrowOnError> & {
    /**
@@ -130,6 +130,13 @@ export const getEventList = <ThrowOnError extends boolean = false>(options: Opti
 */
 export const getUserInfo = <ThrowOnError extends boolean = false>(options?: Options<GetUserInfoData, ThrowOnError>) => (options?.client ?? client).get<GetUserInfoResponses, GetUserInfoErrors, ThrowOnError>({ url: '/user/info', ...options });

+/**
+ * Get Other User Information
+ *
+ * Fetches the complete profile data for the user associated with the provided session/token.
+ */
+export const getUserInfoByUserId = <ThrowOnError extends boolean = false>(options: Options<GetUserInfoByUserIdData, ThrowOnError>) => (options.client ?? client).get<GetUserInfoByUserIdResponses, GetUserInfoByUserIdErrors, ThrowOnError>({ url: '/user/info/{user_id}', ...options });
+
 /**
 * List Users
 *
--- a/client/cms/src/client/types.gen.ts
+++ b/client/cms/src/client/types.gen.ts
@@ -10,6 +10,7 @@ export type DataEventIndexDoc = {
    event_id?: string;
    name?: string;
    start_time?: string;
+    thumbnail?: string;
    type?: string;
 };

@@ -71,12 +72,6 @@ export type ServiceEventCheckinSubmitData = {
    checkin_code?: string;
 };

-export type ServiceEventEventInfoResponse = {
-    end_time?: string;
-    name?: string;
-    start_time?: string;
-};
-
 export type ServiceUserUserInfoData = {
    allow_public?: boolean;
    avatar?: string;
@@ -370,6 +365,14 @@ export type GetEventCheckinErrors = {
            [key: string]: unknown;
        };
    };
+    /**
+     * Missing User ID / Unauthorized
+     */
+    401: UtilsRespStatus & {
+        data?: {
+            [key: string]: unknown;
+        };
+    };
    /**
     * Internal Server Error
     */
@@ -494,6 +497,14 @@ export type GetEventInfoErrors = {
            [key: string]: unknown;
        };
    };
+    /**
+     * Missing User ID / Unauthorized
+     */
+    401: UtilsRespStatus & {
+        data?: {
+            [key: string]: unknown;
+        };
+    };
    /**
     * Event Not Found
     */
@@ -519,7 +530,7 @@ export type GetEventInfoResponses = {
     * Successful retrieval
     */
    200: UtilsRespStatus & {
-        data?: ServiceEventEventInfoResponse;
+        data?: DataEventIndexDoc;
    };
 };

@@ -550,6 +561,14 @@ export type GetEventListErrors = {
            [key: string]: unknown;
        };
    };
+    /**
+     * Missing User ID / Unauthorized
+     */
+    401: UtilsRespStatus & {
+        data?: {
+            [key: string]: unknown;
+        };
+    };
    /**
     * Internal Server Error (Database query failed)
     */
@@ -584,7 +603,7 @@ export type GetUserInfoErrors = {
    /**
     * Missing User ID / Unauthorized
     */
-    403: UtilsRespStatus & {
+    401: UtilsRespStatus & {
        data?: {
            [key: string]: unknown;
        };
@@ -620,6 +639,66 @@ export type GetUserInfoResponses = {

 export type GetUserInfoResponse = GetUserInfoResponses[keyof GetUserInfoResponses];

+export type GetUserInfoByUserIdData = {
+    body?: never;
+    path: {
+        /**
+         * Other user id
+         */
+        user_id: string;
+    };
+    query?: never;
+    url: '/user/info/{user_id}';
+};
+
+export type GetUserInfoByUserIdErrors = {
+    /**
+     * Missing User ID / Unauthorized
+     */
+    401: UtilsRespStatus & {
+        data?: {
+            [key: string]: unknown;
+        };
+    };
+    /**
+     * User Not Public
+     */
+    403: UtilsRespStatus & {
+        data?: {
+            [key: string]: unknown;
+        };
+    };
+    /**
+     * User Not Found
+     */
+    404: UtilsRespStatus & {
+        data?: {
+            [key: string]: unknown;
+        };
+    };
+    /**
+     * Internal Server Error (UUID Parse Failed)
+     */
+    500: UtilsRespStatus & {
+        data?: {
+            [key: string]: unknown;
+        };
+    };
+};
+
+export type GetUserInfoByUserIdError = GetUserInfoByUserIdErrors[keyof GetUserInfoByUserIdErrors];
+
+export type GetUserInfoByUserIdResponses = {
+    /**
+     * Successful profile retrieval
+     */
+    200: UtilsRespStatus & {
+        data?: ServiceUserUserInfoData;
+    };
+};
+
+export type GetUserInfoByUserIdResponse = GetUserInfoByUserIdResponses[keyof GetUserInfoByUserIdResponses];
+
 export type GetUserListData = {
    body?: never;
    path?: never;
@@ -645,6 +724,14 @@ export type GetUserListErrors = {
            [key: string]: unknown;
        };
    };
+    /**
+     * Missing User ID / Unauthorized
+     */
+    401: UtilsRespStatus & {
+        data?: {
+            [key: string]: unknown;
+        };
+    };
    /**
     * Internal Server Error (Search Engine or Missing Offset)
     */
@@ -690,7 +777,7 @@ export type PatchUserUpdateErrors = {
    /**
     * Missing User ID / Unauthorized
     */
-    403: UtilsRespStatus & {
+    401: UtilsRespStatus & {
        data?: {
            [key: string]: unknown;
        };
--- a/client/cms/src/client/zod.gen.ts
+++ b/client/cms/src/client/zod.gen.ts
@@ -8,6 +8,7 @@ export const zDataEventIndexDoc = z.object({
    event_id: z.optional(z.string()),
    name: z.optional(z.string()),
    start_time: z.optional(z.string()),
+    thumbnail: z.optional(z.string()),
    type: z.optional(z.string())
 });

@@ -69,12 +70,6 @@ export const zServiceEventCheckinSubmitData = z.object({
    checkin_code: z.optional(z.string())
 });

-export const zServiceEventEventInfoResponse = z.object({
-    end_time: z.optional(z.string()),
-    name: z.optional(z.string()),
-    start_time: z.optional(z.string())
-});
-
 export const zServiceUserUserInfoData = z.object({
    allow_public: z.optional(z.boolean()),
    avatar: z.optional(z.string()),
@@ -212,7 +207,7 @@ export const zGetEventInfoData = z.object({
 * Successful retrieval
 */
 export const zGetEventInfoResponse = zUtilsRespStatus.and(z.object({
-    data: z.optional(zServiceEventEventInfoResponse)
+    data: z.optional(zDataEventIndexDoc)
 }));

 export const zGetEventListData = z.object({
@@ -244,6 +239,21 @@ export const zGetUserInfoResponse = zUtilsRespStatus.and(z.object({
    data: z.optional(zServiceUserUserInfoData)
 }));

+export const zGetUserInfoByUserIdData = z.object({
+    body: z.optional(z.never()),
+    path: z.object({
+        user_id: z.string()
+    }),
+    query: z.optional(z.never())
+});
+
+/**
+ * Successful profile retrieval
+ */
+export const zGetUserInfoByUserIdResponse = zUtilsRespStatus.and(z.object({
+    data: z.optional(zServiceUserUserInfoData)
+}));
+
 export const zGetUserListData = z.object({
    body: z.optional(z.never()),
    path: z.optional(z.never()),
--- a/client/cms/src/components/profile/edit-profile.dialog.container.tsx
+++ b/client/cms/src/components/profile/edit-profile.dialog.container.tsx
@@ -0,0 +1,15 @@
+import type { ServiceUserUserInfoData } from '@/client';
+import { useUpdateUser } from '@/hooks/data/useUpdateUser';
+import { EditProfileDialogView } from './edit-profile.dialog.view';
+
+export function EditProfileDialogContainer({ data }: { data: ServiceUserUserInfoData }) {
+  const { mutateAsync } = useUpdateUser();
+  return (
+    <EditProfileDialogView
+      user={data}
+      updateProfile={async (data) => {
+        await mutateAsync({ body: data });
+      }}
+    />
+  );
+}
--- a/client/cms/src/components/profile/edit-profile.dialog.view.tsx
+++ b/client/cms/src/components/profile/edit-profile.dialog.view.tsx
@@ -1,5 +1,9 @@
+import type { ServiceUserUserInfoData } from '@/client';
 import { useForm } from '@tanstack/react-form';
-import { useState } from 'react';
+import {
+  useEffect,
+  useState,
+} from 'react';
 import { toast } from 'sonner';
 import z from 'zod';
 import { Button } from '@/components/ui/button';
@@ -20,8 +24,6 @@ import {
 import {
  Input,
 } from '@/components/ui/input';
-import { useUpdateUser } from '@/hooks/data/useUpdateUser';
-import { useUserInfo } from '@/hooks/data/useUserInfo';
 import { Switch } from '../ui/switch';

 const formSchema = z.object({
@@ -31,11 +33,7 @@ const formSchema = z.object({
  avatar: z.url().or(z.literal('')),
  allow_public: z.boolean(),
 });
-export function EditProfileDialog() {
-  const { data } = useUserInfo();
-  const user = data.data!;
-  const { mutateAsync } = useUpdateUser();
-
+export function EditProfileDialogView({ user, updateProfile }: { user: ServiceUserUserInfoData; updateProfile: (data: ServiceUserUserInfoData) => Promise<void> }) {
  const form = useForm({
    defaultValues: {
      avatar: user.avatar,
@@ -51,7 +49,7 @@ export function EditProfileDialog() {
      value,
    }) => {
      try {
-        await mutateAsync({ body: value });
+        await updateProfile(value);
        toast.success('个人资料更新成功');
      }
      catch (error) {
@@ -63,11 +61,14 @@ export function EditProfileDialog() {

  const [open, setOpen] = useState(false);

+  useEffect(() => {
    if (!open) {
-    setTimeout(() => {
+      const id = setTimeout(() => {
        form.reset();
      }, 200);
+      return () => clearTimeout(id);
    }
+  }, [open, form]);

  return (
    <Dialog open={open} onOpenChange={setOpen}>
--- a/client/cms/src/components/profile/profile.container.tsx
+++ b/client/cms/src/components/profile/profile.container.tsx
@@ -0,0 +1,17 @@
+import { useUpdateUser } from '@/hooks/data/useUpdateUser';
+import { useOtherUserInfo } from '@/hooks/data/useUserInfo';
+import { utf8ToBase64 } from '@/lib/utils';
+import { ProfileView } from './profile.view';
+
+export function ProfileContainer({ userId }: { userId: string }) {
+  const { data } = useOtherUserInfo(userId);
+  const { mutateAsync } = useUpdateUser();
+  return (
+    <ProfileView
+      user={data.data!}
+      onSaveBio={async (bio) => {
+        await mutateAsync({ body: { bio: utf8ToBase64(bio) } });
+      }}
+    />
+  );
+}
--- a/client/cms/src/components/profile/profile.error.tsx
+++ b/client/cms/src/components/profile/profile.error.tsx
@@ -0,0 +1,30 @@
+import { Mail } from 'lucide-react';
+import { Skeleton } from '../ui/skeleton';
+
+export function ProfileError({ reason }: { reason: string }) {
+  return (
+    <div className="flex flex-col justify-center w-full lg:w-auto h-full lg:h-auto lg:flex-row lg:gap-8">
+      <div className="flex w-full flex-row mt-2 lg:mt-0 lg:flex-col lg:w-max">
+        <div className="flex flex-col w-full gap-3">
+          <div className="flex flex-col w-full gap-3">
+            <div className="flex flex-row gap-3 w-full lg:flex-col">
+              <Skeleton className="size-16 rounded-full border-2 border-muted lg:size-64" />
+              <div className="flex flex-1 flex-col justify-center lg:mt-3 gap-2">
+                <Skeleton className="w-32 h-8" />
+                <Skeleton className="w-20 h-6" />
+              </div>
+            </div>
+            <div className="flex flex-row gap-2 items-center text-sm px-1 lg:px-0">
+              <Mail className="h-4 w-4 stroke-muted-foreground" />
+              <Skeleton className="w-32 h-4" />
+            </div>
+          </div>
+          <Skeleton className="w-64 h-[40px]" />
+        </div>
+      </div>
+      <Skeleton className="relative rounded-md border border-muted w-full flex-1 lg:flex-auto min-h-72 lg:h-full mt-4 lg:mt-0 prose dark:prose-invert max-w-[1012px] self-center flex items-center justify-center">
+        {reason}
+      </Skeleton>
+    </div>
+  );
+}
--- a/client/cms/src/components/profile/profile.skeleton.tsx
+++ b/client/cms/src/components/profile/profile.skeleton.tsx
@@ -0,0 +1,29 @@
+import { Mail } from 'lucide-react';
+import { Skeleton } from '../ui/skeleton';
+
+export function ProfileSkeleton() {
+  return (
+    <div className="flex flex-col justify-center w-full lg:w-auto h-full lg:h-auto lg:flex-row lg:gap-8">
+      <div className="flex w-full flex-row mt-2 lg:mt-0 lg:flex-col lg:w-max">
+        <div className="flex flex-col w-full gap-3">
+          <div className="flex flex-col w-full gap-3">
+            <div className="flex flex-row gap-3 w-full lg:flex-col">
+              <Skeleton className="size-16 rounded-full border-2 border-muted lg:size-64" />
+              <div className="flex flex-1 flex-col justify-center lg:mt-3 gap-2">
+                <Skeleton className="w-32 h-8" />
+                <Skeleton className="w-20 h-6" />
+              </div>
+            </div>
+            <div className="flex flex-row gap-2 items-center text-sm px-1 lg:px-0">
+              <Mail className="h-4 w-4 stroke-muted-foreground" />
+              <Skeleton className="w-32 h-4" />
+            </div>
+          </div>
+          <Skeleton className="w-64 h-[40px]" />
+        </div>
+      </div>
+      <Skeleton className="relative rounded-md border border-muted w-full flex-1 lg:flex-auto min-h-72 lg:h-full mt-4 lg:mt-0 prose dark:prose-invert max-w-[1012px] self-center">
+      </Skeleton>
+    </div>
+  );
+}
--- a/client/cms/src/components/profile/profile.view.tsx
+++ b/client/cms/src/components/profile/profile.view.tsx
@@ -1,24 +1,23 @@
+import type { ServiceUserUserInfoData } from '@/client';
 import { identicon } from '@dicebear/collection';
 import { createAvatar } from '@dicebear/core';
 import MDEditor from '@uiw/react-md-editor';
-import { isNil } from 'lodash-es';
+import {
+  isEmpty,
+  isNil,
+} from 'lodash-es';
 import { Mail, Pencil } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import Markdown from 'react-markdown';
 import { toast } from 'sonner';
 import { Avatar, AvatarImage } from '@/components/ui/avatar';
-import { useUpdateUser } from '@/hooks/data/useUpdateUser';
-import { useUserInfo } from '@/hooks/data/useUserInfo';
-import { base64ToUtf8, utf8ToBase64 } from '@/lib/utils';
+import { base64ToUtf8 } from '@/lib/utils';
 import { Button } from '../ui/button';
-import { EditProfileDialog } from './edit-profile-dialog';
+import { EditProfileDialogContainer } from './edit-profile.dialog.container';

-export function MainProfile() {
-  const { data } = useUserInfo();
-  const user = data.data!;
+export function ProfileView({ user, onSaveBio }: { user: ServiceUserUserInfoData; onSaveBio: (bio: string) => Promise<void> }) {
  const [bio, setBio] = useState<string | undefined>(() => base64ToUtf8(user.bio ?? ''));
  const [enableBioEdit, setEnableBioEdit] = useState(false);
-  const { mutateAsync } = useUpdateUser();

  const IdentIcon = useMemo(() => {
    const avatar = createAvatar(identicon, {
@@ -35,7 +34,7 @@ export function MainProfile() {
          <div className="flex flex-col w-full gap-3">
            <div className="flex flex-row gap-3 w-full lg:flex-col">
              <Avatar className="size-16 rounded-full border-2 border-muted lg:size-64">
-                {user.avatar !== undefined ? <AvatarImage src={user.avatar} alt={user.nickname} /> : IdentIcon}
+                {!isEmpty(user.avatar) ? <AvatarImage src={user.avatar} alt={user.nickname} /> : IdentIcon}
              </Avatar>
              <div className="flex flex-1 flex-col justify-center lg:mt-3">
                <span className="font-semibold text-2xl" aria-hidden="true">{user.nickname}</span>
@@ -47,7 +46,7 @@ export function MainProfile() {
              {user.email}
            </div>
          </div>
-          <EditProfileDialog />
+          <EditProfileDialogContainer data={user} />
        </div>
      </div>
      <section className="relative rounded-md border border-muted w-full flex-1 lg:flex-auto min-h-72 lg:h-full mt-4 lg:mt-0 prose dark:prose-invert max-w-[1012px] self-center">
@@ -71,7 +70,7 @@ export function MainProfile() {
            else {
              if (!isNil(bio)) {
                try {
-                  await mutateAsync({ body: { bio: utf8ToBase64(bio) } });
+                  await onSaveBio(bio);
                  setEnableBioEdit(false);
                }
                catch (error) {
--- a/client/cms/src/components/sidebar/app-sidebar.tsx
+++ b/client/cms/src/components/sidebar/app-sidebar.tsx
@@ -1,3 +1,4 @@
+import type { NavData } from '@/lib/navData';
 import * as React from 'react';
 import NixOSLogo from '@/assets/nixos.svg?react';
 import { NavMain } from '@/components/sidebar/nav-main';
@@ -11,10 +12,9 @@ import {
  SidebarMenuButton,
  SidebarMenuItem,
 } from '@/components/ui/sidebar';
-import { navData } from '@/lib/navData';
 import { NavUser } from './nav-user';

-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+export function AppSidebar({ navData, ...props }: React.ComponentProps<typeof Sidebar> & { navData: NavData }) {
  return (
    <Sidebar collapsible="offcanvas" {...props}>
      <SidebarHeader>
--- a/client/cms/src/components/sidebar/nav-user.tsx
+++ b/client/cms/src/components/sidebar/nav-user.tsx
@@ -5,6 +5,7 @@ import {
  IconDotsVertical,
  IconLogout,
 } from '@tabler/icons-react';
+import { isEmpty } from 'lodash-es';
 import { useMemo } from 'react';
 import {
  Avatar,
@@ -25,15 +26,14 @@ import {
  useSidebar,
 } from '@/components/ui/sidebar';
 import { useUserInfo } from '@/hooks/data/useUserInfo';
-import { useLogout } from '@/hooks/useLogout';
+import { logout } from '@/lib/token';
 import { withFallback } from '../hoc/with-fallback';
 import { Skeleton } from '../ui/skeleton';

-function NavUser_() {
+export function NavUser_() {
  const { isMobile } = useSidebar();
  const { data } = useUserInfo();
  const user = data.data!;
-  const { logout } = useLogout();

  const IdentIcon = useMemo(() => {
    const avatar = createAvatar(identicon, {
@@ -53,7 +53,7 @@ function NavUser_() {
              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
            >
              <Avatar className="h-8 w-8 rounded-lg">
-                {user.avatar !== undefined ? <AvatarImage src={user.avatar} alt={user.nickname} /> : IdentIcon}
+                {!isEmpty(user.avatar) ? <AvatarImage src={user.avatar} alt={user.nickname} /> : IdentIcon}
              </Avatar>
              <div className="grid flex-1 text-left text-sm leading-tight">
                <span className="truncate font-medium">{user.nickname}</span>
@@ -73,7 +73,7 @@ function NavUser_() {
            <DropdownMenuLabel className="p-0 font-normal">
              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                <Avatar className="h-8 w-8 rounded-lg">
-                  {user.avatar !== undefined ? <AvatarImage src={user.avatar} alt={user.nickname} /> : IdentIcon}
+                  {!isEmpty(user.avatar) ? <AvatarImage src={user.avatar} alt={user.nickname} /> : IdentIcon}
                </Avatar>
                <div className="grid flex-1 text-left text-sm leading-tight">
                  <span className="truncate font-medium">{user.nickname}</span>
@@ -84,7 +84,7 @@ function NavUser_() {
              </div>
            </DropdownMenuLabel>
            <DropdownMenuSeparator />
-            <DropdownMenuItem onClick={logout}>
+            <DropdownMenuItem onClick={_e => logout()}>
              <IconLogout />
              登出
            </DropdownMenuItem>
--- a/client/cms/src/components/site-header.tsx
+++ b/client/cms/src/components/site-header.tsx
@@ -1,18 +1,7 @@
-import { useRouterState } from '@tanstack/react-router';
 import { Separator } from '@/components/ui/separator';
 import { SidebarTrigger } from '@/components/ui/sidebar';
-import { navData } from '@/lib/navData';
-
-export function SiteHeader() {
-  const pathname = useRouterState({ select: state => state.location.pathname });
-  const allNavItems = [...navData.navMain, ...navData.navSecondary];
-  const currentTitle
-    = allNavItems.find(item =>
-      item.url === '/'
-        ? pathname === '/'
-        : pathname.startsWith(item.url),
-    )?.title ?? '工作台';

+export function SiteHeader({ title }: { title: string }) {
  return (
    <header className="flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
      <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
@@ -21,7 +10,7 @@ export function SiteHeader() {
          orientation="vertical"
          className="mx-2 data-[orientation=vertical]:h-4"
        />
-        <h1 className="text-base font-medium">{currentTitle}</h1>
+        <h1 className="text-base font-medium">{title}</h1>
      </div>
    </header>
  );
--- a/client/cms/src/components/workbenchCards/event-card.tsx
+++ b/client/cms/src/components/workbenchCards/event-card.tsx
@@ -0,0 +1,39 @@
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardAction,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+export function EventCard({ type, coverImage, eventName, description, startTime, endTime }:
+  {
+    type: 'official' | 'party',
+    coverImage: string, eventName: string, description: string, startTime: string, endTime: string
+  }) {
+  return (
+    <Card className="relative mx-auto w-full max-w-sm pt-0">
+      <div className="absolute inset-0 z-30 aspect-video bg-black/35" />
+      <img
+        src="https://avatar.vercel.sh/shadcn1"
+        alt="Event cover"
+        className="relative z-20 aspect-video w-full object-cover brightness-60 grayscale dark:brightness-40"
+      />
+      <CardHeader>
+        <CardAction>
+          <Badge variant="secondary">Featured</Badge>
+        </CardAction>
+        <CardTitle>Design systems meetup</CardTitle>
+        <CardDescription>
+          A practical talk on component APIs, accessibility, and shipping
+          faster.
+        </CardDescription>
+      </CardHeader>
+      <CardFooter>
+        <Button className="w-full">View Event</Button>
+      </CardFooter>
+    </Card>
+  )
+}
--- a/client/cms/src/hooks/data/useUpdateUser.ts
+++ b/client/cms/src/hooks/data/useUpdateUser.ts
@@ -1,12 +1,17 @@
+import type { ServiceUserUserInfoData } from '@/client';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { getUserInfoQueryKey, patchUserUpdateMutation } from '@/client/@tanstack/react-query.gen';
+import { getUserInfoByUserIdQueryKey, getUserInfoQueryKey, patchUserUpdateMutation } from '@/client/@tanstack/react-query.gen';

 export function useUpdateUser() {
  const queryClient = useQueryClient();
+  const data: { data: ServiceUserUserInfoData | undefined } | undefined = queryClient.getQueryData(getUserInfoQueryKey());
  return useMutation({
    ...patchUserUpdateMutation(),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: getUserInfoQueryKey() });
+      if ((data?.data?.user_id) != null) {
+        await queryClient.invalidateQueries({ queryKey: getUserInfoByUserIdQueryKey({ path: { user_id: data.data.user_id } }) });
+      }
    },
  });
 }
--- a/client/cms/src/hooks/data/useUserInfo.ts
+++ b/client/cms/src/hooks/data/useUserInfo.ts
@@ -1,5 +1,8 @@
 import { useSuspenseQuery } from '@tanstack/react-query';
-import { getUserInfoOptions } from '@/client/@tanstack/react-query.gen';
+import {
+  getUserInfoByUserIdOptions,
+  getUserInfoOptions,
+} from '@/client/@tanstack/react-query.gen';

 export function useUserInfo() {
  return useSuspenseQuery({
@@ -7,3 +10,11 @@ export function useUserInfo() {
    staleTime: 10 * 60 * 1000,
  });
 }
+
+export function useOtherUserInfo(userId: string) {
+  return useSuspenseQuery({
+    ...getUserInfoByUserIdOptions({ path: { user_id: userId } }),
+    staleTime: 10 * 60 * 1000,
+    retry: (_failureCount, error) => error.code !== 403,
+  });
+}
--- a/client/cms/src/hooks/useLogout.ts
+++ b/client/cms/src/hooks/useLogout.ts
@@ -1,14 +0,0 @@
-import { useNavigate } from '@tanstack/react-router';
-import { useCallback } from 'react';
-import { clearTokens } from '@/lib/token';
-
-export function useLogout() {
-  const navigate = useNavigate();
-
-  const logout = useCallback(() => {
-    clearTokens();
-    void navigate({ to: '/authorize' });
-  }, [navigate]);
-
-  return { logout };
-}
--- a/client/cms/src/lib/navData.ts
+++ b/client/cms/src/lib/navData.ts
@@ -1,4 +1,5 @@
 import {
+  IconCalendarEvent,
  IconDashboard,
  IconUser,
 } from '@tabler/icons-react';
@@ -10,6 +11,11 @@ export const navData = {
      url: '/',
      icon: IconDashboard,
    },
+    {
+      title: '活动列表',
+      url: '/events',
+      icon: IconCalendarEvent,
+    },
  ],
  navSecondary: [
    {
@@ -19,3 +25,4 @@ export const navData = {
    },
  ],
 };
+export type NavData = typeof navData;
--- a/client/cms/src/lib/token.ts
+++ b/client/cms/src/lib/token.ts
@@ -44,9 +44,9 @@ export async function doRefreshToken(refreshToken: string): Promise<ServiceAuthT
  return data?.data;
 }

-export function logout(message: string = 'Logged out') {
+export function logout(message: string = '已登出') {
  clearTokens();
  void router.navigate({ to: '/authorize' }).then(() => {
-    toast.error(message);
+    toast.info(message);
  });
 }
--- a/client/cms/src/routeTree.gen.ts
+++ b/client/cms/src/routeTree.gen.ts
@@ -12,9 +12,11 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as TokenRouteImport } from './routes/token'
 import { Route as MagicLinkSentRouteImport } from './routes/magicLinkSent'
 import { Route as AuthorizeRouteImport } from './routes/authorize'
-import { Route as SidebarLayoutRouteImport } from './routes/_sidebarLayout'
-import { Route as SidebarLayoutIndexRouteImport } from './routes/_sidebarLayout/index'
-import { Route as SidebarLayoutProfileRouteImport } from './routes/_sidebarLayout/profile'
+import { Route as WorkbenchLayoutRouteImport } from './routes/_workbenchLayout'
+import { Route as WorkbenchLayoutIndexRouteImport } from './routes/_workbenchLayout/index'
+import { Route as WorkbenchLayoutEventsRouteImport } from './routes/_workbenchLayout/events'
+import { Route as WorkbenchLayoutProfileIndexRouteImport } from './routes/_workbenchLayout/profile.index'
+import { Route as WorkbenchLayoutProfileUserIdRouteImport } from './routes/_workbenchLayout/profile.$userId'

 const TokenRoute = TokenRouteImport.update({
  id: '/token',
@@ -31,61 +33,95 @@ const AuthorizeRoute = AuthorizeRouteImport.update({
  path: '/authorize',
  getParentRoute: () => rootRouteImport,
 } as any)
-const SidebarLayoutRoute = SidebarLayoutRouteImport.update({
-  id: '/_sidebarLayout',
+const WorkbenchLayoutRoute = WorkbenchLayoutRouteImport.update({
+  id: '/_workbenchLayout',
  getParentRoute: () => rootRouteImport,
 } as any)
-const SidebarLayoutIndexRoute = SidebarLayoutIndexRouteImport.update({
+const WorkbenchLayoutIndexRoute = WorkbenchLayoutIndexRouteImport.update({
  id: '/',
  path: '/',
-  getParentRoute: () => SidebarLayoutRoute,
+  getParentRoute: () => WorkbenchLayoutRoute,
 } as any)
-const SidebarLayoutProfileRoute = SidebarLayoutProfileRouteImport.update({
-  id: '/profile',
-  path: '/profile',
-  getParentRoute: () => SidebarLayoutRoute,
+const WorkbenchLayoutEventsRoute = WorkbenchLayoutEventsRouteImport.update({
+  id: '/events',
+  path: '/events',
+  getParentRoute: () => WorkbenchLayoutRoute,
 } as any)
+const WorkbenchLayoutProfileIndexRoute =
+  WorkbenchLayoutProfileIndexRouteImport.update({
+    id: '/profile/',
+    path: '/profile/',
+    getParentRoute: () => WorkbenchLayoutRoute,
+  } as any)
+const WorkbenchLayoutProfileUserIdRoute =
+  WorkbenchLayoutProfileUserIdRouteImport.update({
+    id: '/profile/$userId',
+    path: '/profile/$userId',
+    getParentRoute: () => WorkbenchLayoutRoute,
+  } as any)

 export interface FileRoutesByFullPath {
-  '/': typeof SidebarLayoutIndexRoute
+  '/': typeof WorkbenchLayoutIndexRoute
  '/authorize': typeof AuthorizeRoute
  '/magicLinkSent': typeof MagicLinkSentRoute
  '/token': typeof TokenRoute
-  '/profile': typeof SidebarLayoutProfileRoute
+  '/events': typeof WorkbenchLayoutEventsRoute
+  '/profile/$userId': typeof WorkbenchLayoutProfileUserIdRoute
+  '/profile/': typeof WorkbenchLayoutProfileIndexRoute
 }
 export interface FileRoutesByTo {
  '/authorize': typeof AuthorizeRoute
  '/magicLinkSent': typeof MagicLinkSentRoute
  '/token': typeof TokenRoute
-  '/profile': typeof SidebarLayoutProfileRoute
-  '/': typeof SidebarLayoutIndexRoute
+  '/events': typeof WorkbenchLayoutEventsRoute
+  '/': typeof WorkbenchLayoutIndexRoute
+  '/profile/$userId': typeof WorkbenchLayoutProfileUserIdRoute
+  '/profile': typeof WorkbenchLayoutProfileIndexRoute
 }
 export interface FileRoutesById {
  __root__: typeof rootRouteImport
-  '/_sidebarLayout': typeof SidebarLayoutRouteWithChildren
+  '/_workbenchLayout': typeof WorkbenchLayoutRouteWithChildren
  '/authorize': typeof AuthorizeRoute
  '/magicLinkSent': typeof MagicLinkSentRoute
  '/token': typeof TokenRoute
-  '/_sidebarLayout/profile': typeof SidebarLayoutProfileRoute
-  '/_sidebarLayout/': typeof SidebarLayoutIndexRoute
+  '/_workbenchLayout/events': typeof WorkbenchLayoutEventsRoute
+  '/_workbenchLayout/': typeof WorkbenchLayoutIndexRoute
+  '/_workbenchLayout/profile/$userId': typeof WorkbenchLayoutProfileUserIdRoute
+  '/_workbenchLayout/profile/': typeof WorkbenchLayoutProfileIndexRoute
 }
 export interface FileRouteTypes {
  fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/authorize' | '/magicLinkSent' | '/token' | '/profile'
-  fileRoutesByTo: FileRoutesByTo
-  to: '/authorize' | '/magicLinkSent' | '/token' | '/profile' | '/'
-  id:
-    | '__root__'
-    | '/_sidebarLayout'
+  fullPaths:
+    | '/'
    | '/authorize'
    | '/magicLinkSent'
    | '/token'
-    | '/_sidebarLayout/profile'
-    | '/_sidebarLayout/'
+    | '/events'
+    | '/profile/$userId'
+    | '/profile/'
+  fileRoutesByTo: FileRoutesByTo
+  to:
+    | '/authorize'
+    | '/magicLinkSent'
+    | '/token'
+    | '/events'
+    | '/'
+    | '/profile/$userId'
+    | '/profile'
+  id:
+    | '__root__'
+    | '/_workbenchLayout'
+    | '/authorize'
+    | '/magicLinkSent'
+    | '/token'
+    | '/_workbenchLayout/events'
+    | '/_workbenchLayout/'
+    | '/_workbenchLayout/profile/$userId'
+    | '/_workbenchLayout/profile/'
  fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
-  SidebarLayoutRoute: typeof SidebarLayoutRouteWithChildren
+  WorkbenchLayoutRoute: typeof WorkbenchLayoutRouteWithChildren
  AuthorizeRoute: typeof AuthorizeRoute
  MagicLinkSentRoute: typeof MagicLinkSentRoute
  TokenRoute: typeof TokenRoute
@@ -114,46 +150,64 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof AuthorizeRouteImport
      parentRoute: typeof rootRouteImport
    }
-    '/_sidebarLayout': {
-      id: '/_sidebarLayout'
+    '/_workbenchLayout': {
+      id: '/_workbenchLayout'
      path: ''
      fullPath: '/'
-      preLoaderRoute: typeof SidebarLayoutRouteImport
+      preLoaderRoute: typeof WorkbenchLayoutRouteImport
      parentRoute: typeof rootRouteImport
    }
-    '/_sidebarLayout/': {
-      id: '/_sidebarLayout/'
+    '/_workbenchLayout/': {
+      id: '/_workbenchLayout/'
      path: '/'
      fullPath: '/'
-      preLoaderRoute: typeof SidebarLayoutIndexRouteImport
-      parentRoute: typeof SidebarLayoutRoute
+      preLoaderRoute: typeof WorkbenchLayoutIndexRouteImport
+      parentRoute: typeof WorkbenchLayoutRoute
    }
-    '/_sidebarLayout/profile': {
-      id: '/_sidebarLayout/profile'
+    '/_workbenchLayout/events': {
+      id: '/_workbenchLayout/events'
+      path: '/events'
+      fullPath: '/events'
+      preLoaderRoute: typeof WorkbenchLayoutEventsRouteImport
+      parentRoute: typeof WorkbenchLayoutRoute
+    }
+    '/_workbenchLayout/profile/': {
+      id: '/_workbenchLayout/profile/'
      path: '/profile'
-      fullPath: '/profile'
-      preLoaderRoute: typeof SidebarLayoutProfileRouteImport
-      parentRoute: typeof SidebarLayoutRoute
+      fullPath: '/profile/'
+      preLoaderRoute: typeof WorkbenchLayoutProfileIndexRouteImport
+      parentRoute: typeof WorkbenchLayoutRoute
+    }
+    '/_workbenchLayout/profile/$userId': {
+      id: '/_workbenchLayout/profile/$userId'
+      path: '/profile/$userId'
+      fullPath: '/profile/$userId'
+      preLoaderRoute: typeof WorkbenchLayoutProfileUserIdRouteImport
+      parentRoute: typeof WorkbenchLayoutRoute
    }
  }
 }

-interface SidebarLayoutRouteChildren {
-  SidebarLayoutProfileRoute: typeof SidebarLayoutProfileRoute
-  SidebarLayoutIndexRoute: typeof SidebarLayoutIndexRoute
+interface WorkbenchLayoutRouteChildren {
+  WorkbenchLayoutEventsRoute: typeof WorkbenchLayoutEventsRoute
+  WorkbenchLayoutIndexRoute: typeof WorkbenchLayoutIndexRoute
+  WorkbenchLayoutProfileUserIdRoute: typeof WorkbenchLayoutProfileUserIdRoute
+  WorkbenchLayoutProfileIndexRoute: typeof WorkbenchLayoutProfileIndexRoute
 }

-const SidebarLayoutRouteChildren: SidebarLayoutRouteChildren = {
-  SidebarLayoutProfileRoute: SidebarLayoutProfileRoute,
-  SidebarLayoutIndexRoute: SidebarLayoutIndexRoute,
+const WorkbenchLayoutRouteChildren: WorkbenchLayoutRouteChildren = {
+  WorkbenchLayoutEventsRoute: WorkbenchLayoutEventsRoute,
+  WorkbenchLayoutIndexRoute: WorkbenchLayoutIndexRoute,
+  WorkbenchLayoutProfileUserIdRoute: WorkbenchLayoutProfileUserIdRoute,
+  WorkbenchLayoutProfileIndexRoute: WorkbenchLayoutProfileIndexRoute,
 }

-const SidebarLayoutRouteWithChildren = SidebarLayoutRoute._addFileChildren(
-  SidebarLayoutRouteChildren,
+const WorkbenchLayoutRouteWithChildren = WorkbenchLayoutRoute._addFileChildren(
+  WorkbenchLayoutRouteChildren,
 )

 const rootRouteChildren: RootRouteChildren = {
-  SidebarLayoutRoute: SidebarLayoutRouteWithChildren,
+  WorkbenchLayoutRoute: WorkbenchLayoutRouteWithChildren,
  AuthorizeRoute: AuthorizeRoute,
  MagicLinkSentRoute: MagicLinkSentRoute,
  TokenRoute: TokenRoute,
--- a/client/cms/src/routes/__root.tsx
+++ b/client/cms/src/routes/__root.tsx
@@ -12,11 +12,9 @@ const queryClient = new QueryClient({
        const status
          // eslint-disable-next-line ts/no-unsafe-member-access
          = error?.response?.status ?? error?.status;
-
        if (status >= 400 && status < 500) {
          return false;
        }
-
        return failureCount < 3;
      },
    },
--- a/client/cms/src/routes/_sidebarLayout/profile.tsx
+++ b/client/cms/src/routes/_sidebarLayout/profile.tsx
@@ -1,14 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router';
-import { MainProfile } from '@/components/profile/main-profile';
-
-export const Route = createFileRoute('/_sidebarLayout/profile')({
-  component: RouteComponent,
-});
-
-function RouteComponent() {
-  return (
-    <div className="flex h-full flex-col gap-6 px-4 py-6">
-      <MainProfile />
-    </div>
-  );
-}
--- a/client/cms/src/routes/_workbenchLayout.tsx
+++ b/client/cms/src/routes/_workbenchLayout.tsx
@@ -1,13 +1,23 @@
-import { createFileRoute, Outlet } from '@tanstack/react-router';
+import { createFileRoute, Outlet, useRouterState } from '@tanstack/react-router';
 import { AppSidebar } from '@/components/sidebar/app-sidebar';
 import { SiteHeader } from '@/components/site-header';
 import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
+import { navData } from '@/lib/navData';

-export const Route = createFileRoute('/_sidebarLayout')({
+export const Route = createFileRoute('/_workbenchLayout')({
  component: RouteComponent,
 });

 function RouteComponent() {
+  const pathname = useRouterState({ select: state => state.location.pathname });
+  const allNavItems = [...navData.navMain, ...navData.navSecondary];
+  const title
+    = allNavItems.find(item =>
+      item.url === '/'
+        ? pathname === '/'
+        : pathname.startsWith(item.url),
+    )?.title ?? '工作台';
+
  return (
    <SidebarProvider
      style={
@@ -17,9 +27,9 @@ function RouteComponent() {
        } as React.CSSProperties
      }
    >
-      <AppSidebar variant="inset" />
+      <AppSidebar navData={navData} variant="inset" />
      <SidebarInset>
-        <SiteHeader />
+        <SiteHeader title={title} />
        <div className="flex flex-1 flex-col">
          <div className="@container/main flex flex-1 flex-col gap-2">
            <Outlet />
--- a/client/cms/src/routes/_workbenchLayout/events.tsx
+++ b/client/cms/src/routes/_workbenchLayout/events.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/_workbenchLayout/events')({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return <div>Hello "/_sidebarLayout/events"!</div>;
+}
--- a/client/cms/src/routes/_workbenchLayout/index.tsx
+++ b/client/cms/src/routes/_workbenchLayout/index.tsx
@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router';

-export const Route = createFileRoute('/_sidebarLayout/')({
+export const Route = createFileRoute('/_workbenchLayout/')({
  component: Index,
 });

--- a/client/cms/src/routes/_workbenchLayout/profile.$userId.tsx
+++ b/client/cms/src/routes/_workbenchLayout/profile.$userId.tsx
@@ -0,0 +1,28 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { Suspense } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { ProfileContainer } from '@/components/profile/profile.container';
+import { ProfileError } from '@/components/profile/profile.error';
+import { ProfileSkeleton } from '@/components/profile/profile.skeleton';
+
+export const Route = createFileRoute('/_workbenchLayout/profile/$userId')({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const { userId } = Route.useParams();
+  return (
+    <div className="flex h-full flex-col gap-6 px-4 py-6">
+      <ErrorBoundary fallbackRender={(error) => {
+        if ((error.error as { code: number }).code === 403)
+          return <ProfileError reason="用户个人资料未公开" />;
+        else return <ProfileError reason="获取用户个人资料失败" />;
+      }}
+      >
+        <Suspense fallback={<ProfileSkeleton />}>
+          <ProfileContainer userId={userId} />
+        </Suspense>
+      </ErrorBoundary>
+    </div>
+  );
+}
--- a/client/cms/src/routes/_workbenchLayout/profile.index.tsx
+++ b/client/cms/src/routes/_workbenchLayout/profile.index.tsx
@@ -0,0 +1,21 @@
+import { createFileRoute, Navigate } from '@tanstack/react-router';
+import { Suspense } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { ProfileError } from '@/components/profile/profile.error';
+import { ProfileSkeleton } from '@/components/profile/profile.skeleton';
+import { useUserInfo } from '@/hooks/data/useUserInfo';
+
+export const Route = createFileRoute('/_workbenchLayout/profile/')({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const { data } = useUserInfo();
+  return (
+    <ErrorBoundary fallback={<ProfileError reason="获取用户个人资料失败" />}>
+      <Suspense fallback={<ProfileSkeleton />}>
+        <Navigate to="/profile/$userId" params={{ userId: data.data!.user_id! }} />
+      </Suspense>
+    </ErrorBoundary>
+  );
+}
--- a/client/cms/src/routes/authorize.tsx
+++ b/client/cms/src/routes/authorize.tsx
@@ -41,7 +41,7 @@ function RouteComponent() {
        },
      });
    }
-  }, [token, mutation.isIdle]);
+  }, [token, mutation.isIdle, mutation, oauthParams.client_id, oauthParams.redirect_uri, oauthParams.state]);
  return (
    <div className="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
      <div className="w-full max-w-sm">
--- a/client/cms/src/stories/event-card.stories.ts
+++ b/client/cms/src/stories/event-card.stories.ts
@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { EventCard } from '@/components/workbenchCards/event-card';
+
+const meta = {
+  title: 'Cards/EventCard',
+  component: EventCard,
+} satisfies Meta<typeof EventCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};
--- a/client/cms/src/stories/nav-user.stories.tsx
+++ b/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 = {};
--- a/client/cms/src/stories/profile/edit-profile.dialog.stories.tsx
+++ b/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',
+  },
+};
--- a/client/cms/src/stories/profile/profile.stories.tsx
+++ b/client/cms/src/stories/profile/profile.stories.tsx
@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+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/View',
+  component: ProfileView,
+  decorators: [
+    Story => (
+      <QueryClientProvider client={queryClient}>
+        <Story />
+      </QueryClientProvider>
+    ),
+  ],
+} satisfies Meta<typeof ProfileView>;
+
+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',
+    },
+    onSaveBio: async () => Promise.resolve(),
+  },
+
+};
+
+export const Skeleton: Story = {
+  render: () => <ProfileSkeleton />,
+  args: {
+    user: {},
+    onSaveBio: async () => Promise.resolve(),
+  },
+};
+
+export const Error: Story = {
+  render: () => <ProfileError reason="用户个人资料未公开" />,
+  args: {
+    user: {
+      allow_public: false,
+    },
+    onSaveBio: async () => Promise.resolve(),
+  },
+};
--- a/client/cms/vite.config.ts
+++ b/client/cms/vite.config.ts
@@ -1,3 +1,4 @@
+/// <reference types="vitest/config" />
 import path from 'node:path';
 import tailwindcss from '@tailwindcss/vite';
 import { tanstackRouter } from '@tanstack/router-plugin/vite';
@@ -6,27 +7,51 @@ import { defineConfig } from 'vite';
 import svgr from 'vite-plugin-svgr';

 // https://vite.dev/config/
+import { fileURLToPath } from 'node:url';
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+import { playwright } from '@vitest/browser-playwright';
+const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+
+// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
 export default defineConfig({
-  plugins: [
-    tanstackRouter({
+  plugins: [tanstackRouter({
    target: 'react',
-      autoCodeSplitting: true,
-    }),
-    react(),
-    tailwindcss(),
-    svgr(),
-  ],
+    autoCodeSplitting: true
+  }), react(), tailwindcss(), svgr()],
  resolve: {
    alias: {
-      '@': path.resolve(__dirname, './src'),
-    },
+      '@': path.resolve(__dirname, './src')
+    }
  },
  server: {
    proxy: {
-      '/api': 'http://10.0.0.10:8000',
+      '/api': 'http://10.0.0.10:8000'
    },
    host: '0.0.0.0',
    port: 5173,
-    allowedHosts: ['nix.org.cn', 'nixos.party'],
+    allowedHosts: ['nix.org.cn', 'nixos.party']
  },
+  test: {
+    projects: [{
+      extends: true,
+      plugins: [
+      // The plugin will run tests for the stories defined in your Storybook config
+      // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      storybookTest({
+        configDir: path.join(dirname, '.storybook')
+      })],
+      test: {
+        name: 'storybook',
+        browser: {
+          enabled: true,
+          headless: true,
+          provider: playwright({}),
+          instances: [{
+            browser: 'chromium'
+          }]
+        },
+        setupFiles: ['.storybook/vitest.setup.ts']
+      }
+    }]
+  }
 });
--- a/client/cms/vitest.shims.d.ts
+++ b/client/cms/vitest.shims.d.ts
@@ -0,0 +1 @@
+/// <reference types="@vitest/browser-playwright" />
Author	SHA1	Message	Date
Noa Virellia	65d493b91b	refactor(profile): split view/container and update nav state Some checks failed Client CMS Check Build (NixCN CMS) TeamCity build failed Details Backend Check Build (NixCN CMS) TeamCity build finished Details Signed-off-by: Noa Virellia <noa@requiem.garden>	2026-01-31 18:30:34 +08:00
Noa Virellia	635b0fbb73	feat(client): add storybook and workbench profile flow Signed-off-by: Noa Virellia <noa@requiem.garden>	2026-01-31 12:29:58 +08:00
				`@@ -0,0 +1 @@`
				`/// <reference types="@vitest/browser-playwright" />`