feat(action-panel): support custom empty content (#632)

* feat(action-panel): support custom empty content

* fix(action-panel): restore action row hover padding

* fix(action-panel): style and localize empty messages

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: IzumiSy <982850+IzumiSy@users.noreply.github.com>

Author: IzumiSy

.changeset/quiet-actions-localize.md

@@ -0,0 +1,11 @@
+---
+"@tailor-platform/app-shell": minor
+---
+
+Add an optional `emptyContent` prop to `ActionPanel` for localized strings or custom React nodes.
+Align the title, action icons, and empty content while preserving horizontal padding around action hover backgrounds and focus rings.
+Omitting `emptyContent` shows the default message in the AppShell locale (English or Japanese); custom strings use the same muted body styling. Passing `null` hides the content and its additional spacing while keeping the card and title.
+
+```tsx
+<ActionPanel title="操作" actions={[]} emptyContent={<p>利用可能な操作はありません</p>} />
+```

docs-manifest.json

@@ -6,16 +6,16 @@
       "kind": "code-backed",
       "outline": "docs-src/components/action-panel.docs.outline.md",
       "output": "docs/components/action-panel.md",
-      "examples": null,
+      "examples": "docs-src/components/action-panel.docs.examples.tsx",
       "sources": ["packages/core/src/components/action-panel/**"],
       "claims": [],
       "symbols": ["ActionPanel", "ActionPanelProps"],
       "hashes": {
         "typeSurface": "f497e4e3021d029a",
-        "outline": "a2d7daced73b465e",
+        "outline": "2e5fe6fdb0636b7c",
         "snapshot": null,
-        "outputMd": "71794d4b561e4d4b",
-        "examples": null
+        "outputMd": "dc861082aa9610af",
+        "examples": "79d8f5c1ae3099a3"
       }
     },
     "activity-card": {
@@ -1770,7 +1770,7 @@
     "packages/core/skills/app-shell-patterns/references/concepts/routing-navigation.md": "8034c7f885994b29",
     "packages/core/skills/app-shell-patterns/references/concepts/sidebar-navigation.md": "5a3c8bac248061f9",
     "packages/core/skills/app-shell-patterns/references/concepts/styling-theming.md": "755e362908623d2c",
-    "packages/core/skills/app-shell-patterns/references/components/action-panel.md": "71794d4b561e4d4b",
+    "packages/core/skills/app-shell-patterns/references/components/action-panel.md": "dc861082aa9610af",
     "packages/core/skills/app-shell-patterns/references/components/activity-card.md": "4f386e49380fb0b0",
     "packages/core/skills/app-shell-patterns/references/components/ai-chat.md": "824d1aa36bb7f194",
     "packages/core/skills/app-shell-patterns/references/components/alert.md": "db2c4388ca783a75",

docs-src/components/action-panel.docs.examples.tsx

@@ -0,0 +1,39 @@
+import { ActionPanel } from "@tailor-platform/app-shell";
+import { ExternalLink, Receipt } from "lucide-react";
+
+export function BasicUsage() {
+  return (
+    <ActionPanel
+      title="Actions"
+      actions={[
+        {
+          key: "create-invoice",
+          label: "Create new sales invoice",
+          icon: <Receipt />,
+          onClick: () => {},
+        },
+        {
+          key: "view-docs",
+          label: "View documentation",
+          icon: <ExternalLink />,
+          onClick: () => {},
+        },
+      ]}
+    />
+  );
+}
+
+export function CustomEmptyContent() {
+  return (
+    <ActionPanel
+      title="操作"
+      actions={[]}
+      emptyContent={
+        <div>
+          <p>利用可能な操作はありません</p>
+          <p>ステータスが変わると、操作が表示されます。</p>
+        </div>
+      }
+    />
+  );
+}

docs-src/components/action-panel.docs.outline.md

@@ -19,25 +19,7 @@ import { ActionPanel } from "@tailor-platform/app-shell";
 
 ## Basic Usage
 
-```tsx
-<ActionPanel
-  title="Actions"
-  actions={[
-    {
-      key: "create-invoice",
-      label: "Create new sales invoice",
-      icon: <ReceiptIcon />,
-      onClick: () => openCreateInvoiceModal(),
-    },
-    {
-      key: "view-docs",
-      label: "View documentation",
-      icon: <ExternalLinkIcon />,
-      onClick: () => window.open("/docs", "_blank", "noopener,noreferrer"),
-    },
-  ]}
-/>
-```
+<!-- example: basic-usage -->
 
 <!-- api -->
 
@@ -58,7 +40,15 @@ import { ActionPanel } from "@tailor-platform/app-shell";
 - Rows are rendered as `<button type="button">` elements.
 - `disabled` or `loading` makes the row non-interactive.
 - When `loading` is `true`, the icon slot renders a spinner without shifting layout.
-- Empty actions show a built-in fallback message: `No actions available`.
+- Empty actions show `emptyContent`, which defaults to a styled message localized using the AppShell locale: `No actions available` in English or `利用可能なアクションはありません` in Japanese.
+
+## Custom Empty Content
+
+Pass a string or any `ReactNode` to `emptyContent` to replace the default content when `actions` is empty. Strings use the same muted `Text` body styling as the default message. Other React nodes render directly inside `Card.Content` without a paragraph wrapper and control their own typography. `Card.Content` owns the spacing, and the title, empty content, and action icons share the same 32px horizontal inset. Action rows retain horizontal padding around their hover backgrounds and focus rings. Custom empty content is ignored when actions are present.
+
+<!-- example: custom-empty-content -->
+
+Pass `null` to hide the empty content and its additional vertical spacing while keeping the card and its title. To hide the entire panel when no actions are available, render it conditionally with `actions.length > 0`.
 
 ## With Loading State
 

docs/components/action-panel.md

@@ -3,6 +3,7 @@ import { cleanup, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { MemoryRouter } from "react-router";
 import { ActionPanel } from "./ActionPanel";
+import { AppShellConfigContext, buildConfigurations } from "../../contexts/appshell-context";
 import {
   CommandPaletteProvider,
   useCommandPaletteActions,
@@ -20,8 +21,15 @@ afterEach(() => {
   cleanup();
 });
 
-const renderActionPanel = (props: React.ComponentProps<typeof ActionPanel>) =>
-  render(<ActionPanel {...props} />, { wrapper });
+const renderActionPanel = (props: React.ComponentProps<typeof ActionPanel>, locale = "en") =>
+  render(
+    <AppShellConfigContext.Provider
+      value={{ configurations: buildConfigurations({ modules: [], locale }) }}
+    >
+      <ActionPanel {...props} />
+    </AppShellConfigContext.Provider>,
+    { wrapper },
+  );
 
 describe("ActionPanel", () => {
   it("renders title", () => {
@@ -33,7 +41,110 @@ describe("ActionPanel", () => {
 
   it("renders empty state when no actions", () => {
     renderActionPanel({ title: "Actions", actions: [] });
-    expect(screen.getByText("No actions available")).toBeDefined();
+    const message = screen.getByText("No actions available");
+    expect(message.className).toContain("astw:text-body-md");
+    expect(message.parentElement?.getAttribute("data-slot")).toBe("card-content");
+    expect(message.parentElement?.className).toContain("astw:px-8");
+    expect(message.parentElement?.className).toContain("astw:pt-2");
+    expect(message.parentElement?.className).toContain("astw:pb-6");
+  });
+
+  it.each([
+    ["en", "No actions available"],
+    ["ja", "利用可能なアクションはありません"],
+    ["fr", "No actions available"],
+  ])("localizes the default empty content for %s", (locale, message) => {
+    renderActionPanel({ title: "Actions", actions: [], emptyContent: undefined }, locale);
+
+    const content = screen.getByText(message);
+    expect(content.className).toContain("astw:text-body-md");
+    expect(content.className).toContain("astw:text-muted-foreground");
+  });
+
+  it.each(["en", "ja"])("styles a custom string instead of the %s default", (locale) => {
+    renderActionPanel(
+      {
+        title: "操作",
+        actions: [],
+        emptyContent: "利用可能な操作はありません",
+      },
+      locale,
+    );
+
+    const content = screen.getByText("利用可能な操作はありません");
+    expect(content.tagName).toBe("P");
+    expect(content.className).toContain("astw:text-body-md");
+    expect(content.className).toContain("astw:text-muted-foreground");
+    expect(content.parentElement?.getAttribute("data-slot")).toBe("card-content");
+    expect(content.parentElement?.className).toContain("astw:px-8");
+    expect(content.parentElement?.className).toContain("astw:pt-2");
+    expect(content.parentElement?.className).toContain("astw:pb-6");
+    expect(screen.queryByText("No actions available")).toBeNull();
+    expect(screen.queryByText("利用可能なアクションはありません")).toBeNull();
+  });
+
+  it("renders custom JSX without a paragraph wrapper", () => {
+    renderActionPanel({
+      title: "操作",
+      actions: [],
+      emptyContent: (
+        <div data-testid="custom-empty-state">
+          <p>利用可能な操作はありません</p>
+          <a href="/help/actions">操作について</a>
+        </div>
+      ),
+    });
+
+    expect(screen.getByText("利用可能な操作はありません")).toBeDefined();
+    expect(screen.getByRole("link", { name: "操作について" }).getAttribute("href")).toBe(
+      "/help/actions",
+    );
+    const customContent = screen.getByTestId("custom-empty-state");
+    expect(customContent.closest("p")).toBeNull();
+    expect(customContent.parentElement?.getAttribute("data-slot")).toBe("card-content");
+    expect(customContent.parentElement?.className).toContain("astw:px-8");
+    expect(customContent.parentElement?.className).toContain("astw:pt-2");
+    expect(customContent.parentElement?.className).toContain("astw:pb-6");
+    expect(screen.queryByText("No actions available")).toBeNull();
+  });
+
+  it.each([null, false, true])("renders no empty-state padding for %j", (emptyContent) => {
+    const { container } = renderActionPanel({
+      title: "Actions",
+      actions: [],
+      emptyContent,
+    });
+
+    expect(screen.queryByText("No actions available")).toBeNull();
+    const content = container.querySelector('[data-slot="card-content"]');
+    expect(content?.textContent).toBe("");
+    expect(content?.childElementCount).toBe(0);
+    expect(content?.className).toContain("astw:px-8");
+    expect(content?.className).toContain("astw:pb-4");
+    expect(content?.className).not.toContain("astw:pt-2");
+    expect(screen.getByRole("heading", { name: "Actions" })).toBeDefined();
+  });
+
+  it("does not fall back to the default for an empty string", () => {
+    renderActionPanel({ title: "Actions", actions: [], emptyContent: "" });
+    expect(screen.queryByText("No actions available")).toBeNull();
+  });
+
+  it("renders zero as custom content", () => {
+    renderActionPanel({ title: "Actions", actions: [], emptyContent: 0 });
+    expect(screen.getByText("0").getAttribute("data-slot")).toBe("card-content");
+  });
+
+  it("does not render empty content when actions are present", () => {
+    renderActionPanel({
+      title: "Actions",
+      actions: [{ key: "1", label: "Create invoice", icon: <MockIcon /> }],
+      emptyContent: <div>利用可能な操作はありません</div>,
+    });
+
+    expect(screen.getByRole("button", { name: "Create invoice" })).toBeDefined();
+    expect(screen.queryByText("利用可能な操作はありません")).toBeNull();
+    expect(screen.queryByText("No actions available")).toBeNull();
   });
 
   it("renders action list with buttons when onClick is provided", () => {
@@ -46,9 +157,21 @@ describe("ActionPanel", () => {
       },
       { key: "2", label: "Edit order", icon: <MockIcon />, onClick: () => {} },
     ];
-    renderActionPanel({ title: "Actions", actions });
-
-    expect(screen.getByRole("button", { name: "Create invoice" })).toBeDefined();
+    const { container } = renderActionPanel({ title: "Actions", actions });
+
+    const button = screen.getByRole("button", { name: "Create invoice" });
+    expect(button.className).toContain("astw:px-3");
+    expect(screen.getByRole("list").className).toContain("astw:-mx-3");
+    expect(screen.getByRole("list").className).toContain("astw:my-0");
+    expect(screen.getByRole("list").className).not.toContain("astw:m-0");
+    expect(button.className).toContain("astw:py-2");
+    expect(button.className).toContain("astw:border-0");
+    expect(button.className).toContain("astw:text-label-md");
+    expect(container.querySelector('[data-slot="card-header"]')?.className).toContain("astw:px-8");
+    const content = container.querySelector('[data-slot="card-content"]');
+    expect(content?.className).toContain("astw:px-8");
+    expect(content?.className).toContain("astw:pb-4");
+    expect(content?.className).not.toContain("astw:pt-2");
     expect(screen.getByRole("button", { name: "Edit order" })).toBeDefined();
     expect(screen.getAllByTestId("mock-icon").length).toBe(2);
   });