rails-markup 1.4.6 → 1.5.0

data/app/assets/javascripts/rails_markup/toolbar/60-render.js

@@ -12,6 +12,8 @@
       this.drawingMode = null;
       this._screenshotImg = null;
 
+      document.getElementById("rm-image-options").open = Boolean(this._currentScreenshot);
+      this._resetScreenshotStatus();
       popup.style.display = "block";
       popup.style.opacity = "0";
       popup.style.left = "-9999px";
@@ -70,7 +72,7 @@
       const len = document.getElementById("rm-popup-input").value.length;
       const el = document.getElementById("rm-char-count");
       el.textContent = len > 0 ? len : "";
-      el.style.color = len > 500 ? "#f87171" : "#d1d5db";
+      el.style.color = len > 500 ? "#b91c1c" : "#596579";
     },
     submitAnnotation(event) {
       if (event) event.preventDefault();
@@ -155,7 +157,7 @@
         } else {
           chip.className = "rm-chip rm-chip-inactive";
           chip.style.background = "#f9fafb";
-          chip.style.color = "#9ca3af";
+          chip.style.color = "#596579";
         }
       });
     },
@@ -199,10 +201,10 @@
               options: this._statusOptions(),
               compact: true
             })}
-            <button data-edit-id="${annotation.id}" title="Edit" style="padding:2px 4px;background:none;border:none;cursor:pointer;color:#d1d5db;border-radius:4px;display:flex;align-items:center;" onmouseover="this.style.color='#6b7280'" onmouseout="this.style.color='#d1d5db'">
+            <button data-edit-id="${annotation.id}" title="Edit" style="padding:2px 4px;background:none;border:none;cursor:pointer;color:#64748b;border-radius:4px;display:flex;align-items:center;" onmouseover="this.style.color='#6b7280'" onmouseout="this.style.color='#64748b'">
               <svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;"><path d="M17 3a2.85 2.85 0 114 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
             </button>
-            <button data-delete-id="${annotation.id}" title="Delete" style="padding:2px 4px;background:none;border:none;cursor:pointer;color:#d1d5db;border-radius:4px;display:flex;align-items:center;" onmouseover="this.style.color='#ef4444'" onmouseout="this.style.color='#d1d5db'">
+            <button data-delete-id="${annotation.id}" title="Delete" style="padding:2px 4px;background:none;border:none;cursor:pointer;color:#64748b;border-radius:4px;display:flex;align-items:center;" onmouseover="this.style.color='#ef4444'" onmouseout="this.style.color='#64748b'">
               <svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
             </button>
           </span>
@@ -346,14 +348,22 @@
       const pin = document.createElement("div");
       pin.className = "rm-pin" + (isResolved ? "" : " rm-pin-active");
       pin.dataset.pinId = annotation.id;
-      pin.style.top = (top - 10) + "px";
-      pin.style.left = (left + width - 10) + "px";
+      this._positionPin(pin, { top, left, width });
       pin.style.background = isResolved ? "#d1d5db" : this._accentBg();
       if (isResolved) pin.style.opacity = "0.6";
       pin.textContent = annotation.id;
       pin.title = "#" + annotation.id + ": " + annotation.comment.slice(0, 50);
       container.appendChild(pin);
     },
+    _positionPin(pin, { top, left, width }) {
+      const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
+      const scrollLeft = window.scrollX || 0;
+      // The 20px pin must fit inside the viewport, including its focus/hover space.
+      const minLeft = scrollLeft + 4;
+      const maxLeft = Math.max(minLeft, scrollLeft + viewportWidth - 24);
+      pin.style.left = Math.max(minLeft, Math.min(left + width - 10, maxLeft)) + "px";
+      pin.style.top = Math.max(4, top - 10) + "px";
+    },
     _renderPins() {
       const container = document.getElementById("rm-pins-container");
       if (container) container.innerHTML = "";
@@ -377,7 +387,7 @@
         const rect = el.getBoundingClientRect();
         annotation.element.boundingBox = { top: Math.round(rect.top + window.scrollY), left: Math.round(rect.left + window.scrollX), width: Math.round(rect.width), height: Math.round(rect.height) };
         const pin = document.querySelector('[data-pin-id="' + annotation.id + '"]');
-        if (pin) { pin.style.top = (annotation.element.boundingBox.top - 10) + "px"; pin.style.left = (annotation.element.boundingBox.left + annotation.element.boundingBox.width - 10) + "px"; }
+        if (pin) this._positionPin(pin, annotation.element.boundingBox);
       });
     },
     _debouncedRepositionPins(delay = 250) {
@@ -466,8 +476,8 @@
       case "accent": return "Accent";
       case "position": return "Position";
       case "size": return "Size";
-      case "fabVisible": return "Show FAB";
-      case "enableScreenshots": return "Screenshots";
+      case "fabVisible": return "Show floating toolbar";
+      case "enableScreenshots": return "Image attachments";
       default: return setting;
       }
     },
@@ -496,17 +506,19 @@
     _toolbarSettingsRowMarkup(setting) {
       const current = this._toolbarSettingCurrentValue(setting);
       const options = this._toolbarSettingOptions(setting);
-      const buttons = options.map(([value, label]) => {
+      const label = this._toolbarSettingLabel(setting);
+      if (typeof current === "boolean") {
+        return `<div class="rm-settings-group rm-settings-switch-row"><span class="rm-settings-label">${this._esc(label)}</span><button type="button" class="rm-setting-switch" role="switch" aria-label="${this._esc(label)}" aria-checked="${current}" data-setting="${setting}" data-value="${!current}"><span></span></button></div>`;
+      }
+      const colors = { indigo: "#4f46e5", amber: "#f59e0b", blue: "#2563eb", emerald: "#059669", rose: "#e11d48" };
+      const corners = { bl: "◱", br: "◲", tl: "◰", tr: "◳" };
+      const buttons = options.map(([value, optionLabel]) => {
         const active = String(value) === String(current);
-        const valueAttr = this._toolbarSettingDisplayValue(value);
-        return `<button type="button" class="rm-chip${active ? " rm-chip-active" : " rm-chip-inactive"} rm-setting-chip" data-setting="${setting}" data-value="${this._esc(valueAttr)}"${active ? ` style="background:${this._accentBg()}"` : ""}>${this._esc(label)}</button>`;
+        const swatch = setting === "accent";
+        const content = swatch ? (active ? "✓" : "") : setting === "position" ? corners[value] : this._esc(optionLabel);
+        return `<button type="button" class="rm-setting-choice${swatch ? " rm-color-swatch" : ""}${setting === "position" ? " rm-corner-choice" : ""}" data-setting="${setting}" data-value="${this._esc(this._toolbarSettingDisplayValue(value))}" aria-label="${this._esc(optionLabel)}" title="${this._esc(optionLabel)}" aria-pressed="${active}"${swatch ? ` style="background:${colors[value]}"` : ""}>${content}</button>`;
       }).join("");
-      return `
-        <div class="rm-settings-group">
-          <div class="rm-settings-label">${this._esc(this._toolbarSettingLabel(setting))}</div>
-          <div class="rm-settings-options">${buttons}</div>
-        </div>
-      `;
+      return `<div class="rm-settings-group"><div class="rm-settings-label">${this._esc(label)}</div><div class="rm-settings-options" role="group" aria-label="${this._esc(label)}">${buttons}</div></div>`;
     },
     _toolbarSettingValue(setting, rawValue) {
       if (setting === "fabVisible" || setting === "enableScreenshots") {
@@ -520,66 +532,107 @@
       const normalized = this._normalizeToolbarSettings(next);
       if (JSON.stringify(normalized) === JSON.stringify(this.toolbarSettings)) return;
       if (!this._saveToolbarSettings(normalized)) return;
+      const settingsOpen = this._settingsPanelOpen;
       this.toolbarSettings = normalized;
       this.destroy();
       this.init(this._bootstrapOptions || {});
+      if (settingsOpen && this.fabVisible) {
+        this._toggleSettings();
+        this.root.querySelector(`[data-setting="${setting}"][aria-pressed="true"], [data-setting="${setting}"][role="switch"]`)?.focus();
+      }
     },
     _toggleSettings() {
       const panel = document.getElementById("rm-settings-panel");
       const toggle = document.getElementById("rm-settings-toggle");
       if (!panel) return;
-      panel.hidden = !panel.hidden;
-      this._settingsPanelOpen = !panel.hidden;
-      if (toggle) toggle.setAttribute("aria-expanded", String(!panel.hidden));
-    },
-    async _captureElement(element) {
+      this._expandDock();
+      const feedback = document.getElementById("rm-panel");
+      const opening = panel.hidden || feedback.style.display !== "flex";
+      feedback.style.display = opening ? "flex" : "none";
+      feedback.dataset.view = opening ? "settings" : "feedback";
+      feedback.querySelector("h3").textContent = opening ? "Toolbar settings" : "Feedback";
+      panel.hidden = !opening;
+      this._settingsPanelOpen = opening;
+      document.getElementById("rm-panel-toggle").setAttribute("aria-expanded", "false");
+      if (toggle) toggle.setAttribute("aria-expanded", String(opening));
+    },
+    _resetScreenshotStatus(message = "Optional · capture, upload, or paste an image") {
+      document.getElementById("rm-screenshot-status").textContent = message;
+      document.getElementById("rm-remove-screenshot").hidden = !this._currentScreenshot;
+    },
+    _removeScreenshot() {
+      this._currentScreenshot = null;
+      this.root.querySelector(".rm-drawing-container")?.remove();
+      const tool = this.root.querySelector("[data-draw]");
+      tool?.parentElement.remove();
+      this.drawingCanvas = null;
+      this.drawingCtx = null;
+      this.drawingHistory = [];
+      this._screenshotImg = null;
+      document.getElementById("rm-screenshot-file").value = "";
+      this._resetScreenshotStatus();
+    },
+    _useScreenshot(dataUrl) {
+      if (document.getElementById("rm-popup").style.display !== "block") return;
+      this._removeScreenshot();
+      this._currentScreenshot = dataUrl;
+      document.getElementById("rm-image-options").open = true;
+      this._initDrawing(dataUrl);
+      this._resetScreenshotStatus("Image attached · review before submitting");
+    },
+    async _attachScreenshotFile(file) {
+      if (!file) return;
+      if (!["image/png", "image/jpeg", "image/webp"].includes(file.type) || file.size > 5 * 1024 * 1024) {
+        this._resetScreenshotStatus("Choose a PNG, JPEG, or WebP under 5 MB.");
+        return;
+      }
+      const popup = document.getElementById("rm-popup");
+      const reader = new FileReader();
+      reader.onload = () => { if (popup === document.getElementById("rm-popup")) this._useScreenshot(reader.result); };
+      reader.onerror = () => this._resetScreenshotStatus("Could not read this image. Try another file.");
+      reader.readAsDataURL(file);
+    },
+    async _attachScreen() {
+      if (!navigator.mediaDevices?.getDisplayMedia) {
+        this._resetScreenshotStatus("Tab capture is unavailable here. Upload or paste an image instead.");
+        return;
+      }
+      let stream;
+      let video;
+      let frameTimeout;
+      const popup = document.getElementById("rm-popup");
+      const button = document.getElementById("rm-attach-screen");
+      button.disabled = true;
+      this._resetScreenshotStatus("Choose a tab or window in the browser prompt. You can also upload an image.");
       try {
-        const rect = element.getBoundingClientRect();
-        const width = Math.min(Math.round(rect.width), 800);
-        const height = Math.min(Math.round(rect.height), 600);
-        if (width < 10 || height < 10) return null;
-
-        const clone = element.cloneNode(true);
-        // Strip scripts and event handlers
-        clone.querySelectorAll("script").forEach(s => s.remove());
-        // Remove cross-origin images to avoid tainting the canvas
-        const origin = location.origin;
-        clone.querySelectorAll("img").forEach(img => {
-          try { if (img.src && !img.src.startsWith(origin) && !img.src.startsWith("data:")) img.removeAttribute("src"); } catch {}
-        });
-
-        const svgNS = "http://www.w3.org/2000/svg";
-        const svg = `<svg xmlns="${svgNS}" width="${width}" height="${height}">
-          <foreignObject width="100%" height="100%">
-            <div xmlns="http://www.w3.org/1999/xhtml" style="font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;">${clone.outerHTML}</div>
-          </foreignObject>
-        </svg>`;
-
+        // Must run directly from the user's click to retain browser activation.
+        stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: false, preferCurrentTab: true });
+        video = document.createElement("video");
+        video.srcObject = stream;
+        video.muted = true;
+        await Promise.race([
+          video.play(),
+          new Promise((_, reject) => { frameTimeout = setTimeout(() => reject(new Error("Capture timed out")), 8000); })
+        ]);
+        if (popup !== document.getElementById("rm-popup") || popup.style.display !== "block") return;
+        this._removeHighlight();
+        this.root.style.visibility = "hidden";
+        await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+        const scale = Math.min(1, 1600 / Math.max(video.videoWidth, video.videoHeight));
         const canvas = document.createElement("canvas");
-        const scale = Math.min(window.devicePixelRatio || 1, 2);
-        canvas.width = width * scale;
-        canvas.height = height * scale;
-        const ctx = canvas.getContext("2d");
-        ctx.scale(scale, scale);
-
-        const blob = new Blob([svg], { type: "image/svg+xml;charset=utf-8" });
-        const url = URL.createObjectURL(blob);
-
-        return new Promise((resolve) => {
-          const img = new Image();
-          img.onload = () => {
-            ctx.drawImage(img, 0, 0, width, height);
-            URL.revokeObjectURL(url);
-            try { resolve(canvas.toDataURL("image/png", 0.7)); } catch { resolve(null); }
-          };
-          img.onerror = () => {
-            URL.revokeObjectURL(url);
-            resolve(null);
-          };
-          img.src = url;
-        });
-      } catch {
-        return null;
+        canvas.width = Math.round(video.videoWidth * scale);
+        canvas.height = Math.round(video.videoHeight * scale);
+        if (!canvas.width || !canvas.height) throw new Error("No video frame");
+        canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
+        this._useScreenshot(canvas.toDataURL("image/png"));
+      } catch (error) {
+        this._resetScreenshotStatus(error.name === "NotAllowedError" ? "Capture cancelled. You can upload or paste an image." : "Could not capture this tab. Upload or paste an image instead.");
+      } finally {
+        clearTimeout(frameTimeout);
+        stream?.getTracks().forEach(track => track.stop());
+        if (video) video.srcObject = null;
+        this.root.style.visibility = "";
+        button.disabled = false;
       }
     },
     _initDrawing(screenshotDataUrl) {
@@ -593,7 +646,7 @@
 
       const img = new Image();
       img.src = screenshotDataUrl;
-      img.style.cssText = "display:block;max-width:100%;border-radius:8px;";
+      img.style.cssText = "display:block;width:100%;height:auto;border-radius:8px;";
       container.appendChild(img);
 
       const canvas = document.createElement("canvas");
@@ -602,6 +655,7 @@
 
       // Tool buttons
       const tools = document.createElement("div");
+      tools.className = "rm-drawing-tools";
       tools.style.cssText = "display:flex;gap:4px;padding:6px 0;";
       tools.innerHTML = `
         <button type="button" data-draw="arrow" class="rm-pill" style="font-size:11px;padding:4px 10px;">Arrow</button>
@@ -614,6 +668,11 @@
       popup.insertBefore(tools, textarea);
       popup.insertBefore(container, tools);
 
+      this._resetScreenshotStatus("Image attached · review before submitting");
+      img.onerror = () => {
+        this._removeScreenshot();
+        this._resetScreenshotStatus("Could not open this image. Try another file.");
+      };
       img.onload = () => {
         canvas.width = img.naturalWidth || img.offsetWidth;
         canvas.height = img.naturalHeight || img.offsetHeight;

data/app/assets/javascripts/rails_markup/toolbar/90-init.js

@@ -44,11 +44,24 @@
         this._boundOnline = () => this._onOnline();
         window.addEventListener("online", this._boundOnline);
       }
+      if (!this._boundSettingsStorage) {
+        this._boundSettingsStorage = event => {
+          if (event.key !== this._toolbarSettingsKey()) return;
+          const options = this._bootstrapOptions;
+          this.destroy();
+          this.init(options);
+        };
+        window.addEventListener("storage", this._boundSettingsStorage);
+      }
       this._renderPins();
       this._updateCount();
       if (previousPageUrl && previousPageUrl !== this._currentPageUrl && this.serverOnline) this._initSession();
     },
     destroy() {
+      if (this._boundSettingsStorage) {
+        window.removeEventListener("storage", this._boundSettingsStorage);
+        this._boundSettingsStorage = null;
+      }
       this._closeAllMenus();
       this._deactivateMode();
       if (this.sseSource) { this.sseSource.close(); this.sseSource = null; }

data/app/views/layouts/rails_markup/application.html.erb

@@ -6,132 +6,23 @@
   <%= csrf_meta_tags %>
   <title><%= content_for?(:title) ? "#{yield(:title)} — Rails Markup" : "Rails Markup" %></title>
   <style>
-    /* Reset */
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #f8f9fa; color: #1a1a2e; line-height: 1.5; }
-    a { color: #4361ee; text-decoration: none; }
+    *, *::before, *::after { box-sizing: border-box; }
+    body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #fafbfc; color: #25272d; line-height: 1.55; }
+    a { color: #4f46e5; text-decoration: none; }
     a:hover { text-decoration: underline; }
-
-    /* Layout */
-    .rm-header { background: #1a1a2e; color: #fff; padding: 0 24px; height: 56px; display: flex; align-items: center; justify-content: space-between; }
-    .rm-header h1 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
-    .rm-header h1 span { color: #818cf8; }
-    .rm-header nav { display: flex; gap: 16px; font-size: 13px; }
-    .rm-header nav a { color: #a5b4fc; }
-    .rm-header nav a:hover { color: #fff; text-decoration: none; }
-    .rm-container { max-width: 960px; margin: 0 auto; padding: 24px 16px; }
-
-    /* Flash */
-    .rm-flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 13px; }
+    .rm-header { background: #fff; color: #25272d; min-height: 52px; border-bottom:1px solid #e8ebef; padding: 8px max(24px, calc((100vw - 1080px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
+    .rm-header h1 { margin: 0; font-size: 14px; font-weight: 650; letter-spacing: -.025em; }
+    .rm-header h1 span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #4f46e5; color: white; margin-right: 8px; }
+    .rm-header nav { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; }
+    .rm-header nav a { color: #64748b; padding: 6px 0; }
+    .rm-header nav a:hover { color: #25272d; }
+    .rm-container { max-width: 1128px; margin: 0 auto; padding: 28px 24px; }
+    .rm-flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; }
     .rm-flash-notice { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
     .rm-flash-alert { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
-
-    /* Stats bar */
-    .rm-stats { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
-    .rm-stat { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px 20px; flex: 1; min-width: 120px; }
-    .rm-stat-value { font-size: 28px; font-weight: 700; line-height: 1; }
-    .rm-stat-label { font-size: 12px; color: #6b7280; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
-
-    /* Filters */
-    .rm-filters { display: flex; gap: 8px; margin-bottom: 20px; align-items: center; flex-wrap: wrap; }
-    .rm-pill { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid #e5e7eb; background: #fff; color: #6b7280; transition: all 0.15s; }
-    .rm-pill:hover { border-color: #818cf8; color: #4361ee; text-decoration: none; }
-    .rm-pill-active { background: #4361ee; color: #fff; border-color: #4361ee; }
-    .rm-pill-active:hover { background: #3730a3; color: #fff; }
-    .rm-select { padding: 6px 12px; border-radius: 8px; border: 1px solid #e5e7eb; font-size: 12px; background: #fff; color: #374151; cursor: pointer; max-width: 240px; }
-
-    /* Cards */
-    .rm-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px 20px; margin-bottom: 10px; transition: border-color 0.15s; position: relative; }
-    .rm-card:hover { border-color: #818cf8; }
-    .rm-card-link { display: block; color: inherit; }
-    .rm-card-link:hover { text-decoration: none; }
-    .rm-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
-    .rm-card-content { font-size: 14px; color: #374151; line-height: 1.6; }
-    .rm-card-meta { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 11px; color: #9ca3af; }
-    .rm-card-meta code { font-size: 11px; background: #f3f4f6; padding: 2px 6px; border-radius: 4px; color: #6b7280; }
-
-    /* Badges */
-    .rm-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; text-transform: capitalize; }
-    .rm-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
-    .rm-status-pending { background: #fef3c7; color: #92400e; }
-    .rm-status-acknowledged { background: #dbeafe; color: #1e40af; }
-    .rm-status-resolved { background: #d1fae5; color: #065f46; }
-    .rm-status-dismissed { background: #f3f4f6; color: #6b7280; }
-    .rm-dot-pending { background: #f59e0b; }
-    .rm-dot-acknowledged { background: #3b82f6; }
-    .rm-dot-resolved { background: #10b981; }
-    .rm-dot-dismissed { background: #9ca3af; }
-    .rm-intent-fix { background: #fef2f2; color: #991b1b; }
-    .rm-intent-change { background: #eff6ff; color: #1e40af; }
-    .rm-intent-question { background: #f5f3ff; color: #5b21b6; }
-    .rm-intent-approve { background: #ecfdf5; color: #065f46; }
-    .rm-severity-blocking { background: #fef2f2; color: #991b1b; font-weight: 700; }
-    .rm-severity-important { background: #fff7ed; color: #9a3412; }
-    .rm-severity-suggestion { background: #f3f4f6; color: #6b7280; }
-
-    /* Detail page */
-    .rm-detail { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 24px; }
-    .rm-detail-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
-    .rm-detail-content { font-size: 15px; line-height: 1.7; margin-bottom: 24px; white-space: pre-wrap; }
-    .rm-detail-meta { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 13px; margin-bottom: 24px; padding: 16px; background: #f9fafb; border-radius: 8px; }
-    .rm-detail-meta dt { color: #6b7280; font-weight: 500; }
-    .rm-detail-meta dd { color: #374151; }
-    .rm-detail-meta dd code { font-size: 12px; background: #e5e7eb; padding: 1px 5px; border-radius: 3px; }
-
-    /* Thread */
-    .rm-thread { margin-top: 24px; border-top: 1px solid #e5e7eb; padding-top: 20px; }
-    .rm-thread h3 { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: #374151; }
-    .rm-thread-entry { padding: 12px 16px; border-radius: 8px; margin-bottom: 8px; font-size: 13px; line-height: 1.5; }
-    .rm-thread-agent { background: #eff6ff; border-left: 3px solid #3b82f6; }
-    .rm-thread-user { background: #f9fafb; border-left: 3px solid #e5e7eb; }
-    .rm-thread-role { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
-    .rm-thread-time { font-size: 11px; color: #9ca3af; margin-top: 4px; }
-
-    /* Actions */
-    .rm-actions { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
-    .rm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; border: 1px solid #e5e7eb; background: #fff; color: #374151; cursor: pointer; transition: all 0.15s; }
-    .rm-btn:hover { border-color: #818cf8; color: #4361ee; text-decoration: none; }
-    .rm-btn-primary { background: #4361ee; color: #fff; border-color: #4361ee; }
-    .rm-btn-primary:hover { background: #3730a3; color: #fff; }
-    .rm-btn-success { background: #10b981; color: #fff; border-color: #10b981; }
-    .rm-btn-success:hover { background: #059669; color: #fff; }
-    .rm-btn-danger { background: #ef4444; color: #fff; border-color: #ef4444; }
-    .rm-btn-danger:hover { background: #dc2626; color: #fff; }
-
-    /* Forms */
-    .rm-form-group { margin-bottom: 12px; }
-    .rm-form-group label { display: block; font-size: 12px; font-weight: 500; color: #6b7280; margin-bottom: 4px; }
-    .rm-input { width: 100%; padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 13px; font-family: inherit; resize: vertical; }
-    .rm-input:focus { outline: none; border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
-
-    /* Back link */
-    .rm-back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #6b7280; margin-bottom: 16px; }
-    .rm-back:hover { color: #4361ee; text-decoration: none; }
-
-    /* Empty state */
-    .rm-empty { text-align: center; padding: 48px 24px; color: #9ca3af; }
-    .rm-empty-icon { font-size: 36px; margin-bottom: 12px; }
-    .rm-empty-text { font-size: 14px; }
-
-    /* Two-column layout */
-    .rm-layout { display: flex; gap: 24px; }
-    .rm-main { flex: 1; min-width: 0; }
-    .rm-panel { width: 420px; flex-shrink: 0; position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; background: #f8f9fa; }
-    .rm-panel .rm-detail { border-left: 3px solid #818cf8; }
-    .rm-card-active { border-color: #818cf8 !important; background: #f5f3ff; }
-    .rm-panel-empty { display: none; }
-
-    /* Responsive */
-    @media (max-width: 900px) {
-      .rm-layout { flex-direction: column; }
-      .rm-panel { width: 100%; position: static; max-height: none; background: #f8f9fa; }
-    }
-    @media (max-width: 640px) {
-      .rm-stats { flex-direction: column; }
-      .rm-stat { min-width: unset; }
-      .rm-filters { flex-direction: column; align-items: stretch; }
-      .rm-detail-header { flex-direction: column; align-items: flex-start; }
-    }
+    .rm-footer { max-width: 1128px; margin: 0 auto; padding: 0 24px 28px; color: #596579; font-size: 11px; text-align: left; }
+    :focus-visible { outline: 3px solid #6366f1; outline-offset: 3px; }
+    @media (max-width: 640px) { .rm-header { padding: 12px 16px; } .rm-container { padding: 24px 16px; } .rm-header nav { gap: 12px; } }
   </style>
 </head>
 <body>
@@ -155,5 +46,8 @@
 
     <%= yield %>
   </main>
+  <footer class="rm-footer">
+    Built with love in Sydney by <a href="https://nauman.one">Nauman Tariq</a> and Pavelabs.
+  </footer>
 </body>
 </html>

data/app/views/rails_markup/dashboard/_annotation_card.html.erb

@@ -2,16 +2,11 @@
   <a href="<%= rails_markup.annotation_path(annotation) %>"
      data-turbo-frame="detail-panel"
      class="rm-card-link">
-    <div class="rm-card-header">
-      <span class="rm-dot rm-dot-<%= annotation.status %>"></span>
-      <span class="rm-badge rm-status-<%= annotation.status %>"><%= annotation.status %></span>
-      <span class="rm-badge rm-intent-<%= annotation.intent %>"><%= annotation.intent %></span>
-      <% if annotation.severity != "suggestion" %>
-        <span class="rm-badge rm-severity-<%= annotation.severity %>"><%= annotation.severity %></span>
-      <% end %>
-    </div>
     <div class="rm-card-content"><%= truncate(annotation.content, length: 200) %></div>
     <div class="rm-card-meta">
+      <% unless local_assigns[:board] %><span class="rm-row-status"><span class="rm-dot rm-dot-<%= annotation.status %>"></span><%= annotation.status.capitalize %></span><% end %>
+      <% if annotation.intent != "change" %><span class="rm-badge rm-intent-<%= annotation.intent %>"><%= annotation.intent %></span><% end %>
+      <% if annotation.severity != "suggestion" %><span class="rm-badge rm-severity-<%= annotation.severity %>"><%= annotation.severity %></span><% end %>
       <code><%= truncate(annotation.page_url, length: 50) %></code>
       <% if annotation.author_name.present? %>
         <span class="rm-author"><%= annotation.author_name %></span>
@@ -20,6 +15,7 @@
       <% if annotation.thread.any? %>
         <span><%= annotation.thread.size %> replies</span>
       <% end %>
+      <span class="rm-card-number">#<%= annotation.id %></span>
     </div>
   </a>
 </div>

data/app/views/rails_markup/dashboard/_annotation_list.html.erb

@@ -47,8 +47,12 @@
       <% elsif @current_author.present? %>
         No annotations by <%= @current_author %>.
         <a href="<%= rails_markup.root_path(status: @current_status, page_url: @current_page_url) %>">Clear filter</a>
+      <% elsif @total_count == 0 %>
+        <h3 class="rm-empty-title">Your next improvement starts on the page.</h3>
+        <p class="rm-empty-help">Open a page in your app, expand the markup toolbar, and select an element to leave feedback. Your annotations will appear here.</p>
       <% elsif @current_status != "all" %>
         No <%= @current_status %> annotations.
+        <p class="rm-empty-help"><a href="<%= rails_markup.root_path(status: 'all', page_url: @current_page_url) %>">View all feedback</a> or use the toolbar in your app to add a new annotation.</p>
       <% else %>
         No annotations yet.<br>Use the toolbar to start annotating.
       <% end %>

data/app/views/rails_markup/dashboard/_feedback_modal.html.erb

@@ -0,0 +1,4 @@
+<dialog class="rm-feedback-modal" aria-label="Feedback details">
+  <turbo-frame id="detail-panel" class="rm-modal-frame"></turbo-frame>
+</dialog>
+<%= render "modal_navigation" %>

data/app/views/rails_markup/dashboard/_filters.html.erb

@@ -1,37 +1,31 @@
-<div class="rm-filters">
+<div class="rm-filters rm-status-tabs" role="group" aria-label="Filter by status">
   <%
     statuses = [
-      ["all", "All"],
-      ["pending", "Pending"],
-      ["acknowledged", "Acknowledged"],
-      ["resolved", "Resolved"],
-      ["dismissed", "Dismissed"]
+      ["all", "All", @total_count],
+      ["pending", "Pending", @pending_count],
+      ["acknowledged", "Acknowledged", @acknowledged_count],
+      ["resolved", "Resolved", @resolved_count],
+      ["dismissed", "Dismissed", @dismissed_count]
     ]
   %>
-  <% statuses.each do |value, label| %>
+  <% statuses.each do |value, label, count| %>
     <a href="<%= rails_markup.root_path(status: value, page_url: @current_page_url, q: @current_query, author: @current_author) %>"
-       class="rm-pill <%= 'rm-pill-active' if @current_status == value %>">
-      <%= label %>
+       class="rm-pill <%= 'rm-pill-active' if @current_status == value %>" <%= 'aria-current=page' if @current_status == value %>>
+      <%= label %> <span class="rm-tab-count"><%= count %></span>
     </a>
   <% end %>
 
-  <% if @current_status.in?(%w[pending acknowledged]) && @annotations.any? %>
-    <%= form_tag(rails_markup.dismiss_all_path(status: @current_status), method: :post, style: "display:inline", data: { turbo_confirm: "Dismiss all #{@current_status} annotations?" }) do %>
-      <button type="submit" class="rm-pill" style="color: #ef4444; border-color: #fecaca;">Dismiss all <%= @current_status %></button>
-    <% end %>
-  <% end %>
-
-  <div style="margin-left: auto; display: flex; gap: 4px; align-items: center;">
+  <div class="rm-filter-tools" role="group" aria-label="View">
     <a href="<%= rails_markup.root_path(status: @current_status, page_url: @current_page_url, q: @current_query, author: @current_author) %>"
        class="rm-pill <%= 'rm-pill-active' unless action_name == 'board' %>">List</a>
     <a href="<%= rails_markup.board_path %>" class="rm-pill <%= 'rm-pill-active' if action_name == 'board' %>">Board</a>
   </div>
 </div>
 
-<div class="rm-filters">
+<div class="rm-filters rm-filter-row">
   <%# Search %>
-  <form action="<%= rails_markup.root_path %>" method="get" style="display:flex;gap:6px;align-items:center;">
-    <input type="text" name="q" value="<%= @current_query %>" placeholder="Search annotations..." class="rm-select" style="min-width:180px;">
+  <form action="<%= rails_markup.root_path %>" method="get" class="rm-search-form" role="search">
+    <input type="search" name="q" value="<%= @current_query %>" placeholder="Search annotations..." aria-label="Search annotations" class="rm-select">
     <input type="hidden" name="status" value="<%= @current_status %>">
     <input type="hidden" name="page_url" value="<%= @current_page_url %>">
     <input type="hidden" name="author" value="<%= @current_author %>">
@@ -41,9 +35,13 @@
     <% end %>
   </form>
 
+  <details class="rm-options" <%= 'open' if @current_page_url.present? || @current_author.present? %>>
+    <summary>Options<%= ' · filtered' if @current_page_url.present? || @current_author.present? %></summary>
+    <div class="rm-options-content">
+      <div class="rm-options-heading">Filter feedback</div>
   <%# Page URL filter %>
   <% if @page_urls.any? %>
-    <select class="rm-select" onchange="document.getElementById('annotations-content').src=this.value">
+    <select id="rm-page-filter" class="rm-select" aria-label="Filter by page" onchange="window.location=this.value">
       <option value="<%= rails_markup.root_path(status: @current_status == 'all' ? nil : @current_status, q: @current_query, author: @current_author) %>">All pages</option>
       <% @page_urls.each do |url| %>
         <option value="<%= rails_markup.root_path(status: @current_status == 'all' ? nil : @current_status, page_url: url, q: @current_query, author: @current_author) %>"
@@ -56,7 +54,7 @@
 
   <%# Author filter %>
   <% if @authors.any? %>
-    <select class="rm-select" onchange="window.location=this.value">
+    <select class="rm-select" aria-label="Filter by author" onchange="window.location=this.value">
       <option value="<%= rails_markup.root_path(status: @current_status, page_url: @current_page_url, q: @current_query) %>">All authors</option>
       <% @authors.each do |author| %>
         <option value="<%= rails_markup.root_path(status: @current_status, page_url: @current_page_url, q: @current_query, author: author) %>"
@@ -67,9 +65,20 @@
     </select>
   <% end %>
 
+  <div class="rm-options-heading">Export</div>
   <%# Export %>
-  <div style="margin-left:auto;display:flex;gap:4px;">
+  <div class="rm-filter-tools" role="group" aria-label="Export annotations">
     <a href="<%= rails_markup.export_csv_path(status: @current_status, page_url: @current_page_url, q: @current_query, author: @current_author) %>" class="rm-pill">CSV</a>
     <a href="<%= rails_markup.export_json_path(status: @current_status, page_url: @current_page_url, q: @current_query, author: @current_author) %>" class="rm-pill">JSON</a>
   </div>
+      <div class="rm-options-heading">Toolbar</div>
+      <%= render "toolbar_preferences" %>
+  <% if @current_status.in?(%w[pending acknowledged]) && @annotations.any? %>
+    <%= form_tag(rails_markup.dismiss_all_path(status: @current_status), method: :post, style: "display:inline", data: { turbo_confirm: "Dismiss all #{@current_status} annotations?" }) do %>
+      <button type="submit" class="rm-pill" style="color: #ef4444; border-color: #fecaca;">Dismiss all <%= @current_status %></button>
+    <% end %>
+  <% end %>
+
+    </div>
+  </details>
 </div>