@tribe-nest/forge 3.60.0 → 3.61.0

package/src/ui/styled/app/AppBar.tsx

@@ -0,0 +1,298 @@
+import { useContext, useEffect, useState, type CSSProperties, type ReactNode } from "react";
+import {
+  BookOpen,
+  Briefcase,
+  CalendarDays,
+  ChevronRight,
+  Home,
+  Menu,
+  MessageSquare,
+  ShoppingBag,
+  Users,
+  type LucideIcon,
+} from "lucide-react";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { useForgeT } from "../../../i18n";
+import { PublicAuthContext } from "../../../contexts/PublicAuthContext";
+import { resolveAppHomeHref, useSiteApp } from "../../../data/queries/useSiteApp";
+import { useNotificationUnreadCount } from "../../../data/queries/useNotifications";
+import { buildAppBar, type AppBarItem, type AppBarKey } from "../../headless/siteApp/appBar";
+import { CommunitySheet } from "../communities/shared";
+import { AppPrompts } from "./AppPrompts";
+
+/** Literal keys, so the translation spec can see every one of them. */
+const LABEL_KEYS: Record<AppBarKey, string> = {
+  home: "forge.app_bar.home",
+  communities: "forge.app_bar.communities",
+  portal: "forge.app_bar.portal",
+  inbox: "forge.app_bar.inbox",
+  events: "forge.app_bar.events",
+  courses: "forge.app_bar.courses",
+  shop: "forge.app_bar.shop",
+};
+
+const ICONS: Record<AppBarKey, LucideIcon> = {
+  home: Home,
+  communities: Users,
+  portal: Briefcase,
+  inbox: MessageSquare,
+  events: CalendarDays,
+  courses: BookOpen,
+  shop: ShoppingBag,
+};
+
+/** Tailwind's `lg`: from here up the site's own navigation is enough, and the bar hides. */
+const BAR_BREAKPOINT = 1024;
+/** The bar's height above the safe area. */
+export const APP_BAR_HEIGHT = 56;
+
+export interface AppBarProps {
+  /** Current location pathname (drives the active tab). Read from the window when not given. */
+  currentPath?: string;
+  /**
+   * SPA navigation adapter. Defaults to a full-page `window.location` visit.
+   * Pass your router's navigate for client-side transitions.
+   */
+  navigate?: (href: string) => void;
+  /** Also host the app's install and notification prompts. Default true. */
+  prompts?: boolean;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * The site app's bottom bar: Home, the creator's chosen items (at most three),
+ * then More, a bottom sheet with every other destination. Below `lg` only,
+ * fixed to the bottom, 56px plus the phone's safe area, and it leaves a spacer
+ * of the same height so the page's last line is never under it.
+ *
+ * Home follows the Home rule (`useAppHomeHref`): the creator's start page when
+ * they chose one. Drop `<AppBar />` onto a custom start page and it behaves
+ * exactly as it does on `/i/app`. The bar publishes its height as
+ * `--forge-bottom-bar-height` on the root, so the site's chat bubble sits above
+ * it, the same contract `MemberHomeLayout` keeps inside a community.
+ */
+export function AppBar({ currentPath, navigate, prompts = true, className, style }: AppBarProps) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const auth = useContext(PublicAuthContext);
+  const signedIn = !!auth?.user;
+  const { data } = useSiteApp();
+  const [path, setPath] = useState<string | null>(currentPath ?? null);
+  const [moreOpen, setMoreOpen] = useState(false);
+  const go = navigate ?? ((href: string) => window.location.assign(href));
+
+  useEffect(() => {
+    if (currentPath !== undefined) setPath(currentPath);
+    else if (typeof window !== "undefined") setPath(window.location.pathname);
+  }, [currentPath]);
+
+  const model = buildAppBar({ barItems: data?.barItems, homeHref: resolveAppHomeHref(data), currentPath: path });
+  const inboxShown = model.bar.some((item) => item.key === "inbox");
+  const { data: unread } = useNotificationUnreadCount(signedIn && inboxShown);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const root = document.documentElement;
+    const narrow = window.matchMedia(`(max-width: ${BAR_BREAKPOINT - 1}px)`);
+    const apply = () =>
+      narrow.matches
+        ? root.style.setProperty("--forge-bottom-bar-height", `${APP_BAR_HEIGHT}px`)
+        : root.style.removeProperty("--forge-bottom-bar-height");
+    apply();
+    narrow.addEventListener?.("change", apply);
+    return () => {
+      narrow.removeEventListener?.("change", apply);
+      root.style.removeProperty("--forge-bottom-bar-height");
+    };
+  }, []);
+
+  const label = (item: AppBarItem) => tr(LABEL_KEYS[item.key]);
+
+  return (
+    <>
+      {/* The page ends above the bar, not under it. */}
+      <div
+        aria-hidden
+        data-testid="app-bar-spacer"
+        className="fg:lg:hidden"
+        style={{ height: `calc(${APP_BAR_HEIGHT}px + env(safe-area-inset-bottom))` }}
+      />
+      <nav
+        aria-label={tr("forge.app_bar.nav_label")}
+        data-testid="app-bar"
+        className={`fg:fixed fg:inset-x-0 fg:bottom-0 fg:z-40 fg:flex fg:lg:hidden ${className ?? ""}`}
+        style={{
+          background: t.background,
+          borderTop: `1px solid ${t.border}`,
+          paddingBottom: "env(safe-area-inset-bottom)",
+          ...style,
+        }}
+      >
+        {model.bar.map((item) => {
+          const Icon = ICONS[item.key];
+          return (
+            <BarButton
+              key={item.key}
+              icon={<Icon size={20} aria-hidden />}
+              label={label(item)}
+              active={item.active}
+              href={item.href}
+              onGo={go}
+              badge={item.key === "inbox" ? (unread ?? 0) : 0}
+              testId={`app-bar-${item.key}`}
+            />
+          );
+        })}
+        <BarButton
+          icon={<Menu size={20} aria-hidden />}
+          label={tr("forge.app_bar.more")}
+          active={model.moreActive}
+          onPress={() => setMoreOpen(true)}
+          testId="app-bar-more"
+        />
+      </nav>
+
+      <CommunitySheet
+        open={moreOpen}
+        onOpenChange={setMoreOpen}
+        testId="app-more-sheet"
+        title={tr("forge.app_bar.more_title")}
+        closeLabel={tr("forge.app_bar.aria_close")}
+      >
+        {model.more.map((item) => {
+          const Icon = ICONS[item.key];
+          return (
+            <a
+              key={item.key}
+              href={item.href}
+              data-testid={`app-more-${item.key}`}
+              aria-current={item.active ? "page" : undefined}
+              onClick={(event) => {
+                if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+                event.preventDefault();
+                setMoreOpen(false);
+                go(item.href);
+              }}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 12,
+                width: "100%",
+                padding: "12px 4px",
+                borderBottom: `1px solid ${t.border}`,
+                color: item.active ? t.primary : t.text,
+                fontFamily: t.fontFamily,
+                fontSize: 16,
+                fontWeight: item.active ? 700 : 500,
+                textDecoration: "none",
+                boxSizing: "border-box",
+              }}
+            >
+              <Icon size={18} aria-hidden style={{ flexShrink: 0 }} />
+              <span style={{ flex: 1 }}>{label(item)}</span>
+              <ChevronRight size={16} aria-hidden style={{ color: t.muted }} />
+            </a>
+          );
+        })}
+      </CommunitySheet>
+
+      {prompts ? <AppPrompts /> : null}
+    </>
+  );
+}
+
+function BarButton({
+  icon,
+  label,
+  active,
+  href,
+  onGo,
+  onPress,
+  badge = 0,
+  testId,
+}: {
+  icon: ReactNode;
+  label: string;
+  active: boolean;
+  href?: string;
+  onGo?: (href: string) => void;
+  onPress?: () => void;
+  badge?: number;
+  testId: string;
+}) {
+  const t = useThemeTokens();
+  const style: CSSProperties = {
+    flex: 1,
+    minWidth: 0,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 3,
+    padding: "8px 2px 7px",
+    minHeight: APP_BAR_HEIGHT,
+    background: "transparent",
+    border: "none",
+    color: active ? t.primary : t.muted,
+    fontFamily: t.fontFamily,
+    fontSize: 11,
+    fontWeight: active ? 700 : 500,
+    textDecoration: "none",
+    cursor: "pointer",
+    boxSizing: "border-box",
+  };
+  const content = (
+    <>
+      <span style={{ position: "relative", display: "inline-flex" }}>
+        {icon}
+        {badge > 0 ? (
+          <span
+            data-testid={`${testId}-badge`}
+            style={{
+              position: "absolute",
+              top: -4,
+              right: -8,
+              minWidth: 16,
+              height: 16,
+              padding: "0 4px",
+              borderRadius: 8,
+              background: t.primary,
+              color: t.textPrimary,
+              fontSize: 10,
+              fontWeight: 700,
+              lineHeight: "16px",
+              textAlign: "center",
+              boxSizing: "border-box",
+            }}
+          >
+            {badge > 99 ? "99+" : badge}
+          </span>
+        ) : null}
+      </span>
+      <span style={{ maxWidth: "100%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{label}</span>
+    </>
+  );
+  if (href && onGo) {
+    return (
+      <a
+        href={href}
+        data-testid={testId}
+        aria-current={active ? "page" : undefined}
+        onClick={(event) => {
+          if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+          event.preventDefault();
+          onGo(href);
+        }}
+        style={style}
+      >
+        {content}
+      </a>
+    );
+  }
+  return (
+    <button type="button" data-testid={testId} aria-haspopup="dialog" aria-pressed={active} onClick={onPress} style={style}>
+      {content}
+    </button>
+  );
+}