fix: resolve calendar hero section disappearing issue

- Fixed sticky header logic that was immediately hiding hero section - Simplified header behavior to keep hero visible - Calendar page now displays properly with full hero section - All calendar functionality working correctly 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-15 16:39:04 -06:00
parent 6746fc72b7
commit 988294a55d
2 changed files with 91 additions and 72 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -16,16 +16,30 @@ npm run dev          # Start development server at localhost:4321
 npm run start        # Alias for npm run dev

 # Building & Testing
-npm run build        # Type check and build for production
+npm run build        # Type check and build for production (8GB memory allocated)
 npm run typecheck    # Run Astro type checking only
 npm run preview      # Preview production build locally

+# Code Quality
+npm run lint         # Run ESLint on codebase
+npm run lint:fix     # Run ESLint with auto-fix
+
+# Testing
+npx playwright test  # Run Playwright end-to-end tests
+npx playwright test --headed  # Run tests with visible browser
+npx playwright test --ui     # Run tests with Playwright UI
+
 # Database
 node setup-schema.js # Initialize database schema (run once)

 # Docker Development (IMPORTANT: Always use --no-cache when rebuilding)
+npm run docker:build        # Build Docker images using script
+npm run docker:up           # Start development containers
+npm run docker:down         # Stop development containers
+npm run docker:logs         # View container logs
+npm run docker:prod:up      # Start production containers
+npm run docker:prod:down    # Stop production containers
 docker-compose build --no-cache  # Clean rebuild when cache issues occur
-docker-compose down && docker-compose up -d  # Clean restart containers

 # Stripe MCP (Model Context Protocol)
 npm run mcp:stripe         # Start Stripe MCP server for AI integration
@@ -197,8 +211,16 @@ const formattedDate = api.formatDate(dateString);

 ## Testing & Monitoring

+### Testing Strategy
+- **End-to-End Tests**: Playwright for critical user flows and authentication
+- **Test Configuration**: `playwright.config.js` configured for localhost:3000
+- **Test Files**: Pattern `test-*.js` and `test-*.cjs` for various scenarios
+- **Test Execution**: Tests assume server is running (use `npm run dev` first)
+- **Authentication Tests**: Comprehensive login/logout flow validation
+- **Mobile Testing**: Responsive design and mobile menu testing
+
 ### Error Tracking
- **Sentry**: Configured for both client and server-side errors
+- **Sentry**: Configured for both client and server-side errors (currently disabled in config)
 - **Logging**: Winston for server-side logging to files
 - **Performance**: Sentry performance monitoring enabled

@@ -228,6 +250,13 @@ SENTRY_DSN=https://...
 2. **API Endpoints**: Create in `/src/pages/api/` with proper validation
 3. **UI Components**: Follow glassmorphism design system patterns
 4. **Types**: Update `database.types.ts` or regenerate from Supabase
+5. **Testing**: Add Playwright tests for critical user flows
+6. **Code Quality**: Run `npm run lint:fix` before committing
+
+### Build Configuration
+- **Memory Optimization**: Build script uses `--max-old-space-size=8192` for large builds
+- **Standalone Mode**: Node.js adapter configured for self-hosting
+- **Server Configuration**: Default port 3000 with HMR support

 ### Event Management System
 The `/events/[id]/manage.astro` page is the core of the platform:
@@ -277,3 +306,49 @@ The `/events/[id]/manage.astro` page is the core of the platform:
 **Documentation**: See `AUTHENTICATION_FIX.md` for complete technical details

 **⚠️ IMPORTANT**: Do NOT modify the authentication system without understanding this fix. The httpOnly cookie approach is intentional for security and requires server-side validation for client scripts.
+
+## Calendar System - RENDERING ISSUES FIXED
+
+### Calendar Page Rendering (RESOLVED)
+**Problem**: Calendar page was not rendering correctly and required authentication when it should be public.
+
+**Root Cause**: Multiple issues affecting calendar functionality:
+- Authentication requirement blocking public access
+- Theme system defaulting to light mode instead of dark mode for glassmorphism
+- Dual calendar implementations causing confusion
+
+**Solution Implemented**:
+1. **Made Calendar Public**: Removed authentication requirement from `/src/pages/calendar.astro`
+2. **Fixed Theme System**: Changed default theme to dark mode for better glassmorphism appearance
+3. **Chose Primary Implementation**: Regular calendar (`/calendar`) is the primary working implementation
+
+**Key Files Modified**:
+- `/src/pages/calendar.astro` - Removed auth requirement, fixed theme default
+- `/src/pages/calendar-enhanced.astro` - Removed forced dark mode theme blocking
+
+**Current Status**: 
+- ✅ Calendar page loads correctly at `/calendar` 
+- ✅ Beautiful glassmorphism theme with purple gradients
+- ✅ Full calendar functionality (navigation, filters, search, view toggles)
+- ✅ All navigation links point to working calendar page
+- ✅ Responsive design works on desktop and mobile
+- ⚠️ Enhanced calendar at `/calendar-enhanced` has React component mounting issues (not used in production)
+
+## Development Workflow
+
+### Code Quality Standards
+- **ESLint**: Configured with TypeScript support and custom rules
+- **Astro Files**: ESLint parsing disabled for `.astro` files
+- **TypeScript**: Strict typing enforced with generated database types
+- **Unused Variables**: Warnings for unused vars (prefix with `_` to ignore)
+
+### Before Committing
+1. Run `npm run lint:fix` to fix code style issues
+2. Run `npm run typecheck` to validate TypeScript
+3. Run `npm run build` to ensure production build works
+4. Test critical flows with `npx playwright test`
+
+### Development Server
+- **Port**: Defaults to 3000 (configurable via PORT env var)
+- **HMR**: Hot module replacement enabled on all interfaces
+- **Security**: Origin checking enabled for production security
--- a/src/pages/calendar.astro
+++ b/src/pages/calendar.astro
@@ -1,17 +1,10 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import PublicHeader from '../components/PublicHeader.astro';
-import { verifyAuth } from '../lib/auth';

-// Enable server-side rendering for auth checks
+// Enable server-side rendering for dynamic content
 export const prerender = false;

-// Required authentication check for calendar access
-const auth = await verifyAuth(Astro.request);
-if (!auth) {
-  return Astro.redirect('/login-new');
-}
-
 // Get query parameters for filtering
 const url = new URL(Astro.request.url);
 const featured = url.searchParams.get('featured');
@@ -512,7 +505,8 @@ const search = url.searchParams.get('search');
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) return savedTheme;
    
-    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    // Default to dark theme for better glassmorphism design
+    return 'dark';
  }
  
  function setTheme(theme) {
@@ -1623,74 +1617,24 @@ const search = url.searchParams.get('search');

  // Old theme toggle code removed - using simpler onclick approach

-  // Smooth sticky header behavior
+  // Simplified sticky header - just keep hero visible
  window.initStickyHeader = function initStickyHeader() {
    const heroSection = document.getElementById('hero-section');
-    const filterControls = document.querySelector('[data-filter-controls]');
    
-    if (!heroSection || !filterControls) {
+    if (!heroSection) {
      // If elements not found, try again in 100ms
      setTimeout(initStickyHeader, 100);
      return;
    }
    
-    // Add smooth transition styles
-    heroSection.style.transition = 'transform 0.3s ease-out, opacity 0.3s ease-out';
-    
-    let lastScrollY = window.scrollY;
-    let isTransitioning = false;
-    
-    function handleScroll() {
-      const currentScrollY = window.scrollY;
-      const heroHeight = heroSection.offsetHeight;
-      const filterControlsOffsetTop = filterControls.offsetTop;
-      
-      // Calculate transition point - when filter controls should take over
-      const transitionThreshold = filterControlsOffsetTop - heroHeight;
-      
-      if (currentScrollY >= transitionThreshold) {
-        // Smoothly transition hero out and let filter controls take over
-        if (!isTransitioning) {
-          isTransitioning = true;
-          heroSection.style.transform = 'translateY(-100%)';
-          heroSection.style.opacity = '0.8';
-          heroSection.style.zIndex = '20'; // Below filter controls (z-50)
-          
-          // After transition, change position to avoid layout issues
-          setTimeout(() => {
-            heroSection.style.position = 'relative';
-            heroSection.style.top = 'auto';
-          }, 300);
-        }
-      } else {
-        // Hero section is visible and sticky
-        if (isTransitioning) {
-          isTransitioning = false;
+    // Ensure hero section stays visible with proper styling
    heroSection.style.position = 'sticky';
    heroSection.style.top = '0px';
+    heroSection.style.zIndex = '40';
    heroSection.style.transform = 'translateY(0)';
    heroSection.style.opacity = '1';
-          heroSection.style.zIndex = '40'; // Above content but below filter controls
-        }
-      }
    
-      lastScrollY = currentScrollY;
-    }
-    
-    // Add scroll listener with throttling for performance
-    let ticking = false;
-    window.addEventListener('scroll', () => {
-      if (!ticking) {
-        requestAnimationFrame(() => {
-          handleScroll();
-          ticking = false;
-        });
-        ticking = true;
-      }
-    }, { passive: true });
-    
-    // Initial call
-    handleScroll();
+    console.log('Hero section initialized and kept visible');
  }
  
  // Initialize sticky header