marechai/Marechai.App/Presentation/Views/ComputersPage.xaml

<?xml version="1.0"
      encoding="utf-8"?>

<Page x:Class="Marechai.App.Presentation.Views.ComputersPage"
      x:Name="PageRoot"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:utu="using:Uno.Toolkit.UI"
      NavigationCacheMode="Required"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid utu:SafeArea.Insets="VisibleBounds">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" /> <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!-- Header -->
        <utu:NavigationBar Grid.Row="0"
                           Content="{Binding Path=Title}">
            <utu:NavigationBar.MainCommand>
                <AppBarButton Icon="Back"
                              Label="Back"
                              Command="{Binding GoBackCommand}"
                              AutomationProperties.Name="Go back" />
            </utu:NavigationBar.MainCommand>
        </utu:NavigationBar>

        <!-- Content -->
        <ScrollViewer Grid.Row="1">
            <StackPanel Padding="16"
                        Spacing="24">

                <!-- Computer Count Display -->
                <StackPanel HorizontalAlignment="Center"
                            Spacing="8">
                    <TextBlock Text="{Binding ComputerCountText}"
                               TextAlignment="Center"
                               FontSize="18"
                               FontWeight="SemiBold"
                               Foreground="{ThemeResource SystemBaseMediumColor}" />
                    <TextBlock Text="{Binding ComputerCount}"
                               TextAlignment="Center"
                               FontSize="48"
                               FontWeight="Bold"
                               Foreground="{ThemeResource SystemAccentColor}" />
                </StackPanel>

                <!-- Loading State -->
                <StackPanel Visibility="{Binding IsLoading}"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Center"
                            Padding="32"
                            Spacing="16">
                    <ProgressRing IsActive="True"
                                  IsIndeterminate="True"
                                  Height="48"
                                  Width="48" />
                    <TextBlock Text="Loading..."
                               TextAlignment="Center"
                               FontSize="14" />
                </StackPanel>

                <!-- Error State -->
                <StackPanel Visibility="{Binding HasError}"
                            Padding="16"
                            Background="{ThemeResource SystemErrorBackgroundColor}"
                            CornerRadius="8"
                            Spacing="8">
                    <TextBlock Text="Error"
                               FontWeight="Bold"
                               Foreground="{ThemeResource SystemErrorTextForegroundColor}" />
                    <TextBlock Text="{Binding ErrorMessage}"
                               Foreground="{ThemeResource SystemErrorTextForegroundColor}"
                               TextWrapping="Wrap" />
                </StackPanel>

                <!-- Main Content (visible when loaded and no error) -->
                <StackPanel Visibility="{Binding IsDataLoaded}"
                            Spacing="24">

                    <!-- Letters Grid Section -->
                    <StackPanel Spacing="12">
                        <TextBlock Text="Browse by Letter"
                                   FontSize="16"
                                   FontWeight="SemiBold"
                                   Foreground="{ThemeResource SystemBaseMediumColor}" />
                        <ItemsRepeater ItemsSource="{Binding LettersList}"
                                       Layout="{StaticResource LettersGridLayout}">
                            <ItemsRepeater.ItemTemplate></ItemsRepeater.ItemTemplate>
                        </ItemsRepeater>
                    </StackPanel>

                    <!-- Years Grid Section -->
                    <StackPanel Spacing="12">
                        <TextBlock Text="{Binding YearsGridTitle}"
                                   FontSize="16"
                                   FontWeight="SemiBold"
                                   Foreground="{ThemeResource SystemBaseMediumColor}" />
                        <ItemsRepeater ItemsSource="{Binding YearsList}"
                                       Layout="{StaticResource YearsGridLayout}">
                            <ItemsRepeater.ItemTemplate></ItemsRepeater.ItemTemplate>
                        </ItemsRepeater>
                    </StackPanel>

                    <!-- All Computers and Search Section -->
                    <StackPanel Spacing="12">
                        <Button Content="All Computers"
                                Padding="16,12"
                                HorizontalAlignment="Stretch"
                                FontSize="16"
                                FontWeight="SemiBold"
                                Command="{Binding NavigateAllComputersCommand}"
                                Style="{StaticResource AccentButtonStyle}" />

                        <!-- Search Field (placeholder for future implementation) -->
                        <TextBox PlaceholderText="Search computers..."
                                 Padding="12"
                                 IsEnabled="False"
                                 Opacity="0.5" />
                    </StackPanel>

                </StackPanel>

            </StackPanel>
        </ScrollViewer>

    </Grid>

    <Page.Resources>
        <!-- Keyboard Key Button Style (revised: more padding, simplified borders to avoid clipping, darker scheme) -->

        <!-- Responsive Grid Layouts -->
        <UniformGridLayout x:Key="LettersGridLayout"
                           ItemsStretch="Fill"
                           MinItemWidth="44"
                           MinItemHeight="44"
                           MaximumRowsOrColumns="13" />

        <UniformGridLayout x:Key="YearsGridLayout"
                           ItemsStretch="Fill"
                           MinItemWidth="54"
                           MinItemHeight="44"
                           MaximumRowsOrColumns="10" />

    </Page.Resources>

</Page>