@djangocfg/layouts 2.1.356 → 2.1.357

package/src/layouts/PrivateLayout/PrivateLayout.tsx

@@ -8,165 +8,34 @@
 
 'use client';
 
-import React, { ReactNode, useEffect, useState } from 'react';
-import { useRouter } from 'next/navigation';
+import React, { ReactNode } from 'react';
 
-import { useAuth } from '@djangocfg/api/auth';
 import { Preloader } from '@djangocfg/ui-core/components';
 import { SidebarInset, SidebarProvider } from '@djangocfg/ui-core/components';
 
 import type { AppLayoutPublicChrome } from '../AppLayout/AppLayout';
 import type { LayoutVisualConfig } from '../types';
-import { UserMenuConfig } from '../types';
 import { PrivateContent, PrivateSidebar } from './components';
-
-import type { LucideIcon as LucideIconType } from 'lucide-react';
-
-export interface SidebarItem {
-  label: string;
-  href: string;
-  icon?: string | LucideIconType;
-  badge?: string | number;
-  /** Visual style of `badge`: `'count'` (default, neutral pill) or `'pill'` (accent-tinted, e.g. "lite"/"new"). */
-  badgeVariant?: 'count' | 'pill';
-  /** Collapsed rail: shown in tooltip; defaults to `label`. */
-  tooltip?: string;
-}
-
-export interface SidebarGroupConfig {
-  /** Group label displayed above items */
-  label: string;
-  /** Items in this group */
-  items: SidebarItem[];
-  /** If true, group is only shown when it has items (for dynamic groups like extensions) */
-  dynamic?: boolean;
-  /** Render group as an accordion (Mailersend/Vercel-style). Label becomes a clickable trigger. */
-  collapsible?: boolean;
-  /** Initial open state for collapsible groups. Auto-expanded if any child is active. Default `false`. */
-  defaultOpen?: boolean;
-  /** Icon for the group trigger (only when `collapsible`). */
-  icon?: string | LucideIconType;
-  /**
-   * Hide per-item icons inside the group. Defaults to `true` when `collapsible`,
-   * `false` otherwise (Mailersend convention: icons live on the trigger, not on children).
-   */
-  hideItemIcons?: boolean;
-}
-
-/** Active-state visual treatment for sidebar nav items. */
-export type SidebarActiveIndicator = 'background' | 'rail' | 'both';
-
-/** Rendering of group labels. `'uppercase'` is the legacy ultra-light caps; `'plain'` is sm bold. */
-export type SidebarGroupLabelStyle = 'uppercase' | 'plain';
-
-/** Featured CTA tile rendered below groups. */
-export interface SidebarFeaturedConfig {
-  icon?: string | LucideIconType;
-  label: string;
-  href: string;
-  badge?: string;
-  accent?: 'green' | 'blue' | 'amber' | 'primary';
-}
-
-export interface SidebarConfig {
-  /** Grouped items with labels */
-  groups: SidebarGroupConfig[];
-  /** Home link href */
-  homeHref?: string;
-  /**
-   * Custom block inside the scrollable nav column, **above** all `groups`
-   * (below the brand header, same horizontal padding as nav).
-   */
-  menuStart?: ReactNode;
-  /**
-   * Custom block inside the scrollable nav column, **below** all `groups`
-   * (above `footer` + account block).
-   */
-  menuEnd?: ReactNode;
-  /**
-   * Keep `menuStart` visible when the desktop sidebar is collapsed to the
-   * icon rail. Default `false` — most slot content is full-width and looks
-   * broken at ~56px. Set `true` only when the slot renders well in compact mode.
-   */
-  menuStartShowOnCollapsed?: boolean;
-  /** Same as `menuStartShowOnCollapsed`, but for `menuEnd`. Default `false`. */
-  menuEndShowOnCollapsed?: boolean;
-  /** Custom footer component rendered at the bottom of the sidebar */
-  footer?: ReactNode;
-  /** Active-state visual on nav items. Default `'background'` (legacy). */
-  activeIndicator?: SidebarActiveIndicator;
-  /** Style of group labels. Default `'uppercase'` (legacy). Collapsible groups always use `plain`. */
-  groupLabelStyle?: SidebarGroupLabelStyle;
-  /** Featured CTA tile rendered below all groups, above `menuEnd`. */
-  featured?: SidebarFeaturedConfig;
-}
-
-export interface HeaderConfig {
-  /** Custom header brand node (same idea as PublicNavbar `brand`). */
-  brand?: ReactNode;
-  /** Shown next to the logo when the sidebar is expanded */
-  title?: string;
-  /**
-   * Brand mark in the sidebar header (Lucide icon name or component).
-   * If omitted, a single-letter monogram from `brandLetter` / `title` is shown.
-   */
-  brandIcon?: string | LucideIconType;
-  /**
-   * Monogram when `brandIcon` is not set (one visible character).
-   * Defaults to the first letter of `title`, uppercased.
-   */
-  brandLetter?: string;
-  /** User menu groups (account panel in the sidebar footer) */
-  groups?: UserMenuConfig['groups'];
-  /** Auth page path (for sign in button) */
-  authPath?: string;
-  /** Subtitle under the display name in the sidebar footer (e.g. "Max plan"). */
-  userPlan?: string;
-  /** Optional secondary action button rendered inside the footer trigger (e.g. Get apps download button). */
-  footerSecondaryAction?: {
-    icon: string | LucideIconType;
-    href?: string;
-    onClick?: () => void;
-    ariaLabel: string;
-    /** Show pulsing accent dot on the action (Claude-style "new"). */
-    pulse?: boolean;
-  };
-}
-
-export interface PrivateLayoutProps {
-  children: ReactNode;
-  /** Sidebar configuration */
-  sidebar?: SidebarConfig;
-  /** Title + account links (no top navbar — title is used in the sidebar chrome) */
-  header?: HeaderConfig;
-  /**
-   * Path for active nav highlighting. With `@djangocfg/nextjs` i18n routing, pass `usePathname()` from
-   * `@djangocfg/nextjs/i18n/navigation` (no `/[locale]` segment). If omitted, uses `next/navigation` (includes locale).
-   */
-  pathname?: string;
-  /** Content padding */
-  contentPadding?: 'none' | 'default';
-  /**
-   * Content scroll behaviour.
-   * - `'auto'` (default) — the shell scroll-area scrolls vertically.
-   * - `'hidden'` — shell does NOT scroll; use for full-height pages (e.g. Kanban)
-   *   where children manage their own scroll surfaces.
-   */
-  contentScroll?: 'auto' | 'hidden';
-  /**
-   * Visual style of the shell. Defaults to `'boxed'` (inset rounded card on a
-   * sidebar-coloured canvas). Pass `{ variant: 'full-bleed' }` for the legacy
-   * edge-to-edge layout.
-   */
-  visual?: LayoutVisualConfig;
-  /**
-   * Skip the built-in auth guard. Useful for static showcases / playground
-   * embeds where there's no real session. Default `true` (guard on).
-   */
-  requireAuth?: boolean;
-  /** Reserved for `AppLayout` passthrough (`publicChrome`); unused in this layout. */
-  publicChrome?: AppLayoutPublicChrome;
-}
+import { useAuthGuard } from './hooks';
+import { useLayoutVisual } from './hooks';
+
+import type {
+  HeaderConfig,
+  PrivateLayoutProps,
+  SidebarConfig,
+} from './types';
+
+export type {
+  SidebarItem,
+  SidebarGroupConfig,
+  SidebarConfig,
+  HeaderConfig,
+  SidebarActiveIndicator,
+  SidebarGroupLabelStyle,
+  SidebarFeaturedConfig,
+} from './types';
+
+export { PrivateLayoutProps };
 
 export function PrivateLayout({
   children,
@@ -178,25 +47,19 @@ export function PrivateLayout({
   visual,
   requireAuth = true,
 }: PrivateLayoutProps) {
-  const { isAuthenticated, isLoading, saveRedirectUrl } = useAuth();
-  const router = useRouter();
-  const [isRedirecting, setIsRedirecting] = useState(false);
+  const { isLoading, loadingText } = useAuthGuard({
+    requireAuth,
+    authPath: header?.authPath,
+  });
 
-  useEffect(() => {
-    if (!requireAuth) return;
-    if (!isLoading && !isAuthenticated && !isRedirecting) {
-      const currentUrl = window.location.pathname + window.location.search;
-      saveRedirectUrl(currentUrl);
-      setIsRedirecting(true);
-      router.push(header?.authPath || '/auth');
-    }
-  }, [requireAuth, isAuthenticated, isLoading, isRedirecting, router, saveRedirectUrl, header?.authPath]);
+  const { providerStyle, providerClassName, insetClassName, sidebarVariant } =
+    useLayoutVisual(visual);
 
-  if (requireAuth && (isLoading || isRedirecting || !isAuthenticated)) {
+  if (isLoading) {
     return (
       <Preloader
         variant="fullscreen"
-        text={isRedirecting ? 'Redirecting to login...' : 'Authenticating...'}
+        text={loadingText}
         size="lg"
         backdrop={true}
         backdropOpacity={80}
@@ -204,14 +67,11 @@ export function PrivateLayout({
     );
   }
 
-  const variant: LayoutVisualConfig['variant'] = visual?.variant ?? 'boxed';
-  const sidebarVariant = variant === 'boxed' ? 'inset' : 'sidebar';
-
   return (
     <SidebarProvider
       defaultOpen={true}
-      style={resolveProviderStyle(visual)}
-      className={resolveProviderClassName(visual)}
+      style={providerStyle}
+      className={providerClassName}
     >
       {sidebar && (
         <PrivateSidebar
@@ -222,7 +82,7 @@ export function PrivateLayout({
         />
       )}
 
-      <SidebarInset className={resolveInsetClassName(visual)}>
+      <SidebarInset className={insetClassName}>
         <PrivateContent
           padding={contentPadding}
           scroll={contentScroll}
@@ -235,78 +95,3 @@ export function PrivateLayout({
     </SidebarProvider>
   );
 }
-
-/** CSS variables consumed by the boxed `SidebarInset` (margin + radius). */
-function resolveProviderStyle(visual: LayoutVisualConfig | undefined): React.CSSProperties | undefined {
-  if ((visual?.variant ?? 'boxed') !== 'boxed') return undefined;
-  const inset = normaliseInset(visual?.inset);
-  return {
-    ['--app-shell-inset-x' as string]: `${inset.x}px`,
-    ['--app-shell-inset-y' as string]: `${inset.y}px`,
-    ['--app-shell-radius' as string]: BOXED_RADIUS_REM[visual?.radius ?? '2xl'],
-  };
-}
-
-/**
- * Statically-known Tailwind classes for the boxed inset. Margin and radius are
- * driven by the CSS variables set in `resolveProviderStyle`, so JIT can fully
- * extract these classes at build time.
- */
-const BOXED_INSET_CLASS = [
-  'flex flex-col',
-  'md:peer-data-[variant=inset]:my-[var(--app-shell-inset-y)]',
-  'md:peer-data-[variant=inset]:mr-[var(--app-shell-inset-x)]',
-  'md:peer-data-[variant=inset]:rounded-[var(--app-shell-radius)]',
-  'md:peer-data-[variant=inset]:overflow-hidden',
-].join(' ');
-
-const BOXED_INSET_BORDER_CLASS =
-  'md:peer-data-[variant=inset]:border md:peer-data-[variant=inset]:border-border/60';
-
-const BOXED_RADIUS_REM: Record<NonNullable<LayoutVisualConfig['radius']>, string> = {
-  sm: '0.375rem',
-  md: '0.5rem',
-  lg: '0.75rem',
-  xl: '1rem',
-  '2xl': '1.25rem',
-  '3xl': '1.75rem',
-};
-
-function resolveInsetClassName(visual: LayoutVisualConfig | undefined): string {
-  if ((visual?.variant ?? 'boxed') !== 'boxed') return 'flex flex-col';
-  const border = visual?.border ?? true;
-  return border ? `${BOXED_INSET_CLASS} ${BOXED_INSET_BORDER_CLASS}` : BOXED_INSET_CLASS;
-}
-
-/**
- * Background painted *behind* the boxed container on md+. On mobile the
- * canvas tint is dropped because the sidebar is a Drawer — leaking the
- * canvas colour to the whole viewport just makes the page look dim.
- *
- * `bg-sidebar` (the default) overrides shadcn-sidebar's built-in
- * `has-[&_[data-variant=inset]]:bg-sidebar` only at the breakpoint where
- * the inset shape actually exists.
- */
-const BOXED_BG_CLASS: Record<NonNullable<LayoutVisualConfig['background']>, string> = {
-  sidebar: 'md:!bg-sidebar',
-  muted: 'md:!bg-muted',
-  card: 'md:!bg-card',
-  background: 'md:!bg-background',
-};
-
-function resolveProviderClassName(visual: LayoutVisualConfig | undefined): string | undefined {
-  // h-svh + overflow-hidden: lock the shell to exactly one viewport height so
-  // the inner scroll-area (PrivateContent) is the only scroll surface. Without
-  // this, SidebarProvider grows via min-h-svh and the whole page scrolls.
-  const base = 'h-svh overflow-hidden';
-  if ((visual?.variant ?? 'boxed') !== 'boxed') return base;
-  // `max-md:!bg-background` neutralises shadcn-sidebar's built-in
-  // `has-[[data-variant=inset]]:bg-sidebar` below md so the mobile Drawer shell
-  // doesn't paint the whole viewport with the canvas tint.
-  return `${base} max-md:!bg-background ${BOXED_BG_CLASS[visual?.background ?? 'sidebar']}`;
-}
-
-function normaliseInset(inset: LayoutVisualConfig['inset']): { x: number; y: number } {
-  if (typeof inset === 'number') return { x: inset, y: inset };
-  return { x: inset?.x ?? 12, y: inset?.y ?? 12 };
-}