From a0b8664e239a0142c8ca268fb72eeb7b47fa8d16 Mon Sep 17 00:00:00 2001
From: elpatron <m.busche@gmail.com>
Date: Sun, 31 May 2026 21:20:19 +0200
Subject: [PATCH] Use course dials for live-log wind direction and course
 entry.

Reuses CourseDialInput from the classic journal editor in the live modals, prefilled from the most recent wind or course values.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 client/src/App.css                    | 17 +++++++
 client/src/components/LiveLogView.tsx | 70 ++++++++++++++++++++++-----
 2 files changed, 76 insertions(+), 11 deletions(-)

diff --git a/client/src/App.css b/client/src/App.css
index 6144852..79542d6 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -3306,6 +3306,23 @@ html.theme-cupertino .events-scroll-container {
   border-radius: var(--app-radius-card, 12px);
 }
 
+.live-log-modal--dial {
+  width: min(320px, 100%);
+}
+
+.live-log-dial-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.live-log-dial-field label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--app-text-muted);
+}
+
 .live-log-modal h3 {
   margin: 0 0 16px;
   font-size: 17px;
diff --git a/client/src/components/LiveLogView.tsx b/client/src/components/LiveLogView.tsx
index 8ab52a1..586a02d 100644
--- a/client/src/components/LiveLogView.tsx
+++ b/client/src/components/LiveLogView.tsx
@@ -47,6 +47,7 @@ import {
 import { getCurrentPosition } from '../utils/geolocation.js'
 import { sortLogEventsByTime, type LogEventPayload } from '../utils/logEntryPayload.js'
 import { useDialog } from './ModalDialog.tsx'
+import CourseDialInput from './CourseDialInput.tsx'
 
 interface LiveLogViewProps {
   logbookId: string
@@ -84,6 +85,13 @@ function lastCourseFromEvents(events: LogEventPayload[]): string {
   return ''
 }
 
+function lastWindDirectionFromEvents(events: LogEventPayload[]): string {
+  for (let i = events.length - 1; i >= 0; i--) {
+    if (events[i].windDirection.trim()) return events[i].windDirection
+  }
+  return ''
+}
+
 export default function LiveLogView({
   logbookId,
   onOpenEditor,
@@ -548,7 +556,7 @@ export default function LiveLogView({
             </button>
             {weatherExpanded && (
               <div className="live-log-weather-submenu">
-                <button type="button" className="live-log-subaction-btn" onClick={() => openValueModal('wind')} disabled={busy}>
+                <button type="button" className="live-log-subaction-btn" onClick={() => openValueModal('wind', lastWindDirectionFromEvents(events))} disabled={busy}>
                   {t('logs.live_wind_btn')}
                 </button>
                 <button type="button" className="live-log-subaction-btn" onClick={() => openValueModal('temp')} disabled={busy}>
@@ -644,10 +652,30 @@ export default function LiveLogView({
 
       {modal === 'wind' && (
         <div className="live-log-modal-backdrop" onClick={() => setModal('none')}>
-          <div className="live-log-modal glass" onClick={(e) => e.stopPropagation()}>
+          <div className="live-log-modal live-log-modal--dial glass" onClick={(e) => e.stopPropagation()}>
             <h3>{t('logs.live_wind_btn')}</h3>
-            <input type="text" className="input-text mb-2" value={valueInput} onChange={(e) => setValueInput(e.target.value)} placeholder={t('logs.event_wind_direction')} autoFocus />
-            <input type="text" className="input-text" value={valueInputSecondary} onChange={(e) => setValueInputSecondary(e.target.value)} placeholder={t('logs.event_wind_strength')} />
+            <div className="live-log-dial-field">
+              <label>{t('logs.event_wind_direction')}</label>
+              <CourseDialInput
+                value={valueInput}
+                onChange={setValueInput}
+                disabled={busy}
+                allowCardinal
+                displayMode="auto"
+                size="sm"
+                aria-label={t('logs.event_wind_direction')}
+              />
+            </div>
+            <div className="live-log-dial-field">
+              <label>{t('logs.event_wind_strength')}</label>
+              <input
+                type="text"
+                className="input-text"
+                value={valueInputSecondary}
+                onChange={(e) => setValueInputSecondary(e.target.value)}
+                placeholder="e.g. 4 Bft"
+              />
+            </div>
             <div className="live-log-modal-actions">
               <button type="button" className="btn secondary" onClick={() => setModal('none')}>{t('logs.confirm_no')}</button>
               <button type="button" className="btn primary" onClick={confirmValueModal}>{t('logs.live_sails_confirm')}</button>
@@ -656,7 +684,29 @@ export default function LiveLogView({
         </div>
       )}
 
-      {['pressure', 'temp', 'precip', 'sea_state', 'course', 'fuel', 'water', 'sog', 'stw'].includes(modal) && (
+      {modal === 'course' && (
+        <div className="live-log-modal-backdrop" onClick={() => setModal('none')}>
+          <div className="live-log-modal live-log-modal--dial glass" onClick={(e) => e.stopPropagation()}>
+            <h3>{t('logs.live_course_btn')}</h3>
+            <div className="live-log-dial-field">
+              <label>{t('logs.event_mgk')}</label>
+              <CourseDialInput
+                value={valueInput}
+                onChange={setValueInput}
+                disabled={busy}
+                size="sm"
+                aria-label={t('logs.event_mgk')}
+              />
+            </div>
+            <div className="live-log-modal-actions">
+              <button type="button" className="btn secondary" onClick={() => setModal('none')}>{t('logs.confirm_no')}</button>
+              <button type="button" className="btn primary" onClick={confirmValueModal}>{t('logs.live_sails_confirm')}</button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {['pressure', 'temp', 'precip', 'sea_state', 'fuel', 'water', 'sog', 'stw'].includes(modal) && (
         <div className="live-log-modal-backdrop" onClick={() => setModal('none')}>
           <div className="live-log-modal glass" onClick={(e) => e.stopPropagation()}>
             <h3>
@@ -664,7 +714,6 @@ export default function LiveLogView({
               {modal === 'temp' && t('logs.live_temp_btn')}
               {modal === 'precip' && t('logs.live_precip_btn')}
               {modal === 'sea_state' && t('logs.live_sea_state_btn')}
-              {modal === 'course' && t('logs.live_course_btn')}
               {modal === 'fuel' && t('logs.live_fuel_btn')}
               {modal === 'water' && t('logs.live_water_btn')}
               {modal === 'sog' && t('logs.live_sog_btn')}
@@ -684,11 +733,10 @@ export default function LiveLogView({
                   : modal === 'temp' ? t('logs.live_temp_placeholder')
                     : modal === 'precip' ? t('logs.live_precip_placeholder')
                       : modal === 'sea_state' ? t('logs.live_sea_state_placeholder')
-                        : modal === 'course' ? t('logs.live_course_placeholder')
-                          : modal === 'fuel' ? t('logs.live_fuel_placeholder')
-                            : modal === 'water' ? t('logs.live_water_placeholder')
-                              : modal === 'sog' ? t('logs.live_sog_placeholder')
-                                : t('logs.live_stw_placeholder')
+                        : modal === 'fuel' ? t('logs.live_fuel_placeholder')
+                          : modal === 'water' ? t('logs.live_water_placeholder')
+                            : modal === 'sog' ? t('logs.live_sog_placeholder')
+                              : t('logs.live_stw_placeholder')
               }
               autoFocus
               onKeyDown={(e) => { if (e.key === 'Enter') confirmValueModal() }}