fix(documents-ui): a11y, mobile, realtime lift, type-safety, UI polish

- A2: lift useRealtimeInvalidation to DocumentsHub (covers all 3 render modes)
- B1-B4: aria-label, aria-pressed, aria-expanded, Lock SVG aria-hidden
- C1-C7: Sheet wrap for mobile sidebar, border axis fix, 44x44 tap targets
- Mobile Important: useMobileChrome title, FolderActionsMenu icon size, breadcrumb tap targets, signer email truncate
- Type-safety: ENTITY_TYPES guard, AggregatedSection discriminated union
- UI/UX: em-dash to colon in SigningDetailsDialog, Loading state normalize, StatusPill on HubRootView, view signing details as Button

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/documents/aggregated-section.tsx

@@ -2,16 +2,35 @@
 
 import { Loader2 } from 'lucide-react';
 
-import type { AggregatedGroup } from '@/hooks/use-aggregated-listing';
+import { Button } from '@/components/ui/button';
+import type {
+  AggregatedFile,
+  AggregatedGroup,
+  AggregatedWorkflow,
+} from '@/hooks/use-aggregated-listing';
 
-interface AggregatedSectionProps<T> {
+/**
+ * Discriminated-union of the two item shapes the aggregated projection
+ * surfaces (files / workflows). Keeps `renderRow` strictly typed so callers
+ * don't have to widen to `unknown` or recast inside the row renderer.
+ */
+type AggregatedItemKind =
+  | { kind: 'files'; items: AggregatedFile[] }
+  | { kind: 'workflows'; items: AggregatedWorkflow[] };
+
+type ItemOfKind<K extends AggregatedItemKind['kind']> = Extract<
+  AggregatedItemKind,
+  { kind: K }
+>['items'][number];
+
+interface AggregatedSectionProps<K extends AggregatedItemKind['kind']> {
   title: string;
   icon?: React.ReactNode;
-  groups: AggregatedGroup<T>[];
-  renderRow: (item: T, group: AggregatedGroup<T>) => React.ReactNode;
+  groups: AggregatedGroup<ItemOfKind<K>>[];
+  renderRow: (item: ItemOfKind<K>, group: AggregatedGroup<ItemOfKind<K>>) => React.ReactNode;
   emptyMessage?: string;
   loading?: boolean;
-  onShowAll?: (group: AggregatedGroup<T>) => void;
+  onShowAll?: (group: AggregatedGroup<ItemOfKind<K>>) => void;
 }
 
 /**
@@ -20,7 +39,7 @@ interface AggregatedSectionProps<T> {
  * link drills into the source-scoped flat list. Hidden when groups is
  * empty.
  */
-export function AggregatedSection<T>({
+export function AggregatedSection<K extends AggregatedItemKind['kind']>({
   title,
   icon,
   groups,
@@ -28,7 +47,7 @@ export function AggregatedSection<T>({
   emptyMessage = 'Nothing here yet.',
   loading,
   onShowAll,
-}: AggregatedSectionProps<T>) {
+}: AggregatedSectionProps<K>) {
   const total = groups.reduce((sum, g) => sum + g.total, 0);
 
   if (loading) {
@@ -65,7 +84,7 @@ export function AggregatedSection<T>({
       </h3>
       <div className="divide-y">
         {groups.map((g) => (
-          <GroupBlock
+          <GroupBlock<K>
             key={`${g.source}-${g.label}`}
             group={g}
             renderRow={renderRow}
@@ -77,16 +96,19 @@ export function AggregatedSection<T>({
   );
 }
 
-function GroupBlock<T>({
+function GroupBlock<K extends AggregatedItemKind['kind']>({
   group,
   renderRow,
   onShowAll,
 }: {
-  group: AggregatedGroup<T>;
-  renderRow: (item: T, group: AggregatedGroup<T>) => React.ReactNode;
-  onShowAll?: (group: AggregatedGroup<T>) => void;
+  group: AggregatedGroup<ItemOfKind<K>>;
+  renderRow: (item: ItemOfKind<K>, group: AggregatedGroup<ItemOfKind<K>>) => React.ReactNode;
+  onShowAll?: (group: AggregatedGroup<ItemOfKind<K>>) => void;
 }) {
-  const items = (group.files ?? group.workflows ?? []) as T[];
+  // The server always sets exactly one of `files` / `workflows` per group;
+  // unify them into a single list for rendering. The discriminated-union
+  // generic on `AggregatedSection` keeps the row type correct upstream.
+  const items = ((group.files ?? group.workflows ?? []) as unknown) as ItemOfKind<K>[];
   return (
     <div className="px-3 py-2">
       <header className="mb-1 text-[0.7rem] font-medium uppercase tracking-wide text-muted-foreground">
@@ -99,13 +121,14 @@ function GroupBlock<T>({
         ))}
       </ul>
       {group.total > items.length ? (
-        <button
-          type="button"
-          className="mt-1 text-xs text-brand hover:underline"
+        <Button
+          variant="ghost"
+          size="sm"
+          className="mt-1 min-h-[44px] px-2 text-xs text-brand hover:underline"
           onClick={() => onShowAll?.(group)}
         >
           Show all ({group.total})
-        </button>
+        </Button>
       ) : null}
     </div>
   );