From 9d2a19dbf83545b7d1edc32ebe04ea44a8c9dd46 Mon Sep 17 00:00:00 2001
From: elpatron <m.busche@gmail.com>
Date: Sat, 6 Jun 2026 21:07:51 +0200
Subject: [PATCH] feat: group freshwater, fuel, and greywater cards in
 collapsible Tanks section

---
 client/src/components/LogEntryEditor.tsx | 283 +++++++++++++----------
 client/src/i18n/locales/da.json          |   1 +
 client/src/i18n/locales/de.json          |   1 +
 client/src/i18n/locales/en.json          |   1 +
 client/src/i18n/locales/nb.json          |   1 +
 client/src/i18n/locales/sv.json          |   1 +
 6 files changed, 161 insertions(+), 127 deletions(-)

diff --git a/client/src/components/LogEntryEditor.tsx b/client/src/components/LogEntryEditor.tsx
index 49b0d6e..ad1872b 100644
--- a/client/src/components/LogEntryEditor.tsx
+++ b/client/src/components/LogEntryEditor.tsx
@@ -298,6 +298,7 @@ export default function LogEntryEditor({
 
   const [eventsCollapsed, setEventsCollapsed] = useState(true)
   const [addEventFormCollapsed, setAddEventFormCollapsed] = useState(false)
+  const [tanksCollapsed, setTanksCollapsed] = useState(true)
 
   const [loading, setLoading] = useState(false)
   const [saving, setSaving] = useState(false)
@@ -1718,141 +1719,169 @@ export default function LogEntryEditor({
           </div>
         )}
 
-        {/* Section 2: Freshwater and Fuel Consumption */}
-        <div className="form-grid">
-          {/* Freshwater card */}
-          <div className="form-card">
-            <div className="form-header">
+        {/* Section 2: Tanks (Freshwater, Fuel, and Greywater) */}
+        <div className="form-card">
+          <div
+            className="form-header mb-4 accordion-header"
+            onClick={() => setTanksCollapsed(!tanksCollapsed)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                setTanksCollapsed(!tanksCollapsed)
+              }
+            }}
+            role="button"
+            aria-expanded={!tanksCollapsed}
+            tabIndex={0}
+          >
+            <div className="accordion-header-title">
               <Compass size={20} className="form-icon" />
-              <h3>{t('logs.freshwater')}</h3>
-            </div>
-            <div className="consumption-grid">
-              <TankLiterInput
-                id="fw-morning"
-                label={t('logs.morning')}
-                value={fwMorning}
-                onChange={setFwMorning}
-                maxLiters={tankCapacities.freshwaterCapacityL}
-                disabled={saving || readOnly}
-                titleTooltip={tankCapacityTooltip}
-              />
-              <TankLiterInput
-                id="fw-refilled"
-                label={t('logs.refilled')}
-                value={fwRefilled}
-                onChange={setFwRefilled}
-                maxLiters={fwRefilledMax}
-                disabled={saving || readOnly || fwRefilledNoCapacity}
-                titleTooltip={tankCapacityTooltip}
-              />
-              <TankLiterInput
-                id="fw-evening"
-                label={t('logs.evening')}
-                value={fwEvening}
-                onChange={setFwEvening}
-                maxLiters={fwEveningMax}
-                disabled={saving || readOnly}
-                titleTooltip={tankCapacityTooltip}
-              />
-              <div className="input-group">
-                <label title={tankCapacityTooltip}>{t('logs.consumption')} (L)</label>
-                <input
-                  type="number"
-                  className="input-text consumption-value"
-                  value={fwConsumption}
-                  readOnly
-                  tabIndex={-1}
-                  aria-readonly="true"
-                  title={tankCapacityTooltip}
-                />
-              </div>
+              <h3>{t('logs.tanks')}</h3>
             </div>
+            {tanksCollapsed ? (
+              <ChevronDown size={20} className="accordion-chevron" />
+            ) : (
+              <ChevronUp size={20} className="accordion-chevron" />
+            )}
           </div>
 
-          {/* Fuel card */}
-          <div className="form-card">
-            <div className="form-header">
-              <Compass size={20} className="form-icon" />
-              <h3>{t('logs.fuel')}</h3>
-            </div>
-            <div className="consumption-grid">
-              <TankLiterInput
-                id="fuel-morning"
-                label={t('logs.morning')}
-                value={fuelMorning}
-                onChange={setFuelMorning}
-                maxLiters={tankCapacities.fuelCapacityL}
-                disabled={saving || readOnly}
-                titleTooltip={tankCapacityTooltip}
-              />
-              <TankLiterInput
-                id="fuel-refilled"
-                label={t('logs.refilled')}
-                value={fuelRefilled}
-                onChange={setFuelRefilled}
-                maxLiters={fuelRefilledMax}
-                disabled={saving || readOnly || fuelRefilledNoCapacity}
-                titleTooltip={tankCapacityTooltip}
-              />
-              <TankLiterInput
-                id="fuel-evening"
-                label={t('logs.evening')}
-                value={fuelEvening}
-                onChange={setFuelEvening}
-                maxLiters={fuelEveningMax}
-                disabled={saving || readOnly}
-                titleTooltip={tankCapacityTooltip}
-              />
-              <div className="input-group">
-                <label title={tankCapacityTooltip}>{t('logs.consumption')} (L)</label>
-                <input
-                  type="number"
-                  className="input-text consumption-value"
-                  value={fuelConsumption}
-                  readOnly
-                  tabIndex={-1}
-                  aria-readonly="true"
-                  title={tankCapacityTooltip}
-                />
+          {!tanksCollapsed && (
+            <div className="form-grid" style={{ marginTop: '16px' }}>
+              {/* Freshwater card */}
+              <div className="form-card">
+                <div className="form-header">
+                  <Compass size={20} className="form-icon" />
+                  <h3>{t('logs.freshwater')}</h3>
+                </div>
+                <div className="consumption-grid">
+                  <TankLiterInput
+                    id="fw-morning"
+                    label={t('logs.morning')}
+                    value={fwMorning}
+                    onChange={setFwMorning}
+                    maxLiters={tankCapacities.freshwaterCapacityL}
+                    disabled={saving || readOnly}
+                    titleTooltip={tankCapacityTooltip}
+                  />
+                  <TankLiterInput
+                    id="fw-refilled"
+                    label={t('logs.refilled')}
+                    value={fwRefilled}
+                    onChange={setFwRefilled}
+                    maxLiters={fwRefilledMax}
+                    disabled={saving || readOnly || fwRefilledNoCapacity}
+                    titleTooltip={tankCapacityTooltip}
+                  />
+                  <TankLiterInput
+                    id="fw-evening"
+                    label={t('logs.evening')}
+                    value={fwEvening}
+                    onChange={setFwEvening}
+                    maxLiters={fwEveningMax}
+                    disabled={saving || readOnly}
+                    titleTooltip={tankCapacityTooltip}
+                  />
+                  <div className="input-group">
+                    <label title={tankCapacityTooltip}>{t('logs.consumption')} (L)</label>
+                    <input
+                      type="number"
+                      className="input-text consumption-value"
+                      value={fwConsumption}
+                      readOnly
+                      tabIndex={-1}
+                      aria-readonly="true"
+                      title={tankCapacityTooltip}
+                    />
+                  </div>
+                </div>
               </div>
 
-              <div className="input-group">
-                <label title={tankCapacityTooltip}>{t('logs.fuel_per_motor_hour')}</label>
-                <input
-                  type="text"
-                  className="input-text consumption-value"
-                  value={
-                    fuelPerMotorHour != null
-                      ? `${formatFuelPerMotorHour(fuelPerMotorHour)} L/h`
-                      : '—'
-                  }
-                  readOnly
-                  tabIndex={-1}
-                  aria-readonly="true"
-                  title={tankCapacityTooltip}
-                />
+              {/* Fuel card */}
+              <div className="form-card">
+                <div className="form-header">
+                  <Compass size={20} className="form-icon" />
+                  <h3>{t('logs.fuel')}</h3>
+                </div>
+                <div className="consumption-grid">
+                  <TankLiterInput
+                    id="fuel-morning"
+                    label={t('logs.morning')}
+                    value={fuelMorning}
+                    onChange={setFuelMorning}
+                    maxLiters={tankCapacities.fuelCapacityL}
+                    disabled={saving || readOnly}
+                    titleTooltip={tankCapacityTooltip}
+                  />
+                  <TankLiterInput
+                    id="fuel-refilled"
+                    label={t('logs.refilled')}
+                    value={fuelRefilled}
+                    onChange={setFuelRefilled}
+                    maxLiters={fuelRefilledMax}
+                    disabled={saving || readOnly || fuelRefilledNoCapacity}
+                    titleTooltip={tankCapacityTooltip}
+                  />
+                  <TankLiterInput
+                    id="fuel-evening"
+                    label={t('logs.evening')}
+                    value={fuelEvening}
+                    onChange={setFuelEvening}
+                    maxLiters={fuelEveningMax}
+                    disabled={saving || readOnly}
+                    titleTooltip={tankCapacityTooltip}
+                  />
+                  <div className="input-group">
+                    <label title={tankCapacityTooltip}>{t('logs.consumption')} (L)</label>
+                    <input
+                      type="number"
+                      className="input-text consumption-value"
+                      value={fuelConsumption}
+                      readOnly
+                      tabIndex={-1}
+                      aria-readonly="true"
+                      title={tankCapacityTooltip}
+                    />
+                  </div>
+
+                  <div className="input-group">
+                    <label title={tankCapacityTooltip}>{t('logs.fuel_per_motor_hour')}</label>
+                    <input
+                      type="text"
+                      className="input-text consumption-value"
+                      value={
+                        fuelPerMotorHour != null
+                          ? `${formatFuelPerMotorHour(fuelPerMotorHour)} L/h`
+                          : '—'
+                      }
+                      readOnly
+                      tabIndex={-1}
+                      aria-readonly="true"
+                      title={tankCapacityTooltip}
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {/* Greywater card */}
+              <div className="form-card">
+                <div className="form-header">
+                  <Compass size={20} className="form-icon" />
+                  <h3>{t('logs.greywater')}</h3>
+                </div>
+                <div className="consumption-grid">
+                  <TankLiterInput
+                    id="greywater-level"
+                    label={t('logs.greywater_level')}
+                    value={greywaterLevel}
+                    onChange={setGreywaterLevel}
+                    maxLiters={tankCapacities.greywaterCapacityL}
+                    disabled={saving || readOnly}
+                    titleTooltip={tankCapacityTooltip}
+                  />
+                </div>
               </div>
             </div>
-          </div>
-
-          {/* Greywater card */}
-          <div className="form-card">
-            <div className="form-header">
-              <Compass size={20} className="form-icon" />
-              <h3>{t('logs.greywater')}</h3>
-            </div>
-            <div className="consumption-grid">
-              <TankLiterInput
-                id="greywater-level"
-                label={t('logs.greywater_level')}
-                value={greywaterLevel}
-                onChange={setGreywaterLevel}
-                maxLiters={tankCapacities.greywaterCapacityL}
-                disabled={saving || readOnly}
-                titleTooltip={tankCapacityTooltip}
-              />
-            </div>
-          </div>
+          )}
         </div>
 
         {/* Section 3: Event Journal Entries */}
diff --git a/client/src/i18n/locales/da.json b/client/src/i18n/locales/da.json
index 33f63a6..bbbebfa 100644
--- a/client/src/i18n/locales/da.json
+++ b/client/src/i18n/locales/da.json
@@ -186,6 +186,7 @@
       "departure": "Starthavn (rejse fra)",
       "destination": "Destinationsport (til)",
       "route": "Rejse fra/til",
+      "tanks": "Tanke",
       "freshwater": "Ferskvand (liter)",
       "fuel": "Treibstoff / Brændstof (liter)",
       "greywater": "Gråt vand (liter)",
diff --git a/client/src/i18n/locales/de.json b/client/src/i18n/locales/de.json
index c0bd62a..666fec4 100644
--- a/client/src/i18n/locales/de.json
+++ b/client/src/i18n/locales/de.json
@@ -186,6 +186,7 @@
       "departure": "Start-Hafen (Reise von)",
       "destination": "Ziel-Hafen (nach)",
       "route": "Reise von/nach",
+      "tanks": "Tanks",
       "freshwater": "Frischwasser (Liter)",
       "fuel": "Treibstoff / Fuel (Liter)",
       "greywater": "Grauwasser (Liter)",
diff --git a/client/src/i18n/locales/en.json b/client/src/i18n/locales/en.json
index 0f6acad..0536bd5 100644
--- a/client/src/i18n/locales/en.json
+++ b/client/src/i18n/locales/en.json
@@ -186,6 +186,7 @@
       "departure": "Departure Port (von)",
       "destination": "Destination Port (nach)",
       "route": "Route / Journey",
+      "tanks": "Tanks",
       "freshwater": "Freshwater (Liters)",
       "fuel": "Fuel (Liters)",
       "greywater": "Greywater (Liters)",
diff --git a/client/src/i18n/locales/nb.json b/client/src/i18n/locales/nb.json
index 7d72a44..5026fa0 100644
--- a/client/src/i18n/locales/nb.json
+++ b/client/src/i18n/locales/nb.json
@@ -186,6 +186,7 @@
       "departure": "Starthavn (reise fra)",
       "destination": "Destinasjonsport (til)",
       "route": "Reise fra/til",
+      "tanks": "Tanker",
       "freshwater": "Ferskvann (liter)",
       "fuel": "Drivstoff / Drivstoff (liter)",
       "greywater": "Gråvann (liter)",
diff --git a/client/src/i18n/locales/sv.json b/client/src/i18n/locales/sv.json
index 3088929..127bbc7 100644
--- a/client/src/i18n/locales/sv.json
+++ b/client/src/i18n/locales/sv.json
@@ -186,6 +186,7 @@
       "departure": "Starthamn (resa från)",
       "destination": "Destinationsport (till)",
       "route": "Resa från/till",
+      "tanks": "Tankar",
       "freshwater": "Färskvatten (liter)",
       "fuel": "Treibstoff / Bränsle (liter)",
       "greywater": "Gråvatten (liter)",