feat(ui): restructure instrument sheet layout — inline arrows, WaveView, ocean forecast section

Full layout rewrite: 3×2 GridLayout instrument grid with inline
DirectionArrowView for AWS/TWS/HDG/COG, depth+baro row, animated
WaveView divider, and ocean-blue forecast section for Current/Waves/Swell.

Stubs valueCurrDir/valueWaveDir as nullable in InstrumentHandler
to compile; full handler rewrite follows in Task 6.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

3 files changed, 279 insertions, 61 deletions

diff --git a/android-app/app/src/main/kotlin/org/terst/nav/MainActivity.kt b/android-app/app/src/main/kotlin/org/terst/nav/MainActivity.kt
index 6197475..023cb94 100644
--- a/android-app/app/src/main/kotlin/org/terst/nav/MainActivity.kt
+++ b/android-app/app/src/main/kotlin/org/terst/nav/MainActivity.kt
@@ -190,9 +190,9 @@ class MainActivity : AppCompatActivity(), SafetyFragment.SafetyListener {
             valueDepth = findViewById(R.id.value_depth),
             valueBaro = findViewById(R.id.value_baro),
             valueCurrSpd = findViewById(R.id.value_curr_spd),
-            valueCurrDir = findViewById(R.id.value_curr_dir),
+            valueCurrDir = null,
             valueWaveHt = findViewById(R.id.value_wave_ht),
-            valueWaveDir = findViewById(R.id.value_wave_dir),
+            valueWaveDir = null,
             valueSwellHt = findViewById(R.id.value_swell_ht),
             valueSwellPer = findViewById(R.id.value_swell_per)
         )
diff --git a/android-app/app/src/main/kotlin/org/terst/nav/ui/InstrumentHandler.kt b/android-app/app/src/main/kotlin/org/terst/nav/ui/InstrumentHandler.kt
index 91582c0..370d8cf 100644
--- a/android-app/app/src/main/kotlin/org/terst/nav/ui/InstrumentHandler.kt
+++ b/android-app/app/src/main/kotlin/org/terst/nav/ui/InstrumentHandler.kt
@@ -15,9 +15,9 @@ class InstrumentHandler(
     private val valueDepth: TextView,
     private val valueBaro: TextView,
     private val valueCurrSpd: TextView,
-    private val valueCurrDir: TextView,
+    private val valueCurrDir: TextView?,
     private val valueWaveHt: TextView,
-    private val valueWaveDir: TextView,
+    private val valueWaveDir: TextView?,
     private val valueSwellHt: TextView,
     private val valueSwellPer: TextView
 ) {
@@ -57,9 +57,9 @@ class InstrumentHandler(
         swellPer: String? = null
     ) {
         currSpd?.let { valueCurrSpd.text = it }
-        currDir?.let { valueCurrDir.text = it }
+        currDir?.let { valueCurrDir?.text = it }
         waveHt?.let { valueWaveHt.text = it }
-        waveDir?.let { valueWaveDir.text = it }
+        waveDir?.let { valueWaveDir?.text = it }
         swellHt?.let { valueSwellHt.text = it }
         swellPer?.let { valueSwellPer.text = it }
     }
diff --git a/android-app/app/src/main/res/layout/layout_instruments_sheet.xml b/android-app/app/src/main/res/layout/layout_instruments_sheet.xml
index 8c41ff3..33a7bd9 100644
--- a/android-app/app/src/main/res/layout/layout_instruments_sheet.xml
+++ b/android-app/app/src/main/res/layout/layout_instruments_sheet.xml
@@ -1,34 +1,46 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.constraintlayout.widget.ConstraintLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:padding="16dp"
+    android:paddingStart="16dp"
+    android:paddingEnd="16dp"
+    android:paddingBottom="16dp"
     android:background="?attr/colorSurface"
     android:clickable="true"
     android:focusable="true">
 
+    <!-- Drag handle -->
     <View
         android:id="@+id/drag_handle"
-        android:layout_width="40dp"
+        android:layout_width="36dp"
         android:layout_height="4dp"
+        android:layout_marginTop="12dp"
         android:background="@color/md_theme_outline"
         app:layout_constraintTop_toTopOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintEnd_toEndOf="parent" />
 
-    <!-- 3×2 grid: AWS/HDG/BSP top row, TWS/COG/SOG bottom row -->
+    <!--
+        3×2 grid: AWS/HDG/BSP top row, TWS/COG/SOG bottom row.
+        Cells with direction: AWS, TWS (kts + unit + arrow inline)
+                              HDG, COG (°-in-value + arrow inline)
+        Cells without: BSP, SOG (kts + unit, no arrow)
+    -->
     <androidx.gridlayout.widget.GridLayout
         android:id="@+id/instrument_grid"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_marginTop="16dp"
+        android:layout_marginTop="12dp"
         app:columnCount="3"
         app:rowCount="2"
-        app:layout_constraintTop_toBottomOf="@id/drag_handle">
+        app:layout_constraintTop_toBottomOf="@id/drag_handle"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toEndOf="parent">
 
-        <!-- Wind: AWS -->
+        <!-- AWS -->
         <LinearLayout
             android:layout_width="0dp"
             android:layout_height="wrap_content"
@@ -37,10 +49,28 @@
             android:gravity="center"
             android:padding="8dp">
             <TextView style="@style/InstrumentLabel" android:text="AWS" />
-            <TextView android:id="@+id/value_aws" style="@style/InstrumentPrimaryValue" tools:text="—" />
+            <LinearLayout
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_horizontal"
+                android:orientation="horizontal"
+                android:gravity="center_vertical">
+                <TextView
+                    android:id="@+id/value_aws"
+                    style="@style/InstrumentPrimaryValue"
+                    tools:text="18.2" />
+                <TextView style="@style/InstrumentUnit" android:text="kts" />
+                <org.terst.nav.ui.DirectionArrowView
+                    android:id="@+id/arrow_aws"
+                    android:layout_width="14dp"
+                    android:layout_height="14dp"
+                    android:layout_marginStart="3dp"
+                    android:layout_marginBottom="3dp"
+                    android:layout_gravity="bottom" />
+            </LinearLayout>
         </LinearLayout>
 
-        <!-- Compass: HDG -->
+        <!-- HDG: ° is part of the value string -->
         <LinearLayout
             android:layout_width="0dp"
             android:layout_height="wrap_content"
@@ -49,10 +79,27 @@
             android:gravity="center"
             android:padding="8dp">
             <TextView style="@style/InstrumentLabel" android:text="HDG" />
-            <TextView android:id="@+id/value_hdg" style="@style/InstrumentPrimaryValue" tools:text="—" />
+            <LinearLayout
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_horizontal"
+                android:orientation="horizontal"
+                android:gravity="center_vertical">
+                <TextView
+                    android:id="@+id/value_hdg"
+                    style="@style/InstrumentPrimaryValue"
+                    tools:text="247°" />
+                <org.terst.nav.ui.DirectionArrowView
+                    android:id="@+id/arrow_hdg"
+                    android:layout_width="14dp"
+                    android:layout_height="14dp"
+                    android:layout_marginStart="3dp"
+                    android:layout_marginBottom="3dp"
+                    android:layout_gravity="bottom" />
+            </LinearLayout>
         </LinearLayout>
 
-        <!-- Performance: BSP -->
+        <!-- BSP: no direction -->
         <LinearLayout
             android:layout_width="0dp"
             android:layout_height="wrap_content"
@@ -61,10 +108,21 @@
             android:gravity="center"
             android:padding="8dp">
             <TextView style="@style/InstrumentLabel" android:text="BSP" />
-            <TextView android:id="@+id/value_bsp" style="@style/InstrumentPrimaryValue" tools:text="—" />
+            <LinearLayout
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_horizontal"
+                android:orientation="horizontal"
+                android:gravity="center_vertical">
+                <TextView
+                    android:id="@+id/value_bsp"
+                    style="@style/InstrumentPrimaryValue"
+                    tools:text="6.8" />
+                <TextView style="@style/InstrumentUnit" android:text="kts" />
+            </LinearLayout>
         </LinearLayout>
 
-        <!-- Wind: TWS -->
+        <!-- TWS -->
         <LinearLayout
             android:layout_width="0dp"
             android:layout_height="wrap_content"
@@ -73,10 +131,28 @@
             android:gravity="center"
             android:padding="8dp">
             <TextView style="@style/InstrumentLabel" android:text="TWS" />
-            <TextView android:id="@+id/value_tws" style="@style/InstrumentPrimaryValue" tools:text="—" />
+            <LinearLayout
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_horizontal"
+                android:orientation="horizontal"
+                android:gravity="center_vertical">
+                <TextView
+                    android:id="@+id/value_tws"
+                    style="@style/InstrumentPrimaryValue"
+                    tools:text="15.5" />
+                <TextView style="@style/InstrumentUnit" android:text="kts" />
+                <org.terst.nav.ui.DirectionArrowView
+                    android:id="@+id/arrow_tws"
+                    android:layout_width="14dp"
+                    android:layout_height="14dp"
+                    android:layout_marginStart="3dp"
+                    android:layout_marginBottom="3dp"
+                    android:layout_gravity="bottom" />
+            </LinearLayout>
         </LinearLayout>
 
-        <!-- Compass: COG -->
+        <!-- COG: ° is part of the value string -->
         <LinearLayout
             android:layout_width="0dp"
             android:layout_height="wrap_content"
@@ -85,10 +161,27 @@
             android:gravity="center"
             android:padding="8dp">
             <TextView style="@style/InstrumentLabel" android:text="COG" />
-            <TextView android:id="@+id/value_cog" style="@style/InstrumentPrimaryValue" tools:text="—" />
+            <LinearLayout
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_horizontal"
+                android:orientation="horizontal"
+                android:gravity="center_vertical">
+                <TextView
+                    android:id="@+id/value_cog"
+                    style="@style/InstrumentPrimaryValue"
+                    tools:text="253°" />
+                <org.terst.nav.ui.DirectionArrowView
+                    android:id="@+id/arrow_cog"
+                    android:layout_width="14dp"
+                    android:layout_height="14dp"
+                    android:layout_marginStart="3dp"
+                    android:layout_marginBottom="3dp"
+                    android:layout_gravity="bottom" />
+            </LinearLayout>
         </LinearLayout>
 
-        <!-- Performance: SOG -->
+        <!-- SOG: no direction -->
         <LinearLayout
             android:layout_width="0dp"
             android:layout_height="wrap_content"
@@ -97,18 +190,29 @@
             android:gravity="center"
             android:padding="8dp">
             <TextView style="@style/InstrumentLabel" android:text="SOG" />
-            <TextView android:id="@+id/value_sog" style="@style/InstrumentPrimaryValue" tools:text="—" />
+            <LinearLayout
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_horizontal"
+                android:orientation="horizontal"
+                android:gravity="center_vertical">
+                <TextView
+                    android:id="@+id/value_sog"
+                    style="@style/InstrumentPrimaryValue"
+                    tools:text="7.1" />
+                <TextView style="@style/InstrumentUnit" android:text="kts" />
+            </LinearLayout>
         </LinearLayout>
 
     </androidx.gridlayout.widget.GridLayout>
 
-    <!-- Expanded: Depth + Baro side by side -->
+    <!-- Depth + Baro side by side -->
     <LinearLayout
         android:id="@+id/expanded_instruments"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:orientation="horizontal"
-        android:layout_marginTop="24dp"
+        android:layout_marginTop="4dp"
         app:layout_constraintTop_toBottomOf="@id/instrument_grid"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintEnd_toEndOf="parent">
@@ -117,87 +221,201 @@
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_weight="1"
-            android:orientation="vertical">
+            android:orientation="vertical"
+            android:gravity="center"
+            android:padding="8dp">
             <TextView style="@style/InstrumentLabel" android:text="Depth" />
-            <TextView android:id="@+id/value_depth" style="@style/InstrumentPrimaryValue" tools:text="—" />
+            <LinearLayout
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_horizontal"
+                android:orientation="horizontal"
+                android:gravity="center_vertical">
+                <TextView
+                    android:id="@+id/value_depth"
+                    style="@style/InstrumentPrimaryValue"
+                    tools:text="42.0" />
+                <TextView style="@style/InstrumentUnit" android:text="ft" />
+            </LinearLayout>
         </LinearLayout>
 
+        <View
+            android:layout_width="1dp"
+            android:layout_height="match_parent"
+            android:background="#2B2930" />
+
         <LinearLayout
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_weight="1"
-            android:orientation="vertical">
+            android:orientation="vertical"
+            android:gravity="center"
+            android:padding="8dp">
             <TextView style="@style/InstrumentLabel" android:text="Baro" />
-            <TextView android:id="@+id/value_baro" style="@style/InstrumentPrimaryValue" tools:text="—" />
+            <LinearLayout
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_horizontal"
+                android:orientation="horizontal"
+                android:gravity="center_vertical">
+                <TextView
+                    android:id="@+id/value_baro"
+                    style="@style/InstrumentPrimaryValue"
+                    tools:text="1013" />
+                <TextView style="@style/InstrumentUnit" android:text="hPa" />
+            </LinearLayout>
         </LinearLayout>
 
     </LinearLayout>
 
-    <!-- Divider -->
-    <View
-        android:id="@+id/conditions_divider"
+    <!-- Animated wave divider -->
+    <org.terst.nav.ui.WaveView
+        android:id="@+id/wave_divider"
         android:layout_width="match_parent"
-        android:layout_height="1dp"
-        android:background="@color/md_theme_outline"
-        android:layout_marginTop="20dp"
+        android:layout_height="72dp"
+        android:layout_marginStart="-16dp"
+        android:layout_marginEnd="-16dp"
         app:layout_constraintTop_toBottomOf="@id/expanded_instruments"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintEnd_toEndOf="parent" />
 
-    <TextView
-        android:id="@+id/label_conditions"
-        style="@style/InstrumentLabel"
-        android:text="FORECAST"
-        android:layout_marginTop="12dp"
-        app:layout_constraintTop_toBottomOf="@id/conditions_divider"
-        app:layout_constraintStart_toStartOf="parent" />
-
-    <!-- Conditions: Curr | Wave | Swell (3 columns, value + sub-label) -->
+    <!-- Forecast section (ocean) -->
     <LinearLayout
-        android:id="@+id/conditions_row"
+        android:id="@+id/forecast_row"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:orientation="horizontal"
-        android:layout_marginTop="8dp"
-        app:layout_constraintTop_toBottomOf="@id/label_conditions"
+        android:background="#0D2137"
+        android:paddingTop="14dp"
+        android:paddingBottom="20dp"
+        android:layout_marginStart="-16dp"
+        android:layout_marginEnd="-16dp"
+        app:layout_constraintTop_toBottomOf="@id/wave_divider"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintBottom_toBottomOf="parent">
 
+        <!-- Current -->
         <LinearLayout
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:orientation="vertical"
-            android:gravity="center">
-            <TextView style="@style/InstrumentLabel" android:text="Curr" />
-            <TextView android:id="@+id/value_curr_spd" style="@style/InstrumentPrimaryValue" tools:text="—" />
-            <TextView android:id="@+id/value_curr_dir" style="@style/InstrumentLabel" tools:text="—" />
+            android:gravity="center"
+            android:padding="4dp">
+            <TextView style="@style/ForecastLabel" android:text="Current" />
+            <LinearLayout
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_horizontal"
+                android:orientation="horizontal"
+                android:gravity="center_vertical">
+                <TextView
+                    android:id="@+id/value_curr_spd"
+                    style="@style/ForecastValue"
+                    tools:text="0.8" />
+                <TextView style="@style/ForecastUnit" android:text="kts" />
+            </LinearLayout>
+            <LinearLayout
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_horizontal"
+                android:orientation="horizontal"
+                android:gravity="center_vertical"
+                android:layout_marginTop="4dp">
+                <org.terst.nav.ui.DirectionArrowView
+                    android:id="@+id/arrow_curr"
+                    android:layout_width="14dp"
+                    android:layout_height="14dp" />
+                <TextView
+                    android:id="@+id/bearing_curr"
+                    style="@style/ForecastBearing"
+                    tools:text="185°" />
+            </LinearLayout>
         </LinearLayout>
 
+        <!-- Waves -->
         <LinearLayout
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:orientation="vertical"
-            android:gravity="center">
-            <TextView style="@style/InstrumentLabel" android:text="Wave" />
-            <TextView android:id="@+id/value_wave_ht" style="@style/InstrumentPrimaryValue" tools:text="—" />
-            <TextView android:id="@+id/value_wave_dir" style="@style/InstrumentLabel" tools:text="—" />
+            android:gravity="center"
+            android:padding="4dp">
+            <TextView style="@style/ForecastLabel" android:text="Waves" />
+            <LinearLayout
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_horizontal"
+                android:orientation="horizontal"
+                android:gravity="center_vertical">
+                <TextView
+                    android:id="@+id/value_wave_ht"
+                    style="@style/ForecastValue"
+                    tools:text="3.5" />
+                <TextView style="@style/ForecastUnit" android:text="ft" />
+            </LinearLayout>
+            <LinearLayout
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_horizontal"
+                android:orientation="horizontal"
+                android:gravity="center_vertical"
+                android:layout_marginTop="4dp">
+                <org.terst.nav.ui.DirectionArrowView
+                    android:id="@+id/arrow_waves"
+                    android:layout_width="14dp"
+                    android:layout_height="14dp" />
+                <TextView
+                    android:id="@+id/bearing_waves"
+                    style="@style/ForecastBearing"
+                    tools:text="275°" />
+            </LinearLayout>
         </LinearLayout>
 
+        <!-- Swell -->
         <LinearLayout
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:orientation="vertical"
-            android:gravity="center">
-            <TextView style="@style/InstrumentLabel" android:text="Swell" />
-            <TextView android:id="@+id/value_swell_ht" style="@style/InstrumentPrimaryValue" tools:text="—" />
-            <TextView android:id="@+id/value_swell_per" style="@style/InstrumentLabel" tools:text="—" />
+            android:gravity="center"
+            android:padding="4dp">
+            <TextView style="@style/ForecastLabel" android:text="Swell" />
+            <LinearLayout
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_horizontal"
+                android:orientation="horizontal"
+                android:gravity="center_vertical">
+                <TextView
+                    android:id="@+id/value_swell_ht"
+                    style="@style/ForecastValue"
+                    tools:text="5.2" />
+                <TextView style="@style/ForecastUnit" android:text="ft" />
+            </LinearLayout>
+            <LinearLayout
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_horizontal"
+                android:orientation="horizontal"
+                android:gravity="center_vertical"
+                android:layout_marginTop="4dp">
+                <org.terst.nav.ui.DirectionArrowView
+                    android:id="@+id/arrow_swell"
+                    android:layout_width="14dp"
+                    android:layout_height="14dp" />
+                <TextView
+                    android:id="@+id/bearing_swell"
+                    style="@style/ForecastBearing"
+                    tools:text="260°" />
+                <TextView
+                    android:id="@+id/value_swell_per"
+                    style="@style/ForecastPeriod"
+                    tools:text="· 14s" />
+            </LinearLayout>
         </LinearLayout>
 
     </LinearLayout>
 
-
 </androidx.constraintlayout.widget.ConstraintLayout>