feat: enabled sign out and animated window resize

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,90 @@
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
 using Microsoft.UI.Xaml.Markup;
+using System;
+using System.Threading;
+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 bool? _pendingIsOpen;
+
+
     public ExpandContent()
     {
         InitializeComponent();
+        Loaded += (_, __) =>
+        {
+            if (_pendingIsOpen is bool v)
+            {
+                _ = AnimateAsync(v);
+                _pendingIsOpen = null;
+            }
+        };
     }
 
-    public void CollapseAnimation_Completed(object? sender, object args)
+    partial void OnIsOpenChanged(bool oldValue, bool newValue)
     {
-        // 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 (!this.IsLoaded)
+        {
+            _pendingIsOpen = newValue;
+            return;
+        }
+        _ = AnimateAsync(newValue);
     }
 
-    partial void OnIsOpenChanged(bool oldValue, bool newValue)
+    private async Task AnimateAsync(bool open)
     {
-        var newState = newValue ? "ExpandedState" : "CollapsedState";
+        if (open)
+        {
+            if (_currentlyOpen is not null && _currentlyOpen != this)
+                await _currentlyOpen.StartCollapseAsync();
 
-        // The animation can't set visibility when starting or ending the
-        // animation.
-        if (newValue)
+            _currentlyOpen = this;
             CollapsiblePanel.Visibility = Visibility.Visible;
 
-        VisualStateManager.GoToState(this, newState, true);
+            VisualStateManager.GoToState(this, "ExpandedState", true);
+            await ExpandAsync();
+        }
+        else
+        {
+            if (_currentlyOpen == this) _currentlyOpen = null;
+            await StartCollapseAsync();
+        }
+    }
+
+    private static ExpandContent? _currentlyOpen;
+    private TaskCompletionSource? _collapseTcs;
+
+    private async Task ExpandAsync()
+    {
+        CollapsiblePanel.Visibility = Visibility.Visible;
+        VisualStateManager.GoToState(this, "ExpandedState", true);
+
+        var tcs = new TaskCompletionSource();
+        void done(object? s, object e) { ExpandSb.Completed -= done; tcs.SetResult(); }
+        ExpandSb.Completed += done;
+        await tcs.Task;
+    }
+
+    private Task StartCollapseAsync()
+    {
+        _collapseTcs = new TaskCompletionSource();
+        VisualStateManager.GoToState(this, "CollapsedState", true);
+        return _collapseTcs.Task;
+    }
+
+    private void CollapseStoryboard_Completed(object sender, object e)
+    {
+        CollapsiblePanel.Visibility = Visibility.Collapsed;
+        _collapseTcs?.TrySetResult();
+        _collapseTcs = null;
     }
 }

App/Services/RpcController.cs

@@ -234,6 +234,11 @@ 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}");
         }
+
+        if (reply.Stop.Success)
+        {
+            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,11 @@
 
         <!-- This is where the current Page is displayed -->
         <controls:SizedFrame x:Name="RootFrame" />
+
+        <!-- proxy for animating resize -->
+        <Border x:Name="SizeProxy"
+            Width="0"                
+            Opacity="0"
+            IsHitTestVisible="False" />
     </Grid>
 </Window>