feat(client): add storybook and workbench profile flow

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

client/cms/.gitignore

@@ -24,3 +24,6 @@ dist-ssr
 *.sw?
 
 .direnv
+
+*storybook.log
+storybook-static

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;

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;

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]);

client/cms/eslint.config.js

@@ -1,9 +1,10 @@
+// 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';
 
 export default antfu({
   gitignore: true,
-  ignores: ['**/node_modules/**', '**/dist/**', 'bun.lock', '**/routeTree.gen.ts', '**/ui/**', 'src/components/editor/**/*', 'src/client/**/*'],
+  ignores: ['**/node_modules/**', '**/dist/**', 'bun.lock', '**/routeTree.gen.ts', '**/ui/**', 'src/components/editor/**/*', 'src/client/**/*', 'openapi-ts.config.ts'],
   react: true,
   stylistic: {
     semi: true,

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"

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, getUserFull, getUserInfo, getUserList, type Options, patchUserUpdate, postAuthExchange, postAuthMagic, postAuthRefresh, postAuthToken, postEventCheckinSubmit } from '../sdk.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, GetUserFullData, GetUserFullError, GetUserFullResponse, 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 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
@@ -214,16 +214,16 @@ export const getEventInfoOptions = (options: Options<GetEventInfoData>) => query
     queryKey: getEventInfoQueryKey(options)
 });
 
-export const getUserFullQueryKey = (options?: Options<GetUserFullData>) => createQueryKey('getUserFull', options);
+export const getEventListQueryKey = (options: Options<GetEventListData>) => createQueryKey('getEventList', options);
 
 /**
- * Get Full User Table
+ * List Events
  *
- * Fetches all user records without pagination. This is typically used for administrative overview or data export.
+ * Fetches a list of events with support for pagination via limit and offset. Data is retrieved directly from the database for consistency.
  */
-export const getUserFullOptions = (options?: Options<GetUserFullData>) => queryOptions<GetUserFullResponse, GetUserFullError, GetUserFullResponse, ReturnType<typeof getUserFullQueryKey>>({
+export const getEventListOptions = (options: Options<GetEventListData>) => queryOptions<GetEventListResponse, GetEventListError, GetEventListResponse, ReturnType<typeof getEventListQueryKey>>({
     queryFn: async ({ queryKey, signal }) => {
-        const { data } = await getUserFull({
+        const { data } = await getEventList({
             ...options,
             ...queryKey[0],
             signal,
@@ -231,47 +231,7 @@ export const getUserFullOptions = (options?: Options<GetUserFullData>) => queryO
         });
         return data;
     },
-    queryKey: getUserFullQueryKey(options)
+    queryKey: getEventListQueryKey(options)
-});
-
-export const getUserInfoQueryKey = (options?: Options<GetUserInfoData>) => createQueryKey('getUserInfo', options);
-
-/**
- * Get My User Information
- *
- * Fetches the complete profile data for the user associated with the provided session/token.
- */
-export const getUserInfoOptions = (options?: Options<GetUserInfoData>) => queryOptions<GetUserInfoResponse, GetUserInfoError, GetUserInfoResponse, ReturnType<typeof getUserInfoQueryKey>>({
-    queryFn: async ({ queryKey, signal }) => {
-        const { data } = await getUserInfo({
-            ...options,
-            ...queryKey[0],
-            signal,
-            throwOnError: true
-        });
-        return data;
-    },
-    queryKey: getUserInfoQueryKey(options)
-});
-
-export const getUserListQueryKey = (options: Options<GetUserListData>) => createQueryKey('getUserList', options);
-
-/**
- * List Users
- *
- * Fetches a list of users with support for pagination via limit and offset. Data is sourced from the search engine for high performance.
- */
-export const getUserListOptions = (options: Options<GetUserListData>) => queryOptions<GetUserListResponse, GetUserListError, GetUserListResponse, ReturnType<typeof getUserListQueryKey>>({
-    queryFn: async ({ queryKey, signal }) => {
-        const { data } = await getUserList({
-            ...options,
-            ...queryKey[0],
-            signal,
-            throwOnError: true
-        });
-        return data;
-    },
-    queryKey: getUserListQueryKey(options)
 });
 
 const createInfiniteParams = <K extends Pick<QueryKey<Options>[0], 'body' | 'headers' | 'path' | 'query'>>(queryKey: QueryKey<Options>, page: K) => {
@@ -303,6 +263,95 @@ const createInfiniteParams = <K extends Pick<QueryKey<Options>[0], 'body' | 'hea
     return params as unknown as typeof page;
 };
 
+export const getEventListInfiniteQueryKey = (options: Options<GetEventListData>): QueryKey<Options<GetEventListData>> => createQueryKey('getEventList', options, true);
+
+/**
+ * List Events
+ *
+ * Fetches a list of events with support for pagination via limit and offset. Data is retrieved directly from the database for consistency.
+ */
+export const getEventListInfiniteOptions = (options: Options<GetEventListData>) => infiniteQueryOptions<GetEventListResponse, GetEventListError, InfiniteData<GetEventListResponse>, QueryKey<Options<GetEventListData>>, string | Pick<QueryKey<Options<GetEventListData>>[0], 'body' | 'headers' | 'path' | 'query'>>(
+// @ts-ignore
+{
+    queryFn: async ({ pageParam, queryKey, signal }) => {
+        // @ts-ignore
+        const page: Pick<QueryKey<Options<GetEventListData>>[0], 'body' | 'headers' | 'path' | 'query'> = typeof pageParam === 'object' ? pageParam : {
+            query: {
+                offset: pageParam
+            }
+        };
+        const params = createInfiniteParams(queryKey, page);
+        const { data } = await getEventList({
+            ...options,
+            ...params,
+            signal,
+            throwOnError: true
+        });
+        return data;
+    },
+    queryKey: getEventListInfiniteQueryKey(options)
+});
+
+export const getUserInfoQueryKey = (options?: Options<GetUserInfoData>) => createQueryKey('getUserInfo', options);
+
+/**
+ * Get My User Information
+ *
+ * Fetches the complete profile data for the user associated with the provided session/token.
+ */
+export const getUserInfoOptions = (options?: Options<GetUserInfoData>) => queryOptions<GetUserInfoResponse, GetUserInfoError, GetUserInfoResponse, ReturnType<typeof getUserInfoQueryKey>>({
+    queryFn: async ({ queryKey, signal }) => {
+        const { data } = await getUserInfo({
+            ...options,
+            ...queryKey[0],
+            signal,
+            throwOnError: true
+        });
+        return data;
+    },
+    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);
+
+/**
+ * List Users
+ *
+ * Fetches a list of users with support for pagination via limit and offset. Data is sourced from the search engine for high performance.
+ */
+export const getUserListOptions = (options: Options<GetUserListData>) => queryOptions<GetUserListResponse, GetUserListError, GetUserListResponse, ReturnType<typeof getUserListQueryKey>>({
+    queryFn: async ({ queryKey, signal }) => {
+        const { data } = await getUserList({
+            ...options,
+            ...queryKey[0],
+            signal,
+            throwOnError: true
+        });
+        return data;
+    },
+    queryKey: getUserListQueryKey(options)
+});
+
 export const getUserListInfiniteQueryKey = (options: Options<GetUserListData>): QueryKey<Options<GetUserListData>> => createQueryKey('getUserList', options, true);
 
 /**

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, getUserFull, getUserInfo, getUserList, type Options, patchUserUpdate, postAuthExchange, postAuthMagic, postAuthRefresh, postAuthToken, postEventCheckinSubmit } from './sdk.gen';
+export { getAuthRedirect, getEventCheckin, getEventCheckinQuery, getEventInfo, getEventList, getUserInfo, getUserInfoByUserId, getUserList, type Options, patchUserUpdate, postAuthExchange, postAuthMagic, postAuthRefresh, postAuthToken, postEventCheckinSubmit } from './sdk.gen';
-export type { ClientOptions, DataUser, DataUserSearchDoc, GetAuthRedirectData, GetAuthRedirectError, GetAuthRedirectErrors, GetEventCheckinData, GetEventCheckinError, GetEventCheckinErrors, GetEventCheckinQueryData, GetEventCheckinQueryError, GetEventCheckinQueryErrors, GetEventCheckinQueryResponse, GetEventCheckinQueryResponses, GetEventCheckinResponse, GetEventCheckinResponses, GetEventInfoData, GetEventInfoError, GetEventInfoErrors, GetEventInfoResponse, GetEventInfoResponses, GetUserFullData, GetUserFullError, GetUserFullErrors, GetUserFullResponse, GetUserFullResponses, 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, ServiceEventInfoResponse, ServiceUserUserInfoData, ServiceUserUserTableResponse, UtilsRespStatus } from './types.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';

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, GetUserFullData, GetUserFullErrors, GetUserFullResponses, 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> & {
     /**
@@ -117,11 +117,11 @@ export const postEventCheckinSubmit = <ThrowOnError extends boolean = false>(opt
 export const getEventInfo = <ThrowOnError extends boolean = false>(options: Options<GetEventInfoData, ThrowOnError>) => (options.client ?? client).get<GetEventInfoResponses, GetEventInfoErrors, ThrowOnError>({ url: '/event/info', ...options });
 
 /**
- * Get Full User Table
+ * List Events
  *
- * Fetches all user records without pagination. This is typically used for administrative overview or data export.
+ * Fetches a list of events with support for pagination via limit and offset. Data is retrieved directly from the database for consistency.
  */
-export const getUserFull = <ThrowOnError extends boolean = false>(options?: Options<GetUserFullData, ThrowOnError>) => (options?.client ?? client).get<GetUserFullResponses, GetUserFullErrors, ThrowOnError>({ url: '/user/full', ...options });
+export const getEventList = <ThrowOnError extends boolean = false>(options: Options<GetEventListData, ThrowOnError>) => (options.client ?? client).get<GetEventListResponses, GetEventListErrors, ThrowOnError>({ url: '/event/list', ...options });
 
 /**
  * Get My User Information
@@ -130,6 +130,13 @@ export const getUserFull = <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
  *

client/cms/src/client/types.gen.ts

@@ -4,21 +4,17 @@ export type ClientOptions = {
     baseUrl: 'http://localhost:8000/api/v1' | 'https://localhost:8000/api/v1' | (string & {});
 };
 
-export type DataUser = {
+export type DataEventIndexDoc = {
-    allow_public?: boolean;
+    description?: string;
-    avatar?: string;
+    end_time?: string;
-    bio?: string;
+    event_id?: string;
-    email?: string;
+    name?: string;
-    id?: number;
+    start_time?: string;
-    nickname?: string;
+    thumbnail?: string;
-    permission_level?: number;
+    type?: string;
-    subtitle?: string;
-    user_id?: string;
-    username?: string;
-    uuid?: string;
 };
 
-export type DataUserSearchDoc = {
+export type DataUserIndexDoc = {
     avatar?: string;
     email?: string;
     nickname?: string;
@@ -76,12 +72,6 @@ export type ServiceEventCheckinSubmitData = {
     checkin_code?: string;
 };
 
-export type ServiceEventInfoResponse = {
-    end_time?: string;
-    name?: string;
-    start_time?: string;
-};
-
 export type ServiceUserUserInfoData = {
     allow_public?: boolean;
     avatar?: string;
@@ -94,10 +84,6 @@ export type ServiceUserUserInfoData = {
     username?: string;
 };
 
-export type ServiceUserUserTableResponse = {
-    user_table?: Array<DataUser>;
-};
-
 export type UtilsRespStatus = {
     code?: number;
     data?: unknown;
@@ -379,6 +365,14 @@ export type GetEventCheckinErrors = {
             [key: string]: unknown;
         };
     };
+    /**
+     * Missing User ID / Unauthorized
+     */
+    401: UtilsRespStatus & {
+        data?: {
+            [key: string]: unknown;
+        };
+    };
     /**
      * Internal Server Error
      */
@@ -503,6 +497,14 @@ export type GetEventInfoErrors = {
             [key: string]: unknown;
         };
     };
+    /**
+     * Missing User ID / Unauthorized
+     */
+    401: UtilsRespStatus & {
+        data?: {
+            [key: string]: unknown;
+        };
+    };
     /**
      * Event Not Found
      */
@@ -528,22 +530,47 @@ export type GetEventInfoResponses = {
      * Successful retrieval
      */
     200: UtilsRespStatus & {
-        data?: ServiceEventInfoResponse;
+        data?: DataEventIndexDoc;
     };
 };
 
 export type GetEventInfoResponse = GetEventInfoResponses[keyof GetEventInfoResponses];
 
-export type GetUserFullData = {
+export type GetEventListData = {
     body?: never;
     path?: never;
-    query?: never;
+    query: {
-    url: '/user/full';
+        /**
+         * Maximum number of events to return (default 20)
+         */
+        limit?: string;
+        /**
+         * Number of events to skip
+         */
+        offset: string;
+    };
+    url: '/event/list';
 };
 
-export type GetUserFullErrors = {
+export type GetEventListErrors = {
     /**
-     * Internal Server Error (Database Error)
+     * Invalid Input (Missing offset or malformed parameters)
+     */
+    400: UtilsRespStatus & {
+        data?: {
+            [key: string]: unknown;
+        };
+    };
+    /**
+     * Missing User ID / Unauthorized
+     */
+    401: UtilsRespStatus & {
+        data?: {
+            [key: string]: unknown;
+        };
+    };
+    /**
+     * Internal Server Error (Database query failed)
      */
     500: UtilsRespStatus & {
         data?: {
@@ -552,18 +579,18 @@ export type GetUserFullErrors = {
     };
 };
 
-export type GetUserFullError = GetUserFullErrors[keyof GetUserFullErrors];
+export type GetEventListError = GetEventListErrors[keyof GetEventListErrors];
 
-export type GetUserFullResponses = {
+export type GetEventListResponses = {
     /**
-     * Successful retrieval of full user table
+     * Successful paginated list retrieval
      */
     200: UtilsRespStatus & {
-        data?: ServiceUserUserTableResponse;
+        data?: Array<DataEventIndexDoc>;
     };
 };
 
-export type GetUserFullResponse = GetUserFullResponses[keyof GetUserFullResponses];
+export type GetEventListResponse = GetEventListResponses[keyof GetEventListResponses];
 
 export type GetUserInfoData = {
     body?: never;
@@ -576,7 +603,7 @@ export type GetUserInfoErrors = {
     /**
      * Missing User ID / Unauthorized
      */
-    403: UtilsRespStatus & {
+    401: UtilsRespStatus & {
         data?: {
             [key: string]: unknown;
         };
@@ -612,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;
@@ -637,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)
      */
@@ -654,7 +749,7 @@ export type GetUserListResponses = {
      * Successful paginated list retrieval
      */
     200: UtilsRespStatus & {
-        data?: Array<DataUserSearchDoc>;
+        data?: Array<DataUserIndexDoc>;
     };
 };
 
@@ -682,7 +777,7 @@ export type PatchUserUpdateErrors = {
     /**
      * Missing User ID / Unauthorized
      */
-    403: UtilsRespStatus & {
+    401: UtilsRespStatus & {
         data?: {
             [key: string]: unknown;
         };

client/cms/src/client/zod.gen.ts

@@ -2,21 +2,17 @@
 
 import { z } from 'zod';
 
-export const zDataUser = z.object({
+export const zDataEventIndexDoc = z.object({
-    allow_public: z.optional(z.boolean()),
+    description: z.optional(z.string()),
-    avatar: z.optional(z.string()),
+    end_time: z.optional(z.string()),
-    bio: z.optional(z.string()),
+    event_id: z.optional(z.string()),
-    email: z.optional(z.string()),
+    name: z.optional(z.string()),
-    id: z.optional(z.int()),
+    start_time: z.optional(z.string()),
-    nickname: z.optional(z.string()),
+    thumbnail: z.optional(z.string()),
-    permission_level: z.optional(z.int()),
+    type: z.optional(z.string())
-    subtitle: z.optional(z.string()),
-    user_id: z.optional(z.string()),
-    username: z.optional(z.string()),
-    uuid: z.optional(z.string())
 });
 
-export const zDataUserSearchDoc = z.object({
+export const zDataUserIndexDoc = z.object({
     avatar: z.optional(z.string()),
     email: z.optional(z.string()),
     nickname: z.optional(z.string()),
@@ -74,12 +70,6 @@ export const zServiceEventCheckinSubmitData = z.object({
     checkin_code: z.optional(z.string())
 });
 
-export const zServiceEventInfoResponse = 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()),
@@ -92,10 +82,6 @@ export const zServiceUserUserInfoData = z.object({
     username: z.optional(z.string())
 });
 
-export const zServiceUserUserTableResponse = z.object({
-    user_table: z.optional(z.array(zDataUser))
-});
-
 export const zUtilsRespStatus = z.object({
     code: z.optional(z.int()),
     data: z.optional(z.unknown()),
@@ -221,20 +207,23 @@ export const zGetEventInfoData = z.object({
  * Successful retrieval
  */
 export const zGetEventInfoResponse = zUtilsRespStatus.and(z.object({
-    data: z.optional(zServiceEventInfoResponse)
+    data: z.optional(zDataEventIndexDoc)
 }));
 
-export const zGetUserFullData = z.object({
+export const zGetEventListData = z.object({
     body: z.optional(z.never()),
     path: z.optional(z.never()),
-    query: z.optional(z.never())
+    query: z.object({
+        limit: z.optional(z.string()),
+        offset: z.string()
+    })
 });
 
 /**
- * Successful retrieval of full user table
+ * Successful paginated list retrieval
  */
-export const zGetUserFullResponse = zUtilsRespStatus.and(z.object({
+export const zGetEventListResponse = zUtilsRespStatus.and(z.object({
-    data: z.optional(zServiceUserUserTableResponse)
+    data: z.optional(z.array(zDataEventIndexDoc))
 }));
 
 export const zGetUserInfoData = z.object({
@@ -250,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()),
@@ -263,7 +267,7 @@ export const zGetUserListData = z.object({
  * Successful paginated list retrieval
  */
 export const zGetUserListResponse = zUtilsRespStatus.and(z.object({
-    data: z.optional(z.array(zDataUserSearchDoc))
+    data: z.optional(z.array(zDataUserIndexDoc))
 }));
 
 export const zPatchUserUpdateData = z.object({

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

@@ -1,3 +1,4 @@
+import type { ServiceUserUserInfoData } from '@/client';
 import { useForm } from '@tanstack/react-form';
 import { useState } from 'react';
 import { toast } from 'sonner';
@@ -21,7 +22,6 @@ 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,9 +31,7 @@ const formSchema = z.object({
   avatar: z.url().or(z.literal('')),
   allow_public: z.boolean(),
 });
-export function EditProfileDialog() {
+export function EditProfileDialog({ user }: { user: ServiceUserUserInfoData }) {
-  const { data } = useUserInfo();
-  const user = data.data!;
   const { mutateAsync } = useUpdateUser();
 
   const form = useForm({
@@ -79,7 +77,7 @@ export function EditProfileDialog() {
           onSubmit={(e) => {
             e.preventDefault();
             e.stopPropagation();
-            form.handleSubmit().then(() => setOpen(false));
+            void form.handleSubmit().then(() => setOpen(false));
           }}
           className="grid gap-4"
         >

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>
+  );
+}

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>
+  );
+}

client/cms/src/components/profile/profile.tsx

@@ -1,21 +1,22 @@
+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 { Button } from '../ui/button';
 import { EditProfileDialog } from './edit-profile-dialog';
 
-export function MainProfile() {
+export function Profile({ user }: { user: ServiceUserUserInfoData }) {
-  const { data } = useUserInfo();
-  const user = data.data!;
   const [bio, setBio] = useState<string | undefined>(() => base64ToUtf8(user.bio ?? ''));
   const [enableBioEdit, setEnableBioEdit] = useState(false);
   const { mutateAsync } = useUpdateUser();
@@ -35,7 +36,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 ? <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,19 +48,19 @@ export function MainProfile() {
               {user.email}
             </div>
           </div>
-          <EditProfileDialog />
+          <EditProfileDialog user={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">
         {/* Bio */}
         {enableBioEdit
           ? (
-              <MDEditor
+            <MDEditor
-                value={bio}
+              value={bio}
-                onChange={setBio}
+              onChange={setBio}
-                height="100%"
+              height="100%"
-              />
+            />
-            )
+          )
           : <div className="p-6 prose dark:prose-invert"><Markdown>{bio}</Markdown></div>}
         <Button
           className="absolute bottom-4 right-4"

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,
@@ -53,7 +54,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 ? <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 +74,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 ? <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>

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>
+  )
+}

client/cms/src/hooks/data/useExchangeToken.ts

@@ -6,7 +6,7 @@ export function useExchangeToken() {
   return useMutation({
     ...postAuthExchangeMutation(),
     onSuccess: (data) => {
-      window.location.href = data.data?.redirect_uri!;
+      window.location.href = data.data!.redirect_uri!;
     },
     onError: (error) => {
       console.error(error);

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,
+  });
+}

client/cms/src/lib/client.ts

@@ -1,13 +1,12 @@
 import { isEmpty, isNil } from 'lodash-es';
 import { client } from '@/client/client.gen';
-import { router } from './router';
 import {
-  clearTokens,
   doRefreshToken,
+  getAccessToken,
   getRefreshToken,
-  getToken,
+  logout,
+  setAccessToken,
   setRefreshToken,
-  setToken,
 } from './token';
 
 export function configInternalApiClient() {
@@ -19,8 +18,8 @@ export function configInternalApiClient() {
   });
 
   client.interceptors.request.use((request) => {
-    const token = getToken();
+    const token = getAccessToken();
-    if (token) {
+    if (!isNil(token) && !isEmpty(token)) {
       request.headers.set('Authorization', `Bearer ${token}`);
     }
     return request;
@@ -28,14 +27,21 @@ export function configInternalApiClient() {
 
   client.interceptors.response.use(async (response, request, options) => {
     if (response.status === 401) {
-      const refreshToken = getRefreshToken();
       // Avoid infinite loop if the refresh token request itself fails
-      if (!request.url.includes('/auth/refresh') && !isNil(refreshToken)) {
+      if (request.url.includes('/auth/refresh')) {
-        try {
+        // Refresh token failed, clear tokens and redirect to login page
-          const refreshResponse = await doRefreshToken();
+        logout('Session expired');
+      }
+      else {
+        const refreshToken = getRefreshToken();
+        if (isNil(refreshToken) || isEmpty(refreshToken)) {
+          logout('You are not logged in');
+        }
+        else {
+          const refreshResponse = await doRefreshToken(refreshToken);
           if (!isEmpty(refreshResponse)) {
             const { access_token, refresh_token } = refreshResponse;
-            setToken(access_token!);
+            setAccessToken(access_token!);
             setRefreshToken(refresh_token!);
 
             const fetchFn = options.fetch ?? globalThis.fetch;
@@ -50,11 +56,6 @@ export function configInternalApiClient() {
             });
           }
         }
-        catch (e) {
-          clearTokens();
-          await router.navigate({ to: '/authorize' });
-          return response;
-        }
       }
     }
     return response;

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: [
     {

client/cms/src/lib/token.ts

@@ -1,40 +1,52 @@
 import type { ServiceAuthTokenResponse } from '@/client';
+import { toast } from 'sonner';
 import { postAuthRefresh } from '@/client';
+import { router } from './router';
 
-export function setToken(token: string) {
+const ACCESS_TOKEN_LOCALSTORAGE_KEY = 'token';
-  localStorage.setItem('token', token);
+const REFRESH_TOKEN_LOCALSTORAGE_KEY = 'refreshToken';
+
+export function setAccessToken(token: string) {
+  localStorage.setItem(ACCESS_TOKEN_LOCALSTORAGE_KEY, token);
 }
 
-export function getToken() {
+export function getAccessToken() {
-  return localStorage.getItem('token');
+  return localStorage.getItem(ACCESS_TOKEN_LOCALSTORAGE_KEY);
 }
 
-export function removeToken() {
+export function removeAccessToken() {
-  localStorage.removeItem('token');
+  localStorage.removeItem(ACCESS_TOKEN_LOCALSTORAGE_KEY);
-}
-
-export function hasToken() {
-  return getToken() !== null;
 }
 
 export function setRefreshToken(refreshToken: string) {
-  localStorage.setItem('refreshToken', refreshToken);
+  localStorage.setItem(REFRESH_TOKEN_LOCALSTORAGE_KEY, refreshToken);
 }
 
 export function getRefreshToken() {
-  return localStorage.getItem('refreshToken');
+  return localStorage.getItem(REFRESH_TOKEN_LOCALSTORAGE_KEY);
+}
+
+export function removeRefreshToken() {
+  localStorage.removeItem(REFRESH_TOKEN_LOCALSTORAGE_KEY);
 }
 
 export function clearTokens() {
-  removeToken();
+  removeAccessToken();
-  setRefreshToken('');
+  removeRefreshToken();
 }
 
-export async function doRefreshToken(): Promise<ServiceAuthTokenResponse | undefined> {
+export async function doRefreshToken(refreshToken: string): Promise<ServiceAuthTokenResponse | undefined> {
   const { data } = await postAuthRefresh({
     body: {
-      refresh_token: getRefreshToken()!,
+      refresh_token: refreshToken,
     },
   });
   return data?.data;
 }
+
+export function logout(message: string = 'Logged out') {
+  clearTokens();
+  void router.navigate({ to: '/authorize' }).then(() => {
+    toast.error(message);
+  });
+}

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 WorkbenchLayoutRouteImport } from './routes/_workbenchLayout'
-import { Route as SidebarLayoutIndexRouteImport } from './routes/_sidebarLayout/index'
+import { Route as WorkbenchLayoutIndexRouteImport } from './routes/_workbenchLayout/index'
-import { Route as SidebarLayoutProfileRouteImport } from './routes/_sidebarLayout/profile'
+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({
+const WorkbenchLayoutRoute = WorkbenchLayoutRouteImport.update({
-  id: '/_sidebarLayout',
+  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({
+const WorkbenchLayoutEventsRoute = WorkbenchLayoutEventsRouteImport.update({
-  id: '/profile',
+  id: '/events',
-  path: '/profile',
+  path: '/events',
-  getParentRoute: () => SidebarLayoutRoute,
+  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
+  '/events': typeof WorkbenchLayoutEventsRoute
-  '/': typeof SidebarLayoutIndexRoute
+  '/': 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
+  '/_workbenchLayout/events': typeof WorkbenchLayoutEventsRoute
-  '/_sidebarLayout/': typeof SidebarLayoutIndexRoute
+  '/_workbenchLayout/': typeof WorkbenchLayoutIndexRoute
+  '/_workbenchLayout/profile/$userId': typeof WorkbenchLayoutProfileUserIdRoute
+  '/_workbenchLayout/profile/': typeof WorkbenchLayoutProfileIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/authorize' | '/magicLinkSent' | '/token' | '/profile'
+  fullPaths:
-  fileRoutesByTo: FileRoutesByTo
+    | '/'
-  to: '/authorize' | '/magicLinkSent' | '/token' | '/profile' | '/'
-  id:
-    | '__root__'
-    | '/_sidebarLayout'
     | '/authorize'
     | '/magicLinkSent'
     | '/token'
-    | '/_sidebarLayout/profile'
+    | '/events'
-    | '/_sidebarLayout/'
+    | '/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': {
+    '/_workbenchLayout': {
-      id: '/_sidebarLayout'
+      id: '/_workbenchLayout'
       path: ''
       fullPath: '/'
-      preLoaderRoute: typeof SidebarLayoutRouteImport
+      preLoaderRoute: typeof WorkbenchLayoutRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/_sidebarLayout/': {
+    '/_workbenchLayout/': {
-      id: '/_sidebarLayout/'
+      id: '/_workbenchLayout/'
       path: '/'
       fullPath: '/'
-      preLoaderRoute: typeof SidebarLayoutIndexRouteImport
+      preLoaderRoute: typeof WorkbenchLayoutIndexRouteImport
-      parentRoute: typeof SidebarLayoutRoute
+      parentRoute: typeof WorkbenchLayoutRoute
     }
-    '/_sidebarLayout/profile': {
+    '/_workbenchLayout/events': {
-      id: '/_sidebarLayout/profile'
+      id: '/_workbenchLayout/events'
+      path: '/events'
+      fullPath: '/events'
+      preLoaderRoute: typeof WorkbenchLayoutEventsRouteImport
+      parentRoute: typeof WorkbenchLayoutRoute
+    }
+    '/_workbenchLayout/profile/': {
+      id: '/_workbenchLayout/profile/'
       path: '/profile'
-      fullPath: '/profile'
+      fullPath: '/profile/'
-      preLoaderRoute: typeof SidebarLayoutProfileRouteImport
+      preLoaderRoute: typeof WorkbenchLayoutProfileIndexRouteImport
-      parentRoute: typeof SidebarLayoutRoute
+      parentRoute: typeof WorkbenchLayoutRoute
+    }
+    '/_workbenchLayout/profile/$userId': {
+      id: '/_workbenchLayout/profile/$userId'
+      path: '/profile/$userId'
+      fullPath: '/profile/$userId'
+      preLoaderRoute: typeof WorkbenchLayoutProfileUserIdRouteImport
+      parentRoute: typeof WorkbenchLayoutRoute
     }
   }
 }
 
-interface SidebarLayoutRouteChildren {
+interface WorkbenchLayoutRouteChildren {
-  SidebarLayoutProfileRoute: typeof SidebarLayoutProfileRoute
+  WorkbenchLayoutEventsRoute: typeof WorkbenchLayoutEventsRoute
-  SidebarLayoutIndexRoute: typeof SidebarLayoutIndexRoute
+  WorkbenchLayoutIndexRoute: typeof WorkbenchLayoutIndexRoute
+  WorkbenchLayoutProfileUserIdRoute: typeof WorkbenchLayoutProfileUserIdRoute
+  WorkbenchLayoutProfileIndexRoute: typeof WorkbenchLayoutProfileIndexRoute
 }
 
-const SidebarLayoutRouteChildren: SidebarLayoutRouteChildren = {
+const WorkbenchLayoutRouteChildren: WorkbenchLayoutRouteChildren = {
-  SidebarLayoutProfileRoute: SidebarLayoutProfileRoute,
+  WorkbenchLayoutEventsRoute: WorkbenchLayoutEventsRoute,
-  SidebarLayoutIndexRoute: SidebarLayoutIndexRoute,
+  WorkbenchLayoutIndexRoute: WorkbenchLayoutIndexRoute,
+  WorkbenchLayoutProfileUserIdRoute: WorkbenchLayoutProfileUserIdRoute,
+  WorkbenchLayoutProfileIndexRoute: WorkbenchLayoutProfileIndexRoute,
 }
 
-const SidebarLayoutRouteWithChildren = SidebarLayoutRoute._addFileChildren(
+const WorkbenchLayoutRouteWithChildren = WorkbenchLayoutRoute._addFileChildren(
-  SidebarLayoutRouteChildren,
+  WorkbenchLayoutRouteChildren,
 )
 
 const rootRouteChildren: RootRouteChildren = {
-  SidebarLayoutRoute: SidebarLayoutRouteWithChildren,
+  WorkbenchLayoutRoute: WorkbenchLayoutRouteWithChildren,
   AuthorizeRoute: AuthorizeRoute,
   MagicLinkSentRoute: MagicLinkSentRoute,
   TokenRoute: TokenRoute,

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>
-  );
-}

client/cms/src/routes/_workbenchLayout.tsx

@@ -3,7 +3,7 @@ import { AppSidebar } from '@/components/sidebar/app-sidebar';
 import { SiteHeader } from '@/components/site-header';
 import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
 
-export const Route = createFileRoute('/_sidebarLayout')({
+export const Route = createFileRoute('/_workbenchLayout')({
   component: RouteComponent,
 });
 

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>;
+}

client/cms/src/routes/_workbenchLayout/index.tsx

@@ -1,15 +1,7 @@
-import { createFileRoute, redirect } from '@tanstack/react-router';
+import { createFileRoute } from '@tanstack/react-router';
-import { hasToken } from '@/lib/token';
 
-export const Route = createFileRoute('/_sidebarLayout/')({
+export const Route = createFileRoute('/_workbenchLayout/')({
   component: Index,
-  loader: async () => {
-    if (!hasToken()) {
-      throw redirect({
-        to: '/authorize',
-      });
-    }
-  },
 });
 
 function Index() {

client/cms/src/routes/_workbenchLayout/profile.$userId.tsx

@@ -0,0 +1,34 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { Suspense } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { Profile } from '@/components/profile/profile';
+import { ProfileError } from '@/components/profile/profile.error';
+import { ProfileSkeleton } from '@/components/profile/profile.skeleton';
+import { useOtherUserInfo } from '@/hooks/data/useUserInfo';
+
+export const Route = createFileRoute('/_workbenchLayout/profile/$userId')({
+  component: RouteComponent,
+});
+
+function ProfileByUserId({ userId }: { userId: string }) {
+  const { data } = useOtherUserInfo(userId);
+  return <Profile user={data.data!} />;
+}
+
+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 />}>
+          <ProfileByUserId userId={userId} />
+        </Suspense>
+      </ErrorBoundary>
+    </div>
+  );
+}

client/cms/src/routes/_workbenchLayout/profile.index.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute, Navigate } from '@tanstack/react-router';
+import { useUserInfo } from '@/hooks/data/useUserInfo';
+
+export const Route = createFileRoute('/_workbenchLayout/profile/')({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const { data } = useUserInfo();
+  return (
+    <Navigate to="/profile/$userId" params={{ userId: data.data!.user_id! }} />
+  );
+}

client/cms/src/routes/authorize.tsx

@@ -6,7 +6,7 @@ import z from 'zod';
 import { LoginForm } from '@/components/login-form';
 import { useExchangeToken } from '@/hooks/data/useExchangeToken';
 import { generateOAuthState } from '@/lib/random';
-import { getToken } from '@/lib/token';
+import { getAccessToken } from '@/lib/token';
 
 const baseUrl = import.meta.env.VITE_APP_BASE_URL;
 
@@ -25,7 +25,7 @@ export const Route = createFileRoute('/authorize')({
 });
 
 function RouteComponent() {
-  const token = getToken();
+  const token = getAccessToken();
   const oauthParams = Route.useSearch();
   const mutation = useExchangeToken();
   /**

client/cms/src/routes/token.tsx

@@ -6,7 +6,7 @@ import {
 } from 'react';
 import z from 'zod';
 import { postAuthTokenMutation } from '@/client/@tanstack/react-query.gen';
-import { setRefreshToken, setToken } from '@/lib/token';
+import { setAccessToken, setRefreshToken } from '@/lib/token';
 
 const tokenCodeSchema = z.object({
   code: z.string().nonempty(),
@@ -25,8 +25,8 @@ function RouteComponent() {
   const mutation = useMutation({
     ...postAuthTokenMutation(),
     onSuccess: (data) => {
-      setToken(data.data?.access_token!);
+      setAccessToken(data.data!.access_token!);
-      setRefreshToken(data.data?.refresh_token!);
+      setRefreshToken(data.data!.refresh_token!);
       void navigate({ to: '/' });
     },
     onError: () => {

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 = {};

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

@@ -0,0 +1,51 @@
+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';
+
+const queryClient = new QueryClient();
+
+const meta = {
+  title: 'Profile',
+  component: Profile,
+  decorators: [
+    Story => (
+      <QueryClientProvider client={queryClient}>
+        <Story />
+      </QueryClientProvider>
+    ),
+  ],
+} satisfies Meta<typeof Profile>;
+
+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',
+    },
+  },
+};
+
+export const Skeleton: Story = {
+  render: () => <ProfileSkeleton />,
+  args: {
+    user: {},
+  },
+};
+
+export const Error: Story = {
+  render: () => <ProfileError reason="User profile is not public" />,
+  args: {
+    user: {
+      allow_public: false,
+    },
+  },
+};

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: [
+  plugins: [tanstackRouter({
-    tanstackRouter({
+    target: 'react',
-      target: 'react',
+    autoCodeSplitting: true
-      autoCodeSplitting: true,
+  }), react(), tailwindcss(), svgr()],
-    }),
-    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']
+      }
+    }]
+  }
 });

client/cms/vitest.shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser-playwright" />