@djangocfg/layouts 1.4.30 → 2.0.2

package/src/layouts/AppLayout/layouts/PrivateLayout/PrivateLayout.tsx

@@ -1,82 +0,0 @@
-// @ts-nocheck
-/**
- * Private Layout
- *
- * Dashboard layout for authenticated pages
- * Refactored from _old/DashboardLayout - uses context only!
- */
-
-'use client';
-
-import React, { ReactNode, useEffect } from 'react';
-import { SidebarInset, SidebarProvider } from '@djangocfg/ui/components';
-import { useAuth } from '../../../../auth';
-import { KnowledgeChat } from '../../../../snippets/Chat';
-import { useAppContext } from '../../context';
-import { DashboardContent, DashboardHeader, DashboardSidebar } from './components';
-
-export interface PrivateLayoutProps {
-  children: ReactNode;
-}
-
-/**
- * Private Layout Component
- *
- * Features:
- * - SidebarProvider for collapsible sidebar
- * - DashboardSidebar with navigation
- * - DashboardHeader with user menu, notifications, theme toggle
- * - DashboardContent with configurable padding
- * - KnowledgeChat (optional)
- * - Auth loading state
- * - Auth redirect for unauthenticated users
- *
- * All data from useAppContext() - no props!
- */
-export function PrivateLayout({ children }: PrivateLayoutProps) {
-  const { config } = useAppContext();
-  const { isLoading, isAuthenticated } = useAuth();
-
-  const { privateLayout, routes } = config;
-
-  // Redirect unauthenticated users (only when not loading)
-  useEffect(() => {
-    if (!isLoading && !isAuthenticated) {
-      const redirect = routes.detectors.getUnauthenticatedRedirect(
-        window.location.pathname
-      );
-      if (redirect) {
-        window.location.href = redirect;
-      }
-    }
-  }, [isLoading, isAuthenticated, routes]);
-
-  // Don't render content if user is not authenticated
-  // Note: Loading state is now handled in AppLayout, so we don't show it here
-  if (!isAuthenticated) {
-    return null;
-  }
-
-  return (
-    <>
-      <SidebarProvider defaultOpen={true}>
-        {/* Sidebar */}
-        <DashboardSidebar />
-
-        {/* Main content area */}
-        <SidebarInset className="flex flex-col">
-          {/* Header */}
-          <DashboardHeader />
-
-          {/* Page content */}
-          <div className="flex-1 overflow-y-auto">
-            <DashboardContent>{children}</DashboardContent>
-          </div>
-        </SidebarInset>
-      </SidebarProvider>
-
-      {/* Chat positioned outside main layout for proper fixed positioning */}
-      {privateLayout.showChat && <KnowledgeChat />}
-    </>
-  );
-}

package/src/layouts/AppLayout/layouts/PrivateLayout/components/DashboardContent.tsx

@@ -1,62 +0,0 @@
-/**
- * Dashboard Content
- *
- * Main content wrapper for dashboard pages
- * Refactored from _old/DashboardLayout - uses context only!
- */
-
-'use client';
-
-import React from 'react';
-import { cn } from '@djangocfg/ui/lib';
-import { useAppContext } from '../../../context';
-
-interface DashboardContentProps {
-  children: React.ReactNode;
-  className?: string;
-  isAdmin?: boolean;
-}
-
-const paddingVariants = {
-  none: '',
-  default: 'p-6',
-  sm: 'p-4',
-  md: 'p-6',
-  lg: 'p-8',
-};
-
-/**
- * Dashboard Content Component
- *
- * Features:
- * - Configurable padding from context
- * - Full-width container
- * - Custom className support
- *
- * Padding controlled by config.privateLayout.contentPadding
- */
-export function DashboardContent({
-  children,
-  className,
-  isAdmin = false,
-}: DashboardContentProps) {
-  const { config } = useAppContext();
-  const { privateLayout } = config;
-
-  const padding =
-    paddingVariants[
-      privateLayout.contentPadding as keyof typeof paddingVariants
-    ] || paddingVariants.default;
-
-  return (
-    <main
-      className={cn(
-        'w-full bg-background relative min-h-full',
-        padding,
-        className
-      )}
-    >
-      {children}
-    </main>
-  );
-}

package/src/layouts/AppLayout/layouts/PrivateLayout/components/DashboardHeader.tsx

@@ -1,89 +0,0 @@
-/**
- * Dashboard Header
- *
- * Header for private/dashboard layout
- * Refactored from _old/DashboardLayout - uses context only!
- */
-
-'use client';
-
-import { Bell } from 'lucide-react';
-import React from 'react';
-
-import {
-  Button,
-  Separator,
-  SidebarTrigger,
-} from '@djangocfg/ui';
-import { ThemeToggle } from '@djangocfg/ui/theme';
-import { useAppContext } from '../../../context';
-import { useNavigation } from '../../../hooks';
-import { UserMenu } from '../../../components';
-
-export interface DashboardHeaderProps {
-  isAdmin?: boolean;
-}
-
-/**
- * Dashboard Header Component
- *
- * Features:
- * - Sidebar trigger (mobile)
- * - Page title
- * - Custom header actions
- * - Notifications button with badge
- * - Theme toggle
- * - User dropdown with avatar, profile, logout
- * - Login button for guests
- *
- * All data from context!
- */
-export function DashboardHeader({ isAdmin = false }: DashboardHeaderProps) {
-  const { config } = useAppContext();
-  const { getPageTitle } = useNavigation();
-
-  const { privateLayout } = config;
-  const pageTitle = getPageTitle();
-
-  // Notification handler - TODO: implement notification system
-  const handleNotificationClick = () => {
-    // console.log('Notifications clicked');
-  };
-
-  return (
-    <header className="sticky top-0 py-2 z-10 h-16 flex items-center justify-between px-4 shrink-0 bg-background border-b border-border">
-      {/* Left side */}
-      <div className="flex items-center gap-4">
-        <SidebarTrigger className="-ml-1" />
-        <Separator orientation="vertical" className="mr-2 h-4" />
-
-        {pageTitle && (
-          <h1 className="text-lg font-semibold text-foreground">{pageTitle}</h1>
-        )}
-      </div>
-
-      {/* Right side */}
-      <div className="flex items-center gap-3">
-        {/* Custom header actions */}
-        {privateLayout.headerActions}
-
-        {/* Notifications */}
-        <Button
-          variant="ghost"
-          size="icon"
-          className="relative"
-          onClick={handleNotificationClick}
-        >
-          <Bell className="h-5 w-5" />
-          {/* TODO: implement notification count from context */}
-        </Button>
-
-        {/* Theme Toggle */}
-        <ThemeToggle />
-
-        {/* User menu - unified component */}
-        <UserMenu variant="desktop" />
-      </div>
-    </header>
-  );
-}

package/src/layouts/AppLayout/layouts/PrivateLayout/components/DashboardSidebar.tsx

@@ -1,181 +0,0 @@
-/**
- * Dashboard Sidebar
- *
- * Sidebar navigation for private/dashboard layout
- * Refactored from _old/DashboardLayout - uses context only!
- */
-
-'use client';
-
-import Link from 'next/link';
-import React from 'react';
-
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  useSidebar,
-} from '@djangocfg/ui/components';
-import { useAppContext } from '../../../context';
-import { useNavigation } from '../../../hooks';
-
-export interface DashboardSidebarProps {
-  isAdmin?: boolean;
-}
-
-/**
- * Dashboard Sidebar Component
- *
- * Features:
- * - Project logo and name (clickable to home)
- * - Menu groups with labels
- * - Menu items with icons, labels, badges
- * - Sub-menu items (nested navigation)
- * - Active state detection
- * - Optional footer content
- *
- * All data from context!
- */
-export function DashboardSidebar({ isAdmin = false }: DashboardSidebarProps) {
-  const { config } = useAppContext();
-  const { currentPath } = useNavigation();
-  const { state, isMobile } = useSidebar();
-
-  const { app, privateLayout, adminLayout } = config;
-
-  // Admin layout: use adminLayout.menuSections converted to menuGroups, fallback to privateLayout
-  const menuGroups = isAdmin && adminLayout
-    ? adminLayout.menuSections.map((section, idx) => ({
-        label: section.title,
-        order: idx + 1,
-        items: section.items.map(item => ({
-          path: item.path,
-          label: item.label,
-          icon: item.icon || (() => null),
-          badge: item.badge,
-        })),
-      }))
-    : privateLayout.menuGroups;
-
-  const homeHref = privateLayout.homeHref;
-
-  const isActiveRoute = (path: string) => {
-    // Only exact match - no prefix matching
-    // This ensures /private/jobs ONLY matches /private/jobs
-    // and NOT /private, /private/jobs/123, etc.
-    return currentPath === path;
-  };
-
-  return (
-    <Sidebar collapsible="icon">
-      <SidebarHeader>
-        <div
-          className="flex items-center gap-3"
-          style={state === "collapsed" ? {
-            paddingLeft: '7px',
-            paddingTop: '0.5rem',
-            paddingBottom: '0.5rem',
-            transition: 'padding 200ms ease-in-out'
-          } : {
-            padding: '0.5rem',
-            transition: 'padding 200ms ease-in-out'
-          }}
-        >
-          <Link href={homeHref}>
-            <div className="flex items-center gap-3">
-              {app.logoPath ? (
-                <img
-                  src={app.logoPath}
-                  alt={app.name}
-                  className={isMobile ? "h-10 w-10 flex-shrink-0" : "h-8 w-8 flex-shrink-0"}
-                />
-              ) : (
-                <div className={isMobile ? "h-10 w-10 bg-primary rounded-sm flex items-center justify-center flex-shrink-0" : "h-8 w-8 bg-primary rounded-sm flex items-center justify-center flex-shrink-0"}>
-                  <span className="text-primary-foreground font-bold text-sm">
-                    {app.name.charAt(0).toUpperCase()}
-                  </span>
-                </div>
-              )}
-              {state !== "collapsed" && (
-                <span className={isMobile ? "font-semibold text-foreground truncate text-base" : "font-semibold text-foreground truncate"} style={{ whiteSpace: 'nowrap' }}>
-                  {app.name}
-                </span>
-              )}
-            </div>
-          </Link>
-        </div>
-      </SidebarHeader>
-
-      <SidebarContent>
-        {menuGroups.map((group) => (
-          <SidebarGroup key={group.label}>
-            <SidebarGroupLabel>{group.label}</SidebarGroupLabel>
-            <SidebarGroupContent>
-              <SidebarMenu>
-                {group.items.map((item) => {
-                  const isActive = isActiveRoute(item.path);
-                  const Icon = item.icon;
-
-                  return (
-                    <SidebarMenuItem key={item.path}>
-                      <SidebarMenuButton
-                        asChild
-                        isActive={isActive}
-                        tooltip={item.label}
-                        size={isMobile ? "lg" : "default"}
-                      >
-                        <Link href={item.path}>
-                          <Icon className={isMobile ? "h-5 w-5" : "h-4 w-4"} />
-                          <span className={isMobile ? "text-base" : ""}>{item.label}</span>
-                          {item.badge && (
-                            <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>
-                          )}
-                        </Link>
-                      </SidebarMenuButton>
-
-                      {/* Submenu */}
-                      {item.subItems && item.subItems.length > 0 && (
-                        <SidebarMenuSub>
-                          {item.subItems.map((subItem) => {
-                            const isSubActive = isActiveRoute(subItem.path);
-                            const SubIcon = subItem.icon;
-
-                            return (
-                              <SidebarMenuSubItem key={subItem.path}>
-                                <SidebarMenuSubButton
-                                  asChild
-                                  isActive={isSubActive}
-                                  size={isMobile ? "md" : "md"}
-                                >
-                                  <Link href={subItem.path}>
-                                    <SubIcon className={isMobile ? "h-5 w-5" : "h-4 w-4"} />
-                                    <span className={isMobile ? "text-base" : ""}>{subItem.label}</span>
-                                  </Link>
-                                </SidebarMenuSubButton>
-                              </SidebarMenuSubItem>
-                            );
-                          })}
-                        </SidebarMenuSub>
-                      )}
-                    </SidebarMenuItem>
-                  );
-                })}
-              </SidebarMenu>
-            </SidebarGroupContent>
-          </SidebarGroup>
-        ))}
-      </SidebarContent>
-    </Sidebar>
-  );
-}

package/src/layouts/AppLayout/layouts/PrivateLayout/components/index.ts

@@ -1,9 +0,0 @@
-/**
- * Private Layout Components
- */
-
-export { DashboardHeader } from './DashboardHeader';
-export type { DashboardHeaderProps } from './DashboardHeader';
-export { DashboardSidebar } from './DashboardSidebar';
-export type { DashboardSidebarProps } from './DashboardSidebar';
-export { DashboardContent } from './DashboardContent';

package/src/layouts/AppLayout/layouts/PrivateLayout/index.ts

@@ -1,5 +0,0 @@
-/**
- * PrivateLayout Module
- */
-
-export * from './PrivateLayout';

package/src/layouts/AppLayout/layouts/PublicLayout/PublicLayout.tsx

@@ -1,44 +0,0 @@
-/**
- * Public Layout
- *
- * Layout for public pages (landing, docs, etc.)
- * All data accessed through context - no prop drilling
- */
-
-'use client';
-
-import React, { ReactNode } from 'react';
-import { Navigation } from './components/Navigation';
-import { Footer } from './components/Footer';
-
-export interface PublicLayoutProps {
-  children: ReactNode;
-}
-
-/**
- * Public Layout Component
- *
- * Features:
- * - Top navigation bar
- * - User menu integration
- * - Footer with links
- * - Mobile responsive
- *
- * All data from useAppContext() and useAuth() - no props needed!
- */
-export function PublicLayout({ children }: PublicLayoutProps) {
-  return (
-    <div className="min-h-screen flex flex-col">
-      {/* Navigation - gets data from context */}
-      <Navigation />
-
-      {/* Main Content */}
-      <main className="flex-1">
-        {children}
-      </main>
-
-      {/* Footer - gets data from context */}
-      <Footer />
-    </div>
-  );
-}