lda.chat/lda-wf
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: unify presentation pairing surface

Browse Source
This commit is contained in:
lda
2026-07-14 14:20:39 +07:00 Verified
parent eb36e97bb0
commit d0f9e0ee3c
3 changed files with 27 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/apps/console/src/presentation/sync/PresentationPairingPanel.test.tsx
+14
View File
@@ -72,6 +72,20 @@ describe("PresentationPairingPanel", () => {
expect(screen.getByRole("button", { name: "Join session" })).toBeInTheDocument(); expect(screen.getByRole("button", { name: "Join session" })).toBeInTheDocument();
}); });
it("gives expanded state one root surface owner without a double-card contract", () => {
renderPanel("presenter", connectedState());
const panel = screen.getByRole("complementary", {
name: "Presentation pairing",
});
expect(panel).toHaveAttribute("data-surface-owner", "root");
expect(panel.querySelectorAll("[data-surface-owner]")).toHaveLength(0);
expect(panel.querySelector(".presentation-pairing__trigger"))
.not.toHaveAttribute("data-surface-owner");
expect(panel.querySelector(".presentation-pairing__body"))
.not.toHaveAttribute("data-surface-owner");
});
it("disables creation and joining controls while an operation is in flight", () => { it("disables creation and joining controls while an operation is in flight", () => {
const { rerender } = renderPanel("presenter", { kind: "creating" }); const { rerender } = renderPanel("presenter", { kind: "creating" });
expect(screen.getByRole("button", { name: "Start session" })).toBeDisabled(); expect(screen.getByRole("button", { name: "Start session" })).toBeDisabled();
web/apps/console/src/presentation/sync/PresentationPairingPanel.tsx
+2
View File
@@ -88,6 +88,7 @@ export const PresentationPairingPanel = ({
const inputCode = state.kind === "joining" ? state.code : code; const inputCode = state.kind === "joining" ? state.code : code;
const normalizedInputCode = normalizeJoinCode(inputCode); const normalizedInputCode = normalizeJoinCode(inputCode);
// Lifecycle and error states reopen after transitions so recovery and end details remain reachable despite manual collapse.
useEffect(() => { useEffect(() => {
if (state.kind !== "standalone") setIsOpen(true); if (state.kind !== "standalone") setIsOpen(true);
}, [state.kind]); }, [state.kind]);
@@ -129,6 +130,7 @@ export const PresentationPairingPanel = ({
data-open={isOpen} data-open={isOpen}
data-role={role} data-role={role}
data-state={state.kind} data-state={state.kind}
data-surface-owner={isOpen ? "root" : "trigger"}
aria-label="Presentation pairing" aria-label="Presentation pairing"
> >
<button <button
web/apps/console/src/presentation/sync/presentation-sync.css
+11 -4
View File
@@ -8,8 +8,13 @@
font-family: var(--font-interface, "Source Sans 3", sans-serif); font-family: var(--font-interface, "Source Sans 3", sans-serif);
} }
.presentation-pairing__trigger, .presentation-pairing[data-surface-owner="root"] {
.presentation-pairing__body { border: 1px solid color-mix(in oklch, var(--color-editorial-ink, #20201e) 28%, transparent);
background: var(--color-editorial-paper, #f7f7f5);
box-shadow: 0 0.45rem 1.5rem rgb(32 32 30 / 12%);
}
.presentation-pairing[data-surface-owner="trigger"] .presentation-pairing__trigger {
border: 1px solid color-mix(in oklch, var(--color-editorial-ink, #20201e) 28%, transparent); border: 1px solid color-mix(in oklch, var(--color-editorial-ink, #20201e) 28%, transparent);
background: var(--color-editorial-paper, #f7f7f5); background: var(--color-editorial-paper, #f7f7f5);
box-shadow: 0 0.45rem 1.5rem rgb(32 32 30 / 12%); box-shadow: 0 0.45rem 1.5rem rgb(32 32 30 / 12%);
@@ -22,6 +27,9 @@
width: 100%; width: 100%;
gap: 1rem; gap: 1rem;
padding: 0.65rem 0.8rem; padding: 0.65rem 0.8rem;
border: 0;
background: transparent;
box-shadow: none;
color: inherit; color: inherit;
font: 700 0.85rem/1.1 var(--font-interface, "Source Sans 3", sans-serif); font: 700 0.85rem/1.1 var(--font-interface, "Source Sans 3", sans-serif);
text-align: left; text-align: left;
@@ -40,7 +48,6 @@
} }
.presentation-pairing__body { .presentation-pairing__body {
margin-bottom: 0.35rem;
padding: 0.85rem; padding: 0.85rem;
} }
@@ -71,7 +78,7 @@
padding-top: 0.8rem; padding-top: 0.8rem;
} }
.presentation-pairing button, .presentation-pairing__body button,
.presentation-pairing input { .presentation-pairing input {
min-height: 2.25rem; min-height: 2.25rem;
border: 1px solid color-mix(in oklch, var(--color-editorial-ink, #20201e) 32%, transparent); border: 1px solid color-mix(in oklch, var(--color-editorial-ink, #20201e) 32%, transparent);