✨ feat(vscode): 重写注释时在卡片下展示模型过程

vscode/webview-ui/src/codeReader/App.tsx

@@ -19,6 +19,7 @@ import { useDefinitionLinks } from './useDefinitionLinks'
 import { HighlightContext, useOccurrences } from './useOccurrences'
 import { useQa } from './useQa'
 import { useReveal } from './useReveal'
+import { useRewrite } from './useRewrite'
 import { useScrollPosition } from './useScrollPosition'
 import { collapsedIds } from './viewState'
 import { onMessage, postMessage, viewState } from './vscode'
@@ -36,10 +37,9 @@ function savedBlockModes(): BlockModes {
 export function App(): ReactElement | null {
   // 先于下面发 ready 的那个 effect 挂上收消息：ready 后扩展端马上发问答
   const qa = useQa()
+  /** 按注释规范重写的过程，只在这一页上 */
+  const rewrites = useRewrite()
   const [doc, setDoc] = useState<DocumentMessage | null>(null)
-  /** 正在按注释规范重写的块（记号）。点下去立刻记上，扩展端写完或失败再发 commentRewritten */
-  const rewritingRef = useRef(new Set<string>())
-  const [rewriting, setRewriting] = useState<ReadonlySet<string>>(NONE)
   const [view, setView] = useState<BlockModes>(savedBlockModes)
   const [focusId, setFocusId] = useState<string | null>(null)
   /** 等着滚过去的位置：新预览第一份文档带的，或已开着的预览收到的 reveal */
@@ -117,10 +117,6 @@ export function App(): ReactElement | null {
           return
         case 'diff':
           setDiff(msg.diff)
-          return
-        case 'commentRewritten':
-          rewritingRef.current.delete(msg.anchor)
-          setRewriting(new Set(rewritingRef.current))
       }
     })
     postMessage({ type: 'ready' })
@@ -133,13 +129,6 @@ export function App(): ReactElement | null {
   }, [view])
 
   const onFocused = useCallback(() => setFocusId(null), [])
-  const onRewriteComment = useCallback((anchor: string) => {
-    if (rewritingRef.current.has(anchor))
-      return
-    rewritingRef.current.add(anchor)
-    setRewriting(new Set(rewritingRef.current))
-    postMessage({ type: 'rewriteComment', anchor })
-  }, [])
   const kindNames = useMemo(() => new Map(doc?.attributes.find(attribute => attribute.id === 'kind')?.values.map(value => [value.id, value.name])), [doc])
   const kindName = useCallback((kind: string) => kindNames.get(kind) ?? kind, [kindNames])
   const tree = useMemo((): BlockTreeState | null => doc && {
@@ -161,13 +150,14 @@ export function App(): ReactElement | null {
     },
     onToggleFold: id => setFolded([id], !collapsed.has(id)),
     onSetFolds: folds => setView(prev => ({ ...prev, folds: { ...prev.folds, ...folds } })),
-    rewriting,
-    onRewriteComment,
+    rewrites: rewrites.runs,
+    onRewriteComment: rewrites.onRewrite,
+    onStopRewrite: rewrites.onStop,
     ...(qa.state.available && { qa }),
     ...(changes && { diff: changes }),
     ...(folded && { folded }),
     onOpenRun: id => setOpenedRuns(prev => new Set([...prev, id])),
-  }, [doc, view, collapsed, filter, covered, kindName, focusId, onFocused, setFolded, rewriting, onRewriteComment, qa, changes, folded])
+  }, [doc, view, collapsed, filter, covered, kindName, focusId, onFocused, setFolded, rewrites, qa, changes, folded])
 
   if (!doc || !tree)
     return null