feat: implement collapsible accordions for event protocol list and form

client/src/App.css

@@ -6421,3 +6421,44 @@ body.app-tour-active .feedback-modal-overlay--tour .disclaimer-modal-panel {
   color: #e2e8f0;
   word-break: break-word;
 }
+
+/* Accordion Styling */
+.accordion-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  padding: 8px 12px;
+  margin: -8px -12px;
+  border-radius: 8px;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.accordion-header:hover {
+  background-color: var(--app-surface-hover, rgba(255, 255, 255, 0.03));
+}
+
+.accordion-header-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.accordion-chevron {
+  color: var(--app-text-muted, #94a3b8);
+  transition: transform 0.2s ease;
+}
+
+/* Specific styling for nested member-editor-card header */
+.member-editor-card .accordion-header {
+  margin: 0 0 16px 0;
+  padding: 8px 12px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.01);
+  border: 1px solid rgba(255, 255, 255, 0.03);
+}
+
+.member-editor-card .accordion-header:hover {
+  background: var(--app-surface-hover, rgba(255, 255, 255, 0.03));
+}

client/src/components/LogEntryEditor.tsx

@@ -296,6 +296,9 @@ export default function LogEntryEditor({
   const [evLocationName, setEvLocationName] = useState('')
   const [activeCourseTab, setActiveCourseTab] = useState<'mgk' | 'rwk'>('mgk')
 
+  const [eventsCollapsed, setEventsCollapsed] = useState(true)
+  const [addEventFormCollapsed, setAddEventFormCollapsed] = useState(false)
+
   const [loading, setLoading] = useState(false)
   const [saving, setSaving] = useState(false)
   const [exporting, setExporting] = useState(false)
@@ -1407,6 +1410,7 @@ export default function LogEntryEditor({
     if (!ev) return
     fillEventForm(ev)
     setEditingEventIndex(index)
+    setAddEventFormCollapsed(false)
   }
 
   const handleCancelEventEdit = () => {
@@ -1853,13 +1857,33 @@ export default function LogEntryEditor({
 
         {/* Section 3: Event Journal Entries */}
         <div className="form-card">
-          <div className="form-header mb-4">
+          <div
+            className="form-header mb-4 accordion-header"
+            onClick={() => setEventsCollapsed(!eventsCollapsed)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                setEventsCollapsed(!eventsCollapsed)
+              }
+            }}
+            role="button"
+            aria-expanded={!eventsCollapsed}
+            tabIndex={0}
+          >
+            <div className="accordion-header-title">
               <Compass size={20} className="form-icon" />
               <h3>{t('logs.event_title')}</h3>
             </div>
+            {eventsCollapsed ? (
+              <ChevronDown size={20} className="accordion-chevron" />
+            ) : (
+              <ChevronUp size={20} className="accordion-chevron" />
+            )}
+          </div>
 
           {/* List existing events */}
-          {events.length === 0 ? (
+          {!eventsCollapsed && (
+            events.length === 0 ? (
               <div className="dashboard-status-msg mb-6">{t('logs.no_events')}</div>
             ) : (
               <>
@@ -2091,15 +2115,44 @@ export default function LogEntryEditor({
                   })}
                 </div>
               </>
+            )
           )}
 
           {/* Add New Event Form Sub-Card */}
           {!readOnly && (
             <div className="member-editor-card glass">
-              <h4 style={{ margin: '0 0 16px 0', color: '#fbbf24' }}>
+              <div
+                className="accordion-header"
+                onClick={() => setAddEventFormCollapsed(!addEventFormCollapsed)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault()
+                    setAddEventFormCollapsed(!addEventFormCollapsed)
+                  }
+                }}
+                role="button"
+                aria-expanded={!addEventFormCollapsed}
+                tabIndex={0}
+                style={{
+                  margin: '0 0 16px 0',
+                  padding: '8px 12px',
+                  borderRadius: '6px',
+                  background: 'rgba(255, 255, 255, 0.01)',
+                  border: '1px solid rgba(255, 255, 255, 0.03)'
+                }}
+              >
+                <h4 style={{ margin: 0, color: '#fbbf24' }}>
                   {editingEventIndex !== null ? t('logs.edit_event') : t('logs.add_event')}
                 </h4>
+                {addEventFormCollapsed ? (
+                  <ChevronDown size={18} style={{ color: '#fbbf24' }} className="accordion-chevron" />
+                ) : (
+                  <ChevronUp size={18} style={{ color: '#fbbf24' }} className="accordion-chevron" />
+                )}
+              </div>
             
+            {!addEventFormCollapsed && (
+              <>
                 <div className="form-grid mb-4">
               <div className="input-group">
                 <label>
@@ -2445,6 +2498,8 @@ export default function LogEntryEditor({
                 {editingEventIndex !== null ? t('logs.save_event_btn') : t('logs.add_event_btn')}
               </button>
             </div>
+          </>
+          )}
           </div>
           )}
         </div>