From e3cd89be5d7feeb77ac04e8817862da3dab80108 Mon Sep 17 00:00:00 2001
From: elpatron <m.busche@gmail.com>
Date: Sat, 6 Jun 2026 21:04:25 +0200
Subject: [PATCH] feat: separate chronological events list and add event form
 into separate cards

---
 client/src/components/LogEntryEditor.tsx | 765 +++++++++++------------
 1 file changed, 381 insertions(+), 384 deletions(-)

diff --git a/client/src/components/LogEntryEditor.tsx b/client/src/components/LogEntryEditor.tsx
index e4939a4..49b0d6e 100644
--- a/client/src/components/LogEntryEditor.tsx
+++ b/client/src/components/LogEntryEditor.tsx
@@ -2118,392 +2118,389 @@ export default function LogEntryEditor({
             )
           )}
 
-          {/* Add New Event Form Sub-Card */}
-          {!readOnly && (
-            <div className="member-editor-card glass">
-              <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>
-                  <Clock size={12} style={{ display: 'inline', marginRight: 4 }} />
-                  {t('logs.event_time')} *
-                </label>
-                <EventTimeInput24h
-                  value={evTime}
-                  onChange={setEvTime}
-                  disabled={saving}
-                  aria-label={t('logs.event_time')}
-                />
-              </div>
-
-              <div className="input-group course-dial-section">
-                <label>
-                  <Compass size={12} style={{ display: 'inline', marginRight: 4 }} />
-                  {t('logs.event_course_section')}
-                </label>
-                <div className="course-dial-tabs" role="tablist" aria-label={t('logs.event_course_section')}>
-                  <button
-                    type="button"
-                    role="tab"
-                    aria-selected={activeCourseTab === 'mgk'}
-                    className={`course-dial-tab${activeCourseTab === 'mgk' ? ' is-active' : ''}`}
-                    onClick={() => setActiveCourseTab('mgk')}
-                    disabled={saving}
-                  >
-                    {t('logs.course_tab_mgk')}
-                  </button>
-                  <button
-                    type="button"
-                    role="tab"
-                    aria-selected={activeCourseTab === 'rwk'}
-                    className={`course-dial-tab${activeCourseTab === 'rwk' ? ' is-active' : ''}`}
-                    onClick={() => setActiveCourseTab('rwk')}
-                    disabled={saving}
-                  >
-                    {t('logs.course_tab_rwk')}
-                  </button>
-                </div>
-                <CourseDialInput
-                  value={activeCourseTab === 'mgk' ? evMgk : evRwk}
-                  onChange={activeCourseTab === 'mgk' ? setEvMgk : setEvRwk}
-                  disabled={saving}
-                  aria-label={activeCourseTab === 'mgk' ? t('logs.event_mgk') : t('logs.event_rwk')}
-                />
-              </div>
-
-              <div className="input-group">
-                <label>{t('logs.event_log')}</label>
-                <input
-                  type="text"
-                  placeholder="e.g. 124.5"
-                  className="input-text"
-                  value={evLogReading}
-                  onChange={(e) => setEvLogReading(e.target.value)}
-                  disabled={saving}
-                />
-              </div>
-            </div>
-
-            <div className="form-grid mb-4">
-              <div className="input-group">
-                <label>{t('logs.event_location')}</label>
-                <input
-                  type="text"
-                  placeholder={t('logs.event_location_placeholder')}
-                  className="input-text"
-                  value={evLocationName}
-                  onChange={(e) => setEvLocationName(e.target.value)}
-                  disabled={saving}
-                />
-              </div>
-
-              <div className="input-group">
-                <label>{t('logs.event_gps')} (Lat, Lng)</label>
-                <div className="gps-input-row">
-                  <input
-                    type="text"
-                    placeholder="Lat"
-                    className="input-text"
-                    value={evGpsLat}
-                    onChange={(e) => { clearGpsSignal(); setEvGpsLat(e.target.value) }}
-                    disabled={saving}
-                  />
-                  <input
-                    type="text"
-                    placeholder="Lng"
-                    className="input-text"
-                    value={evGpsLng}
-                    onChange={(e) => { clearGpsSignal(); setEvGpsLng(e.target.value) }}
-                    disabled={saving}
-                  />
-                  <button
-                    type="button"
-                    className="btn secondary"
-                    onClick={() => void handleGetGps()}
-                    title={t('logs.gps_btn')}
-                    style={{ width: 'auto', padding: '12px' }}
-                    disabled={saving}
-                  >
-                    <MapPin size={16} />
-                  </button>
-                  <button
-                    type="button"
-                    className="btn secondary"
-                    onClick={handleFetchWeather}
-                    title={t('logs.weather_btn')}
-                    style={{ width: 'auto', padding: '12px' }}
-                    disabled={
-                      saving ||
-                      weatherLoading ||
-                      (!evGpsLat && !evLocationName.trim() && !departure.trim() && !destination.trim()) ||
-                      (!!evGpsLat && !evGpsLng)
-                    }
-                  >
-                    <CloudSun size={16} />
-                  </button>
-                </div>
-                {gpsSignal && (
-                  <GpsSignalHint
-                    quality={gpsSignal.quality}
-                    accuracyM={gpsSignal.accuracyM}
-                    className="gps-signal-hint-editor"
-                  />
-                )}
-              </div>
-            </div>
-
-            <div className="form-grid weather-metrics-grid mb-4">
-              <div className="input-group course-dial-section weather-metrics-span-2">
-                <label>{t('logs.event_wind_direction')}</label>
-                <CourseDialInput
-                  value={evWindDirection}
-                  onChange={setEvWindDirection}
-                  disabled={saving || weatherLoading}
-                  allowCardinal
-                  displayMode="auto"
-                  aria-label={t('logs.event_wind_direction')}
-                />
-              </div>
-
-              <div className="input-group">
-                <label>{t('logs.event_wind_strength')}</label>
-                <input
-                  type="text"
-                  placeholder="e.g. 4 Bft"
-                  className="input-text"
-                  value={evWindStrength}
-                  onChange={(e) => setEvWindStrength(e.target.value)}
-                  disabled={saving || weatherLoading}
-                />
-              </div>
-
-              <MetricRangeInput
-                label={t('logs.event_wind_pressure')}
-                value={evWindPressure}
-                onChange={setEvWindPressure}
-                disabled={saving || weatherLoading}
-                min={PRESSURE_MIN_HPA}
-                max={PRESSURE_MAX_HPA}
-                step={1}
-                defaultNumeric={PRESSURE_DEFAULT_HPA}
-                parse={parsePressureHpa}
-                format={formatPressureHpa}
-                formatDisplay={(hpa) =>
-                  t('logs.weather_slider_pressure', { value: hpa, defaultValue: `${hpa} hPa` })}
-                numberMin={PRESSURE_MIN_HPA}
-                numberMax={PRESSURE_MAX_HPA}
-                numberStep={1}
-                numberPlaceholder="1013"
-              />
-
-              <MetricRangeInput
-                label={t('logs.event_sea_state')}
-                value={evSeaState}
-                onChange={setEvSeaState}
-                disabled={saving}
-                min={SEA_STATE_MIN}
-                max={SEA_STATE_MAX}
-                step={1}
-                defaultNumeric={0}
-                parse={parseSeaState}
-                format={formatSeaState}
-                formatDisplay={(level) =>
-                  t('logs.weather_slider_sea_state', { value: level, defaultValue: `${level}` })}
-                numberMin={SEA_STATE_MIN}
-                numberMax={SEA_STATE_MAX}
-                numberStep={1}
-                numberPlaceholder="3"
-                allowLegacyText
-              />
-
-              <MetricRangeInput
-                label={t('logs.event_visibility')}
-                value={evVisibility}
-                onChange={setEvVisibility}
-                disabled={saving || weatherLoading}
-                discreteValues={VISIBILITY_STEPS_M}
-                defaultNumeric={10000}
-                parse={parseVisibilityMeters}
-                format={formatVisibilityMeters}
-                formatDisplay={(m) => formatVisibilityMeters(m)}
-                hideNumberInput
-              />
-
-              <MetricRangeInput
-                label={t('logs.event_heel')}
-                value={evHeel}
-                onChange={setEvHeel}
-                disabled={saving}
-                min={HEEL_MIN_DEG}
-                max={HEEL_MAX_DEG}
-                step={1}
-                defaultNumeric={0}
-                parse={parseHeelDeg}
-                format={formatHeelDeg}
-                formatDisplay={(deg) =>
-                  t('logs.weather_slider_heel', { value: deg, defaultValue: `${deg}°` })}
-                numberMin={HEEL_MIN_DEG}
-                numberMax={HEEL_MAX_DEG}
-                numberStep={1}
-                numberPlaceholder="5"
-              />
-            </div>
-
-            <div className="form-grid mb-4">
-              <div className="input-group">
-                <label>{t('logs.event_sails')}</label>
-                <input
-                  type="text"
-                  placeholder="e.g. Mainsail + Jib"
-                  className="input-text"
-                  value={evSailsOrMotor}
-                  onChange={(e) => setEvSailsOrMotor(e.target.value)}
-                  disabled={saving}
-                />
-              </div>
-
-              <div className="input-group">
-                <label>{t('logs.event_distance')}</label>
-                <input
-                  type="text"
-                  placeholder="e.g. 12 nm"
-                  className="input-text"
-                  value={evDistance}
-                  onChange={(e) => setEvDistance(e.target.value)}
-                  disabled={saving}
-                />
-              </div>
-
-              <div
-                className={[
-                  'sails-picker-container grid-span-2',
-                  showSailsPickerToggle ? 'is-collapsible' : '',
-                  showSailsPickerToggle && !sailsPickerExpanded ? 'is-collapsed' : '',
-                ].filter(Boolean).join(' ')}
-              >
-                <div className="sails-picker-pills">
-                  {isMotorActive && (
-                    <span
-                      className={`sail-pill motor-pill active`}
-                      onClick={() => toggleSailOrMotor(motorPropulsionLabel)}
-                    >
-                      {motorPropulsionLabel}
-                    </span>
-                  )}
-                  {sortedEventSailOptions.map((sail) => (
-                    <span
-                      key={sail}
-                      className={`sail-pill ${isItemActive(sail) ? 'active' : ''}`}
-                      onClick={() => toggleSailOrMotor(sail)}
-                    >
-                      {sail}
-                    </span>
-                  ))}
-                  {!isMotorActive && (
-                    <span
-                      className="sail-pill motor-pill"
-                      onClick={() => toggleSailOrMotor(motorPropulsionLabel)}
-                    >
-                      {motorPropulsionLabel}
-                    </span>
-                  )}
-                </div>
-                {showSailsPickerToggle && (
-                  <button
-                    type="button"
-                    className="sails-picker-toggle"
-                    onClick={() => setSailsPickerExpanded((prev) => !prev)}
-                    aria-expanded={sailsPickerExpanded}
-                  >
-                    {sailsPickerExpanded ? (
-                      <>
-                        <ChevronUp size={14} aria-hidden="true" />
-                        {t('logs.sails_picker_show_less')}
-                      </>
-                    ) : (
-                      <>
-                        <ChevronDown size={14} aria-hidden="true" />
-                        {t('logs.sails_picker_show_more')}
-                      </>
-                    )}
-                  </button>
-                )}
-              </div>
-
-              <div className="input-group grid-span-2">
-                <label>{t('logs.event_remarks')}</label>
-                <input
-                  type="text"
-                  placeholder="Remarks"
-                  className="input-text"
-                  value={evRemarks}
-                  onChange={(e) => setEvRemarks(e.target.value)}
-                  disabled={saving}
-                />
-              </div>
-            </div>
-
-            <div style={{ display: 'flex', gap: '8px', marginLeft: 'auto', flexWrap: 'wrap' }}>
-              {editingEventIndex !== null && (
-                <button
-                  type="button"
-                  className="btn secondary"
-                  onClick={handleCancelEventEdit}
-                  disabled={saving}
-                  style={{ width: 'auto', padding: '10px 20px', display: 'flex' }}
-                >
-                  <X size={16} />
-                  {t('logs.cancel_event_edit')}
-                </button>
-              )}
-              <button
-                type="button"
-                className="btn secondary"
-                onClick={handleSaveEvent}
-                disabled={saving || !isValidTimeHHMM(evTime)}
-                style={{ width: 'auto', padding: '10px 20px', display: 'flex' }}
-              >
-                {editingEventIndex !== null ? <Save size={16} /> : <Plus size={16} />}
-                {editingEventIndex !== null ? t('logs.save_event_btn') : t('logs.add_event_btn')}
-              </button>
-            </div>
-          </>
-          )}
-          </div>
-          )}
         </div>
 
+        {/* Section 4: Add New Event Form Card */}
+        {!readOnly && (
+          <div className="form-card">
+            <div
+              className="form-header accordion-header"
+              onClick={() => setAddEventFormCollapsed(!addEventFormCollapsed)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault()
+                  setAddEventFormCollapsed(!addEventFormCollapsed)
+                }
+              }}
+              role="button"
+              aria-expanded={!addEventFormCollapsed}
+              tabIndex={0}
+            >
+              <div className="accordion-header-title">
+                <Plus size={20} className="form-icon" style={{ color: '#fbbf24' }} />
+                <h3 style={{ margin: 0, color: '#fbbf24' }}>
+                  {editingEventIndex !== null ? t('logs.edit_event') : t('logs.add_event')}
+                </h3>
+              </div>
+              {addEventFormCollapsed ? (
+                <ChevronDown size={20} style={{ color: '#fbbf24' }} className="accordion-chevron" />
+              ) : (
+                <ChevronUp size={20} style={{ color: '#fbbf24' }} className="accordion-chevron" />
+              )}
+            </div>
+
+            {!addEventFormCollapsed && (
+              <div style={{ marginTop: '20px' }}>
+                <div className="form-grid mb-4">
+                  <div className="input-group">
+                    <label>
+                      <Clock size={12} style={{ display: 'inline', marginRight: 4 }} />
+                      {t('logs.event_time')} *
+                    </label>
+                    <EventTimeInput24h
+                      value={evTime}
+                      onChange={setEvTime}
+                      disabled={saving}
+                      aria-label={t('logs.event_time')}
+                    />
+                  </div>
+
+                  <div className="input-group course-dial-section">
+                    <label>
+                      <Compass size={12} style={{ display: 'inline', marginRight: 4 }} />
+                      {t('logs.event_course_section')}
+                    </label>
+                    <div className="course-dial-tabs" role="tablist" aria-label={t('logs.event_course_section')}>
+                      <button
+                        type="button"
+                        role="tab"
+                        aria-selected={activeCourseTab === 'mgk'}
+                        className={`course-dial-tab${activeCourseTab === 'mgk' ? ' is-active' : ''}`}
+                        onClick={() => setActiveCourseTab('mgk')}
+                        disabled={saving}
+                      >
+                        {t('logs.course_tab_mgk')}
+                      </button>
+                      <button
+                        type="button"
+                        role="tab"
+                        aria-selected={activeCourseTab === 'rwk'}
+                        className={`course-dial-tab${activeCourseTab === 'rwk' ? ' is-active' : ''}`}
+                        onClick={() => setActiveCourseTab('rwk')}
+                        disabled={saving}
+                      >
+                        {t('logs.course_tab_rwk')}
+                      </button>
+                    </div>
+                    <CourseDialInput
+                      value={activeCourseTab === 'mgk' ? evMgk : evRwk}
+                      onChange={activeCourseTab === 'mgk' ? setEvMgk : setEvRwk}
+                      disabled={saving}
+                      aria-label={activeCourseTab === 'mgk' ? t('logs.event_mgk') : t('logs.event_rwk')}
+                    />
+                  </div>
+
+                  <div className="input-group">
+                    <label>{t('logs.event_log')}</label>
+                    <input
+                      type="text"
+                      placeholder="e.g. 124.5"
+                      className="input-text"
+                      value={evLogReading}
+                      onChange={(e) => setEvLogReading(e.target.value)}
+                      disabled={saving}
+                    />
+                  </div>
+                </div>
+
+                <div className="form-grid mb-4">
+                  <div className="input-group">
+                    <label>{t('logs.event_location')}</label>
+                    <input
+                      type="text"
+                      placeholder={t('logs.event_location_placeholder')}
+                      className="input-text"
+                      value={evLocationName}
+                      onChange={(e) => setEvLocationName(e.target.value)}
+                      disabled={saving}
+                    />
+                  </div>
+
+                  <div className="input-group">
+                    <label>{t('logs.event_gps')} (Lat, Lng)</label>
+                    <div className="gps-input-row">
+                      <input
+                        type="text"
+                        placeholder="Lat"
+                        className="input-text"
+                        value={evGpsLat}
+                        onChange={(e) => { clearGpsSignal(); setEvGpsLat(e.target.value) }}
+                        disabled={saving}
+                      />
+                      <input
+                        type="text"
+                        placeholder="Lng"
+                        className="input-text"
+                        value={evGpsLng}
+                        onChange={(e) => { clearGpsSignal(); setEvGpsLng(e.target.value) }}
+                        disabled={saving}
+                      />
+                      <button
+                        type="button"
+                        className="btn secondary"
+                        onClick={() => void handleGetGps()}
+                        title={t('logs.gps_btn')}
+                        style={{ width: 'auto', padding: '12px' }}
+                        disabled={saving}
+                      >
+                        <MapPin size={16} />
+                      </button>
+                      <button
+                        type="button"
+                        className="btn secondary"
+                        onClick={handleFetchWeather}
+                        title={t('logs.weather_btn')}
+                        style={{ width: 'auto', padding: '12px' }}
+                        disabled={
+                          saving ||
+                          weatherLoading ||
+                          (!evGpsLat && !evLocationName.trim() && !departure.trim() && !destination.trim()) ||
+                          (!!evGpsLat && !evGpsLng)
+                        }
+                      >
+                        <CloudSun size={16} />
+                      </button>
+                    </div>
+                    {gpsSignal && (
+                      <GpsSignalHint
+                        quality={gpsSignal.quality}
+                        accuracyM={gpsSignal.accuracyM}
+                        className="gps-signal-hint-editor"
+                      />
+                    )}
+                  </div>
+                </div>
+
+                <div className="form-grid weather-metrics-grid mb-4">
+                  <div className="input-group course-dial-section weather-metrics-span-2">
+                    <label>{t('logs.event_wind_direction')}</label>
+                    <CourseDialInput
+                      value={evWindDirection}
+                      onChange={setEvWindDirection}
+                      disabled={saving || weatherLoading}
+                      allowCardinal
+                      displayMode="auto"
+                      aria-label={t('logs.event_wind_direction')}
+                    />
+                  </div>
+
+                  <div className="input-group">
+                    <label>{t('logs.event_wind_strength')}</label>
+                    <input
+                      type="text"
+                      placeholder="e.g. 4 Bft"
+                      className="input-text"
+                      value={evWindStrength}
+                      onChange={(e) => setEvWindStrength(e.target.value)}
+                      disabled={saving || weatherLoading}
+                    />
+                  </div>
+
+                  <MetricRangeInput
+                    label={t('logs.event_wind_pressure')}
+                    value={evWindPressure}
+                    onChange={setEvWindPressure}
+                    disabled={saving || weatherLoading}
+                    min={PRESSURE_MIN_HPA}
+                    max={PRESSURE_MAX_HPA}
+                    step={1}
+                    defaultNumeric={PRESSURE_DEFAULT_HPA}
+                    parse={parsePressureHpa}
+                    format={formatPressureHpa}
+                    formatDisplay={(hpa) =>
+                      t('logs.weather_slider_pressure', { value: hpa, defaultValue: `${hpa} hPa` })}
+                    numberMin={PRESSURE_MIN_HPA}
+                    numberMax={PRESSURE_MAX_HPA}
+                    numberStep={1}
+                    numberPlaceholder="1013"
+                  />
+
+                  <MetricRangeInput
+                    label={t('logs.event_sea_state')}
+                    value={evSeaState}
+                    onChange={setEvSeaState}
+                    disabled={saving}
+                    min={SEA_STATE_MIN}
+                    max={SEA_STATE_MAX}
+                    step={1}
+                    defaultNumeric={0}
+                    parse={parseSeaState}
+                    format={formatSeaState}
+                    formatDisplay={(level) =>
+                      t('logs.weather_slider_sea_state', { value: level, defaultValue: `${level}` })}
+                    numberMin={SEA_STATE_MIN}
+                    numberMax={SEA_STATE_MAX}
+                    numberStep={1}
+                    numberPlaceholder="3"
+                    allowLegacyText
+                  />
+
+                  <MetricRangeInput
+                    label={t('logs.event_visibility')}
+                    value={evVisibility}
+                    onChange={setEvVisibility}
+                    disabled={saving || weatherLoading}
+                    discreteValues={VISIBILITY_STEPS_M}
+                    defaultNumeric={10000}
+                    parse={parseVisibilityMeters}
+                    format={formatVisibilityMeters}
+                    formatDisplay={(m) => formatVisibilityMeters(m)}
+                    hideNumberInput
+                  />
+
+                  <MetricRangeInput
+                    label={t('logs.event_heel')}
+                    value={evHeel}
+                    onChange={setEvHeel}
+                    disabled={saving}
+                    min={HEEL_MIN_DEG}
+                    max={HEEL_MAX_DEG}
+                    step={1}
+                    defaultNumeric={0}
+                    parse={parseHeelDeg}
+                    format={formatHeelDeg}
+                    formatDisplay={(deg) =>
+                      t('logs.weather_slider_heel', { value: deg, defaultValue: `${deg}°` })}
+                    numberMin={HEEL_MIN_DEG}
+                    numberMax={HEEL_MAX_DEG}
+                    numberStep={1}
+                    numberPlaceholder="5"
+                  />
+                </div>
+
+                <div className="form-grid mb-4">
+                  <div className="input-group">
+                    <label>{t('logs.event_sails')}</label>
+                    <input
+                      type="text"
+                      placeholder="e.g. Mainsail + Jib"
+                      className="input-text"
+                      value={evSailsOrMotor}
+                      onChange={(e) => setEvSailsOrMotor(e.target.value)}
+                      disabled={saving}
+                    />
+                  </div>
+
+                  <div className="input-group">
+                    <label>{t('logs.event_distance')}</label>
+                    <input
+                      type="text"
+                      placeholder="e.g. 12 nm"
+                      className="input-text"
+                      value={evDistance}
+                      onChange={(e) => setEvDistance(e.target.value)}
+                      disabled={saving}
+                    />
+                  </div>
+
+                  <div
+                    className={[
+                      'sails-picker-container grid-span-2',
+                      showSailsPickerToggle ? 'is-collapsible' : '',
+                      showSailsPickerToggle && !sailsPickerExpanded ? 'is-collapsed' : '',
+                    ].filter(Boolean).join(' ')}
+                  >
+                    <div className="sails-picker-pills">
+                      {isMotorActive && (
+                        <span
+                          className={`sail-pill motor-pill active`}
+                          onClick={() => toggleSailOrMotor(motorPropulsionLabel)}
+                        >
+                          {motorPropulsionLabel}
+                        </span>
+                      )}
+                      {sortedEventSailOptions.map((sail) => (
+                        <span
+                          key={sail}
+                          className={`sail-pill ${isItemActive(sail) ? 'active' : ''}`}
+                          onClick={() => toggleSailOrMotor(sail)}
+                        >
+                          {sail}
+                        </span>
+                      ))}
+                      {!isMotorActive && (
+                        <span
+                          className="sail-pill motor-pill"
+                          onClick={() => toggleSailOrMotor(motorPropulsionLabel)}
+                        >
+                          {motorPropulsionLabel}
+                        </span>
+                      )}
+                    </div>
+                    {showSailsPickerToggle && (
+                      <button
+                        type="button"
+                        className="sails-picker-toggle"
+                        onClick={() => setSailsPickerExpanded((prev) => !prev)}
+                        aria-expanded={sailsPickerExpanded}
+                      >
+                        {sailsPickerExpanded ? (
+                          <>
+                            <ChevronUp size={14} aria-hidden="true" />
+                            {t('logs.sails_picker_show_less')}
+                          </>
+                        ) : (
+                          <>
+                            <ChevronDown size={14} aria-hidden="true" />
+                            {t('logs.sails_picker_show_more')}
+                          </>
+                        )}
+                      </button>
+                    )}
+                  </div>
+
+                  <div className="input-group grid-span-2">
+                    <label>{t('logs.event_remarks')}</label>
+                    <input
+                      type="text"
+                      placeholder="Remarks"
+                      className="input-text"
+                      value={evRemarks}
+                      onChange={(e) => setEvRemarks(e.target.value)}
+                      disabled={saving}
+                    />
+                  </div>
+                </div>
+
+                <div style={{ display: 'flex', gap: '8px', marginLeft: 'auto', flexWrap: 'wrap' }}>
+                  {editingEventIndex !== null && (
+                    <button
+                      type="button"
+                      className="btn secondary"
+                      onClick={handleCancelEventEdit}
+                      disabled={saving}
+                      style={{ width: 'auto', padding: '10px 20px', display: 'flex' }}
+                    >
+                      <X size={16} />
+                      {t('logs.cancel_event_edit')}
+                    </button>
+                  )}
+                  <button
+                    type="button"
+                    className="btn secondary"
+                    onClick={handleSaveEvent}
+                    disabled={saving || !isValidTimeHHMM(evTime)}
+                    style={{ width: 'auto', padding: '10px 20px', display: 'flex' }}
+                  >
+                    {editingEventIndex !== null ? <Save size={16} /> : <Plus size={16} />}
+                    {editingEventIndex !== null ? t('logs.save_event_btn') : t('logs.add_event_btn')}
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
         {/* Track file upload */}
         <div className="form-card" data-tour="entry-track">
           <div className="form-header">