💄 Add bottom bar façade

this one feels dirty but we'll keep it at that for now

AMC.View/Controls/BottomBar.xaml

@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:strings="clr-namespace:AMC.View.Resources.Strings"
+             xmlns:ctl="clr-namespace:AMC.View.Controls"
+             x:Class="AMC.View.Controls.BottomBar">
+
+    <StackLayout Orientation="Vertical"
+				 BackgroundColor="{AppThemeBinding Light={StaticResource Gray100}, Dark={StaticResource Gray900}}">
+
+        <StackLayout Orientation="Horizontal" 
+                     HeightRequest="{StaticResource SpaceXL}">
+
+            <Frame Margin="{StaticResource HSpaceLittleVSpaceVeryLittle}"
+                   BackgroundColor="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray750}}"
+                   BorderColor="Transparent"
+                   HorizontalOptions="Start"
+                   VerticalOptions="Center">
+                <Image Source="icon_default_song.png"
+               Aspect="AspectFill"/>
+            </Frame>
+
+            <Label Text="{x:Static strings:Strings.DefaultPlayingSongLabel}" 
+                   HorizontalOptions="StartAndExpand" 
+                   VerticalOptions="Center"
+                   TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}" />
+
+            <ImageButton Source="{AppThemeBinding Light='icon_play.png', Dark='icon_play_dark.png'}" 
+                         Margin="{StaticResource SpaceS}"
+                         HorizontalOptions="End"
+                         VerticalOptions="Center"
+                         HeightRequest="{StaticResource SpaceML}"
+                         WidthRequest="{StaticResource SpaceML}" />
+
+            <ImageButton Source="{AppThemeBinding Light='icon_next.png', Dark='icon_next_dark.png'}" 
+                         Margin="{StaticResource SpaceS}"
+                         HorizontalOptions="End"
+                         VerticalOptions="Center"
+                         HeightRequest="{StaticResource SpaceML}"
+                         WidthRequest="{StaticResource SpaceML}" />
+        </StackLayout>
+
+        <BoxView Style="{StaticResource BottomBarGraySeparator}" />
+
+
+        <FlexLayout Direction="Row" 
+                    HeightRequest="{StaticResource SpaceXL}"
+                    JustifyContent="SpaceAround" 
+                    AlignItems="Center">
+
+            <ctl:IconLabelButton ButtonSource="icon_bottom_play_gray.png" 
+                                 ButtonLabelText="{x:Static strings:Strings.ListenNowTitle}" 
+                                 LabelTextColor="{StaticResource Gray}"/>
+
+            <ctl:IconLabelButton ButtonSource="icon_bottom_browse_gray.png" 
+                                 ButtonLabelText="{x:Static strings:Strings.BrowseTitle}" 
+                                 LabelTextColor="{StaticResource Gray}"/>
+
+            <ctl:IconLabelButton ButtonSource="icon_bottom_radio_gray.png" 
+                                 ButtonLabelText="{x:Static strings:Strings.RadioTitle}" 
+                                 LabelTextColor="{StaticResource Gray}"/>
+
+            <ctl:IconLabelButton ButtonSource="icon_bottom_library_red.png" 
+                                 ButtonLabelText="{x:Static strings:Strings.LibraryTitle}" 
+                                 LabelTextColor="{StaticResource Secondary}"/>
+
+            <ctl:IconLabelButton ButtonSource="icon_bottom_search_gray.png" 
+                                 ButtonLabelText="{x:Static strings:Strings.SearchTitle}" 
+                                 LabelTextColor="{StaticResource Gray}"/>
+
+        </FlexLayout>
+
+    </StackLayout>
+
+</ContentView>

AMC.View/Controls/BottomBar.xaml.cs

@@ -0,0 +1,10 @@
+namespace AMC.View.Controls
+{
+    public partial class BottomBar : ContentView
+    {
+        public BottomBar()
+        {
+            InitializeComponent();
+        }
+    }
+}

AMC.View/Controls/IconLabelButton.xaml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="AMC.View.Controls.IconLabelButton">
+
+    <StackLayout Orientation="Vertical" 
+                 Margin="{StaticResource SpaceXS}">
+
+        <ImageButton x:Name="Button" 
+                     HeightRequest="{StaticResource SpaceML}"
+                     WidthRequest="{StaticResource SpaceML}" />
+
+        <Label x:Name="ButtonLabel" 
+               FontSize="{StaticResource TinyFontSize}"
+               Margin="{StaticResource SpaceXXS}"/>
+    </StackLayout>
+
+</ContentView>

AMC.View/Controls/IconLabelButton.xaml.cs

@@ -0,0 +1,58 @@
+namespace AMC.View.Controls
+{
+    public partial class IconLabelButton : ContentView
+    {
+        public static readonly BindableProperty ButtonSourceProperty = BindableProperty.Create(
+            nameof(ButtonSource),
+            typeof(string),
+            typeof(IconLabelButton),
+            default(string),
+            propertyChanged: (bindable, oldValue, newValue) =>
+            {
+                ((IconLabelButton)bindable).Button.Source = (string)newValue;
+            });
+
+        public static readonly BindableProperty ButtonLabelTextProperty = BindableProperty.Create(
+            nameof(ButtonLabelText),
+            typeof(string),
+            typeof(IconLabelButton),
+            default(string),
+            propertyChanged: (bindable, oldValue, newValue) =>
+            {
+                ((IconLabelButton)bindable).ButtonLabel.Text = (string)newValue;
+            });
+
+        public static readonly BindableProperty LabelTextColorProperty = BindableProperty.Create(
+            nameof(LabelTextColor),
+            typeof(Color),
+            typeof(IconLabelButton),
+            default(Color),
+            propertyChanged: (bindable, oldValue, newValue) =>
+            {
+                ((IconLabelButton)bindable).ButtonLabel.TextColor = (Color)newValue;
+            });
+
+        public IconLabelButton()
+        {
+            InitializeComponent();
+        }
+
+        public string ButtonSource
+        {
+            get => (string)GetValue(ButtonSourceProperty);
+            set => SetValue(ButtonSourceProperty, value);
+        }
+
+        public string ButtonLabelText
+        {
+            get => (string)GetValue(ButtonLabelTextProperty);
+            set => SetValue(ButtonLabelTextProperty, value);
+        }
+
+        public Color LabelTextColor
+        {
+            get => (Color)GetValue(LabelTextColorProperty);
+            set => SetValue(LabelTextColorProperty, value);
+        }
+    }
+}

AMC.View/Resources/Strings/Strings.Designer.cs

@@ -78,6 +78,24 @@ namespace AMC.View.Resources.Strings {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Browse.
+        /// </summary>
+        public static string BrowseTitle {
+            get {
+                return ResourceManager.GetString("BrowseTitle", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Not Playing.
+        /// </summary>
+        public static string DefaultPlayingSongLabel {
+            get {
+                return ResourceManager.GetString("DefaultPlayingSongLabel", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Genres.
         /// </summary>
@@ -105,6 +123,15 @@ namespace AMC.View.Resources.Strings {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Listen Now.
+        /// </summary>
+        public static string ListenNowTitle {
+            get {
+                return ResourceManager.GetString("ListenNowTitle", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to minutes.
         /// </summary>
@@ -141,6 +168,15 @@ namespace AMC.View.Resources.Strings {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Radio.
+        /// </summary>
+        public static string RadioTitle {
+            get {
+                return ResourceManager.GetString("RadioTitle", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Recently Added.
         /// </summary>
@@ -150,6 +186,15 @@ namespace AMC.View.Resources.Strings {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Search.
+        /// </summary>
+        public static string SearchTitle {
+            get {
+                return ResourceManager.GetString("SearchTitle", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Shuffle.
         /// </summary>

AMC.View/Resources/Strings/Strings.fr.resx

@@ -156,4 +156,19 @@
   <data name="GenresCategory" xml:space="preserve">
     <value>Genres</value>
   </data>
+  <data name="DefaultPlayingSongLabel" xml:space="preserve">
+    <value>Rien en lecture</value>
+  </data>
+  <data name="ListenNowTitle" xml:space="preserve">
+    <value>Ecouter</value>
+  </data>
+  <data name="RadioTitle" xml:space="preserve">
+    <value>Radio</value>
+  </data>
+  <data name="BrowseTitle" xml:space="preserve">
+    <value>Éxplorer</value>
+  </data>
+  <data name="SearchTitle" xml:space="preserve">
+    <value>Recherche</value>
+  </data>
 </root>

AMC.View/Resources/Strings/Strings.resx

@@ -160,4 +160,19 @@
     <value>···</value>
     <comment>@Invariant</comment>
   </data>
+  <data name="DefaultPlayingSongLabel" xml:space="preserve">
+    <value>Not Playing</value>
+  </data>
+  <data name="ListenNowTitle" xml:space="preserve">
+    <value>Listen Now</value>
+  </data>
+  <data name="RadioTitle" xml:space="preserve">
+    <value>Radio</value>
+  </data>
+  <data name="BrowseTitle" xml:space="preserve">
+    <value>Browse</value>
+  </data>
+  <data name="SearchTitle" xml:space="preserve">
+    <value>Search</value>
+  </data>
 </root>

AMC.View/Resources/Styles/Colors.xaml

@@ -27,6 +27,7 @@
     <Color x:Key="Gray400">#919191</Color>
     <Color x:Key="Gray500">#6E6E6E</Color>
     <Color x:Key="Gray600">#404040</Color>
+    <Color x:Key="Gray750">#303030</Color>
     <Color x:Key="Gray900">#212121</Color>
     <Color x:Key="Gray950">#141414</Color>
 

AMC.View/Resources/Styles/Styles.xaml

@@ -6,18 +6,24 @@
 
     <Style TargetType="BoxView" x:Key="GraySeparator">
         <Setter Property="HeightRequest" Value="1"/>
-        <Setter Property="Color" Value="{StaticResource Gray200}"/>
+        <Setter Property="Color" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray900}}"/>
         <Setter Property="HorizontalOptions" Value="FillAndExpand"/>
         <Setter Property="Margin" Value="32, 0, 8, 0"/>
     </Style>
 
     <Style TargetType="BoxView" x:Key="HeadGraySeparator">
         <Setter Property="HeightRequest" Value="1"/>
-        <Setter Property="Color" Value="{StaticResource Gray200}"/>
+        <Setter Property="Color" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray900}}"/>
         <Setter Property="HorizontalOptions" Value="FillAndExpand"/>
         <Setter Property="Margin" Value="8, 8, 8, 8"/>
     </Style>
 
+    <Style TargetType="BoxView" x:Key="BottomBarGraySeparator">
+        <Setter Property="HeightRequest" Value="1"/>
+        <Setter Property="Color" Value="{AppThemeBinding Light={StaticResource Gray400}, Dark={StaticResource Gray600}}"/>
+        <Setter Property="HorizontalOptions" Value="FillAndExpand"/>
+    </Style>
+
     <Style TargetType="Label" x:Key="FooterLabel">
         <Setter Property="FontSize" Value="12" />
         <Setter Property="TextColor" Value="{StaticResource Gray}" />
@@ -45,7 +51,7 @@
 
     <Style TargetType="Button">
         <Setter Property="TextColor" Value="{StaticResource Secondary}" />
-        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray600}}" />
+        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray750}}" />
         <Setter Property="FontFamily" Value="OpenSansRegular"/>
         <Setter Property="FontSize" Value="14"/>
         <Setter Property="CornerRadius" Value="8"/>

AMC.View/Resources/Styles/Values.xaml

@@ -8,6 +8,7 @@
 	<x:Double x:Key="SpaceXS">8</x:Double>
 	<x:Double x:Key="SpaceS">12</x:Double>
     <x:Double x:Key="SpaceM">16</x:Double>
+    <x:Double x:Key="SpaceML">24</x:Double>
     <x:Double x:Key="SpaceL">32</x:Double>
 	<x:Double x:Key="SpaceXL">64</x:Double>
 	<x:Double x:Key="SpaceXXL">128</x:Double>
@@ -22,6 +23,7 @@
 	<Thickness x:Key="LeftRightSpaceLarge">32, 0, 32, 0</Thickness>
 	<Thickness x:Key="WideButtonLeft">16, 16, 8, 16</Thickness>
     <Thickness x:Key="WideButtonRight">8, 16, 16, 16</Thickness>
+    <Thickness x:Key="HSpaceLittleVSpaceVeryLittle">8, 4, 8, 4</Thickness>
 
     <CornerRadius x:Key="SlightlyRoundedCorner">8, 8, 8, 8</CornerRadius>
 
@@ -29,5 +31,6 @@
 	<x:Double x:Key="SubtitleFontSize">24</x:Double>
 	<x:Double x:Key="SubSubtitleFontSize">16</x:Double>
     <x:Double x:Key="DetailsFontSize">12</x:Double>
+    <x:Double x:Key="TinyFontSize">8</x:Double>
 
 </ResourceDictionary>

AMC.View/Views/AlbumPage.xaml

@@ -4,6 +4,7 @@
              xmlns:local="clr-namespace:AMC.View"
              xmlns:strings="clr-namespace:AMC.View.Resources.Strings"
              xmlns:conv="clr-namespace:AMC.View.Converters"
+             xmlns:ctl="clr-namespace:AMC.View.Controls"
              xmlns:vm="clr-namespace:AMC.ViewModel.ViewModels;assembly=AMC.ViewModel"
              x:Class="AMC.View.Views.AlbumPage"
              x:DataType="vm:AlbumViewModel">
@@ -13,9 +14,12 @@
         </ResourceDictionary>
     </ContentPage.Resources>
 
-
+    <Grid>
-    <ScrollView 
+        <Grid.RowDefinitions>
-        Padding="{StaticResource BottomBarSpace}"
+            <RowDefinition Height="*"/>
+            <RowDefinition Height="Auto"/>
+        </Grid.RowDefinitions>
+        <ScrollView Grid.Row="0"
                 BackgroundColor="{AppThemeBinding Light={StaticResource Background}, Dark={StaticResource BackgroundDark}}">
             <Grid Margin="{StaticResource SpaceXS}">
                 <Grid.RowDefinitions>
@@ -134,4 +138,7 @@
 
             </Grid>
         </ScrollView>
+        <!-- TODO Insert this in a main layout of some sort...-->
+        <ctl:BottomBar Grid.Row="1" />
+    </Grid>
 </ContentPage>

AMC.View/Views/LibraryPage.xaml

@@ -9,8 +9,12 @@
              x:Class="AMC.View.Views.LibraryPage"
              x:DataType="vm:LibraryViewModel">
 
-    <ScrollView 
+    <Grid>
-        Padding="{StaticResource BottomBarSpace}"
+        <Grid.RowDefinitions>
+            <RowDefinition Height="*"/>
+            <RowDefinition Height="Auto"/>
+        </Grid.RowDefinitions>
+        <ScrollView Grid.Row="0"
                     BackgroundColor="{AppThemeBinding Light={StaticResource Background}, Dark={StaticResource BackgroundDark}}">
             <StackLayout Spacing="{StaticResource SpaceXS}"
                          Margin="{StaticResource BottomSpaceLittle}">
@@ -76,4 +80,7 @@
                 </CollectionView>
             </StackLayout>
         </ScrollView>
+        <!-- TODO Insert this in a main layout of some sort...-->
+        <ctl:BottomBar Grid.Row="1" />
+    </Grid>
 </ContentPage>

AMC.View/Views/LibraryPage.xaml.cs

@@ -21,7 +21,6 @@ namespace AMC.View.Views
         private void OnAlbumSelected(object sender, SelectionChangedEventArgs e)
         {
             var collectionView = (CollectionView)sender;
-            var selectedAlbum = (AlbumViewModel)e.CurrentSelection.FirstOrDefault();
 
             if (e.CurrentSelection.FirstOrDefault() is AlbumViewModel selectedAlbum)
             {