feat: enabled sign out and animated window resize (#109)

Closes: #96

---------

Co-authored-by: Dean Sheather <[email protected]>

Author: ibetitsmike

App/Controls/ExpandContent.xaml

@@ -9,42 +9,43 @@
     xmlns:toolkit="using:CommunityToolkit.WinUI"
     mc:Ignorable="d">
 
-    <Grid x:Name="CollapsiblePanel" Opacity="0" Visibility="Collapsed" toolkit:UIElementExtensions.ClipToBounds="True">
+    <Grid x:Name="CollapsiblePanel" Opacity="0" Visibility="Collapsed" MaxHeight="0" toolkit:UIElementExtensions.ClipToBounds="True">
         <Grid.RenderTransform>
-            <TranslateTransform x:Name="SlideTransform" Y="-10" />
+            <TranslateTransform x:Name="SlideTransform" Y="-16"/>
         </Grid.RenderTransform>
 
         <VisualStateManager.VisualStateGroups>
             <VisualStateGroup>
                 <VisualState x:Name="ExpandedState">
-                    <Storyboard>
-                        <DoubleAnimation
-                            Storyboard.TargetName="CollapsiblePanel"
-                            Storyboard.TargetProperty="Opacity"
-                            To="1"
-                            Duration="0:0:0.2" />
-                        <DoubleAnimation
-                            Storyboard.TargetName="SlideTransform"
-                            Storyboard.TargetProperty="Y"
-                            To="0"
-                            Duration="0:0:0.2" />
+                    <Storyboard x:Name="ExpandSb">
+                        <DoubleAnimation Storyboard.TargetName="CollapsiblePanel"
+                                         Storyboard.TargetProperty="MaxHeight"
+                                         To="10000" Duration="0:0:0.16" BeginTime="0:0:0.16"
+                                         EnableDependentAnimation="True"/>
+                        <DoubleAnimation Storyboard.TargetName="CollapsiblePanel"
+                                         Storyboard.TargetProperty="Opacity" BeginTime="0:0:0.16"
+                                         To="1" Duration="0:0:0.16"/>
+                        <DoubleAnimation Storyboard.TargetName="SlideTransform"
+                                         Storyboard.TargetProperty="Y" BeginTime="0:0:0.16"
+                                         To="0" Duration="0:0:0.16"/>
                     </Storyboard>
                 </VisualState>
-
                 <VisualState x:Name="CollapsedState">
-                    <Storyboard Completed="{x:Bind CollapseAnimation_Completed}">
-                        <DoubleAnimation
-                            Storyboard.TargetName="CollapsiblePanel"
-                            Storyboard.TargetProperty="Opacity"
-                            To="0"
-                            Duration="0:0:0.2" />
-                        <DoubleAnimation
-                            Storyboard.TargetName="SlideTransform"
-                            Storyboard.TargetProperty="Y"
-                            To="-10"
-                            Duration="0:0:0.2" />
+                    <Storyboard x:Name="CollapseSb"
+                                Completed="{x:Bind CollapseStoryboard_Completed}">
+                        <DoubleAnimation Storyboard.TargetName="CollapsiblePanel"
+                                         Storyboard.TargetProperty="MaxHeight"
+                                         To="0" Duration="0:0:0.16"
+                                         EnableDependentAnimation="True"/>
+                        <DoubleAnimation Storyboard.TargetName="CollapsiblePanel"
+                                         Storyboard.TargetProperty="Opacity"
+                                         To="0" Duration="0:0:0.16"/>
+                        <DoubleAnimation Storyboard.TargetName="SlideTransform"
+                                         Storyboard.TargetProperty="Y"
+                                         To="-16" Duration="0:0:0.16"/>
                     </Storyboard>
                 </VisualState>
+
             </VisualStateGroup>
         </VisualStateManager.VisualStateGroups>
     </Grid>

App/Controls/ExpandContent.xaml.cs

@@ -2,38 +2,60 @@
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
 using Microsoft.UI.Xaml.Markup;
+using System;
+using System.Threading.Tasks;
 
 namespace Coder.Desktop.App.Controls;
 
+
 [ContentProperty(Name = nameof(Children))]
 [DependencyProperty<bool>("IsOpen", DefaultValue = false)]
 public sealed partial class ExpandContent : UserControl
 {
     public UIElementCollection Children => CollapsiblePanel.Children;
 
+    private readonly string _expandedState = "ExpandedState";
+    private readonly string _collapsedState = "CollapsedState";
+
     public ExpandContent()
     {
         InitializeComponent();
-    }
+        Loaded += (_, __) =>
+        {
+            // When we load the control for the first time (after panel swapping)
+            // we need to set the initial state based on IsOpen.
+            VisualStateManager.GoToState(
+                this,
+                IsOpen ? _expandedState : _collapsedState,
+                useTransitions: false);   // NO animation yet
 
-    public void CollapseAnimation_Completed(object? sender, object args)
-    {
-        // Hide the panel completely when the collapse animation is done. This
-        // cannot be done with keyframes for some reason.
-        //
-        // Without this, the space will still be reserved for the panel.
-        CollapsiblePanel.Visibility = Visibility.Collapsed;
+            // If IsOpen was already true we must also show the panel
+            if (IsOpen)
+            {
+                CollapsiblePanel.Visibility = Visibility.Visible;
+                // This makes the panel expand to its full height
+                CollapsiblePanel.ClearValue(FrameworkElement.MaxHeightProperty);
+            }
+        };
     }
 
     partial void OnIsOpenChanged(bool oldValue, bool newValue)
     {
-        var newState = newValue ? "ExpandedState" : "CollapsedState";
-
-        // The animation can't set visibility when starting or ending the
-        // animation.
+        var newState = newValue ? _expandedState : _collapsedState;
         if (newValue)
+        {
             CollapsiblePanel.Visibility = Visibility.Visible;
+            // We use BeginTime to ensure other panels are collapsed first.
+            // If the user clicks the expand button quickly, we want to avoid
+            // the panel expanding to its full height before the collapse animation completes.
+            CollapseSb.SkipToFill();
+        }
 
         VisualStateManager.GoToState(this, newState, true);
     }
+
+    private void CollapseStoryboard_Completed(object sender, object e)
+    {
+        CollapsiblePanel.Visibility = Visibility.Collapsed;
+    }
 }

App/Services/RpcController.cs

@@ -234,6 +234,8 @@ public async Task StopVpn(CancellationToken ct = default)
             MutateState(state => { state.VpnLifecycle = VpnLifecycle.Unknown; });
             throw new VpnLifecycleException($"Failed to stop VPN. Service reported failure: {reply.Stop.ErrorMessage}");
         }
+
+        MutateState(state => { state.VpnLifecycle = VpnLifecycle.Stopped; });
     }
 
     public async ValueTask DisposeAsync()

App/ViewModels/AgentViewModel.cs

@@ -237,12 +237,20 @@ public AgentViewModel(ILogger<AgentViewModel> logger, ICoderApiClientFactory cod
 
         Id = id;
 
-        PropertyChanged += (_, args) =>
+        PropertyChanging += (x, args) =>
         {
             if (args.PropertyName == nameof(IsExpanded))
             {
-                _expanderHost.HandleAgentExpanded(Id, IsExpanded);
+                var value = !IsExpanded;
+                if (value)
+                    _expanderHost.HandleAgentExpanded(Id, value);
+            }
+        };
 
+        PropertyChanged += (x, args) =>
+        {
+            if (args.PropertyName == nameof(IsExpanded))
+            {
                 // Every time the drawer is expanded, re-fetch all apps.
                 if (IsExpanded && !FetchingApps)
                     FetchApps();

App/ViewModels/TrayWindowLoginRequiredViewModel.cs

@@ -2,6 +2,7 @@
 using Coder.Desktop.App.Views;
 using CommunityToolkit.Mvvm.Input;
 using Microsoft.Extensions.DependencyInjection;
+using Microsoft.UI.Xaml;
 
 namespace Coder.Desktop.App.ViewModels;
 
@@ -31,4 +32,10 @@ public void Login()
         _signInWindow.Closed += (_, _) => _signInWindow = null;
         _signInWindow.Activate();
     }
+
+    [RelayCommand]
+    public void Exit()
+    {
+        _ = ((App)Application.Current).ExitApplication();
+    }
 }

App/ViewModels/TrayWindowViewModel.cs

@@ -126,7 +126,7 @@ public void HandleAgentExpanded(Uuid id, bool expanded)
         if (!expanded) return;
         _hasExpandedAgent = true;
         // Collapse every other agent.
-        foreach (var otherAgent in Agents.Where(a => a.Id != id))
+        foreach (var otherAgent in Agents.Where(a => a.Id != id && a.IsExpanded == true))
             otherAgent.SetExpanded(false);
     }
 
@@ -360,11 +360,10 @@ private void ShowFileSyncListWindow()
     }
 
     [RelayCommand]
-    private void SignOut()
+    private async Task SignOut()
     {
-        if (VpnLifecycle is not VpnLifecycle.Stopped)
-            return;
-        _credentialManager.ClearCredentials();
+        await _rpcController.StopVpn();
+        await _credentialManager.ClearCredentials();
     }
 
     [RelayCommand]

App/Views/Pages/TrayWindowLoginRequiredPage.xaml

@@ -34,5 +34,14 @@
 
             <TextBlock Text="Sign in" Foreground="{ThemeResource DefaultTextForegroundThemeBrush}" />
         </HyperlinkButton>
+
+        <HyperlinkButton
+            Command="{x:Bind ViewModel.ExitCommand, Mode=OneWay}"
+            Margin="-12,-8,-12,-5"
+            HorizontalAlignment="Stretch"
+            HorizontalContentAlignment="Left"> 
+
+            <TextBlock Text="Exit" Foreground="{ThemeResource DefaultTextForegroundThemeBrush}" />
+        </HyperlinkButton>
     </StackPanel>
 </Page>

App/Views/Pages/TrayWindowMainPage.xaml

@@ -333,7 +333,6 @@
 
         <HyperlinkButton
             Command="{x:Bind ViewModel.SignOutCommand, Mode=OneWay}"
-            IsEnabled="{x:Bind ViewModel.VpnLifecycle, Converter={StaticResource StoppedBoolConverter}, Mode=OneWay}"
             Margin="-12,0"
             HorizontalAlignment="Stretch"
             HorizontalContentAlignment="Left">

App/Views/TrayWindow.xaml

@@ -20,5 +20,12 @@
 
         <!-- This is where the current Page is displayed -->
         <controls:SizedFrame x:Name="RootFrame" />
+
+        <!-- proxy for animating resize -->
+        <Border x:Name="SizeProxy"
+            Width="0"
+            Height="0"
+            IsHitTestVisible="False"
+            Opacity="0" />
     </Grid>
 </Window>