Church-Music/legacy-site/documentation/md-files/RECENT_UPDATES.md

Recent Updates - Profile Dropdown & Blank Sheet Feature

Changes Implemented (November 29, 2025)

1. Profile Dropdown with Hover Trigger

• Changed: Profile dropdown now triggers on hover instead of click
• Location: ProfileDropdown component in App.js
• How it works:
  • Mouse enters the profile button → dropdown appears
  • Mouse leaves the dropdown area → dropdown closes
  • Click on a profile → selects it and closes dropdown

2. Profile Selection Sync Across Pages

• Added: Global profile synchronization using localStorage and custom events

• Components Updated:

  • Home component
  • Profile component
  • Planning component
  • ProfileDropdown component

• How it works:

  1. When user selects a profile, it saves to localStorage with key selected_profile_id
  2. A custom event profileChanged is dispatched
  3. All components listen for this event and reload profiles
  4. Each page shows and uses the currently selected profile

• Benefits:

  • Profile selected on Home page reflects in Profile and Planning pages
  • Profile created in Profile page immediately appears in dropdown
  • Worship plans created use the currently selected profile
  • Selection persists across page refreshes

3. Create Blank Sheet Feature

• Added: New button below "Upload Lyric File" section on Home page
• Location: Home component in App.js
• Features:
  • Click "📄 Create Blank Sheet" button
  • Opens the same lyric modal with empty fields
  • Can manually type or paste song lyrics
  • Can add chords in the chord field
  • Has "Save to Database" and "Edit" buttons
  • Saves to song database like uploaded files

4. Technical Implementation

Event System for Profile Sync

// When profile is selected:
localStorage.setItem("selected_profile_id", profile.id.toString());
window.dispatchEvent(new Event('profileChanged'));

// In components:
useEffect(() => {
  const handleProfileChange = () => {
    loadProfiles(); // Reload and sync
  };
  window.addEventListener('profileChanged', handleProfileChange);
  return () => window.removeEventListener('profileChanged', handleProfileChange);
}, []);

Hover Trigger

<button
  onMouseEnter={() => setShowDropdown(true)}
  // Removed: onClick
>
  {selectedProfile ? selectedProfile.name : "Select Profile"} ▾
</button>

Blank Sheet Function

function createBlankSheet() {
  setModal({
    id: null,
    title: "",
    artist: "",
    band: "",
    lyrics: "",
    chords: "",
  });
  setShowBlankSheet(false);
}

5. Files Modified

• frontend/src/App.js (7 changes)
  • Home component: Added blank sheet state and function
  • ProfileDropdown: Changed to hover trigger, added event dispatching
  • Profile component: Added event listener for sync
  • Planning component: Added profile ID state and event listener

6. User Flow Examples

Creating a Profile and Using It

1. Hover over profile button (top-right) → see current profile
2. Navigate to Profile page
3. Enter name "John Smith", key "D", notes
4. Click "Save Profile"
5. Hover over profile button → see "John Smith" in dropdown
6. Click "John Smith" to select
7. Navigate to Planning page
8. Create new plan → automatically uses "John Smith" profile

Using Blank Sheet

1. On Home page, scroll to "Create Blank Sheet" section
2. Click "📄 Create Blank Sheet" button
3. Modal opens with empty fields
4. Enter song title, artist, band
5. Paste or type lyrics in the lyrics textarea
6. Add chords in the chords field (optional)
7. Click "Save to Database"
8. Song is now searchable in Database and Planning pages

7. Testing Checklist

✅ Profile dropdown opens on hover
✅ Profile selection persists across pages
✅ New profiles appear in dropdown immediately
✅ Planning page uses selected profile
✅ Blank sheet button opens modal
✅ Blank sheet can save to database
✅ Frontend compiled successfully
✅ Backend running on http://localhost:5000
✅ Frontend running on http://localhost:3000

8. Next Steps / Future Enhancements

• Add profile delete functionality
• Add bulk import for songs
• Add profile-specific song collections
• Add profile settings (theme, default language)
• Add profile export/import for backup