advanced-calculator/src/AdvancedCalculator/Views/MainView.axaml

<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"
             xmlns:vm="clr-namespace:AdvancedCalculator.ViewModels"
             xmlns:m="clr-namespace:AdvancedCalculator.Models"
             xmlns:conv="clr-namespace:AdvancedCalculator.Converters"
             mc:Ignorable="d" d:DesignWidth="900" d:DesignHeight="600"
             x:Class="AdvancedCalculator.Views.MainView"
             x:DataType="vm:MainViewModel"
             x:Name="Root">
	<UserControl.Resources>
		<conv:BoolToGridLengthConverter x:Key="BoolToGridLengthConverter" />
		<conv:WidthToBooleanConverter x:Key="WidthToBooleanConverter" />
		<conv:IsZeroConverter x:Key="IsZeroConverter" />
		<conv:WidthToSplitViewModeConverter x:Key="WidthToSplitViewModeConverter" />
		<conv:WidthToPaneOpenConverter x:Key="WidthToPaneOpenConverter" />
	</UserControl.Resources>
	<!-- Replace columns with a responsive SplitView -->
	<SplitView x:Name="RootSplit"
			   OpenPaneLength="320"
			   CompactPaneLength="0"
			   DisplayMode="{Binding $parent[Window].Bounds.Width, Converter={StaticResource WidthToSplitViewModeConverter}, ConverterParameter=640}"
			   IsPaneOpen="{Binding $parent[Window].Bounds.Width, Converter={StaticResource WidthToPaneOpenConverter}, ConverterParameter=640}">

		<!-- Left pane: Variables only (Functions moved to flyout) -->
		<SplitView.Pane>
			<Grid>

				<!-- Variables list with empty-state hint overlay -->
				<Grid Grid.Row="0">
					<ListBox ItemsSource="{Binding Variables}" SelectedIndex="-1"
							 AutomationProperties.Name="Variables list">
						<ListBox.ItemTemplate>
							<DataTemplate x:DataType="m:VariableItem">
								<Button x:DataType="vm:MainViewModel"
										DataContext="{Binding #Root.DataContext}"
										Command="{Binding InsertVariableCommand}"
                                            CommandParameter="{Binding $parent[ListBoxItem].DataContext.FunctionName}"
										Background="Transparent" BorderThickness="0" Padding="8" MinHeight="44"
										AutomationProperties.Name="Insert variable">
									<Grid ColumnDefinitions="Auto,*,Auto"
										  DataContext="{Binding $parent[ListBoxItem].DataContext}"
										  x:DataType="m:VariableItem">
										<TextBlock Grid.Column="0" FontFamily="{StaticResource MDI}"
												   FontSize="{DynamicResource IconSizeM}" Text="{Binding Icon}" Margin="0,0,8,0" />
										<TextBlock Grid.Column="1" Text="{Binding VariableName}" FontWeight="Bold" />
										<StackPanel Grid.Column="2" Spacing="6">
											<TextBlock Text="{Binding Value}" />
											<TextBlock IsVisible="{Binding IsExpression}" Text="{Binding ExpressionComputation}" FontStyle="Italic" />
										</StackPanel>
									</Grid>
								</Button>
							</DataTemplate>


						</ListBox.ItemTemplate>
					</ListBox>
					<TextBlock Text="No variables yet. Define with: x :: 5 or y := x * 2"
							   IsVisible="{Binding Variables.Count, Converter={StaticResource IsZeroConverter}}"
							   IsHitTestVisible="False"
							   Opacity="0.6"
							   HorizontalAlignment="Center" VerticalAlignment="Center" />
				</Grid>

			</Grid>
		</SplitView.Pane>

		<!-- Right content: History + Input -->
		<SplitView.Content>
			<Grid RowDefinitions="*,Auto">
				<!-- History -->
				<Grid Grid.Row="0">
					<ListBox ItemsSource="{Binding History}" SelectedIndex="{Binding SelectedHistoryIndex}"
							 AutomationProperties.Name="History list">
						<ListBox.ItemTemplate>
							<DataTemplate x:DataType="m:HistoryItem">
								<Grid ColumnDefinitions="Auto,*" Margin="4,2">
									<TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.ArrowRightDropCircle}"
											   FontSize="{DynamicResource IconSizeM}" VerticalAlignment="Center" Margin="0,0,8,0" />
									<StackPanel Grid.Column="1">
										<TextBlock Text="{Binding Input}" MaxLines="3" />
										<TextBlock Text="{Binding Output}" FontWeight="Bold" MaxLines="2" />
									</StackPanel>
								</Grid>
							</DataTemplate>
						</ListBox.ItemTemplate>
					</ListBox>
					<TextBlock Text="No history yet. Enter an expression and Evaluate."
							   IsVisible="{Binding History.Count, Converter={StaticResource IsZeroConverter}}"
							   IsHitTestVisible="False"
							   Opacity="0.6"
							   HorizontalAlignment="Center" VerticalAlignment="Center" />
				</Grid>

				<!-- Input Row -->
				<Grid Grid.Row="1" ColumnDefinitions="Auto,Auto,*,Auto" Margin="4">
					<!-- Pane toggle: visible on narrow only -->
					<ToggleButton Margin="0,0,6,0"
								  IsVisible="{Binding $parent[Window].Bounds.Width,
                                            Converter={StaticResource WidthToBooleanConverter},
                                            ConverterParameter=640}"
								  IsChecked="{Binding #RootSplit.IsPaneOpen}"
								  AutomationProperties.Name="Open side panel">
						<TextBlock Text="≡" FontSize="18"/>
					</ToggleButton>

					<!-- Functions flyout anchored to this button -->
					<Button Grid.Column="1" Command="{Binding ToggleFunctionsCommand}" Margin="0,0,6,0" MinHeight="40" MinWidth="40"
							AutomationProperties.Name="Toggle functions panel">
						<Button.Flyout>
							<Flyout IsOpen="{Binding IsFunctionsPanelOpen, Mode=TwoWay}" Placement="BottomEdgeAlignedLeft">
								<Border Padding="8" MinWidth="320" MaxHeight="400">
									<ScrollViewer>
										<ListBox ItemsSource="{x:Static m:FunctionDefinitionItem.DefinedFunctions}"
												 BorderThickness="0"
												 AutomationProperties.Name="Functions list">
											<ListBox.ItemTemplate>
												<DataTemplate x:DataType="m:FunctionDefinitionItem">
													<Button x:DataType="vm:MainViewModel"
															DataContext="{Binding #Root.DataContext}"
															Command="{Binding InsertFunctionCommand}"
															CommandParameter="{Binding $parent[ListBoxItem].DataContext}"
															Background="Transparent" BorderThickness="0" Padding="8" MinHeight="44"
															AutomationProperties.Name="Insert function">
														<StackPanel Spacing="8"
																	DataContext="{Binding $parent[ListBoxItem].DataContext}"
																	x:DataType="m:FunctionDefinitionItem">
															<StackPanel Orientation="Horizontal" Spacing="8">
																<TextBlock FontFamily="{StaticResource MDI}" Text="{Binding Icon}" />
																<TextBlock Text="{Binding FunctionName}" FontWeight="Bold" />
															</StackPanel>
															<TextBlock Text="{Binding FunctionDescription}" FontStyle="Italic" TextWrapping="Wrap" />
															<ItemsControl ItemsSource="{Binding FunctionArguments}">
																<ItemsControl.ItemTemplate>
																	<DataTemplate>
																		<StackPanel>
																			<TextBlock Text="{Binding Key}" />
																			<TextBlock Text="{Binding Value}" FontStyle="Italic" Margin="8,0,0,0" />
																		</StackPanel>
																	</DataTemplate>
																</ItemsControl.ItemTemplate>
															</ItemsControl>
														</StackPanel>
													</Button>
												</DataTemplate>
											</ListBox.ItemTemplate>
										</ListBox>
									</ScrollViewer>
								</Border>
							</Flyout>
						</Button.Flyout>
						<TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.Function}" />
					</Button>

					<TextBox Grid.Column="2" Text="{Binding InputText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" MinHeight="44"
							 AutomationProperties.Name="Expression input"
							 Watermark="Type an expression (e.g., 2 + 2)"/>

					<!-- Explicit evaluate button for touch -->
					<Button Grid.Column="3" Command="{Binding SubmitCommand}" MinHeight="44" Padding="16,8"
							AutomationProperties.Name="Evaluate">
						<TextBlock Text="Evaluate"/>
					</Button>
				</Grid>
			</Grid>
		</SplitView.Content>
	</SplitView>
</UserControl>