@carlonicora/nextjs-jsonapi 3.8.1 → 3.9.0

package/src/components/containers/RoundPageContainer.tsx

@@ -20,6 +20,7 @@ import {
 import { partitionTabs, Tab } from "@/components/containers";
 import { HEADER_ROW_MIN_H, RoundPageContainerTitle } from "@/components/containers/RoundPageContainerTitle";
 import { Header, MobileNavigationBar } from "@/components/navigations";
+import { MicroLabel } from "@/components/typography";
 import { useHeaderChildren, useHeaderLeftContent, useHeaderLogo, useHeaderMobileChildren } from "@/contexts";
 import { useUrlRewriter } from "@/hooks";
 import { cn, useIsMobile } from "@/index";
@@ -113,15 +114,33 @@ type RoundPageContainerProps = {
   scroll?: "document" | "fixed";
 };
 
-// Rail trigger class: override the horizontal TabsTrigger defaults for a
-// vertical, start-aligned, dark-filled active state. tailwind-merge inside cn()
-// resolves the conflicts with the base classes.
+// Rail trigger class: the rail is a LIST, not a column of buttons — the same
+// treatment as the handbook reader's section rail (HandbookPageNavigator /
+// HandbookPageToc in a360ai): entries at `text-xs` on a `border-s-2` rule, and
+// the active one marked by turning that rule and its label `primary` rather
+// than by growing a filled box around it.
+//
+// Every override below is written in the SAME class group AND the same variant
+// modifiers as the base `TabsTrigger` class it has to beat, because that is the
+// only way tailwind-merge inside cn() drops the base one; a differently-scoped
+// utility (`data-active:` against a `dark:data-active:` base) would survive as
+// a second rule and win or lose on stylesheet order.
+//
+// The previous version targeted `data-[state=active]`, which these Base UI tabs
+// never set — the active row was therefore still wearing the base
+// `data-active:bg-background` box, which is the button look this replaces.
 const railTriggerClass = cn(
-  "flex w-full items-center justify-start rounded-md px-3 py-1.5 text-start text-sm leading-tight whitespace-normal",
-  "text-muted-foreground",
-  "hover:bg-muted hover:text-foreground",
-  "data-[state=active]:bg-foreground data-[state=active]:text-background",
-  "data-[state=active]:font-semibold data-[state=active]:shadow-none",
+  "flex h-auto w-full items-center justify-start px-3 py-1 text-start text-xs leading-tight whitespace-normal",
+  // `border-0` first: the base sets a 1px box on all four sides, and only a
+  // later border-width utility of the same group removes it. `border-s-2` then
+  // draws the rail itself.
+  "rounded-none border-0 border-s-2 border-transparent bg-transparent",
+  "text-muted-foreground dark:text-muted-foreground transition-colors",
+  "hover:bg-transparent hover:text-primary dark:hover:text-primary",
+  "data-active:bg-transparent dark:data-active:bg-transparent",
+  "data-active:border-primary dark:data-active:border-primary",
+  "data-active:text-primary dark:data-active:text-primary",
+  "data-active:font-medium data-active:shadow-none",
 );
 
 /** Stable value for the URL `?section=` and active-tab matching. */
@@ -244,7 +263,9 @@ export function RoundPageContainer({
     [module, id, rewriteUrl, onSectionChange],
   );
 
-  const activeFillHeight = tabs?.find((t) => tabValue(t) === activeTab)?.fillHeight === true;
+  const activeTabDefinition = tabs?.find((t) => tabValue(t) === activeTab);
+  const activeFillHeight = activeTabDefinition?.fillHeight === true;
+  const activeConstrainWidth = activeTabDefinition?.constrainWidth === true;
 
   // Rail partition — only consumed by `layout="rail"` but cheap to compute.
   const { ungrouped, groups } = useMemo(() => partitionTabs(tabs ?? []), [tabs]);
@@ -394,12 +415,9 @@ export function RoundPageContainer({
                       ))}
                       {groups.map((group) => (
                         <Fragment key={group.label}>
-                          <div
-                            role="presentation"
-                            className="text-muted-foreground px-3 pt-3 pb-1 text-[10px] font-bold tracking-wider uppercase"
-                          >
+                          <MicroLabel as="span" role="presentation" className="block px-3 pt-3 pb-1">
                             {group.label}
-                          </div>
+                          </MicroLabel>
                           {group.items.map((tab) => (
                             <TabsTrigger key={tab.label} value={tabValue(tab)} className={railTriggerClass}>
                               {tab.contentLabel ?? tab.label}
@@ -447,10 +465,13 @@ export function RoundPageContainer({
                       className={cn(`min-w-0 grow`, activeFillHeight ? cn(`flex flex-col`, clip) : cn(scrollY, `p-4`))}
                     >
                       {/* Centre and constrain rail content (like the non-rail
-                          layout). Fill-height tabs keep the full width. */}
+                          layout). Fill-height tabs are full-bleed — a canvas, a
+                          map or a two-pane browser wants the width — unless the
+                          tab asks for the reading column with `constrainWidth`. */}
                       <div
                         className={cn(
                           activeFillHeight ? `flex min-h-0 w-full flex-1 flex-col` : `mx-auto w-full max-w-6xl`,
+                          activeFillHeight && activeConstrainWidth && `mx-auto max-w-6xl`,
                         )}
                       >
                         {header}

package/src/components/containers/RoundPageContainerTitle.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Button, Tooltip, TooltipContent, TooltipTrigger } from "@/components";
-import { useSharedContext } from "@/contexts";
+import { ActionBarProvider, useSharedContext } from "@/contexts";
 import { ModuleWithPermissions } from "@/permissions";
 import { cn, useIsMobile } from "@/utils";
 import { InfoIcon } from "lucide-react";
@@ -82,8 +82,11 @@ export function RoundPageContainerTitle({
         )}
       </div>
       {title.actionBar && (
-        <div data-testid="round-page-action-bar" className="flex w-full items-center border-t px-4 py-2">
-          {title.actionBar}
+        <div data-testid="round-page-action-bar" className="flex w-full items-center gap-x-2 border-t px-4 py-2">
+          {/* The bar is the page's command row, so the commands inside it label
+              themselves ("Edit", "Delete") instead of rendering the bare glyph
+              they use in a table row. See ActionBarContext. */}
+          <ActionBarProvider value={true}>{title.actionBar}</ActionBarProvider>
         </div>
       )}
     </div>

package/src/components/containers/TabsContainer.tsx

@@ -37,6 +37,16 @@ export type Tab = {
    * because it doesn't own the surrounding scroll container.
    */
   fillHeight?: boolean;
+  /**
+   * Keep the tab's content in the centred reading column (`max-w-6xl`) under
+   * `layout="rail"` even when `fillHeight` is set.
+   *
+   * A rail's `fillHeight` tab is full-bleed by default, which is what a
+   * two-pane browser, a canvas or a map wants. Prose does not: an editor
+   * stretched across a wide screen is unreadable. Non-fill-height tabs are
+   * already constrained, so this flag only matters alongside `fillHeight`.
+   */
+  constrainWidth?: boolean;
 };
 
 type TabsContainerProps = {

package/src/components/forms/CommonDeleter.tsx

@@ -2,6 +2,7 @@
 
 import { LoaderCircleIcon, Trash2Icon } from "lucide-react";
 import { isValidElement, ReactNode, useState } from "react";
+import { useIsInActionBar } from "../../contexts/ActionBarContext";
 import { useI18nRouter, useI18nTranslations } from "../../i18n";
 import {
   AlertDialog,
@@ -28,6 +29,12 @@ type CommonDeleterProps = {
   testId?: string;
   /** Custom trigger element replacing the default trash button. */
   trigger?: ReactNode;
+  /**
+   * Force the default trigger to show / hide its text label. Left unset it
+   * follows `useIsInActionBar()`: labelled in a page action bar, glyph-only in
+   * a table row or a sheet header, where there is no room for the word.
+   */
+  showLabel?: boolean;
   onSuccess?: () => void | Promise<void>;
   /** Fired after a successful delete, in addition to redirect/onSuccess. */
   propagateChanges?: () => void;
@@ -43,10 +50,15 @@ export function CommonDeleter({
   forceShow,
   testId,
   trigger,
+  showLabel,
   onSuccess,
   propagateChanges,
 }: CommonDeleterProps) {
   const t = useI18nTranslations();
+  // Called unconditionally: `showLabel ?? useIsInActionBar()` would skip the
+  // hook whenever the prop is set, breaking the rules of hooks.
+  const inActionBar = useIsInActionBar();
+  const isLabelled = showLabel ?? inActionBar;
   const router = useI18nRouter();
   const [open, setOpen] = useState<boolean>(forceShow || false);
   const [isDeleting, setIsDeleting] = useState<boolean>(false);
@@ -80,11 +92,12 @@ export function CommonDeleter({
               render={<div />}
               nativeButton={false}
               size="sm"
-              variant={"ghost"}
+              variant={isLabelled ? "outline" : "ghost"}
               className="text-muted-foreground hover:text-destructive"
               data-testid={testId}
             >
               <Trash2Icon />
+              {isLabelled && t(`ui.buttons.delete`)}
             </Button>
           )}
         </AlertDialogTrigger>

package/src/components/forms/EditorSheet.tsx

@@ -4,6 +4,7 @@ import { useTranslations } from "next-intl";
 import { isValidElement, ReactElement, ReactNode, useCallback, useEffect, useRef } from "react";
 import { FieldValues, UseFormReturn } from "react-hook-form";
 import { PencilIcon } from "lucide-react";
+import { ActionBarProvider, useIsInActionBar } from "../../contexts/ActionBarContext";
 import { ModuleWithPermissions } from "../../permissions/types";
 import { usePageUrlGenerator } from "../../hooks/usePageUrlGenerator";
 import {
@@ -109,6 +110,13 @@ export type EditorSheetProps<T extends FieldValues> = {
   centerButtons?: ReactNode;
 
   trigger?: ReactNode;
+  /**
+   * Force the default edit trigger to show / hide its text label. Left unset it
+   * follows `useIsInActionBar()`: labelled in a page action bar, glyph-only in
+   * a table row or an inline cell, where there is no room for the word. The
+   * create trigger is always labelled.
+   */
+  showLabel?: boolean;
   forceShow?: boolean;
   onClose?: () => void;
   dialogOpen?: boolean;
@@ -154,6 +162,7 @@ export function EditorSheet<T extends FieldValues>({
   hideSubmit,
   centerButtons,
   trigger,
+  showLabel,
   forceShow,
   onClose,
   dialogOpen,
@@ -164,6 +173,8 @@ export function EditorSheet<T extends FieldValues>({
 }: EditorSheetProps<T>) {
   const t = useTranslations();
   const generateUrl = usePageUrlGenerator();
+  const inActionBar = useIsInActionBar();
+  const isLabelled = showLabel ?? inActionBar;
 
   const defaultIsFormDirty = useCallback(() => {
     return Object.keys(form.formState.dirtyFields).length > 0;
@@ -288,10 +299,11 @@ export function EditorSheet<T extends FieldValues>({
                     render={<div />}
                     nativeButton={false}
                     size="sm"
-                    variant="ghost"
+                    variant={isLabelled ? "outline" : "ghost"}
                     className="text-muted-foreground"
                   >
                     <PencilIcon />
+                    {isLabelled && t("ui.buttons.edit")}
                   </Button>
                 ) : (
                   <Button render={<div />} nativeButton={false} size="sm" variant="outline">
@@ -302,53 +314,59 @@ export function EditorSheet<T extends FieldValues>({
             />
           ))}
         <SheetContent side="end" className={sizeClasses[size]}>
-          <SheetHeader className="border-b px-6 py-4">
-            {actions ? (
-              // pe-10 clears the SheetContent close button, which sits at the
-              // inline end of the sheet (absolute top-4 end-4).
-              <div className="flex items-start justify-between gap-x-4 pe-10">
-                <div className="flex min-w-0 flex-col gap-y-1.5">
+          {/* The sheet's own content is NOT the action bar, even when the
+              trigger that opened it lives there — context flows through the
+              portal, so reset it or a CommonDeleter passed as `actions` would
+              inherit the bar's labelled trigger. */}
+          <ActionBarProvider value={false}>
+            <SheetHeader className="border-b px-6 py-4">
+              {actions ? (
+                // pe-10 clears the SheetContent close button, which sits at the
+                // inline end of the sheet (absolute top-4 end-4).
+                <div className="flex items-start justify-between gap-x-4 pe-10">
+                  <div className="flex min-w-0 flex-col gap-y-1.5">
+                    <SheetTitle>{headerTitle}</SheetTitle>
+                    <SheetDescription>{headerDescription}</SheetDescription>
+                  </div>
+                  <div className="flex shrink-0 items-center gap-x-2">{actions}</div>
+                </div>
+              ) : (
+                <>
                   <SheetTitle>{headerTitle}</SheetTitle>
                   <SheetDescription>{headerDescription}</SheetDescription>
-                </div>
-                <div className="flex shrink-0 items-center gap-x-2">{actions}</div>
-              </div>
-            ) : (
-              <>
-                <SheetTitle>{headerTitle}</SheetTitle>
-                <SheetDescription>{headerDescription}</SheetDescription>
-              </>
-            )}
-          </SheetHeader>
-          <Form {...form}>
-            <form
-              onSubmit={(e) => {
-                // The Sheet content is portaled, but React synthetic events still
-                // bubble up the React tree — so without stopPropagation an inner
-                // EditorSheet's submit also triggers the outer form's submit
-                // (e.g. a create dialog opened from within another editor).
-                e.stopPropagation();
-                return form.handleSubmit(wrappedOnSubmit)(e);
-              }}
-              className="flex min-h-0 flex-1 flex-col"
-            >
-              <div className="flex-1 overflow-y-auto px-6 py-4">{children}</div>
-              <SheetFooter className="shrink-0 border-t px-6 py-4">
-                {renderFooter ? (
-                  renderFooter({ form, isEdit, setOpen: handleOpenChange, closeWithoutConfirm: setOpen })
-                ) : (
-                  <CommonEditorButtons
-                    form={form}
-                    setOpen={handleOpenChange}
-                    isEdit={isEdit}
-                    disabled={disabled}
-                    hideSubmit={hideSubmit}
-                    centerButtons={centerButtons}
-                  />
-                )}
-              </SheetFooter>
-            </form>
-          </Form>
+                </>
+              )}
+            </SheetHeader>
+            <Form {...form}>
+              <form
+                onSubmit={(e) => {
+                  // The Sheet content is portaled, but React synthetic events still
+                  // bubble up the React tree — so without stopPropagation an inner
+                  // EditorSheet's submit also triggers the outer form's submit
+                  // (e.g. a create dialog opened from within another editor).
+                  e.stopPropagation();
+                  return form.handleSubmit(wrappedOnSubmit)(e);
+                }}
+                className="flex min-h-0 flex-1 flex-col"
+              >
+                <div className="flex-1 overflow-y-auto px-6 py-4">{children}</div>
+                <SheetFooter className="shrink-0 border-t px-6 py-4">
+                  {renderFooter ? (
+                    renderFooter({ form, isEdit, setOpen: handleOpenChange, closeWithoutConfirm: setOpen })
+                  ) : (
+                    <CommonEditorButtons
+                      form={form}
+                      setOpen={handleOpenChange}
+                      isEdit={isEdit}
+                      disabled={disabled}
+                      hideSubmit={hideSubmit}
+                      centerButtons={centerButtons}
+                    />
+                  )}
+                </SheetFooter>
+              </form>
+            </Form>
+          </ActionBarProvider>
         </SheetContent>
       </Sheet>
       <CommonEditorDiscardDialog {...discardDialogProps} />

package/src/contexts/ActionBarContext.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { createContext, ReactNode, useContext } from "react";
+
+/**
+ * True while rendering inside the page action bar (`title.actionBar`, drawn by
+ * RoundPageContainerTitle).
+ *
+ * The action bar is a full-width row of page-level commands, so its buttons
+ * carry a visible label — "Edit", "Delete" — instead of the bare glyph the same
+ * components use in a table row or a sheet header, where horizontal space is
+ * scarce. Commands read the flag through `useIsInActionBar()` rather than
+ * taking a prop, so an app only has to populate `title.actionBar`: everything
+ * it puts there labels itself, and nothing has to be threaded through the
+ * app's own wrapper components.
+ */
+const ActionBarContext = createContext<boolean>(false);
+
+export const ActionBarProvider = ({ value, children }: { value: boolean; children: ReactNode }) => (
+  <ActionBarContext.Provider value={value}>{children}</ActionBarContext.Provider>
+);
+
+export const useIsInActionBar = (): boolean => useContext(ActionBarContext);

package/src/contexts/index.ts

@@ -7,6 +7,7 @@ export * from "../features/user/contexts";
 export * from "../features/how-to/contexts/HowToContext";
 export * from "../features/rbac/contexts/RbacContext";
 export * from "../features/assistant/contexts/AssistantContext";
+export * from "./ActionBarContext";
 export * from "./CommonContext";
 export * from "./DirectionContext";
 export * from "./HeaderChildrenContext";

package/src/features/user/contexts/CurrentUserContext.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { getCookie } from "cookies-next";
 import { useAtom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
 import { usePathname } from "next/navigation";
@@ -196,6 +197,29 @@ export const CurrentUserProvider = ({ children }: { children: React.ReactNode })
   const refreshUserRef = useRef(refreshUser);
   refreshUserRef.current = refreshUser;
 
+  // Reconcile the local cache with the session on mount.
+  //
+  // `userAtom` is a localStorage CACHE of the user; the session itself is the
+  // token cookie. The two can disagree — an iOS home-screen web app shares
+  // Safari's cookies but starts with an empty localStorage — and nothing used
+  // to reconcile them: the user was written only by the login flow or by
+  // RefreshUser, which fires only when the proxy refreshes a token. With a
+  // cookie and no cached user the server rendered a logged-in page while every
+  // client surface (avatar, sidebar, campaign role) saw nobody.
+  //
+  // localStorage is read directly rather than through `dehydratedUser`:
+  // atomWithStorage reports its initial value on the first render and only
+  // then hydrates from storage, so the atom alone would trigger a needless
+  // fetch on every mount. skipCookieUpdate because the cookies are what we are
+  // reading FROM; rewriting them through the Server Action would reload the page.
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (window.localStorage.getItem(CURRENT_USER_STORAGE_KEY)) return;
+    if (!getCookie("token")) return;
+    void refreshUserRef.current({ skipCookieUpdate: true });
+    // Mount-only: this is a one-shot reconciliation, not a subscription.
+  }, []);
+
   // Track refresh in progress to prevent duplicate API calls
   const isRefreshingRef = useRef(false);
 

package/src/features/user/contexts/__tests__/CurrentUserContext.spec.tsx

@@ -118,6 +118,46 @@ describe("CurrentUserProvider", () => {
     expect(localStorage.getItem("user")).toBe(JSON.stringify(storedUser));
   });
 
+  it("loads the user from the session when a token cookie exists but localStorage is empty", async () => {
+    // An iOS home-screen web app shares Safari's cookies but starts with an
+    // empty localStorage: the server renders a logged-in page while the client
+    // has no user. The provider must reconcile from the cookie session.
+    vi.mocked(getCookie).mockImplementation((name: any) => (name === "token" ? "jwt" : undefined));
+    const dehydrated = { id: "user-from-session", roles: [], company: null, modules: [] };
+    vi.mocked(UserService.findFullUser).mockResolvedValue({ ...dehydrated, dehydrate: () => dehydrated } as any);
+    const updateToken = vi.fn().mockResolvedValue(undefined);
+    vi.mocked(getTokenHandler).mockReturnValue({ updateToken, removeToken: vi.fn() } as any);
+
+    const { getByTestId } = render(
+      <CurrentUserProvider>
+        <Consumer />
+      </CurrentUserProvider>,
+    );
+
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(UserService.findFullUser).toHaveBeenCalledTimes(1);
+    expect(getByTestId("current-user-id").textContent).toBe("user-from-session");
+    // The cookies are what we read FROM; rewriting them would reload the page.
+    expect(updateToken).not.toHaveBeenCalled();
+  });
+
+  it("does not hit the API when localStorage already holds the user", async () => {
+    vi.mocked(getCookie).mockImplementation((name: any) => (name === "token" ? "jwt" : undefined));
+    localStorage.setItem("user", JSON.stringify({ id: "cached", roles: [], company: null, modules: [] }));
+
+    const { getByTestId } = render(
+      <CurrentUserProvider>
+        <Consumer />
+      </CurrentUserProvider>,
+    );
+
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(UserService.findFullUser).not.toHaveBeenCalled();
+    expect(getByTestId("current-user-id").textContent).toBe("cached");
+  });
+
   it("awaits updateToken before writing the user atom in refreshUser", async () => {
     const oldUser = { id: "old", roles: [], company: null, modules: [] };
     localStorage.setItem("user", JSON.stringify(oldUser));

package/src/shadcnui/ui/command.tsx

@@ -8,12 +8,21 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } f
 import { InputGroup, InputGroupAddon } from "@/components/ui/input-group";
 import { SearchIcon, CheckIcon } from "lucide-react";
 
+/**
+ * Inside a dialog the Command must NOT paint `bg-popover`: `DialogContent` is
+ * `bg-background`, and the two tokens are only identical in the light theme
+ * (both white). In dark they differ — `--background` oklch(0.148) vs
+ * `--popover` oklch(0.218) — so the command block renders as a lighter panel
+ * seamed against the dialog's own header. Inheriting the dialog surface keeps a
+ * command dialog one colour in both themes.
+ */
 function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
   return (
     <CommandPrimitive
       data-slot="command"
       className={cn(
         "bg-popover text-popover-foreground rounded-xl p-1 flex size-full flex-col overflow-hidden",
+        "[[data-slot=dialog-content]_&]:bg-transparent [[data-slot=dialog-content]_&]:text-foreground",
         className,
       )}
       {...props}