[client] Fix the Files tab layout and add sending from the Files page

The Files rows overflowed the fixed-width panel instead of truncating.
Radix wraps ScrollArea.Viewport children in a div carrying an inline
`min-width:100%; display:table`, and a table box is shrink-to-fit, so it
grew to the widest row's intrinsic width and never gave `truncate` a
finite bound. Since overflowX is hidden when only the vertical scrollbar
is enabled, the result was clipped content rather than a scrollbar. A
scoped `.nb-scroll-clamp` rule overrides that display (the inline style
needs `!important`), leaving other ScrollAreas untouched.

Each transfer row is now three lines -- file name, to/from peer, then
time and size -- with the file name and the peer label both truncating
and revealing the full text on hover via TruncatedText. The status label
keeps its own right-hand column, vertically centred against the block,
so a refusal or failure stays scannable.

The Files page could not start a transfer at all: the send buttons lived
only on the peer detail panel, and an empty history replaced the whole
page, hiding the header. The header now always renders and carries one
primary Send button opening a two-step picker -- payload first, then the
peer list with search. One entry point means the peer list is built in
one place instead of two, and one button leaves the search field room to
survive the longer translations.

Clipboard sends showed nothing before leaving the machine. Both the
picker and the peer panel now preview the text first, and both send the
previewed string rather than re-reading the clipboard, which could have
changed between the preview and the confirmation. The picker disables
its clipboard entry when the clipboard is empty, so the failure surfaces
before the recipient is chosen. PeerSendActions is keyed on the peer so
a staged confirmation cannot carry over to a different recipient.

Deleting a history entry now asks first, reusing the app-wide useConfirm
hook. The wording states that received files stay on disk, matching what
DeleteTransfer does -- it drops the history record and cancels a live
transfer, and never touches delivered files. The dropdown is
modal={false} because DropdownMenuItem calls preventDefault, which keeps
a modal menu's focus trap alive against the dialog.

client/ui/frontend/src/components/ClipboardPreview.tsx

@@ -0,0 +1,40 @@
+import { useTranslation } from "react-i18next";
+import { cn } from "@/lib/cn";
+import { formatBytes } from "@/lib/formatters";
+
+// Enough to recognise which snippet is on the clipboard without turning the
+// preview into a text editor; the box clamps to three lines on top of this.
+const PREVIEW_CHARS = 280;
+
+export const ClipboardPreview = ({ text, className }: { text: string; className?: string }) => {
+    const { t } = useTranslation();
+    const clipped = text.length > PREVIEW_CHARS;
+    const bytes = new TextEncoder().encode(text).length;
+
+    return (
+        <div
+            role={"group"}
+            aria-label={t("files.send.clipboardPreview")}
+            className={cn(
+                "flex flex-col gap-1 rounded-md px-2 py-1.5",
+                "border border-nb-gray-850 bg-nb-gray-930",
+                className,
+            )}
+        >
+            <p
+                className={cn(
+                    "m-0 whitespace-pre-wrap break-words text-[0.7rem] leading-snug",
+                    "italic text-nb-gray-300",
+                    // Three lines keeps the box from crowding out whatever it
+                    // is embedded in.
+                    "line-clamp-3",
+                )}
+            >
+                {clipped ? `${text.slice(0, PREVIEW_CHARS)}…` : text}
+            </p>
+            <span className={"self-end text-[0.65rem] tabular-nums text-nb-gray-500"}>
+                {formatBytes(bytes)}
+            </span>
+        </div>
+    );
+};

client/ui/frontend/src/components/buttons/Button.tsx

@@ -91,6 +91,11 @@ const buttonVariants = cva(
                 danger: [
                     "dark:bg-red-600 dark:text-red-100 dark:hover:border-red-800/50 hover:dark:bg-red-700 dark:focus:bg-red-700 dark:focus:ring-red-700/20",
                 ],
+                yellow: [
+                    "enabled:bg-yellow-300 enabled:text-yellow-900 enabled:hover:bg-yellow-200 enabled:focus:ring-yellow-300/50",
+                    "dark:ring-offset-neutral-950/50 dark:focus:ring-yellow-300/40",
+                    "enabled:dark:bg-yellow-300 enabled:dark:text-yellow-900 enabled:dark:hover:bg-yellow-200 disabled:dark:bg-nb-gray-900",
+                ],
             },
             size: {
                 xs: "px-3.5 py-2.5 text-xs",