@djangocfg/layouts 2.1.591 → 2.1.592

package/src/layouts/PrivateLayout/hooks/useHoverExpand.ts

@@ -1,110 +0,0 @@
-/**
- * Hover Expand Hook
- *
- * Manages hover-expand state for collapsed sidebar with debounce.
- * - enterDelay: ms before expanding on hover (default 250)
- * - leaveDelay: ms before collapsing on mouse leave (default 150)
- * - Listens for `sidebar:blockcollapse` / `sidebar:allowcollapse` custom events
- *   so descendant components (e.g. account dropdown) can block collapse without
- *   prop drilling or context churn.
- * - Clears timers on unmount / re-hover to prevent false triggers.
- */
-
-'use client';
-
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-interface UseHoverExpandOptions {
-  /** Delay before expanding on mouse enter (ms). Default 250. */
-  enterDelay?: number;
-  /** Delay before collapsing on mouse leave (ms). Default 150. */
-  leaveDelay?: number;
-  /** Whether hover-expand is enabled (e.g. only on desktop collapsed rail). */
-  enabled?: boolean;
-}
-
-interface UseHoverExpandResult {
-  /** Whether the sidebar is currently hover-expanded */
-  isHoverExpanded: boolean;
-  /** Attach to the sidebar root element */
-  onMouseEnter: () => void;
-  /** Attach to the sidebar root element */
-  onMouseLeave: () => void;
-  /** Programmatically set hover-expanded state (for click-to-expand) */
-  setHoverExpanded: (value: boolean) => void;
-}
-
-export function useHoverExpand({
-  enterDelay = 2000,
-  leaveDelay = 450,
-  enabled = true,
-}: UseHoverExpandOptions = {}): UseHoverExpandResult {
-  const [isHoverExpanded, setIsHoverExpanded] = useState(false);
-  const blockedRef = useRef(false);
-  const enterTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const leaveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const clearTimers = useCallback(() => {
-    if (enterTimerRef.current) {
-      clearTimeout(enterTimerRef.current);
-      enterTimerRef.current = null;
-    }
-    if (leaveTimerRef.current) {
-      clearTimeout(leaveTimerRef.current);
-      leaveTimerRef.current = null;
-    }
-  }, []);
-
-  useEffect(() => {
-    const onBlock = () => {
-      blockedRef.current = true;
-    };
-    const onAllow = () => {
-      blockedRef.current = false;
-    };
-    window.addEventListener('sidebar:blockcollapse', onBlock);
-    window.addEventListener('sidebar:allowcollapse', onAllow);
-    return () => {
-      window.removeEventListener('sidebar:blockcollapse', onBlock);
-      window.removeEventListener('sidebar:allowcollapse', onAllow);
-    };
-  }, []);
-
-  const onMouseEnter = useCallback(() => {
-    if (!enabled) return;
-    clearTimers();
-    enterTimerRef.current = setTimeout(() => {
-      setIsHoverExpanded(true);
-    }, enterDelay);
-  }, [enabled, enterDelay, clearTimers]);
-
-  const onMouseLeave = useCallback(() => {
-    if (!enabled) return;
-    if (blockedRef.current) return;
-    clearTimers();
-    leaveTimerRef.current = setTimeout(() => {
-      setIsHoverExpanded(false);
-    }, leaveDelay);
-  }, [enabled, leaveDelay, clearTimers]);
-
-  useEffect(() => {
-    return () => clearTimers();
-  }, [clearTimers]);
-
-  const setHoverExpanded = useCallback((value: boolean) => {
-    clearTimers();
-    setIsHoverExpanded(value);
-  }, [clearTimers]);
-
-  return { isHoverExpanded, onMouseEnter, onMouseLeave, setHoverExpanded };
-}
-
-/** Dispatch from any descendant to block sidebar collapse while e.g. a dropdown is open. */
-export function blockSidebarCollapse(): void {
-  window.dispatchEvent(new CustomEvent('sidebar:blockcollapse'));
-}
-
-/** Dispatch when the blocking reason is gone (e.g. dropdown closed). */
-export function allowSidebarCollapse(): void {
-  window.dispatchEvent(new CustomEvent('sidebar:allowcollapse'));
-}

package/src/layouts/PrivateLayout/hooks/useShellVisualState.ts

@@ -1,130 +0,0 @@
-/**
- * Shell Visual State Hook
- *
- * Centralizes ALL visual decisions for the sidebar + content pair:
- * - sidebar state: expanded | collapsed-rail
- * - layout variant: boxed (inset) | full-bleed
- * - what to show/hide in each state
- * - CSS modifiers for sidebar root, inner shell, and content inset
- *
- * Every component reads from this hook — no scattered ternaries.
- */
-
-'use client';
-
-import { useMemo } from 'react';
-
-import { usePrivateLayoutContext } from '../context';
-import type { LayoutVisualConfig } from '../../types';
-
-// ============================================================================
-// State flags
-// ============================================================================
-
-export interface ShellVisualFlags {
-  /** Mobile drawer mode */
-  isMobile: boolean;
-  /** Persistent expanded (user toggled or default open) */
-  isExpanded: boolean;
-  /** Collapsed to icon rail */
-  isCollapsed: boolean;
-  /** True only in desktop collapsed rail */
-  isRail: boolean;
-}
-
-// ============================================================================
-// Content visibility flags
-// ============================================================================
-
-export interface ShellContentFlags {
-  /** Nav item text labels visible */
-  showLabels: boolean;
-  /** Group section headers visible */
-  showGroupLabels: boolean;
-  /** Badges render as full text (false = dot only) */
-  showBadgeText: boolean;
-  /** Tooltips on nav items (only when labels hidden) */
-  showTooltips: boolean;
-  /** Account footer in compact avatar-only mode */
-  isAccountCompact: boolean;
-  /** menuStart / menuEnd / featured slots hidden */
-  hideSlots: boolean;
-}
-
-// ============================================================================
-// Chrome flags
-// ============================================================================
-
-export interface ShellChromeFlags {
-  /** Right border/separator on sidebar */
-  showBorder: boolean;
-  /** Content inset should have margin to make room for sidebar */
-  contentHasSidebarGap: boolean;
-  /** Sidebar width is fixed to icon-rail */
-  isRailWidth: boolean;
-}
-
-// ============================================================================
-// CSS modifiers
-// ============================================================================
-
-export interface ShellModifiers {
-  /** Classes for the shadcn <Sidebar> root (fixed container) */
-  sidebarRoot: string[];
-  /** Classes for the inner div[data-sidebar=sidebar] */
-  sidebarInner: string[];
-  /** Classes for the shadcn <SidebarContent> */
-  sidebarContent: string[];
-}
-
-// ============================================================================
-// Combined result
-// ============================================================================
-
-export interface ShellVisualState {
-  flags: ShellVisualFlags;
-  content: ShellContentFlags;
-  chrome: ShellChromeFlags;
-  modifiers: ShellModifiers;
-}
-
-// ============================================================================
-// Hook
-// ============================================================================
-
-export function useShellVisualState(
-  layoutVariant?: LayoutVisualConfig['variant'],
-): ShellVisualState {
-  const { isMobile, isExpanded, isCollapsed } = usePrivateLayoutContext();
-
-  const isRail = !isMobile && isCollapsed;
-  const variant = layoutVariant ?? 'boxed';
-
-  return useMemo(() => {
-    const showLabels = isExpanded || isMobile;
-    const showGroupLabels = showLabels;
-    const showBadgeText = showLabels;
-    const showTooltips = isRail;
-    const isAccountCompact = isRail;
-    const hideSlots = isRail;
-
-    const contentHasSidebarGap = isExpanded || isRail;
-    const isRailWidth = isRail;
-    const showBorder = false;
-
-    const sidebarRoot: string[] = [];
-    const sidebarInner: string[] = [];
-    const sidebarContent: string[] = [];
-
-    if (variant === 'boxed' && isExpanded) {
-      sidebarInner.push('rounded-sm');
-    }
-
-    return {
-      flags: { isMobile, isExpanded, isCollapsed, isRail },
-      content: { showLabels, showGroupLabels, showBadgeText, showTooltips, isAccountCompact, hideSlots },
-      chrome: { showBorder, contentHasSidebarGap, isRailWidth },
-      modifiers: { sidebarRoot, sidebarInner, sidebarContent },
-    };
-  }, [isMobile, isExpanded, isCollapsed, isRail, variant]);
-}

package/src/layouts/SettingsLayout/components/SettingsRailFooter.tsx

@@ -1,74 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import { cn } from '@djangocfg/ui-core/lib';
-import { ThemeSegmented } from '@djangocfg/ui-core/theme';
-
-import { LocaleSwitcherDropdown } from '../../_components/locale-switcher';
-import { useLayoutI18nOptional } from '../../AppLayout/LayoutI18nProvider';
-
-interface SettingsRailFooterProps {
-  /**
-   * Horizontal layout (theme + language side-by-side on a single row) for the
-   * mobile header strip. Default is the stacked vertical layout used at the
-   * bottom of the desktop rail.
-   */
-  horizontal?: boolean;
-  className?: string;
-}
-
-/**
- * Global preferences pinned to the bottom-left of the settings rail — the
- * "chrome" controls (appearance + language) that belong with the shell, not
- * inside the Account tab. Sits below a hairline, always visible regardless of
- * the active section (mirrors the app-shell pattern: quick prefs live in the
- * corner, not buried in a form).
- *
- * Language only renders when a layout i18n context is present.
- */
-export const SettingsRailFooter: React.FC<SettingsRailFooterProps> = ({
-  horizontal = false,
-  className,
-}) => {
-  const layoutI18n = useLayoutI18nOptional();
-
-  return (
-    <div
-      className={cn(
-        'border-t border-border/70',
-        horizontal
-          ? 'flex items-center justify-end gap-2'
-          : 'flex flex-col gap-2 px-1 pt-3',
-        className,
-      )}
-    >
-      {!horizontal && (
-        <span className="px-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground/70">
-          Preferences
-        </span>
-      )}
-
-      <div
-        className={cn(
-          horizontal ? 'flex items-center gap-2' : 'flex items-center justify-between gap-2 px-0.5',
-        )}
-      >
-        <ThemeSegmented size="compact" />
-        {layoutI18n && (
-          <LocaleSwitcherDropdown
-            locale={layoutI18n.locale}
-            locales={layoutI18n.locales}
-            onChange={layoutI18n.onLocaleChange}
-            variant="outline"
-            size="sm"
-            showCode
-            showIcon={false}
-            showFlag
-            showTriggerLabel
-          />
-        )}
-      </div>
-    </div>
-  );
-};

package/src/layouts/SettingsLayout/sections/SecuritySection.tsx

@@ -1,15 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import { TwoFactorSection } from '../components/TwoFactorSection';
-
-/**
- * Built-in "Security" section body — two-factor auth setup/disable.
- * Wraps the existing TwoFactorSection; the panel header supplies the title.
- */
-export const SecuritySection: React.FC = () => (
-  <div className="mx-auto max-w-2xl space-y-6">
-    <TwoFactorSection />
-  </div>
-);