From c361c2285ca4864cb0eb67f52154dec487b4a1d0 Mon Sep 17 00:00:00 2001
From: Codex Assistant <codex@example.com>
Date: Wed, 27 Aug 2025 17:21:05 -0500
Subject: [PATCH] Move functions list to flyout and auto-close after insert

---
 .../ViewModels/MainViewModel.cs               |  2 +
 src/AdvancedCalculator/Views/MainView.axaml   | 87 ++++++++++---------
 2 files changed, 46 insertions(+), 43 deletions(-)

diff --git a/src/AdvancedCalculator/ViewModels/MainViewModel.cs b/src/AdvancedCalculator/ViewModels/MainViewModel.cs
index 7be1cf6..08709bd 100644
--- a/src/AdvancedCalculator/ViewModels/MainViewModel.cs
+++ b/src/AdvancedCalculator/ViewModels/MainViewModel.cs
@@ -56,6 +56,8 @@ public partial class MainViewModel : ViewModelBase
         if (string.IsNullOrWhiteSpace(functionName))
             return;
         InsertToken(functionName + "()");
+        // Close the functions flyout after insertion for smoother UX
+        IsFunctionsPanelOpen = false;
     }
 
     private void InsertToken(string token)
diff --git a/src/AdvancedCalculator/Views/MainView.axaml b/src/AdvancedCalculator/Views/MainView.axaml
index b3d48ad..3705bac 100644
--- a/src/AdvancedCalculator/Views/MainView.axaml
+++ b/src/AdvancedCalculator/Views/MainView.axaml
@@ -23,13 +23,9 @@
 			   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 + Functions -->
+		<!-- Left pane: Variables only (Functions moved to flyout) -->
 		<SplitView.Pane>
 			<Grid>
-				<Grid.RowDefinitions>
-					<RowDefinition Height="*" />
-					<RowDefinition Height="{Binding IsFunctionsPanelOpen, Converter={StaticResource BoolToGridLengthConverter}}" />
-				</Grid.RowDefinitions>
 
 				<!-- Variables list with empty-state hint overlay -->
 				<Grid Grid.Row="0">
@@ -67,43 +63,6 @@
 							   HorizontalAlignment="Center" VerticalAlignment="Center" />
 				</Grid>
 
-				<!-- Function definitions -->
-				<ListBox Grid.Row="1" BorderThickness="0"
-						 ItemsSource="{x:Static m:FunctionDefinitionItem.DefinedFunctions}"
-						 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>
 			</Grid>
 		</SplitView.Pane>
 
@@ -146,9 +105,51 @@
 						<TextBlock Text="≡" FontSize="18"/>
 					</ToggleButton>
 
-					<!-- Toggle functions panel inside the pane -->
+					<!-- 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>