From 1914d9462bbcc2dbea3100ab2eb7d997f0caabc5 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Mon, 15 Jun 2026 08:24:39 +0200
Subject: [PATCH] feat(ui): replace mobile tab strip with custom full-width nav
 bar

Avalonia's TabStrip ignores HorizontalAlignment overrides when placed at
Bottom, causing the items to cluster left. Replace it with a dedicated
Grid (ColumnDefinitions="*,*,*,*,*") that guarantees 5 equal columns
across the full width. The built-in TabStrip is hidden on mobile; buttons
in the custom bar call SelectTabCommand to drive SelectedTabIndex on the
TabControl.
---
 src/App/ViewModels/MainWindowViewModel.cs |  6 +++
 src/App/Views/MainView.axaml              | 63 +++++++++++++++++++++--
 2 files changed, 66 insertions(+), 3 deletions(-)

diff --git a/src/App/ViewModels/MainWindowViewModel.cs b/src/App/ViewModels/MainWindowViewModel.cs
index 16cbc00..6855240 100644
--- a/src/App/ViewModels/MainWindowViewModel.cs
+++ b/src/App/ViewModels/MainWindowViewModel.cs
@@ -117,6 +117,12 @@ public partial class MainWindowViewModel : ViewModelBase
     [ObservableProperty]
     private string statusMessage = "";
 
+    [ObservableProperty]
+    private int selectedTabIndex;
+
+    [RelayCommand]
+    private void SelectTab(string index) => SelectedTabIndex = int.Parse(index);
+
     // ---- collections per la dashboard ----
 
     public ObservableCollection<HistoryRow> History { get; } = [];
diff --git a/src/App/Views/MainView.axaml b/src/App/Views/MainView.axaml
index 680381a..b53f1f9 100644
--- a/src/App/Views/MainView.axaml
+++ b/src/App/Views/MainView.axaml
@@ -185,7 +185,7 @@
         </ScrollViewer>
 
         <!-- ============ PANNELLO WALLET ============ -->
-        <Grid Grid.Row="1" RowDefinitions="Auto,*" IsVisible="{Binding IsWalletOpen}" Margin="16">
+        <Grid Grid.Row="1" RowDefinitions="Auto,*,Auto" IsVisible="{Binding IsWalletOpen}" Margin="16">
 
             <!-- Testata: saldo + rete. Connetti/sincronizza è automatico; chiudi
                  wallet è in File. Lo stato connessione è nella barra in basso. -->
@@ -197,11 +197,14 @@
 
             <!-- Tab: Storico / Invia / Ricevi / Indirizzi / Contatti -->
             <TabControl Grid.Row="1"
-                        TabStripPlacement="{Binding IsMobile, Converter={x:Static vm:BoolToTabPlacementConverter.Instance}}">
+                        SelectedIndex="{Binding SelectedTabIndex}"
+                        TabStripPlacement="Top">
 
                 <TabControl.Styles>
-                    <!-- Tab equamente distribuiti su tutta la larghezza -->
+                    <!-- Su mobile nascondiamo il TabStrip integrato (barra custom sotto) -->
                     <Style Selector="TabStrip">
+                        <Setter Property="IsVisible" Value="{Binding !IsMobile}"/>
+                        <Setter Property="HorizontalAlignment" Value="Stretch"/>
                         <Setter Property="ItemsPanel">
                             <ItemsPanelTemplate>
                                 <UniformGrid Rows="1"/>
@@ -506,6 +509,60 @@
                 </TabItem>
 
             </TabControl>
+
+            <!-- Barra di navigazione custom mobile: 5 colonne uguali, sempre centrata -->
+            <Grid Grid.Row="2"
+                  ColumnDefinitions="*,*,*,*,*"
+                  IsVisible="{Binding IsMobile}"
+                  Background="{DynamicResource SystemControlBackgroundChromeMediumBrush}"
+                  Margin="-16,4,-16,0">
+                <Button Grid.Column="0"
+                        HorizontalAlignment="Stretch" HorizontalContentAlignment="Center"
+                        Background="Transparent" Padding="4,8"
+                        Command="{Binding SelectTabCommand}" CommandParameter="0">
+                    <StackPanel Spacing="2" HorizontalAlignment="Center">
+                        <TextBlock Text="≡" FontSize="19" HorizontalAlignment="Center"/>
+                        <TextBlock Text="{Binding Loc[tab.history]}" FontSize="11" HorizontalAlignment="Center"/>
+                    </StackPanel>
+                </Button>
+                <Button Grid.Column="1"
+                        HorizontalAlignment="Stretch" HorizontalContentAlignment="Center"
+                        Background="Transparent" Padding="4,8"
+                        Command="{Binding SelectTabCommand}" CommandParameter="1">
+                    <StackPanel Spacing="2" HorizontalAlignment="Center">
+                        <TextBlock Text="↑" FontSize="19" HorizontalAlignment="Center"/>
+                        <TextBlock Text="{Binding Loc[tab.send]}" FontSize="11" HorizontalAlignment="Center"/>
+                    </StackPanel>
+                </Button>
+                <Button Grid.Column="2"
+                        HorizontalAlignment="Stretch" HorizontalContentAlignment="Center"
+                        Background="Transparent" Padding="4,8"
+                        Command="{Binding SelectTabCommand}" CommandParameter="2">
+                    <StackPanel Spacing="2" HorizontalAlignment="Center">
+                        <TextBlock Text="↓" FontSize="19" HorizontalAlignment="Center"/>
+                        <TextBlock Text="{Binding Loc[tab.receive]}" FontSize="11" HorizontalAlignment="Center"/>
+                    </StackPanel>
+                </Button>
+                <Button Grid.Column="3"
+                        HorizontalAlignment="Stretch" HorizontalContentAlignment="Center"
+                        Background="Transparent" Padding="4,8"
+                        Command="{Binding SelectTabCommand}" CommandParameter="3">
+                    <StackPanel Spacing="2" HorizontalAlignment="Center">
+                        <TextBlock Text="⊙" FontSize="19" HorizontalAlignment="Center"/>
+                        <TextBlock Text="{Binding Loc[tab.addresses]}" FontSize="11" HorizontalAlignment="Center"/>
+                    </StackPanel>
+                </Button>
+                <Button Grid.Column="4"
+                        HorizontalAlignment="Stretch" HorizontalContentAlignment="Center"
+                        Background="Transparent" Padding="4,8"
+                        Command="{Binding SelectTabCommand}" CommandParameter="4">
+                    <StackPanel Spacing="2" HorizontalAlignment="Center">
+                        <TextBlock Text="⊕" FontSize="19" HorizontalAlignment="Center"/>
+                        <TextBlock Text="{Binding Loc[tab.contacts]}" FontSize="11" HorizontalAlignment="Center"/>
+                    </StackPanel>
+                </Button>
+            </Grid>
+
         </Grid>
 
         <!-- Barra di stato: messaggio a sinistra, stato connessione a destra.