@shellui/core 0.2.0-beta.0 → 0.2.0-beta.1

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

@@ -0,0 +1,93 @@
+import { cn } from '../../../lib/utils';
+
+/** Inline SVG: external-link icon. Bundled so consumers don't need to serve static SVGs. */
+export function ExternalLinkIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn('shrink-0', className)}
+      aria-hidden
+    >
+      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+      <polyline points="15 3 21 3 21 9" />
+      <line
+        x1="10"
+        y1="14"
+        x2="21"
+        y2="3"
+      />
+    </svg>
+  );
+}
+
+/** Caret up: expand (show second line). */
+export function CaretUpIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn('shrink-0', className)}
+      aria-hidden
+    >
+      <path d="m18 15-6-6-6 6" />
+    </svg>
+  );
+}
+
+/** Caret down: collapse (hide second line). */
+export function CaretDownIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn('shrink-0', className)}
+      aria-hidden
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  );
+}
+
+/** Home icon for mobile bottom bar (same as sidebar logo action). */
+export function HomeIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn('shrink-0', className)}
+      aria-hidden
+    >
+      <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+      <polyline points="9 22 9 12 15 12 15 22" />
+    </svg>
+  );
+}

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

@@ -0,0 +1,48 @@
+import { Link } from 'react-router';
+import type { NavigationItem, NavigationGroup } from '../../config/types';
+import { SidebarHeader, SidebarContent, SidebarFooter } from '../../../components/ui/sidebar';
+import { NavigationContent } from './NavigationContent';
+
+/** Reusable sidebar inner: header, main nav, footer. Used in desktop Sidebar and mobile Drawer. */
+export function SidebarInner({
+  title,
+  logo,
+  startNav,
+  endItems,
+}: {
+  title?: string;
+  logo?: string;
+  startNav: (NavigationItem | NavigationGroup)[];
+  endItems: (NavigationItem | NavigationGroup)[];
+}) {
+  return (
+    <>
+      <SidebarHeader className="border-b border-sidebar-border pb-4">
+        {(title || logo) && (
+          <Link
+            to="/"
+            className="flex items-center pl-1 pr-3 py-2 text-lg font-semibold text-sidebar-foreground hover:text-sidebar-foreground/80 transition-colors"
+          >
+            {logo && logo.trim() ? (
+              <img
+                src={logo}
+                alt={title || 'Logo'}
+                className="h-5 w-auto shrink-0 object-contain sidebar-logo"
+              />
+            ) : title ? (
+              <span className="leading-none">{title}</span>
+            ) : null}
+          </Link>
+        )}
+      </SidebarHeader>
+      <SidebarContent className="gap-1">
+        <NavigationContent navigation={startNav} />
+      </SidebarContent>
+      {endItems.length > 0 && (
+        <SidebarFooter>
+          <NavigationContent navigation={endItems} />
+        </SidebarFooter>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,86 @@
+import { Outlet } from 'react-router';
+import { useMemo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Sidebar } from '../../../components/ui/sidebar';
+import { cn } from '../../../lib/utils';
+import {
+  filterNavigationByViewport,
+  filterNavigationForSidebar,
+  flattenNavigationItems,
+  resolveLocalizedString as resolveLocalizedLabel,
+  splitNavigationByPosition,
+} from '../utils';
+import { SidebarInner } from './SidebarInner';
+import { MobileBottomNav } from './MobileBottomNav';
+import type { SidebarLayoutProps } from './types';
+import { useNavigationItems } from '../../../routes/hooks/useNavigationItems';
+
+const SidebarLayoutContent = ({ title, logo, navigation }: SidebarLayoutProps) => {
+  const { i18n } = useTranslation();
+  const { navigationItem, rootItem } = useNavigationItems();
+
+  const currentLanguage = useMemo(() => {
+    return i18n.language || 'en';
+  }, [i18n]);
+
+  const { startNav, endItems, mobileNavItems } = useMemo(() => {
+    const desktopNav = filterNavigationByViewport(navigation, 'desktop');
+    const mobileNav = filterNavigationByViewport(navigation, 'mobile');
+    const { start, end } = splitNavigationByPosition(desktopNav);
+    const mobileFlat = flattenNavigationItems(mobileNav);
+
+    return {
+      startNav: filterNavigationForSidebar(start),
+      endItems: end,
+      mobileNavItems: mobileFlat,
+    };
+  }, [navigation]);
+
+  useEffect(() => {
+    if (!title) return;
+    if (navigationItem) {
+      const label = resolveLocalizedLabel(navigationItem.label, currentLanguage);
+      document.title = `${label} | ${title}`;
+    } else {
+      document.title = title;
+    }
+  }, [navigationItem, title, currentLanguage]);
+
+  return (
+    <div>
+      <div className="flex h-screen overflow-hidden">
+        <Sidebar className={cn('hidden md:flex shrink-0')}>
+          <SidebarInner
+            title={title}
+            logo={logo}
+            startNav={startNav}
+            endItems={endItems}
+          />
+        </Sidebar>
+
+        <main className="flex-1 flex flex-col overflow-hidden bg-background relative min-w-0">
+          <div className="flex-1 flex flex-col overflow-auto pb-16 md:pb-0">
+            <Outlet />
+          </div>
+        </main>
+      </div>
+
+      <MobileBottomNav
+        items={mobileNavItems}
+        currentLanguage={currentLanguage}
+        showHomeButton={!rootItem}
+      />
+    </div>
+  );
+};
+
+export function SidebarLayout({ title, appIcon, logo, navigation }: SidebarLayoutProps) {
+  return (
+    <SidebarLayoutContent
+      title={title}
+      appIcon={appIcon}
+      logo={logo}
+      navigation={navigation}
+    />
+  );
+}

package/src/features/layouts/sidebar/sidebarUtils.ts

@@ -0,0 +1,23 @@
+/** DuckDuckGo favicon URL for a given page URL (used when openIn === 'external' and no icon is set). */
+export function getExternalFaviconUrl(url: string): string | null {
+  try {
+    const parsed = new URL(url);
+    const hostname = parsed.hostname;
+    if (!hostname) return null;
+    return `https://icons.duckduckgo.com/ip3/${hostname}.ico`;
+  } catch {
+    return null;
+  }
+}
+
+/** Approximate width per slot (icon + label + padding) and gap for dynamic slot count. */
+export const BOTTOM_NAV_SLOT_WIDTH = 64;
+export const BOTTOM_NAV_GAP = 4;
+export const BOTTOM_NAV_PX = 12;
+/** Max slots in the row (Home + nav + optional More) to avoid overflow/duplicated wrap. */
+export const BOTTOM_NAV_MAX_SLOTS = 6;
+
+/** True when the icon is a local app icon (/icons/); external images (avatars, favicons) are shown as-is. */
+export function isAppIcon(src: string): boolean {
+  return src.startsWith('/icons/');
+}

package/src/features/layouts/sidebar/types.ts

@@ -0,0 +1,8 @@
+import type { NavigationItem, NavigationGroup } from '../../config/types';
+
+export interface SidebarLayoutProps {
+  title?: string;
+  appIcon?: string;
+  logo?: string;
+  navigation: (NavigationItem | NavigationGroup)[];
+}

package/src/features/layouts/utils.ts

@@ -2,7 +2,7 @@ import type { NavigationItem, NavigationGroup, LocalizedString } from '../config
 
 /** Path prefix for a nav item: "/" for root (path '' or '/'), otherwise "/{path}". */
 export function getNavPathPrefix(item: NavigationItem): string {
-  return item.path === '/' || item.path === '' ? '/' : `/${item.path}`;
+  return item.path === '' ? '/' : `/${item.path}`;
 }
 
 /** Whether a URL string uses hash-based routing (e.g. contains /#/). */