From 2cce533490baa4fe0d14f8541be1375e8069b164 Mon Sep 17 00:00:00 2001
From: Peter Stone <thepeterstone@gmail.com>
Date: Mon, 6 Apr 2026 05:29:18 +0000
Subject: feat(ui): restructure instrument sheet layout — inline arrows,
 WaveView, ocean forecast section
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../main/res/layout/layout_instruments_sheet.xml   | 328 +++++++++++++++++----
 1 file changed, 273 insertions(+), 55 deletions(-)

(limited to 'android-app/app/src/main/res/layout')

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>
-- 
cgit v1.2.3