diff --git a/src/extensions/titlebar/buttons.mjs b/src/extensions/titlebar/buttons.mjs index 9786d93..cefa051 100644 --- a/src/extensions/titlebar/buttons.mjs +++ b/src/extensions/titlebar/buttons.mjs @@ -15,20 +15,24 @@ const minimizeLabel = "Minimize window", closeLabel = "Close window"; const createWindowButtons = () => { - const { html } = globalThis.__enhancerApi, + const { html, sendMessage, invokeInWorker } = globalThis.__enhancerApi, $minimize = html`<${TopbarButton} + onclick=${() => sendMessage("notion-enhancer:titlebar", "minimize")} aria-label="${minimizeLabel}" icon="minus" />`, $maximize = html`<${TopbarButton} + onclick=${() => sendMessage("notion-enhancer:titlebar", "maximize")} aria-label="${maximizeLabel}" icon="maximize" />`, $unmaximize = html`<${TopbarButton} + onclick=${() => sendMessage("notion-enhancer:titlebar", "unmaximize")} aria-label="${unmaximizeLabel}" icon="minimize" />`, $close = html`<${TopbarButton} + onclick=${() => sendMessage("notion-enhancer:titlebar", "close")} class="!hover:(bg-red-600 text-white)" aria-label="${closeLabel}" icon="x" @@ -37,6 +41,17 @@ const createWindowButtons = () => { html`<${Tooltip}>${maximizeLabel}/>`.attach($maximize, "bottom"); html`<${Tooltip}>${unmaximizeLabel}/>`.attach($unmaximize, "bottom"); html`<${Tooltip}>${closeLabel}/>`.attach($close, "bottom"); + + const resizeWindow = async () => { + const isMaximized = await invokeInWorker("notion-enhancer:titlebar", { + query: "is-maximized", + }); + $maximize.style.display = isMaximized ? "none" : ""; + $unmaximize.style.display = isMaximized ? "" : "none"; + }; + window.addEventListener("resize", resizeWindow); + resizeWindow(); + return html`