From 9b8bd9078f2b78c77aadc52a08f79eac48dd32a9 Mon Sep 17 00:00:00 2001
From: Peter Stone <thepeterstone@gmail.com>
Date: Wed, 1 Jul 2026 06:43:01 +0000
Subject: feat(ui): Windy-style layer picker layout with base map cards and
 overlay sections

Replaces ScrollView + flat switch list with NestedScrollView + GridLayout
card sections: BASE MAP (2x2 preview cards), NAVIGATION, OCEAN DATA,
WEATHER, MY DATA (toggle cards with 48dp previews), and UNITS (unchanged).
Stubs out old chip_group_base wiring in LayerPickerSheet.kt pending Task 7 rewrite.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../kotlin/org/terst/nav/ui/LayerPickerSheet.kt    |  23 +-
 .../main/res/layout/layout_layer_picker_sheet.xml  | 734 +++++++++++++--------
 2 files changed, 473 insertions(+), 284 deletions(-)

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

diff --git a/android-app/app/src/main/kotlin/org/terst/nav/ui/LayerPickerSheet.kt b/android-app/app/src/main/kotlin/org/terst/nav/ui/LayerPickerSheet.kt
index 81346a8..b83b638 100644
--- a/android-app/app/src/main/kotlin/org/terst/nav/ui/LayerPickerSheet.kt
+++ b/android-app/app/src/main/kotlin/org/terst/nav/ui/LayerPickerSheet.kt
@@ -6,6 +6,7 @@ import android.view.View
 import android.view.ViewGroup
 import com.google.android.material.bottomsheet.BottomSheetDialogFragment
 import com.google.android.material.chip.ChipGroup
+import com.google.android.material.card.MaterialCardView
 import com.google.android.material.switchmaterial.SwitchMaterial
 import org.terst.nav.DepthUnit
 import org.terst.nav.PressureUnit
@@ -32,24 +33,10 @@ class LayerPickerSheet(
         inflater.inflate(R.layout.layout_layer_picker_sheet, container, false)
 
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
-        // ── Base layer chips ──────────────────────────────────────────────────
-        val chipGroup = view.findViewById<ChipGroup>(R.id.chip_group_base)
-        chipGroup.check(when (manager.basePreset) {
-            MapBasePreset.OCEAN     -> R.id.chip_ocean
-            MapBasePreset.SATELLITE -> R.id.chip_satellite
-            MapBasePreset.CHARTS    -> R.id.chip_charts
-            MapBasePreset.HYBRID    -> R.id.chip_hybrid
-        })
-        chipGroup.setOnCheckedStateChangeListener { _, checkedIds ->
-            val preset = when (checkedIds.firstOrNull()) {
-                R.id.chip_ocean     -> MapBasePreset.OCEAN
-                R.id.chip_satellite -> MapBasePreset.SATELLITE
-                R.id.chip_charts    -> MapBasePreset.CHARTS
-                R.id.chip_hybrid    -> MapBasePreset.HYBRID
-                else -> return@setOnCheckedStateChangeListener
-            }
-            onBaseChanged(preset)
-        }
+        // ── Base map cards (TODO Task 7: wire up click listeners) ────────────
+        // chip_group_base / chip_ocean / chip_satellite / chip_charts / chip_hybrid
+        // replaced by card_ocean / card_satellite / card_charts / card_hybrid
+        // Full wiring deferred to Task 7 rewrite.
 
         // ── Wind overlay switch ───────────────────────────────────────────────
         val windSwitch = view.findViewById<SwitchMaterial>(R.id.switch_wind)
diff --git a/android-app/app/src/main/res/layout/layout_layer_picker_sheet.xml b/android-app/app/src/main/res/layout/layout_layer_picker_sheet.xml
index b8db879..cba4be1 100644
--- a/android-app/app/src/main/res/layout/layout_layer_picker_sheet.xml
+++ b/android-app/app/src/main/res/layout/layout_layer_picker_sheet.xml
@@ -1,343 +1,545 @@
 <?xml version="1.0" encoding="utf-8"?>
-<ScrollView
+<androidx.core.widget.NestedScrollView
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
-    android:layout_height="wrap_content"
+    android:layout_height="match_parent"
     android:background="?attr/colorSurface">
 
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:orientation="vertical"
-        android:paddingStart="24dp"
-        android:paddingEnd="24dp"
-        android:paddingBottom="40dp">
+        android:paddingTop="8dp"
+        android:paddingBottom="24dp">
 
+        <!-- Drag handle -->
         <View
-            android:layout_width="36dp"
+            android:layout_width="32dp"
             android:layout_height="4dp"
             android:layout_gravity="center_horizontal"
-            android:layout_marginTop="12dp"
-            android:layout_marginBottom="20dp"
-            android:background="@color/md_theme_outline" />
+            android:layout_marginBottom="12dp"
+            android:background="@drawable/drag_handle_bg"/>
 
-        <!-- ── MAP LAYERS ──────────────────────────────────────────── -->
+        <!-- ── BASE MAP ──────────────────────────────────────────────── -->
 
         <TextView
-            android:layout_width="wrap_content"
+            android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_marginBottom="12dp"
-            android:text="MAP LAYERS"
+            android:text="BASE MAP"
             android:textSize="11sp"
             android:textAllCaps="true"
             android:letterSpacing="0.12"
             android:fontFamily="sans-serif-light"
-            android:textColor="@color/instrument_text_secondary" />
+            android:textColor="@color/instrument_text_secondary"
+            android:paddingStart="16dp"
+            android:paddingEnd="16dp"
+            android:paddingBottom="8dp"/>
 
-        <!-- Base map selection -->
-        <com.google.android.material.chip.ChipGroup
-            android:id="@+id/chip_group_base"
+        <GridLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_marginBottom="20dp"
-            app:singleSelection="true"
-            app:selectionRequired="true">
-
-            <com.google.android.material.chip.Chip
-                android:id="@+id/chip_ocean"
-                style="@style/Widget.Material3.Chip.Filter"
-                android:layout_width="wrap_content"
+            android:columnCount="2"
+            android:rowCount="2"
+            android:paddingStart="8dp"
+            android:paddingEnd="8dp"
+            android:paddingBottom="16dp">
+
+            <com.google.android.material.card.MaterialCardView
+                android:id="@+id/card_ocean"
+                style="@style/Widget.Material3.CardView.Outlined"
+                android:layout_width="0dp"
                 android:layout_height="wrap_content"
-                android:text="Ocean" />
-
-            <com.google.android.material.chip.Chip
-                android:id="@+id/chip_satellite"
-                style="@style/Widget.Material3.Chip.Filter"
-                android:layout_width="wrap_content"
+                android:layout_margin="4dp"
+                app:layout_columnWeight="1"
+                app:cardCornerRadius="12dp"
+                app:strokeWidth="0dp">
+                <LinearLayout
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:orientation="vertical">
+                    <ImageView
+                        android:layout_width="match_parent"
+                        android:layout_height="80dp"
+                        android:scaleType="centerCrop"
+                        android:src="@drawable/preview_ocean"
+                        android:contentDescription="Ocean base map preview"/>
+                    <TextView
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:text="Ocean"
+                        android:textSize="13sp"
+                        android:gravity="center"
+                        android:paddingTop="6dp"
+                        android:paddingBottom="8dp"
+                        android:textColor="@color/instrument_text_normal"/>
+                </LinearLayout>
+            </com.google.android.material.card.MaterialCardView>
+
+            <com.google.android.material.card.MaterialCardView
+                android:id="@+id/card_satellite"
+                style="@style/Widget.Material3.CardView.Outlined"
+                android:layout_width="0dp"
                 android:layout_height="wrap_content"
-                android:text="Satellite" />
-
-            <com.google.android.material.chip.Chip
-                android:id="@+id/chip_charts"
-                style="@style/Widget.Material3.Chip.Filter"
-                android:layout_width="wrap_content"
+                android:layout_margin="4dp"
+                app:layout_columnWeight="1"
+                app:cardCornerRadius="12dp"
+                app:strokeWidth="0dp">
+                <LinearLayout
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:orientation="vertical">
+                    <ImageView
+                        android:layout_width="match_parent"
+                        android:layout_height="80dp"
+                        android:scaleType="centerCrop"
+                        android:src="@drawable/preview_satellite"
+                        android:contentDescription="Satellite base map preview"/>
+                    <TextView
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:text="Satellite"
+                        android:textSize="13sp"
+                        android:gravity="center"
+                        android:paddingTop="6dp"
+                        android:paddingBottom="8dp"
+                        android:textColor="@color/instrument_text_normal"/>
+                </LinearLayout>
+            </com.google.android.material.card.MaterialCardView>
+
+            <com.google.android.material.card.MaterialCardView
+                android:id="@+id/card_charts"
+                style="@style/Widget.Material3.CardView.Outlined"
+                android:layout_width="0dp"
                 android:layout_height="wrap_content"
-                android:text="Charts" />
-
-            <com.google.android.material.chip.Chip
-                android:id="@+id/chip_hybrid"
-                style="@style/Widget.Material3.Chip.Filter"
-                android:layout_width="wrap_content"
+                android:layout_margin="4dp"
+                app:layout_columnWeight="1"
+                app:cardCornerRadius="12dp"
+                app:strokeWidth="0dp">
+                <LinearLayout
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:orientation="vertical">
+                    <ImageView
+                        android:layout_width="match_parent"
+                        android:layout_height="80dp"
+                        android:scaleType="centerCrop"
+                        android:src="@drawable/preview_charts"
+                        android:contentDescription="Charts base map preview"/>
+                    <TextView
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:text="Charts"
+                        android:textSize="13sp"
+                        android:gravity="center"
+                        android:paddingTop="6dp"
+                        android:paddingBottom="8dp"
+                        android:textColor="@color/instrument_text_normal"/>
+                </LinearLayout>
+            </com.google.android.material.card.MaterialCardView>
+
+            <com.google.android.material.card.MaterialCardView
+                android:id="@+id/card_hybrid"
+                style="@style/Widget.Material3.CardView.Outlined"
+                android:layout_width="0dp"
                 android:layout_height="wrap_content"
-                android:text="Hybrid" />
-
-        </com.google.android.material.chip.ChipGroup>
+                android:layout_margin="4dp"
+                app:layout_columnWeight="1"
+                app:cardCornerRadius="12dp"
+                app:strokeWidth="0dp">
+                <LinearLayout
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:orientation="vertical">
+                    <ImageView
+                        android:layout_width="match_parent"
+                        android:layout_height="80dp"
+                        android:scaleType="centerCrop"
+                        android:src="@drawable/preview_hybrid"
+                        android:contentDescription="Hybrid base map preview"/>
+                    <TextView
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:text="Hybrid"
+                        android:textSize="13sp"
+                        android:gravity="center"
+                        android:paddingTop="6dp"
+                        android:paddingBottom="8dp"
+                        android:textColor="@color/instrument_text_normal"/>
+                </LinearLayout>
+            </com.google.android.material.card.MaterialCardView>
+
+        </GridLayout>
+
+        <!-- ── NAVIGATION ────────────────────────────────────────────── -->
 
-        <View
+        <TextView
             android:layout_width="match_parent"
-            android:layout_height="1dp"
-            android:layout_marginBottom="16dp"
-            android:background="@color/md_theme_surfaceVariant" />
+            android:layout_height="wrap_content"
+            android:text="NAVIGATION"
+            android:textSize="11sp"
+            android:textAllCaps="true"
+            android:letterSpacing="0.12"
+            android:fontFamily="sans-serif-light"
+            android:textColor="@color/instrument_text_secondary"
+            android:paddingStart="16dp"
+            android:paddingEnd="16dp"
+            android:paddingBottom="8dp"/>
 
-        <!-- Wind overlay toggle -->
-        <LinearLayout
+        <GridLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:orientation="horizontal"
-            android:gravity="center_vertical"
-            android:layout_marginBottom="12dp">
-
-            <LinearLayout
+            android:columnCount="2"
+            android:paddingStart="8dp"
+            android:paddingEnd="8dp"
+            android:paddingBottom="16dp">
+
+            <com.google.android.material.card.MaterialCardView
+                android:id="@+id/card_seamarks"
+                style="@style/Widget.Material3.CardView.Outlined"
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
-                android:layout_weight="1"
-                android:orientation="vertical">
-                <TextView
-                    android:layout_width="wrap_content"
+                android:layout_margin="4dp"
+                app:layout_columnWeight="1"
+                app:cardCornerRadius="12dp"
+                app:strokeWidth="0dp">
+                <LinearLayout
+                    android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:text="Wind overlay"
-                    android:textSize="15sp"
-                    android:textColor="@color/instrument_text_normal" />
-                <TextView
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:text="Wind speed colour map"
-                    android:textSize="12sp"
-                    android:textColor="@color/instrument_text_secondary" />
-            </LinearLayout>
-
-            <com.google.android.material.switchmaterial.SwitchMaterial
-                android:id="@+id/switch_wind"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content" />
-
-        </LinearLayout>
-
-        <!-- Wind particles toggle -->
-        <LinearLayout
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:orientation="horizontal"
-            android:gravity="center_vertical"
-            android:layout_marginBottom="8dp">
-
-            <LinearLayout
+                    android:orientation="vertical"
+                    android:padding="8dp">
+                    <ImageView
+                        android:layout_width="match_parent"
+                        android:layout_height="48dp"
+                        android:scaleType="centerCrop"
+                        android:src="@drawable/preview_seamarks"
+                        android:contentDescription="Seamarks preview"/>
+                    <com.google.android.material.switchmaterial.SwitchMaterial
+                        android:id="@+id/switch_seamarks"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:text="Seamarks"
+                        android:textSize="12sp"
+                        android:paddingTop="4dp"/>
+                </LinearLayout>
+            </com.google.android.material.card.MaterialCardView>
+
+            <com.google.android.material.card.MaterialCardView
+                android:id="@+id/card_aton"
+                style="@style/Widget.Material3.CardView.Outlined"
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
-                android:layout_weight="1"
-                android:orientation="vertical">
-                <TextView
-                    android:layout_width="wrap_content"
+                android:layout_margin="4dp"
+                app:layout_columnWeight="1"
+                app:cardCornerRadius="12dp"
+                app:strokeWidth="0dp">
+                <LinearLayout
+                    android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:text="Wind particles"
-                    android:textSize="15sp"
-                    android:textColor="@color/instrument_text_normal" />
-                <TextView
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:text="Animated particle overlay"
-                    android:textSize="12sp"
-                    android:textColor="@color/instrument_text_secondary" />
-            </LinearLayout>
-
-            <com.google.android.material.switchmaterial.SwitchMaterial
-                android:id="@+id/switch_particles"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content" />
-
-        </LinearLayout>
-
-        <!-- Past tracks toggle -->
-        <LinearLayout
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:orientation="horizontal"
-            android:gravity="center_vertical"
-            android:layout_marginTop="4dp"
-            android:layout_marginBottom="8dp">
-
-            <LinearLayout
+                    android:orientation="vertical"
+                    android:padding="8dp">
+                    <ImageView
+                        android:layout_width="match_parent"
+                        android:layout_height="48dp"
+                        android:scaleType="centerCrop"
+                        android:src="@drawable/preview_ocean"
+                        android:contentDescription="ATON preview"/>
+                    <com.google.android.material.switchmaterial.SwitchMaterial
+                        android:id="@+id/switch_aton"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:text="ATON"
+                        android:textSize="12sp"
+                        android:paddingTop="4dp"/>
+                </LinearLayout>
+            </com.google.android.material.card.MaterialCardView>
+
+            <com.google.android.material.card.MaterialCardView
+                android:id="@+id/card_tss"
+                style="@style/Widget.Material3.CardView.Outlined"
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
-                android:layout_weight="1"
-                android:orientation="vertical">
-                <TextView
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:text="Past tracks"
-                    android:textSize="15sp"
-                    android:textColor="@color/instrument_text_normal" />
-                <TextView
-                    android:layout_width="wrap_content"
+                android:layout_margin="4dp"
+                app:layout_columnWeight="1"
+                app:cardCornerRadius="12dp"
+                app:strokeWidth="0dp">
+                <LinearLayout
+                    android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:text="Show previous voyages on map"
-                    android:textSize="12sp"
-                    android:textColor="@color/instrument_text_secondary" />
-            </LinearLayout>
-
-            <com.google.android.material.switchmaterial.SwitchMaterial
-                android:id="@+id/switch_past_tracks"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content" />
-
-        </LinearLayout>
-
-        <!-- ── OCEAN LAYERS ───────────────────────────────────────── -->
-
-        <View
-            android:layout_width="match_parent"
-            android:layout_height="1dp"
-            android:layout_marginTop="8dp"
-            android:layout_marginBottom="16dp"
-            android:background="@color/md_theme_surfaceVariant" />
+                    android:orientation="vertical"
+                    android:padding="8dp">
+                    <ImageView
+                        android:layout_width="match_parent"
+                        android:layout_height="48dp"
+                        android:scaleType="centerCrop"
+                        android:src="@drawable/preview_charts"
+                        android:contentDescription="TSS preview"/>
+                    <com.google.android.material.switchmaterial.SwitchMaterial
+                        android:id="@+id/switch_tss"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:text="TSS"
+                        android:textSize="12sp"
+                        android:paddingTop="4dp"/>
+                </LinearLayout>
+            </com.google.android.material.card.MaterialCardView>
+
+        </GridLayout>
+
+        <!-- ── OCEAN DATA ─────────────────────────────────────────────── -->
 
         <TextView
-            android:layout_width="wrap_content"
+            android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_marginBottom="12dp"
-            android:text="OCEAN LAYERS"
+            android:text="OCEAN DATA"
             android:textSize="11sp"
             android:textAllCaps="true"
             android:letterSpacing="0.12"
             android:fontFamily="sans-serif-light"
-            android:textColor="@color/instrument_text_secondary" />
+            android:textColor="@color/instrument_text_secondary"
+            android:paddingStart="16dp"
+            android:paddingEnd="16dp"
+            android:paddingBottom="8dp"/>
 
-        <!-- Seamarks / nav aids -->
-        <LinearLayout
+        <GridLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:orientation="horizontal"
-            android:gravity="center_vertical"
-            android:layout_marginBottom="12dp">
-
-            <LinearLayout
+            android:columnCount="2"
+            android:paddingStart="8dp"
+            android:paddingEnd="8dp"
+            android:paddingBottom="16dp">
+
+            <com.google.android.material.card.MaterialCardView
+                android:id="@+id/card_depth"
+                style="@style/Widget.Material3.CardView.Outlined"
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
-                android:layout_weight="1"
-                android:orientation="vertical">
-                <TextView
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:text="Seamarks / nav aids"
-                    android:textSize="15sp"
-                    android:textColor="@color/instrument_text_normal" />
-                <TextView
-                    android:layout_width="wrap_content"
+                android:layout_margin="4dp"
+                app:layout_columnWeight="1"
+                app:cardCornerRadius="12dp"
+                app:strokeWidth="0dp">
+                <LinearLayout
+                    android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:text="Buoys, lights, hazards (OpenSeaMap)"
-                    android:textSize="12sp"
-                    android:textColor="@color/instrument_text_secondary" />
-            </LinearLayout>
-
-            <com.google.android.material.switchmaterial.SwitchMaterial
-                android:id="@+id/switch_seamarks"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content" />
-
-        </LinearLayout>
-
-        <!-- Depth contours -->
-        <LinearLayout
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:orientation="horizontal"
-            android:gravity="center_vertical"
-            android:layout_marginBottom="12dp">
-
-            <LinearLayout
+                    android:orientation="vertical"
+                    android:padding="8dp">
+                    <ImageView
+                        android:layout_width="match_parent"
+                        android:layout_height="48dp"
+                        android:scaleType="centerCrop"
+                        android:src="@drawable/preview_depth"
+                        android:contentDescription="Depth preview"/>
+                    <com.google.android.material.switchmaterial.SwitchMaterial
+                        android:id="@+id/switch_depth"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:text="Depth"
+                        android:textSize="12sp"
+                        android:paddingTop="4dp"/>
+                </LinearLayout>
+            </com.google.android.material.card.MaterialCardView>
+
+            <com.google.android.material.card.MaterialCardView
+                android:id="@+id/card_sst"
+                style="@style/Widget.Material3.CardView.Outlined"
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
-                android:layout_weight="1"
-                android:orientation="vertical">
-                <TextView
-                    android:layout_width="wrap_content"
+                android:layout_margin="4dp"
+                app:layout_columnWeight="1"
+                app:cardCornerRadius="12dp"
+                app:strokeWidth="0dp">
+                <LinearLayout
+                    android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:text="Depth contours"
-                    android:textSize="15sp"
-                    android:textColor="@color/instrument_text_normal" />
-                <TextView
-                    android:layout_width="wrap_content"
+                    android:orientation="vertical"
+                    android:padding="8dp">
+                    <ImageView
+                        android:layout_width="match_parent"
+                        android:layout_height="48dp"
+                        android:scaleType="centerCrop"
+                        android:src="@drawable/preview_sst"
+                        android:contentDescription="SST preview"/>
+                    <com.google.android.material.switchmaterial.SwitchMaterial
+                        android:id="@+id/switch_sst"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:text="SST"
+                        android:textSize="12sp"
+                        android:paddingTop="4dp"/>
+                </LinearLayout>
+            </com.google.android.material.card.MaterialCardView>
+
+            <com.google.android.material.card.MaterialCardView
+                android:id="@+id/card_fads"
+                style="@style/Widget.Material3.CardView.Outlined"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_margin="4dp"
+                app:layout_columnWeight="1"
+                app:cardCornerRadius="12dp"
+                app:strokeWidth="0dp">
+                <LinearLayout
+                    android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:text="Soundings &amp; contour lines (OpenSeaMap)"
-                    android:textSize="12sp"
-                    android:textColor="@color/instrument_text_secondary" />
-            </LinearLayout>
-
-            <com.google.android.material.switchmaterial.SwitchMaterial
-                android:id="@+id/switch_depth"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content" />
-
-        </LinearLayout>
+                    android:orientation="vertical"
+                    android:padding="8dp">
+                    <ImageView
+                        android:layout_width="match_parent"
+                        android:layout_height="48dp"
+                        android:scaleType="centerCrop"
+                        android:src="@drawable/preview_ocean"
+                        android:contentDescription="FADs preview"/>
+                    <com.google.android.material.switchmaterial.SwitchMaterial
+                        android:id="@+id/switch_fads"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:text="FADs"
+                        android:textSize="12sp"
+                        android:paddingTop="4dp"/>
+                </LinearLayout>
+            </com.google.android.material.card.MaterialCardView>
+
+        </GridLayout>
+
+        <!-- ── WEATHER ────────────────────────────────────────────────── -->
 
-        <!-- FADs -->
-        <LinearLayout
+        <TextView
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:orientation="horizontal"
-            android:gravity="center_vertical"
-            android:layout_marginBottom="8dp">
+            android:text="WEATHER"
+            android:textSize="11sp"
+            android:textAllCaps="true"
+            android:letterSpacing="0.12"
+            android:fontFamily="sans-serif-light"
+            android:textColor="@color/instrument_text_secondary"
+            android:paddingStart="16dp"
+            android:paddingEnd="16dp"
+            android:paddingBottom="8dp"/>
 
-            <LinearLayout
+        <GridLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:columnCount="2"
+            android:paddingStart="8dp"
+            android:paddingEnd="8dp"
+            android:paddingBottom="16dp">
+
+            <com.google.android.material.card.MaterialCardView
+                android:id="@+id/card_wind"
+                style="@style/Widget.Material3.CardView.Outlined"
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
-                android:layout_weight="1"
-                android:orientation="vertical">
-                <TextView
-                    android:layout_width="wrap_content"
+                android:layout_margin="4dp"
+                app:layout_columnWeight="1"
+                app:cardCornerRadius="12dp"
+                app:strokeWidth="0dp">
+                <LinearLayout
+                    android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:text="FADs"
-                    android:textSize="15sp"
-                    android:textColor="@color/instrument_text_normal" />
-                <TextView
-                    android:layout_width="wrap_content"
+                    android:orientation="vertical"
+                    android:padding="8dp">
+                    <ImageView
+                        android:layout_width="match_parent"
+                        android:layout_height="48dp"
+                        android:scaleType="centerCrop"
+                        android:src="@drawable/preview_wind"
+                        android:contentDescription="Wind preview"/>
+                    <com.google.android.material.switchmaterial.SwitchMaterial
+                        android:id="@+id/switch_wind"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:text="Wind"
+                        android:textSize="12sp"
+                        android:paddingTop="4dp"/>
+                </LinearLayout>
+            </com.google.android.material.card.MaterialCardView>
+
+            <com.google.android.material.card.MaterialCardView
+                android:id="@+id/card_particles"
+                style="@style/Widget.Material3.CardView.Outlined"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_margin="4dp"
+                app:layout_columnWeight="1"
+                app:cardCornerRadius="12dp"
+                app:strokeWidth="0dp">
+                <LinearLayout
+                    android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:text="Fish aggregating devices (Hawaii DLNR)"
-                    android:textSize="12sp"
-                    android:textColor="@color/instrument_text_secondary" />
-            </LinearLayout>
-
-            <com.google.android.material.switchmaterial.SwitchMaterial
-                android:id="@+id/switch_fads"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content" />
-
-        </LinearLayout>
+                    android:orientation="vertical"
+                    android:padding="8dp">
+                    <ImageView
+                        android:layout_width="match_parent"
+                        android:layout_height="48dp"
+                        android:scaleType="centerCrop"
+                        android:src="@drawable/preview_wind"
+                        android:contentDescription="Particles preview"/>
+                    <com.google.android.material.switchmaterial.SwitchMaterial
+                        android:id="@+id/switch_particles"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:text="Particles"
+                        android:textSize="12sp"
+                        android:paddingTop="4dp"/>
+                </LinearLayout>
+            </com.google.android.material.card.MaterialCardView>
+
+        </GridLayout>
+
+        <!-- ── MY DATA ────────────────────────────────────────────────── -->
 
-        <!-- SST (sea surface temp) -->
-        <LinearLayout
+        <TextView
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:orientation="horizontal"
-            android:gravity="center_vertical"
-            android:layout_marginBottom="8dp">
+            android:text="MY DATA"
+            android:textSize="11sp"
+            android:textAllCaps="true"
+            android:letterSpacing="0.12"
+            android:fontFamily="sans-serif-light"
+            android:textColor="@color/instrument_text_secondary"
+            android:paddingStart="16dp"
+            android:paddingEnd="16dp"
+            android:paddingBottom="8dp"/>
 
-            <LinearLayout
+        <GridLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:columnCount="2"
+            android:paddingStart="8dp"
+            android:paddingEnd="8dp"
+            android:paddingBottom="16dp">
+
+            <com.google.android.material.card.MaterialCardView
+                android:id="@+id/card_past_tracks"
+                style="@style/Widget.Material3.CardView.Outlined"
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
-                android:layout_weight="1"
-                android:orientation="vertical">
-                <TextView
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:text="SST (sea surface temp)"
-                    android:textSize="15sp"
-                    android:textColor="@color/instrument_text_normal" />
-                <TextView
-                    android:layout_width="wrap_content"
+                android:layout_margin="4dp"
+                app:layout_columnWeight="1"
+                app:cardCornerRadius="12dp"
+                app:strokeWidth="0dp">
+                <LinearLayout
+                    android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:text="Temperature overlay — NOAA CoastWatch"
-                    android:textSize="12sp"
-                    android:textColor="@color/instrument_text_secondary" />
-            </LinearLayout>
-
-            <com.google.android.material.switchmaterial.SwitchMaterial
-                android:id="@+id/switch_sst"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content" />
-
-        </LinearLayout>
+                    android:orientation="vertical"
+                    android:padding="8dp">
+                    <ImageView
+                        android:layout_width="match_parent"
+                        android:layout_height="48dp"
+                        android:scaleType="centerCrop"
+                        android:src="@drawable/preview_satellite"
+                        android:contentDescription="Past tracks preview"/>
+                    <com.google.android.material.switchmaterial.SwitchMaterial
+                        android:id="@+id/switch_past_tracks"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:text="Past Tracks"
+                        android:textSize="12sp"
+                        android:paddingTop="4dp"/>
+                </LinearLayout>
+            </com.google.android.material.card.MaterialCardView>
+
+        </GridLayout>
 
         <!-- ── UNITS ───────────────────────────────────────────────── -->
 
@@ -505,4 +707,4 @@
         </LinearLayout>
 
     </LinearLayout>
-</ScrollView>
+</androidx.core.widget.NestedScrollView>
-- 
cgit v1.2.3