@nocobase/portal-template-default 1.0.0 → 1.0.2

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

@@ -7,6 +7,8 @@ import {
   useBreadcrumb,
   useLink,
   useResourceParams,
+  useTranslate,
+  useUserFriendlyName,
 } from "@refinedev/core";
 import {
   BreadcrumbSeparator as ShadcnBreadcrumbSeparator,
@@ -15,11 +17,15 @@ import {
   BreadcrumbPage as ShadcnBreadcrumbPage,
   Breadcrumb as ShadcnBreadcrumb,
 } from "@/components/ui/breadcrumb";
+import { resolveTranslatableText } from "@/lib/i18n";
+import { getResourceLabel } from "@/components/resources/resource-label";
 
 export function Breadcrumb() {
   const Link = useLink();
   const { breadcrumbs } = useBreadcrumb();
   const { resources } = useResourceParams();
+  const translate = useTranslate();
+  const getUserFriendlyName = useUserFriendlyName();
   const rootRouteResource = matchResourceFromRoute("/", resources);
 
   const breadCrumbItems = useMemo(() => {
@@ -42,15 +48,45 @@ export function Breadcrumb() {
     });
 
     for (const { label, href } of breadcrumbs) {
+      const matchingResource = resources.find((resource) => {
+        const metaLabel = resource.meta?.label;
+        return (
+          label === metaLabel ||
+          label === resource.name ||
+          (href &&
+            [resource.list, resource.create, resource.edit, resource.show].some(
+              (route) => typeof route === "string" && route === href
+            ))
+        );
+      });
+      const displayLabel = matchingResource
+        ? getResourceLabel(
+            matchingResource,
+            "plural",
+            translate,
+            getUserFriendlyName
+          )
+        : resolveTranslatableText(label);
       list.push({
-        key: `breadcrumb-item-${label}`,
+        key: `breadcrumb-item-${displayLabel}`,
         href: href ?? "",
-        Component: href ? <Link to={href}>{label}</Link> : <span>{label}</span>,
+        Component: href ? (
+          <Link to={href}>{displayLabel}</Link>
+        ) : (
+          <span>{displayLabel}</span>
+        ),
       });
     }
 
     return list;
-  }, [breadcrumbs, Link, rootRouteResource]);
+  }, [
+    breadcrumbs,
+    getUserFriendlyName,
+    Link,
+    resources,
+    rootRouteResource,
+    translate,
+  ]);
 
   return (
     <ShadcnBreadcrumb>

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

@@ -1,19 +1,14 @@
 import type { Action, IResourceItem } from "@refinedev/core";
-import {
-  useParsed,
-  useTranslate,
-  useUserFriendlyName,
-} from "@refinedev/core";
+import { useParsed, useTranslate } from "@refinedev/core";
 import { useLayoutEffect } from "react";
 import { useLocation } from "react-router";
+import { useResourceLabel } from "@/components/resources/resource-label";
 
 export type ActionPrefixContext = {
   id?: string;
 };
 
-export type ActionPrefix =
-  | string
-  | ((context: ActionPrefixContext) => string);
+export type ActionPrefix = string | ((context: ActionPrefixContext) => string);
 
 export type DocumentTitleContext = {
   action?: Action;
@@ -85,19 +80,14 @@ export function DocumentTitleHandler({
   const location = useLocation();
   const { action, id, params, pathname, resource } = useParsed();
   const translate = useTranslate();
-  const getUserFriendlyName = useUserFriendlyName();
+  const identifier = resource?.identifier ?? resource?.name;
+  const resourceNameFallback = useResourceLabel(
+    resource,
+    action === "list" ? "plural" : "singular",
+    identifier
+  );
 
   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,
@@ -155,12 +145,13 @@ export function DocumentTitleHandler({
     appName,
     defaultTitle,
     formatTitle,
-    getUserFriendlyName,
     id,
+    identifier,
     location,
     params,
     pathname,
     resource,
+    resourceNameFallback,
     separator,
     translate,
   ]);

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

@@ -1,4 +1,8 @@
-import { useActiveAuthProvider, useLogout } from "@refinedev/core";
+import {
+  useActiveAuthProvider,
+  useLogout,
+  useTranslate,
+} from "@refinedev/core";
 import {
   DropdownMenu,
   DropdownMenuItem,
@@ -13,6 +17,7 @@ import { useSidebar, SidebarTrigger } from "@/components/ui/sidebar";
 import { LogOutIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Brand } from "@/components/app-shell/brand";
+import { extensionUserMenuItems } from "@/app/extensions";
 
 export const Header = () => {
   const { isMobile } = useSidebar();
@@ -21,6 +26,8 @@ export const Header = () => {
 };
 
 function DesktopHeader() {
+  const translate = useTranslate();
+
   return (
     <header
       className={cn(
@@ -44,7 +51,7 @@ function DesktopHeader() {
         <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
+          {translate("shell.workspace", "AI application workspace")}
         </span>
       </div>
       <div className="flex items-center gap-2">
@@ -84,13 +91,17 @@ function MobileHeader() {
         )}
       />
       <Brand logoClassName="h-6" />
-      <ThemeToggle className={cn("size-9")} />
+      <div className="flex shrink-0 items-center gap-1">
+        <ThemeToggle className="size-9" />
+        <UserDropdown />
+      </div>
     </header>
   );
 }
 
 const UserDropdown = () => {
   const { mutate: logout, isPending: isLoggingOut } = useLogout();
+  const translate = useTranslate();
 
   const authProvider = useActiveAuthProvider();
 
@@ -107,6 +118,9 @@ const UserDropdown = () => {
         <div className="px-2 py-2">
           <UserInfo />
         </div>
+        {extensionUserMenuItems.map(({ id, Component }) => (
+          <Component key={id} />
+        ))}
         <DropdownMenuSeparator />
         <DropdownMenuItem
           className="mt-1 min-h-9 cursor-pointer gap-2 px-2 text-muted-foreground focus:text-foreground"
@@ -115,7 +129,11 @@ const UserDropdown = () => {
           }}
         >
           <LogOutIcon />
-          <span>{isLoggingOut ? "Signing out..." : "Sign out"}</span>
+          <span>
+            {isLoggingOut
+              ? translate("auth.signingOut", "Signing out...")
+              : translate("auth.signOut", "Sign out")}
+          </span>
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

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

@@ -1,8 +1,8 @@
 "use client";
 
 import * as React from "react";
-import { Loader2 } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { LoadingState } from "@/components/app-shell/loading-state";
 
 interface LoadingOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
   loading?: boolean;
@@ -25,9 +25,7 @@ export const LoadingOverlay = React.forwardRef<
           className
         )}
       >
-        <div className="flex flex-col items-center gap-2">
-          <Loader2 className="h-8 w-8 animate-spin text-primary" />
-        </div>
+        <LoadingState />
       </div>
     </div>
   );

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

@@ -0,0 +1,15 @@
+import { Loader2 } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+export function LoadingState({ className }: { className?: string }) {
+  return (
+    <div
+      role="status"
+      className={cn("flex items-center justify-center", className)}
+    >
+      <Loader2 className="size-7 animate-spin text-primary" />
+      <span className="sr-only">Loading</span>
+    </div>
+  );
+}

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

@@ -4,6 +4,8 @@ import React from "react";
 import {
   useMenu,
   useLink,
+  useTranslate,
+  useUserFriendlyName,
   type TreeMenuItem,
 } from "@refinedev/core";
 import {
@@ -29,10 +31,17 @@ import { Button } from "@/components/ui/button";
 import { ChevronRight, ListIcon, ShieldCheck } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Brand } from "@/components/app-shell/brand";
+import { filterMenuItemsByAcl, useAclSnapshot } from "@/lib/nocobase/acl";
+import { getResourceLabel } from "@/components/resources/resource-label";
 
 export function Sidebar() {
   const { open } = useShadcnSidebar();
   const { menuItems, selectedKey } = useMenu();
+  const acl = useAclSnapshot();
+  const allowedMenuItems = React.useMemo(
+    () => filterMenuItemsByAcl(menuItems, acl),
+    [acl, menuItems]
+  );
 
   return (
     <ShadcnSidebar
@@ -55,7 +64,7 @@ export function Sidebar() {
           }
         )}
       >
-        {menuItems.map((item: TreeMenuItem) => (
+        {allowedMenuItems.map((item: TreeMenuItem) => (
           <SidebarItem
             key={item.key || item.name}
             item={item}
@@ -93,6 +102,7 @@ function SidebarItem({ item, selectedKey }: MenuItemProps) {
 function SidebarItemGroup({ item, selectedKey }: MenuItemProps) {
   const { children } = item;
   const { open } = useShadcnSidebar();
+  const displayName = useMenuItemLabel(item);
 
   return (
     <div className={cn("mt-2 border-t", "border-sidebar-border/70", "pt-4")}>
@@ -116,7 +126,7 @@ function SidebarItemGroup({ item, selectedKey }: MenuItemProps) {
           }
         )}
       >
-        {getDisplayName(item)}
+        {displayName}
       </span>
       {children && children.length > 0 && (
         <div className={cn("flex", "flex-col")}>
@@ -135,6 +145,7 @@ function SidebarItemGroup({ item, selectedKey }: MenuItemProps) {
 
 function SidebarItemCollapsible({ item, selectedKey }: MenuItemProps) {
   const { name, children } = item;
+  const isSelected = isTreeItemSelected(item, selectedKey);
 
   const chevronIcon = (
     <ChevronRight
@@ -151,9 +162,19 @@ function SidebarItemCollapsible({ item, selectedKey }: MenuItemProps) {
   );
 
   return (
-    <Collapsible key={`collapsible-${name}`} className={cn("w-full", "group")}>
+    <Collapsible
+      key={`collapsible-${name}`}
+      defaultOpen={isSelected}
+      className={cn("w-full", "group")}
+    >
       <CollapsibleTrigger
-        render={<SidebarButton item={item} rightIcon={chevronIcon} />}
+        render={
+          <SidebarButton
+            item={item}
+            rightIcon={chevronIcon}
+            isSelected={isSelected}
+          />
+        }
       />
       <CollapsibleContent className={cn("ml-6", "flex", "flex-col", "gap-2")}>
         {children?.map((child: TreeMenuItem) => (
@@ -171,38 +192,52 @@ function SidebarItemCollapsible({ item, selectedKey }: MenuItemProps) {
 function SidebarItemDropdown({ item, selectedKey }: MenuItemProps) {
   const { children } = item;
   const Link = useLink();
+  const isSelected = isTreeItemSelected(item, selectedKey);
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger render={<SidebarButton item={item} />} />
+      <DropdownMenuTrigger
+        render={<SidebarButton item={item} isSelected={isSelected} />}
+      />
       <DropdownMenuContent side="right" align="start">
-        {children?.map((child: TreeMenuItem) => {
-          const { key: childKey } = child;
-          const isSelected = childKey === selectedKey;
-
-          return (
-            <DropdownMenuItem
-              key={childKey || child.name}
-              render={<Link
-                to={child.route || ""}
-                className={cn("flex w-full items-center gap-2", {
-                  "bg-accent text-accent-foreground": isSelected,
-                })}
-              />}
-            >
-              <ItemIcon
-                icon={child.meta?.icon ?? child.icon}
-                isSelected={isSelected}
-              />
-              <span>{getDisplayName(child)}</span>
-            </DropdownMenuItem>
-          );
-        })}
+        {children?.map((child: TreeMenuItem) => (
+          <SidebarDropdownItem
+            key={child.key || child.name}
+            item={child}
+            selectedKey={selectedKey}
+            Link={Link}
+          />
+        ))}
       </DropdownMenuContent>
     </DropdownMenu>
   );
 }
 
+function SidebarDropdownItem({
+  item,
+  selectedKey,
+  Link,
+}: MenuItemProps & { Link: ReturnType<typeof useLink> }) {
+  const isSelected = item.key === selectedKey;
+  const displayName = useMenuItemLabel(item);
+
+  return (
+    <DropdownMenuItem
+      render={
+        <Link
+          to={item.route || ""}
+          className={cn("flex w-full items-center gap-2", {
+            "bg-accent text-accent-foreground": isSelected,
+          })}
+        />
+      }
+    >
+      <ItemIcon icon={item.meta?.icon ?? item.icon} isSelected={isSelected} />
+      <span>{displayName}</span>
+    </DropdownMenuItem>
+  );
+}
+
 function SidebarItemLink({ item, selectedKey }: MenuItemProps) {
   const isSelected = item.key === selectedKey;
 
@@ -227,7 +262,10 @@ function SidebarHeader() {
     >
       <Brand
         showText={open}
-        logoClassName={cn("transition-transform duration-200", !open && "size-9")}
+        logoClassName={cn(
+          "transition-transform duration-200",
+          !open && "size-9"
+        )}
       />
     </ShadcnSidebarHeader>
   );
@@ -235,6 +273,7 @@ function SidebarHeader() {
 
 function SidebarFooter() {
   const { open } = useShadcnSidebar();
+  const translate = useTranslate();
 
   return (
     <ShadcnSidebarFooter className="border-t border-sidebar-border/70 p-0">
@@ -248,10 +287,13 @@ function SidebarFooter() {
         {open && (
           <div className="min-w-0 text-xs leading-4">
             <div className="font-semibold text-sidebar-foreground">
-              AI builds freely.
+              {translate("shell.footer.freedom", "AI builds freely.")}
             </div>
             <div className="text-muted-foreground">
-              NocoBase keeps it reliable.
+              {translate(
+                "shell.footer.reliability",
+                "NocoBase keeps it reliable."
+              )}
             </div>
           </div>
         )}
@@ -260,8 +302,23 @@ function SidebarFooter() {
   );
 }
 
-function getDisplayName(item: TreeMenuItem) {
-  return item.meta?.label ?? item.label ?? item.name;
+function useMenuItemLabel(item: TreeMenuItem) {
+  const translate = useTranslate();
+  const getUserFriendlyName = useUserFriendlyName();
+
+  return getResourceLabel(
+    item,
+    "plural",
+    translate,
+    getUserFriendlyName,
+    item.name
+  );
+}
+
+function isTreeItemSelected(item: TreeMenuItem, selectedKey?: string) {
+  return (
+    item.key === selectedKey || Boolean(selectedKey?.startsWith(`${item.key}/`))
+  );
 }
 
 type IconProps = {
@@ -300,24 +357,22 @@ function SidebarButton({
   ...props
 }: SidebarButtonProps) {
   const Link = useLink();
+  const displayName = useMenuItemLabel(item);
 
   const buttonContent = (
     <>
       <ItemIcon icon={item.meta?.icon ?? item.icon} isSelected={isSelected} />
       <span
-        className={cn(
-          "tracking-[-0.00875rem] text-foreground",
-          {
-            "flex-1": rightIcon,
-            "text-left": rightIcon,
-            "line-clamp-1": !rightIcon,
-            truncate: !rightIcon,
-            "font-normal": !isSelected,
-            "font-medium": isSelected,
-          },
-        )}
+        className={cn("tracking-[-0.00875rem] text-foreground", {
+          "flex-1": rightIcon,
+          "text-left": rightIcon,
+          "line-clamp-1": !rightIcon,
+          truncate: !rightIcon,
+          "font-normal": !isSelected,
+          "font-medium": isSelected,
+        })}
       >
-        {getDisplayName(item)}
+        {displayName}
       </span>
       {rightIcon}
     </>
@@ -327,7 +382,10 @@ function SidebarButton({
     <Button
       render={
         asLink && item.route ? (
-          <Link to={item.route} className={cn("flex w-full items-center gap-2")} />
+          <Link
+            to={item.route}
+            className={cn("flex w-full items-center gap-2")}
+          />
         ) : undefined
       }
       variant="ghost"

package/src/components/data-table/data-table-pagination.tsx

@@ -7,6 +7,7 @@ import {
   ChevronsRight,
 } from "lucide-react";
 import { useMemo } from "react";
+import { useTranslate } from "@refinedev/core";
 
 import {
   Select,
@@ -35,6 +36,7 @@ export function DataTablePagination({
   setPageSize,
   total,
 }: DataTablePaginationProps) {
+  const translate = useTranslate();
   const pageSizeOptions = useMemo(() => {
     const baseOptions = [10, 20, 30, 40, 50];
     const optionsSet = new Set(baseOptions);
@@ -66,11 +68,19 @@ export function DataTablePagination({
           "whitespace-nowrap"
         )}
       >
-        {typeof total === "number" ? `${total} row(s)` : null}
+        {typeof total === "number"
+          ? translate(
+              "table.pagination.total",
+              { count: total },
+              `${total} row(s)`
+            )
+          : null}
       </div>
       <div className={cn("flex", "items-center", "flex-wrap", "gap-2")}>
         <div className={cn("flex", "items-center", "gap-2")}>
-          <span className={cn("text-sm", "font-medium")}>Rows per page</span>
+          <span className={cn("text-sm", "font-medium")}>
+            {translate("table.pagination.pageSize", "Rows per page")}
+          </span>
           <Select
             value={`${pageSize}`}
             onValueChange={(v) => setPageSize(Number(v))}
@@ -97,7 +107,11 @@ export function DataTablePagination({
               "font-medium"
             )}
           >
-            Page {currentPage} of {pageCount}
+            {translate(
+              "table.pagination.page",
+              { current: currentPage, total: pageCount },
+              `Page ${currentPage} of ${pageCount}`
+            )}
           </div>
           <div className={cn("flex", "items-center", "gap-2")}>
             <Button
@@ -105,7 +119,10 @@ export function DataTablePagination({
               className={cn("hidden", "h-8", "w-8", "p-0", "lg:flex")}
               onClick={() => setCurrentPage(1)}
               disabled={currentPage === 1}
-              aria-label="Go to first page"
+              aria-label={translate(
+                "table.pagination.first",
+                "Go to first page"
+              )}
             >
               <ChevronsLeft />
             </Button>
@@ -114,7 +131,10 @@ export function DataTablePagination({
               className={cn("h-8", "w-8", "p-0")}
               onClick={() => setCurrentPage(currentPage - 1)}
               disabled={currentPage === 1}
-              aria-label="Go to previous page"
+              aria-label={translate(
+                "table.pagination.previous",
+                "Go to previous page"
+              )}
             >
               <ChevronLeft />
             </Button>
@@ -123,7 +143,7 @@ export function DataTablePagination({
               className={cn("h-8", "w-8", "p-0")}
               onClick={() => setCurrentPage(currentPage + 1)}
               disabled={currentPage === pageCount}
-              aria-label="Go to next page"
+              aria-label={translate("table.pagination.next", "Go to next page")}
             >
               <ChevronRight />
             </Button>
@@ -132,7 +152,7 @@ export function DataTablePagination({
               className={cn("hidden", "h-8", "w-8", "p-0", "lg:flex")}
               onClick={() => setCurrentPage(pageCount)}
               disabled={currentPage === pageCount}
-              aria-label="Go to last page"
+              aria-label={translate("table.pagination.last", "Go to last page")}
             >
               <ChevronsRight />
             </Button>

package/src/components/data-table/data-table-styles.ts

@@ -0,0 +1,57 @@
+import type { Column } from "@tanstack/react-table";
+import type { CSSProperties } from "react";
+
+export function getCommonStyles<TData>({
+  column,
+  isOverflowing,
+}: {
+  column: Column<TData>;
+  isOverflowing: {
+    horizontal: boolean;
+    vertical: boolean;
+  };
+}): CSSProperties {
+  const isPinned = column.getIsPinned();
+  const isLastLeftPinnedColumn =
+    isPinned === "left" && column.getIsLastColumn("left");
+  const isFirstRightPinnedColumn =
+    isPinned === "right" && column.getIsFirstColumn("right");
+
+  return {
+    boxShadow:
+      isOverflowing.horizontal && isLastLeftPinnedColumn
+        ? "-4px 0 4px -4px var(--border) inset"
+        : isOverflowing.horizontal && isFirstRightPinnedColumn
+        ? "4px 0 4px -4px var(--border) inset"
+        : undefined,
+    left:
+      isOverflowing.horizontal && isPinned === "left"
+        ? `${column.getStart("left")}px`
+        : undefined,
+    right:
+      isOverflowing.horizontal && isPinned === "right"
+        ? `${column.getAfter("right")}px`
+        : undefined,
+    opacity: 1,
+    position: isOverflowing.horizontal && isPinned ? "sticky" : "relative",
+    background: isOverflowing.horizontal && isPinned ? "var(--background)" : "",
+    borderTopRightRadius:
+      isOverflowing.horizontal && isPinned === "right"
+        ? "var(--radius)"
+        : undefined,
+    borderBottomRightRadius:
+      isOverflowing.horizontal && isPinned === "right"
+        ? "var(--radius)"
+        : undefined,
+    borderTopLeftRadius:
+      isOverflowing.horizontal && isPinned === "left"
+        ? "var(--radius)"
+        : undefined,
+    borderBottomLeftRadius:
+      isOverflowing.horizontal && isPinned === "left"
+        ? "var(--radius)"
+        : undefined,
+    width: column.getSize(),
+    zIndex: isOverflowing.horizontal && isPinned ? 1 : 0,
+  };
+}