From 57e03f304906793c149fd1fdfb78340e42b25eba Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Sat, 21 Mar 2026 14:49:28 -0700
Subject: [PATCH] feat(rsocials): add Campaign Wizard button to campaigns
 dashboard

Prominent teal gradient button in header and empty state of the
campaigns tab, linking to the AI-guided wizard.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/folk-campaigns-dashboard.ts    | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/modules/rsocials/components/folk-campaigns-dashboard.ts b/modules/rsocials/components/folk-campaigns-dashboard.ts
index 611d61c..b9c469a 100644
--- a/modules/rsocials/components/folk-campaigns-dashboard.ts
+++ b/modules/rsocials/components/folk-campaigns-dashboard.ts
@@ -209,8 +209,11 @@ class FolkCampaignsDashboard extends HTMLElement {
 			<div class="cd-empty">
 				<div class="cd-empty__icon">📋</div>
 				<div class="cd-empty__title">No campaign workflows yet</div>
-				<div class="cd-empty__subtitle">Create your first workflow to automate social media campaigns</div>
-				<button class="cd-btn cd-btn--primary cd-btn--new-empty">+ New Workflow</button>
+				<div class="cd-empty__subtitle">Use the AI wizard for guided campaign creation, or start a blank workflow</div>
+				<div class="cd-header__actions" style="justify-content:center">
+					<button class="cd-btn cd-btn--wizard cd-btn--new-empty" id="btn-wizard-empty">\uD83E\uDDD9 Campaign Wizard</button>
+					<button class="cd-btn cd-btn--primary cd-btn--new-empty">+ New Workflow</button>
+				</div>
 			</div>
 		` : '';
 
@@ -233,6 +236,12 @@ class FolkCampaignsDashboard extends HTMLElement {
 				}
 				.cd-btn--primary { background: var(--rs-primary, #3b82f6); color: #fff; }
 				.cd-btn--primary:hover { background: var(--rs-primary-hover, #2563eb); }
+				.cd-btn--wizard {
+					background: linear-gradient(135deg, var(--rs-accent, #14b8a6), #0d9488);
+					color: #fff; font-weight: 600;
+				}
+				.cd-btn--wizard:hover { opacity: 0.9; }
+				.cd-header__actions { display: flex; gap: 0.5rem; align-items: center; }
 
 				.cd-grid {
 					display: grid;
@@ -284,7 +293,10 @@ class FolkCampaignsDashboard extends HTMLElement {
 			<div class="cd-root">
 				<div class="cd-header">
 					<h2>Campaign Workflows</h2>
-					${!this.loading && this.workflows.length > 0 ? '<button class="cd-btn cd-btn--primary" id="btn-new">+ New Workflow</button>' : ''}
+					<div class="cd-header__actions">
+						<button class="cd-btn cd-btn--wizard" id="btn-wizard">\uD83E\uDDD9 Campaign Wizard</button>
+						${!this.loading && this.workflows.length > 0 ? '<button class="cd-btn cd-btn--primary" id="btn-new">+ New Workflow</button>' : ''}
+					</div>
 				</div>
 				${loadingState}
 				${emptyState}
@@ -308,8 +320,15 @@ class FolkCampaignsDashboard extends HTMLElement {
 		const btnNew = this.shadow.getElementById('btn-new');
 		if (btnNew) btnNew.addEventListener('click', () => this.createWorkflow());
 
-		const btnNewEmpty = this.shadow.querySelector('.cd-btn--new-empty');
+		const btnNewEmpty = this.shadow.querySelector('.cd-btn--new-empty:not(#btn-wizard-empty)');
 		if (btnNewEmpty) btnNewEmpty.addEventListener('click', () => this.createWorkflow());
+
+		// Wizard buttons
+		const wizardUrl = `${this.basePath}campaign-wizard`;
+		const btnWizard = this.shadow.getElementById('btn-wizard');
+		if (btnWizard) btnWizard.addEventListener('click', () => { window.location.href = wizardUrl; });
+		const btnWizardEmpty = this.shadow.getElementById('btn-wizard-empty');
+		if (btnWizardEmpty) btnWizardEmpty.addEventListener('click', () => { window.location.href = wizardUrl; });
 	}
 }