maj/EditorTemplate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add center-only bottom panel layout toggle

Browse Source
This commit is contained in:
v0
2026-09-09 19:46:50 +00:00
committed by Tom Hicks
parent 3f560b1771
commit 80133bb2cc
1 changed files with 53 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
app/page.tsx
View File

@@ -134,6 +134,20 @@ const mockMenuItems: MenuItem[] = [
},
],
},
{
id: "layout",
label: "Layout",
icon: <PanelBottom className="h-4 w-4" />,
isExpanded: true,
children: [
{
id: "center-only-bottom",
label: "Bottom panel under center only",
isChecked: false,
onClick: () => console.log("Center-only bottom panel toggled"),
},
],
},
{
id: "hidden-item",
label: "This should be hidden",
@@ -247,6 +261,7 @@ export default function VisualNovelEditor() {
const [leftPanelWidth, setLeftPanelWidth] = useState(300)
const [rightPanelWidth, setRightPanelWidth] = useState(300)
const [bottomPanelHeight, setBottomPanelHeight] = useState(200)
const [centerOnlyBottomPanel, setCenterOnlyBottomPanel] = useState(false)
// Track when panels are transitioning to enable/disable transitions
const [leftPanelTransitioning, setLeftPanelTransitioning] = useState(false)
@@ -297,6 +312,22 @@ export default function VisualNovelEditor() {
}
const handleMenuItemClick = (item: MenuItem) => {
if (item.id === "center-only-bottom") {
setCenterOnlyBottomPanel((current) => !current)
setMenuItems((items) =>
items.map((menuItem) =>
menuItem.id === "layout"
? {
...menuItem,
children: menuItem.children?.map((child) =>
child.id === "center-only-bottom" ? { ...child, isChecked: !centerOnlyBottomPanel } : child,
),
}
: menuItem,
),
)
return
}
console.log("Menu item clicked:", item.label)
}
@@ -345,16 +376,22 @@ export default function VisualNovelEditor() {
<div className="flex-1 flex flex-col min-h-0 overflow-hidden">
{/* Top Section - Left, Main, Right Panels */}
<div
className="flex flex-1 min-h-0 overflow-hidden"
className="flex-1 min-h-0 overflow-hidden"
style={{
height: bottomPanelVisible ? `calc(100% - ${bottomPanelHeight}px)` : "100%",
transition: bottomPanelTransitioning ? `height ${PANEL_TRANSITION_DURATION} ease-in-out` : "none",
display: "grid",
gridTemplateColumns: `${leftPanelVisible ? `${leftPanelWidth}px` : "0px"} minmax(0, 1fr) ${rightPanelVisible ? `${rightPanelWidth}px` : "0px"}`,
gridTemplateRows: centerOnlyBottomPanel
? `minmax(0, 1fr) ${bottomPanelVisible ? `${bottomPanelHeight}px` : "0px"}`
: "minmax(0, 1fr)",
transition: bottomPanelTransitioning ? `grid-template-rows ${PANEL_TRANSITION_DURATION} ease-in-out` : "none",
}}
>
{/* Left Panel - Node Tree */}
<div
className="bg-muted/30 border-r overflow-hidden flex-shrink-0"
className="bg-muted/30 border-r overflow-hidden min-w-0"
style={{
gridColumn: 1,
gridRow: centerOnlyBottomPanel ? "1 / 3" : "1",
width: leftPanelVisible ? `${leftPanelWidth}px` : "0px",
transition: leftPanelTransitioning ? `width ${PANEL_TRANSITION_DURATION} ease-in-out` : "none",
}}
@@ -392,7 +429,10 @@ export default function VisualNovelEditor() {
</div>
{/* Main Panel */}
<div className="flex-1 flex flex-col relative min-w-0 overflow-hidden">
<div
className="flex min-w-0 flex-col relative overflow-hidden"
style={{ gridColumn: 2, gridRow: 1 }}
>
<div className="h-full flex flex-col p-4">
{/* Action Buttons */}
{selectedNode && selectedNode.actions.length > 0 && (
@@ -436,8 +476,10 @@ export default function VisualNovelEditor() {
{/* Right Panel - Info */}
<div
className="bg-muted/30 border-l overflow-hidden flex-shrink-0"
className="bg-muted/30 border-l overflow-hidden min-w-0"
style={{
gridColumn: 3,
gridRow: centerOnlyBottomPanel ? "1 / 3" : "1",
width: rightPanelVisible ? `${rightPanelWidth}px` : "0px",
transition: rightPanelTransitioning ? `width ${PANEL_TRANSITION_DURATION} ease-in-out` : "none",
}}
@@ -479,12 +521,13 @@ export default function VisualNovelEditor() {
</ResizablePanel>
</div>
</div>
</div>
{/* Bottom Panel - Object Properties (Full Width) */}
{/* Bottom Panel - Object Properties */}
<div
className="bg-muted/30 border-t overflow-hidden flex-shrink-0"
className="bg-muted/30 border-t overflow-hidden min-h-0"
style={{
gridColumn: centerOnlyBottomPanel ? 2 : "1 / -1",
gridRow: centerOnlyBottomPanel ? 2 : 2,
height: bottomPanelVisible ? `${bottomPanelHeight}px` : "0px",
transition: bottomPanelTransitioning ? `height ${PANEL_TRANSITION_DURATION} ease-in-out` : "none",
}}
@@ -522,6 +565,7 @@ export default function VisualNovelEditor() {
</ResizablePanel>
</div>
</div>
</div>
</div>
</div>
)