@nocobase/portal-template-default 1.0.0

package/src/components/app-shell/breadcrumb.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { Fragment, useMemo } from "react";
+import { Home } from "lucide-react";
+import {
+  matchResourceFromRoute,
+  useBreadcrumb,
+  useLink,
+  useResourceParams,
+} from "@refinedev/core";
+import {
+  BreadcrumbSeparator as ShadcnBreadcrumbSeparator,
+  BreadcrumbItem as ShadcnBreadcrumbItem,
+  BreadcrumbList as ShadcnBreadcrumbList,
+  BreadcrumbPage as ShadcnBreadcrumbPage,
+  Breadcrumb as ShadcnBreadcrumb,
+} from "@/components/ui/breadcrumb";
+
+export function Breadcrumb() {
+  const Link = useLink();
+  const { breadcrumbs } = useBreadcrumb();
+  const { resources } = useResourceParams();
+  const rootRouteResource = matchResourceFromRoute("/", resources);
+
+  const breadCrumbItems = useMemo(() => {
+    const list: {
+      key: string;
+      href: string;
+      Component: React.ReactNode;
+    }[] = [];
+
+    list.push({
+      key: "breadcrumb-item-home",
+      href: rootRouteResource.matchedRoute ?? "/",
+      Component: (
+        <Link to={rootRouteResource.matchedRoute ?? "/"}>
+          {rootRouteResource?.resource?.meta?.icon ?? (
+            <Home className="h-4 w-4" />
+          )}
+        </Link>
+      ),
+    });
+
+    for (const { label, href } of breadcrumbs) {
+      list.push({
+        key: `breadcrumb-item-${label}`,
+        href: href ?? "",
+        Component: href ? <Link to={href}>{label}</Link> : <span>{label}</span>,
+      });
+    }
+
+    return list;
+  }, [breadcrumbs, Link, rootRouteResource]);
+
+  return (
+    <ShadcnBreadcrumb>
+      <ShadcnBreadcrumbList>
+        {breadCrumbItems.map((item, index) => {
+          if (index === breadCrumbItems.length - 1) {
+            return (
+              <ShadcnBreadcrumbPage key={item.key}>
+                {item.Component}
+              </ShadcnBreadcrumbPage>
+            );
+          }
+
+          return (
+            <Fragment key={item.key}>
+              <ShadcnBreadcrumbItem key={item.key}>
+                {item.Component}
+              </ShadcnBreadcrumbItem>
+              <ShadcnBreadcrumbSeparator />
+            </Fragment>
+          );
+        })}
+      </ShadcnBreadcrumbList>
+    </ShadcnBreadcrumb>
+  );
+}
+
+Breadcrumb.displayName = "Breadcrumb";

package/src/components/app-shell/document-title-handler.tsx

@@ -0,0 +1,169 @@
+import type { Action, IResourceItem } from "@refinedev/core";
+import {
+  useParsed,
+  useTranslate,
+  useUserFriendlyName,
+} from "@refinedev/core";
+import { useLayoutEffect } from "react";
+import { useLocation } from "react-router";
+
+export type ActionPrefixContext = {
+  id?: string;
+};
+
+export type ActionPrefix =
+  | string
+  | ((context: ActionPrefixContext) => string);
+
+export type DocumentTitleContext = {
+  action?: Action;
+  appName: string;
+  defaultTitle: string;
+  id?: string;
+  params?: Record<string, string | undefined>;
+  pathname?: string;
+  resource?: IResourceItem;
+  resourceName?: string;
+  separator: string;
+};
+
+export type DocumentTitleFormatter = (context: DocumentTitleContext) => string;
+
+export type DocumentTitleHandlerProps = {
+  actionPrefixes?: Partial<Record<Action, ActionPrefix>>;
+  appName?: string;
+  defaultTitle?: string;
+  formatTitle?: DocumentTitleFormatter;
+  separator?: string;
+};
+
+const defaultActionPrefixes = {
+  clone: ({ id }: ActionPrefixContext) => `#${id ?? ""} Clone `,
+  create: "Create new ",
+  edit: ({ id }: ActionPrefixContext) => `#${id ?? ""} Edit `,
+  list: "",
+  show: ({ id }: ActionPrefixContext) => `#${id ?? ""} Show `,
+} satisfies Partial<Record<Action, ActionPrefix>>;
+
+const safeTranslate = (
+  translate: ReturnType<typeof useTranslate>,
+  key: string,
+  defaultMessage?: string,
+  options?: Record<string, unknown>
+) => {
+  const translated = options
+    ? translate(key, options, defaultMessage)
+    : translate(key, defaultMessage);
+
+  const fallback = defaultMessage ?? key;
+
+  if (translated === key || typeof translated === "undefined") {
+    return fallback;
+  }
+
+  return translated;
+};
+
+const resolveActionPrefix = (
+  actionPrefix: ActionPrefix | undefined,
+  context: ActionPrefixContext
+) => {
+  if (typeof actionPrefix === "function") {
+    return actionPrefix(context);
+  }
+
+  return actionPrefix ?? "";
+};
+
+export function DocumentTitleHandler({
+  actionPrefixes,
+  appName = "NocoBase",
+  defaultTitle = appName,
+  formatTitle,
+  separator = " | ",
+}: DocumentTitleHandlerProps) {
+  const location = useLocation();
+  const { action, id, params, pathname, resource } = useParsed();
+  const translate = useTranslate();
+  const getUserFriendlyName = useUserFriendlyName();
+
+  useLayoutEffect(() => {
+    const identifier = resource?.identifier ?? resource?.name;
+    const resourceNameFallback =
+      resource?.meta?.label ??
+      (identifier
+        ? getUserFriendlyName(
+            identifier,
+            action === "list" ? "plural" : "singular"
+          )
+        : undefined);
+
+    const resourceName = resource?.name
+      ? safeTranslate(
+          translate,
+          `${resource.name}.${resource.name}`,
+          resourceNameFallback
+        )
+      : resourceNameFallback;
+
+    const context: DocumentTitleContext = {
+      action,
+      appName,
+      defaultTitle,
+      id: typeof id === "undefined" ? undefined : `${id}`,
+      params,
+      pathname,
+      resource: resource
+        ? {
+            ...resource,
+            meta: {
+              ...resource.meta,
+              label: resourceName,
+            },
+          }
+        : undefined,
+      resourceName,
+      separator,
+    };
+
+    if (formatTitle) {
+      document.title = formatTitle(context);
+      return;
+    }
+
+    if (!action || !identifier || !resourceName) {
+      document.title = defaultTitle;
+      return;
+    }
+
+    const mergedActionPrefixes = {
+      ...defaultActionPrefixes,
+      ...actionPrefixes,
+    };
+    const prefix = resolveActionPrefix(mergedActionPrefixes[action], context);
+    const fallbackTitle = `${prefix}${resourceName}${separator}${appName}`;
+
+    document.title = safeTranslate(
+      translate,
+      `documentTitle.${identifier}.${action}`,
+      fallbackTitle,
+      { id: context.id }
+    );
+  }, [
+    action,
+    actionPrefixes,
+    appName,
+    defaultTitle,
+    formatTitle,
+    getUserFriendlyName,
+    id,
+    location,
+    params,
+    pathname,
+    resource,
+    separator,
+    translate,
+  ]);
+
+  return null;
+}

package/src/components/app-shell/error-component.tsx

@@ -0,0 +1,134 @@
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { useGo, useResourceParams, useTranslate } from "@refinedev/core";
+import { ChevronLeft, InfoIcon } from "lucide-react";
+import React, { useEffect, useState } from "react";
+
+/**
+ * When the app is navigated to a non-existent route, refine shows a default error page.
+ * A custom error component can be used for this error page.
+ *
+ * @see {@link https://refine.dev/docs/packages/documentation/routers/} for more details.
+ */
+export function ErrorComponent() {
+  const [errorMessage, setErrorMessage] = useState<string>();
+
+  const translate = useTranslate();
+  const go = useGo();
+
+  const { resource, action } = useResourceParams();
+
+  useEffect(() => {
+    if (resource && action) {
+      setErrorMessage(
+        translate(
+          "pages.error.info",
+          {
+            action: action,
+            resource: resource?.name,
+          },
+          `You may have forgotten to add the "${action}" component to "${resource?.name}" resource.`
+        )
+      );
+    }
+  }, [resource, action, translate]);
+
+  return (
+    <div
+      className={cn(
+        "flex",
+        "items-center",
+        "justify-center",
+        "bg-background",
+        "my-auto"
+      )}
+    >
+      <div className={cn("text-center", "space-y-8")}>
+        <div className={cn("flex", "justify-center")}>
+          <svg
+            width="199"
+            height="73"
+            viewBox="0 0 199 73"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className={cn("w-48", "h-auto")}
+          >
+            <title>404 text</title>
+            <path
+              d="M0.293794 60.0909V45.3636L25.112 1.18182H43.2483L18.9756 44.8182V45.3636H60.4302V60.0909H0.293794ZM34.2483 71V55.7273L34.9302 49.1818V27.3636H51.9756V71H34.2483ZM98.983 72.9091C92.642 72.8864 87.1648 71.4205 82.5511 68.5114C77.9375 65.6023 74.3807 61.4091 71.8807 55.9318C69.3807 50.4545 68.142 43.8864 68.1648 36.2273C68.1875 28.5455 69.4375 22.0227 71.9148 16.6591C74.4148 11.2955 77.9602 7.21591 82.5511 4.42045C87.1648 1.625 92.642 0.22727 98.983 0.22727C105.324 0.22727 110.801 1.63636 115.415 4.45455C120.028 7.25 123.585 11.3295 126.085 16.6932C128.585 22.0568 129.824 28.5682 129.801 36.2273C129.801 43.9318 128.551 50.5227 126.051 56C123.551 61.4773 119.994 65.6705 115.381 68.5795C110.79 71.4659 105.324 72.9091 98.983 72.9091ZM98.983 57.5C102.256 57.5 104.938 55.7955 107.028 52.3864C109.142 48.9545 110.188 43.5682 110.165 36.2273C110.165 31.4318 109.688 27.5114 108.733 24.4659C107.778 21.4205 106.46 19.1705 104.778 17.7159C103.097 16.2386 101.165 15.5 98.983 15.5C95.7102 15.5 93.0398 17.1591 90.9716 20.4773C88.9034 23.7955 87.8466 29.0455 87.8011 36.2273C87.7784 41.1136 88.2443 45.1364 89.1989 48.2955C90.1534 51.4318 91.4716 53.75 93.1534 55.25C94.858 56.75 96.8011 57.5 98.983 57.5ZM138.209 60.0909V45.3636L163.027 1.18182H181.164L156.891 44.8182V45.3636H198.345V60.0909H138.209ZM172.164 71V55.7273L172.845 49.1818V27.3636H189.891V71H172.164Z"
+              fill="url(#paint0_linear_2672_10455)"
+            />
+            <defs>
+              <linearGradient
+                id="paint0_linear_2672_10455"
+                x1="99"
+                y1="-16"
+                x2="99"
+                y2="88"
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop stopColor="#D4D4D8" />
+                <stop offset="1" stopColor="#E4E4E7" stopOpacity="0.25" />
+              </linearGradient>
+            </defs>
+          </svg>
+        </div>
+
+        <div className={cn("space-y-4")}>
+          <h1 className={cn("text-2xl", "font-semibold", "text-foreground")}>
+            {translate("pages.error.title", "Page not found.")}
+          </h1>
+
+          <div
+            className={cn("flex", "items-center", "justify-center", "gap-2")}
+          >
+            <p className={cn("text-muted-foreground")}>
+              {translate(
+                "pages.error.description",
+                "The page you're looking for does not exist."
+              )}
+            </p>
+            {errorMessage && (
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger
+                    render={<InfoIcon
+                      className={cn(
+                        "h-4",
+                        "w-4",
+                        "text-muted-foreground",
+                        "cursor-help"
+                      )}
+                      data-testid="error-component-tooltip"
+                    />}
+                  />
+                  <TooltipContent>
+                    <p>{errorMessage}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            )}
+          </div>
+        </div>
+
+        <Button
+          onClick={() => {
+            go({ to: "/" });
+          }}
+          className={cn("flex", "items-center", "gap-2", "mx-auto")}
+        >
+          <ChevronLeft className={cn("h-4", "w-4")} />
+          {translate("pages.error.backHome", "Back to homepage")}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+ErrorComponent.displayName = "ErrorComponent";

package/src/components/app-shell/header.tsx

@@ -0,0 +1,127 @@
+import { useActiveAuthProvider, useLogout } from "@refinedev/core";
+import {
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuContent,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+import { DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { ThemeToggle } from "@/components/theme/theme-toggle";
+import { UserAvatar } from "@/components/app-shell/user-avatar";
+import { UserInfo } from "@/components/app-shell/user-info";
+import { useSidebar, SidebarTrigger } from "@/components/ui/sidebar";
+import { LogOutIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Brand } from "@/components/app-shell/brand";
+
+export const Header = () => {
+  const { isMobile } = useSidebar();
+
+  return <>{isMobile ? <MobileHeader /> : <DesktopHeader />}</>;
+};
+
+function DesktopHeader() {
+  return (
+    <header
+      className={cn(
+        "sticky",
+        "top-0",
+        "flex",
+        "h-16",
+        "shrink-0",
+        "items-center",
+        "gap-4",
+        "border-b",
+        "border-border/70",
+        "bg-background/80",
+        "px-4",
+        "justify-between",
+        "backdrop-blur-xl",
+        "z-40"
+      )}
+    >
+      <div className="flex items-center gap-3">
+        <SidebarTrigger className="size-9 rounded-xl text-muted-foreground hover:text-foreground" />
+        <div className="hidden h-5 w-px bg-border sm:block" />
+        <span className="hidden text-sm font-medium text-muted-foreground sm:block">
+          AI application workspace
+        </span>
+      </div>
+      <div className="flex items-center gap-2">
+        <ThemeToggle />
+        <UserDropdown />
+      </div>
+    </header>
+  );
+}
+
+function MobileHeader() {
+  const { isMobile } = useSidebar();
+
+  return (
+    <header
+      className={cn(
+        "sticky",
+        "top-0",
+        "flex",
+        "h-16",
+        "shrink-0",
+        "items-center",
+        "gap-2",
+        "border-b",
+        "border-border/70",
+        "bg-background/85",
+        "px-3",
+        "justify-between",
+        "backdrop-blur-xl",
+        "z-40"
+      )}
+    >
+      <SidebarTrigger
+        className={cn(
+          "size-9 rounded-xl text-muted-foreground",
+          !isMobile && "hidden"
+        )}
+      />
+      <Brand logoClassName="h-6" />
+      <ThemeToggle className={cn("size-9")} />
+    </header>
+  );
+}
+
+const UserDropdown = () => {
+  const { mutate: logout, isPending: isLoggingOut } = useLogout();
+
+  const authProvider = useActiveAuthProvider();
+
+  if (!authProvider?.getIdentity) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <UserAvatar />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-72 p-2">
+        <div className="px-2 py-2">
+          <UserInfo />
+        </div>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          className="mt-1 min-h-9 cursor-pointer gap-2 px-2 text-muted-foreground focus:text-foreground"
+          onClick={() => {
+            logout();
+          }}
+        >
+          <LogOutIcon />
+          <span>{isLoggingOut ? "Signing out..." : "Sign out"}</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+Header.displayName = "Header";
+MobileHeader.displayName = "MobileHeader";
+DesktopHeader.displayName = "DesktopHeader";

package/src/components/app-shell/layout.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { Header } from "@/components/app-shell/header";
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+import type { PropsWithChildren } from "react";
+import { Sidebar } from "./sidebar";
+
+export function Layout({ children }: PropsWithChildren) {
+  return (
+    <SidebarProvider>
+      <Sidebar />
+      <SidebarInset className="bg-muted/25">
+        <Header />
+        <main
+          className={cn(
+            "@container/main",
+            "mx-auto",
+            "max-w-[1600px]",
+            "relative",
+            "w-full",
+            "flex",
+            "flex-col",
+            "flex-1",
+            "px-4",
+            "py-5",
+            "md:p-6",
+            "lg:px-8",
+            "lg:py-7"
+          )}
+        >
+          {children}
+        </main>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}
+
+Layout.displayName = "Layout";

package/src/components/app-shell/loading-overlay.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import * as React from "react";
+import { Loader2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface LoadingOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+  loading?: boolean;
+  children: React.ReactNode;
+}
+
+export const LoadingOverlay = React.forwardRef<
+  HTMLDivElement,
+  LoadingOverlayProps
+>(({ className, loading = false, children, ...props }, ref) => {
+  if (!loading) return children;
+
+  return (
+    <div className="relative" ref={ref} {...props}>
+      {children}
+      <div
+        className={cn(
+          "absolute inset-0 z-50 flex items-center justify-center",
+          "bg-background/60",
+          className
+        )}
+      >
+        <div className="flex flex-col items-center gap-2">
+          <Loader2 className="h-8 w-8 animate-spin text-primary" />
+        </div>
+      </div>
+    </div>
+  );
+});
+
+LoadingOverlay.displayName = "LoadingOverlay";