Session 230: Fix 9 broken interactive elements — Education Centre buttons, disabled forms, calendar subscribe, profiles UX

Co-authored-by: Stan2032 <68326386+Stan2032@users.noreply.github.com>

Author: Copilot

_agents/TODO.md

@@ -1,6 +1,6 @@
 # Global Anti-CCP Resistance Hub — Active To-Do List
 
-> Last Updated: March 7, 2026 (Session 229)
+> Last Updated: March 7, 2026 (Session 230)
 >
 > **Location:** `_agents/TODO.md` — Active tasks only.
 > **Completed tasks:** See `_agents/TODO_COMPLETED.md` for full archive.
@@ -53,6 +53,12 @@
 
 - [x] **Visual overlap fixes**: ✅ InteractiveTimeline year labels fixed (Session 222) — adaptive 5-year intervals with min-gap endpoint exclusion, min-w-[540px] for mobile horizontal scroll. Verified zero overlaps at 375px (30px gaps), 768px (52px gaps), 1280px (69px gaps). Remaining audit: check ALL components at zoom levels 100%/125%/150% × viewports 375/768/1280px for any other text overlap or truncation issues. *(Originally reported by human, Session 221)*
 - [x] **Placeholder text standardization**: ✅ Session 225 — All 48 placeholder instances across 30 files standardized to `placeholder:text-slate-400` (Tailwind v3+ syntax). Fixed 2 `placeholder-slate-600` violations, converted 19 `placeholder-slate-500` and 9 `placeholder-slate-400` (old syntax). Added 11th design system compliance test preventing reintroduction. Focus colors also standardized: 7 components fixed from non-terminal colors (emerald/green/cyan/amber/red) to terminal palette (`#4afa82`/`#22d3ee`).
+- [x] **Non-functional interactive elements audit & fix**: ✅ Session 230 — Full site audit for broken buttons, forms, and misleading UI. Fixed 9 issues across 8 files:
+  - **EducationalResources.jsx**: "Start Course" button (no onClick) → replaced with "Course content coming soon" notice. Download buttons (no onClick, no URL) → replaced with disabled-style indicators.
+  - **EventCalendar.jsx**: "Subscribe to Calendar" button (styled active but non-functional) → changed to disabled style with `cursor-not-allowed`.
+  - **VolunteerSignup.jsx, ContactForm.jsx, NewsDigest.jsx, IncidentReportForm.jsx**: Forms appear fully functional but data goes nowhere when backend not connected → forms now visually disabled (`opacity-50 pointer-events-none`) when no backend, with existing "Coming Soon" warning.
+  - **ReportSighting.jsx**: Form always non-functional (no backend integration at all) → form content disabled with `opacity-50 pointer-events-none`.
+  - **ProfilesIndex.jsx**: Unbuilt profile cards look clickable → increased opacity reduction to 50% with `cursor-default`. *(Originally reported by human, Session 230)*
 
 ### Navigation Simplification (Session 136)
 - [x] **Sidebar nav reduced**: 11 items → 7 items (Dashboard, Intelligence, Political Prisoners, Profiles, Take Action, Education, Security)

src/components/ContactForm.jsx

@@ -112,7 +112,7 @@ const ContactForm = () => {
       )}
 
       {/* Form */}
-      <form onSubmit={handleSubmit} className="space-y-6">
+      <form onSubmit={handleSubmit} className={`space-y-6 ${!backendConnected ? 'opacity-50 pointer-events-none' : ''}`}>
         {/* Name and Email */}
         <div className="bg-[#111820]/50 border border-[#1c2a35] p-4">
           <h3 className="font-medium text-white mb-4"><MessageCircle className="w-4 h-4 inline mr-1" /> Your Details</h3>

src/components/EventCalendar.jsx

@@ -334,7 +334,7 @@ const EventCalendar = () => {
           Add these events to your calendar to never miss an important date.
         </p>
         <div className="flex flex-wrap gap-4">
-          <button className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded text-sm transition-colors">
+          <button disabled className="bg-[#111820] border border-[#1c2a35] text-slate-400 px-4 py-2 rounded text-sm cursor-not-allowed">
             Subscribe to Calendar (Coming Soon)
           </button>
           <button 

src/components/IncidentReportForm.jsx

@@ -191,7 +191,7 @@ const IncidentReportForm = () => {
       </div>
 
       {/* Form */}
-      <form onSubmit={handleSubmit} className="p-6">
+      <form onSubmit={handleSubmit} className={`p-6 ${!backendConnected ? 'opacity-50 pointer-events-none' : ''}`}>
         {/* Step 1: Incident Type */}
         {step === 1 && (
           <div className="space-y-4">

src/components/NewsDigest.jsx

@@ -176,7 +176,7 @@ const NewsDigest = () => {
       )}
 
       {/* Subscription Form */}
-      <form onSubmit={handleSubmit} className="space-y-6">
+      <form onSubmit={handleSubmit} className={`space-y-6 ${!backendConnected ? 'opacity-50 pointer-events-none' : ''}`}>
         {/* Email */}
         <div className="bg-[#111820]/50 border border-[#1c2a35] p-4">
           <h3 className="font-medium text-white mb-3 flex items-center gap-1"><Mail className="w-4 h-4" /> Email Address</h3>

src/components/ReportSighting.jsx

@@ -207,7 +207,7 @@ const ReportSighting = () => {
         </div>
       </div>
 
-      <div className="p-6">
+      <div className="p-6 opacity-50 pointer-events-none">
         <>
           {/* Step 1: Select Type */}
           {step === 1 && (

src/components/VolunteerSignup.jsx

@@ -158,7 +158,7 @@ const VolunteerSignup = () => {
       )}
 
       {/* Form */}
-      <form onSubmit={handleSubmit} className="space-y-6">
+      <form onSubmit={handleSubmit} className={`space-y-6 ${!backendConnected ? 'opacity-50 pointer-events-none' : ''}`}>
         {/* Basic Info */}
         <div className="bg-[#111820]/50 border border-[#1c2a35] p-4">
           <h3 className="font-medium text-white mb-4"><FileText className="w-4 h-4 inline mr-1" /> Basic Information</h3>

src/pages/EducationalResources.jsx

@@ -1,9 +1,9 @@
 import { useState, lazy, Suspense } from 'react'
 import { 
-  Play, 
   Clock, 
   Download,
-  Search
+  Search,
+  Info
 } from 'lucide-react'
 import educationalData from '../data/educational_modules.json'
 
@@ -94,7 +94,7 @@ const EducationalResources = () => {
 
   const ResourceCard = ({ resource }) => (
     <div
-      className="bg-[#111820] border border-[#1c2a35] p-4 hover:border-[#2a9a52] transition-colors"
+      className="bg-[#111820] border border-[#1c2a35] p-4"
     >
       <div className="flex items-start justify-between">
         <div className="flex-1">
@@ -104,12 +104,13 @@ const EducationalResources = () => {
             <span>{resource.size}</span>
           </div>
         </div>
-        <button
-          className="p-2 bg-[#22d3ee] hover:bg-[#22d3ee]/80 transition-colors"
-          aria-label={`Download ${resource.title}`}
+        <div
+          className="p-2 bg-[#111820] border border-[#1c2a35]"
+          title="Download coming soon"
+          aria-label={`Download ${resource.title} — coming soon`}
         >
-          <Download className="w-5 h-5 text-white" />
-        </button>
+          <Download className="w-5 h-5 text-slate-500" />
+        </div>
       </div>
     </div>
   )
@@ -256,12 +257,12 @@ const EducationalResources = () => {
                       </div>
                     </div>
 
-                    <button
-                      className="mt-6 w-full bg-[#4afa82]/10 hover:bg-[#4afa82]/20 text-[#4afa82] border border-[#4afa82]/30 px-6 py-3 font-mono font-medium transition-colors flex items-center justify-center space-x-2"
+                    <div
+                      className="mt-6 w-full bg-[#111820] text-slate-400 border border-[#1c2a35] px-6 py-3 font-mono font-medium flex items-center justify-center space-x-2"
                     >
-                      <Play className="w-5 h-5" />
-                      <span>$ start_course</span>
-                    </button>
+                      <Info className="w-5 h-5" />
+                      <span>Course content coming soon — use the resources below to start learning</span>
+                    </div>
                   </>
                 )
               })()}

src/pages/profiles/ProfilesIndex.jsx

@@ -299,7 +299,7 @@ const ProfileCard = ({ profile }) => {
   const CardWrapper = profile.built ? Link : 'div';
   const wrapperProps = profile.built
     ? { to: profile.path, className: 'group block' }
-    : { className: 'block opacity-75' };
+    : { className: 'block opacity-50 cursor-default' };
 
   return (
     <CardWrapper {...wrapperProps}>

src/test/EducationalResources.test.jsx

@@ -122,7 +122,7 @@ describe('EducationalResources', () => {
     expect(screen.getAllByText('Topics Covered').length).toBeGreaterThanOrEqual(2); // stat card + details
     expect(screen.getByText('Narrative Techniques')).toBeTruthy();
     expect(screen.getByText('Visual Manipulation')).toBeTruthy();
-    expect(screen.getByText('$ start_course')).toBeTruthy();
+    expect(screen.getByText(/Course content coming soon/)).toBeTruthy();
   });
 
   it('shows downloadable resources', () => {