tuiboard 0.9.0 → 0.9.1

package/CHANGELOG.md

@@ -7,6 +7,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.9.1] - 2026-09-08
+
+### Fixed
+- **Modals were unreadable in single-pane.** With one zone filling the screen a
+  dialog floated over it as an absolute overlay — and had nothing to paint over,
+  because the theme leaves panel backgrounds transparent so the terminal shows
+  through. The keyboard reference interleaved with the pane character by
+  character; the new-task and edit dialogs were effectively invisible. A modal
+  now takes the pane's place, exactly as the four-zone layout drops it into the
+  Agenda's slot: with one zone on screen, that zone *is* the slot.
+- **A dialog standing in for a pane now fills it**, in both axes, like the zone
+  it replaces — instead of keeping a slot-sized box while the rest of the strip
+  sits empty, which read as a window that had failed to open. In the four-zone
+  layout it still matches the Agenda's slot to the cell, or the whole dashboard
+  would shift when a modal opens; verified by the frame borders landing on
+  identical columns with and without a modal.
+
 ## [0.9.0] - 2026-09-08
 
 ### Added
@@ -273,6 +290,7 @@ First public release on npm. This entry captures the full feature set at launch.
 
 Built with [OpenTUI](https://opentui.com) + SolidJS on Bun.
 
+[0.9.1]: https://github.com/NazzarenoGiannelli/tuiboard/releases/tag/v0.9.1
 [0.9.0]: https://github.com/NazzarenoGiannelli/tuiboard/releases/tag/v0.9.0
 [0.8.5]: https://github.com/NazzarenoGiannelli/tuiboard/releases/tag/v0.8.5
 [0.8.4]: https://github.com/NazzarenoGiannelli/tuiboard/releases/tag/v0.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuiboard",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Terminal kanban for markdown task boards, with optional Today/Tomorrow planner, 24h agenda + calendar overlay, and a live Claude Code agent view. Use only the panels you want.",
   "type": "module",
   "license": "MIT",

package/src/ui/Modal.tsx

@@ -11,7 +11,7 @@
  * checks `ui.modal` first and bails if set (only Escape passes through).
  */
 
-import { For, Show, createMemo, createSignal } from "solid-js";
+import { For, Show, createContext, createMemo, createSignal, useContext } from "solid-js";
 
 import { isTask } from "~/parser/markdown";
 import {
@@ -29,14 +29,23 @@ import type { PriorityLevel, TimeBlock } from "~/types";
  *  slot (the Dashboard renders it there while a modal is open) with no reflow. */
 const MODAL_WIDTH = AGENDA_WIDTH;
 
+/**
+ * Whether the dialog is standing in for a whole pane (single-pane) or sitting
+ * in the Agenda's slot (four-zone). It decides how wide the dialog may be, and
+ * only ModalLayer is in a position to know.
+ */
+const SinglePaneContext = createContext<() => boolean>(() => false);
+
 export function ModalLayer(props: { store: TuiStore }) {
   const modal = createMemo(() => props.store.state.ui.modal);
   return (
+    <SinglePaneContext.Provider value={() => props.store.singlePane()}>
     <Show when={modal()}>
       {/* Each modal's DialogShell IS the panel box (border + title + slot
           dimensions), so it drops into the Agenda's slot directly. */}
       <ModalRouter store={props.store} modal={modal()!} />
     </Show>
+    </SinglePaneContext.Provider>
   );
 }
 
@@ -194,7 +203,30 @@ function BoardNewModal(props: { store: TuiStore }) {
   );
 }
 
+/**
+ * How wide the dialog may be.
+ *
+ * In the four-zone layout it takes the Agenda's slot and must match it to the
+ * cell, or the whole dashboard shifts when a modal opens — that invariant is
+ * why the requested width used to be ignored outright. In single-pane the
+ * dialog takes a whole pane's place instead, so there it can use what the
+ * terminal actually offers: the keyboard reference asks for 92 columns and is
+ * unreadable squeezed into 50, while a 60-column strip needs it to shrink
+ * rather than overflow.
+ */
+function dialogWidth(singlePane: boolean): number {
+  if (!singlePane) return MODAL_WIDTH;
+  // Standing in for a pane means behaving like one: take the strip. A dialog
+  // that keeps its slot-sized box while the rest of the screen sits empty
+  // reads as a window that failed to open, not as a panel.
+  const terminal = process.stdout.columns ?? 80;
+  return Math.max(20, terminal - 4);
+}
+
 function DialogShell(props: DialogShellProps) {
+  const singlePane = useContext(SinglePaneContext);
+  const width = () => dialogWidth(singlePane());
+  // `width` survives as the four-zone hint it always was; single-pane fills.
   void props.width;
   return (
     <box
@@ -204,9 +236,12 @@ function DialogShell(props: DialogShellProps) {
         // slot at the exact same size and the dashboard doesn't shift when a
         // modal opens. The title rides in the top border like the columns/zones.
         flexDirection: "column",
-        width: MODAL_WIDTH,
-        minWidth: MODAL_WIDTH,
-        flexGrow: 0,
+        width: width(),
+        minWidth: Math.min(MODAL_WIDTH, width()),
+        // In the Agenda's slot the box must not grow, or the dashboard shifts.
+        // Filling a pane, it must — in both axes, like the zone it replaces.
+        flexGrow: singlePane() ? 1 : 0,
+        height: singlePane() ? "100%" : undefined,
         marginLeft: 1,
         backgroundColor: T.panelBgActive,
         border: true,

package/src/views/Dashboard.tsx

@@ -55,17 +55,19 @@ export function Dashboard(props: { store: TuiStore }) {
  * zone of the normal layout and BoardOnly already respects ui.zoomed
  * to render only the active panel between them.
  *
- * Modals: the normal layout drops them into the Agenda's slot, which doesn't
- * exist while zoomed — so here the modal floats as a centered absolute overlay
- * on top of the zoomed view. The user stays zoomed; close the modal and the
- * zoomed view is exactly as they left it (no exit-zoom / re-zoom flip).
+ * Modals take the pane's place, exactly as the four-zone layout drops them
+ * into the Agenda's slot: with one zone filling the screen, that zone IS the
+ * slot. They used to float as an absolute overlay, which had nothing to paint
+ * over — the theme leaves panel backgrounds transparent so the terminal shows
+ * through — so the dialog's text interleaved with the pane underneath and both
+ * became unreadable. Closing returns to the pane exactly as it was.
  */
 function ZoomedLayout(props: { store: TuiStore }) {
   const ui = () => props.store.state.ui;
   const zone = () => ui().activeZone;
 
   return (
-    <>
+    <Show when={ui().modal} fallback={
       <Show when={zone() === "timeline"} fallback={
         <Show when={zone() === "agents"} fallback={<BoardOnly store={props.store} />}>
           <AgentsOnly store={props.store} />
@@ -73,27 +75,9 @@ function ZoomedLayout(props: { store: TuiStore }) {
       }>
         <TimelineOnly store={props.store} />
       </Show>
-      {/* Modal overlay — only while zoomed AND a modal is open. Absolute + high
-          zIndex so it paints over the zoomed view; centered; transparent
-          backdrop so the board stays visible behind the (opaque) modal panel. */}
-      <Show when={ui().modal}>
-        <box
-          style={{
-            position: "absolute",
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            zIndex: 100,
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center",
-          }}
-        >
-          <ModalLayer store={props.store} />
-        </box>
-      </Show>
-    </>
+    }>
+      <ModalLayer store={props.store} />
+    </Show>
   );
 }