Add pulldown toolbar

messages/en-US.json

@@ -3581,5 +3581,7 @@
     "rdpFilesReadyToPaste": "Files ready to paste",
     "rdpFilesReadyToPasteDescription": "{count} file(s) copied to remote clipboard — press Ctrl+V on the remote desktop to paste.",
     "rdpUploadFailed": "Upload failed",
-    "rdpUnicodeKeyboardMode": "Unicode keyboard mode"
+    "rdpUnicodeKeyboardMode": "Unicode keyboard mode",
+    "sessionToolbarShow": "Show toolbar",
+    "sessionToolbarHide": "Hide toolbar"
 }

src/app/rdp/RdpClient.tsx

@@ -36,6 +36,7 @@ import { Alert, AlertDescription } from "@app/components/ui/alert";
 import BrandedAuthSurface from "@app/components/BrandedAuthSurface";
 import PoweredByPangolin from "@app/components/PoweredByPangolin";
 import AuthPageFooterNotices from "@app/components/AuthPageFooterNotices";
+import CollapsibleSessionToolbar from "@app/components/CollapsibleSessionToolbar";
 import { useTranslations } from "next-intl";
 import {
     loadEncryptedLocalStorage,
@@ -464,34 +465,16 @@ export default function RdpClient({
                 className="fixed inset-0 z-50 flex flex-col bg-neutral-900"
                 style={{ display: showLogin ? "none" : "flex" }}
             >
-                <div className="flex flex-wrap items-center gap-2 bg-black p-2 text-white">
+                <CollapsibleSessionToolbar>
                     <Button
                         size="sm"
-                        variant="secondary"
+                        variant="destructive"
-                        onClick={() => ui()?.setScale(1)}
+                        onClick={() => {
+                            ui()?.shutdown();
+                            setShowLogin(true);
+                        }}
                     >
-                        {t("rdpFit")}
+                        {t("sshTerminate")}
-                    </Button>
-                    <Button
-                        size="sm"
-                        variant="secondary"
-                        onClick={() => ui()?.setScale(2)}
-                    >
-                        {t("rdpFull")}
-                    </Button>
-                    <Button
-                        size="sm"
-                        variant="secondary"
-                        onClick={() => ui()?.setScale(3)}
-                    >
-                        {t("rdpReal")}
-                    </Button>
-                    <Button
-                        size="sm"
-                        variant="secondary"
-                        onClick={() => ui()?.ctrlAltDel()}
-                    >
-                        {t("browserGatewayCtrlAltDel")}
                     </Button>
                     <Button
                         size="sm"
@@ -500,13 +483,6 @@ export default function RdpClient({
                     >
                         {t("rdpMeta")}
                     </Button>
-                    {/* <Button
-                        size="sm"
-                        variant="secondary"
-                        onClick={toggleCursorKind}
-                    >
-                        Toggle cursor
-                    </Button> */}
                     <Button
                         size="sm"
                         variant="secondary"
@@ -539,14 +515,39 @@ export default function RdpClient({
                     </Button>
                     <Button
                         size="sm"
-                        variant="destructive"
+                        variant="secondary"
-                        onClick={() => {
+                        onClick={() => ui()?.setScale(1)}
-                            ui()?.shutdown();
-                            setShowLogin(true);
-                        }}
                     >
-                        {t("sshTerminate")}
+                        {t("rdpFit")}
                     </Button>
+                    <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={() => ui()?.setScale(2)}
+                    >
+                        {t("rdpFull")}
+                    </Button>
+                    <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={() => ui()?.setScale(3)}
+                    >
+                        {t("rdpReal")}
+                    </Button>
+                    <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={() => ui()?.ctrlAltDel()}
+                    >
+                        {t("browserGatewayCtrlAltDel")}
+                    </Button>
+                    {/* <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={toggleCursorKind}
+                    >
+                        Toggle cursor
+                    </Button> */}
                     <label className="ml-2 flex items-center gap-2">
                         <input
                             type="checkbox"
@@ -558,7 +559,7 @@ export default function RdpClient({
                         />
                         {t("rdpUnicodeKeyboardMode")}
                     </label>
-                </div>
+                </CollapsibleSessionToolbar>
 
                 {moduleReady && (
                     <iron-remote-desktop

src/app/vnc/VncClient.tsx

@@ -27,6 +27,7 @@ import { Alert, AlertDescription } from "@app/components/ui/alert";
 import BrandedAuthSurface from "@app/components/BrandedAuthSurface";
 import PoweredByPangolin from "@app/components/PoweredByPangolin";
 import AuthPageFooterNotices from "@app/components/AuthPageFooterNotices";
+import CollapsibleSessionToolbar from "@app/components/CollapsibleSessionToolbar";
 import { useTranslations } from "next-intl";
 import {
     loadEncryptedLocalStorage,
@@ -296,7 +297,7 @@ export default function VncClient({
                 className="fixed inset-0 z-50 flex flex-col bg-neutral-900"
                 style={{ display: connected ? "flex" : "none" }}
             >
-                <div className="flex flex-wrap items-center gap-2 bg-black p-2 text-white">
+                <CollapsibleSessionToolbar>
                     <Button
                         size="sm"
                         variant="secondary"
@@ -329,7 +330,7 @@ export default function VncClient({
                     >
                         {t("sshTerminate")}
                     </Button>
-                </div>
+                </CollapsibleSessionToolbar>
 
                 <div
                     ref={screenRef}

src/components/CollapsibleSessionToolbar.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { cn } from "@app/lib/cn";
+import { useTranslations } from "next-intl";
+
+export default function CollapsibleSessionToolbar({
+    children,
+    defaultOpen = false
+}: {
+    children: ReactNode;
+    defaultOpen?: boolean;
+}) {
+    const t = useTranslations();
+    const [open, setOpen] = useState(defaultOpen);
+
+    return (
+        <div className="pointer-events-none absolute inset-x-0 top-0 z-10">
+            <div
+                className={cn(
+                    "pointer-events-auto absolute inset-x-0 top-0 bg-black text-white shadow-lg transition-transform duration-200 ease-out",
+                    open ? "translate-y-0" : "-translate-y-full"
+                )}
+            >
+                <div className="flex flex-wrap items-center gap-2 p-2">
+                    {children}
+                </div>
+                <button
+                    type="button"
+                    onClick={() => setOpen((v) => !v)}
+                    aria-label={
+                        open ? t("sessionToolbarHide") : t("sessionToolbarShow")
+                    }
+                    aria-expanded={open}
+                    className="absolute left-1/2 top-full flex h-7 w-12 -translate-x-1/2 items-center justify-center rounded-b-md bg-primary text-primary-foreground shadow-md transition-opacity hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                >
+                    {open ? (
+                        <ChevronUp className="h-4 w-4" />
+                    ) : (
+                        <ChevronDown className="h-4 w-4" />
+                    )}
+                </button>
+            </div>
+        </div>
+    );
+}