feat(ui): syntax-highlight the read-only source previews (#1284)

The read-only previews beside Problems, Show Usages and TODO results are syntax-coloured from one whole-file parse (capped for very large files), so a line inside a block comment or a multi-line string is coloured as such; the pane renders plain first and recolours when the parse lands. SourcePreview takes the colouring as a colorize prop (the editor's previewColors), keeping src/ui free of editor imports, and the tok-* colours live once in global.css instead of a copy per view, with the theme's comment style.

Co-authored-by: qtvbwfn <[email protected]>

src/features/code-insight/ProblemsView.tsx

@@ -4,6 +4,7 @@ import { create } from "zustand";
 import clsx from "clsx";
 import type { Diagnostic, Severity } from "@/bindings";
 import { useEditorRegistry } from "@/editor/api";
+import { previewColors } from "@/editor/lineTokens";
 import { executeAction } from "@/platform/actions";
 import { formatBinding, hasPrimaryModifier, hostBinding, shortcutLabel } from "@/platform/keymap";
 import { basename, relativeDir, useProject } from "@/platform/project";
@@ -409,6 +410,7 @@ export function ProblemsView() {
                 line={selected?.d.range.start.line ?? 0}
                 highlights={selected ? [diagHighlight(selected.d)] : []}
                 load={previewText}
+                colorize={previewColors}
               />
             </SplitPanel>
           </SplitGroup>

src/features/code-insight/UsagesView.module.css

@@ -95,40 +95,6 @@
   color: var(--fg-search-match, inherit);
   border-radius: 2px;
 }
-/* Lezer classHighlighter tokens of usage lines (same colours as Find in Files results). */
-.preview :global(.tok-keyword),
-.preview :global(.tok-modifier),
-.preview :global(.tok-controlKeyword),
-.preview :global(.tok-operatorKeyword) {
-  color: var(--syn-keyword);
-}
-.preview :global(.tok-string),
-.preview :global(.tok-string2) {
-  color: var(--syn-string);
-}
-.preview :global(.tok-number),
-.preview :global(.tok-bool),
-.preview :global(.tok-atom) {
-  color: var(--syn-number);
-}
-.preview :global(.tok-typeName),
-.preview :global(.tok-className),
-.preview :global(.tok-namespace) {
-  color: var(--syn-type);
-}
-.preview :global(.tok-comment) {
-  color: var(--syn-comment);
-}
-.preview :global(.tok-meta),
-.preview :global(.tok-macroName) {
-  color: var(--syn-annotation);
-}
-.preview :global(.tok-propertyName) {
-  color: var(--syn-property);
-}
-.preview :global(.tok-variableName.tok-definition) {
-  color: var(--syn-function);
-}
 
 .note {
   min-width: 0;

src/features/code-insight/UsagesView.tsx

@@ -5,7 +5,7 @@
 import { useCallback, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
 import clsx from "clsx";
 import { create } from "zustand";
-import { tokenSpans, useLineTokens } from "@/editor/lineTokens";
+import { previewColors, tokenSpans, useLineTokens } from "@/editor/lineTokens";
 import { formatMessage, useTx } from "@/platform/i18n";
 import { shortcutLabel } from "@/platform/keymap";
 import { basename, relativeDir, useProject } from "@/platform/project";
@@ -399,6 +399,12 @@ function UsagesPreview({ node }: { node: Node | null }) {
     return (group?.usages ?? []).map((u) => ({ line: u.line, ranges: [[u.col, u.endCol] as const] }));
   }, [usage, search?.groups]);
   return (
-    <SourcePreview path={usage?.path ?? null} line={usage?.line ?? 0} highlights={highlights} load={previewText} />
+    <SourcePreview
+      path={usage?.path ?? null}
+      line={usage?.line ?? 0}
+      highlights={highlights}
+      load={previewText}
+      colorize={previewColors}
+    />
   );
 }