@shellui/core 0.1.0 → 0.2.0-alpha.0

package/src/features/sentry/initSentry.ts

@@ -1,4 +1,5 @@
 import { getCookieConsentAccepted } from '../cookieConsent/cookieConsent';
+import shelluiConfig from '@shellui/config';
 
 const SETTINGS_KEY = 'shellui:settings';
 
@@ -19,17 +20,10 @@ function isErrorReportingEnabled(): boolean {
   }
 }
 
-type SentryGlobals = {
-  __SHELLUI_SENTRY_DSN__?: string;
-  __SHELLUI_SENTRY_ENVIRONMENT__?: string;
-  __SHELLUI_SENTRY_RELEASE__?: string;
-};
-
 /**
  * Initialize error reporting only in production when configured and user has not disabled it.
  * Lazy-loads @sentry/react only when needed so the bundle is not loaded when Sentry is unused.
- * Reads DSN, environment, and release from __SHELLUI_SENTRY_DSN__, __SHELLUI_SENTRY_ENVIRONMENT__,
- * and __SHELLUI_SENTRY_RELEASE__ (injected at build time) and user preference from settings.
+ * Reads Sentry config from @shellui/config (injected at build time) and user preference from settings.
  * Exported so the settings UI can re-initialize when the user re-enables reporting.
  */
 export function initSentry(): void {
@@ -40,16 +34,32 @@ export function initSentry(): void {
   if (!isErrorReportingEnabled()) {
     return;
   }
-  const g = globalThis as unknown as SentryGlobals;
-  const dsn = g.__SHELLUI_SENTRY_DSN__;
+  const sentry = shelluiConfig?.sentry;
+  const dsn = sentry?.dsn;
   if (!dsn || typeof dsn !== 'string') {
     return;
   }
   void import('@sentry/react').then((Sentry) => {
+    const isLocalhost =
+      typeof window !== 'undefined' &&
+      (window.location.hostname === 'localhost' ||
+        window.location.hostname === '127.0.0.1' ||
+        window.location.hostname === '[::1]');
+
+    // For localhost, use tunnel through the dev server to avoid CORS issues
+    // The tunnel endpoint proxies requests to Sentry, bypassing browser CORS restrictions
+    const tunnel =
+      isLocalhost && typeof window !== 'undefined'
+        ? `${window.location.origin}/api/sentry-tunnel`
+        : undefined;
+
     Sentry.init({
       dsn,
-      environment: g.__SHELLUI_SENTRY_ENVIRONMENT__ ?? 'production',
-      release: g.__SHELLUI_SENTRY_RELEASE__,
+      environment: sentry.environment ?? 'production',
+      release: sentry.release,
+      sendDefaultPii: true,
+      // Use tunnel for localhost to avoid CORS issues
+      ...(tunnel && { tunnel }),
     });
     sentryLoaded = true;
   });
@@ -69,4 +79,64 @@ export function closeSentry(): void {
   });
 }
 
+/**
+ * Ensure Sentry is initialized and ready, then capture an exception.
+ * Useful for manually triggering error reports (e.g., test button).
+ * This function will initialize Sentry even in dev mode if needed for testing.
+ * @param error - The error to capture
+ * @returns Promise that resolves when the error has been sent (or rejected if Sentry is unavailable)
+ */
+export async function captureException(error: Error): Promise<void> {
+  const sentry = shelluiConfig?.sentry;
+  const dsn = sentry?.dsn;
+
+  if (!dsn || typeof dsn !== 'string') {
+    throw new Error('Sentry DSN not configured');
+  }
+
+  // If Sentry is not loaded, initialize it (even in dev mode for testing)
+  if (!sentryLoaded) {
+    // Check if error reporting is enabled
+    if (!isErrorReportingEnabled()) {
+      throw new Error('Error reporting is disabled in settings');
+    }
+
+    // Import and initialize Sentry (bypass dev mode check for manual testing)
+    const Sentry = await import('@sentry/react');
+    const isLocalhost =
+      typeof window !== 'undefined' &&
+      (window.location.hostname === 'localhost' ||
+        window.location.hostname === '127.0.0.1' ||
+        window.location.hostname === '[::1]');
+
+    // For localhost, use tunnel through the dev server to avoid CORS issues
+    // The tunnel endpoint proxies requests to Sentry, bypassing browser CORS restrictions
+    const tunnel =
+      isLocalhost && typeof window !== 'undefined'
+        ? `${window.location.origin}/api/sentry-tunnel`
+        : undefined;
+
+    Sentry.init({
+      dsn,
+      environment: sentry.environment ?? 'production',
+      release: sentry.release,
+      sendDefaultPii: true,
+      // Use tunnel for localhost to avoid CORS issues
+      ...(tunnel && { tunnel }),
+    });
+    sentryLoaded = true;
+
+    // Wait a bit for Sentry to fully initialize
+    await new Promise((resolve) => setTimeout(resolve, 100));
+  }
+
+  // Capture the exception
+  const Sentry = await import('@sentry/react');
+  if (Sentry.captureException) {
+    Sentry.captureException(error);
+  } else {
+    throw new Error('Sentry captureException not available');
+  }
+}
+
 initSentry();

package/src/features/settings/SettingsProvider.tsx

@@ -10,6 +10,7 @@ import { SettingsContext } from './SettingsContext';
 import { useConfig } from '../config/useConfig';
 import { useTranslation } from 'react-i18next';
 import type { NavigationItem, NavigationGroup } from '../config/types';
+import { getEffectiveUrl } from '../layouts/utils';
 
 const logger = getLogger('shellcore');
 
@@ -39,7 +40,7 @@ function buildSettingsWithNavigation(
   if (!navigation?.length) return settings;
   const items: SettingsNavigationItem[] = flattenNavigationItems(navigation).map((item) => ({
     path: item.path,
-    url: item.url,
+    url: getEffectiveUrl(item),
     label: resolveLabel(item.label, lang),
   }));
   return { ...settings, navigation: { items } };

package/src/features/settings/SettingsView.tsx

@@ -26,13 +26,17 @@ import { useConfig } from '../config/useConfig';
 import { isTauri } from '../../service-worker/register';
 import { Button } from '../../components/ui/button';
 import { ChevronRightIcon, ChevronLeftIcon } from './SettingsIcons';
+import { flattenNavigationItems, resolveLocalizedString } from '../layouts/utils';
+import { ApplicationSettingsPanel } from './components/ApplicationSettingsPanel';
+import type { NavigationItem } from '../config/types';
+import { cn } from '../../lib/utils';
 
 export const SettingsView = () => {
   const location = useLocation();
   const navigate = useNavigate();
   const { settings } = useSettings();
   const { config } = useConfig();
-  const { t } = useTranslation('settings');
+  const { t, i18n } = useTranslation('settings');
   // Re-check isTauri after mount and after a short delay so we catch late-injected __TAURI__ in dev
   const [isTauriEnv, setIsTauriEnv] = useState(() => isTauri());
 
@@ -70,10 +74,46 @@ export const SettingsView = () => {
     );
   }, [settings.developerFeatures.enabled, routesWithoutTauriSw]);
 
+  // Application settings from navigation items with settings URL
+  const applicationRoutes = useMemo(() => {
+    const lang = i18n.language || 'en';
+    const flat = config?.navigation ? flattenNavigationItems(config.navigation) : [];
+    return flat
+      .filter((item): item is NavigationItem & { settings: string } => Boolean(item.settings))
+      .map((item) => {
+        const pathPrefix = `${urls.settings.replace(/^\/+/, '')}/app-${item.path}`;
+        const navItem: NavigationItem = {
+          ...item,
+          url: item.settings,
+        };
+        return {
+          name: resolveLocalizedString(item.label, lang),
+          iconSrc: item.icon ?? undefined,
+          path: `app-${item.path}`,
+          element: (
+            <ApplicationSettingsPanel
+              url={item.settings}
+              pathPrefix={pathPrefix}
+              navItem={navItem}
+            />
+          ),
+        };
+      });
+  }, [config?.navigation, i18n.language]);
+
+  // All routes (core + applications) for selection and routing
+  const allRoutes = useMemo(
+    () => [...filteredRoutes, ...applicationRoutes],
+    [filteredRoutes, applicationRoutes],
+  );
+
   // Group routes by category
   const groupedRoutes = useMemo(() => {
     const developerOnlyPaths = ['developpers', 'service-worker'];
     const groups = [
+      ...(applicationRoutes.length > 0
+        ? [{ title: t('categories.applications'), routes: applicationRoutes }]
+        : []),
       {
         title: t('categories.preferences'),
         routes: filteredRoutes.filter((route) =>
@@ -90,7 +130,7 @@ export const SettingsView = () => {
       },
     ];
     return groups.filter((group) => group.routes.length > 0);
-  }, [filteredRoutes, t]);
+  }, [filteredRoutes, applicationRoutes, t]);
 
   // Find matching nav item by checking if URL contains or ends with the item path
   const getSelectedItemFromUrl = useCallback(() => {
@@ -98,7 +138,7 @@ export const SettingsView = () => {
 
     // Find matching nav item by checking if pathname contains the item path
     // This works regardless of the URL structure/prefix
-    const matchedItem = filteredRoutes.find((item) => {
+    const matchedItem = allRoutes.find((item) => {
       // Normalize paths for comparison (remove leading/trailing slashes)
       const normalizedPathname = pathname.replace(/^\/+|\/+$/g, '');
       const normalizedItemPath = item.path.replace(/^\/+|\/+$/g, '');
@@ -112,7 +152,7 @@ export const SettingsView = () => {
     });
 
     return matchedItem;
-  }, [location.pathname, filteredRoutes]);
+  }, [location.pathname, allRoutes]);
 
   const selectedItem = useMemo(() => getSelectedItemFromUrl(), [getSelectedItemFromUrl]);
 
@@ -139,7 +179,7 @@ export const SettingsView = () => {
 
     // Pathname doesn't match settings path structure - not in settings
     return false;
-  }, [location.pathname, filteredRoutes]);
+  }, [location.pathname]);
 
   // Navigate back to settings root
   const handleBackToSettings = useCallback(() => {
@@ -168,7 +208,17 @@ export const SettingsView = () => {
                             onClick={() => navigate(`${urls.settings}/${item.path}`)}
                             className="cursor-pointer"
                           >
-                            <item.icon />
+                            {'icon' in item && item.icon ? (
+                              <item.icon />
+                            ) : 'iconSrc' in item && item.iconSrc ? (
+                              <img
+                                src={item.iconSrc}
+                                alt=""
+                                className="h-4 w-4 shrink-0"
+                              />
+                            ) : (
+                              <span className="h-4 w-4 shrink-0" />
+                            )}
                             <span>{item.name}</span>
                           </button>
                         </SidebarMenuButton>
@@ -203,8 +253,19 @@ export const SettingsView = () => {
                     </h2>
                     <div className="flex flex-col bg-card rounded-lg overflow-hidden border border-border">
                       {group.routes.map((item, itemIndex) => {
-                        const Icon = item.icon;
                         const isLast = itemIndex === group.routes.length - 1;
+                        const iconEl =
+                          'icon' in item && item.icon ? (
+                            <item.icon />
+                          ) : 'iconSrc' in item && item.iconSrc ? (
+                            <img
+                              src={item.iconSrc}
+                              alt=""
+                              className="h-4 w-4 shrink-0"
+                            />
+                          ) : (
+                            <span className="h-4 w-4 shrink-0" />
+                          );
                         return (
                           <div
                             key={item.name}
@@ -218,9 +279,7 @@ export const SettingsView = () => {
                               className="w-full flex items-center justify-between px-4 py-3 bg-transparent hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground transition-colors cursor-pointer rounded-none"
                             >
                               <div className="flex items-center gap-2 flex-1 min-w-0">
-                                <div className="flex-shrink-0 text-foreground/70">
-                                  <Icon />
-                                </div>
+                                <div className="flex-shrink-0 text-foreground/70">{iconEl}</div>
                                 <span className="text-sm font-normal text-foreground">
                                   {item.name}
                                 </span>
@@ -256,15 +315,15 @@ export const SettingsView = () => {
                   <Route
                     index
                     element={
-                      filteredRoutes.length > 0 ? (
+                      allRoutes.length > 0 ? (
                         <Navigate
-                          to={`${urls.settings}/${filteredRoutes[0].path}`}
+                          to={`${urls.settings}/${allRoutes[0].path}`}
                           replace
                         />
                       ) : null
                     }
                   />
-                  {filteredRoutes.map((item) => (
+                  {allRoutes.map((item) => (
                     <Route
                       key={item.path}
                       path={item.path}
@@ -294,7 +353,12 @@ export const SettingsView = () => {
               </div>
             </header>
           )}
-          <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0">
+          <div
+            className={cn(
+              'flex flex-1 flex-col gap-4 overflow-y-auto',
+              !selectedItem?.path?.startsWith('app-') && 'p-4 pt-0',
+            )}
+          >
             <Routes>
               <Route
                 index
@@ -311,7 +375,7 @@ export const SettingsView = () => {
                   </div>
                 }
               />
-              {filteredRoutes.map((item) => (
+              {allRoutes.map((item) => (
                 <Route
                   key={item.path}
                   path={item.path}

package/src/features/settings/components/Advanced.tsx

@@ -5,14 +5,26 @@ import { closeSentry, initSentry } from '../../sentry/initSentry';
 import { useSettings } from '../hooks/useSettings';
 import { Button } from '../../../components/ui/button';
 import { shellui } from '@shellui/sdk';
+import { useCookieConsent } from '../../cookieConsent/useCookieConsent';
 
 export const Advanced = () => {
   const { t } = useTranslation('settings');
   const { config } = useConfig();
   const { settings, updateSetting, resetAllData } = useSettings();
   const errorReportingConfigured = Boolean(config?.sentry?.dsn);
+  const { isAccepted: sentryConsentAccepted } = useCookieConsent('sentry.io');
 
   const handleErrorReportingChange = (checked: boolean) => {
+    // Don't allow enabling if cookie consent hasn't been approved
+    if (checked && !sentryConsentAccepted) {
+      shellui.toast({
+        title: 'Cookie consent required',
+        description:
+          'Please approve Sentry cookie consent in Data Privacy settings to enable error reporting.',
+        type: 'error',
+      });
+      return;
+    }
     updateSetting('errorReporting', { enabled: checked });
     if (checked) {
       initSentry();
@@ -56,15 +68,18 @@ export const Advanced = () => {
           </span>
           <p className="text-sm text-muted-foreground">
             {errorReportingConfigured
-              ? t('advanced.errorReporting.statusConfigured')
+              ? sentryConsentAccepted
+                ? t('advanced.errorReporting.statusConfigured')
+                : 'Cookie consent required to enable error reporting'
               : t('advanced.errorReporting.statusNotConfigured')}
           </p>
         </div>
         {errorReportingConfigured && (
           <Switch
             id="error-reporting"
-            checked={settings.errorReporting.enabled}
+            checked={sentryConsentAccepted && settings.errorReporting.enabled}
             onCheckedChange={handleErrorReportingChange}
+            disabled={!sentryConsentAccepted}
           />
         )}
       </div>

package/src/features/settings/components/ApplicationSettingsPanel.tsx

@@ -0,0 +1,25 @@
+import type { NavigationItem } from '../../config/types';
+import { ContentView } from '../../../components/ContentView';
+
+interface ApplicationSettingsPanelProps {
+  url: string;
+  pathPrefix: string;
+  navItem: NavigationItem;
+}
+
+export const ApplicationSettingsPanel = ({
+  url,
+  pathPrefix,
+  navItem,
+}: ApplicationSettingsPanelProps) => {
+  return (
+    <div className="m-0 p-0 flex flex-1 flex-col min-h-0 w-full overflow-hidden bg-background">
+      <ContentView
+        url={url}
+        pathPrefix={pathPrefix}
+        navItem={navItem}
+        ignoreMessages={true}
+      />
+    </div>
+  );
+};

package/src/features/settings/components/Develop.tsx

@@ -2,7 +2,11 @@ import { useTranslation } from 'react-i18next';
 import { shellui } from '@shellui/sdk';
 import { useSettings } from '../hooks/useSettings';
 import { useConfig } from '../../config/useConfig';
-import { flattenNavigationItems, resolveLocalizedString } from '../../layouts/utils';
+import {
+  flattenNavigationItems,
+  getNavPathPrefix,
+  resolveLocalizedString,
+} from '../../layouts/utils';
 import { Switch } from '../../../components/ui/switch';
 import { Select } from '../../../components/ui/select';
 import { Button } from '../../../components/ui/button';
@@ -10,6 +14,8 @@ import { ToastTestButtons } from './develop/ToastTestButtons';
 import { DialogTestButtons } from './develop/DialogTestButtons';
 import { ModalTestButtons } from './develop/ModalTestButtons';
 import { DrawerTestButtons } from './develop/DrawerTestButtons';
+import { captureException } from '../../sentry/initSentry';
+import { useCookieConsent } from '../../cookieConsent/useCookieConsent';
 import type { LayoutType } from '../../config/types';
 
 export const Develop = () => {
@@ -23,6 +29,8 @@ export const Develop = () => {
         (item, index, self) => index === self.findIndex((i) => i.path === item.path),
       )
     : [];
+  const errorReportingConfigured = Boolean(config?.sentry?.dsn);
+  const { isAccepted: sentryConsentAccepted } = useCookieConsent('sentry.io');
 
   return (
     <div className="space-y-6">
@@ -120,8 +128,8 @@ export const Develop = () => {
                 <option value="">{t('develop.navigation.placeholder')}</option>
                 {navItems.map((item) => (
                   <option
-                    key={item.path}
-                    value={`/${item.path}`}
+                    key={item.path || 'root'}
+                    value={getNavPathPrefix(item)}
                   >
                     {resolveLocalizedString(item.label, currentLanguage) || item.path}
                   </option>
@@ -142,7 +150,7 @@ export const Develop = () => {
           {t('develop.layout.title')}
         </h3>
         <div className="flex flex-wrap gap-2">
-          {(['sidebar', 'windows'] as const).map((layoutMode) => (
+          {(['sidebar', 'app-bar', 'windows'] as const).map((layoutMode) => (
             <Button
               key={layoutMode}
               variant={effectiveLayout === layoutMode ? 'default' : 'outline'}
@@ -167,6 +175,62 @@ export const Develop = () => {
           <DialogTestButtons />
           <ModalTestButtons />
           <DrawerTestButtons />
+          {errorReportingConfigured && (
+            <div className="flex items-center justify-between">
+              <div className="space-y-0.5">
+                <span
+                  className="text-sm font-medium leading-none"
+                  style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+                >
+                  Test Error Reporting
+                </span>
+                <p className="text-sm text-muted-foreground">
+                  Trigger a test error to verify Sentry is working correctly
+                </p>
+              </div>
+              <Button
+                variant="destructive"
+                onClick={async () => {
+                  if (!sentryConsentAccepted) {
+                    shellui.toast({
+                      title: 'Cookie consent required',
+                      description:
+                        'Please approve Sentry cookie consent in Data Privacy settings to test error reporting.',
+                      type: 'error',
+                    });
+                    return;
+                  }
+
+                  const testError = new Error('This is your first error!');
+
+                  try {
+                    // Ensure Sentry is initialized and capture the error
+                    await captureException(testError);
+
+                    // Show success toast
+                    shellui.toast({
+                      title: 'Test error triggered',
+                      description: 'The error has been sent to Sentry for tracking.',
+                      type: 'success',
+                    });
+                  } catch (err) {
+                    // If Sentry capture failed, show error toast
+                    shellui.toast({
+                      title: 'Failed to send error to Sentry',
+                      description:
+                        err instanceof Error
+                          ? err.message
+                          : 'Sentry is not configured or not available.',
+                      type: 'error',
+                    });
+                  }
+                }}
+                disabled={!sentryConsentAccepted}
+              >
+                Break the world
+              </Button>
+            </div>
+          )}
         </div>
       </div>
     </div>

package/src/i18n/translations/en/common.json

@@ -2,6 +2,11 @@
   "settings": "Settings",
   "welcome": "Welcome to {{title}}",
   "getStarted": "Select a navigation item to get started.",
+  "homeConfig": {
+    "intro": "To show custom content on the home page:",
+    "startUrl": "Set start_url in shellui.config to redirect \"/\" to another path (e.g. start_url: '/playground').",
+    "rootNav": "Or add a navigation item with path \"\" or \"/\" to display that item at \"/\"."
+  },
   "navigationError": "Navigation error",
   "navigationNotAllowed": "This URL is not configured in the app navigation.",
   "errorBoundary": {

package/src/i18n/translations/en/settings.json

@@ -2,6 +2,7 @@
   "title": "Settings",
   "categories": {
     "preferences": "Preferences",
+    "applications": "Applications",
     "system": "System",
     "developer": "Developer"
   },
@@ -199,7 +200,8 @@
       "title": "Layout",
       "description": "Switch between sidebar layout and windows (taskbar) layout. This overrides the app config for this session.",
       "sidebar": "Sidebar",
-      "windows": "Windows"
+      "windows": "Windows (experimental)",
+      "app-bar": "App bar"
     },
     "logging": {
       "title": "Logging",

package/src/i18n/translations/fr/common.json

@@ -2,6 +2,11 @@
   "settings": "Paramètres",
   "welcome": "Bienvenue sur {{title}}",
   "getStarted": "Sélectionnez un élément de navigation pour commencer.",
+  "homeConfig": {
+    "intro": "Pour afficher du contenu personnalisé sur la page d'accueil :",
+    "startUrl": "Définissez start_url dans shellui.config pour rediriger \"/\" vers un autre chemin (ex. start_url: '/playground').",
+    "rootNav": "Ou ajoutez un élément de navigation avec path \"\" ou \"/\" pour l'afficher à \"/\"."
+  },
   "navigationError": "Erreur de navigation",
   "navigationNotAllowed": "Cette URL n'est pas configurée dans la navigation de l'application.",
   "errorBoundary": {

package/src/i18n/translations/fr/settings.json

@@ -2,6 +2,7 @@
   "title": "Paramètres",
   "categories": {
     "preferences": "Préférences",
+    "applications": "Applications",
     "system": "Système",
     "developer": "Développeur"
   },
@@ -199,7 +200,8 @@
       "title": "Disposition",
       "description": "Basculer entre la disposition avec barre latérale et la disposition fenêtres (barre des tâches). Remplace la config de l'app pour cette session.",
       "sidebar": "Barre latérale",
-      "windows": "Fenêtres"
+      "windows": "Fenêtres (expérimental)",
+      "app-bar": "Barre d'app"
     },
     "logging": {
       "title": "Journalisation",

package/src/index.css

@@ -318,6 +318,16 @@
     filter: brightness(0) invert(1) saturate(100%);
     opacity: 0.9;
   }
+
+  /* App bar layout logo - same as sidebar: dark in light mode, white in dark mode */
+  [data-layout='app-bar'] img.app-bar-logo {
+    filter: brightness(0) saturate(100%);
+    opacity: 0.9;
+  }
+  .dark [data-layout='app-bar'] img.app-bar-logo {
+    filter: brightness(0) invert(1) saturate(100%);
+    opacity: 0.9;
+  }
 }
 
 /* Dialog / modal overlay and content animations */

package/src/lib/z-index.ts

@@ -9,6 +9,8 @@ export const Z_INDEX = {
   /** Modal overlay and content (settings panel, etc.) */
   MODAL_OVERLAY: 10000,
   MODAL_CONTENT: 10001,
+  /** Tooltip content (above modals so tooltips show over dialogs if needed) */
+  TOOLTIP: 10002,
   /** Drawer overlay and content (slide-out panels; same level as modal) */
   DRAWER_OVERLAY: 10000,
   DRAWER_CONTENT: 10001,