feat(admin): adopt remote draft updates without a manual refresh

Subscribe to the core DRAFT_UPDATE broadcast through a typed signal in the socket layer, so the write page reacts to a head moving elsewhere instead of discovering it on the next save.

With no unsaved edits the open draft is adopted silently through the existing load path, keeping scroll and panels; with unsaved edits a dismissible banner offers 'use new version' (confirmed, since it discards local work) or merge, reusing the same merge path as save conflicts. The subscription installs once and reads its handler through a ref, so it no longer re-subscribes on every keystroke.

Author: Innei

apps/admin/src/features/write/components/DraftHintBanner.tsx

@@ -1,12 +1,12 @@
 import type { LucideIcon } from 'lucide-react'
-import { AlertCircle, History, X } from 'lucide-react'
+import { AlertCircle, CloudDownload, History, X } from 'lucide-react'
 
 import { useI18n } from '~/i18n'
 import { Button } from '~/ui/primitives/button'
 import { cn } from '~/utils/cn'
 
 interface DraftHintBannerProps {
-  variant: 'list' | 'recovery'
+  variant: 'list' | 'recovery' | 'remote-update'
   message: string
   actionLabel: string
   onAction: () => void
@@ -22,6 +22,7 @@ const variantConfig: Record<
     icon: LucideIcon
     cardClass: string
     iconClass: string
+    messageClass: string
     actionVariant: 'primary' | 'secondary'
     dismissClass: string
   }
@@ -30,6 +31,7 @@ const variantConfig: Record<
     icon: History,
     cardClass: 'bg-surface-card border-border',
     iconClass: 'text-fg-muted',
+    messageClass: 'text-fg',
     actionVariant: 'secondary',
     dismissClass:
       'text-fg-subtle hover:bg-black/[0.06] hover:text-fg dark:hover:bg-white/[0.08]',
@@ -39,17 +41,28 @@ const variantConfig: Record<
     cardClass:
       'bg-amber-50 border-amber-200 dark:bg-amber-950/30 dark:border-amber-900/40',
     iconClass: 'text-amber-600 dark:text-amber-400',
+    messageClass: 'text-amber-900 dark:text-amber-100',
     actionVariant: 'primary',
     dismissClass:
       'text-amber-700/70 hover:bg-amber-100 hover:text-amber-900 dark:text-amber-300/70 dark:hover:bg-amber-900/40 dark:hover:text-amber-200',
   },
+  'remote-update': {
+    icon: CloudDownload,
+    cardClass: 'bg-surface-card border-border',
+    iconClass: 'text-accent',
+    messageClass: 'text-fg',
+    actionVariant: 'primary',
+    dismissClass:
+      'text-fg-subtle hover:bg-black/[0.06] hover:text-fg dark:hover:bg-white/[0.08]',
+  },
 }
 
 export function DraftHintBanner(props: DraftHintBannerProps) {
   const {
     icon: Icon,
     cardClass,
     iconClass,
+    messageClass,
     actionVariant,
     dismissClass,
   } = variantConfig[props.variant]
@@ -67,9 +80,7 @@ export function DraftHintBanner(props: DraftHintBannerProps) {
       <span
         className={cn(
           'min-w-0 flex-1 text-sm max-sm:basis-[calc(100%-2rem)]',
-          props.variant === 'recovery'
-            ? 'text-amber-900 dark:text-amber-100'
-            : 'text-fg',
+          messageClass,
         )}
       >
         {props.message}