CtrlK
BlogDocsLog inGet started
Tessl Logo

tessleng/ui

Implement frontend designs from figma using Chakra UI v3 and Storybook

92

1.64x
Quality

92%

Does it follow best practices?

Impact

92%

1.64x

Average score across 6 eval scenarios

SecuritybySnyk

Advisory

Suggest reviewing before use

Overview
Quality
Evals
Security
Files

task.mdevals/scenario-6/

Notification Preferences Page

Problem/Feature Description

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.

Output Specification

Produce the following files:

  • src/routes/_app/_authed/workspaces/$workspace/settings/notifications/index.tsx — the route and page component

The page component should:

  • Define a TanStack Router route at the path described above
  • Load notification preferences data as part of route navigation
  • Enforce the feature flag access requirement
  • Render a form using the project's form utilities
  • Handle form submission calling PUT /api/workspaces/{workspace}/notifications
  • Present any submission or API errors to the user
  • Compose the child components with appropriate page structure

Assume the following already exist and can be imported as needed (do not implement them):

  • getNotificationPrefsQueryOptions(workspace: string) from ~/lib/api/queries
  • NotificationSettingsForm component from ~/components/NotificationSettingsForm
  • $api client from ~/lib/api/client

Do not implement the composite components or the API query helpers — focus only on the page/route file.

evals

README.md

tile.json