refactor(admin): switch AI generate prompt to imperative modal

Lift the generate-prompt UI out of the master-detail aside (where it occupied
70% of the viewport for a single language input) into the imperative modal
layer via `presentGeneratePrompt`. The aside is now reserved for the edit
flow, which needs the large surface for the Lexical editor.

Author: Innei

apps/admin/src/features/ai/components/article-grouped/ArticleEditPanel.tsx

@@ -2,31 +2,26 @@ import { X } from 'lucide-react'
 
 import { useI18n } from '~/i18n'
 
-import { GeneratePromptBody } from './GeneratePromptBody'
 import type { ArticleGroupedConfig } from './types'
 
 interface ArticleEditPanelProps<TItem> {
   config: ArticleGroupedConfig<TItem>
-  mode: 'edit' | 'generate'
-  editingItem: TItem | null
-  selectedArticleId: string | null
-  generateSubmitting: boolean
+  editingItem: TItem
   updateSubmitting: boolean
   onClose: () => void
-  onGenerate: (lang?: string) => Promise<unknown>
   onUpdate: (next: TItem) => Promise<void>
 }
 
 export function ArticleEditPanel<TItem>(props: ArticleEditPanelProps<TItem>) {
   const { t } = useI18n()
-  const { config, mode } = props
-  const title =
-    mode === 'generate' ? t(config.generate.labelKey) : t(config.editTitleKey)
+  const { config } = props
 
   return (
     <section className="flex h-full min-h-0 flex-col bg-surface-card">
       <header className="flex h-12 shrink-0 items-center justify-between gap-3 border-b border-border px-4">
-        <h3 className="truncate text-sm font-medium text-fg">{title}</h3>
+        <h3 className="truncate text-sm font-medium text-fg">
+          {t(config.editTitleKey)}
+        </h3>
         <button
           aria-label={t('ui.modal.closeAria')}
           className="inline-flex size-8 items-center justify-center rounded text-fg-muted transition-colors hover:bg-surface-inset hover:text-fg"
@@ -37,27 +32,13 @@ export function ArticleEditPanel<TItem>(props: ArticleEditPanelProps<TItem>) {
         </button>
       </header>
       <div className="min-h-0 flex-1">
-        {mode === 'generate' && props.selectedArticleId ? (
-          <GeneratePromptBody
-            generateLabel={t(config.generate.labelKey)}
-            inlineEmpty={t(config.inlineEmptyKey, { kind: t(config.kindKey) })}
-            langLabel={t('ai.translation.langLabel')}
-            onCancel={props.onClose}
-            onSubmit={async ({ lang }) => {
-              await props.onGenerate(lang)
-            }}
-            promptForLang={Boolean(config.generate.promptForLang)}
-            submitting={props.generateSubmitting}
-          />
-        ) : mode === 'edit' && props.editingItem ? (
-          <config.EditDrawerBody
-            item={props.editingItem}
-            key={config.getId(props.editingItem)}
-            onCancel={props.onClose}
-            onSubmit={props.onUpdate}
-            submitting={props.updateSubmitting}
-          />
-        ) : null}
+        <config.EditDrawerBody
+          item={props.editingItem}
+          key={config.getId(props.editingItem)}
+          onCancel={props.onClose}
+          onSubmit={props.onUpdate}
+          submitting={props.updateSubmitting}
+        />
       </div>
     </section>
   )

apps/admin/src/features/ai/components/article-grouped/ArticleGroupedDetailRoute.tsx

@@ -15,6 +15,7 @@ import { useArticleGroupedRouteContext } from './article-grouped-route-context'
 import { ArticleDetailEmptyState } from './ArticleDetailEmptyState'
 import { ArticleDetailPane } from './ArticleDetailPane'
 import { ArticleEditPanel } from './ArticleEditPanel'
+import { presentGeneratePrompt } from './GeneratePromptModal'
 import { useItemActions } from './useItemActions'
 
 export function ArticleGroupedDetailRoute<TItem>() {
@@ -25,7 +26,6 @@ export function ArticleGroupedDetailRoute<TItem>() {
   const { config } = ctx
 
   const [editingItemId, setEditingItemId] = useState<string | null>(null)
-  const [generating, setGenerating] = useState(false)
 
   const detailQuery = useQuery({
     enabled: Boolean(id),
@@ -100,7 +100,6 @@ export function ArticleGroupedDetailRoute<TItem>() {
       toast.success(
         result.created ? t('ai.toast.taskCreated') : t('ai.toast.taskExists'),
       )
-      setGenerating(false)
       await ctx.invalidate()
     },
   })
@@ -126,6 +125,18 @@ export function ArticleGroupedDetailRoute<TItem>() {
     deleteMutation.mutate(config.getId(item))
   }
 
+  const handleGenerate = async () => {
+    if (!id) return
+    const result = await presentGeneratePrompt({
+      inlineEmpty: t(config.inlineEmptyKey, { kind: t(config.kindKey) }),
+      langLabel: t('ai.translation.langLabel'),
+      promptForLang: Boolean(config.generate.promptForLang),
+      title: t(config.generate.labelKey),
+    })
+    if (!result) return
+    await generateMutation.mutateAsync({ refId: id, lang: result.lang })
+  }
+
   const { keyboardActions, buildMenu } = useItemActions<TItem>({
     config,
     onEdit: (item) => setEditingItemId(config.getId(item)),
@@ -140,10 +151,7 @@ export function ArticleGroupedDetailRoute<TItem>() {
     )
   }, [detailItems, editingItemId, config])
 
-  const closeEditPanel = () => {
-    setEditingItemId(null)
-    setGenerating(false)
-  }
+  const closeEditPanel = () => setEditingItemId(null)
 
   if (!id || !detailArticle) {
     return (
@@ -159,13 +167,11 @@ export function ArticleGroupedDetailRoute<TItem>() {
       asideDefaultSize="70%"
       asideMaxSize="85%"
       asideMinSize="480px"
-      asideMobileTitle={
-        editingItem ? t(config.editTitleKey) : t(config.generate.labelKey)
-      }
+      asideMobileTitle={t(config.editTitleKey)}
       className="h-full"
       mainMinSize="280px"
       onCloseAside={closeEditPanel}
-      open={Boolean(editingItem) || generating}
+      open={Boolean(editingItem)}
     >
       <ArticleDetailPane<TItem>
         article={detailArticle}
@@ -177,36 +183,28 @@ export function ArticleGroupedDetailRoute<TItem>() {
         onBack={ctx.onBack}
         onDelete={(item) => void confirmAndDelete(item)}
         onEdit={(item) => setEditingItemId(config.getId(item))}
-        onGenerate={() => setGenerating(true)}
+        onGenerate={() => void handleGenerate()}
         onItemFocus={(item) => {
           if (editingItemId !== null) {
             setEditingItemId(config.getId(item))
           }
         }}
       />
-      <ContentLayoutSlot
-        active={Boolean(editingItem) || generating}
-        id="ai-article-edit"
-      >
-        <ArticleEditPanel<TItem>
-          config={config}
-          editingItem={editingItem}
-          generateSubmitting={generateMutation.isPending}
-          mode={editingItem ? 'edit' : 'generate'}
-          onClose={closeEditPanel}
-          onGenerate={async (lang) => {
-            if (!id) return
-            await generateMutation.mutateAsync({ refId: id, lang })
-          }}
-          onUpdate={async (next) => {
-            await updateMutation.mutateAsync({
-              id: config.getId(next),
-              next,
-            })
-          }}
-          selectedArticleId={id}
-          updateSubmitting={updateMutation.isPending}
-        />
+      <ContentLayoutSlot active={Boolean(editingItem)} id="ai-article-edit">
+        {editingItem ? (
+          <ArticleEditPanel<TItem>
+            config={config}
+            editingItem={editingItem}
+            onClose={closeEditPanel}
+            onUpdate={async (next) => {
+              await updateMutation.mutateAsync({
+                id: config.getId(next),
+                next,
+              })
+            }}
+            updateSubmitting={updateMutation.isPending}
+          />
+        ) : null}
       </ContentLayoutSlot>
     </ContentLayout>
   )

apps/admin/src/features/ai/components/article-grouped/GeneratePromptBody.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react'
+
+import { useI18n } from '~/i18n'
+import { ModalFooter, ModalHeader } from '~/ui/feedback/modal'
+import { present, useModal } from '~/ui/feedback/modal-imperative'
+import { Button } from '~/ui/primitives/button'
+import { TextInput } from '~/ui/primitives/text-field'
+
+export interface GeneratePromptModalProps {
+  title: string
+  promptForLang: boolean
+  langLabel: string
+  inlineEmpty?: string
+}
+
+export interface GeneratePromptResult {
+  lang?: string
+}
+
+function GeneratePromptModal(props: GeneratePromptModalProps) {
+  const { t } = useI18n()
+  const modal = useModal<GeneratePromptResult>()
+  const [lang, setLang] = useState('zh')
+
+  const handleSubmit = () => {
+    if (props.promptForLang) {
+      const trimmed = lang.trim().toLowerCase()
+      if (!trimmed) return
+      modal.close({ lang: trimmed })
+    } else {
+      modal.close({})
+    }
+  }
+
+  return (
+    <div className="flex w-full flex-col">
+      <ModalHeader title={props.title} />
+      <div className="space-y-4 px-5 py-4">
+        {props.promptForLang ? (
+          <TextInput
+            autoFocus
+            label={props.langLabel}
+            onChange={setLang}
+            placeholder="zh"
+            value={lang}
+          />
+        ) : (
+          <p className="text-sm text-fg-muted">
+            {props.inlineEmpty ?? props.title}
+          </p>
+        )}
+      </div>
+      <ModalFooter>
+        <Button onClick={() => modal.dismiss()} type="button" variant="subtle">
+          {t('common.cancel')}
+        </Button>
+        <Button onClick={handleSubmit} type="button" variant="primary">
+          {props.title}
+        </Button>
+      </ModalFooter>
+    </div>
+  )
+}
+
+export async function presentGeneratePrompt(
+  props: GeneratePromptModalProps,
+): Promise<GeneratePromptResult | undefined> {
+  const handle = present<GeneratePromptModalProps, GeneratePromptResult>(
+    GeneratePromptModal,
+    props,
+    { modalProps: { popupStyle: { width: 'min(92vw, 28rem)' } } },
+  )
+  return await handle
+}