Landingpage

.gitignore

@@ -17,24 +17,15 @@
 /.next/
 /out/
 
-# Playwright Images
-/.playwright-mcp/*
-
 # Playwright test artifacts (DO NOT COMMIT)
 /playwright-report/
 /test-results/
+/lp-test-report/
 /.playwright-artifacts*/
 /.auth/
-
-# Playwright Images
+/e2e/results/
 /.playwright-mcp/*
 
-# Playwright test artifacts (DO NOT COMMIT)
-/playwright-report/
-/test-results/
-/.playwright-artifacts*/
-/.auth/
-
 # production
 /build
 
@@ -64,21 +55,6 @@ test-pathao-*.js
 trigger-*.mjs
 explore-*.mjs
 find-*.mjs
-# Agent work directory (temporary files, debug scripts, logs)
-.agent_work/
-analyze-*.js
-check-*.js
-check-*.mjs
-fix-*.js
-get-*.js
-get-*.mjs
-list-*.js
-list-*.mjs
-test-create-*.js
-test-pathao-*.js
-trigger-*.mjs
-explore-*.mjs
-find-*.mjs
 
 # env files (can opt-in for committing if needed)
 .env*

LANDING_PAGE_VISIBILITY_FIX.md

@@ -0,0 +1,229 @@
+# Landing Page Section Visibility Toggle Fix
+
+## Problem
+
+The visibility toggle button in the landing page editor had a critical bug: **once a section was hidden, it could not be made visible again** because the toggle button itself became un-clickable.
+
+### Root Cause
+
+In `src/components/landing-pages/landing-page-editor-client.tsx`, the entire `SectionEditor` component was wrapped with `pointer-events-none` when hidden:
+
+```jsx
+// ❌ BROKEN CODE
+<div className={isHidden ? "opacity-50 pointer-events-none" : ""}>
+  {/* Header with toggle button */}
+  <div className="flex items-center justify-between mb-3">
+    {/* Toggle switch INSIDE the pointer-events-none div! */}
+    <Switch checked={!isHidden} onCheckedChange={onToggleHidden} />
+  </div>
+  {/* Form fields */}
+</div>
+```
+
+**Issue**: The `pointer-events-none` class prevented interaction with ALL child elements, including the toggle switch. Users could not click the switch to unhide the section.
+
+---
+
+## Solution
+
+### Architecture Changes
+
+1. **Separated Header from Disabled Content**
+   - Header (with toggle switch) is ALWAYS interactive
+   - Only the form fields are disabled when hidden
+
+2. **Smart CSS Application**
+   - Moved `pointer-events: none` to ONLY the form fields container
+   - Header remains fully interactive with `z-10 relative` positioning
+
+3. **Enhanced Visual Feedback**
+   - Hidden sections now have a dashed border + light background
+   - Eye icons with color-coded status (🟠 Orange for hidden, 🟢 Green for visible)
+   - Smooth transitions (200ms) for all state changes
+   - Cursor feedback (cursor-not-allowed on hidden content, cursor-pointer on toggle)
+
+### Code Implementation
+
+```jsx
+// ✅ FIXED CODE
+return (
+  <div
+    className={`relative rounded-lg border transition-all duration-200 ${
+      isHidden
+        ? "border-dashed border-muted-foreground/40 bg-muted/20"
+        : "border-transparent bg-transparent"
+    }`}
+    style={{
+      padding: isHidden ? "1rem" : "0",
+    }}
+  >
+    {/* Header: Always interactive, never disabled */}
+    <div className="flex items-center justify-between mb-3">
+      <div>
+        <p className="text-sm font-medium">{section.label}</p>
+        {section.description && (
+          <p className="text-xs text-muted-foreground mt-0.5">{section.description}</p>
+        )}
+      </div>
+      {!section.isRequired && (
+        <div className="flex items-center gap-2 z-10 relative">
+          <Label className={`text-xs cursor-pointer select-none transition-colors ${
+            isHidden
+              ? "text-muted-foreground hover:text-foreground"
+              : "text-muted-foreground"
+          }`}>
+            {isHidden ? (
+              <span className="flex items-center gap-1 font-medium">
+                <EyeOff className="w-4 h-4 text-orange-500" /> Hidden
+              </span>
+            ) : (
+              <span className="flex items-center gap-1">
+                <Eye className="w-4 h-4 text-green-500" /> Visible
+              </span>
+            )}
+          </Label>
+          {/* Toggle switch is NOW ALWAYS CLICKABLE */}
+          <Switch
+            checked={!isHidden}
+            onCheckedChange={onToggleHidden}
+            className="cursor-pointer"
+            aria-label={isHidden ? "Show section" : "Hide section"}
+          />
+        </div>
+      )}
+    </div>
+
+    {/* Content: Disabled when hidden (pointer-events applied ONLY here) */}
+    <div
+      className={`transition-all duration-200 ${
+        isHidden ? "opacity-50 select-none cursor-not-allowed" : "opacity-100 cursor-auto"
+      }`}
+      style={{
+        pointerEvents: isHidden ? "none" : "auto",
+      }}
+    >
+      {/* Form fields render here */}
+    </div>
+  </div>
+);
+```
+
+---
+
+## CSS Enhancements
+
+### Visual Indicators
+
+| State | Appearance | Interaction |
+|-------|------------|-------------|
+| **Visible** | Normal opacity (100%), transparent border | All fields clickable, cursor-auto |
+| **Hidden** | Reduced opacity (50%), dashed border with light background | Fields un-clickable [cursor-not-allowed], but toggle is always active ✅ |
+
+### Custom CSS Applied
+
+```css
+/* Always interactive header */
+.section-header {
+  position: relative;
+  z-index: 10;
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+/* Icon color coding */
+.icon-visible {
+  color: hsl(142.1deg 72.2% 45.3%); /* Green */
+}
+
+.icon-hidden {
+  color: hsl(31.5deg 100% 50%); /* Orange */
+}
+
+/* Hidden section styling */
+.section-hidden {
+  border: 1px dashed hsl(215deg 14% 34%); /* Dashed border */
+  background-color: hsl(210deg 40% 96% / 0.2); /* Light background */
+  padding: 1rem;
+  border-radius: 0.5rem;
+  transition: all 200ms ease;
+}
+
+.section-hidden .content {
+  opacity: 0.5;
+  pointer-events: none; /* Only on content, not header */
+  cursor: not-allowed;
+  user-select: none;
+}
+
+.section-visible {
+  border: 1px solid transparent;
+  background-color: transparent;
+  padding: 0;
+  opacity: 1;
+  pointer-events: auto;
+  cursor: auto;
+  transition: all 200ms ease;
+}
+```
+
+---
+
+## Files Modified
+
+### `src/components/landing-pages/landing-page-editor-client.tsx`
+
+**Changes in `SectionEditor` function (lines ~580-640):**
+
+1. Restructured DOM hierarchy to separate header from content
+2. Applied classes and styles for visual state indication
+3. Removed `pointer-events-none` from wrapper and applied only to content div
+4. Added color-coded icons (Eye 🟢 / EyeOff 🟠)
+5. Enhanced accessibility with `aria-label` and `z-10 relative` positioning
+6. Added smooth 200ms transitions for all state changes
+
+---
+
+## Testing Verification
+
+✅ **TypeScript Compilation**: 0 errors  
+✅ **Landing Page Rendering**: All sections render correctly  
+✅ **Visibility Toggle**: 
+- Click toggle to hide section → Section dims, dashed border appears
+- Toggle button remains clickable
+- Click toggle again to show section → Section returns to normal, border disappears
+- **Loop test**: Can hide/show multiple times without issue ✓
+
+---
+
+## User Experience Improvements
+
+### Before Fix ❌
+- Hidden section appears faded and un-clickable
+- Toggle button also becomes un-clickable
+- User must refresh page or restart to recover section
+- No visual distinction for toggle button
+
+### After Fix ✅
+- Hidden section appears faded with dashed border + light background
+- Toggle button **always remains fully interactive**
+- Clear visual feedback (green checkmark for visible, orange eye-off for hidden)
+- Smooth animations when toggling state
+- Full keyboard accessibility with proper ARIA labels
+- Better UX with cursor feedback (cursor-not-allowed on disabled fields, cursor-pointer on toggle)
+
+---
+
+## Deployment Notes
+
+- **No database migrations required**
+- **No API changes required**
+- **Backward compatible**: Existing hidden section states are preserved
+- **Browser compatibility**: Modern browsers with CSS transitions and flexbox (all modern Chrome, Firefox, Safari, Edge)
+
+---
+
+## Summary
+
+This fix resolves a critical UX bug in the landing page editor where hidden sections could not be unhidden. By restructuring the component hierarchy and applying `pointer-events-none` only to the form fields (not the header), the toggle button remains always accessible. Enhanced CSS provides clear visual feedback with dashed borders, color-coded icons, and smooth transitions.
+
+**Key takeaway**: Always ensure control buttons/headers remain interactive even when their associated content is disabled. Avoid applying `pointer-events-none` to entire sections that contain interactive controls.