fix(detail): Attachments move from footer widget to a peer tab with a live count badge (objectstack#4358)

Rework of the previous commit's side-by-side footer after design review:
the narrow attachments card next to a tall feed read as a broken layout.

- buildDefaultTabs emits an Attachments tab (record:attachments) between
  Related and Activity/History for enable.files objects; hideAttachments
  suppresses it. The footer grid, the attachments slot and toFooterCell
  are gone — the discussion footer is back to its original shape.
- PageTabsRenderer derives the tab badge from a sys_attachment probe
  scoped to (parent_object, parent_id): the probe wrapper injects the
  two-key filter the RelatedCountStore shape can't express, while the
  synthetic relationshipField keeps the cache key unique and the store's
  existing sys_attachment invalidation (MutationEvent bridge) updates the
  badge on upload/delete.
- Tab label rides the existing KNOWN_LABEL_DICT (→ 附件).

Verified in the browser against a showcase backend (authored page
assignment temporarily detached, since showcase's demo project page
overrides the tabs slot): tab strip renders 详情 / 相关 1 / 附件 1, the
panel fills the tab, and the badge reflects a created+deleted
sys_attachment row.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: baozhoutao

.changeset/attachments-beside-discussion-and-i18n.md

@@ -1,30 +1,35 @@
 ---
 "@object-ui/app-shell": patch
 "@object-ui/plugin-detail": patch
+"@object-ui/components": patch
 "@object-ui/i18n": patch
 ---
 
-fix(detail): the record Attachments panel renders beside the discussion feed and its copy is translated — objectstack#4358
+fix(detail): record Attachments become their own tab (with count badge) and their copy is translated — objectstack#4358
 
 Two defects on `enable.files: true` record detail pages:
 
-1. **Buried placement.** `RecordAttachmentsPanel` was appended by
-   `RecordDetailView` AFTER the schema-rendered page tree, whose synthesized
-   default embeds `record:discussion` as the last main component — so the
-   panel always landed below an ever-growing feed timeline, undiscoverable
-   without scrolling to the very bottom, with no metadata knob to move it.
+1. **Buried placement.** `RecordDetailView` appended `RecordAttachmentsPanel`
+   AFTER the schema-rendered page tree, whose synthesized default embeds
+   `record:discussion` as the last main component — so the panel always
+   landed below an ever-growing feed timeline, undiscoverable without
+   scrolling to the very bottom, with no metadata knob to move it.
 
-   `buildDefaultPageSchema` now emits a footer grid row placing a new
-   `record:attachments` node to the LEFT of the discussion feed (1/3–2/3 on
-   `lg+`, stacked attachments-first below). The node is rendered by a new
-   app-shell registration wrapping the existing panel via RecordContext; a
-   new `attachments` slot and `hideAttachments` option cover slotted pages,
-   and RecordDetailView keeps its bottom append only as a fallback for
-   authored pages that omit the node (detected via `hasExplicitAttachments`).
+   `buildDefaultTabs` now emits a peer **Attachments** tab (a new
+   `record:attachments` node rendered by an app-shell registration wrapping
+   the existing panel via RecordContext) between Related and
+   Activity/History. `PageTabsRenderer` derives the tab's count badge from a
+   `sys_attachment` probe scoped to `(parent_object, parent_id)`, riding the
+   same RelatedCountStore cache/invalidation bus as related-list badges — so
+   uploads and deletes update the badge live. A `hideAttachments` synthesizer
+   option suppresses the tab; RecordDetailView keeps its legacy bottom append
+   only as the fallback for authored pages without the node
+   (`hasExplicitAttachments`).
 
 2. **Untranslated copy.** The panel's eleven `detail.*` keys (`attachments`,
    `uploadAttachment`, `loadingAttachments`, `noAttachments`,
    `downloadAttachment`, `deleteAttachment`, and the five
    `attachment*Denied/Required` friendly errors) existed only as inline
    English `defaultValue`s — no locale bundle carried them, so non-English
-   consoles always showed English. All ten locales now define them.
+   consoles always showed English. All ten locales now define them; the tab
+   label rides the existing well-known-label dictionary (→ 附件 etc.).

content/docs/guide/slotted-pages.md

@@ -32,7 +32,11 @@ slotted pages are the right tool.
 | `details` | The Details tab body (other tabs stay synthesized) |
 | `tabs` | The entire `page:tabs` node — use to add or reorder tabs (wins over `details`) |
 | `discussion` | `record:discussion` (the inline conversation footer) |
-| `attachments` | `record:attachments` (the Attachments panel; synthesized to the left of the discussion footer for objects with `enable.files: true`) |
+
+Objects with `enable.files: true` also get a synthesized **Attachments** tab
+(`record:attachments`, with a count badge) beside Details/Related. It is not a
+slot of its own — override `tabs` to reshape it, or pass
+`hideAttachments: true` to the synthesizer to drop it.
 
 Each slot accepts a single component schema or an array (arrays are
 flattened in place). Each slot is a **full replacement at the slot

packages/app-shell/src/utils/__tests__/pageSchemaIntrospect.test.ts

@@ -136,7 +136,7 @@ describe('hasExplicitAttachments', () => {
     ).toBe(true);
   });
 
-  it('detects attachments inside the synthesized footer grid (regions[].components[])', () => {
+  it('detects attachments inside the synthesized Attachments tab (regions[].components[].items[])', () => {
     // Mirrors buildDefaultPageSchema output for an enable.files object.
     const synthPage = {
       type: 'record',
@@ -145,15 +145,14 @@ describe('hasExplicitAttachments', () => {
           name: 'main',
           components: [
             { type: 'page:header' },
-            { type: 'page:tabs', items: [{ type: 'page:tab', children: [] }] },
             {
-              type: 'grid',
-              columns: { xs: 1, lg: 3 },
-              children: [
-                { type: 'record:attachments', className: 'lg:col-span-1' },
-                { type: 'record:discussion', className: 'lg:col-span-2' },
+              type: 'page:tabs',
+              items: [
+                { label: 'Details', value: 'details', children: [{ type: 'record:details' }] },
+                { label: 'Attachments', value: 'attachments', children: [{ type: 'record:attachments' }] },
               ],
             },
+            { type: 'record:discussion' },
           ],
         },
       ],

packages/components/src/renderers/layout/containers.tsx

@@ -308,6 +308,27 @@ const collectRelatedLists = (nodes: any, acc: any[] = []): any[] => {
   return acc;
 };
 
+/**
+ * Walk a tab's children (depth-first) and return true when a
+ * `record:attachments` node is present. The Attachments tab
+ * (objectstack#4358) derives its badge from a `sys_attachment` count scoped
+ * by `(parent_object, parent_id)` — a two-key filter the related-list probe
+ * shape can't express, so it gets its own detection + probe path below.
+ */
+const containsAttachmentsNode = (nodes: any): boolean => {
+  if (!nodes) return false;
+  const list = Array.isArray(nodes) ? nodes : [nodes];
+  for (const n of list) {
+    if (!n || typeof n !== 'object') continue;
+    if (n.type === 'record:attachments') return true;
+    const candidates = [n.children, n.properties?.children, n.properties?.items, n.body, n.items];
+    for (const c of candidates) {
+      if (c && containsAttachmentsNode(c)) return true;
+    }
+  }
+  return false;
+};
+
 const PageTabsRenderer: React.FC<any> = ({ schema, className, ...props }) => {
   const { designer } = splitDesignerProps(props);
   const { language } = useObjectTranslation();
@@ -377,23 +398,32 @@ const PageTabsRenderer: React.FC<any> = ({ schema, className, ...props }) => {
   // Snapshot which tabs (index → derived (objectName, relationshipField))
   // need a count probe. Cached per items reference so we don't re-walk on
   // every render.
+  const recordObject: string | undefined = ctx?.objectName;
   const probeTargets = React.useMemo(() => {
-    const out = new Map<number, Array<{ objectName: string; relationshipField?: string }>>();
+    const out = new Map<number, Array<{ objectName: string; relationshipField?: string; attachments?: boolean }>>();
     items.forEach((it, idx) => {
       if (it.count !== undefined && it.count !== null && it.count !== '') return;
       const lists = collectRelatedLists((it as any).children);
-      const probes: Array<{ objectName: string; relationshipField?: string }> = [];
+      const probes: Array<{ objectName: string; relationshipField?: string; attachments?: boolean }> = [];
       for (const rl of lists) {
         const objectName: string | undefined = rl?.properties?.objectName || rl?.objectName;
         if (!objectName) continue;
         const relationshipField: string | undefined =
           rl?.properties?.relationshipField || rl?.relationshipField;
         probes.push({ objectName, relationshipField });
       }
+      // Attachments tab (objectstack#4358): count sys_attachment rows scoped
+      // to this record. The synthetic `relationshipField` below is only a
+      // cache-key discriminator — the actual filter is injected by the probe
+      // wrapper in the effect, since the store's single-key filter shape
+      // can't express `(parent_object, parent_id)`.
+      if (recordObject && containsAttachmentsNode((it as any).children)) {
+        probes.push({ objectName: 'sys_attachment', relationshipField: `attachments:${recordObject}`, attachments: true });
+      }
       if (probes.length > 0) out.set(idx, probes);
     });
     return out;
-  }, [items]);
+  }, [items, recordObject]);
 
   React.useEffect(() => {
     if (!ds || typeof ds.find !== 'function') return;
@@ -403,8 +433,19 @@ const PageTabsRenderer: React.FC<any> = ({ schema, className, ...props }) => {
       for (const probe of probes) {
         // RelatedCountStore.fetch is internally deduplicated, so concurrent
         // mounts of multiple tab strips don't generate redundant requests.
+        // The attachments probe overrides the store-built single-key filter
+        // with the two-key `(parent_object, parent_id)` scope; the synthetic
+        // relationshipField keeps the cache key unique, and the store's
+        // `sys_attachment` invalidation (data-change bus) still hits it.
+        const finder = probe.attachments
+          ? (object: string, query: any) =>
+              ds.find(object, {
+                ...query,
+                $filter: { parent_object: recordObject, parent_id: parentId },
+              })
+          : (object: string, query: any) => ds.find(object, query);
         void RelatedCountStore.fetch(
-          (object, query) => ds.find(object, query),
+          finder,
           probe.objectName,
           probe.relationshipField,
           parentId,

packages/plugin-detail/src/synth/__tests__/buildDefaultPageSchema.test.ts

@@ -728,74 +728,57 @@ describe('buildDefaultPageSchema', () => {
     });
   });
 
-  // objectstack#4358 — `enable.files` objects get the Attachments panel to
-  // the LEFT of the discussion feed instead of the legacy below-the-feed
-  // append that a growing timeline buried.
-  describe('attachments footer row (enable.files, objectstack#4358)', () => {
+  // objectstack#4358 — `enable.files` objects get a peer Attachments tab
+  // (with a count badge derived by PageTabsRenderer) instead of the legacy
+  // below-the-feed append that a growing timeline buried.
+  describe('attachments tab (enable.files, objectstack#4358)', () => {
     const filesDef: ObjectDefLike = { ...leadDef, enable: { files: true } };
 
     it('no enable.files → no record:attachments anywhere', () => {
       const page = buildDefaultPageSchema(leadDef);
       expect(JSON.stringify(page)).not.toContain('record:attachments');
     });
 
-    it('enable.files → footer grid with attachments LEFT of discussion', () => {
+    it('enable.files → tabs carry an Attachments tab wrapping record:attachments', () => {
       const page = buildDefaultPageSchema(filesDef);
+      const tabs = page.regions[0].components.find((c: any) => c.type === 'page:tabs');
+      const tab = tabs.items.find((t: any) => t.value === 'attachments');
+      expect(tab).toBeDefined();
+      expect(tab.label).toBe('Attachments');
+      expect(tab.children).toEqual([{ type: 'record:attachments' }]);
+      // The discussion footer is untouched — attachments are a tab, not a
+      // footer widget.
       const components = page.regions[0].components;
-      const footer = components[components.length - 1];
-      expect(footer.type).toBe('grid');
-      expect(footer.columns).toEqual({ xs: 1, lg: 3 });
-      expect(footer.children.map((c: any) => c.type)).toEqual([
-        'record:attachments',
-        'record:discussion',
-      ]);
-      // Attachments takes the narrow column, discussion the wide one.
-      expect(footer.children[0].className).toContain('lg:col-span-1');
-      expect(footer.children[1].className).toContain('lg:col-span-2');
-      // The bare record:discussion node is gone from the top level.
-      expect(components.map((c: any) => c.type)).not.toContain('record:discussion');
+      expect(components[components.length - 1].type).toBe('record:discussion');
     });
 
-    it('enable.files + hideDiscussion → full-width attachments, no grid', () => {
-      const page = buildDefaultPageSchema(filesDef, { hideDiscussion: true });
-      const components = page.regions[0].components;
-      const last = components[components.length - 1];
-      expect(last).toEqual({ type: 'record:attachments' });
+    it('the Attachments tab sits after Related and before Activity/History', () => {
+      const tabs = buildDefaultTabs(filesDef, {
+        related: [{ objectName: 'task', relationshipField: 'lead_id' }],
+        showActivity: true,
+        history: { entries: [], loading: false },
+      });
+      expect(tabs.items.map((t: any) => t.value)).toEqual([
+        'details',
+        'related',
+        'attachments',
+        'activity',
+        'history',
+      ]);
     });
 
-    it('hideAttachments suppresses the panel and restores the plain discussion footer', () => {
+    it('hideAttachments suppresses the tab', () => {
       const page = buildDefaultPageSchema(filesDef, { hideAttachments: true });
-      const components = page.regions[0].components;
-      expect(components[components.length - 1].type).toBe('record:discussion');
       expect(JSON.stringify(page)).not.toContain('record:attachments');
     });
 
-    it('attachments slot overrides the default node inside the grid cell', () => {
-      const page = buildDefaultPageSchema(filesDef, {
-        slots: { attachments: { type: 'div', id: 'custom-attachments' } },
-      });
-      const footer = page.regions[0].components[page.regions[0].components.length - 1];
-      expect(footer.type).toBe('grid');
-      expect(footer.children[0].id).toBe('custom-attachments');
-      expect(footer.children[0].className).toContain('lg:col-span-1');
-    });
-
-    it('a multi-node discussion slot is wrapped into ONE grid cell', () => {
+    it('a details slot override keeps the Attachments tab', () => {
       const page = buildDefaultPageSchema(filesDef, {
-        slots: {
-          discussion: [
-            { type: 'div', id: 'd1' },
-            { type: 'div', id: 'd2' },
-          ],
-        },
+        slots: { details: { type: 'div', id: 'custom-details' } },
       });
-      const footer = page.regions[0].components[page.regions[0].components.length - 1];
-      expect(footer.type).toBe('grid');
-      expect(footer.children).toHaveLength(2);
-      const cell = footer.children[1];
-      expect(cell.type).toBe('flex');
-      expect(cell.className).toContain('lg:col-span-2');
-      expect(cell.children.map((c: any) => c.id)).toEqual(['d1', 'd2']);
+      const tabs = page.regions[0].components.find((c: any) => c.type === 'page:tabs');
+      expect(tabs.items.some((t: any) => t.value === 'attachments')).toBe(true);
+      expect(tabs.items[0].children[0].id).toBe('custom-details');
     });
   });
 });