jcoffey-dev
5855da0ba9
A maximised composer goes position: fixed but stays a child of the dock, and had no z-index of its own. The dock is a stacking context, so the positioned parts of any composer later in the DOM (its recipients row, its editor) painted straight over the full-screen one. Give the maximised composer its own layer, and hide the other composers while one is full screen: they cannot be reached anyway, and the 24px inset would otherwise show their footers along the bottom edge. They stay mounted, so nothing being written in them is lost. Fixes #330
22 lines
943 B
TypeScript
22 lines
943 B
TypeScript
import { useCompose } from "@/store/compose";
|
|
import { Composer } from "./Composer";
|
|
import { useIsMobile } from "@/ui/misc";
|
|
|
|
export function ComposerDock() {
|
|
const drafts = useCompose((s) => s.drafts);
|
|
const activeKey = useCompose((s) => s.activeKey);
|
|
const isMobile = useIsMobile();
|
|
if (!drafts.length) return null;
|
|
// On mobile only the active composer is shown (full screen); others are minimized bars.
|
|
const visible = isMobile ? drafts.filter((d) => d.key === activeKey || d.minimized) : drafts;
|
|
// On desktop a full-screen composer stands alone: the rest are hidden until it is restored.
|
|
const hasMaximized = !isMobile && drafts.some((d) => d.maximized && !d.minimized);
|
|
return (
|
|
<div className={`composer-dock${hasMaximized ? " has-maximized" : ""}`}>
|
|
{visible.map((d) => (
|
|
<Composer key={d.key} draft={isMobile && d.key !== activeKey ? { ...d, minimized: true } : d} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|