From eefb7fc0eac0e329eb263bd04a623fd5f8a103b7 Mon Sep 17 00:00:00 2001
From: Gerwin Kuijntjes <administratie@gerwinkuijntjes.nl>
Date: Thu, 2 Apr 2026 11:52:01 +0200
Subject: [PATCH] Design: dashboard-style ConnectionsPage with rich connection
 cards

- Add header with ProjectDiagram icon, app title, and connection count
- Replace plain ListView with styled cards (Border + rounded corners)
- Each card shows: database icon, name, host, scheme badge, secure lock
- Inline edit/delete buttons on each card (pencil + trash icons)
- Hide nav bar title (dashboard header replaces it)
- Add computed properties: IsSecure, SchemeShortName, DisplayName
- Add ConnectionCountLabel to ViewModel
- Add OpenConnection command for card tap handling

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../Models/Neo4jConnectionString.cs           |   6 +
 .../Xamarin.Neo4j/Pages/ConnectionsPage.xaml  | 178 ++++++++++++++----
 .../Pages/ConnectionsPage.xaml.cs             |   6 +-
 .../ViewModels/ConnectionsViewModel.cs        |  21 +++
 4 files changed, 169 insertions(+), 42 deletions(-)

diff --git a/Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/Models/Neo4jConnectionString.cs b/Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/Models/Neo4jConnectionString.cs
index 57171cd..f9794b2 100644
--- a/Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/Models/Neo4jConnectionString.cs
+++ b/Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/Models/Neo4jConnectionString.cs
@@ -27,6 +27,12 @@ namespace Xamarin.Neo4j.Models
 
         public string Password { get; set; }
 
+        public bool IsSecure => Scheme?.Contains("+s") ?? false;
+
+        public string SchemeShortName => Scheme != null && Scheme.StartsWith("bolt") ? "bolt" : "neo4j";
+
+        public string DisplayName => string.IsNullOrWhiteSpace(Name) ? Host : Name;
+
         public Tuple<string, bool, bool> ParseHost()
         {
             var fullHost = Scheme + Host;
diff --git a/Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/Pages/ConnectionsPage.xaml b/Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/Pages/ConnectionsPage.xaml
index 5f7fe1d..0b1c013 100644
--- a/Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/Pages/ConnectionsPage.xaml
+++ b/Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/Pages/ConnectionsPage.xaml
@@ -3,58 +3,160 @@
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:fonts="clr-namespace:Xamarin.Neo4j.Fonts;assembly=Xamarin.Neo4j"
-             xmlns:controls="clr-namespace:Xamarin.Neo4j.Controls;assembly=Xamarin.Neo4j"
-x:Class="Xamarin.Neo4j.Pages.ConnectionsPage"
+             x:Class="Xamarin.Neo4j.Pages.ConnectionsPage"
              x:Name="connectionsPage"
-             Title="PocketGraph">
+             Title=" ">
 
     <ContentPage.ToolbarItems>
         <ToolbarItem Text="Settings" Order="Secondary" Command="{Binding Commands[OpenSettings]}" />
     </ContentPage.ToolbarItems>
 
     <ContentPage.Content>
-        <Grid>
-            <ListView ItemsSource="{Binding ConnectionStrings}" HasUnevenRows="True" SelectionMode="None" ItemTapped="OpenSession" IsVisible="{Binding HasItems}">
-                <ListView.ItemTemplate>
-                    <DataTemplate>
-                        <controls:ConnectionCell>
-                            <controls:ConnectionCell.ContextActions>
-                                <MenuItem Text="Edit" Command="{Binding BindingContext.Commands[EditConnectionString], Source={x:Reference connectionsPage}}" CommandParameter="{Binding .}" />
-                                <MenuItem Text="Delete" Command="{Binding BindingContext.Commands[DeleteConnectionString], Source={x:Reference connectionsPage}}" CommandParameter="{Binding .}" IsDestructive="true" />
-                            </controls:ConnectionCell.ContextActions>
-                        </controls:ConnectionCell>
-                    </DataTemplate>
-                </ListView.ItemTemplate>
-            </ListView>
+        <Grid RowDefinitions="Auto,*">
 
-            <StackLayout IsVisible="{Binding IsEmpty}" VerticalOptions="Center" HorizontalOptions="Center" Spacing="12">
-                <Label Text="{x:Static fonts:FontAwesomeSolid.Server}"
+            <!-- Row 0: Dashboard header -->
+            <StackLayout Grid.Row="0" Spacing="4" Padding="16,16,16,12" HorizontalOptions="Center">
+                <Label Text="{x:Static fonts:FontAwesomeSolid.ProjectDiagram}"
                        FontFamily="{StaticResource FontAwesomeSolid}"
-                       FontSize="48"
-                       TextColor="{DynamicResource SecondaryTextColor}"
+                       FontSize="32"
+                       TextColor="{DynamicResource PrimaryTextColor}"
+                       HorizontalOptions="Center"
+                       Margin="0,0,0,4" />
+                <Label Text="PocketGraph"
+                       FontSize="22" FontAttributes="Bold"
+                       TextColor="{DynamicResource PrimaryTextColor}"
                        HorizontalOptions="Center" />
-                <Label Text="No connections"
-                       FontSize="18"
-                       FontAttributes="Bold"
-                       TextColor="{DynamicResource SecondaryTextColor}"
-                       HorizontalOptions="Center" />
-                <Label Text="Tap + to add a connection"
-                       FontSize="14"
+                <Label Text="{Binding ConnectionCountLabel}"
+                       FontSize="13"
                        TextColor="{DynamicResource SecondaryTextColor}"
                        HorizontalOptions="Center" />
             </StackLayout>
 
-            <!-- FAB -->
-            <Button Text="{x:Static fonts:FontAwesomeSolid.Plus}"
-                    FontFamily="{StaticResource FontAwesomeSolid}"
-                    FontSize="20"
-                    WidthRequest="56" HeightRequest="56"
-                    CornerRadius="28"
-                    BackgroundColor="{DynamicResource Accent}"
-                    TextColor="White"
-                    VerticalOptions="End" HorizontalOptions="End"
-                    Margin="0,0,16,16"
-                    Command="{Binding Commands[AddConnection]}" />
+            <!-- Row 1: Connection cards + empty state + FAB -->
+            <Grid Grid.Row="1">
+
+                <!-- Scrollable connection cards -->
+                <ScrollView IsVisible="{Binding HasItems}">
+                    <StackLayout BindableLayout.ItemsSource="{Binding ConnectionStrings}"
+                                 Spacing="0" Padding="0,0,0,80">
+                        <BindableLayout.ItemTemplate>
+                            <DataTemplate>
+                                <Border Margin="16,0,16,8"
+                                        BackgroundColor="{DynamicResource Extreme}"
+                                        Stroke="{DynamicResource QueryTextBorder}"
+                                        StrokeThickness="1"
+                                        StrokeShape="RoundRectangle 10">
+                                    <Grid ColumnDefinitions="Auto,*,Auto" Padding="14,12">
+                                        <Grid.GestureRecognizers>
+                                            <TapGestureRecognizer
+                                                Command="{Binding BindingContext.Commands[OpenConnection], Source={x:Reference connectionsPage}}"
+                                                CommandParameter="{Binding .}" />
+                                        </Grid.GestureRecognizers>
+
+                                        <!-- Database icon -->
+                                        <Border Grid.Column="0"
+                                                WidthRequest="40" HeightRequest="40"
+                                                StrokeThickness="0"
+                                                StrokeShape="RoundRectangle 20"
+                                                BackgroundColor="{DynamicResource QueryActionBar}"
+                                                VerticalOptions="Center">
+                                            <Label Text="{x:Static fonts:FontAwesomeSolid.Database}"
+                                                   FontFamily="{StaticResource FontAwesomeSolid}"
+                                                   FontSize="16"
+                                                   TextColor="{DynamicResource SecondaryTextColor}"
+                                                   HorizontalOptions="Center"
+                                                   VerticalOptions="Center" />
+                                        </Border>
+
+                                        <!-- Name + Host + scheme badge inline -->
+                                        <StackLayout Grid.Column="1" Spacing="3" Padding="12,0,8,0" VerticalOptions="Center">
+                                            <Label Text="{Binding DisplayName}"
+                                                   FontSize="15" FontAttributes="Bold"
+                                                   TextColor="{DynamicResource PrimaryTextColor}"
+                                                   LineBreakMode="TailTruncation" MaxLines="1" />
+                                            <StackLayout Orientation="Horizontal" Spacing="6">
+                                                <Label Text="{Binding Host}"
+                                                       FontSize="12"
+                                                       TextColor="{DynamicResource SecondaryTextColor}"
+                                                       LineBreakMode="TailTruncation"
+                                                       VerticalOptions="Center" />
+                                                <Label IsVisible="{Binding IsSecure}"
+                                                       Text="{x:Static fonts:FontAwesomeSolid.Lock}"
+                                                       FontFamily="{StaticResource FontAwesomeSolid}"
+                                                       FontSize="9"
+                                                       TextColor="{DynamicResource SecondaryTextColor}"
+                                                       VerticalOptions="Center" />
+                                                <Border BackgroundColor="{DynamicResource QueryActionBar}"
+                                                        StrokeThickness="0"
+                                                        StrokeShape="RoundRectangle 6"
+                                                        Padding="6,2">
+                                                    <Label Text="{Binding SchemeShortName}"
+                                                           FontSize="9" FontAttributes="Bold"
+                                                           TextColor="{DynamicResource SecondaryTextColor}"
+                                                           VerticalOptions="Center" />
+                                                </Border>
+                                            </StackLayout>
+                                        </StackLayout>
+
+                                        <!-- Edit / Delete -->
+                                        <StackLayout Grid.Column="2" Orientation="Horizontal" Spacing="0" VerticalOptions="Center">
+                                            <Button Text="{x:Static fonts:FontAwesomeSolid.PencilAlt}"
+                                                    FontFamily="{StaticResource FontAwesomeSolid}"
+                                                    FontSize="14"
+                                                    WidthRequest="38" HeightRequest="38"
+                                                    BackgroundColor="Transparent"
+                                                    TextColor="{DynamicResource SecondaryTextColor}"
+                                                    Padding="0"
+                                                    Command="{Binding BindingContext.Commands[EditConnectionString], Source={x:Reference connectionsPage}}"
+                                                    CommandParameter="{Binding .}" />
+                                            <Button Text="{x:Static fonts:FontAwesomeSolid.TrashAlt}"
+                                                    FontFamily="{StaticResource FontAwesomeSolid}"
+                                                    FontSize="14"
+                                                    WidthRequest="38" HeightRequest="38"
+                                                    BackgroundColor="Transparent"
+                                                    TextColor="{DynamicResource SecondaryTextColor}"
+                                                    Padding="0"
+                                                    Command="{Binding BindingContext.Commands[DeleteConnectionString], Source={x:Reference connectionsPage}}"
+                                                    CommandParameter="{Binding .}" />
+                                        </StackLayout>
+                                    </Grid>
+                                </Border>
+                            </DataTemplate>
+                        </BindableLayout.ItemTemplate>
+                    </StackLayout>
+                </ScrollView>
+
+                <!-- Empty state -->
+                <StackLayout IsVisible="{Binding IsEmpty}" VerticalOptions="Center" HorizontalOptions="Center" Spacing="12">
+                    <Label Text="{x:Static fonts:FontAwesomeSolid.Server}"
+                           FontFamily="{StaticResource FontAwesomeSolid}"
+                           FontSize="48"
+                           TextColor="{DynamicResource SecondaryTextColor}"
+                           HorizontalOptions="Center" />
+                    <Label Text="No connections"
+                           FontSize="18"
+                           FontAttributes="Bold"
+                           TextColor="{DynamicResource SecondaryTextColor}"
+                           HorizontalOptions="Center" />
+                    <Label Text="Tap + to add a connection"
+                           FontSize="14"
+                           TextColor="{DynamicResource SecondaryTextColor}"
+                           HorizontalOptions="Center" />
+                </StackLayout>
+
+                <!-- FAB -->
+                <Button Text="{x:Static fonts:FontAwesomeSolid.Plus}"
+                        FontFamily="{StaticResource FontAwesomeSolid}"
+                        FontSize="20"
+                        WidthRequest="56" HeightRequest="56"
+                        CornerRadius="28"
+                        BackgroundColor="{DynamicResource NavigationBarColor}"
+                        TextColor="White"
+                        VerticalOptions="End" HorizontalOptions="End"
+                        Margin="0,0,16,16"
+                        Command="{Binding Commands[AddConnection]}" />
+            </Grid>
+
         </Grid>
     </ContentPage.Content>
 </ContentPage>
diff --git a/Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/Pages/ConnectionsPage.xaml.cs b/Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/Pages/ConnectionsPage.xaml.cs
index 702f330..e78f983 100644
--- a/Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/Pages/ConnectionsPage.xaml.cs
+++ b/Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/Pages/ConnectionsPage.xaml.cs
@@ -42,9 +42,7 @@ namespace Xamarin.Neo4j.Pages
             ViewModel.LoadConnectionStrings();
         }
 
-        private void OpenSession(object sender, ItemTappedEventArgs e)
-        {
-            ViewModel.OpenSession((Neo4jConnectionString)e.Item);
-        }
+
+
     }
 }
diff --git a/Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/ViewModels/ConnectionsViewModel.cs b/Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/ViewModels/ConnectionsViewModel.cs
index 17b1c7b..3ae71c9 100644
--- a/Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/ViewModels/ConnectionsViewModel.cs
+++ b/Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/ViewModels/ConnectionsViewModel.cs
@@ -50,6 +50,12 @@ namespace Xamarin.Neo4j.ViewModels
                 LoadConnectionStrings();
             }));
 
+            Commands.Add("OpenConnection", new Command((o) =>
+            {
+                if (o is Neo4jConnectionString cs)
+                    OpenSession(cs);
+            }));
+
             Commands.Add("OpenSettings", new Command(async () =>
             {
                 await Navigation.PushAsync(new SettingsPage());
@@ -87,6 +93,7 @@ namespace Xamarin.Neo4j.ViewModels
                 OnPropertyChanged(nameof(ConnectionStrings));
                 OnPropertyChanged(nameof(IsEmpty));
                 OnPropertyChanged(nameof(HasItems));
+                OnPropertyChanged(nameof(ConnectionCountLabel));
             }
         }
 
@@ -94,6 +101,20 @@ namespace Xamarin.Neo4j.ViewModels
 
         public bool HasItems => !IsEmpty;
 
+        public string ConnectionCountLabel
+        {
+            get
+            {
+                var count = _connectionStrings?.Count() ?? 0;
+                return count switch
+                {
+                    0 => "No connections yet",
+                    1 => "1 connection",
+                    _ => $"{count} connections"
+                };
+            }
+        }
+
         #endregion
     }
 }