Improve NanoKVM on-screen keyboard: portrait layout, tap feedback, Windows key

- Add separate portrait/landscape layouts that rebuild on orientation change
  so the keyboard never overflows the screen edge in portrait
- Keep portrait keys comfortably sized (split the wide function/arrow row)
- Add brief highlight feedback when a key is tapped
- Add Windows key: first tap arms it as a one-shot modifier (e.g. Win+R),
  a second tap (no key in between) fires the Windows key alone (Start menu)

Author: RadiatorTwo

src/ServerRemote.App/Components/OnScreenKeyboard.cs

@@ -33,17 +33,24 @@ public NanoKvmViewModel? ViewModel
         set => SetValue(ViewModelProperty, value);
     }
 
+    private const double RowSpacing = 4;
+
     private bool _shift;
-    private Border? _shiftBorder, _ctrlBorder, _altBorder;
+    private Border? _shiftBorder, _ctrlBorder, _altBorder, _metaBorder;
     private readonly List<(Label label, string lower, string upper)> _dual = new();
     // All keys with their base width — allows orientation-dependent scaling without a rebuild.
     private readonly List<(Border border, Label label, double baseWidth)> _keys = new();
+    // Per-row natural geometry, used to scale the keyboard down so it never overflows the screen width.
+    private readonly List<(double scalableWidth, int keyCount)> _rows = new();
+
+    // Which orientation the currently built layout was created for (null = nothing built yet).
+    private bool? _layoutIsLandscape;
 
     public OnScreenKeyboard()
     {
         BackgroundColor = Colors.Transparent;
         Padding = new Thickness(6, 4);
-        Build();
+        Rebuild(IsLandscape(DeviceDisplay.Current.MainDisplayInfo));
 
         Loaded += OnLoaded;
         Unloaded += OnUnloaded;
@@ -60,17 +67,44 @@ private void OnUnloaded(object? sender, EventArgs e)
 
     private void OnDisplayInfoChanged(object? sender, DisplayInfoChangedEventArgs e) => UpdateMetrics();
 
-    // In landscape, height is scarce → flatter, slightly narrower keys and smaller font,
-    // so that the upper part of the image stays visible.
+    private static bool IsLandscape(DisplayInfo info)
+        => info.Orientation == DisplayOrientation.Landscape
+           || (info.Orientation == DisplayOrientation.Unknown && info.Width > info.Height);
+
+    // Landscape and portrait use genuinely different key arrangements (see BuildLandscape/BuildPortrait),
+    // so when the orientation category flips we rebuild the layout rather than just rescaling it.
     private void UpdateMetrics()
     {
         var info = DeviceDisplay.Current.MainDisplayInfo;
-        bool landscape = info.Orientation == DisplayOrientation.Landscape
-            || (info.Orientation == DisplayOrientation.Unknown && info.Width > info.Height);
+        bool landscape = IsLandscape(info);
+
+        if (_layoutIsLandscape != landscape)
+            Rebuild(landscape);
+
+        // Available width in device-independent units (MAUI layout space), minus the
+        // ContentView padding (6 left + 6 right) and a small safety margin.
+        double available = (info.Density > 0 ? info.Width / info.Density : info.Width) - 12 - 4;
+
+        // Largest scale at which the widest row still fits the available width.
+        double fitScale = double.PositiveInfinity;
+        foreach (var (scalableWidth, keyCount) in _rows)
+        {
+            if (scalableWidth <= 0) continue;
+            double spacing = (keyCount - 1) * RowSpacing;
+            fitScale = Math.Min(fitScale, (available - spacing) / scalableWidth);
+        }
+
+        // Landscape keeps the compact look (slightly narrower keys, flatter, smaller font);
+        // portrait keeps full-size, comfortable keys and only narrows the width if it must fit.
+        double desiredScale = landscape ? 0.86 : 1.0;
+        double scale = Math.Min(desiredScale, fitScale);
+        if (scale <= 0 || double.IsInfinity(scale)) scale = desiredScale;
 
-        double scale = landscape ? 0.86 : 1.0;
-        double height = landscape ? 30 : KeyH;
-        double font = landscape ? 13 : 16;
+        // Height and font keep the key aspect ratio sensible. In landscape we deliberately
+        // flatten; in portrait we keep a comfortable, fixed key height regardless of the
+        // width scale so the keys never become tiny.
+        double height = landscape ? 30 : 40;
+        double font = landscape ? 13 : 14;
 
         foreach (var (border, label, baseWidth) in _keys)
         {
@@ -80,7 +114,29 @@ private void UpdateMetrics()
         }
     }
 
-    private void Build()
+    private void Rebuild(bool landscape)
+    {
+        _keys.Clear();
+        _rows.Clear();
+        _dual.Clear();
+        _shiftBorder = _ctrlBorder = _altBorder = _metaBorder = null;
+
+        Content = landscape ? BuildLandscape() : BuildPortrait();
+        _layoutIsLandscape = landscape;
+
+        // Restore the persisted modifier state onto the freshly built keys.
+        RefreshShiftLabels();
+        SetActive(_shiftBorder, _shift);
+        if (ViewModel is { } vm)
+        {
+            SetActive(_ctrlBorder, vm.CtrlActive);
+            SetActive(_altBorder, vm.AltActive);
+            SetActive(_metaBorder, vm.MetaActive);
+        }
+    }
+
+    // Wide landscape layout: function and arrow keys share the bottom row, which fits the broad screen.
+    private View BuildLandscape()
     {
         var rows = new VerticalStackLayout { Spacing = 4, HorizontalOptions = LayoutOptions.Center };
 
@@ -104,23 +160,72 @@ private void Build()
             Special("↵", WideW, Enter)));
 
         rows.Add(Row(
-            CtrlKey(), AltKey(),
+            WinKey(), CtrlKey(), AltKey(),
             Special("Tab", WideW, () => SendChar('\t')),
-            Special("Space", 240, () => SendChar(' ')),
+            Special("Space", 220, () => SendChar(' ')),
             Special("Esc", 56, () => RunCommand(ViewModel?.KeyEscapeCommand)),
             Special("←", 48, () => RunCommand(ViewModel?.KeyLeftCommand)),
             Special("↑", 48, () => RunCommand(ViewModel?.KeyUpCommand)),
             Special("↓", 48, () => RunCommand(ViewModel?.KeyDownCommand)),
             Special("→", 48, () => RunCommand(ViewModel?.KeyRightCommand))));
 
-        Content = rows;
+        return rows;
     }
 
-    private static HorizontalStackLayout Row(params View[] keys)
+    // Portrait layout: the wide function/arrow row is split across two extra rows so the widest
+    // row is just the 11-key letter rows. That keeps the fit-scale high (~0.7) and the keys large.
+    private View BuildPortrait()
     {
-        var row = new HorizontalStackLayout { Spacing = 4, HorizontalOptions = LayoutOptions.Center };
+        var rows = new VerticalStackLayout { Spacing = 4, HorizontalOptions = LayoutOptions.Center };
+
+        rows.Add(Row(
+            Dual("1", "!"), Dual("2", "\""), Dual("3", "§"), Dual("4", "$"), Dual("5", "%"),
+            Dual("6", "&"), Dual("7", "/"), Dual("8", "("), Dual("9", ")"), Dual("0", "="),
+            Special("⌫", WideW, Backspace)));
+
+        rows.Add(Row(
+            Dual("q", "Q"), Dual("w", "W"), Dual("e", "E"), Dual("r", "R"), Dual("t", "T"), Dual("z", "Z"),
+            Dual("u", "U"), Dual("i", "I"), Dual("o", "O"), Dual("p", "P"), Dual("ü", "Ü")));
+
+        rows.Add(Row(
+            Dual("a", "A"), Dual("s", "S"), Dual("d", "D"), Dual("f", "F"), Dual("g", "G"), Dual("h", "H"),
+            Dual("j", "J"), Dual("k", "K"), Dual("l", "L"), Dual("ö", "Ö"), Dual("ä", "Ä")));
+
+        rows.Add(Row(
+            ShiftKey(),
+            Dual("y", "Y"), Dual("x", "X"), Dual("c", "C"), Dual("v", "V"), Dual("b", "B"), Dual("n", "N"), Dual("m", "M"),
+            Dual(",", ";"), Dual(".", ":"), Dual("-", "_")));
+
+        // Modifier / whitespace row.
+        rows.Add(Row(
+            WinKey(), CtrlKey(), AltKey(),
+            Special("Tab", KeyW, () => SendChar('\t')),
+            Special("Space", 120, () => SendChar(' ')),
+            Special("↵", WideW, Enter)));
+
+        // Navigation row.
+        rows.Add(Row(
+            Special("Esc", WideW, () => RunCommand(ViewModel?.KeyEscapeCommand)),
+            Special("←", KeyW, () => RunCommand(ViewModel?.KeyLeftCommand)),
+            Special("↑", KeyW, () => RunCommand(ViewModel?.KeyUpCommand)),
+            Special("↓", KeyW, () => RunCommand(ViewModel?.KeyDownCommand)),
+            Special("→", KeyW, () => RunCommand(ViewModel?.KeyRightCommand))));
+
+        return rows;
+    }
+
+    private HorizontalStackLayout Row(params View[] keys)
+    {
+        var row = new HorizontalStackLayout { Spacing = RowSpacing, HorizontalOptions = LayoutOptions.Center };
+        double scalableWidth = 0;
         foreach (var k in keys)
+        {
             row.Add(k);
+            // At build time each Border's WidthRequest equals its base width.
+            if (k is Border b)
+                scalableWidth += b.WidthRequest;
+        }
+        _rows.Add((scalableWidth, keys.Length));
         return row;
     }
 
@@ -157,12 +262,33 @@ private static void OnTap(Border b, Func<Task> action)
         b.GestureRecognizers.Add(tap);
     }
 
+    // Like OnTap, but briefly highlights the key so a press is visibly acknowledged.
+    // Used for character/special keys; modifier keys already signal via their persistent active state.
+    private static void OnTapFlash(Border b, Func<Task> action)
+    {
+        var tap = new TapGestureRecognizer();
+        tap.Tapped += async (_, _) =>
+        {
+            b.BackgroundColor = KeyBgActive;
+            try
+            {
+                await action();
+            }
+            finally
+            {
+                await Task.Delay(90);
+                b.BackgroundColor = KeyBg;
+            }
+        };
+        b.GestureRecognizers.Add(tap);
+    }
+
     // Character key with lowercase/uppercase variant (depending on Shift).
     private View Dual(string lower, string upper)
     {
         var (border, label) = MakeKey(_shift ? upper : lower, KeyW);
         _dual.Add((label, lower, upper));
-        OnTap(border, async () =>
+        OnTapFlash(border, async () =>
         {
             var s = _shift ? upper : lower;
             if (s.Length > 0)
@@ -176,7 +302,7 @@ private View Dual(string lower, string upper)
     private View Special(string label, double width, Func<Task> action)
     {
         var (border, _) = MakeKey(label, width);
-        OnTap(border, async () =>
+        OnTapFlash(border, async () =>
         {
             await action();
             ResetOneShot();
@@ -230,6 +356,33 @@ private View AltKey()
         return border;
     }
 
+    // Windows key: first tap arms it as a one-shot modifier (for combos like Win+R);
+    // a second tap (while armed) fires the Windows key on its own (e.g. open the Start menu).
+    private View WinKey()
+    {
+        var (border, _) = MakeKey("⊞", WideW);
+        _metaBorder = border;
+        OnTap(border, async () =>
+        {
+            if (ViewModel is not { } vm)
+                return;
+
+            if (vm.MetaActive)
+            {
+                // Second tap: send Win alone and disarm.
+                vm.MetaActive = false;
+                SetActive(_metaBorder, false);
+                await vm.SendWindowsKeyAsync();
+            }
+            else
+            {
+                vm.MetaActive = true;
+                SetActive(_metaBorder, true);
+            }
+        });
+        return border;
+    }
+
     // ----- Sending / state -----
 
     private Task SendChar(char c) => ViewModel?.SendCharAsync(c) ?? Task.CompletedTask;
@@ -255,7 +408,7 @@ private static void SetActive(Border? border, bool active)
             border.BackgroundColor = active ? KeyBgActive : KeyBg;
     }
 
-    // Shift/Ctrl/Alt each apply only to the next key — reset after sending.
+    // Shift/Ctrl/Alt/Win each apply only to the next key — reset after sending.
     private void ResetOneShot()
     {
         if (_shift)
@@ -269,8 +422,10 @@ private void ResetOneShot()
         {
             if (vm.CtrlActive) vm.CtrlActive = false;
             if (vm.AltActive) vm.AltActive = false;
+            if (vm.MetaActive) vm.MetaActive = false;
         }
         SetActive(_ctrlBorder, false);
         SetActive(_altBorder, false);
+        SetActive(_metaBorder, false);
     }
 }

src/ServerRemote.App/ViewModels/NanoKvmViewModel.cs

@@ -303,6 +303,9 @@ private async Task DisconnectInputAsync()
     private Task ScrollDown() => Hid.ScrollAsync(-1);
 
     // Special keys of the on-screen keyboard.
+    // Windows/Meta key pressed on its own (e.g. open the Start menu).
+    public Task SendWindowsKeyAsync() => Hid.SendKeyAsync(0, false, false, false, meta: true);
+
     [RelayCommand] private Task KeyEnter() => SendRawKeyAsync(HidKeys.Enter);
     [RelayCommand] private Task KeyBackspace() => SendRawKeyAsync(HidKeys.Backspace);
     [RelayCommand] private Task KeyTab() => SendRawKeyAsync(HidKeys.Tab);