From 04f2e59c92522b34e87f5220ac41207e3f830cf7 Mon Sep 17 00:00:00 2001
From: Developer <dev@headquarter.local>
Date: Wed, 17 Jun 2026 16:18:49 +0000
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20slice=206b=20=E2=80=94=20User?=
 =?UTF-8?q?s=20compose=20dialog=20+=209=20icons=20(finish=20Users)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Web UI rework. Completes the Users migration (6a directory + 6b compose):
- Compose dialog off @mui: shadcn Dialog family + Input (subject) +
  Textarea (html body) + Separator + Label; IconButton -> Button ghost
- 9 @mui/icons-material -> lucide-react: Close->X, AttachFile->Paperclip,
  FormatBold->Bold, FormatItalic->Italic, Link->Link,
  FormatListBulleted->List, MailOutlined->Mail, Send->Send,
  DeleteOutlined->Trash2
- Rich-text compose parity: markup insertion, attachments (FormData),
  queue-status polling, send via useSendUserMessage
- UsersPage.impl.tsx now has ZERO @mui imports

Gate: build + lint + test green (20 files / 46 tests).
---
 frontend/src/pages/UsersPage.impl.tsx         | 207 ++++++++++--------
 .../src/pages/__tests__/UsersPage.test.tsx    |  44 ++++
 2 files changed, 158 insertions(+), 93 deletions(-)

diff --git a/frontend/src/pages/UsersPage.impl.tsx b/frontend/src/pages/UsersPage.impl.tsx
index 31e8f4c..cc962cd 100644
--- a/frontend/src/pages/UsersPage.impl.tsx
+++ b/frontend/src/pages/UsersPage.impl.tsx
@@ -1,30 +1,32 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import type { ChangeEvent } from "react";
-// Slice 6b owns the compose-dialog STRUCTURE + these icons: Dialog family,
-// TextField, Divider, IconButton (below). Slice 6a migrated the directory
-// surface + drawer AND the compose content's shared leaf components.
-import CloseIcon from "@mui/icons-material/Close";
-import AttachFileIcon from "@mui/icons-material/AttachFile";
-import FormatBoldIcon from "@mui/icons-material/FormatBold";
-import FormatItalicIcon from "@mui/icons-material/FormatItalic";
-import LinkIcon from "@mui/icons-material/Link";
-import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
-import MailOutlinedIcon from "@mui/icons-material/MailOutlined";
-import SendIcon from "@mui/icons-material/Send";
-import DeleteOutlinedIcon from "@mui/icons-material/DeleteOutlined";
+// Slice 6b: compose dialog (shadcn Dialog family) + lucide icons. The file is
+// now fully @mui-free (6a migrated the directory surface, drawer, and the
+// compose content's shared leaf components).
+import {
+	X,
+	Paperclip,
+	Bold,
+	Italic,
+	Link,
+	List,
+	Mail,
+	Send,
+	Trash2,
+} from "lucide-react";
 import {
-	// 6b-owned compose-dialog components only (the contract's narrow @mui set).
-	// Everything else — Alert/Box/Button/Chip/Paper/Stack/Typography/Tooltip/
-	// LinearProgress/useMediaQuery — was migrated to shadcn/Tailwind in 6a.
 	Dialog,
-	DialogActions,
 	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
 	DialogTitle,
-	Divider,
-	IconButton,
-	TextField,
-} from "@mui/material";
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Separator } from "@/components/ui/separator";
+import { Label } from "@/components/ui/label";
 // Slice 6a directory surface + drawer primitives.
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
@@ -456,7 +458,7 @@ export function UsersPage() {
 								disabled={!selectedDeliverableRows.length}
 								onClick={openCompose}
 							>
-								<MailOutlinedIcon />
+								<Mail />
 								Message selected
 							</UiButton>
 							<UiButton
@@ -466,13 +468,12 @@ export function UsersPage() {
 							>
 								Clear selection
 							</UiButton>
-							<TextField
-								size="small"
-								label="Search"
+							<Input
+								aria-label="Search"
 								placeholder="Name, email, role, permission..."
 								value={search}
 								onChange={(event) => setSearch(event.target.value)}
-								sx={{ minWidth: { xs: "100%", sm: 320 } }}
+								className="w-full sm:w-80"
 							/>
 						</div>
 					</div>
@@ -671,7 +672,7 @@ export function UsersPage() {
 									aria-label="Close user details"
 									onClick={() => setSearchParams({})}
 								>
-									<CloseIcon />
+									<X />
 									Close
 								</UiButton>
 							</div>
@@ -743,7 +744,7 @@ export function UsersPage() {
 								</div>
 							</div>
 
-							<Divider />
+							<Separator />
 
 							<p className="text-xs text-muted-foreground">
 								This panel is read-only for now. Communication actions will be
@@ -756,26 +757,29 @@ export function UsersPage() {
 
 			<Dialog
 				open={composeOpen}
-				onClose={closeCompose}
-				fullWidth
-				maxWidth="md"
-				fullScreen={isMobile}
+				onOpenChange={(open) => {
+					if (!open) {
+						closeCompose();
+					}
+				}}
 			>
-				<DialogTitle sx={{ pr: 6 }}>
-					Message selected users
-					<IconButton
-						aria-label="Close compose dialog"
-						onClick={closeCompose}
-						sx={{ position: "absolute", right: 12, top: 12 }}
-					>
-						<CloseIcon />
-					</IconButton>
-				</DialogTitle>
-				{sendUserMessage.isPending ? (
-					<Progress value={100} className="animate-pulse" />
-				) : null}
-				<DialogContent dividers>
-					<div className="flex flex-col gap-4">
+				<DialogContent
+					className={cn(
+						"flex max-h-[90dvh] flex-col gap-0 overflow-hidden p-0 sm:max-w-2xl",
+						isMobile &&
+							"inset-0 max-h-none max-w-none translate-x-0 translate-y-0 rounded-none",
+					)}
+				>
+					<DialogHeader className="gap-1 px-4 pt-4">
+						<DialogTitle className="pr-8">Message selected users</DialogTitle>
+						<DialogDescription className="sr-only">
+							Compose a message to the selected deliverable users.
+						</DialogDescription>
+					</DialogHeader>
+					{sendUserMessage.isPending ? (
+						<Progress value={100} className="animate-pulse" />
+					) : null}
+					<div className="flex flex-1 flex-col gap-4 overflow-y-auto px-4 py-4">
 						{sendUserMessage.isError ? (
 							<UIAlert variant="destructive">
 								<AlertDescription>
@@ -832,67 +836,84 @@ export function UsersPage() {
 							))}
 						</div>
 
-						<TextField
-							label="Subject"
-							fullWidth
-							value={subject}
-							onChange={(event) => setSubject(event.target.value)}
-						/>
+						<div className="flex flex-col gap-1.5">
+							<Label htmlFor="compose-subject">Subject</Label>
+							<Input
+								id="compose-subject"
+								value={subject}
+								onChange={(event) => setSubject(event.target.value)}
+							/>
+						</div>
 
 						<div className="flex flex-wrap gap-1">
 							<Tooltip>
 								<TooltipTrigger asChild>
-									<IconButton
+									<UiButton
+										variant="ghost"
+										size="icon"
 										onClick={() => insertMarkup("<strong>", "</strong>")}
 										aria-label="Bold"
 									>
-										<FormatBoldIcon />
-									</IconButton>
+										<Bold />
+									</UiButton>
 								</TooltipTrigger>
 								<TooltipContent>Bold</TooltipContent>
 							</Tooltip>
 							<Tooltip>
 								<TooltipTrigger asChild>
-									<IconButton
+									<UiButton
+										variant="ghost"
+										size="icon"
 										onClick={() => insertMarkup("<em>", "</em>")}
 										aria-label="Italic"
 									>
-										<FormatItalicIcon />
-									</IconButton>
+										<Italic />
+									</UiButton>
 								</TooltipTrigger>
 								<TooltipContent>Italic</TooltipContent>
 							</Tooltip>
 							<Tooltip>
 								<TooltipTrigger asChild>
-									<IconButton onClick={addLink} aria-label="Link">
-										<LinkIcon />
-									</IconButton>
+									<UiButton
+										variant="ghost"
+										size="icon"
+										onClick={addLink}
+										aria-label="Link"
+									>
+										<Link />
+									</UiButton>
 								</TooltipTrigger>
 								<TooltipContent>Link</TooltipContent>
 							</Tooltip>
 							<Tooltip>
 								<TooltipTrigger asChild>
-									<IconButton
+									<UiButton
+										variant="ghost"
+										size="icon"
 										onClick={() => insertMarkup("<ul><li>", "</li></ul>")}
 										aria-label="Bullet list"
 									>
-										<FormatListBulletedIcon />
-									</IconButton>
+										<List />
+									</UiButton>
 								</TooltipTrigger>
 								<TooltipContent>Bullet list</TooltipContent>
 							</Tooltip>
 						</div>
 
-						<TextField
-							label="HTML message body"
-							multiline
-							minRows={10}
-							fullWidth
-							value={htmlBody}
-							inputRef={htmlBodyRef}
-							onChange={(event) => setHtmlBody(event.target.value)}
-							helperText="Formatting is sent as HTML; a plain-text fallback is generated automatically."
-						/>
+						<div className="flex flex-col gap-1.5">
+							<Label htmlFor="compose-body">HTML message body</Label>
+							<Textarea
+								id="compose-body"
+								ref={htmlBodyRef}
+								value={htmlBody}
+								onChange={(event) => setHtmlBody(event.target.value)}
+								className="min-h-[260px] font-mono"
+							/>
+							<p className="text-xs text-muted-foreground">
+								Formatting is sent as HTML; a plain-text fallback is generated
+								automatically.
+							</p>
+						</div>
 
 						<div className="rounded-lg border bg-muted/40 p-4">
 							<p className="mb-2 text-sm font-semibold">Preview</p>
@@ -909,7 +930,7 @@ export function UsersPage() {
 						<div className="flex flex-wrap items-center gap-1">
 							<UiButton asChild variant="outline">
 								<label className="cursor-pointer">
-									<AttachFileIcon />
+									<Paperclip />
 									Add attachment
 									<input
 										hidden
@@ -932,30 +953,30 @@ export function UsersPage() {
 										onClick={() => removeAttachment(index)}
 										className="inline-flex items-center text-current [&>svg]:size-3"
 									>
-										<DeleteOutlinedIcon />
+										<Trash2 />
 									</button>
 								</Badge>
 							))}
 						</div>
 					</div>
+					<DialogFooter className="m-0 border-t p-4">
+						<UiButton variant="ghost" onClick={closeCompose}>
+							Cancel
+						</UiButton>
+						<UiButton
+							variant="default"
+							disabled={
+								sendUserMessage.isPending ||
+								!selectedDeliverableRows.length ||
+								!subject.trim()
+							}
+							onClick={handleSend}
+						>
+							<Send />
+							Send message
+						</UiButton>
+					</DialogFooter>
 				</DialogContent>
-				<DialogActions sx={{ px: 3, py: 2 }}>
-					<UiButton variant="ghost" onClick={closeCompose}>
-						Cancel
-					</UiButton>
-					<UiButton
-						variant="default"
-						disabled={
-							sendUserMessage.isPending ||
-							!selectedDeliverableRows.length ||
-							!subject.trim()
-						}
-						onClick={handleSend}
-					>
-						<SendIcon />
-						Send message
-					</UiButton>
-				</DialogActions>
 			</Dialog>
 		</div>
 	);
diff --git a/frontend/src/pages/__tests__/UsersPage.test.tsx b/frontend/src/pages/__tests__/UsersPage.test.tsx
index a2129a0..3bebc5e 100644
--- a/frontend/src/pages/__tests__/UsersPage.test.tsx
+++ b/frontend/src/pages/__tests__/UsersPage.test.tsx
@@ -2,6 +2,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { UsersPage } from "../UsersPage.impl";
+import { TooltipProvider } from "../../components/ui/tooltip";
 import type {
 	NowPlayingSession,
 	UserDirectoryItem,
@@ -23,6 +24,14 @@ beforeEach(() => {
 			dispatchEvent: () => false,
 		})) as unknown as typeof window.matchMedia;
 	}
+	// The compose formatting actions defer a focus/selection restore via
+	// requestAnimationFrame (see insertMarkup). jsdom may not flush rAF
+	// synchronously, so make it synchronous so the slice-6b compose test can
+	// observe the html-body value update.
+	window.requestAnimationFrame = ((cb: FrameRequestCallback) => {
+		cb(0);
+		return 0;
+	}) as typeof window.requestAnimationFrame;
 });
 
 // Keep the drawer's nested session panel out of the DOM under test.
@@ -239,3 +248,38 @@ describe("UsersPage (slice 6a — directory surface + drawer)", () => {
 		expect(screen.getByTestId("session-panel-stub")).toBeInTheDocument();
 	});
 });
+
+describe("UsersPage (slice 6b — compose dialog formatting actions)", () => {
+	it("opens compose and inserts bold markup into the html body", async () => {
+		users = [userFixture({ jellyfin_id: "u1", display_name: "Alice" })];
+		// The formatting toolbar renders <Tooltip> (shadcn), which in the app is
+		// wrapped by a global <TooltipProvider> in App.tsx; supply it here.
+		render(
+			<TooltipProvider>
+				<UsersPage />
+			</TooltipProvider>,
+		);
+
+		// Select a deliverable user so the "Message selected" button enables.
+		await userEvent.click(
+			screen.getByRole("checkbox", { name: "Select Alice" }),
+		);
+		await userEvent.click(
+			screen.getByRole("button", { name: "Message selected" }),
+		);
+
+		// Compose dialog opens (shadcn Dialog family).
+		expect(
+			screen.getByRole("heading", { name: "Message selected users" }),
+		).toBeInTheDocument();
+
+		// Bold action wraps the cursor selection in <strong></strong> via the
+		// preserved insertMarkup helper (markup insertion actions parity).
+		await userEvent.click(screen.getByRole("button", { name: "Bold" }));
+
+		const body = screen.getByRole("textbox", {
+			name: "HTML message body",
+		}) as HTMLTextAreaElement;
+		expect(body.value).toContain("<strong>");
+	});
+});