27 lines
1 KiB
TypeScript
27 lines
1 KiB
TypeScript
import { create } from 'zustand';
|
|
import { persist } from 'zustand/middleware';
|
|
|
|
export type Side = 'left' | 'right';
|
|
|
|
interface Layout {
|
|
collapsed: Record<Side, boolean>;
|
|
toggle: (side: Side) => void;
|
|
/** Expand the panel if it is collapsed: an action that leads INTO the panel must show it. */
|
|
expand: (side: Side) => void;
|
|
}
|
|
|
|
// The state of the interface lives in zustand (STACK_DECISIONS §1). The sizes of the panels are
|
|
// persisted by react-resizable-panels itself; here only the collapsedness — without persisting it
|
|
// would reset on a reload, while the sizes of the neighbouring panels would not, and the layout
|
|
// would come back half someone else's.
|
|
export const useLayout = create<Layout>()(
|
|
persist(
|
|
(set) => ({
|
|
collapsed: { left: false, right: false },
|
|
toggle: (side) =>
|
|
set((state) => ({ collapsed: { ...state.collapsed, [side]: !state.collapsed[side] } })),
|
|
expand: (side) => set((state) => ({ collapsed: { ...state.collapsed, [side]: false } })),
|
|
}),
|
|
{ name: 'textmachine:panels' },
|
|
),
|
|
);
|