@bygghammar/cms-platform 0.63.0 → 0.65.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.63.0",
+  "version": "0.65.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} />;
+}

package/src/blocks/components/CabinTabsBlock.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useCallback, useEffect, useRef, useState, type TouchEvent as ReactTouchEvent } from "react";
 import { Check, ChevronLeft, ChevronRight } from "lucide-react";
 import { useT } from "../../i18n";
 import { Reveal } from "../../ui/Reveal";
@@ -11,26 +11,99 @@ const TONE: Record<string, string> = {
   ice: "bg-ice",
 };
 
+/** Gradient start colour for the mobile rail edge fades, per section tone. */
+const FADE: Record<string, string> = {
+  white: "from-white",
+  paper: "from-paper",
+  ice: "from-ice",
+};
+
+/** Minimum horizontal travel (px) before a touch counts as a category swipe. */
+const SWIPE_THRESHOLD = 48;
+
 /**
  * Cabin categories as clickable tabs — each tab keeps its own description,
  * bullet list and image gallery. Everything is editable in the page builder.
+ *
+ * On mobile the tabs become a snap-scrolling "category rail": the active tab is
+ * auto-centred, edge fades signal that more categories exist, and a prev/next
+ * stepper with a counter lets people move without swiping at all.
  */
 export function CabinTabsBlock({ props }: { props: CabinTabsProps }) {
   const { t } = useT();
   const items = props.items ?? [];
   const [active, setActive] = useState(0);
   const [slide, setSlide] = useState(0);
+  const [edges, setEdges] = useState({ start: false, end: false });
 
-  if (items.length === 0) return null;
+  const railRef = useRef<HTMLDivElement | null>(null);
+  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const touchStart = useRef<{ x: number; y: number } | null>(null);
 
-  const item = items[Math.min(active, items.length - 1)];
-  const images = (item.images ?? []).filter((i) => i.src);
-  const image = images.length > 0 ? images[slide % images.length] : undefined;
-  const tone = TONE[props.tone ?? "white"] ?? "bg-white";
+  const count = items.length;
+  const index = count > 0 ? Math.min(active, count - 1) : 0;
+
+  const syncEdges = useCallback(() => {
+    const el = railRef.current;
+    if (!el) return;
+    const max = el.scrollWidth - el.clientWidth;
+    setEdges({ start: el.scrollLeft > 4, end: max > 4 && el.scrollLeft < max - 4 });
+  }, []);
+
+  useEffect(() => {
+    syncEdges();
+    const el = railRef.current;
+    if (!el) return;
+    el.addEventListener("scroll", syncEdges, { passive: true });
+    window.addEventListener("resize", syncEdges);
+    return () => {
+      el.removeEventListener("scroll", syncEdges);
+      window.removeEventListener("resize", syncEdges);
+    };
+  }, [syncEdges, count]);
 
-  const select = (i: number) => {
+  // Keep the active tab fully visible in the middle of the rail.
+  useEffect(() => {
+    const tab = tabRefs.current[index];
+    if (!tab) return;
+    tab.scrollIntoView({ inline: "center", block: "nearest", behavior: "smooth" });
+  }, [index]);
+
+  const select = useCallback((i: number) => {
     setActive(i);
     setSlide(0);
+  }, []);
+
+  const step = useCallback(
+    (delta: number) => {
+      if (count === 0) return;
+      select((index + delta + count) % count);
+    },
+    [count, index, select],
+  );
+
+  if (count === 0) return null;
+
+  const item = items[index];
+  const images = (item.images ?? []).filter((i) => i.src);
+  const image = images.length > 0 ? images[slide % images.length] : undefined;
+  const toneKey = props.tone ?? "white";
+  const tone = TONE[toneKey] ?? TONE.white;
+  const fade = FADE[toneKey] ?? FADE.white;
+
+  const onTouchStart = (e: ReactTouchEvent) => {
+    const touch = e.touches[0];
+    touchStart.current = { x: touch.clientX, y: touch.clientY };
+  };
+  const onTouchEnd = (e: ReactTouchEvent) => {
+    const start = touchStart.current;
+    touchStart.current = null;
+    if (!start || count < 2) return;
+    const touch = e.changedTouches[0];
+    const dx = touch.clientX - start.x;
+    const dy = touch.clientY - start.y;
+    if (Math.abs(dx) < SWIPE_THRESHOLD || Math.abs(dx) < Math.abs(dy) * 1.5) return;
+    step(dx < 0 ? 1 : -1);
   };
 
   return (
@@ -60,34 +133,93 @@ export function CabinTabsBlock({ props }: { props: CabinTabsProps }) {
 
         <Reveal>
           <div className="mt-10 grid gap-8 lg:grid-cols-[minmax(0,15rem)_minmax(0,1fr)_minmax(0,1.05fr)] lg:gap-10">
-            {/* Tabs */}
-            <div
-              role="tablist"
-              aria-label={t(props.title) || "Categories"}
-              className="flex gap-2 overflow-x-auto pb-1 lg:flex-col lg:overflow-visible lg:pb-0"
-            >
-              {items.map((it, i) => {
-                const on = i === Math.min(active, items.length - 1);
-                return (
+            {/* Category rail (mobile) / vertical tab list (desktop) */}
+            <div className="min-w-0">
+              <div className="relative lg:static">
+                <div
+                  ref={railRef}
+                  role="tablist"
+                  aria-label={t(props.title) || "Categories"}
+                  onKeyDown={(e) => {
+                    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+                      e.preventDefault();
+                      step(1);
+                    } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+                      e.preventDefault();
+                      step(-1);
+                    }
+                  }}
+                  className="-mx-6 flex snap-x snap-mandatory gap-2 overflow-x-auto scroll-smooth px-6 pb-1 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden lg:mx-0 lg:flex-col lg:overflow-visible lg:px-0 lg:pb-0"
+                >
+                  {items.map((it, i) => {
+                    const on = i === index;
+                    return (
+                      <button
+                        key={it.id ?? i}
+                        ref={(el) => {
+                          tabRefs.current[i] = el;
+                        }}
+                        role="tab"
+                        aria-selected={on}
+                        tabIndex={on ? 0 : -1}
+                        onClick={() => select(i)}
+                        className={`shrink-0 snap-center border px-4 py-3 text-left text-[0.7rem] uppercase tracking-[0.2em] transition-colors lg:shrink ${
+                          on
+                            ? "border-sea bg-sea text-white"
+                            : "border-ink/12 bg-white text-ink/70 hover:border-sea hover:text-ink"
+                        }`}
+                      >
+                        {t(it.label)}
+                      </button>
+                    );
+                  })}
+                </div>
+
+                {/* Edge fades: a tab disappearing under a gradient reads as "more". */}
+                <div
+                  aria-hidden
+                  className={`pointer-events-none absolute inset-y-0 -left-6 w-10 bg-gradient-to-r ${fade} to-transparent transition-opacity duration-200 lg:hidden ${
+                    edges.start ? "opacity-100" : "opacity-0"
+                  }`}
+                />
+                <div
+                  aria-hidden
+                  className={`pointer-events-none absolute inset-y-0 -right-6 w-12 bg-gradient-to-l ${fade} to-transparent transition-opacity duration-200 lg:hidden ${
+                    edges.end ? "opacity-100" : "opacity-0"
+                  }`}
+                />
+              </div>
+
+              {count > 1 ? (
+                <div className="mt-3 flex items-center justify-center gap-3 lg:hidden">
                   <button
-                    key={it.id ?? i}
-                    role="tab"
-                    aria-selected={on}
-                    onClick={() => select(i)}
-                    className={`shrink-0 border px-4 py-3 text-left text-[0.7rem] uppercase tracking-[0.2em] transition-colors lg:shrink ${
-                      on
-                        ? "border-sea bg-sea text-white"
-                        : "border-ink/12 bg-white text-ink/70 hover:border-sea hover:text-ink"
-                    }`}
+                    type="button"
+                    onClick={() => step(-1)}
+                    aria-label="Föregående kategori"
+                    className="border border-ink/12 bg-white p-2 text-ink/70 transition-colors hover:border-sea hover:text-ink"
                   >
-                    {t(it.label)}
+                    <ChevronLeft className="size-4" />
                   </button>
-                );
-              })}
+                  <span
+                    aria-live="polite"
+                    className="min-w-0 truncate text-[0.7rem] uppercase tracking-[0.2em] text-ink/60"
+                  >
+                    {t(item.label)} · {index + 1} / {count}
+                  </span>
+                  <button
+                    type="button"
+                    onClick={() => step(1)}
+                    aria-label="Nästa kategori"
+                    className="border border-ink/12 bg-white p-2 text-ink/70 transition-colors hover:border-sea hover:text-ink"
+                  >
+                    <ChevronRight className="size-4" />
+                  </button>
+                </div>
+              ) : null}
             </div>
 
             {/* Copy */}
-            <div className="min-w-0">
+            <div className="min-w-0" onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
               <h3 className="font-serif text-2xl md:text-3xl text-sea">
                 {t(item.title) || t(item.label)}
               </h3>