create-m5kdev 0.34.0 → 0.36.0

package/templates/minimal-app/apps/server/drizzle/meta/_journal.json.tpl

@@ -5,30 +5,44 @@
     {
       "idx": 0,
       "version": "6",
-      "when": 1783931793066,
-      "tag": "0000_wealthy_absorbing_man",
+      "when": 1787759631723,
+      "tag": "0000_whole_echo",
       "breakpoints": true
     },
     {
       "idx": 1,
       "version": "6",
-      "when": 1785171166863,
-      "tag": "0001_third_ink",
+      "when": 1788197370969,
+      "tag": "0001_yummy_spectrum",
       "breakpoints": true
     },
     {
       "idx": 2,
       "version": "6",
-      "when": 1786951360347,
-      "tag": "0002_concerned_proudstar",
+      "when": 1788197859737,
+      "tag": "0002_crazy_lilith",
       "breakpoints": true
     },
     {
       "idx": 3,
       "version": "6",
-      "when": 1787145865079,
-      "tag": "0003_silly_the_liberteens",
+      "when": 1788198203749,
+      "tag": "0003_freezing_fantastic_four",
+      "breakpoints": true
+    },
+    {
+      "idx": 4,
+      "version": "6",
+      "when": 1788198833389,
+      "tag": "0004_slow_ezekiel_stane",
+      "breakpoints": true
+    },
+    {
+      "idx": 5,
+      "version": "6",
+      "when": 1788253467922,
+      "tag": "0005_wonderful_the_professor",
       "breakpoints": true
     }
   ]
-}
+}

package/templates/minimal-app/apps/server/src/app.ts.tpl

@@ -23,6 +23,9 @@ import {
   APP_NAME,
   APP_ROLES_CONFIG,
 } from "{{PACKAGE_SCOPE}}/shared/modules/app/app.constants";
+// m5k:notifications:start
+import { NOTIFICATION_KINDS } from "{{PACKAGE_SCOPE}}/shared/modules/notification/notification.constants";
+// m5k:notifications:end
 // m5k:ai:start
 import { mastra, openrouter } from "./modules/conversation/conversation.mastra";
 // m5k:ai:end
@@ -138,7 +141,7 @@ export const builtBackendApp = createBackendApp(
     new DemoWorkflowModule(),
     // m5k:workflows:end
     // m5k:notifications:start
-    new NotificationModule(),
+    new NotificationModule({ kinds: NOTIFICATION_KINDS }),
     // m5k:notifications:end
     new PostsModule(),
     new EmailPreviewModule({ allowDelete: process.env.NODE_ENV !== "production" }),

package/templates/minimal-app/apps/server/src/modules/demo-workflow/demo-workflow.module.ts.tpl

@@ -1,4 +1,5 @@
 import { createBackendRouterMap } from "@m5kdev/backend/app";
+import type { AuthModule } from "@m5kdev/backend/modules/auth/auth.module";
 import {
   BaseModule,
   type ModuleServicesContext,
@@ -9,7 +10,7 @@ import type { WorkflowModule } from "@m5kdev/backend/modules/workflow/workflow.m
 import { DemoWorkflowService } from "./demo-workflow.service";
 import { createDemoWorkflowTRPC } from "./demo-workflow.trpc";
 
-type DemoWorkflowModuleDeps = { workflow: WorkflowModule };
+type DemoWorkflowModuleDeps = { workflow: WorkflowModule; auth: AuthModule };
 type DemoWorkflowModuleServices = {
   demoWorkflow: DemoWorkflowService;
 };
@@ -25,13 +26,16 @@ export class DemoWorkflowModule extends BaseModule<
   DemoWorkflowModuleRouters
 > {
   readonly id = "demo-workflow";
-  override readonly dependsOn = ["workflow"] as const;
+  override readonly dependsOn = ["workflow", "auth"] as const;
 
   override services({
     deps,
   }: ModuleServicesContext<DemoWorkflowModuleDeps, Record<string, never>>) {
     return {
-      demoWorkflow: new DemoWorkflowService({ workflow: deps.workflow.services.workflow }),
+      demoWorkflow: new DemoWorkflowService({
+        workflow: deps.workflow.services.workflow,
+        auth: deps.auth.services.auth,
+      }),
     };
   }
 

package/templates/minimal-app/apps/server/src/modules/demo-workflow/demo-workflow.service.ts.tpl

@@ -1,9 +1,11 @@
+import type { AuthService } from "@m5kdev/backend/modules/auth/auth.service";
 import type { ServerResultAsync } from "@m5kdev/backend/modules/base/base.dto";
 import { BaseService } from "@m5kdev/backend/modules/base/base.service";
 import type { WorkflowService } from "@m5kdev/backend/modules/workflow/workflow.service";
 import type { FireAndForgetJobDefinition } from "@m5kdev/backend/modules/workflow/workflow.types";
 import type { Context } from "@m5kdev/backend/utils/trpc";
 import { workflowTriggerOutputSchema } from "@m5kdev/commons/modules/workflow/workflow.schema";
+import { DEMO_WORKFLOW_SERVER_EVENT_RESOURCE } from "{{PACKAGE_SCOPE}}/shared/modules/demo-workflow/demo-workflow.constants";
 import { ok } from "neverthrow";
 
 const DEMO_PING_JOB_NAME = "demo.ping";
@@ -14,12 +16,12 @@ interface DemoPingJobPayload {
 
 export class DemoWorkflowService extends BaseService<
   Record<string, never>,
-  { workflow: WorkflowService },
+  { workflow: WorkflowService; auth: AuthService },
   Context
 > {
   readonly demoPingJob: FireAndForgetJobDefinition<DemoPingJobPayload>;
 
-  constructor(services: { workflow: WorkflowService }) {
+  constructor(services: { workflow: WorkflowService; auth: AuthService }) {
     super({}, services);
 
     this.demoPingJob = this.service.workflow
@@ -28,8 +30,14 @@ export class DemoWorkflowService extends BaseService<
         queue: "fast",
         meta: (payload) => ({ userId: payload.userId }),
       })
-      .handle(async () => {
-        // Completes immediately so the Starter webapp can observe a finished run.
+      .handle(async (payload) => {
+        this.service.auth.userEmit({
+          userId: payload.userId,
+          resource: DEMO_WORKFLOW_SERVER_EVENT_RESOURCE,
+          id: DEMO_PING_JOB_NAME,
+          change: "updated",
+          organizationId: null,
+        });
       });
   }
 

package/templates/minimal-app/apps/server/src/modules/posts/posts.db.ts.tpl

@@ -1,4 +1,4 @@
-import { members, organizations, teams, users } from "@m5kdev/backend/modules/auth/auth.db";
+import { members, organizations, users } from "@m5kdev/backend/modules/auth/auth.db";
 import { integer, sqliteTable as table, text } from "drizzle-orm/sqlite-core";
 import { v4 as uuidv4 } from "uuid";
 
@@ -13,7 +13,7 @@ export const posts = table("posts", {
   organizationId: text("organization_id").references(() => organizations.id, {
     onDelete: "set null",
   }),
-  teamId: text("team_id").references(() => teams.id, { onDelete: "set null" }),
+  teamId: text("team_id"),
   title: text("title").notNull(),
   slug: text("slug").notNull().unique(),
   excerpt: text("excerpt"),

package/templates/minimal-app/apps/server/src/modules/posts/posts.module.ts.tpl

@@ -11,6 +11,7 @@ import { PostsRepository } from "./posts.repository";
 import { PostsService } from "./posts.service";
 import { createPostsTRPC } from "./posts.trpc";
 
+type PostsModuleDeps = Record<string, never>;
 type PostsModuleTables = typeof postsTables;
 type PostsModuleRepositories = {
   posts: PostsRepository;
@@ -23,7 +24,7 @@ type PostsModuleRouters = {
 };
 
 export class PostsModule extends BaseModule<
-  never,
+  PostsModuleDeps,
   PostsModuleTables,
   PostsModuleRepositories,
   PostsModuleServices,
@@ -32,7 +33,7 @@ export class PostsModule extends BaseModule<
   readonly id = "posts";
   override readonly dbDependsOn = ["auth"] as const;
 
-  override repositories({ db }: ModuleRepositoriesContext<never, PostsModuleTables>) {
+  override repositories({ db }: ModuleRepositoriesContext<PostsModuleDeps, PostsModuleTables>) {
     return {
       posts: new PostsRepository({
         orm: db.orm,
@@ -42,13 +43,15 @@ export class PostsModule extends BaseModule<
     };
   }
 
-  override services({ repositories }: ModuleServicesContext<never, PostsModuleRepositories>) {
+  override services({
+    repositories,
+  }: ModuleServicesContext<PostsModuleDeps, PostsModuleRepositories>) {
     return {
       posts: new PostsService({ posts: repositories.posts }, {}, postsGrants),
     };
   }
 
-  override trpc({ trpc, services }: ModuleTRPCContext<never, PostsModuleServices>) {
+  override trpc({ trpc, services }: ModuleTRPCContext<PostsModuleDeps, PostsModuleServices>) {
     return createBackendRouterMap("posts", createPostsTRPC(trpc, services.posts));
   }
 }

package/templates/minimal-app/apps/server/src/modules/posts/posts.service.ts.tpl

@@ -50,7 +50,7 @@ export class PostsService extends BasePermissionService<
         authorUserId: ctx.user.id,
         memberId: ctx.actor.memberId ?? null,
         organizationId: ctx.session.activeOrganizationId ?? null,
-        teamId: ctx.session.activeTeamId ?? null,
+        teamId: null,
         title: input.title.trim(),
         slug: uniqueSlug.value,
         excerpt: createExcerpt(input.excerpt, input.content),
@@ -88,7 +88,7 @@ export class PostsService extends BasePermissionService<
       action: "publish",
       entityStep: "post",
     })
-    .handle(({ input, state }) => {
+    .handle(async ({ input, state }) => {
       return this.repository.posts.update({
         id: input.id,
         status: "published",

package/templates/minimal-app/apps/server/src/modules/test-harness/test-harness.module.ts.tpl

@@ -3,7 +3,7 @@ import {
   type ModuleExpressContext,
   type TableMap,
 } from "@m5kdev/backend/modules/base/base.module";
-import { and, desc, eq, isNotNull } from "drizzle-orm";
+import { and, desc, eq, isNotNull, isNull } from "drizzle-orm";
 import type { Request, Response } from "express";
 import { v4 as uuidv4 } from "uuid";
 
@@ -77,13 +77,14 @@ export class TestHarnessModule extends BaseModule<
           type: db.schema.organizations.type,
           parentId: db.schema.organizations.parentId,
           role: db.schema.members.role,
+          memberId: db.schema.members.id,
         })
         .from(db.schema.members)
         .innerJoin(
           db.schema.organizations,
           eq(db.schema.members.organizationId, db.schema.organizations.id)
         )
-        .where(eq(db.schema.members.userId, user.id));
+        .where(and(eq(db.schema.members.userId, user.id), isNull(db.schema.members.deletedAt)));
 
       const [credentialAccount] = await db.orm
         .select({ id: db.schema.accounts.id })
@@ -99,21 +100,16 @@ export class TestHarnessModule extends BaseModule<
 
       const accountClaims = await db.orm
         .select({
-          id: db.schema.waitlist.id,
-          status: db.schema.waitlist.status,
-          claimUserId: db.schema.waitlist.claimUserId,
-          claimedEmail: db.schema.waitlist.claimedEmail,
-          claimedAt: db.schema.waitlist.claimedAt,
-          expiresAt: db.schema.waitlist.expiresAt,
+          id: db.schema.accountClaims.id,
+          status: db.schema.accountClaims.status,
+          claimUserId: db.schema.accountClaims.claimUserId,
+          claimedEmail: db.schema.accountClaims.claimedEmail,
+          claimedAt: db.schema.accountClaims.claimedAt,
+          expiresAt: db.schema.accountClaims.expiresAt,
         })
-        .from(db.schema.waitlist)
-        .where(
-          and(
-            eq(db.schema.waitlist.type, "ACCOUNT_CLAIM"),
-            eq(db.schema.waitlist.claimUserId, user.id)
-          )
-        )
-        .orderBy(desc(db.schema.waitlist.createdAt));
+        .from(db.schema.accountClaims)
+        .where(eq(db.schema.accountClaims.claimUserId, user.id))
+        .orderBy(desc(db.schema.accountClaims.createdAt));
 
       const [latestSession] = await db.orm
         .select({
@@ -123,7 +119,6 @@ export class TestHarnessModule extends BaseModule<
           activeOrganizationRole: db.schema.sessions.activeOrganizationRole,
           activeOrganizationMemberId: db.schema.sessions.activeOrganizationMemberId,
           activeOrganizationType: db.schema.sessions.activeOrganizationType,
-          activeTeamId: db.schema.sessions.activeTeamId,
           impersonatedBy: db.schema.sessions.impersonatedBy,
           createdAt: db.schema.sessions.createdAt,
         })
@@ -172,7 +167,6 @@ export class TestHarnessModule extends BaseModule<
         const now = new Date();
         const userId = uuidv4();
         const organizationId = uuidv4();
-        const teamId = uuidv4();
         const claimId = createClaim ? uuidv4() : null;
 
         await db.orm.transaction(async (tx) => {
@@ -202,26 +196,9 @@ export class TestHarnessModule extends BaseModule<
             createdAt: now,
           });
 
-          await tx.insert(db.schema.teams).values({
-            id: teamId,
-            name: "Editorial",
-            organizationId,
-            createdAt: now,
-            updatedAt: now,
-          });
-
-          await tx.insert(db.schema.teamMembers).values({
-            id: uuidv4(),
-            teamId,
-            userId,
-            role: "owner",
-            createdAt: now,
-          });
-
           if (claimId) {
-            await tx.insert(db.schema.waitlist).values({
+            await tx.insert(db.schema.accountClaims).values({
               id: claimId,
-              type: "ACCOUNT_CLAIM",
               status: "INVITED",
               claimUserId: userId,
               code: uuidv4(),

package/templates/minimal-app/apps/server/src/schema.ts.tpl

@@ -1,14 +1,13 @@
 // biome-ignore-all assist/source/organizeImports: feature-gated table exports stay in marker blocks
 export {
   accountClaimMagicLinks,
+  accountClaims,
   accounts,
   apikeys,
   invitations,
   members,
   organizations,
   sessions,
-  teamMembers,
-  teams,
   users,
   verifications,
   waitlist,
@@ -22,7 +21,9 @@ export { files } from "@m5kdev/backend/modules/file/file.db";
 // m5k:notifications:start
 export {
   notificationDevices,
+  notificationPreferences,
   notificationSendLogs,
+  notifications,
 } from "@m5kdev/backend/modules/notification/notification.db";
 // m5k:notifications:end
 // m5k:workflows:start

package/templates/minimal-app/apps/shared/package.json.tpl

@@ -20,6 +20,8 @@
   "exports": {
     "./modules/app/*": "./src/modules/app/*.ts",
     "./modules/conversation/*": "./src/modules/conversation/*.ts",
+    "./modules/demo-workflow/*": "./src/modules/demo-workflow/*.ts",
+    "./modules/notification/*": "./src/modules/notification/*.ts",
     "./modules/posts/*": "./src/modules/posts/*.ts"
   }
 }

package/templates/minimal-app/apps/shared/src/modules/app/app.constants.ts.tpl

@@ -18,7 +18,7 @@ export const APP_ROLES_CONFIG = defineAuthRoles({
   organization: {
     roles: ["member", "admin", "owner"],
     managerRoles: ["admin", "owner"],
-    assignableRoles: ["member", "admin", "owner"],
+    assignableRoles: ["member", "admin"],
     defaultRole: "member",
   },
   team: {

package/templates/minimal-app/apps/shared/src/modules/demo-workflow/demo-workflow.constants.ts.tpl

@@ -0,0 +1 @@
+export const DEMO_WORKFLOW_SERVER_EVENT_RESOURCE = "workflow";

package/templates/minimal-app/apps/shared/src/modules/notification/notification.constants.ts.tpl

@@ -0,0 +1,5 @@
+import type { NotificationKind } from "@m5kdev/commons/modules/notification/notification.constants";
+
+export const NOTIFICATION_KINDS = [
+  { id: "notification.test", defaultChannels: ["in-app"] },
+] as const satisfies readonly NotificationKind[];

package/templates/minimal-app/apps/shared/src/modules/notification/notification.schema.ts.tpl

@@ -1,3 +1,3 @@
-/** Re-export shared push-notification contracts from commons. */
+/** Re-export shared Notification contracts from commons. */
 export * from "@m5kdev/commons/modules/notification/notification.constants";
 export * from "@m5kdev/commons/modules/notification/notification.schema";

package/templates/minimal-app/apps/webapp/src/App.tsx.tpl

@@ -14,6 +14,7 @@ import { NuqsAdapter } from "nuqs/adapters/react-router/v7";
 import { BrowserRouter } from "react-router";
 import { Toaster } from "sonner";
 import { Router } from "./Router";
+import { StarterServerEventProvider } from "./StarterServerEventProvider";
 
 export function App() {
   return (
@@ -31,11 +32,13 @@ export function App() {
           <ThemeProvider defaultTheme="light" storageKey="m5kdev-theme">
             <AuthProvider loader={<AppLoader />}>
               <AppTrpcQueryProvider>
-                <DialogProvider>
-                  <Router />
-                </DialogProvider>
-                <Toaster richColors closeButton />
-                <Toast.Provider placement="bottom end" />
+                <StarterServerEventProvider>
+                  <DialogProvider>
+                    <Router />
+                  </DialogProvider>
+                  <Toaster richColors closeButton />
+                  <Toast.Provider placement="bottom end" />
+                </StarterServerEventProvider>
               </AppTrpcQueryProvider>
             </AuthProvider>
           </ThemeProvider>

package/templates/minimal-app/apps/webapp/src/Layout.tsx.tpl

@@ -7,8 +7,11 @@ import { AppSidebarHeader } from "@m5kdev/web-ui/modules/app/components/AppSideb
 import { AppSidebarUser } from "@m5kdev/web-ui/modules/app/components/AppSidebarUser";
 import { AuthOrganizationSelect } from "@m5kdev/web-ui/modules/auth/components/AuthOrganizationSelect";
 import { AuthUtilityImpersonationBanner } from "@m5kdev/web-ui/modules/auth/components/AuthUtilityImpersonationBanner";
+// m5k:notifications:start
+import { NotificationSidebarInbox } from "@m5kdev/web-ui/modules/notification/components/NotificationSidebarInbox";
+// m5k:notifications:end
 import { APP_NAME } from "{{PACKAGE_SCOPE}}/shared/modules/app/app.constants";
-import { FileIcon, UsersIcon } from "lucide-react";
+import { BellIcon, FileIcon, UsersIcon } from "lucide-react";
 // m5k:ai:start
 import { SparklesIcon } from "lucide-react";
 // m5k:ai:end
@@ -21,6 +24,9 @@ import { WorkflowIcon } from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router";
+// m5k:notifications:start
+import { StarterWebPush } from "./modules/notification/StarterWebPush";
+// m5k:notifications:end
 
 export function Layout() {
   const { data: session } = useSession();
@@ -42,6 +48,9 @@ export function Layout() {
         header: <AppSidebarHeader logo={{ src: "/logo.svg", alt: APP_NAME }} title={APP_NAME} />,
         content: (
           <>
+            {/* m5k:notifications:start */}
+            <NotificationSidebarInbox enablePush={<StarterWebPush />} />
+            {/* m5k:notifications:end */}
             <div className="px-2 group-data-[collapsible=icon]:hidden">
               <AuthOrganizationSelect />
             </div>
@@ -73,6 +82,13 @@ export function Layout() {
                   link: "/workflows",
                 },
                 // m5k:workflows:end
+                // m5k:notifications:start
+                {
+                  label: t("layout.navigation.notifications"),
+                  icon: <BellIcon />,
+                  link: "/notifications",
+                },
+                // m5k:notifications:end
                 {
                   label: t("layout.navigation.members"),
                   icon: <UsersIcon />,

package/templates/minimal-app/apps/webapp/src/Router.tsx.tpl

@@ -1,7 +1,6 @@
 // biome-ignore-all assist/source/organizeImports: feature-gated route imports stay in marker blocks
 import { syncI18nLocale } from "@m5kdev/frontend/modules/app/utils/locale";
 import { AuthAdminRouter } from "@m5kdev/web-ui/modules/auth/components/AuthAdminRouter";
-import { AuthOrganizationAcceptInvitationRoute } from "@m5kdev/web-ui/modules/auth/components/AuthOrganizationAcceptInvitationRoute";
 import { AuthOrganizationRouter } from "@m5kdev/web-ui/modules/auth/components/AuthOrganizationRouter";
 import { AuthPublicRouter } from "@m5kdev/web-ui/modules/auth/components/AuthPublicRouter";
 import { AuthUserRouter } from "@m5kdev/web-ui/modules/auth/components/AuthUserRouter";
@@ -20,6 +19,9 @@ import { FilesRoute } from "@/modules/files/FilesRoute";
 // m5k:workflows:start
 import { WorkflowsRoute } from "@/modules/workflows/WorkflowsRoute";
 // m5k:workflows:end
+// m5k:notifications:start
+import { NotificationPreferencesRoute } from "@/modules/notification/NotificationPreferencesRoute";
+// m5k:notifications:end
 import { Layout } from "./Layout";
 
 const preferenceSchema = z.object({
@@ -68,13 +70,6 @@ export function Router() {
         onLocaleChange: syncI18nLocale,
       })}
 
-      {/* public: a logged-out invitee must reach this route so it can send
-          them to signup — inside ProtectedRoutes they'd bounce to /login */}
-      <Route
-        path="/organization/accept-invitation"
-        element={<AuthOrganizationAcceptInvitationRoute />}
-      />
-
       <Route
         element={
           <ProtectedRoutes>
@@ -93,6 +88,13 @@ export function Router() {
           // m5k:workflows:start
           <Route key="workflows" path="workflows" element={<WorkflowsRoute />} />,
           // m5k:workflows:end
+          // m5k:notifications:start
+          <Route
+            key="notifications"
+            path="notifications"
+            element={<NotificationPreferencesRoute />}
+          />,
+          // m5k:notifications:end
         ]}
 
         {AuthUserRouter({

package/templates/minimal-app/apps/webapp/src/StarterServerEventProvider.tsx.tpl

@@ -0,0 +1,38 @@
+// biome-ignore-all assist/source/organizeImports: feature-gated Server event imports stay in marker blocks
+import { ServerEventProvider } from "@m5kdev/frontend/modules/app/components/ServerEventProvider";
+// m5k:workflows:start
+import type { QueryClient } from "@tanstack/react-query";
+import { DEMO_WORKFLOW_SERVER_EVENT_RESOURCE } from "{{PACKAGE_SCOPE}}/shared/modules/demo-workflow/demo-workflow.constants";
+// m5k:workflows:end
+import type { ReactNode } from "react";
+// m5k:workflows:start
+import { useTRPC } from "./utils/trpc";
+// m5k:workflows:end
+
+type Props = {
+  children: ReactNode;
+};
+
+/** Kernel SSE for the authenticated session. Workflow handlers are feature-gated. */
+export function StarterServerEventProvider({ children }: Props): ReactNode {
+  // m5k:workflows:start
+  const trpc = useTRPC();
+  const invalidateWorkflowList = (queryClient: QueryClient): void => {
+    void queryClient.invalidateQueries(trpc.workflow.list.queryFilter());
+  };
+  // m5k:workflows:end
+  return (
+    <ServerEventProvider
+      // m5k:workflows:start
+      handlers={{
+        [DEMO_WORKFLOW_SERVER_EVENT_RESOURCE]: (_event, queryClient) => {
+          invalidateWorkflowList(queryClient);
+        },
+      }}
+      onReconnect={invalidateWorkflowList}
+      // m5k:workflows:end
+    >
+      {children}
+    </ServerEventProvider>
+  );
+}

package/templates/minimal-app/apps/webapp/src/modules/notification/NotificationPreferencesRoute.tsx.tpl

@@ -0,0 +1,29 @@
+import { Card } from "@heroui/react";
+import { NotificationPreferences } from "@m5kdev/web-ui/modules/notification/components/NotificationPreferences";
+import { NOTIFICATION_KINDS } from "{{PACKAGE_SCOPE}}/shared/modules/notification/notification.constants";
+import { useTranslation } from "react-i18next";
+import { StarterWebPush } from "./StarterWebPush";
+
+export function NotificationPreferencesRoute() {
+  const { t } = useTranslation("{{APP_SLUG}}");
+
+  return (
+    <div className="grid gap-6 p-4" data-testid="notification-preferences-route">
+      <div className="justify-self-start">
+        <StarterWebPush />
+      </div>
+      <Card>
+        <Card.Header className="flex flex-col gap-1">
+          <p className="text-xs font-medium uppercase tracking-wide text-muted">
+            {t("notifications.hero.eyebrow")}
+          </p>
+          <Card.Title>{t("notifications.hero.title")}</Card.Title>
+          <Card.Description>{t("notifications.hero.body")}</Card.Description>
+        </Card.Header>
+        <Card.Content>
+          <NotificationPreferences kinds={NOTIFICATION_KINDS} offerEmail />
+        </Card.Content>
+      </Card>
+    </div>
+  );
+}

package/templates/minimal-app/apps/webapp/src/modules/notification/StarterWebPush.tsx.tpl

@@ -0,0 +1,44 @@
+import { Button } from "@heroui/react";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { useWebPush } from "@m5kdev/web-ui/hooks/useWebPush";
+import { BellRingIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { useTRPC } from "../../utils/trpc";
+
+export function StarterWebPush(): ReactNode {
+  const { t } = useTranslation("{{APP_SLUG}}");
+  const { data: session } = useSession();
+  const trpc = useTRPC();
+  const webPush = useWebPush({
+    enabled: Boolean(session?.user?.id),
+    messages: {
+      unsupported: t("layout.push.unsupported"),
+      denied: t("layout.push.denied"),
+      noVapid: t("layout.push.noVapid"),
+      badSubscription: t("layout.push.badSubscription"),
+      failed: t("layout.push.failed"),
+      enabled: t("layout.push.enabled"),
+    },
+    vapidPublicKeyQuery: trpc.notification.vapidPublicKey.queryOptions(),
+    registerDeviceMutation: trpc.notification.registerDevice.mutationOptions(),
+  });
+
+  if (!session?.user?.id || webPush.flowStatus === "done") return null;
+
+  const label = webPush.permission === "denied" ? t("layout.push.denied") : t("layout.push.cta");
+
+  return (
+    <Button
+      size="sm"
+      variant="secondary"
+      isDisabled={!webPush.canSubscribe || webPush.isWorking}
+      onPress={() => {
+        void webPush.subscribe();
+      }}
+    >
+      <BellRingIcon className="size-4" />
+      {label}
+    </Button>
+  );
+}

package/templates/minimal-app/apps/webapp/translations/en/{{APP_SLUG}}.json.tpl

@@ -19,6 +19,7 @@
       "organization": "Organization",
       "account": "Account",
       "members": "Members",
+      "notifications": "Notifications",
       "childOrgs": "Child orgs",
       "orgPreferences": "Org preferences",
       "profile": "Profile",
@@ -184,6 +185,13 @@
       "failed": "Upload failed."
     }
   },
+  "notifications": {
+    "hero": {
+      "eyebrow": "This membership",
+      "title": "Notification preferences",
+      "body": "Mute channels for this organization. Other organizations keep their own settings."
+    }
+  },
   "auth": {
     "header": {
       "eyebrow": "Framework Starter",