@bygghammar/cms-platform 0.63.0 → 0.64.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.63.0",
+  "version": "0.64.0",
   "description": "Shared CMS platform: blocks, block types, i18n core, UI primitives and design-token contract used by every Bygghammar/Voyara site.",
   "type": "module",
   "sideEffects": [

package/src/backoffice/DashboardView.tsx

@@ -14,6 +14,8 @@ export type DashboardCard = {
   title: string;
   body: string;
   icon: ComponentType<{ className?: string }>;
+  /** Module switch that has to be on for the card to be shown. */
+  feature?: string;
 };
 
 /** Translation sweep modes offered on the dashboard. */

package/src/backoffice/routes/host.ts

@@ -232,6 +232,8 @@ export type BackofficeHost = {
       title: string;
       body: string;
       icon: (props: { className?: string }) => ReactNode;
+      /** Module switch that has to be on for the card to be shown. */
+      feature?: string;
     }[];
     translateTarget?: string;
     translate?: HostServerFn;

package/src/backoffice/routes/index.tsx

@@ -45,6 +45,7 @@ import { SiteSettingsView } from "../SiteSettingsView";
 import { TrackingView } from "../TrackingView";
 import { UsersView } from "../UsersView";
 import { VersionView } from "../VersionView";
+import { useFeatureGate } from "../shell/use-resolved-config";
 import { backofficeHost, backofficePaths } from "./host";
 
 export * from "./host";
@@ -189,7 +190,7 @@ export function RedirectsRoute() {
 }
 
 /** Code & tracking injection screen. */
-export function TrackingRoute() {
+function TrackingRouteInner() {
   const { fns, locales } = backofficeHost();
   const list = useServerFn(fns.listInjections);
   const save = useServerFn(fns.saveInjection);
@@ -238,7 +239,7 @@ export function ContactDetailsRoute() {
 }
 
 /** Form defaults and retention screen. */
-export function FormSettingsRoute() {
+function FormSettingsRouteInner() {
   const host = backofficeHost();
   const { fns } = host;
   const load = useServerFn(fns.getFormDefaults);
@@ -493,7 +494,7 @@ export function SitemapRoute() {
 }
 
 /** Email sending settings plus provider credentials. */
-export function EmailSettingsRoute() {
+function EmailSettingsRouteInner() {
   const host = backofficeHost();
   const { fns } = host;
   const fetchSettings = useServerFn(fns.getEmailSettings);
@@ -559,7 +560,7 @@ export function NavigationRoute() {
 }
 
 /** Per-locale domain mapping. */
-export function DomainsRoute() {
+function DomainsRouteInner() {
   const host = backofficeHost();
   const paths = backofficePaths(host);
   const qc = useQueryClient();
@@ -585,7 +586,7 @@ export function DomainsRoute() {
 }
 
 /** Testimonials / reviews editor backed by the shared content section. */
-export function ReviewsRoute() {
+function ReviewsRouteInner() {
   const host = backofficeHost();
   const paths = backofficePaths(host);
   const qc = useQueryClient();
@@ -621,7 +622,7 @@ export function ReviewsRoute() {
 }
 
 /** Backup and restore, superadmin only. */
-export function BackupRoute() {
+function BackupRouteInner() {
   const host = backofficeHost();
   const backup = host.backup;
   if (!backup) {
@@ -649,3 +650,45 @@ export function BackupRoute() {
     />
   );
 }
+
+/** ReviewsRoute guarded by the "reviews" module switch. */
+export function ReviewsRoute() {
+  const gate = useFeatureGate("reviews", "Reviews");
+  if (gate) return <>{gate}</>;
+  return <ReviewsRouteInner />;
+}
+
+/** DomainsRoute guarded by the "domains" module switch. */
+export function DomainsRoute() {
+  const gate = useFeatureGate("domains", "Domains");
+  if (gate) return <>{gate}</>;
+  return <DomainsRouteInner />;
+}
+
+/** TrackingRoute guarded by the "tracking" module switch. */
+export function TrackingRoute() {
+  const gate = useFeatureGate("tracking", "Code & tracking");
+  if (gate) return <>{gate}</>;
+  return <TrackingRouteInner />;
+}
+
+/** EmailSettingsRoute guarded by the "email" module switch. */
+export function EmailSettingsRoute() {
+  const gate = useFeatureGate("email", "Email");
+  if (gate) return <>{gate}</>;
+  return <EmailSettingsRouteInner />;
+}
+
+/** BackupRoute guarded by the "backup" module switch. */
+export function BackupRoute() {
+  const gate = useFeatureGate("backup", "Backup");
+  if (gate) return <>{gate}</>;
+  return <BackupRouteInner />;
+}
+
+/** FormSettingsRoute guarded by the "forms" module switch. */
+export function FormSettingsRoute() {
+  const gate = useFeatureGate("forms", "Forms");
+  if (gate) return <>{gate}</>;
+  return <FormSettingsRouteInner />;
+}

package/src/backoffice/routes/media-forms.tsx

@@ -8,6 +8,7 @@
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
+import { useFeatureGate } from "../shell/use-resolved-config";
 import { Link, useNavigate, useParams, useSearch } from "@tanstack/react-router";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useServerFn } from "@tanstack/react-start";
@@ -113,7 +114,7 @@ export function MediaRoute() {
 }
 
 /** Forms index: list, create, duplicate, delete and the trash bin. */
-export function FormsIndexRoute() {
+function FormsIndexRouteInner() {
   const forms = requireHostGroup("forms");
   const { fns } = backofficeHost();
   const qc = useQueryClient();
@@ -158,7 +159,7 @@ export function FormsIndexRoute() {
 }
 
 /** Form editor for a single form key. */
-export function FormEditorRoute() {
+function FormEditorRouteInner() {
   const forms = requireHostGroup("forms");
   const { fns } = backofficeHost();
   const params = useParams({ strict: false }) as { key?: string };
@@ -231,7 +232,7 @@ export function validateSubmissionSearch(search: Record<string, unknown>): Submi
 }
 
 /** Submission inbox with filters, paging, exports and delivery retries. */
-export function FormSubmissionsRoute() {
+function FormSubmissionsRouteInner() {
   const forms = requireHostGroup("forms");
   const host = backofficeHost();
   const paths = backofficePaths(host);
@@ -302,7 +303,7 @@ export function FormSubmissionsRoute() {
 }
 
 /** Delivery attempt dashboard (retry / resolve failed notifications). */
-export function FormDeliveriesRoute() {
+function FormDeliveriesRouteInner() {
   const forms = requireHostGroup("forms");
   const host = backofficeHost();
   const paths = backofficePaths(host);
@@ -358,3 +359,31 @@ export function FormDeliveriesRoute() {
     />
   );
 }
+
+/** FormsIndexRoute guarded by the "forms" module switch. */
+export function FormsIndexRoute() {
+  const gate = useFeatureGate("forms", "Forms");
+  if (gate) return <>{gate}</>;
+  return <FormsIndexRouteInner />;
+}
+
+/** FormEditorRoute guarded by the "forms" module switch. */
+export function FormEditorRoute() {
+  const gate = useFeatureGate("forms", "Forms");
+  if (gate) return <>{gate}</>;
+  return <FormEditorRouteInner />;
+}
+
+/** FormSubmissionsRoute guarded by the "forms" module switch. */
+export function FormSubmissionsRoute() {
+  const gate = useFeatureGate("forms", "Forms");
+  if (gate) return <>{gate}</>;
+  return <FormSubmissionsRouteInner />;
+}
+
+/** FormDeliveriesRoute guarded by the "forms" module switch. */
+export function FormDeliveriesRoute() {
+  const gate = useFeatureGate("forms", "Forms");
+  if (gate) return <>{gate}</>;
+  return <FormDeliveriesRouteInner />;
+}

package/src/backoffice/routes/pages.tsx

@@ -17,6 +17,7 @@ import { toast } from "sonner";
 import { PageBuilderView } from "../PageBuilderView";
 import { SectionEditorView } from "../SectionEditorView";
 import { DashboardView, type DashboardCard } from "../DashboardView";
+import { useResolvedSiteConfig } from "../shell/use-resolved-config";
 import { ResetPasswordView } from "../ResetPasswordView";
 import { backofficeHost, backofficePaths, requireHostGroup } from "./host";
 
@@ -204,13 +205,18 @@ export function SectionEditorRoute() {
 /** Backoffice dashboard for `/<backoffice>/`. */
 export function DashboardRoute() {
   const dashboard = requireHostGroup("dashboard");
+  const { config } = useResolvedSiteConfig();
   const translateFn = dashboard.translate;
   const runTranslate = useServerFn(translateFn ?? (async () => ({})));
 
   return (
     <DashboardView
       deps={{
-        cards: dashboard.cards as unknown as readonly DashboardCard[],
+        cards: (dashboard.cards as unknown as readonly DashboardCard[]).filter(
+          (c) =>
+            !c.feature ||
+            (config.features as Record<string, boolean | undefined>)[c.feature] === true,
+        ),
         renderLink: ({ to, className, children }) => (
           <Link to={to as any} className={className}>
             {children}

package/src/backoffice/shell/index.ts

@@ -7,3 +7,11 @@ export type {
 export { backofficeNav } from "./nav-model";
 export type { BackofficeNavItem, BackofficeNavKey, BackofficeNavOptions } from "./nav-model";
 export { backofficeRedirectHost, isDevelopmentHost } from "./domain-guard";
+export {
+  FeatureDisabledNotice,
+  SITE_SETTINGS_QUERY_KEY,
+  useBackofficeNav,
+  useFeatureEnabled,
+  useFeatureGate,
+  useResolvedSiteConfig,
+} from "./use-resolved-config";

package/src/backoffice/shell/use-resolved-config.tsx

@@ -0,0 +1,84 @@
+/**
+ * Live backoffice site configuration.
+ *
+ * The sidebar, the dashboard cards and the module screens must all obey the
+ * module switches saved under Site settings, not just the values compiled into
+ * `site.config.ts`. These hooks resolve the code config layered with the stored
+ * overrides through the host's `getSiteSettings` function, sharing the
+ * `["admin","site-settings"]` query key with the settings screen so a save
+ * updates the menu immediately.
+ */
+import type { ReactNode } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useServerFn } from "@tanstack/react-start";
+
+import type { SiteConfig, SiteFeatureFlags } from "../../config/site-config";
+import { resolveSiteConfig } from "../../config/site-config";
+import { backofficeHost } from "../routes/host";
+import { backofficeNav, type BackofficeNavItem, type BackofficeNavOptions } from "./nav-model";
+
+/** Query key shared with the site-settings screen. */
+export const SITE_SETTINGS_QUERY_KEY = ["admin", "site-settings"] as const;
+
+/**
+ * Code config merged with the stored overrides. While loading, the code config
+ * is returned so the shell renders without a flash of empty navigation.
+ */
+export function useResolvedSiteConfig(): { config: SiteConfig; isLoading: boolean } {
+  const host = backofficeHost();
+  const load = useServerFn(host.fns.getSiteSettings);
+  const q = useQuery({
+    queryKey: SITE_SETTINGS_QUERY_KEY,
+    queryFn: () => load() as Promise<{ config?: SiteConfig; overrides?: unknown }>,
+    staleTime: 30_000,
+  });
+
+  const resolved =
+    (q.data?.config as SiteConfig | undefined) ??
+    (q.data?.overrides
+      ? resolveSiteConfig(host.siteConfig, q.data.overrides as never)
+      : host.siteConfig);
+
+  return { config: resolved, isLoading: q.isLoading };
+}
+
+/** Sidebar model built from the live (override-aware) configuration. */
+export function useBackofficeNav(options: BackofficeNavOptions = {}): BackofficeNavItem[] {
+  const { config } = useResolvedSiteConfig();
+  return backofficeNav(config, options);
+}
+
+/**
+ * Whether a module is enabled right now. `undefined` while settings load, so a
+ * caller can avoid flashing a "turned off" notice before the answer is known.
+ */
+export function useFeatureEnabled(flag: keyof SiteFeatureFlags): boolean | undefined {
+  const { config, isLoading } = useResolvedSiteConfig();
+  if (isLoading) return undefined;
+  return config.features[flag] === true;
+}
+
+/** Notice shown instead of a screen whose module is switched off. */
+export function FeatureDisabledNotice({ label }: { label?: string }) {
+  return (
+    <div className="p-8 md:p-12">
+      <h1 className="font-serif text-2xl text-ink">
+        {label ? `${label} is turned off` : "This module is turned off"}
+      </h1>
+      <p className="mt-3 max-w-md text-sm text-ink/65">
+        Turn it back on under Site settings → Modules to use this screen.
+      </p>
+    </div>
+  );
+}
+
+/**
+ * Guard for a module screen: returns a node to render instead of the screen
+ * when the module is disabled, and `null` when the screen may render.
+ */
+export function useFeatureGate(flag: keyof SiteFeatureFlags, label?: string): ReactNode | null {
+  const enabled = useFeatureEnabled(flag);
+  if (enabled === undefined) return <div className="p-8 text-sm text-ink/50">Loading…</div>;
+  if (enabled) return null;
+  return <FeatureDisabledNotice label={label} />;
+}