From 2909d8b1d7e49745e23be00ab09b6977e3313767 Mon Sep 17 00:00:00 2001
From: Zac Gaetano <zgaetano@wilddragon.net>
Date: Wed, 13 May 2026 00:20:23 -0400
Subject: [PATCH] feat(winui3): wire Settings drawer slide-in animation into
 MainWindow

Hosts SettingsDrawer in the main content grid as a fixed-width 400px
panel positioned at the right edge, with a TranslateTransform pre-set
to X=400 so it starts off-screen. The rail's settings icon triggers a
220ms ease-out-quart slide-in storyboard; CloseRequested (or the
drawer's Esc/close button) triggers a 180ms ease-in slide-out.
IsHitTestVisible toggles in sync so the off-screen drawer doesn't
intercept clicks on the participants list.

This is the structural commitment from DESIGN.md: settings live in a
right-drawer (not a permanent 380px panel), the participants table
reclaims full width when settings aren't being edited.

Builds clean.

Followup: tab content currently rebuilds imperatively in code-behind;
wire it to a SettingsViewModel mirror of the WPF host's
GlobalSettingsViewModel once the view-model migration starts (Phase 4
of the migration plan).
---
 src/TeamsISO.App.WinUI/Views/MainWindow.xaml  | 39 +++++++++++++++-
 .../Views/MainWindow.xaml.cs                  | 44 +++++++++++++++++++
 2 files changed, 82 insertions(+), 1 deletion(-)

diff --git a/src/TeamsISO.App.WinUI/Views/MainWindow.xaml b/src/TeamsISO.App.WinUI/Views/MainWindow.xaml
index 788fc85..40677ed 100644
--- a/src/TeamsISO.App.WinUI/Views/MainWindow.xaml
+++ b/src/TeamsISO.App.WinUI/Views/MainWindow.xaml
@@ -3,7 +3,8 @@
     x:Class="TeamsISO.App.WinUI.Views.MainWindow"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:models="using:TeamsISO.App.WinUI.Models">
+    xmlns:models="using:TeamsISO.App.WinUI.Models"
+    xmlns:views="using:TeamsISO.App.WinUI.Views">
 
     <!--
         TeamsISO MainWindow — redesigned IA per the approved shape brief.
@@ -32,6 +33,29 @@
             <ColumnDefinition Width="64"/>
             <ColumnDefinition Width="*"/>
         </Grid.ColumnDefinitions>
+        <Grid.Resources>
+            <!-- Drawer slide-in: 220ms ease-out-quart, translates 400px → 0 -->
+            <Storyboard x:Key="DrawerSlideIn">
+                <DoubleAnimation Storyboard.TargetName="DrawerTransform"
+                                 Storyboard.TargetProperty="X"
+                                 To="0"
+                                 Duration="0:0:0.22">
+                    <DoubleAnimation.EasingFunction>
+                        <QuarticEase EasingMode="EaseOut"/>
+                    </DoubleAnimation.EasingFunction>
+                </DoubleAnimation>
+            </Storyboard>
+            <Storyboard x:Key="DrawerSlideOut">
+                <DoubleAnimation Storyboard.TargetName="DrawerTransform"
+                                 Storyboard.TargetProperty="X"
+                                 To="400"
+                                 Duration="0:0:0.18">
+                    <DoubleAnimation.EasingFunction>
+                        <QuarticEase EasingMode="EaseIn"/>
+                    </DoubleAnimation.EasingFunction>
+                </DoubleAnimation>
+            </Storyboard>
+        </Grid.Resources>
 
         <!-- ═══════════════════════ LEFT RAIL ═══════════════════════ -->
         <Border Grid.Column="0"
@@ -106,6 +130,7 @@
                     <Button x:Name="SettingsButton"
                             Style="{StaticResource ButtonRailIcon}"
                             Margin="8,0"
+                            Click="OnSettingsClick"
                             ToolTipService.ToolTip="Settings">
                         <FontIcon Glyph="&#xE713;"
                                   FontSize="20"
@@ -444,6 +469,18 @@
                 </StackPanel>
             </Border>
 
+            <!-- ─── Settings drawer (slides over rows 1-3) ─── -->
+            <views:SettingsDrawer x:Name="SettingsDrawerHost"
+                                  Grid.Row="0"
+                                  Grid.RowSpan="4"
+                                  HorizontalAlignment="Right"
+                                  Width="400"
+                                  IsHitTestVisible="False">
+                <views:SettingsDrawer.RenderTransform>
+                    <TranslateTransform x:Name="DrawerTransform" X="400"/>
+                </views:SettingsDrawer.RenderTransform>
+            </views:SettingsDrawer>
+
             <!-- ─── Status bar ─── -->
             <Grid Grid.Row="4"
                   Padding="32,8,32,8"
diff --git a/src/TeamsISO.App.WinUI/Views/MainWindow.xaml.cs b/src/TeamsISO.App.WinUI/Views/MainWindow.xaml.cs
index 5d0adcf..64e4645 100644
--- a/src/TeamsISO.App.WinUI/Views/MainWindow.xaml.cs
+++ b/src/TeamsISO.App.WinUI/Views/MainWindow.xaml.cs
@@ -63,6 +63,50 @@ public sealed partial class MainWindow : Window
         ThemeManager.Current.Toggle();
     }
 
+    private bool _drawerOpen;
+
+    /// <summary>
+    /// Toggle the settings drawer with a slide animation. The drawer is
+    /// pre-translated 400px off the right edge in XAML; the storyboard
+    /// animates X back to 0 to slide it in. Hit-testing is gated so the
+    /// off-screen drawer doesn't intercept clicks on the participants list.
+    /// </summary>
+    private void OnSettingsClick(object sender, RoutedEventArgs e)
+    {
+        if (_drawerOpen)
+        {
+            CloseDrawer();
+        }
+        else
+        {
+            OpenDrawer();
+        }
+    }
+
+    private void OpenDrawer()
+    {
+        if (_drawerOpen) return;
+        _drawerOpen = true;
+        SettingsDrawerHost.IsHitTestVisible = true;
+        var sb = (Microsoft.UI.Xaml.Media.Animation.Storyboard)((Microsoft.UI.Xaml.Controls.Grid)Content)
+            .Resources["DrawerSlideIn"];
+        sb.Begin();
+        SettingsDrawerHost.CloseRequested -= OnDrawerCloseRequested;
+        SettingsDrawerHost.CloseRequested += OnDrawerCloseRequested;
+    }
+
+    private void CloseDrawer()
+    {
+        if (!_drawerOpen) return;
+        _drawerOpen = false;
+        var sb = (Microsoft.UI.Xaml.Media.Animation.Storyboard)((Microsoft.UI.Xaml.Controls.Grid)Content)
+            .Resources["DrawerSlideOut"];
+        sb.Completed += (_, _) => SettingsDrawerHost.IsHitTestVisible = false;
+        sb.Begin();
+    }
+
+    private void OnDrawerCloseRequested(object? sender, System.EventArgs e) => CloseDrawer();
+
     /// <summary>
     /// Push a resolved theme to the visual tree and to the AppWindow
     /// title-bar buttons. Called on every <see cref="ThemeManager.Themed"/>