Files
genshin-assistant/src/pages/app/AppPageLayout.tsx
T
AzuTear 8d4d24f0bb feat(ui): separate dev info into a Diagnose view, declutter the scan workspace
Reworks the UI so the Scan tab shows only core actions and all developer /
diagnostic surfaces live in one dedicated view.

- New "Diagnose" nav view. ScanView stays mounted for scan|diagnose (the scan
  controller state persists across the switch) and renders either the clean
  workspace or the new DiagnosticsView by mode.
- DiagnosticsView consolidates runtime/rights, grid detection, learning + data
  staleness, fingerprint, auto-scan counters, the automation log, the dev-output
  toggle, the Demo-Daten action, and the raw crops/OCR/confidence dump. Reuses
  the existing diagnostics/details model hooks.
- Scan workspace decluttered: removed the Scanner Diagnose button and the Details
  button, dropped the rules/grid/mode dev fields from the result brief and capture
  meta, shortened the topbar headline, and moved Demo-Daten out of the topbar.
- Removed the now-dead ScanDiagnosticsModal / ScanDetailsModal components (their
  content moved into the view); metrics grid hidden on the Diagnose view.
- Added dev:web script + .claude/launch.json for browser preview.

Verified in the browser preview (both views render, no console errors); 120
tests + build green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-06 07:46:31 +02:00

83 lines
3.0 KiB
TypeScript

import { Eye, Play, Save } from "lucide-react";
import { BuildsView } from "../../features/builds/BuildsView";
import { OverlayPreview, OverlaySettings } from "../../features/overlay/OverlayViews";
import { ScanView } from "../../features/scan/ScanView";
import { TriageView } from "../../features/triage/TriageView";
import { AppMetrics, AppShell, AppSidebar, AppTopbar } from "../../features/layout";
import type { AppPageLayoutProps } from "./types";
import { useAppPageLayoutModel } from "./hooks/useAppPageLayoutModel";
export function AppPageLayout({ controller }: AppPageLayoutProps) {
const {
activeView,
setActiveView,
isOverlay,
isScanning,
snapshot,
captureSources,
selectedSourceId,
setSelectedSourceId,
latestCapture,
topbarStatus,
bridgeReady,
canExportGood,
canShowOverlay,
metricCards,
refreshCaptureSources,
captureSelectedSource,
exportCurrentGood,
loadStoredArtifactSnapshot,
showOverlay,
} = controller;
const { renderNavigation, handleDemoScan } = useAppPageLayoutModel({ controller });
if (isOverlay) {
return <OverlayPreview snapshot={snapshot} />;
}
return (
<AppShell
sidebar={<AppSidebar activeView={activeView} items={renderNavigation} onSelect={setActiveView} />}
children={
<>
<AppTopbar
topbarStatus={topbarStatus}
canExportGood={canExportGood}
canShowOverlay={canShowOverlay}
isScanning={isScanning}
artifactCount={snapshot.artifacts.length}
onExportGood={exportCurrentGood}
onShowOverlay={showOverlay}
onDemoScan={handleDemoScan}
exportIcon={<Save size={16} />}
overlayIcon={<Eye size={16} />}
demoIcon={<Play size={16} />}
/>
{activeView !== "diagnose" && <AppMetrics metricCards={metricCards} />}
{(activeView === "scan" || activeView === "diagnose") && (
<ScanView
mode={activeView === "diagnose" ? "diagnose" : "workspace"}
onDemoScan={handleDemoScan}
canDemoScan={!isScanning}
isScanning={isScanning}
snapshot={snapshot}
captureSources={captureSources}
selectedSourceId={selectedSourceId}
setSelectedSourceId={setSelectedSourceId}
latestCapture={latestCapture}
captureStatus={topbarStatus}
refreshCaptureSources={refreshCaptureSources}
captureSelectedSource={captureSelectedSource}
bridgeReady={bridgeReady}
onStoredArtifactsChanged={loadStoredArtifactSnapshot}
/>
)}
{activeView === "triage" && <TriageView snapshot={snapshot} />}
{activeView === "builds" && <BuildsView snapshot={snapshot} />}
{activeView === "overlay" && <OverlaySettings canShowOverlay={canShowOverlay} onShowOverlay={showOverlay} />}
</>
}
/>
);
}