diff --git a/src/components/Dock.tsx b/src/components/Dock.tsx index 807eedf..44bce0e 100644 --- a/src/components/Dock.tsx +++ b/src/components/Dock.tsx @@ -1,17 +1,37 @@ import { useEffect, useMemo, useRef, useState } from "react"; import { generateHTML } from "@tiptap/core"; import { useBook } from "../store/useBook"; +import type { TrimSize } from "../model/book"; import { editorExtensions } from "../editor/extensions"; import { bookToPdfInputs } from "../export/typst"; import { compilePdf, isDesktop } from "../ipc"; import { PdfPreview } from "./PdfPreview"; -const TRIM_LABEL: Record = { - "6x9": "6 × 9 in", - "5.5x8.5": "5.5 × 8.5 in", - "5x8": "5 × 8 in", - a5: "A5", -}; +const TRIMS: { value: TrimSize; label: string }[] = [ + { value: "6x9", label: "6 × 9 in" }, + { value: "5.5x8.5", label: "5.5 × 8.5 in" }, + { value: "5x8", label: "5 × 8 in" }, + { value: "a5", label: "A5" }, +]; + +function TrimSelect() { + const trim = useBook((s) => s.book?.settings.trim ?? "6x9"); + const setSettings = useBook((s) => s.setSettings); + return ( + + ); +} export function Dock() { return isDesktop ? : ; @@ -45,7 +65,10 @@ function PdfDock() {
Preview - {busy ? "updating…" : TRIM_LABEL[book?.settings.trim ?? "6x9"]} +
+ {busy && updating…} + +
{error ? (
{error}
@@ -72,9 +95,12 @@ function HtmlDock() {
Preview - - {TRIM_LABEL[book.settings.trim]} · {idx + 1} of {chapters.length} - +
+ + {idx + 1} of {chapters.length} + + +
diff --git a/src/styles/app.css b/src/styles/app.css index 30ce36c..8eb3fd4 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -329,6 +329,32 @@ button { font-variant-numeric: tabular-nums; } +.dock-tools { + display: flex; + align-items: center; + gap: 10px; +} + +.trim-select { + font-family: var(--font-ui); + font-size: var(--t-2); + color: var(--ink-soft); + background: var(--raised); + border: 1px solid var(--line); + border-radius: var(--r-sm); + padding: 4px 8px; + cursor: pointer; +} + +.trim-select:hover { + border-color: var(--line-strong); +} + +.trim-select:focus { + outline: none; + border-color: var(--accent); +} + .page { background: #fffefb; border: 1px solid var(--line);