From a00af1da3f19c577a4f13d3662a746d02eabe0fc Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 20 Mar 2026 12:10:15 +0000
Subject: [PATCH] Redesign Wino Account flyout menu with Windows 11 Fluent
 Design

Replaces the plain signed-out flyout with a polished layout featuring:
- Gradient hero header with account icon and descriptive text
- Two benefit cards (sync settings, unlock add-ons) matching dialog patterns
- Equal-width Sign In (accent) and Register buttons
- Redesigned signed-in view with gradient profile header and larger avatar
- New translation keys for flyout benefit card content

https://claude.ai/code/session_019YP6uNe52Wo3SMuqz6w8QE
---
 .../Translations/en_US/resources.json         |   4 +
 Wino.Mail.WinUI/ShellWindow.xaml              | 196 +++++++++++++++---
 2 files changed, 167 insertions(+), 33 deletions(-)

diff --git a/Wino.Core.Domain/Translations/en_US/resources.json b/Wino.Core.Domain/Translations/en_US/resources.json
index 08f0d2ba..3015cdaf 100644
--- a/Wino.Core.Domain/Translations/en_US/resources.json
+++ b/Wino.Core.Domain/Translations/en_US/resources.json
@@ -1290,6 +1290,10 @@
     "WinoAccount_SignOut_NoAccountMessage": "There is no active Wino Account to sign out.",
     "WinoAccount_Titlebar_SignedOutTitle": "Wino Account",
     "WinoAccount_Titlebar_SignedOutDescription": "Sign in or create a Wino Account to manage your Wino session.",
+    "WinoAccount_Titlebar_SyncBenefitTitle": "Sync settings",
+    "WinoAccount_Titlebar_SyncBenefitDescription": "Keep your Wino preferences in sync across devices.",
+    "WinoAccount_Titlebar_AddonsBenefitTitle": "Unlock add-ons",
+    "WinoAccount_Titlebar_AddonsBenefitDescription": "Access premium features like Wino AI Pack.",
     "WinoAccount_Titlebar_SignedInStatus": "Status: {0}",
     "WelcomeWizard_Step2Title": "Add Account",
     "WelcomeWizard_Step3Title": "Finish Setup",
diff --git a/Wino.Mail.WinUI/ShellWindow.xaml b/Wino.Mail.WinUI/ShellWindow.xaml
index da45b6b4..4690cce7 100644
--- a/Wino.Mail.WinUI/ShellWindow.xaml
+++ b/Wino.Mail.WinUI/ShellWindow.xaml
@@ -96,49 +96,179 @@
                                 x:Name="WinoAccountFlyout"
                                 Placement="Bottom">
                                 <Grid MinWidth="320" MaxWidth="360">
+                                    <!--  Signed Out View  -->
                                     <StackPanel
                                         x:Name="WinoAccountSignedOutView"
-                                        Spacing="12">
-                                        <TextBlock
-                                            Style="{StaticResource BodyStrongTextBlockStyle}"
-                                            Text="{x:Bind domain:Translator.WinoAccount_Titlebar_SignedOutTitle}" />
-                                        <TextBlock
-                                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                                            Text="{x:Bind domain:Translator.WinoAccount_Titlebar_SignedOutDescription}"
-                                            TextWrapping="WrapWholeWords" />
-                                        <StackPanel Orientation="Horizontal" Spacing="8">
-                                            <Button
-                                                Click="RegisterWinoAccountClicked"
-                                                Content="{x:Bind domain:Translator.WinoAccount_RegisterButton_Action}" />
-                                            <Button
-                                                Click="LoginWinoAccountClicked"
-                                                Content="{x:Bind domain:Translator.WinoAccount_LoginButton_Action}" />
-                                        </StackPanel>
-                                    </StackPanel>
+                                        Spacing="16">
 
-                                    <StackPanel
-                                        x:Name="WinoAccountSignedInView"
-                                        Spacing="12"
-                                        Visibility="Collapsed">
-                                        <StackPanel Orientation="Horizontal" Spacing="12">
-                                            <PersonPicture
-                                                x:Name="WinoAccountFlyoutPicture"
-                                                Width="40"
-                                                Height="40"
-                                                Initials="W" />
-                                            <StackPanel Spacing="2">
+                                        <!--  Hero header with gradient and icon  -->
+                                        <Border
+                                            Margin="-16,-16,-16,0"
+                                            Padding="20"
+                                            CornerRadius="8,8,0,0">
+                                            <Border.Background>
+                                                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
+                                                    <GradientStop Offset="0" Color="#1A6EE7B7" />
+                                                    <GradientStop Offset="0.5" Color="#2038BDF8" />
+                                                    <GradientStop Offset="1" Color="#1A818CF8" />
+                                                </LinearGradientBrush>
+                                            </Border.Background>
+                                            <StackPanel Spacing="4">
+                                                <Border
+                                                    Width="40"
+                                                    Height="40"
+                                                    HorizontalAlignment="Left"
+                                                    Background="{ThemeResource AccentFillColorDefaultBrush}"
+                                                    CornerRadius="20">
+                                                    <FontIcon
+                                                        FontSize="18"
+                                                        Foreground="White"
+                                                        Glyph="&#xE77B;" />
+                                                </Border>
                                                 <TextBlock
-                                                    x:Name="WinoAccountFlyoutEmailText"
-                                                    Style="{StaticResource BodyStrongTextBlockStyle}"
-                                                    TextWrapping="WrapWholeWords" />
+                                                    Margin="0,8,0,0"
+                                                    Style="{StaticResource SubtitleTextBlockStyle}"
+                                                    Text="{x:Bind domain:Translator.WinoAccount_Titlebar_SignedOutTitle}" />
                                                 <TextBlock
-                                                    x:Name="WinoAccountFlyoutStatusText"
                                                     Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                                    Style="{StaticResource CaptionTextBlockStyle}"
+                                                    Text="{x:Bind domain:Translator.WinoAccount_Titlebar_SignedOutDescription}"
                                                     TextWrapping="WrapWholeWords" />
                                             </StackPanel>
+                                        </Border>
+
+                                        <!--  Benefit cards  -->
+                                        <StackPanel Spacing="8">
+                                            <Border
+                                                Padding="12"
+                                                Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}"
+                                                CornerRadius="8">
+                                                <Grid ColumnSpacing="12">
+                                                    <Grid.ColumnDefinitions>
+                                                        <ColumnDefinition Width="Auto" />
+                                                        <ColumnDefinition Width="*" />
+                                                    </Grid.ColumnDefinitions>
+                                                    <Border
+                                                        Width="32"
+                                                        Height="32"
+                                                        Background="{ThemeResource AccentFillColorDefaultBrush}"
+                                                        CornerRadius="8"
+                                                        Opacity="0.15" />
+                                                    <FontIcon
+                                                        HorizontalAlignment="Center"
+                                                        VerticalAlignment="Center"
+                                                        FontSize="14"
+                                                        Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
+                                                        Glyph="&#xE8D7;" />
+                                                    <StackPanel Grid.Column="1" Spacing="2">
+                                                        <TextBlock
+                                                            Style="{StaticResource CaptionTextBlockStyle}"
+                                                            FontWeight="SemiBold"
+                                                            Text="{x:Bind domain:Translator.WinoAccount_Titlebar_SyncBenefitTitle}" />
+                                                        <TextBlock
+                                                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                                            Style="{StaticResource CaptionTextBlockStyle}"
+                                                            Text="{x:Bind domain:Translator.WinoAccount_Titlebar_SyncBenefitDescription}"
+                                                            TextWrapping="WrapWholeWords" />
+                                                    </StackPanel>
+                                                </Grid>
+                                            </Border>
+                                            <Border
+                                                Padding="12"
+                                                Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}"
+                                                CornerRadius="8">
+                                                <Grid ColumnSpacing="12">
+                                                    <Grid.ColumnDefinitions>
+                                                        <ColumnDefinition Width="Auto" />
+                                                        <ColumnDefinition Width="*" />
+                                                    </Grid.ColumnDefinitions>
+                                                    <Border
+                                                        Width="32"
+                                                        Height="32"
+                                                        Background="{ThemeResource AccentFillColorDefaultBrush}"
+                                                        CornerRadius="8"
+                                                        Opacity="0.15" />
+                                                    <FontIcon
+                                                        HorizontalAlignment="Center"
+                                                        VerticalAlignment="Center"
+                                                        FontSize="14"
+                                                        Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
+                                                        Glyph="&#xE946;" />
+                                                    <StackPanel Grid.Column="1" Spacing="2">
+                                                        <TextBlock
+                                                            Style="{StaticResource CaptionTextBlockStyle}"
+                                                            FontWeight="SemiBold"
+                                                            Text="{x:Bind domain:Translator.WinoAccount_Titlebar_AddonsBenefitTitle}" />
+                                                        <TextBlock
+                                                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                                            Style="{StaticResource CaptionTextBlockStyle}"
+                                                            Text="{x:Bind domain:Translator.WinoAccount_Titlebar_AddonsBenefitDescription}"
+                                                            TextWrapping="WrapWholeWords" />
+                                                    </StackPanel>
+                                                </Grid>
+                                            </Border>
                                         </StackPanel>
+
+                                        <!--  Action buttons  -->
+                                        <Grid ColumnSpacing="8">
+                                            <Grid.ColumnDefinitions>
+                                                <ColumnDefinition Width="*" />
+                                                <ColumnDefinition Width="*" />
+                                            </Grid.ColumnDefinitions>
+                                            <Button
+                                                HorizontalAlignment="Stretch"
+                                                Click="LoginWinoAccountClicked"
+                                                Content="{x:Bind domain:Translator.WinoAccount_LoginButton_Title}"
+                                                Style="{ThemeResource AccentButtonStyle}" />
+                                            <Button
+                                                Grid.Column="1"
+                                                HorizontalAlignment="Stretch"
+                                                Click="RegisterWinoAccountClicked"
+                                                Content="{x:Bind domain:Translator.WinoAccount_RegisterButton_Title}" />
+                                        </Grid>
+                                    </StackPanel>
+
+                                    <!--  Signed In View  -->
+                                    <StackPanel
+                                        x:Name="WinoAccountSignedInView"
+                                        Spacing="16"
+                                        Visibility="Collapsed">
+
+                                        <!--  Profile header  -->
+                                        <Border
+                                            Margin="-16,-16,-16,0"
+                                            Padding="20"
+                                            CornerRadius="8,8,0,0">
+                                            <Border.Background>
+                                                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
+                                                    <GradientStop Offset="0" Color="#1A6EE7B7" />
+                                                    <GradientStop Offset="0.5" Color="#2038BDF8" />
+                                                    <GradientStop Offset="1" Color="#1A818CF8" />
+                                                </LinearGradientBrush>
+                                            </Border.Background>
+                                            <StackPanel Orientation="Horizontal" Spacing="14">
+                                                <PersonPicture
+                                                    x:Name="WinoAccountFlyoutPicture"
+                                                    Width="48"
+                                                    Height="48"
+                                                    Initials="W" />
+                                                <StackPanel VerticalAlignment="Center" Spacing="2">
+                                                    <TextBlock
+                                                        x:Name="WinoAccountFlyoutEmailText"
+                                                        Style="{StaticResource BodyStrongTextBlockStyle}"
+                                                        TextWrapping="WrapWholeWords" />
+                                                    <TextBlock
+                                                        x:Name="WinoAccountFlyoutStatusText"
+                                                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                                        Style="{StaticResource CaptionTextBlockStyle}"
+                                                        TextWrapping="WrapWholeWords" />
+                                                </StackPanel>
+                                            </StackPanel>
+                                        </Border>
+
+                                        <!--  Sign out button  -->
                                         <Button
-                                            HorizontalAlignment="Left"
+                                            HorizontalAlignment="Stretch"
                                             Click="SignOutWinoAccountClicked"
                                             Content="{x:Bind domain:Translator.WinoAccount_SignOutButton_Action}" />
                                     </StackPanel>