From 34a7a4e37e635441dc98ab1e15d517063955714d Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Sun, 22 Mar 2026 20:13:15 -0700
Subject: [PATCH] fix(canvas): mobile toolbar to right, persistent lock badge,
 reminder auth
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move mobile toolbar to right side to avoid zoom bar overlap
- Toolbar panel opens leftward, bottom toolbar offsets flipped
- Add [locked] attribute reflection on folk-shape for external CSS
- Persistent 🔒 badge on locked shapes visible when unselected
- Add Authorization header to calendar reminder POST request

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 lib/folk-shape.ts   |  3 +++
 website/canvas.html | 46 +++++++++++++++++++++++++++++++++++----------
 2 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/lib/folk-shape.ts b/lib/folk-shape.ts
index 36c0921..d183868 100644
--- a/lib/folk-shape.ts
+++ b/lib/folk-shape.ts
@@ -332,6 +332,9 @@ export class FolkShape extends FolkElement {
 		locked
 			? this.#internals.states.add("locked")
 			: this.#internals.states.delete("locked");
+		// Reflect as attribute for external CSS styling
+		if (locked) this.setAttribute("locked", "");
+		else this.removeAttribute("locked");
 	}
 
 	#editing = false;
diff --git a/website/canvas.html b/website/canvas.html
index 5d5a959..5a02a88 100644
--- a/website/canvas.html
+++ b/website/canvas.html
@@ -1701,13 +1701,13 @@
 					display: none;
 				}
 
-				/* Mobile toolbar: compact column on left, icons only, same as desktop */
+				/* Mobile toolbar: compact column on RIGHT to avoid zoom-bar overlap */
 				#toolbar {
 					position: fixed;
 					top: auto;
 					bottom: 60px; /* above bottom-toolbar row */
-					left: 6px;
-					right: auto;
+					left: auto;
+					right: 6px;
 					flex-direction: column;
 					flex-wrap: nowrap;
 					align-items: center;
@@ -1792,12 +1792,12 @@
 					max-width: calc(100vw - 32px);
 				}
 
-				/* Mobile: panel opens to the right of the toolbar */
+				/* Mobile: panel opens to the LEFT of the toolbar (toolbar is on right) */
 				#toolbar-panel {
 					top: auto;
 					bottom: 60px;
-					left: 56px;
-					right: auto;
+					left: auto !important;
+					right: 56px;
 					min-width: 180px;
 					border-radius: 12px;
 					max-height: 50vh;
@@ -1809,13 +1809,13 @@
 					min-height: 44px;
 				}
 
-				/* Bottom toolbar: raised above corner tools row */
+				/* Bottom toolbar: offset right of side toolbar (now on right side) */
 				#bottom-toolbar {
 					bottom: 8px;
 					padding: 4px 6px;
 					gap: 1px;
-					left: 56px; /* offset right of side toolbar */
-					right: 8px;
+					left: 8px;
+					right: 56px; /* offset left of side toolbar on right */
 					transform: none;
 					overflow-x: auto;
 					overflow-y: hidden;
@@ -2433,6 +2433,27 @@
 			.shape-lock-icon.locked {
 				border-color: #f59e0b; color: #f59e0b;
 			}
+
+			/* Persistent lock badge on locked shapes (visible even when not selected) */
+			[locked]::after {
+				content: "🔒";
+				position: absolute;
+				top: -8px;
+				right: -8px;
+				font-size: 11px;
+				line-height: 1;
+				background: var(--rs-bg-surface, #1e1e2e);
+				border: 1px solid #f59e0b;
+				border-radius: 50%;
+				width: 22px;
+				height: 22px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				pointer-events: none;
+				z-index: 1;
+				opacity: 0.8;
+			}
 		</style>
 		<div id="reminder-widget">
 			<div class="rw-header"><span class="rw-header-icon">🔔</span> Remind me of this on:</div>
@@ -7396,9 +7417,14 @@
 						sourceColor: info.color,
 					};
 					if (cachedUserEmail) body.notifyEmail = cachedUserEmail;
+					const reminderHeaders = { "Content-Type": "application/json" };
+					try {
+						const s = JSON.parse(localStorage.getItem("encryptid_session") || "{}");
+						if (s?.accessToken) reminderHeaders["Authorization"] = "Bearer " + s.accessToken;
+					} catch {}
 					const res = await fetch(`${schedBase}/api/reminders`, {
 						method: "POST",
-						headers: { "Content-Type": "application/json" },
+						headers: reminderHeaders,
 						body: JSON.stringify(body),
 					});