diff --git a/src/components/Canvas/PaginationControl.tsx b/src/components/Canvas/PaginationControl.tsx
index 622bb625..3d55a0b9 100644
--- a/src/components/Canvas/PaginationControl.tsx
+++ b/src/components/Canvas/PaginationControl.tsx
@@ -1,18 +1,22 @@
+import { useState } from "react";
+import { TrashIcon } from "@heroicons/react/16/solid";
import { useLabelStore } from "../../store/labelStore";
+import { useT } from "../../lib/useT";
+import { ConfirmDialog } from "../ui/ConfirmDialog";
export function PaginationControl() {
+ const t = useT();
+ const [confirmOpen, setConfirmOpen] = useState(false);
const pageCount = useLabelStore((s) => s.pages.length);
const currentPageIndex = useLabelStore((s) => s.currentPageIndex);
const setCurrentPage = useLabelStore((s) => s.setCurrentPage);
- const addPage = useLabelStore((s) => s.addPage);
const removePage = useLabelStore((s) => s.removePage);
- // Hide entirely on single-page documents; "Add page" lives in the File menu.
+ // Hide entirely on single-page documents; adding pages lives in the File menu.
if (pageCount <= 1) return null;
const canPrev = currentPageIndex > 0;
const canNext = currentPageIndex < pageCount - 1;
- const canRemove = pageCount > 1;
return (
@@ -39,22 +43,26 @@ export function PaginationControl() {
-
+ {confirmOpen && (
+
{
+ removePage(currentPageIndex);
+ setConfirmOpen(false);
+ }}
+ onCancel={() => setConfirmOpen(false)}
+ />
+ )}
-
- {t.palette[group.labelKey]}
-
+
{entries.map(([type, def]) => (
))}
-
+
-
-
- {t.label.printerSettingsHeading}
-
+
-
+
-
{t.label.printSpeedHint}
-
+
-
{t.label.darknessHint}
@@ -461,6 +477,7 @@ function LabelConfigPanel({
+
);
diff --git a/src/components/ui/CollapsibleSection.tsx b/src/components/ui/CollapsibleSection.tsx
new file mode 100644
index 00000000..001d3d81
--- /dev/null
+++ b/src/components/ui/CollapsibleSection.tsx
@@ -0,0 +1,72 @@
+import { useEffect, useState, type ReactNode } from 'react';
+import { ChevronDownIcon } from '@heroicons/react/16/solid';
+
+interface CollapsibleSectionProps {
+ /** Stable identifier, used as the localStorage key for the open state. */
+ id: string;
+ title: ReactNode;
+ defaultOpen?: boolean;
+ children: ReactNode;
+}
+
+const LS_PREFIX = 'zpl:section:';
+
+function readStored(id: string, fallback: boolean): boolean {
+ const saved = localStorage.getItem(LS_PREFIX + id);
+ return saved === null ? fallback : saved === '1';
+}
+
+/**
+ * Section with a clickable header that toggles its body. Independent of
+ * sibling sections — multiple can be open at once. Open state is persisted
+ * per `id` in localStorage so the UI feels stable across reloads.
+ */
+export function CollapsibleSection({
+ id,
+ title,
+ defaultOpen = true,
+ children,
+}: CollapsibleSectionProps) {
+ const [open, setOpen] = useState(() => readStored(id, defaultOpen));
+
+ // Re-sync open state when `id` changes so the component can be reused for
+ // a different section without leaking the previous open state into the new
+ // id's storage slot. React's blessed pattern for deriving state from
+ // props: setState during render under a prev-vs-current guard.
+ // https://react.dev/reference/react/useState#storing-information-from-previous-renders
+ const [prevId, setPrevId] = useState(id);
+ if (prevId !== id) {
+ setPrevId(id);
+ setOpen(readStored(id, defaultOpen));
+ }
+
+ useEffect(() => {
+ localStorage.setItem(LS_PREFIX + id, open ? '1' : '0');
+ }, [id, open]);
+
+ const contentId = `section-content-${id}`;
+
+ return (
+
+
+ {open && (
+
+ {children}
+
+ )}
+
+
e.stopPropagation()}
+ >
+
+ {message}
+
+
+
+
+
+
+