Family tree page

critterfolio/CritterFolio/CritterFolio/Pages/CritterPage.axaml.cs

@@ -163,6 +163,21 @@ public partial class CritterPage : Page
 
     private void CreateHeaderButtons()
     {
+        if (_critter is null) return;
+        
+        var treeBttn = new Button()
+        {
+            Classes = { "headerBttn" },
+            Content = "\ue6da"
+        };
+        treeBttn.Click += (sender, args) =>
+        {
+            var page = new FamilyTreePage();
+            page.Init(_critter);
+            Sys.Navigation?.PushPage(page);
+        };
+        Sys.Navigation?.AddHeaderButton(treeBttn);
+        
         var saveBttn = new Button()
         {
             Classes = { "headerBttn" },

critterfolio/CritterFolio/CritterFolio/Pages/FamilyTreePage.axaml

@@ -0,0 +1,52 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="CritterFolio.Pages.FamilyTreePage">
+    <Grid
+        RowDefinitions="Auto, Auto, Auto"
+        RowSpacing="24"
+        HorizontalAlignment="Center"
+        VerticalAlignment="Center">
+        
+        <StackPanel
+            Grid.Row="0"
+            Orientation="Horizontal"
+            Spacing="40"
+            HorizontalAlignment="Center">
+
+            <Border Classes="critter-card parent">
+                <TextBlock x:Name="MotherName" Text="Mother" />
+            </Border>
+
+            <Border Classes="critter-card parent">
+                <TextBlock x:Name="FatherName" Text="Father" />
+            </Border>
+        </StackPanel>
+        
+        <Border
+            Grid.Row="1"
+            Classes="critter-card main"
+            HorizontalAlignment="Center">
+            <TextBlock x:Name="CritterName" Text="Critter" />
+        </Border>
+
+        <StackPanel x:Name="ChildStack"
+            Grid.Row="2"
+            Orientation="Horizontal"
+            Spacing="40"
+            HorizontalAlignment="Center">
+
+            <Border Classes="critter-card child">
+                <TextBlock Text="Child" />
+            </Border>
+
+            <Border Classes="critter-card child">
+                <TextBlock Text="Child" />
+            </Border>
+        </StackPanel>
+
+    </Grid>
+
+</UserControl>

critterfolio/CritterFolio/CritterFolio/Pages/FamilyTreePage.axaml.cs

@@ -0,0 +1,62 @@
+using System.Collections.Generic;
+using System.Linq;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Layout;
+using Avalonia.Markup.Xaml;
+using CritterFolio.DataModels;
+using CritterFolio.Services;
+
+namespace CritterFolio.Pages;
+
+public partial class FamilyTreePage : Page
+{
+    private Critter? _critter;
+    private Dictionary<int, Critter> _critters = [];
+    
+    public FamilyTreePage()
+    {
+        InitializeComponent();
+    }
+    
+    public void Init(Critter critter)
+    {
+        _critter = critter;
+    }
+
+    public override void Refresh()
+    {
+        RebuildCritterDict();
+    }
+
+    private async void RebuildCritterDict()
+    {
+        if (_critter is null) return;
+        
+        ChildStack.Children.Clear();
+        
+        var allCritters = await DatabaseService.GetAllCritters();
+        
+        var mother = allCritters.FirstOrDefault(c => c.Id == _critter.MotherId);
+        var father = allCritters.FirstOrDefault(c => c.Id == _critter.FatherId);
+        var children = allCritters.Where(c => c.MotherId == _critter.Id ||  c.FatherId == _critter.Id).ToList();
+        
+        var motherName = mother?.Name ?? "Not Set";
+        var fatherName = father?.Name ?? "Not Set";
+        
+        MotherName.Text = $"[Mother]\n{motherName}";
+        FatherName.Text = $"[Father]\n{fatherName}";
+        CritterName.Text = _critter.Name;
+
+        foreach (var child in children)
+        {
+            var border = new Border
+            {
+                Classes = { "critter-card child" },
+                Child = new TextBlock {Text = $"[Child]\n{child.Name}"}
+            };
+            
+            ChildStack.Children.Add(border);
+        }
+    }
+}

critterfolio/CritterFolio/CritterFolio/Pages/HomePage.axaml.cs

@@ -134,5 +134,6 @@ public partial class HomePage : Page
     protected override void ClearConnections()
     {
         AddButton.Click -= AddButtonClicked;
+        SearchButton.Click -= SearchClicked;
     }
 }

critterfolio/CritterFolio/CritterFolio/Styles/MainStyles.axaml

@@ -45,4 +45,40 @@
     <Style Selector="Label.heading1">
         <Setter Property="FontSize" Value="20" />
     </Style>
+    
+    <Style Selector="Border.critter-card">
+        <Setter Property="Padding" Value="12,8"/>
+        <Setter Property="CornerRadius" Value="8"/>
+        <Setter Property="BorderThickness" Value="1"/>
+        <Setter Property="BorderBrush" Value="#888"/>
+        <Setter Property="Background" Value="#FAFAFA"/>
+        <Setter Property="MinWidth" Value="120"/>
+        <Setter Property="HorizontalAlignment" Value="Center"/>
+    </Style>
+
+    
+    <!-- Critter cards -->
+    <Style Selector="Border.critter-card > TextBlock">
+        <Setter Property="HorizontalAlignment" Value="Center"/>
+        <Setter Property="TextAlignment" Value="Center"/>
+        <Setter Property="FontSize" Value="14"/>
+        <Setter Property="Foreground" Value="Black"></Setter>
+    </Style>
+    
+    <Style Selector="Border.critter-card.main">
+        <Setter Property="Background" Value="#E8F1FF"/>
+        <Setter Property="BorderBrush" Value="#4A7BD0"/>
+        <Setter Property="BorderThickness" Value="2"/>
+    </Style>
+    
+    <Style Selector="Border.critter-card.parent">
+        <Setter Property="Background" Value="#FFF7E6"/>
+        <Setter Property="BorderBrush" Value="#C9A23F"/>
+    </Style>
+    
+    <Style Selector="Border.critter-card.child">
+        <Setter Property="Background" Value="#F0FFF4"/>
+        <Setter Property="BorderBrush" Value="#4CAF50"/>
+    </Style>
+
 </Styles>