36 lines
1.4 KiB
TypeScript
36 lines
1.4 KiB
TypeScript
// SPDX-License-Identifier: LicenseRef-ConusAI-Template-1.0
|
|
"use client"
|
|
|
|
// What the frame leaves to the host: the sidebar's state and the right panel's width. The kit stores
|
|
// nothing; both are preference cookies, so the first paint has them (docs/reference/compliance/cookies-and-storage.md).
|
|
|
|
import { useState } from "react"
|
|
import type { ShellData } from "./document"
|
|
import { PANEL_WIDTH_COOKIE, preferenceCookie, SIDEBAR_COOKIE } from "./preference-cookies"
|
|
|
|
export interface FrameLayout {
|
|
readonly sidebarOpen: boolean
|
|
onSidebarOpenChange(open: boolean): void
|
|
readonly panelWidth?: number
|
|
onPanelWidthChange(width: number): void
|
|
}
|
|
|
|
export function useFrameLayout(shell: Pick<ShellData, "sidebarOpen" | "panelWidth">): FrameLayout {
|
|
const [sidebarOpen, setSidebarOpen] = useState(shell.sidebarOpen)
|
|
const [panelWidth, setPanelWidth] = useState(shell.panelWidth)
|
|
return {
|
|
sidebarOpen,
|
|
onSidebarOpenChange(open) {
|
|
setSidebarOpen(open)
|
|
// biome-ignore lint/suspicious/noDocumentCookie: a preference cookie of a few bytes; the Cookie Store API is not in every browser this app serves
|
|
document.cookie = preferenceCookie(SIDEBAR_COOKIE, open ? "open" : "closed")
|
|
},
|
|
...(panelWidth === undefined ? {} : { panelWidth }),
|
|
onPanelWidthChange(width) {
|
|
setPanelWidth(width)
|
|
// biome-ignore lint/suspicious/noDocumentCookie: as above
|
|
document.cookie = preferenceCookie(PANEL_WIDTH_COOKIE, String(width))
|
|
},
|
|
}
|
|
}
|