feat(charts): manage investigation charts in a scrolling workspace

src/features/workbench/components/geocoding-panel.tsx

@@ -1,5 +1,6 @@
 import { ChevronDown, Crosshair, LocateFixed, MapPin, Search, Trash2 } from "lucide-react";
 import { useId, useLayoutEffect, useRef } from "react";
+import { mapOptionInteractionVariants } from "@/features/map/core";
 import { Button } from "@/shared/ui/button";
 import { Input } from "@/shared/ui/input";
 import { cn } from "@/shared/ui/cn";
@@ -8,7 +9,7 @@ import { MAX_PLACE_SEARCH_RESULTS, type PlaceSearchItem } from "../api/place-sea
 
 const RESULT_VIEWPORT_CLASS_NAME = "h-72 min-h-0 max-h-72 overflow-y-auto overscroll-contain pr-1 [scrollbar-gutter:stable] [scrollbar-width:thin]";
 
-function PlaceSummary({ item, index, annotation = item.district }: { item: PlaceSearchItem; index?: number; annotation?: string }) {
+function PlaceSummary({ item, index, annotation = item.district, interactive = false }: { item: PlaceSearchItem; index?: number; annotation?: string; interactive?: boolean }) {
   return (
     <>
       {index !== undefined ? <span aria-hidden="true" className="w-5 shrink-0 self-start text-center text-[11px] font-normal leading-5 tabular-nums text-[var(--ink-muted)]">
@@ -16,7 +17,7 @@ function PlaceSummary({ item, index, annotation = item.district }: { item: Place
       </span> : null}
       <span className="min-w-0 flex-1 space-y-1">
         <span className="flex items-start justify-between gap-2 leading-5">
-          <span className="min-w-0 flex-1 break-words font-semibold text-[var(--ink)]">{item.name}</span>
+          <span className={cn("min-w-0 flex-1 break-words font-semibold", !interactive && "text-[var(--ink)]")}>{item.name}</span>
           <span aria-label={index === undefined && item.category ? `地点类型：${item.category}` : undefined} className="max-w-[40%] shrink-0 break-words text-right text-[11px] font-normal text-[var(--ink-muted)]">{annotation}</span>
         </span>
         <span className="block break-words text-[11px] font-normal leading-4 text-[var(--ink-muted)]">{item.address}</span>
@@ -123,16 +124,17 @@ export function GeocodingPanel({ geocoding }: { geocoding: WorkbenchGeocoding })
           {!selectionCollapsed ? <ul ref={candidateListRef} aria-busy={pending} className={cn(RESULT_VIEWPORT_CLASS_NAME, "bg-transparent", pending && "opacity-60")}>
             {results.items.map((item, index) => (
               <li key={item.id} className="border-b border-[var(--surface-divider)] last:border-b-0">
-                <Button type="button" variant="ghost" aria-pressed={result?.id === item.id} data-selection-tone="soft"
+                <button type="button" aria-pressed={result?.id === item.id}
                   aria-label={`定位 ${item.name} ${item.address}`} disabled={pending || !enabled}
-                  className={cn("h-auto min-h-16 w-full justify-start gap-3 rounded-lg border-0 whitespace-normal px-1 py-3 text-left text-xs focus-visible:ring-inset focus-visible:ring-offset-0 [@media(hover:hover)]:hover:bg-[var(--surface-control)] [@media(hover:hover)]:hover:text-[var(--ink)]",
-                    result?.id === item.id && "bg-[var(--action-selection-soft)] text-[var(--action-blue-hover)] [&_span]:text-[var(--action-blue-hover)] [@media(hover:hover)]:hover:bg-[var(--action-selection-soft)]")}
+                  className={cn("flex min-h-16 w-full items-center justify-start gap-3 rounded-xl border border-transparent whitespace-normal px-1 py-3 text-left text-xs text-[var(--ink)]",
+                    mapOptionInteractionVariants({ state: result?.id === item.id ? "selected" : "default" }),
+                    result?.id === item.id && "border-[var(--action-selection-border)] bg-[var(--action-selection-soft)] text-[var(--action-blue-hover)]")}
                   onClick={(event) => {
                     geocoding.select(item.id);
                     if (event.detail === 0) window.requestAnimationFrame(() => changeSelectionRef.current?.focus());
                   }}>
-                  <PlaceSummary item={item} index={index} />
-                </Button>
+                  <PlaceSummary item={item} index={index} interactive />
+                </button>
               </li>
             ))}
           </ul> : null}