@shellui/core 0.0.4

package/src/features/config/types.ts

@@ -0,0 +1,195 @@
+// Language-specific label/title
+export type LocalizedString =
+  | string
+  | {
+      en: string;
+      fr: string;
+      [key: string]: string; // Allow other language codes
+    };
+
+/** Drawer position when opening a link in a drawer (optional, used when openIn === 'drawer'). */
+export type DrawerPosition = 'top' | 'bottom' | 'left' | 'right';
+
+/** Layout mode: 'sidebar' (default) shows navigation sidebar; 'fullscreen' shows only content area; 'windows' shows a taskbar with start menu and multi-window desktop. */
+export type LayoutType = 'sidebar' | 'fullscreen' | 'windows';
+
+export interface NavigationItem {
+  label: string | LocalizedString;
+  path: string;
+  url: string;
+  icon?: string; // Path to SVG icon file (e.g., '/icons/book-open.svg')
+  /** When true, hide this item from the sidebar and 404 page; route remains valid and item still appears in Develop settings. */
+  hidden?: boolean;
+  /** When true, hide this item on mobile (bottom nav). Has no effect if hidden is true. */
+  hiddenOnMobile?: boolean;
+  /** When true, hide this item on desktop (sidebar). Has no effect if hidden is true. */
+  hiddenOnDesktop?: boolean;
+  /** How to open this link: 'default' (navigate in main area), 'modal', 'drawer', or 'external' (target="_blank"). */
+  openIn?: 'default' | 'modal' | 'drawer' | 'external';
+  /** Optional drawer position when openIn === 'drawer'. Default is 'right' if omitted. */
+  drawerPosition?: DrawerPosition;
+  /** Sidebar position: 'start' (default) or 'end'. End items are rendered in the sidebar footer. */
+  position?: 'start' | 'end';
+}
+
+export interface NavigationGroup {
+  title: string | LocalizedString;
+  items: NavigationItem[];
+  /** Sidebar position: 'start' (default) or 'end'. End groups are rendered in the sidebar footer. */
+  position?: 'start' | 'end';
+}
+
+export interface ThemeColors {
+  light: {
+    background: string;
+    foreground: string;
+    card: string;
+    cardForeground: string;
+    popover: string;
+    popoverForeground: string;
+    primary: string;
+    primaryForeground: string;
+    secondary: string;
+    secondaryForeground: string;
+    muted: string;
+    mutedForeground: string;
+    accent: string;
+    accentForeground: string;
+    destructive: string;
+    destructiveForeground: string;
+    border: string;
+    input: string;
+    ring: string;
+    radius: string;
+    sidebarBackground: string;
+    sidebarForeground: string;
+    sidebarPrimary: string;
+    sidebarPrimaryForeground: string;
+    sidebarAccent: string;
+    sidebarAccentForeground: string;
+    sidebarBorder: string;
+    sidebarRing: string;
+  };
+  dark: {
+    background: string;
+    foreground: string;
+    card: string;
+    cardForeground: string;
+    popover: string;
+    popoverForeground: string;
+    primary: string;
+    primaryForeground: string;
+    secondary: string;
+    secondaryForeground: string;
+    muted: string;
+    mutedForeground: string;
+    accent: string;
+    accentForeground: string;
+    destructive: string;
+    destructiveForeground: string;
+    border: string;
+    input: string;
+    ring: string;
+    radius: string;
+    sidebarBackground: string;
+    sidebarForeground: string;
+    sidebarPrimary: string;
+    sidebarPrimaryForeground: string;
+    sidebarAccent: string;
+    sidebarAccentForeground: string;
+    sidebarBorder: string;
+    sidebarRing: string;
+  };
+}
+
+export interface ThemeDefinition {
+  name: string;
+  displayName: string;
+  colors: ThemeColors;
+  fontFamily?: string; // Optional custom font family (backward compatible)
+  headingFontFamily?: string; // Optional font family for headings (h1-h6)
+  bodyFontFamily?: string; // Optional font family for body text
+  fontFiles?: string[]; // Optional array of font file URLs or paths to load (e.g., Google Fonts links or local paths)
+  letterSpacing?: string; // Optional custom letter spacing (e.g., "0.02em")
+  textShadow?: string; // Optional custom text shadow (e.g., "1px 1px 2px rgba(0, 0, 0, 0.1)")
+  lineHeight?: string; // Optional custom line height (e.g., "1.6")
+}
+
+/** Sentry error reporting configuration. Only used in production; ignored in dev. */
+export interface SentryConfig {
+  /** Sentry DSN (Data Source Name). Required for Sentry to receive events. */
+  dsn: string;
+  /** Environment name (e.g. 'production', 'staging'). Shown in Sentry dashboard. */
+  environment?: string;
+  /** Release identifier (e.g. git SHA or version). Used for release-based grouping. */
+  release?: string;
+}
+
+/**
+ * Cookie consent categories for privacy-friendly grouping in the UI.
+ * - strict_necessary: Required for the app to work; typically no consent needed.
+ * - functional_performance: Analytics, performance, preferences.
+ * - targeting: Advertising, personalisation.
+ * - social_media_embedded: Social widgets, embedded content.
+ */
+export type CookieConsentCategory =
+  | 'strict_necessary'
+  | 'functional_performance'
+  | 'targeting'
+  | 'social_media_embedded';
+
+/**
+ * Definition of a cookie that can be toggled by the user via cookie consent.
+ * Host is the unique key: use it to gate features (e.g. getCookieConsentAccepted('sentry.io')).
+ */
+export interface CookieDefinition {
+  /** Display name for the cookie (e.g. "Sentry Error Reporting"). */
+  name: string;
+  /** Host or domain the cookie belongs to (e.g. "sentry.io", ".example.com"). Unique key for consent and feature gating. */
+  host: string;
+  /** Duration in seconds (e.g. 31536000 for 1 year). */
+  durationSeconds: number;
+  /** Type label for clarity (e.g. "first_party", "third_party", "http_only"). */
+  type: string;
+  /** Category for grouping in the consent UI. */
+  category: CookieConsentCategory;
+  /** Optional short description shown in the consent / settings UI. Can be a string or localized object with language keys. */
+  description?: LocalizedString;
+}
+
+/**
+ * Cookie consent configuration. Accepted hosts are stored in settings; store
+ * consentedCookieHosts when user submits so we can detect new cookies and re-prompt while keeping existing approvals.
+ */
+export interface CookieConsentConfig {
+  /** List of cookies the app may use. User consent is collected per category/cookie. */
+  cookies: CookieDefinition[];
+}
+
+/** When set to 'tauri', disables service worker and hides its settings (Tauri uses a different caching system). */
+export type RuntimeType = 'browser' | 'tauri';
+
+export interface ShellUIConfig {
+  port?: number;
+  title?: string;
+  /** App version string (e.g. "1.2.0"). Shown in Settings > System > Update app. */
+  version?: string;
+  /** Set to 'tauri' when the app runs inside Tauri so service worker is disabled and hidden. */
+  runtime?: RuntimeType;
+  /** Favicon path (e.g. '/favicon.svg'). Used for the document link rel="icon". */
+  favicon?: string;
+  /** App icon path (e.g. '/favicon.svg'). Displayed before title/logo in sidebar header. */
+  appIcon?: string;
+  /** Logo path (e.g. '/logo.svg'). If defined, displayed as image in sidebar header instead of text title. */
+  logo?: string;
+  language?: string | string[]; // Single language code or array of enabled language codes (e.g., 'en' or ['en', 'fr'])
+  /** Layout mode: 'sidebar' (default) or 'fullscreen'. Fullscreen shows only content with no navigation. */
+  layout?: LayoutType;
+  navigation?: (NavigationItem | NavigationGroup)[];
+  themes?: ThemeDefinition[]; // Custom themes to register
+  defaultTheme?: string; // Default theme name to use
+  /** Sentry error reporting. Load from env (e.g. SENTRY_DSN). Only active in production builds. */
+  sentry?: SentryConfig;
+  /** Cookie consent: list of cookies by category; accepted ids are stored in settings. */
+  cookieConsent?: CookieConsentConfig;
+}

package/src/features/config/useConfig.ts

@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+import { ConfigContext, type ConfigContextValue } from './ConfigProvider';
+
+/**
+ * Hook to access ShellUI configuration from ConfigProvider context.
+ * Must be used within a ConfigProvider.
+ * @returns {ConfigContextValue} Configuration object and loading state
+ */
+export function useConfig(): ConfigContextValue {
+  const context = useContext(ConfigContext);
+  if (context === null) {
+    throw new Error('useConfig must be used within a ConfigProvider');
+  }
+  return context;
+}

package/src/features/cookieConsent/CookieConsentModal.tsx

@@ -0,0 +1,122 @@
+import { useRef, useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { shellui } from '@shellui/sdk';
+import { useDialog } from '../alertDialog/DialogContext';
+import { useConfig } from '../config/useConfig';
+import { useSettings } from '../settings/hooks/useSettings';
+import urls from '@/constants/urls';
+
+/**
+ * Shows a friendly cookie consent modal on first visit (when user has not yet consented).
+ * Accept all / Reject all only. Closing via Escape or overlay counts as Reject.
+ */
+export function CookieConsentModal() {
+  const { t } = useTranslation('cookieConsent');
+  const { config } = useConfig();
+  const { settings, updateSetting } = useSettings();
+  const { dialog: showDialog } = useDialog();
+  const closedByChoiceRef = useRef(false);
+  const dialogShownRef = useRef(false);
+
+  const cookieConsent = config?.cookieConsent;
+  const cookies = cookieConsent?.cookies ?? [];
+  const consentedHosts = settings?.cookieConsent?.consentedCookieHosts ?? [];
+  const allHosts = cookies.map((c) => c.host);
+  const strictNecessaryHosts = cookies
+    .filter((c) => c.category === 'strict_necessary')
+    .map((c) => c.host);
+
+  // Check if there are new cookies that weren't in the list when user last consented
+  const hasNewCookies = allHosts.some((host) => !consentedHosts.includes(host));
+  const neverConsented = consentedHosts.length === 0;
+  const isRenewal = !neverConsented && hasNewCookies;
+
+  // Only show in root window, not in sub-apps (iframes)
+  const isRootWindow = typeof window !== 'undefined' && window.parent === window;
+  // Show if: has cookies AND (never consented OR new cookies added)
+  const shouldShow = isRootWindow && cookies.length > 0 && (neverConsented || hasNewCookies);
+
+  // Use renewal text if showing due to cookie policy update
+  const title = isRenewal ? t('titleRenewal') : t('title');
+  const description = isRenewal ? t('descriptionRenewal') : t('description');
+
+  const saveAccept = useCallback(() => {
+    updateSetting('cookieConsent', {
+      acceptedHosts: allHosts,
+      consentedCookieHosts: allHosts,
+    });
+  }, [allHosts, updateSetting]);
+
+  const saveReject = useCallback(() => {
+    updateSetting('cookieConsent', {
+      acceptedHosts: strictNecessaryHosts,
+      consentedCookieHosts: allHosts,
+    });
+  }, [strictNecessaryHosts, allHosts, updateSetting]);
+
+  const handleAccept = useCallback(() => {
+    closedByChoiceRef.current = true;
+    saveAccept();
+  }, [saveAccept]);
+
+  const handleReject = useCallback(() => {
+    closedByChoiceRef.current = true;
+    saveReject();
+  }, [saveReject]);
+
+  const handleSetPreferences = useCallback(() => {
+    closedByChoiceRef.current = true;
+    shellui.openDrawer({ url: `${urls.cookiePreferences}?initial=true`, size: '420px' });
+  }, []);
+
+  // Show/hide dialog based on shouldShow
+  useEffect(() => {
+    if (!shouldShow) {
+      dialogShownRef.current = false;
+      return;
+    }
+
+    // Prevent showing dialog multiple times
+    if (dialogShownRef.current) {
+      return;
+    }
+
+    // Mark as shown to prevent duplicate calls
+    dialogShownRef.current = true;
+
+    // Close any open modals/drawers when cookie consent is shown
+    shellui.propagateMessage({ type: 'SHELLUI_CLOSE_MODAL', payload: {} });
+    shellui.propagateMessage({ type: 'SHELLUI_CLOSE_DRAWER', payload: {} });
+
+    // Reset choice ref when showing dialog
+    closedByChoiceRef.current = false;
+
+    // Show dialog using DialogContext directly (for root window)
+    showDialog({
+      title,
+      description,
+      mode: 'okCancel',
+      okLabel: t('accept'),
+      cancelLabel: t('reject'),
+      position: 'bottom-left',
+      icon: 'cookie',
+      secondaryButton: {
+        label: t('setPreferences'),
+        onClick: handleSetPreferences,
+      },
+      onOk: handleAccept,
+      onCancel: handleReject,
+    });
+  }, [
+    shouldShow,
+    title,
+    description,
+    t,
+    handleAccept,
+    handleReject,
+    handleSetPreferences,
+    showDialog,
+  ]);
+
+  return null;
+}

package/src/features/cookieConsent/CookiePreferencesView.tsx

@@ -0,0 +1,328 @@
+import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation } from 'react-router';
+import { shellui } from '@shellui/sdk';
+import { Button } from '@/components/ui/button';
+import { Switch } from '@/components/ui/switch';
+import { useConfig } from '../config/useConfig';
+import { useSettings } from '../settings/hooks/useSettings';
+import { resolveLocalizedString } from '../layouts/utils';
+import type { CookieConsentCategory, CookieDefinition } from '../config/types';
+
+/** Category display order and labels */
+const CATEGORY_ORDER: CookieConsentCategory[] = [
+  'strict_necessary',
+  'functional_performance',
+  'targeting',
+  'social_media_embedded',
+];
+
+/** Format duration in human-readable format */
+function formatDuration(
+  seconds: number,
+  t: (key: string, options?: Record<string, unknown>) => string,
+): string {
+  if (seconds < 60) return t('preferences.duration.seconds', { count: seconds });
+  if (seconds < 3600) return t('preferences.duration.minutes', { count: Math.floor(seconds / 60) });
+  if (seconds < 86400)
+    return t('preferences.duration.hours', { count: Math.floor(seconds / 3600) });
+  if (seconds < 31536000)
+    return t('preferences.duration.days', { count: Math.floor(seconds / 86400) });
+  return t('preferences.duration.years', { count: Math.floor(seconds / 31536000) });
+}
+
+export function CookiePreferencesView() {
+  const { t, i18n } = useTranslation('cookieConsent');
+  const { config } = useConfig();
+  const { settings, updateSetting } = useSettings();
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
+  const isInitialConsent = searchParams.get('initial') === 'true';
+  const currentLanguage = i18n.language || 'en';
+
+  const cookies = config?.cookieConsent?.cookies ?? [];
+  const allHosts = useMemo(() => cookies.map((c) => c.host), [cookies]);
+
+  // Strictly necessary hosts are always enabled
+  const strictNecessaryHosts = useMemo(
+    () => cookies.filter((c) => c.category === 'strict_necessary').map((c) => c.host),
+    [cookies],
+  );
+
+  const currentAcceptedHosts = settings?.cookieConsent?.acceptedHosts ?? [];
+
+  // Local state for unsaved changes (always include strict necessary)
+  const [localAcceptedHosts, setLocalAcceptedHosts] = useState<string[]>(() => [
+    ...new Set([...currentAcceptedHosts, ...strictNecessaryHosts]),
+  ]);
+
+  // Track if save/accept/reject was clicked to avoid rejecting on intentional close
+  const actionClickedRef = useRef(false);
+
+  // Reset local state when drawer opens (when URL changes to include initial param)
+  useEffect(() => {
+    if (isInitialConsent) {
+      // Always include strict necessary hosts
+      setLocalAcceptedHosts([...new Set([...currentAcceptedHosts, ...strictNecessaryHosts])]);
+    }
+  }, [isInitialConsent, currentAcceptedHosts, strictNecessaryHosts]);
+
+  // Handle drawer close without saving during initial consent
+  useEffect(() => {
+    if (!isInitialConsent) return;
+
+    const handleDrawerClose = () => {
+      // If closing without saving during initial consent, reject all except strict necessary
+      // Check if user has never consented and no action was clicked
+      const neverConsented = (settings?.cookieConsent?.consentedCookieHosts ?? []).length === 0;
+      if (neverConsented && !actionClickedRef.current) {
+        updateSetting('cookieConsent', {
+          acceptedHosts: strictNecessaryHosts,
+          consentedCookieHosts: allHosts,
+        });
+      }
+    };
+
+    const cleanup = shellui.addMessageListener('SHELLUI_CLOSE_DRAWER', handleDrawerClose);
+    return cleanup;
+  }, [isInitialConsent, strictNecessaryHosts, allHosts, updateSetting, settings]);
+
+  // Cleanup on unmount: if initial consent and drawer closes without save, reject all
+  useEffect(() => {
+    return () => {
+      if (isInitialConsent && !actionClickedRef.current) {
+        // Check if user has never consented
+        const neverConsented = (settings?.cookieConsent?.consentedCookieHosts ?? []).length === 0;
+        if (neverConsented) {
+          updateSetting('cookieConsent', {
+            acceptedHosts: strictNecessaryHosts,
+            consentedCookieHosts: allHosts,
+          });
+        }
+      }
+    };
+  }, [isInitialConsent, strictNecessaryHosts, allHosts, updateSetting, settings]);
+
+  // Group cookies by category
+  const cookiesByCategory = useMemo(() => {
+    const grouped = new Map<CookieConsentCategory, CookieDefinition[]>();
+    for (const cookie of cookies) {
+      const existing = grouped.get(cookie.category) ?? [];
+      grouped.set(cookie.category, [...existing, cookie]);
+    }
+    return grouped;
+  }, [cookies]);
+
+  // Toggle individual cookie
+  const toggleCookie = useCallback((host: string, enabled: boolean) => {
+    setLocalAcceptedHosts((prev) => (enabled ? [...prev, host] : prev.filter((h) => h !== host)));
+  }, []);
+
+  // Toggle entire category
+  const toggleCategory = useCallback(
+    (category: CookieConsentCategory, enabled: boolean) => {
+      const categoryHosts = cookiesByCategory.get(category)?.map((c) => c.host) ?? [];
+      setLocalAcceptedHosts((prev) => {
+        if (enabled) {
+          return [...new Set([...prev, ...categoryHosts])];
+        } else {
+          const hostsSet = new Set(categoryHosts);
+          return prev.filter((h) => !hostsSet.has(h));
+        }
+      });
+    },
+    [cookiesByCategory],
+  );
+
+  // Check if category is fully or partially enabled
+  const getCategoryState = useCallback(
+    (category: CookieConsentCategory): 'all' | 'some' | 'none' => {
+      const categoryHosts = cookiesByCategory.get(category)?.map((c) => c.host) ?? [];
+      if (categoryHosts.length === 0) return 'none';
+      const enabledCount = categoryHosts.filter((h) => localAcceptedHosts.includes(h)).length;
+      if (enabledCount === categoryHosts.length) return 'all';
+      if (enabledCount > 0) return 'some';
+      return 'none';
+    },
+    [cookiesByCategory, localAcceptedHosts],
+  );
+
+  // Accept all
+  const handleAcceptAll = useCallback(() => {
+    actionClickedRef.current = true;
+    updateSetting('cookieConsent', {
+      acceptedHosts: allHosts,
+      consentedCookieHosts: allHosts,
+    });
+    shellui.closeDrawer();
+  }, [allHosts, updateSetting]);
+
+  // Reject all except strict necessary (which are always enabled)
+  const handleRejectAll = useCallback(() => {
+    actionClickedRef.current = true;
+    updateSetting('cookieConsent', {
+      acceptedHosts: strictNecessaryHosts,
+      consentedCookieHosts: allHosts,
+    });
+    shellui.closeDrawer();
+  }, [strictNecessaryHosts, allHosts, updateSetting]);
+
+  // Save custom preferences (always include strict necessary)
+  const handleSave = useCallback(() => {
+    actionClickedRef.current = true;
+    const hostsToSave = [...new Set([...localAcceptedHosts, ...strictNecessaryHosts])];
+    updateSetting('cookieConsent', {
+      acceptedHosts: hostsToSave,
+      consentedCookieHosts: allHosts,
+    });
+    shellui.closeDrawer();
+  }, [localAcceptedHosts, strictNecessaryHosts, allHosts, updateSetting]);
+
+  // Check if preferences have changed
+  const hasChanges = useMemo(() => {
+    if (localAcceptedHosts.length !== currentAcceptedHosts.length) return true;
+    const sortedLocal = [...localAcceptedHosts].sort();
+    const sortedCurrent = [...currentAcceptedHosts].sort();
+    return sortedLocal.some((h, i) => h !== sortedCurrent[i]);
+  }, [localAcceptedHosts, currentAcceptedHosts]);
+
+  if (cookies.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-full p-6">
+        <p className="text-muted-foreground">{t('preferences.noCookies')}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full bg-background">
+      {/* Header */}
+      <div className="flex flex-col space-y-2 border-b border-border/60 px-6 pt-5 pb-4">
+        <h2
+          className="text-lg font-semibold leading-none tracking-tight"
+          style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+        >
+          {t('preferences.title')}
+        </h2>
+        <p className="text-sm text-muted-foreground">{t('preferences.description')}</p>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto px-6 py-4">
+        {CATEGORY_ORDER.map((category) => {
+          const categoryCookies = cookiesByCategory.get(category);
+          if (!categoryCookies || categoryCookies.length === 0) return null;
+
+          const categoryState = getCategoryState(category);
+          const isStrictNecessary = category === 'strict_necessary';
+
+          return (
+            <div
+              key={category}
+              className="mb-6 last:mb-0"
+            >
+              {/* Category header with toggle */}
+              <div className="flex items-center justify-between mb-3">
+                <div className="flex-1 min-w-0">
+                  <h3
+                    className="text-sm font-semibold"
+                    style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+                  >
+                    {t(`preferences.categories.${category}.title`)}
+                  </h3>
+                  <p className="text-xs text-muted-foreground mt-0.5">
+                    {t(`preferences.categories.${category}.description`)}
+                  </p>
+                </div>
+                <div className="ml-4 flex items-center gap-2">
+                  {!isStrictNecessary && categoryState === 'some' && (
+                    <span className="text-xs text-muted-foreground">
+                      {t('preferences.partial')}
+                    </span>
+                  )}
+                  {isStrictNecessary ? (
+                    <span className="text-xs text-muted-foreground">
+                      {t('preferences.alwaysOn')}
+                    </span>
+                  ) : (
+                    <Switch
+                      checked={categoryState === 'all'}
+                      onCheckedChange={(checked) => toggleCategory(category, checked)}
+                      aria-label={t(`preferences.categories.${category}.title`)}
+                    />
+                  )}
+                </div>
+              </div>
+
+              {/* Individual cookies - only show for non-strictly-necessary categories */}
+              {!isStrictNecessary && (
+                <div className="space-y-2 pl-2 border-l-2 border-border ml-1">
+                  {categoryCookies.map((cookie) => {
+                    const isEnabled = localAcceptedHosts.includes(cookie.host);
+                    return (
+                      <div
+                        key={cookie.host}
+                        className="flex items-start justify-between gap-3 py-2 px-3 rounded-md bg-muted/30"
+                      >
+                        <div className="flex-1 min-w-0">
+                          <span className="text-sm font-medium truncate">{cookie.name}</span>
+                          {cookie.description && (
+                            <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">
+                              {resolveLocalizedString(cookie.description, currentLanguage)}
+                            </p>
+                          )}
+                          <div className="flex items-center gap-3 mt-1 text-[10px] text-muted-foreground/70">
+                            <span>{cookie.host}</span>
+                            <span>•</span>
+                            <span>{formatDuration(cookie.durationSeconds, t)}</span>
+                            <span>•</span>
+                            <span className="capitalize">{cookie.type.replace('_', ' ')}</span>
+                          </div>
+                        </div>
+                        <Switch
+                          checked={isEnabled}
+                          onCheckedChange={(checked) => toggleCookie(cookie.host, checked)}
+                          aria-label={cookie.name}
+                        />
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Footer */}
+      <div className="mt-auto flex flex-col gap-2 border-t border-border px-6 py-4">
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleRejectAll}
+            className="flex-1"
+          >
+            {t('preferences.rejectAll')}
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleAcceptAll}
+            className="flex-1"
+          >
+            {t('preferences.acceptAll')}
+          </Button>
+        </div>
+        <Button
+          size="sm"
+          onClick={handleSave}
+          disabled={!hasChanges && !isInitialConsent}
+          className="w-full"
+        >
+          {t('preferences.save')}
+        </Button>
+      </div>
+    </div>
+  );
+}