create-m5kdev 0.25.0 → 0.25.2

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

@@ -1,153 +1,59 @@
-import { Chip } from "@heroui/react";
-import { buttonVariants } from "@heroui/styles";
-import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
-import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
-import { useTheme } from "@m5kdev/web-ui/components/theme-provider";
-import { APP_NAME } from "{{PACKAGE_SCOPE}}/shared/modules/app/app.constants";
-import {
-  BookTextIcon,
-  Building2Icon,
-  LogOutIcon,
-  MoonStarIcon,
-  NotebookTextIcon,
-  SettingsIcon,
-  ShieldCheckIcon,
-  SunMediumIcon,
-  UserCogIcon,
-  UsersIcon,
-} from "lucide-react";
-import { useTranslation } from "react-i18next";
-import { NavLink, Outlet } from "react-router";
-import { PushNotificationsPanel } from "./modules/notification/PushNotificationsPanel";
-
-const NAV_LINKS = [
-  { to: "/posts", labelKey: "layout.navigation.posts", icon: BookTextIcon },
-  { to: "/organization/members", labelKey: "layout.navigation.members", icon: UsersIcon },
-  { to: "/organization/manage", labelKey: "layout.navigation.childOrgs", icon: Building2Icon },
-  {
-    to: "/organization/preferences",
-    labelKey: "layout.navigation.orgPreferences",
-    icon: SettingsIcon,
-  },
-  { to: "/user/preferences", labelKey: "layout.navigation.profile", icon: UserCogIcon },
-  { to: "/user/invite", labelKey: "layout.navigation.invites", icon: UsersIcon },
-  { to: "/admin/users", labelKey: "layout.navigation.admin", icon: ShieldCheckIcon },
-] as const;
-
-export function Layout() {
-  const { data: session } = useSession();
-  const { theme, setTheme } = useTheme();
-  const { t } = useTranslation("blog{{PACKAGE_SCOPE}}");
-
-  const userName = session?.user?.name || session?.user?.email || "Editor";
-  const userEmail = session?.user?.email || "";
-
-  return (
-    <div className="min-h-screen bg-canvas text-foreground">
-      <div className="mx-auto flex min-h-screen max-w-[1600px] flex-col gap-6 px-4 py-4 lg:flex-row lg:px-6">
-        <aside className="w-full rounded-[32px] border border-white/60 bg-white/70 p-5 shadow-[0_24px_60px_rgba(81,50,24,0.14)] backdrop-blur xl:w-[320px]">
-          <div className="flex items-start justify-between gap-4">
-            <div>
-              <p className="text-[0.68rem] font-semibold uppercase tracking-[0.32em] text-amber-700/80">
-                {t("layout.brand.eyebrow")}
-              </p>
-              <h1 className="mt-3 font-editorial text-4xl leading-none text-ink">{APP_NAME}</h1>
-              <p className="mt-3 max-w-[22ch] text-sm leading-6 text-ink/70">
-                {t("layout.brand.tagline")}
-              </p>
-            </div>
-            <div className="rounded-full border border-amber-200 bg-amber-50/90 p-3 text-amber-700">
-              <NotebookTextIcon className="h-5 w-5" />
-            </div>
-          </div>
-
-          <div className="mt-8 rounded-[28px] border border-amber-200/70 bg-amber-50/85 p-4">
-            <p className="text-[0.68rem] font-semibold uppercase tracking-[0.28em] text-amber-700/80">
-              {t("layout.workspace.eyebrow")}
-            </p>
-            <p className="mt-3 font-editorial text-2xl leading-none text-ink">
-              {t("layout.workspace.title")}
-            </p>
-            <p className="mt-3 text-sm leading-6 text-ink/75">{t("layout.workspace.body")}</p>
-            <div className="mt-4 flex flex-wrap gap-2">
-              <Chip className="bg-amber-100 text-amber-900">{t("layout.workspace.local")}</Chip>
-              <Chip className="bg-emerald-100 text-emerald-900">{t("layout.workspace.auth")}</Chip>
-            </div>
-          </div>
-
-          <PushNotificationsPanel />
-
-          <nav className="mt-8 grid gap-2">
-            {NAV_LINKS.map(({ to, labelKey, icon: Icon }) => (
-              <NavLink
-                key={to}
-                to={to}
-                className={({ isActive }) =>
-                  isActive
-                    ? "group flex items-center gap-3 rounded-[22px] border border-emerald-300 bg-emerald-950 px-4 py-3 text-emerald-50"
-                    : "group flex items-center gap-3 rounded-[22px] border border-transparent bg-transparent px-4 py-3 text-ink/80 transition hover:border-amber-200 hover:bg-white/70"
-                }
-              >
-                <Icon className="h-4 w-4" />
-                <span className="font-medium">{t(labelKey)}</span>
-              </NavLink>
-            ))}
-          </nav>
-
-          <div className="mt-8 rounded-[28px] border border-white/60 bg-stone-950 px-4 py-4 text-stone-100 shadow-[0_16px_32px_rgba(23,19,20,0.2)]">
-            <p className="text-xs uppercase tracking-[0.24em] text-stone-400">
-              {t("layout.account.eyebrow")}
-            </p>
-            <p className="mt-3 text-lg font-semibold">{userName}</p>
-            <p className="mt-1 text-sm text-stone-300">{userEmail}</p>
-            <div className="mt-4 flex flex-wrap items-center gap-2">
-              <button
-                type="button"
-                className={buttonVariants({ variant: "secondary", size: "sm" })}
-                onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-              >
-                {theme === "dark" ? (
-                  <SunMediumIcon className="h-4 w-4" />
-                ) : (
-                  <MoonStarIcon className="h-4 w-4" />
-                )}
-                {theme === "dark" ? t("layout.account.light") : t("layout.account.dark")}
-              </button>
-              <button
-                type="button"
-                className={buttonVariants({ variant: "danger", size: "sm" })}
-                onClick={() => {
-                  authClient.signOut();
-                  window.location.assign("/login");
-                }}
-              >
-                <LogOutIcon className="h-4 w-4" />
-                {t("layout.account.signOut")}
-              </button>
-            </div>
-          </div>
-        </aside>
-
-        <main className="flex min-h-[calc(100vh-2rem)] flex-1 flex-col rounded-[32px] border border-white/60 bg-white/72 shadow-[0_24px_60px_rgba(81,50,24,0.14)] backdrop-blur">
-          <header className="flex flex-wrap items-center justify-between gap-4 border-b border-white/70 px-6 py-5">
-            <div>
-              <p className="text-[0.68rem] font-semibold uppercase tracking-[0.28em] text-emerald-800/70">
-                {t("layout.header.eyebrow")}
-              </p>
-              <h2 className="mt-2 font-editorial text-4xl leading-none text-ink">
-                {t("layout.header.title")}
-              </h2>
-            </div>
-            <Chip className="border border-emerald-300 bg-emerald-50 px-4 py-5 text-emerald-900">
-              {t("layout.header.runtime")}
-            </Chip>
-          </header>
-
-          <div className="flex-1 px-4 py-4 sm:px-6 sm:py-6">
-            <Outlet />
-          </div>
-        </main>
-      </div>
-    </div>
-  );
-}
+import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { AppShell } from "@m5kdev/web-ui/modules/app/components/AppShell";
+import { AppSidebarContent } from "@m5kdev/web-ui/modules/app/components/AppSidebarContent";
+import { AppSidebarHeader } from "@m5kdev/web-ui/modules/app/components/AppSidebarHeader";
+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";
+import { APP_NAME } from "{{PACKAGE_SCOPE}}/shared/modules/app/app.constants";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router";
+import { PushNotificationsPanel } from "./modules/notification/PushNotificationsPanel";
+import { APP_ROUTES, buildNavigationItems } from "./navigation/navigation.config";
+
+export function Layout() {
+  const { data: session } = useSession();
+  const { t } = useTranslation("blog{{PACKAGE_SCOPE}}");
+  const navigate = useNavigate();
+
+  // ephemeral UI state: which collapsible sidebar groups are open
+  const [navigationState, setNavigationState] = useState<Record<string, boolean>>({});
+
+  const onSignOut = () => {
+    authClient.signOut();
+    navigate("/login");
+  };
+
+  return (
+    <AppShell
+      header={<AuthUtilityImpersonationBanner />}
+      sidebar={{
+        header: <AppSidebarHeader logo={{ src: "/logo.svg", alt: APP_NAME }} title={APP_NAME} />,
+        content: (
+          <>
+            <div className="px-2 group-data-[collapsible=icon]:hidden">
+              <AuthOrganizationSelect />
+            </div>
+            <AppSidebarContent
+              navigationItems={buildNavigationItems(t)}
+              navigationState={navigationState}
+              onNavigationStateChange={setNavigationState}
+            />
+            <div className="mt-auto px-2 group-data-[collapsible=icon]:hidden">
+              <PushNotificationsPanel />
+            </div>
+          </>
+        ),
+        footer: (
+          <AppSidebarUser
+            user={session?.user}
+            onSignOut={onSignOut}
+            organizationSettingsPath={APP_ROUTES.organization.preferences}
+          />
+        ),
+      }}
+    />
+  );
+}

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

@@ -1,111 +1,100 @@
-import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
-import { AuthAdminRouter } from "@m5kdev/web-ui/modules/auth/components/AuthAdminRouter";
-import { AuthOrganizationAcceptInvitationRoute } from "@m5kdev/web-ui/modules/auth/components/AuthOrganizationAcceptInvitationRoute";
-import { AuthOrganizationChildOrganizationsRoute } from "@m5kdev/web-ui/modules/auth/components/AuthOrganizationChildOrganizationsRoute";
-import { AuthOrganizationMembersRoute } from "@m5kdev/web-ui/modules/auth/components/AuthOrganizationMembersRoute";
-import { AuthOrganizationPreferences } from "@m5kdev/web-ui/modules/auth/components/AuthOrganizationPreferences";
-import { AuthPublicRouter } from "@m5kdev/web-ui/modules/auth/components/AuthPublicRouter";
-import { syncI18nLocale } from "@m5kdev/frontend/modules/app/utils/locale";
-import { AuthUserRouter } from "@m5kdev/web-ui/modules/auth/components/AuthUserRouter";
-import { APP_NAME } from "{{PACKAGE_SCOPE}}/shared/modules/app/app.constants";
-import type { ReactNode } from "react";
-import { useTranslation } from "react-i18next";
-import { Navigate, Outlet, Route, Routes } from "react-router";
-import { z } from "zod";
-import { PostsRoute } from "@/modules/posts/PostsRoute";
-import { Layout } from "./Layout";
-
-const preferenceSchema = z.object({
-  compactMode: z.boolean().optional(),
-  postsPerPage: z.number().min(1).max(20).optional(),
-});
-
-const preferenceControls = {
-  compactMode: {
-    label: "Compact mode",
-    element: "switch",
-  },
-  postsPerPage: {
-    label: "Posts per page",
-    element: "number",
-    min: 1,
-    max: 20,
-    step: 1,
-  },
-} as const;
-
-function ProtectedRoutes({ children }: { children?: ReactNode }) {
-  const { data: session } = useSession();
-
-  if (!session) {
-    return <Navigate to="/login" replace />;
-  }
-
-  return children ?? <Outlet />;
-}
-
-function AuthHeader() {
-  const { t } = useTranslation("blog{{PACKAGE_SCOPE}}");
-
-  return (
-    <div className="text-center">
-      <p className="text-[0.68rem] font-semibold uppercase tracking-[0.3em] text-default-500">
-        {t("auth.header.eyebrow")}
-      </p>
-      <h1 className="mt-3 font-editorial text-4xl text-ink">{APP_NAME}</h1>
-      <p className="mt-3 text-sm text-default-600">{t("auth.header.tagline")}</p>
-    </div>
-  );
-}
-
-export function Router() {
-  const isWaitlist = import.meta.env.VITE_ENABLE_WAITLIST === "true";
-
-  return (
-    <Routes>
-      {AuthPublicRouter({
-        header: <AuthHeader />,
-        waitlist: isWaitlist,
-        onLocaleChange: syncI18nLocale,
-      })}
-
-      <Route
-        path="/organization/accept-invitation"
-        element={<AuthOrganizationAcceptInvitationRoute />}
-      />
-
-      <Route element={<ProtectedRoutes />}>
-        <Route path="/" element={<Layout />}>
-          <Route index element={<Navigate to="/posts" replace />} />
-          <Route path="posts" element={<PostsRoute />} />
-          <Route
-            path="organization/members"
-            element={<AuthOrganizationMembersRoute />}
-          />
-          <Route
-            path="organization/manage"
-            element={<AuthOrganizationChildOrganizationsRoute />}
-          />
-          <Route
-            path="organization/preferences"
-            element={
-              <AuthOrganizationPreferences
-                schema={preferenceSchema}
-                controls={preferenceControls}
-              />
-            }
-          />
-          {AuthUserRouter({
-            schema: preferenceSchema,
-            controls: preferenceControls,
-            onLocaleChange: syncI18nLocale,
-          })}
-          {AuthAdminRouter({
-            enableWaitlist: true,
-            enableAccountClaimActions: true,
-          })}
-        </Route>
-      </Route>
-    </Routes>
-  );
-}
+import { syncI18nLocale } from "@m5kdev/frontend/modules/app/utils/locale";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { AuthAdminRouter } from "@m5kdev/web-ui/modules/auth/components/AuthAdminRouter";
+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";
+import { BillingBetaPage } from "@m5kdev/web-ui/modules/billing/components/BillingBetaPage";
+import { APP_NAME } from "{{PACKAGE_SCOPE}}/shared/modules/app/app.constants";
+import type { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { Navigate, Outlet, Route, Routes } from "react-router";
+import { z } from "zod";
+import { PostsRoute } from "@/modules/posts/PostsRoute";
+import { Layout } from "./Layout";
+import { APP_ROUTES } from "./navigation/navigation.config";
+
+const preferenceSchema = z.object({
+  compactMode: z.boolean().optional(),
+  postsPerPage: z.number().min(1).max(20).optional(),
+});
+
+const preferenceControls = {
+  compactMode: {
+    label: "Compact mode",
+    element: "switch",
+  },
+  postsPerPage: {
+    label: "Posts per page",
+    element: "number",
+    min: 1,
+    max: 20,
+    step: 1,
+  },
+} as const;
+
+const toRelativePath = (path: string): string => path.replace(/^\//, "");
+
+function ProtectedRoutes({ children }: { children?: ReactNode }) {
+  const { data: session } = useSession();
+
+  if (!session) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return children ?? <Outlet />;
+}
+
+function AuthHeader() {
+  const { t } = useTranslation("blog{{PACKAGE_SCOPE}}");
+
+  return (
+    <div className="text-center">
+      <p className="text-[0.68rem] font-semibold uppercase tracking-[0.3em] text-default-500">
+        {t("auth.header.eyebrow")}
+      </p>
+      <h1 className="mt-3 font-editorial text-4xl text-ink">{APP_NAME}</h1>
+      <p className="mt-3 text-sm text-default-600">{t("auth.header.tagline")}</p>
+    </div>
+  );
+}
+
+export function Router() {
+  const isWaitlist = import.meta.env.VITE_ENABLE_WAITLIST === "true";
+
+  return (
+    <Routes>
+      {/* Built-in routers register as function calls so their <Route> elements
+          land directly in this tree. */}
+      {AuthPublicRouter({
+        header: <AuthHeader />,
+        waitlist: isWaitlist,
+        onLocaleChange: syncI18nLocale,
+      })}
+
+      <Route element={<ProtectedRoutes />}>
+        <Route path={APP_ROUTES.home} element={<Layout />}>
+          <Route index element={<Navigate to={APP_ROUTES.posts} replace />} />
+          <Route path={toRelativePath(APP_ROUTES.posts)} element={<PostsRoute />} />
+          <Route
+            path={toRelativePath(APP_ROUTES.billing)}
+            element={<BillingBetaPage appName={APP_NAME} />}
+          />
+          {AuthOrganizationRouter({
+            schema: preferenceSchema,
+            controls: preferenceControls,
+          })}
+          {AuthUserRouter({
+            schema: preferenceSchema,
+            controls: preferenceControls,
+            onLocaleChange: syncI18nLocale,
+          })}
+          {AuthAdminRouter({
+            enableWaitlist: true,
+            enableAccountClaimActions: true,
+          })}
+        </Route>
+      </Route>
+    </Routes>
+  );
+}