Implement frontend designs from figma using Chakra UI v3 and Storybook
92
92%
Does it follow best practices?
Impact
92%
1.64xAverage score across 6 eval scenarios
Advisory
Suggest reviewing before use
The platform team needs a Notification Preferences page where authenticated users can view and update their notification settings for a given workspace. The backend API is already in place. The page should load the user's current notification preferences when navigating to it — without showing a loading spinner after the navigation completes — and allow them to toggle individual notification types on or off via a form. When the form is submitted, the changes are saved to the API, the relevant cached data is refreshed, and any API errors are surfaced to the user automatically.
The page will live at /_app/_authed/workspaces/$workspace/settings/notifications/. Because this is a settings page, it must only be accessible to workspaces where the workspace-notifications feature flag is enabled — users without it should be redirected away.
The composite components for this page (a NotificationSettingsForm and a NotificationTypeToggle) are already built and imported from the shared components directory. The page only needs to wire up the data, the form submission, and the layout.
Produce the following files:
src/routes/_app/_authed/workspaces/$workspace/settings/notifications/index.tsx — the route and page componentThe page component should:
PUT /api/workspaces/{workspace}/notificationsAssume the following already exist and can be imported as needed (do not implement them):
getNotificationPrefsQueryOptions(workspace: string) from ~/lib/api/queriesNotificationSettingsForm component from ~/components/NotificationSettingsForm$api client from ~/lib/api/clientDo not implement the composite components or the API query helpers — focus only on the page/route file.