@shellui/core 0.2.0-alpha.4 → 0.2.0-beta.1

package/src/features/layouts/OverlayShell.tsx

@@ -1,5 +1,5 @@
-import { useEffect, type ReactNode } from 'react';
-import { useNavigate } from 'react-router';
+import { useEffect, useRef, type ReactNode } from 'react';
+import { useLocation, useNavigate } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import { shellui } from '@shellui/sdk';
 import type { NavigationItem } from '../config/types';
@@ -9,16 +9,18 @@ import { Toaster } from '../../components/ui/sonner';
 import { ContentView } from '../../components/ContentView';
 import { useModal } from '../modal/ModalContext';
 import { useDrawer } from '../drawer/DrawerContext';
+import { useNavigationItems } from '../../routes/hooks/useNavigationItems';
 import { getNavPathPrefix, resolveLocalizedString } from './utils';
 
 interface OverlayShellProps {
-  navigationItems: NavigationItem[];
   children: ReactNode;
 }
 
 /** Renders modal, drawer and toaster overlays and handles SHELLUI_OPEN_MODAL / SHELLUI_NAVIGATE. */
-export function OverlayShell({ navigationItems, children }: OverlayShellProps) {
+export const OverlayShell = ({ children }: OverlayShellProps) => {
+  const location = useLocation();
   const navigate = useNavigate();
+  const { navigationItems } = useNavigationItems();
   const { isOpen, modalUrl, closeModal } = useModal();
   const {
     isOpen: isDrawerOpen,
@@ -30,6 +32,17 @@ export function OverlayShell({ navigationItems, children }: OverlayShellProps) {
   const { t, i18n } = useTranslation('common');
   const currentLanguage = i18n.language || 'en';
 
+  // Close modal and drawer when app URL changes (navigation, back button) so overlay content stays url-specific
+  const locationKeyRef = useRef(location.pathname + location.search + location.hash);
+  useEffect(() => {
+    const currentKey = location.pathname + location.search + location.hash;
+    if (locationKeyRef.current !== currentKey) {
+      closeModal();
+      closeDrawer();
+      locationKeyRef.current = currentKey;
+    }
+  }, [location.pathname, location.search, location.hash, closeModal, closeDrawer]);
+
   useEffect(() => {
     const cleanup = shellui.addMessageListener('SHELLUI_OPEN_MODAL', () => {
       closeDrawer();
@@ -43,7 +56,11 @@ export function OverlayShell({ navigationItems, children }: OverlayShellProps) {
       const rawUrl = payload?.url;
       if (typeof rawUrl !== 'string' || !rawUrl.trim()) return;
 
+      closeModal();
+      closeDrawer();
+
       let pathname: string;
+
       if (rawUrl.startsWith('http://') || rawUrl.startsWith('https://')) {
         try {
           pathname = new URL(rawUrl).pathname;
@@ -54,9 +71,6 @@ export function OverlayShell({ navigationItems, children }: OverlayShellProps) {
         pathname = rawUrl.startsWith('/') ? rawUrl : `/${rawUrl}`;
       }
 
-      closeModal();
-      closeDrawer();
-
       const isHomepage = pathname === '/' || pathname === '';
       const isAllowed =
         isHomepage ||
@@ -77,7 +91,6 @@ export function OverlayShell({ navigationItems, children }: OverlayShellProps) {
     });
     return () => cleanup();
   }, [navigate, closeModal, closeDrawer, navigationItems, t]);
-
   return (
     <>
       {children}
@@ -169,4 +182,5 @@ export function OverlayShell({ navigationItems, children }: OverlayShellProps) {
       <Toaster />
     </>
   );
-}
+};
+export default OverlayShell;

package/src/features/layouts/{AppBarLayout.tsx → appbar/AppBarLayout.tsx}

@@ -2,7 +2,7 @@ import { useMemo, useEffect, type ReactNode } from 'react';
 import { Link, useLocation, Outlet, useNavigate } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import { shellui } from '@shellui/sdk';
-import type { NavigationItem, NavigationGroup } from '../config/types';
+import type { NavigationItem, NavigationGroup } from '../../config/types';
 import {
   filterNavigationByViewport,
   flattenNavigationItems,
@@ -11,12 +11,10 @@ import {
   resolveLocalizedString as resolveNavLabel,
   splitNavigationByPosition,
   withHomepageWhenNoRoot,
-} from './utils';
-import { LayoutProviders } from './LayoutProviders';
-import { OverlayShell } from './OverlayShell';
-import { Select } from '../../components/ui/select';
-import { AppBarTooltip, TooltipProvider } from '../../components/ui/tooltip';
-import { cn } from '../../lib/utils';
+} from '../utils';
+import { Select } from '../../../components/ui/select';
+import { AppBarTooltip, TooltipProvider } from '../../../components/ui/tooltip';
+import { cn } from '../../../lib/utils';
 
 const TOP_BAR_MAX_HEIGHT = 42;
 
@@ -187,81 +185,77 @@ export function AppBarLayout({ title, logo, navigation }: AppBarLayoutProps) {
       : `/${location.pathname.replace(/^\/+|\/+$/g, '').split('/')[0]}`;
 
   return (
-    <LayoutProviders>
-      <OverlayShell navigationItems={navigationItems}>
-        <div className="flex flex-col h-screen overflow-hidden bg-background">
-          {/* Top bar: max 42px */}
-          <header
-            className="flex items-center gap-3 px-3 border-b border-border bg-sidebar-background shrink-0"
-            style={{ minHeight: 32, maxHeight: TOP_BAR_MAX_HEIGHT }}
-            data-layout="app-bar"
-          >
-            {/* Logo / title (home link) */}
-            <Link
-              to="/"
-              className="flex items-center gap-2 shrink-0 min-w-0 py-1.5 pr-2 text-sidebar-foreground hover:text-sidebar-foreground/80 transition-colors"
-            >
-              {logo && logo.trim() ? (
-                <img
-                  src={logo}
-                  alt={title || 'Logo'}
-                  className="h-5 w-auto max-h-6 object-contain app-bar-logo m-1.5"
-                />
-              ) : title ? (
-                <span className="text-sm font-semibold truncate">{title}</span>
-              ) : null}
-            </Link>
+    <div className="flex flex-col h-screen overflow-hidden bg-background">
+      {/* Top bar: max 42px */}
+      <header
+        className="flex items-center gap-3 px-3 border-b border-border bg-sidebar-background shrink-0"
+        style={{ minHeight: 32, maxHeight: TOP_BAR_MAX_HEIGHT }}
+        data-layout="app-bar"
+      >
+        {/* Logo / title (home link) */}
+        <Link
+          to="/"
+          className="flex items-center gap-2 shrink-0 min-w-0 py-1.5 pr-2 text-sidebar-foreground hover:text-sidebar-foreground/80 transition-colors"
+        >
+          {logo && logo.trim() ? (
+            <img
+              src={logo}
+              alt={title || 'Logo'}
+              className="h-5 w-auto max-h-6 object-contain app-bar-logo m-1.5"
+            />
+          ) : title ? (
+            <span className="text-sm font-semibold truncate">{title}</span>
+          ) : null}
+        </Link>
 
-            {/* Start links: select menu (includes synthetic Homepage when nav has no "/" path) */}
-            {displayStartItems.length > 0 && (
-              <Select
-                className="h-8 max-w-[200px] text-sm leading-tight py-1.5 border-sidebar-border bg-sidebar-background"
-                value={currentPathPrefix}
-                onChange={(e) => {
-                  const path = e.target.value;
-                  if (path) {
-                    navigate(path.startsWith('/') ? path : `/${path}`);
-                  }
-                }}
+        {/* Start links: select menu (includes synthetic Homepage when nav has no "/" path) */}
+        {displayStartItems.length > 0 && (
+          <Select
+            className="h-8 max-w-[200px] text-sm leading-tight py-1.5 border-sidebar-border bg-sidebar-background"
+            value={currentPathPrefix}
+            onChange={(e) => {
+              const path = e.target.value;
+              if (path) {
+                navigate(path.startsWith('/') ? path : `/${path}`);
+              }
+            }}
+          >
+            {displayStartItems.map((item) => (
+              <option
+                key={item.path || 'root'}
+                value={getNavPathPrefix(item)}
               >
-                {displayStartItems.map((item) => (
-                  <option
-                    key={item.path || 'root'}
-                    value={getNavPathPrefix(item)}
-                  >
-                    {resolveNavLabel(item.label, currentLanguage) || item.path || 'Home'}
-                  </option>
-                ))}
-              </Select>
-            )}
+                {resolveNavLabel(item.label, currentLanguage) || item.path || 'Home'}
+              </option>
+            ))}
+          </Select>
+        )}
 
-            <div className="flex-1 min-w-0" />
+        <div className="flex-1 min-w-0" />
 
-            {/* End links: icon-only or first letter + tooltip */}
-            {endNavItems.length > 0 && (
-              <TooltipProvider
-                delayDuration={200}
-                skipDelayDuration={0}
-              >
-                <div className="flex items-center gap-0.5 shrink-0">
-                  {endNavItems.map((item) => (
-                    <TopBarEndItem
-                      key={item.path}
-                      item={item}
-                      label={resolveNavLabel(item.label, currentLanguage) || item.path || ''}
-                      activePathPrefix={activePathPrefix}
-                    />
-                  ))}
-                </div>
-              </TooltipProvider>
-            )}
-          </header>
+        {/* End links: icon-only or first letter + tooltip */}
+        {endNavItems.length > 0 && (
+          <TooltipProvider
+            delayDuration={200}
+            skipDelayDuration={0}
+          >
+            <div className="flex items-center gap-0.5 shrink-0">
+              {endNavItems.map((item) => (
+                <TopBarEndItem
+                  key={item.path}
+                  item={item}
+                  label={resolveNavLabel(item.label, currentLanguage) || item.path || ''}
+                  activePathPrefix={activePathPrefix}
+                />
+              ))}
+            </div>
+          </TooltipProvider>
+        )}
+      </header>
 
-          <main className="flex-1 flex flex-col overflow-auto min-h-0">
-            <Outlet />
-          </main>
-        </div>
-      </OverlayShell>
-    </LayoutProviders>
+      <main className="flex-1 flex flex-col overflow-auto min-h-0">
+        <Outlet />
+      </main>
+    </div>
   );
 }

package/src/features/layouts/{FullscreenLayout.tsx → fullscreen/FullscreenLayout.tsx}

@@ -1,10 +1,8 @@
 import { useMemo, useEffect } from 'react';
 import { Outlet, useLocation } from 'react-router';
 import { useTranslation } from 'react-i18next';
-import type { NavigationItem, NavigationGroup } from '../config/types';
-import { flattenNavigationItems } from './utils';
-import { LayoutProviders } from './LayoutProviders';
-import { OverlayShell } from './OverlayShell';
+import type { NavigationItem, NavigationGroup } from '../../config/types';
+import { flattenNavigationItems } from '../utils';
 
 interface FullscreenLayoutProps {
   title?: string;
@@ -44,12 +42,8 @@ export function FullscreenLayout({ title, navigation }: FullscreenLayoutProps) {
   }, [location.pathname, title, navigationItems, currentLanguage]);
 
   return (
-    <LayoutProviders>
-      <OverlayShell navigationItems={navigationItems}>
-        <main className="flex flex-col w-full h-screen overflow-hidden bg-background">
-          <Outlet />
-        </main>
-      </OverlayShell>
-    </LayoutProviders>
+    <main className="flex flex-col w-full h-screen overflow-hidden bg-background">
+      <Outlet />
+    </main>
   );
 }

package/src/features/layouts/sidebar/BottomNavItem.tsx

@@ -0,0 +1,88 @@
+import { Link } from 'react-router';
+import { shellui } from '@shellui/sdk';
+import type { NavigationItem } from '../../config/types';
+import { cn } from '../../../lib/utils';
+import { getNavPathPrefix } from '../utils';
+
+export function BottomNavItem({
+  item,
+  label,
+  isActive,
+  iconSrc,
+  applyIconTheme,
+}: {
+  item: NavigationItem;
+  label: string;
+  isActive: boolean;
+  iconSrc: string | null;
+  applyIconTheme: boolean;
+}) {
+  const pathPrefix = getNavPathPrefix(item);
+  const content = (
+    <span className="flex flex-col items-center justify-center gap-1 w-full min-w-0 max-w-full overflow-hidden">
+      {iconSrc ? (
+        <img
+          src={iconSrc}
+          alt=""
+          className={cn(
+            'size-4 shrink-0 rounded-sm object-cover',
+            applyIconTheme && 'opacity-90 dark:opacity-100 dark:invert',
+          )}
+        />
+      ) : (
+        <span className="size-4 shrink-0 rounded-sm bg-muted" />
+      )}
+      <span className="text-[11px] leading-tight truncate w-full min-w-0 text-center block">
+        {label}
+      </span>
+    </span>
+  );
+  const baseClass = cn(
+    'flex flex-col items-center justify-center rounded-md py-1.5 px-2 min-w-0 max-w-full transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+    isActive
+      ? 'bg-accent text-accent-foreground [&_span]:text-accent-foreground'
+      : 'text-muted-foreground hover:bg-accent/50 hover:text-accent-foreground [&_span]:inherit',
+  );
+  if (item.openIn === 'modal') {
+    return (
+      <button
+        type="button"
+        onClick={() => shellui.openModal(item.url)}
+        className={baseClass}
+      >
+        {content}
+      </button>
+    );
+  }
+  if (item.openIn === 'drawer') {
+    return (
+      <button
+        type="button"
+        onClick={() => shellui.openDrawer({ url: item.url, position: item.drawerPosition })}
+        className={baseClass}
+      >
+        {content}
+      </button>
+    );
+  }
+  if (item.openIn === 'external') {
+    return (
+      <a
+        href={item.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={baseClass}
+      >
+        {content}
+      </a>
+    );
+  }
+  return (
+    <Link
+      to={pathPrefix}
+      className={baseClass}
+    >
+      {content}
+    </Link>
+  );
+}

package/src/features/layouts/sidebar/MobileBottomNav.tsx

@@ -0,0 +1,168 @@
+import { Link, useLocation } from 'react-router';
+import { useMemo, useEffect, useState, useRef, useLayoutEffect } from 'react';
+import type { NavigationItem } from '../../config/types';
+import { cn } from '../../../lib/utils';
+import { Z_INDEX } from '../../../lib/z-index';
+import {
+  getActivePathPrefix,
+  getNavPathPrefix,
+  resolveLocalizedString as resolveNavLabel,
+  HOMEPAGE_NAV_ITEM,
+} from '../utils';
+import {
+  getExternalFaviconUrl,
+  isAppIcon,
+  BOTTOM_NAV_SLOT_WIDTH,
+  BOTTOM_NAV_GAP,
+  BOTTOM_NAV_PX,
+  BOTTOM_NAV_MAX_SLOTS,
+} from './sidebarUtils';
+import { BottomNavItem } from './BottomNavItem';
+import { CaretUpIcon, CaretDownIcon, HomeIcon } from './SidebarIcons';
+
+/** Mobile bottom nav: optional Home + nav items; More only when not all fit. Dynamic from width. */
+export function MobileBottomNav({
+  items,
+  currentLanguage,
+  showHomeButton,
+}: {
+  items: NavigationItem[];
+  currentLanguage: string;
+  showHomeButton: boolean;
+}) {
+  const location = useLocation();
+  const [expanded, setExpanded] = useState(false);
+  const navRef = useRef<HTMLElement>(null);
+  const [rowWidth, setRowWidth] = useState(0);
+
+  const activePathPrefix = useMemo(
+    () => getActivePathPrefix(location.pathname, items),
+    [location.pathname, items],
+  );
+
+  useLayoutEffect(() => {
+    const el = navRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      const w = entries[0]?.contentRect.width ?? 0;
+      setRowWidth(w);
+    });
+    ro.observe(el);
+    setRowWidth(el.getBoundingClientRect().width);
+    return () => ro.disconnect();
+  }, []);
+
+  const { rowItems, overflowItems, hasMore } = useMemo(() => {
+    const list = items.slice();
+    const contentWidth = Math.max(0, rowWidth - BOTTOM_NAV_PX * 2);
+    const slotTotal = BOTTOM_NAV_SLOT_WIDTH + BOTTOM_NAV_GAP;
+    const computedSlots =
+      rowWidth > 0 ? Math.floor((contentWidth + BOTTOM_NAV_GAP) / slotTotal) : 5;
+    const totalSlots = Math.min(Math.max(0, computedSlots), BOTTOM_NAV_MAX_SLOTS);
+    const slotsForNav = showHomeButton ? totalSlots - 1 : totalSlots;
+    const allFit = list.length <= slotsForNav;
+    const maxInRow = allFit
+      ? list.length
+      : Math.max(0, showHomeButton ? totalSlots - 2 : totalSlots - 1);
+    const row = list.slice(0, maxInRow);
+    const rowPaths = new Set(row.map((i) => i.path));
+    const overflow = list.filter((item) => !rowPaths.has(item.path));
+    return {
+      rowItems: row,
+      overflowItems: overflow,
+      hasMore: overflow.length > 0,
+    };
+  }, [items, rowWidth, showHomeButton]);
+
+  useEffect(() => {
+    setExpanded(false);
+  }, [location.pathname]);
+
+  const renderItem = (item: NavigationItem, index: number) => {
+    const pathPrefix = getNavPathPrefix(item);
+    const isOverlayOrExternal =
+      item.openIn === 'modal' || item.openIn === 'drawer' || item.openIn === 'external';
+    const isActive = !isOverlayOrExternal && pathPrefix === activePathPrefix;
+    const label = resolveNavLabel(item.label, currentLanguage);
+    const faviconUrl =
+      item.openIn === 'external' && !item.icon ? getExternalFaviconUrl(item.url) : null;
+    const iconSrc = item.icon ?? faviconUrl ?? null;
+    const applyIconTheme = iconSrc ? isAppIcon(iconSrc) : false;
+    return (
+      <BottomNavItem
+        key={`${item.path}-${item.url}-${index}`}
+        item={item}
+        label={label}
+        isActive={isActive}
+        iconSrc={iconSrc}
+        applyIconTheme={applyIconTheme}
+      />
+    );
+  };
+
+  return (
+    <nav
+      ref={navRef}
+      className="fixed bottom-0 left-0 right-0 z-[9999] md:hidden border-t border-sidebar-border bg-sidebar-background overflow-hidden pt-2"
+      style={{
+        zIndex: Z_INDEX.SIDEBAR_TRIGGER,
+        paddingBottom: 'calc(0.5rem + env(safe-area-inset-bottom, 0px))',
+      }}
+    >
+      <div className="flex flex-row flex-nowrap items-center justify-center gap-1 px-3 overflow-x-hidden">
+        {showHomeButton && (
+          <Link
+            to="/"
+            className={cn(
+              'flex flex-col items-center justify-center gap-1 rounded-md py-1.5 px-2 min-w-0 transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+              location.pathname === '/' || location.pathname === ''
+                ? 'bg-sidebar-accent text-sidebar-accent-foreground [&_span]:text-sidebar-accent-foreground'
+                : 'text-sidebar-foreground/80 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground [&_span]:inherit',
+            )}
+            aria-label={resolveNavLabel(HOMEPAGE_NAV_ITEM.label, currentLanguage) || 'Home'}
+          >
+            <span className="size-4 shrink-0 flex items-center justify-center [&_svg]:text-current">
+              <HomeIcon className="size-4" />
+            </span>
+            <span className="text-[11px] leading-tight">
+              {resolveNavLabel(HOMEPAGE_NAV_ITEM.label, currentLanguage) || 'Home'}
+            </span>
+          </Link>
+        )}
+        {rowItems.map((item, i) => renderItem(item, i))}
+        {hasMore && (
+          <button
+            type="button"
+            onClick={() => setExpanded((e) => !e)}
+            className={cn(
+              'flex flex-col items-center justify-center gap-1 rounded-md py-1.5 px-2 min-w-0 transition-colors cursor-pointer',
+              'text-muted-foreground hover:bg-accent/50 hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+            )}
+            aria-expanded={expanded}
+            aria-label={expanded ? 'Show less' : 'Show more'}
+          >
+            <span className="size-4 shrink-0 flex items-center justify-center">
+              {expanded ? <CaretDownIcon className="size-4" /> : <CaretUpIcon className="size-4" />}
+            </span>
+            <span className="text-[11px] leading-tight">{expanded ? 'Less' : 'More'}</span>
+          </button>
+        )}
+      </div>
+
+      <div
+        className={cn(
+          'grid transition-[grid-template-rows] duration-300 ease-out',
+          expanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+        )}
+      >
+        <div className="min-h-0 overflow-hidden">
+          <div className="px-4 pt-3 pb-2 border-t border-sidebar-border/50 mt-1">
+            <div className="grid grid-cols-5 gap-2 justify-items-center max-w-xs mx-auto">
+              {expanded ? overflowItems.map((item, i) => renderItem(item, i)) : null}
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}