From 0a4ee869767395839957668216311fbac32c6225 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Tue, 31 Mar 2026 18:44:09 -0700
Subject: [PATCH] fix(rpubs): move format selector from toolbar to write step
 bottom bar

Remove "Digest" format dropdown from the editor toolbar header. Move format
selector into the write step bottom bar as a clickable badge with dropdown.
Fix CSS bug where dropdown panels with display:flex overrode the HTML hidden
attribute, causing a visible rectangle artifact.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 modules/rpubs/components/folk-pubs-editor.ts | 52 ++++++++++++--------
 1 file changed, 31 insertions(+), 21 deletions(-)

diff --git a/modules/rpubs/components/folk-pubs-editor.ts b/modules/rpubs/components/folk-pubs-editor.ts
index 9199382..5bd6c25 100644
--- a/modules/rpubs/components/folk-pubs-editor.ts
+++ b/modules/rpubs/components/folk-pubs-editor.ts
@@ -411,9 +411,6 @@ export class FolkPubsEditor extends HTMLElement {
 	private render() {
 		if (!this.shadowRoot) return;
 
-		const currentFormat = this._formats.find(f => f.id === this._selectedFormat);
-		const formatLabel = currentFormat ? currentFormat.name : this._selectedFormat;
-
 		this.shadowRoot.innerHTML = `
 			${this.getStyles()}
 			<div class="wizard-layout">
@@ -424,22 +421,6 @@ export class FolkPubsEditor extends HTMLElement {
 						<input type="text" class="author-input" placeholder="Author (optional)" />
 					</div>
 					<div class="toolbar-right">
-						<!-- Format dropdown -->
-						<div class="format-dropdown">
-							<button class="format-dropdown-btn toolbar-btn" title="Book format">
-								${this.escapeHtml(formatLabel)}
-								<span class="dropdown-arrow">&#9662;</span>
-							</button>
-							<div class="format-dropdown-panel" hidden>
-								${this._formats.map(f => `
-									<button class="format-option ${f.id === this._selectedFormat ? 'active' : ''}" data-format="${f.id}">
-										<span class="format-option-name">${f.name}</span>
-										<span class="format-option-desc">${f.widthMm}\u00D7${f.heightMm}mm \u00B7 ${f.minPages}\u2013${f.maxPages}pp</span>
-									</button>
-								`).join('')}
-							</div>
-						</div>
-
 						${this._runtime ? `
 						<!-- Drafts dropdown -->
 						<div class="drafts-dropdown">
@@ -518,7 +499,20 @@ export class FolkPubsEditor extends HTMLElement {
 				<div class="write-bottom-bar">
 					<div class="write-meta">
 						<span class="word-count"></span>
-						<span class="format-badge">${this.escapeHtml(this._formats.find(f => f.id === this._selectedFormat)?.name || this._selectedFormat)}</span>
+						<div class="format-dropdown">
+							<button class="format-badge format-dropdown-btn" title="Change book format">
+								${this.escapeHtml(this._formats.find(f => f.id === this._selectedFormat)?.name || this._selectedFormat)}
+								<span class="dropdown-arrow">&#9662;</span>
+							</button>
+							<div class="format-dropdown-panel" hidden>
+								${this._formats.map(f => `
+									<button class="format-option ${f.id === this._selectedFormat ? 'active' : ''}" data-format="${f.id}">
+										<span class="format-option-name">${f.name}</span>
+										<span class="format-option-desc">${f.widthMm}\u00D7${f.heightMm}mm \u00B7 ${f.minPages}\u2013${f.maxPages}pp</span>
+									</button>
+								`).join('')}
+							</div>
+						</div>
 					</div>
 					${this._error ? `<div class="inline-error">${this.escapeHtml(this._error)}</div>` : ''}
 					<button class="btn-generate" ${this._loading ? "disabled" : ""}>
@@ -913,7 +907,6 @@ export class FolkPubsEditor extends HTMLElement {
 
 			.format-dropdown-panel, .drafts-dropdown-panel {
 				position: absolute;
-				top: calc(100% + 4px);
 				right: 0;
 				min-width: 220px;
 				background: var(--rs-bg-surface);
@@ -927,6 +920,15 @@ export class FolkPubsEditor extends HTMLElement {
 				max-height: 320px;
 				overflow-y: auto;
 			}
+			.format-dropdown-panel[hidden], .drafts-dropdown-panel[hidden] {
+				display: none;
+			}
+			.format-dropdown-panel {
+				bottom: calc(100% + 4px);
+			}
+			.drafts-dropdown-panel {
+				top: calc(100% + 4px);
+			}
 
 			.format-option, .draft-option {
 				display: flex;
@@ -1112,6 +1114,14 @@ export class FolkPubsEditor extends HTMLElement {
 				color: var(--rs-accent, #14b8a6);
 				font-size: 0.65rem;
 				font-weight: 500;
+				border: 1px solid transparent;
+				cursor: pointer;
+				display: inline-flex;
+				align-items: center;
+				gap: 0.25rem;
+			}
+			.format-badge:hover {
+				border-color: var(--rs-accent, #14b8a6);
 			}
 
 			.inline-error {