zidane-ui 9.1.3 → 9.1.5

package/dist/session/ProjectHome.js

@@ -7,6 +7,8 @@ import { PanelContentView } from "../workspace/PanelContentView.js";
 import { useExtensionPanels } from "../workspace/WorkspaceProvider.js";
 import { ExtensionSlot } from "../extensions/ExtensionSlot.js";
 import { ProjectMenu } from "../chat/composer/ProjectMenu.js";
+import { PanelGlyph } from "../workspace/PanelGlyph.js";
+import { appendPanelPage } from "../workspace/headless/pages.js";
 import { EMPTY_HOME_PREFS, arrangeHomeBlocks, hideHomeBlock, homeBlocksOf, homeRows, moveHomeBlock, parseHomePrefs, placeHomeBlock, setHomeBlockView, setHomeBlockWidth, showHomeBlock } from "./headless/home-layout.js";
 import { useUsageSummary } from "./useUsageSummary.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -39,7 +41,7 @@ function useHomePrefs(projectKey) {
 *
 * @param props - The {@link ProjectHomeProps}.
 */
-function ProjectHome({ panels, cwd, projectKey, project, switcher, blocksUnavailable = false, defaultBlocks, onOpenSession, onOpenPath, onOpenRepo, onOpenFiles, onRevealPath, onOpenInEditor, now: nowProp, className = "", style }) {
+function ProjectHome({ panels, cwd, projectKey, project, switcher, blocksUnavailable = false, defaultBlocks, onOpenSession, onOpenPath, onStartSession, onOpenRepo, onOpenFiles, onRevealPath, onOpenInEditor, now: nowProp, className = "", style }) {
 	const labels = useSessionLabels();
 	const catalog = useExtensionPanels(panels, panels ? cwd : null);
 	const blocks = useMemo(() => homeBlocksOf(catalog), [catalog]);
@@ -89,7 +91,8 @@ function ProjectHome({ panels, cwd, projectKey, project, switcher, blocksUnavail
 		onHide: hide,
 		onView: setView,
 		onOpenSession,
-		onOpenPath
+		onOpenPath,
+		onStartSession
 	}, block.id);
 	let index = 0;
 	return /* @__PURE__ */ jsxs("div", {
@@ -313,10 +316,14 @@ function CustomizeControls({ editing, onEditing, hidden, onShow }) {
 * the window comes back after `BLOCK_STALE_MS` (nothing while nobody looks).
 * A slower answer for an older view never lands over a newer one.
 */
-function useHomeBlock(panels, cwd, id, view) {
+function useHomeBlock(panels, cwd, id, view, search) {
 	const viewKey = JSON.stringify(view ?? {});
 	const [rev, setRev] = useState(0);
-	const key = `${cwd}\u0000${id}\u0000${viewKey}\u0000${rev}`;
+	const key = `${cwd}\u0000${id}\u0000${viewKey}\u0000${search}\u0000${rev}`;
+	const [paged, setPaged] = useState(null);
+	const [loadingMore, setLoadingMore] = useState(false);
+	const keyRef = useRef(key);
+	keyRef.current = key;
 	const [loaded, setLoaded] = useState({
 		key: "",
 		content: null,
@@ -325,12 +332,7 @@ function useHomeBlock(panels, cwd, id, view) {
 	const loadedAt = useRef(0);
 	useEffect(() => {
 		let current = true;
-		const picked = JSON.parse(viewKey);
-		const ctx = {
-			surface: "home",
-			...Object.keys(picked).length > 0 ? { view: picked } : {}
-		};
-		panels.load(cwd, id, ctx).then((content) => {
+		panels.load(cwd, id, blockContext(viewKey, search)).then((content) => {
 			if (!current) return;
 			loadedAt.current = Date.now();
 			setLoaded({
@@ -351,6 +353,7 @@ function useHomeBlock(panels, cwd, id, view) {
 		cwd,
 		id,
 		viewKey,
+		search,
 		key
 	]);
 	useEffect(() => panels.watch?.(cwd, id), [
@@ -377,20 +380,68 @@ function useHomeBlock(panels, cwd, id, view) {
 		};
 	}, []);
 	const reload = useCallback(() => setRev((r) => r + 1), []);
+	const shown = paged?.key === key ? paged.content : loaded.key === key ? loaded.content : null;
+	const more = useCallback(() => {
+		const cursor = shown?.more?.cursor;
+		if (!shown || !cursor || loadingMore) return;
+		setLoadingMore(true);
+		panels.load(cwd, id, {
+			...blockContext(viewKey, search),
+			cursor
+		}).then((page) => {
+			if (keyRef.current === key) setPaged({
+				key,
+				content: appendPanelPage(shown, page)
+			});
+		}, (err) => keyRef.current === key && setLoaded((s) => ({
+			...s,
+			error: err instanceof Error ? err.message : String(err)
+		}))).finally(() => setLoadingMore(false));
+	}, [
+		panels,
+		cwd,
+		id,
+		viewKey,
+		search,
+		key,
+		shown,
+		loadingMore
+	]);
 	return {
-		content: loaded.content,
+		content: shown ?? loaded.content,
 		error: loaded.error,
 		loading: loaded.key !== key,
-		reload
+		reload,
+		more,
+		loadingMore
+	};
+}
+/** What a block loads with: the home surface, its view and its search. */
+function blockContext(viewKey, search) {
+	const picked = JSON.parse(viewKey);
+	return {
+		surface: "home",
+		...Object.keys(picked).length > 0 ? { view: picked } : {},
+		...search ? { search } : {}
 	};
 }
 /** A block shown longer than this loads again when the window comes back. */
 const BLOCK_STALE_MS = 3e5;
 /** What a dragged block card carries: its id. */
 const DRAG_TYPE = "application/x-zidane-home-block";
-const HomeBlockCard = memo(function HomeBlockCard({ panels, cwd, block, view, first, last, editing, onMove, onPlace, onWidth, onHide, onView, onOpenSession, onOpenPath }) {
+const HomeBlockCard = memo(function HomeBlockCard({ panels, cwd, block, view, first, last, editing, onMove, onPlace, onWidth, onHide, onView, onOpenSession, onOpenPath, onStartSession }) {
 	const labels = useSessionLabels();
-	const { content, loading, error, reload } = useHomeBlock(panels, cwd, block.id, view);
+	const [search, setSearch] = useState("");
+	const { content, loading, error, reload, more, loadingMore } = useHomeBlock(panels, cwd, block.id, view, search);
+	const [notice, setNotice] = useState(null);
+	const onStart = useMemo(() => onStartSession ? async (start) => {
+		setNotice(null);
+		const result = await onStartSession(start).catch((err) => ({
+			ok: false,
+			message: err instanceof Error ? err.message : String(err)
+		}));
+		if (!result.ok) setNotice(result.message);
+	} : void 0, [onStartSession]);
 	const [dropTarget, setDropTarget] = useState(false);
 	const menuAnchor = useRef(null);
 	const [menuOpen, setMenuOpen] = useState(false);
@@ -441,77 +492,99 @@ const HomeBlockCard = memo(function HomeBlockCard({ panels, cwd, block, view, fi
 			const id = event.dataTransfer.getData(DRAG_TYPE);
 			if (id) onPlace(id, block.id);
 		} : void 0,
-		children: [/* @__PURE__ */ jsxs("header", {
-			className: "flex items-center justify-between gap-2 mb-3 min-h-6",
-			children: [/* @__PURE__ */ jsxs("h2", {
-				className: "zg-section-label m-0 flex items-center gap-1.5 min-w-0",
-				children: [
-					editing && /* @__PURE__ */ jsx("span", {
-						"aria-hidden": true,
-						title: labels.projectHomeDrag(title),
-						className: "i-ph-dots-six-vertical shrink-0 text-[var(--zg-text-muted)]"
-					}),
-					block.icon?.gui && /* @__PURE__ */ jsx("span", {
-						"aria-hidden": true,
-						className: `${block.icon.gui} shrink-0`
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "truncate",
-						children: title
-					})
-				]
-			}), editing ? /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-0.5 shrink-0",
-				children: [
-					!first && /* @__PURE__ */ jsx(IconButton, {
-						icon: "i-ph-arrow-up",
-						size: "xs",
-						label: labels.projectHomeMoveUp,
-						onClick: () => onMove(block.id, -1)
-					}),
-					!last && /* @__PURE__ */ jsx(IconButton, {
-						icon: "i-ph-arrow-down",
-						size: "xs",
-						label: labels.projectHomeMoveDown,
-						onClick: () => onMove(block.id, 1)
-					}),
-					/* @__PURE__ */ jsx(IconButton, {
-						icon: half ? "i-ph-arrows-out-line-horizontal" : "i-ph-arrows-in-line-horizontal",
-						size: "xs",
-						label: half ? labels.projectHomeFullWidth : labels.projectHomeHalfWidth,
-						onClick: () => onWidth(block.id, half ? "full" : "half")
-					}),
-					/* @__PURE__ */ jsx(IconButton, {
-						icon: "i-ph-eye-slash",
-						size: "xs",
-						label: labels.projectHomeHide,
-						onClick: () => onHide(block.id)
-					})
-				]
-			}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
-				ref: menuAnchor,
-				icon: "i-ph-dots-three",
-				size: "xs",
-				label: labels.projectHomeBlockMenu(title),
-				"aria-haspopup": "menu",
-				"aria-expanded": menuOpen,
-				onClick: () => setMenuOpen(true)
-			}), /* @__PURE__ */ jsx(RowActionsMenu, {
-				open: menuOpen,
-				anchorRef: menuAnchor,
-				onClose: () => setMenuOpen(false),
-				items
-			})] })]
-		}), /* @__PURE__ */ jsx(PanelContentView, {
-			variant: "block",
-			content,
-			loading,
-			error,
-			onAction,
-			onControl,
-			...onOpenSession ? { onOpenSession } : {},
-			...onOpenPath ? { onOpenPath } : {}
-		})]
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "flex items-center justify-between gap-2 mb-3 min-h-6",
+				children: [/* @__PURE__ */ jsxs("h2", {
+					className: "zg-section-label m-0 flex items-center gap-1.5 min-w-0",
+					children: [
+						editing && /* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							title: labels.projectHomeDrag(title),
+							className: "i-ph-dots-six-vertical shrink-0 text-[var(--zg-text-muted)]"
+						}),
+						/* @__PURE__ */ jsx(PanelGlyph, {
+							tab: block,
+							className: "shrink-0"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: title
+						})
+					]
+				}), editing ? /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-0.5 shrink-0",
+					children: [
+						!first && /* @__PURE__ */ jsx(IconButton, {
+							icon: "i-ph-arrow-up",
+							size: "xs",
+							label: labels.projectHomeMoveUp,
+							onClick: () => onMove(block.id, -1)
+						}),
+						!last && /* @__PURE__ */ jsx(IconButton, {
+							icon: "i-ph-arrow-down",
+							size: "xs",
+							label: labels.projectHomeMoveDown,
+							onClick: () => onMove(block.id, 1)
+						}),
+						/* @__PURE__ */ jsx(IconButton, {
+							icon: half ? "i-ph-arrows-out-line-horizontal" : "i-ph-arrows-in-line-horizontal",
+							size: "xs",
+							label: half ? labels.projectHomeFullWidth : labels.projectHomeHalfWidth,
+							onClick: () => onWidth(block.id, half ? "full" : "half")
+						}),
+						/* @__PURE__ */ jsx(IconButton, {
+							icon: "i-ph-eye-slash",
+							size: "xs",
+							label: labels.projectHomeHide,
+							onClick: () => onHide(block.id)
+						})
+					]
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
+					ref: menuAnchor,
+					icon: "i-ph-dots-three",
+					size: "xs",
+					label: labels.projectHomeBlockMenu(title),
+					"aria-haspopup": "menu",
+					"aria-expanded": menuOpen,
+					onClick: () => setMenuOpen(true)
+				}), /* @__PURE__ */ jsx(RowActionsMenu, {
+					open: menuOpen,
+					anchorRef: menuAnchor,
+					onClose: () => setMenuOpen(false),
+					items
+				})] })]
+			}),
+			notice && /* @__PURE__ */ jsxs("div", {
+				role: "alert",
+				className: "mb-3 flex items-start gap-2 text-zg-label text-[var(--zg-warn)]",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "flex-1 min-w-0",
+					children: notice
+				}), /* @__PURE__ */ jsx(IconButton, {
+					icon: "i-ph-x",
+					size: "xs",
+					label: labels.projectHomeDismiss,
+					onClick: () => setNotice(null)
+				})]
+			}),
+			/* @__PURE__ */ jsx(PanelContentView, {
+				variant: "block",
+				content,
+				loading,
+				error,
+				onAction,
+				onControl,
+				...view ? { view } : {},
+				search,
+				onSearch: setSearch,
+				onMore: more,
+				loadingMore,
+				...onStart ? { onStart } : {},
+				...onOpenSession ? { onOpenSession } : {},
+				...onOpenPath ? { onOpenPath } : {}
+			})
+		]
 	});
 });
 //#endregion

package/dist/session/RemindersPanel.d.ts

@@ -0,0 +1,25 @@
+import { CSSProperties } from "react";
+//#region src/session/RemindersPanel.d.ts
+/** Which reminders the panel lists. */
+type RemindersScope = 'session' | 'all';
+/** Props for {@link RemindersPanel}. */
+interface RemindersPanelProps {
+  /** The session the panel is beside: its reminders, and where a new one goes. */
+  sessionId: string;
+  /** The list it opens on. @default 'session' */
+  initialScope?: RemindersScope;
+  /** Opens a session: a reminder that goes to another session links to it. Default: the `OpenSessionContext` opener. */
+  onOpenSession?: (sessionId: string) => void;
+  /** Extra classes on the root. */
+  className?: string;
+  /** Inline styles on the root. */
+  style?: CSSProperties;
+}
+/**
+ * Renders the reminders of a session, or all of them, with the create form.
+ *
+ * @param props - The `sessionId`, `initialScope`, `className` and `style`.
+ */
+declare function RemindersPanel({ sessionId, initialScope, onOpenSession, className, style }: RemindersPanelProps): import("react").JSX.Element | null;
+//#endregion
+export { RemindersPanel, RemindersPanelProps, RemindersScope };