From dca2e888d633fc47a8ac11b450c5608593071539 Mon Sep 17 00:00:00 2001
From: Jaap-Jan de Wit | DodoTech <jaap-jan@dodotech.dev>
Date: Fri, 7 Aug 2026 18:12:36 +0200
Subject: [PATCH] Redraw quick connect in v5's shape, auth word and all

---
 src/DodoSSH.Client.App/App.axaml              | 36 +++++++++++
 .../Views/QuickConnect.axaml                  | 62 +++++++++++++------
 2 files changed, 79 insertions(+), 19 deletions(-)

diff --git a/src/DodoSSH.Client.App/App.axaml b/src/DodoSSH.Client.App/App.axaml
index 55a2a72..59715e3 100644
--- a/src/DodoSSH.Client.App/App.axaml
+++ b/src/DodoSSH.Client.App/App.axaml
@@ -954,6 +954,42 @@
       <Setter Property="Background" Value="{StaticResource Accent}" />
     </Style>
 
+    <!--
+      Quick connect's own rows. In this file rather than QuickConnect.axaml, the same reason every other
+      list style is here: that view is the one caller, but what a selected row looks like is a palette
+      answer and belongs beside every other one.
+
+      Classes="tiles" on that ListBox clears the theme's own full-bleed selection wash first — see the
+      remark above "A LIST OF TILES" — for the same reason: a wash behind a 9-pixel-rounded row shows as
+      square corners peeking out from behind it. This is the one list in the application whose selected row
+      fills solid rather than tinting or carrying a strip, which is the mock's own choice and reads as
+      right here specifically: this palette is choosing a machine to connect to *now*, not one it is idly
+      browsing, and nothing else in the window asks to look this insistent.
+    -->
+    <Style Selector="Border.qcrow">
+      <Setter Property="Background" Value="Transparent" />
+    </Style>
+    <Style Selector="ListBoxItem:pointerover Border.qcrow">
+      <Setter Property="Background" Value="{StaticResource Hover}" />
+    </Style>
+    <Style Selector="ListBoxItem:selected Border.qcrow, ListBoxItem:selected:pointerover Border.qcrow">
+      <Setter Property="Background" Value="{StaticResource Accent}" />
+    </Style>
+    <Style Selector="TextBlock.qcrow-text">
+      <Setter Property="Foreground" Value="{StaticResource Text}" />
+    </Style>
+    <Style Selector="TextBlock.qcrow-subtext">
+      <Setter Property="Foreground" Value="{StaticResource TextFaint}" />
+    </Style>
+    <Style Selector="ListBoxItem:selected TextBlock.qcrow-text, ListBoxItem:selected TextBlock.qcrow-subtext">
+      <!--
+        AccentInk rather than a literal white: it is v5's name for "the colour text sits in on top of the
+        accent", which is what a filled row is. Naming it that way rather than #FFFFFF is what keeps this
+        rule true if the accent itself ever moves to a hue where white stops being the readable choice.
+      -->
+      <Setter Property="Foreground" Value="{StaticResource AccentInk}" />
+    </Style>
+
     <!--
       The group card a host is about to be dropped on. A wash rather than the accent strip a selection
       carries, because it is not a selection: it says "let go here", it lasts as long as the pointer is over
diff --git a/src/DodoSSH.Client.App/Views/QuickConnect.axaml b/src/DodoSSH.Client.App/Views/QuickConnect.axaml
index 29119c1..2485a19 100644
--- a/src/DodoSSH.Client.App/Views/QuickConnect.axaml
+++ b/src/DodoSSH.Client.App/Views/QuickConnect.axaml
@@ -30,17 +30,23 @@
   <!-- 80% of Canvas. Written out because a scrim is a brush with an alpha, and the palette holds no alpha
        variant of a surface — see Palette.axaml, where the only pre-multiplied brushes are the accent washes. -->
   <Border x:Name="Backdrop" Background="#CC0E1220" PointerPressed="OnBackdropPressed">
-    <Border Width="520" VerticalAlignment="Top" Margin="0,90,0,0"
+    <Border Width="640" VerticalAlignment="Top" Margin="0,160,0,0"
             Background="{StaticResource Chrome}" BorderBrush="{StaticResource BorderMid}"
-            BorderThickness="1" CornerRadius="6">
+            BorderThickness="1" CornerRadius="14">
       <StackPanel>
 
-        <Border Padding="12,10" BorderBrush="{StaticResource BorderSubtle}" BorderThickness="0,0,0,1">
+        <!--
+          ">_" rather than the bare ">" v4 drew: the mock's own prompt glyph, and the underscore is what
+          reads as a cursor waiting for the first keystroke rather than a stray angle bracket. There is
+          still no drawn caret in the field beside it, for the reason TextBox.address in this file gives —
+          it already has a real one.
+        -->
+        <Border Padding="16,14" BorderBrush="{StaticResource BorderSubtle}" BorderThickness="0,0,0,1">
           <Grid ColumnDefinitions="Auto,*">
-            <TextBlock Grid.Column="0" Classes="mono" Text="&gt;" FontSize="13"
+            <TextBlock Grid.Column="0" Classes="mono" Text="&gt;_" FontSize="14" FontWeight="Bold"
                        Foreground="{StaticResource Accent}" VerticalAlignment="Center" />
             <TextBox Grid.Column="1" x:Name="Query" Text="{Binding SearchText}"
-                     PlaceholderText="search hosts" Margin="8,0,0,0"
+                     PlaceholderText="search hosts" Margin="10,0,0,0"
                      FontFamily="{StaticResource MonoFont}" FontSize="14"
                      Background="Transparent" BorderThickness="0" />
           </Grid>
@@ -54,32 +60,50 @@
           looks like it does — the keyboard route already treats choosing a row and connecting to it as one
           act, and a pointer that only highlighted would leave the palette open over a choice already made.
           The gesture is wired in the code-behind, as the sidebar's double-click is.
+
+          Classes="tiles" clears the theme's full-bleed hover and selection wash the way the hosts grid's own
+          cards do — see the remark on Border.qcrow in App.axaml, which is what paints every state here
+          instead. Rows rather than cards, but the same reason applies: a square wash behind a rounded shape
+          shows its corners.
         -->
-        <ListBox x:Name="Results" MaxHeight="280" Focusable="False"
+        <ListBox x:Name="Results" Classes="tiles" MaxHeight="320" Focusable="False"
                  ItemsSource="{Binding SearchResults}"
                  SelectedItem="{Binding SelectedSearchResult}">
           <ListBox.ItemTemplate>
             <DataTemplate x:DataType="vm:HostRowViewModel">
-              <Grid ColumnDefinitions="Auto,*,Auto" Margin="0,8,12,8">
-                <Border Grid.Column="0" Classes="rowmark" />
-                <StackPanel Grid.Column="1" Spacing="1" Margin="12,0,0,0">
-                  <TextBlock Classes="mono" Text="{Binding Label}" FontSize="13" FontWeight="Medium"
-                             Foreground="{StaticResource Text}" />
-                  <TextBlock Classes="mono" Text="{Binding Address}" FontSize="10.5"
-                             Foreground="{StaticResource TextFaint}" />
-                </StackPanel>
-                <TextBlock Grid.Column="2" Classes="mono" Text="{Binding Authentication}" FontSize="10"
-                           Foreground="{StaticResource TextFaint}" VerticalAlignment="Center" />
-              </Grid>
+              <Border Classes="qcrow" Height="44" CornerRadius="9" Padding="10,0" Margin="8,2">
+                <Grid ColumnDefinitions="Auto,*,Auto">
+                  <!--
+                    Green when this host has a terminal open right now, grey otherwise — the same two-state
+                    dot the hosts grid draws, and the same reason: nothing here pings a machine, so a third
+                    colour would be a claim this application never checks. See Ellipse.dot in App.axaml.
+                  -->
+                  <Ellipse Grid.Column="0" Classes="dot" Classes.live="{Binding IsConnected}"
+                           Width="8" Height="8" VerticalAlignment="Center" />
+                  <StackPanel Grid.Column="1" Spacing="1" Margin="10,0,0,0" VerticalAlignment="Center">
+                    <TextBlock Classes="mono qcrow-text" Text="{Binding Label}" FontSize="13"
+                               FontWeight="Medium" TextTrimming="CharacterEllipsis" />
+                    <TextBlock Classes="mono qcrow-subtext" Text="{Binding Address}" FontSize="11.5"
+                               TextTrimming="CharacterEllipsis" />
+                  </StackPanel>
+                  <!--
+                    credential / key / password — never the mock's SSH/SFTP kind column. Every palette
+                    connect here is SSH, so printing that word would be a constant dressed up as a reading;
+                    see hosts-v5-design-spec.md's deviations and HostRowViewModel.Authentication.
+                  -->
+                  <TextBlock Grid.Column="2" Classes="mono qcrow-subtext" Text="{Binding Authentication}"
+                             FontSize="11" Margin="10,0,0,0" VerticalAlignment="Center" />
+                </Grid>
+              </Border>
             </DataTemplate>
           </ListBox.ItemTemplate>
         </ListBox>
 
-        <TextBlock Classes="hint" FontSize="12" Margin="14,16"
+        <TextBlock Classes="hint" FontSize="12" Margin="18,16"
                    Text="No host matches that."
                    IsVisible="{Binding !HasSearchResults}" />
 
-        <Border Padding="12,7" BorderBrush="{StaticResource BorderSubtle}" BorderThickness="0,1,0,0">
+        <Border Padding="16,10" BorderBrush="{StaticResource BorderSubtle}" BorderThickness="0,1,0,0">
           <TextBlock Classes="mono" FontSize="10" Foreground="{StaticResource TextFaint}"
                      Text="↑ ↓ to choose · ENTER or click to connect · ESC to close" />
         </Border>