Mobile message compose + WidgetConfigDialog SheetForms (Slice 8)
Below md, both the message-compose Dialog and the WidgetConfigDialog
render inside a SheetForm instead of a centered Dialog.
Message compose (UsersPage.impl.tsx): the form body (subject, formatting
toolbar, HTML textarea, preview, attachments) is extracted into a shared
composeBody const consumed by both SheetForm (mobile) and Dialog
(desktop). SheetForm wired with title, onSave=handleSend (which already
closes on success per R4.5), onCancel=closeCompose, isPending,
saveDisabled, saveLabel='Send message'.
WidgetConfigDialog: the draftBody const is shared between branches. The
two-mode flow (list vs draft) maps to dynamic SheetForm props -- list
mode ('Dashboard widgets' / Done / Cancel both close), draft mode
('Add/Edit widget' / Save widget / Cancel=reset back to list). The
inline Back/Save buttons are hidden on mobile (!isMobile) since the
SheetForm footer provides them.
Desktop (md+) is token-identical for both components -- the
isComposeMobile (900px) fullscreen styling on compose is preserved for
the 768-900px band. The large diff (~860 lines) is dominated by
extraction/re-indentation of shared form bodies into consts; the
behavioral delta is ~80 lines.
Tests: 3 new (compose mobile send/subject, WidgetConfigDialog desktop +
mobile titles/Done). 116 tests pass; lint/build green.
Refs openspec/changes/mobile-responsive-parity/ (spec R4, tasks slice 8).
This commit is contained in:
Developer
@@ -40,6 +40,7 @@ import {
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { Sheet, SheetContent } from "@/components/ui/sheet";
|
||||
import { SheetForm } from "@/components/ui/sheet-form";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
@@ -813,229 +814,262 @@ export function UsersPage() {
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
|
||||
<Dialog
|
||||
open={composeOpen}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
closeCompose();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogContent
|
||||
className={cn(
|
||||
"flex max-h-[90dvh] flex-col gap-0 overflow-hidden p-0 sm:max-w-2xl",
|
||||
isComposeMobile &&
|
||||
"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>
|
||||
Unable to send message:{" "}
|
||||
{(sendUserMessage.error as Error)?.message || "Unknown error"}
|
||||
</AlertDescription>
|
||||
</UIAlert>
|
||||
{/* Compose dialog: SheetForm below md, Dialog at md+ (spec R4.1) */}
|
||||
{(() => {
|
||||
const composeBody = (
|
||||
<>
|
||||
{sendUserMessage.isPending ? (
|
||||
<Progress value={100} className="animate-pulse" />
|
||||
) : null}
|
||||
{sendUserMessage.isSuccess ? (
|
||||
<div className="flex flex-1 flex-col gap-4 overflow-y-auto px-4 py-4">
|
||||
{sendUserMessage.isError ? (
|
||||
<UIAlert variant="destructive">
|
||||
<AlertDescription>
|
||||
Unable to send message:{" "}
|
||||
{(sendUserMessage.error as Error)?.message ||
|
||||
"Unknown error"}
|
||||
</AlertDescription>
|
||||
</UIAlert>
|
||||
) : null}
|
||||
{sendUserMessage.isSuccess ? (
|
||||
<UIAlert>
|
||||
<AlertDescription>
|
||||
Queued for {sendUserMessage.data.recipient_count} recipients
|
||||
{sendUserMessage.data.attachment_count
|
||||
? ` with ${sendUserMessage.data.attachment_count} attachment${sendUserMessage.data.attachment_count === 1 ? "" : "s"}`
|
||||
: ""}
|
||||
{sendUserMessage.data.request_id
|
||||
? ` (request ${sendUserMessage.data.request_id.slice(0, 8)})`
|
||||
: ""}
|
||||
.
|
||||
</AlertDescription>
|
||||
</UIAlert>
|
||||
) : null}
|
||||
|
||||
{queueBanner ? (
|
||||
<UIAlert
|
||||
variant={
|
||||
queueBanner.severity === "error" ? "destructive" : undefined
|
||||
}
|
||||
>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="text-sm font-semibold">
|
||||
{queueBanner.message}
|
||||
</span>
|
||||
<Badge variant="secondary">{queueBanner.countLabel}</Badge>
|
||||
</div>
|
||||
</UIAlert>
|
||||
) : null}
|
||||
|
||||
<UIAlert>
|
||||
<AlertDescription>
|
||||
Queued for {sendUserMessage.data.recipient_count} recipients
|
||||
{sendUserMessage.data.attachment_count
|
||||
? ` with ${sendUserMessage.data.attachment_count} attachment${sendUserMessage.data.attachment_count === 1 ? "" : "s"}`
|
||||
{selectedRows.length} selected,{" "}
|
||||
{selectedDeliverableRows.length} deliverable.
|
||||
{skippedRows.length
|
||||
? ` ${skippedRows.length} will be skipped because they do not have a deliverable email address.`
|
||||
: ""}
|
||||
{sendUserMessage.data.request_id
|
||||
? ` (request ${sendUserMessage.data.request_id.slice(0, 8)})`
|
||||
: ""}
|
||||
.
|
||||
</AlertDescription>
|
||||
</UIAlert>
|
||||
) : null}
|
||||
|
||||
{queueBanner ? (
|
||||
<UIAlert
|
||||
variant={
|
||||
queueBanner.severity === "error" ? "destructive" : undefined
|
||||
}
|
||||
>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="text-sm font-semibold">
|
||||
{queueBanner.message}
|
||||
</span>
|
||||
<Badge variant="secondary">{queueBanner.countLabel}</Badge>
|
||||
</div>
|
||||
</UIAlert>
|
||||
) : null}
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{selectedDeliverableRows.map((row) => (
|
||||
<Badge key={row.jellyfin_id} variant="secondary">
|
||||
{`${userLabel(row)} <${row.email}>`}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<UIAlert>
|
||||
<AlertDescription>
|
||||
{selectedRows.length} selected, {selectedDeliverableRows.length}{" "}
|
||||
deliverable.
|
||||
{skippedRows.length
|
||||
? ` ${skippedRows.length} will be skipped because they do not have a deliverable email address.`
|
||||
: ""}
|
||||
</AlertDescription>
|
||||
</UIAlert>
|
||||
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{selectedDeliverableRows.map((row) => (
|
||||
<Badge key={row.jellyfin_id} variant="secondary">
|
||||
{`${userLabel(row)} <${row.email}>`}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<UiButton
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => insertMarkup("<strong>", "</strong>")}
|
||||
aria-label="Bold"
|
||||
>
|
||||
<Bold />
|
||||
</UiButton>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Bold</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<UiButton
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => insertMarkup("<em>", "</em>")}
|
||||
aria-label="Italic"
|
||||
>
|
||||
<Italic />
|
||||
</UiButton>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Italic</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<UiButton
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={addLink}
|
||||
aria-label="Link"
|
||||
>
|
||||
<Link />
|
||||
</UiButton>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Link</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<UiButton
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => insertMarkup("<ul><li>", "</li></ul>")}
|
||||
aria-label="Bullet list"
|
||||
>
|
||||
<List />
|
||||
</UiButton>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Bullet list</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div className="overflow-hidden rounded-md border bg-card">
|
||||
<iframe
|
||||
title="Email preview"
|
||||
sandbox=""
|
||||
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>body{font-family:Roboto,Arial,sans-serif;padding:16px;margin:0;background:#fff;color:#111;line-height:1.5}</style></head><body>${htmlBody || "<p>(Empty)</p>"}</body></html>`}
|
||||
style={{ width: "100%", minHeight: 220, border: 0 }}
|
||||
<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>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-1">
|
||||
<UiButton asChild variant="outline">
|
||||
<label className="cursor-pointer">
|
||||
<Paperclip />
|
||||
Add attachment
|
||||
<input
|
||||
hidden
|
||||
type="file"
|
||||
multiple
|
||||
onChange={handleAttachments}
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<UiButton
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => insertMarkup("<strong>", "</strong>")}
|
||||
aria-label="Bold"
|
||||
>
|
||||
<Bold />
|
||||
</UiButton>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Bold</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<UiButton
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => insertMarkup("<em>", "</em>")}
|
||||
aria-label="Italic"
|
||||
>
|
||||
<Italic />
|
||||
</UiButton>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Italic</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<UiButton
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={addLink}
|
||||
aria-label="Link"
|
||||
>
|
||||
<Link />
|
||||
</UiButton>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Link</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<UiButton
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => insertMarkup("<ul><li>", "</li></ul>")}
|
||||
aria-label="Bullet list"
|
||||
>
|
||||
<List />
|
||||
</UiButton>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Bullet list</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div className="overflow-hidden rounded-md border bg-card">
|
||||
<iframe
|
||||
title="Email preview"
|
||||
sandbox=""
|
||||
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>body{font-family:Roboto,Arial,sans-serif;padding:16px;margin:0;background:#fff;color:#111;line-height:1.5}</style></head><body>${htmlBody || "<p>(Empty)</p>"}</body></html>`}
|
||||
style={{ width: "100%", minHeight: 220, border: 0 }}
|
||||
/>
|
||||
</label>
|
||||
</UiButton>
|
||||
{attachments.map((file, index) => (
|
||||
<Badge
|
||||
key={`${file.name}-${index}`}
|
||||
variant="secondary"
|
||||
className="gap-1 pr-1"
|
||||
>
|
||||
{file.name}
|
||||
<button
|
||||
type="button"
|
||||
aria-label={`Remove ${file.name}`}
|
||||
onClick={() => removeAttachment(index)}
|
||||
className="inline-flex items-center text-current [&>svg]:size-3"
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-1">
|
||||
<UiButton asChild variant="outline">
|
||||
<label className="cursor-pointer">
|
||||
<Paperclip />
|
||||
Add attachment
|
||||
<input
|
||||
hidden
|
||||
type="file"
|
||||
multiple
|
||||
onChange={handleAttachments}
|
||||
/>
|
||||
</label>
|
||||
</UiButton>
|
||||
{attachments.map((file, index) => (
|
||||
<Badge
|
||||
key={`${file.name}-${index}`}
|
||||
variant="secondary"
|
||||
className="gap-1 pr-1"
|
||||
>
|
||||
<Trash2 />
|
||||
</button>
|
||||
</Badge>
|
||||
))}
|
||||
{file.name}
|
||||
<button
|
||||
type="button"
|
||||
aria-label={`Remove ${file.name}`}
|
||||
onClick={() => removeAttachment(index)}
|
||||
className="inline-flex items-center text-current [&>svg]:size-3"
|
||||
>
|
||||
<Trash2 />
|
||||
</button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</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}
|
||||
</>
|
||||
);
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<SheetForm
|
||||
open={composeOpen}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) closeCompose();
|
||||
}}
|
||||
title="Message selected users"
|
||||
onSave={handleSend}
|
||||
onCancel={closeCompose}
|
||||
isPending={sendUserMessage.isPending}
|
||||
saveDisabled={!selectedDeliverableRows.length || !subject.trim()}
|
||||
saveLabel="Send message"
|
||||
>
|
||||
<Send />
|
||||
Send message
|
||||
</UiButton>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<div className="flex flex-col gap-4">{composeBody}</div>
|
||||
</SheetForm>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={composeOpen}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
closeCompose();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogContent
|
||||
className={cn(
|
||||
"flex max-h-[90dvh] flex-col gap-0 overflow-hidden p-0 sm:max-w-2xl",
|
||||
isComposeMobile &&
|
||||
"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>
|
||||
{composeBody}
|
||||
<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>
|
||||
</Dialog>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user