144 lines
4.4 KiB
Markdown
144 lines
4.4 KiB
Markdown
# 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
|
|
|
|
```javascript
|
|
// 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
|
|
|
|
```javascript
|
|
<button
|
|
onMouseEnter={() => setShowDropdown(true)}
|
|
// Removed: onClick
|
|
>
|
|
{selectedProfile ? selectedProfile.name : "Select Profile"} ▾
|
|
</button>
|
|
```
|
|
|
|
#### Blank Sheet Function
|
|
|
|
```javascript
|
|
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
|