orion/static/admin/js/init-alpine.js

/**
 * Alpine.js v3 global data initialization
 * Provides theme toggle, menu controls, sidebar sections, and page state
 */
function data() {
  // ─────────────────────────────────────────────────────────────────
  // Theme (dark mode) persistence
  // ─────────────────────────────────────────────────────────────────
  function getThemeFromLocalStorage() {
    if (window.localStorage.getItem('dark')) {
      return JSON.parse(window.localStorage.getItem('dark'))
    }
    return (
      !!window.matchMedia &&
      window.matchMedia('(prefers-color-scheme: dark)').matches
    )
  }

  function setThemeToLocalStorage(value) {
    window.localStorage.setItem('dark', value)
  }

  // ─────────────────────────────────────────────────────────────────
  // Sidebar sections persistence
  // ─────────────────────────────────────────────────────────────────
  const SIDEBAR_STORAGE_KEY = 'admin_sidebar_sections';

  // Default state: Platform Administration open, others closed
  const defaultSections = {
    platformAdmin: true,
    productCatalog: false,
    contentMgmt: false,
    devTools: false,
    monitoring: false,
    settingsSection: false
  };

  function getSidebarSectionsFromStorage() {
    try {
      const stored = window.localStorage.getItem(SIDEBAR_STORAGE_KEY);
      if (stored) {
        return { ...defaultSections, ...JSON.parse(stored) };
      }
    } catch (e) {
      console.warn('Failed to parse sidebar sections from localStorage:', e);
    }
    return { ...defaultSections };
  }

  function saveSidebarSectionsToStorage(sections) {
    try {
      window.localStorage.setItem(SIDEBAR_STORAGE_KEY, JSON.stringify(sections));
    } catch (e) {
      console.warn('Failed to save sidebar sections to localStorage:', e);
    }
  }

  // Map pages to their parent sections
  const pageSectionMap = {
    // Platform Administration
    companies: 'platformAdmin',
    vendors: 'platformAdmin',
    users: 'platformAdmin',
    customers: 'platformAdmin',
    // Product Catalog
    'marketplace-products': 'productCatalog',
    'vendor-products': 'productCatalog',
    marketplace: 'productCatalog',
    // Content Management
    'platform-homepage': 'contentMgmt',
    'content-pages': 'contentMgmt',
    'vendor-theme': 'contentMgmt',
    // Developer Tools
    components: 'devTools',
    icons: 'devTools',
    testing: 'devTools',
    'code-quality': 'devTools',
    // Platform Monitoring
    imports: 'monitoring',
    logs: 'monitoring',
    // Settings
    settings: 'settingsSection',
    profile: 'settingsSection',
    'api-keys': 'settingsSection',
    'notifications-settings': 'settingsSection'
  };

  return {
    // ─────────────────────────────────────────────────────────────────
    // Theme
    // ─────────────────────────────────────────────────────────────────
    dark: getThemeFromLocalStorage(),
    toggleTheme() {
      this.dark = !this.dark
      setThemeToLocalStorage(this.dark)
    },

    // ─────────────────────────────────────────────────────────────────
    // Mobile side menu
    // ─────────────────────────────────────────────────────────────────
    isSideMenuOpen: false,
    toggleSideMenu() {
      this.isSideMenuOpen = !this.isSideMenuOpen
    },
    closeSideMenu() {
      this.isSideMenuOpen = false
    },

    // ─────────────────────────────────────────────────────────────────
    // Notifications menu
    // ─────────────────────────────────────────────────────────────────
    isNotificationsMenuOpen: false,
    toggleNotificationsMenu() {
      this.isNotificationsMenuOpen = !this.isNotificationsMenuOpen
    },
    closeNotificationsMenu() {
      this.isNotificationsMenuOpen = false
    },

    // ─────────────────────────────────────────────────────────────────
    // Profile menu
    // ─────────────────────────────────────────────────────────────────
    isProfileMenuOpen: false,
    toggleProfileMenu() {
      this.isProfileMenuOpen = !this.isProfileMenuOpen
    },
    closeProfileMenu() {
      this.isProfileMenuOpen = false
    },

    // ─────────────────────────────────────────────────────────────────
    // Pages menu (legacy)
    // ─────────────────────────────────────────────────────────────────
    isPagesMenuOpen: false,
    togglePagesMenu() {
      this.isPagesMenuOpen = !this.isPagesMenuOpen
    },

    // ─────────────────────────────────────────────────────────────────
    // Collapsible sidebar sections
    // ─────────────────────────────────────────────────────────────────
    openSections: getSidebarSectionsFromStorage(),

    toggleSection(section) {
      this.openSections[section] = !this.openSections[section];
      saveSidebarSectionsToStorage(this.openSections);
    },

    // Auto-expand section containing current page
    expandSectionForCurrentPage() {
      const section = pageSectionMap[this.currentPage];
      if (section && !this.openSections[section]) {
        this.openSections[section] = true;
        saveSidebarSectionsToStorage(this.openSections);
      }
    },

    // ─────────────────────────────────────────────────────────────────
    // Page identifier - will be set by individual pages
    // ─────────────────────────────────────────────────────────────────
    currentPage: ''
  }
}