first wokring prototype

src/features/campaigns/CampaignJsonView.tsx

@@ -0,0 +1,32 @@
+import type { ApiSettings } from "../../types";
+import Card from "../../components/Card";
+import Button from "../../components/Button";
+import PageTitle from "../../components/PageTitle";
+import { useCampaignWorkspaceData } from "./hooks/useCampaignWorkspaceData";
+import { asRecord, getCampaignJson } from "./utils/campaignView";
+import { downloadJson, safeFileStem } from "./utils/draftEditor";
+
+export default function CampaignJsonView({ settings, campaignId }: { settings: ApiSettings; campaignId: string }) {
+  const { data, loading, error, reload } = useCampaignWorkspaceData(settings, campaignId);
+  const campaignJson = getCampaignJson(data.currentVersion);
+  const campaign = asRecord(campaignJson.campaign);
+  const filename = `${safeFileStem(String(campaign.id || data.campaign?.external_id || campaignId))}.json`;
+
+  return (
+    <div className="content-pad workspace-data-page">
+      <div className="page-heading split workspace-heading">
+        <div>
+          <PageTitle loading={loading}>JSON</PageTitle>
+        </div>
+        <div className="button-row compact-actions">
+          <Button onClick={reload} disabled={loading}>Reload</Button>
+          <Button onClick={() => downloadJson(filename, campaignJson)} disabled={!data.currentVersion}>Download JSON</Button>
+        </div>
+      </div>
+      {error && <div className="alert danger">{error}</div>}
+      <Card>
+        {!loading || data.currentVersion ? <pre className="code-panel">{JSON.stringify(campaignJson, null, 2)}</pre> : <pre className="code-panel">{"{}"}</pre>}
+      </Card>
+    </div>
+  );
+}