From f474a77bcb71378dc4cb3070c38eaeea1b767635 Mon Sep 17 00:00:00 2001
From: ZGaetano <zgaetano@wilddragon.net>
Date: Sat, 23 May 2026 00:04:25 -0400
Subject: [PATCH] feat(web-ui): style the asset right-click menu (.ctx-menu)

The AssetContextMenu in screens-library.jsx has shipped without
matching styles, so the menu rendered as raw HTML on the page. Adds
.ctx-menu / .ctx-header / .ctx-divider / .ctx-section-label / .ctx-empty
plus button + danger styles matching the existing .row-menu look.
---
 services/web-ui/public/styles-rest.css | 72 ++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)

diff --git a/services/web-ui/public/styles-rest.css b/services/web-ui/public/styles-rest.css
index f579e50..59b6411 100644
--- a/services/web-ui/public/styles-rest.css
+++ b/services/web-ui/public/styles-rest.css
@@ -916,3 +916,75 @@
 .search-result-kind.kind-job { color: #9EE7D2; border-color: rgba(45,212,168,0.25); }
 .search-result-kind.kind-user { color: #D5B8FF; border-color: rgba(181,124,250,0.25); }
 .search-result-kind.kind-nav { color: var(--text-2); }
+
+/* ========== Asset right-click menu ========== */
+.ctx-menu {
+  position: fixed;
+  z-index: 80;
+  min-width: 220px;
+  max-width: 280px;
+  background: var(--bg-1);
+  border: 1px solid var(--border-stronger);
+  border-radius: var(--r-md);
+  box-shadow: var(--shadow-pop);
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  font-size: 12.5px;
+}
+.ctx-menu .ctx-header {
+  padding: 8px 10px 6px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-3);
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ctx-menu .ctx-divider {
+  height: 1px;
+  background: var(--border);
+  margin: 4px 2px;
+}
+.ctx-menu .ctx-section-label {
+  font-size: 9.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-4);
+  padding: 6px 10px 4px;
+}
+.ctx-menu .ctx-empty {
+  padding: 6px 10px 10px;
+  font-size: 11.5px;
+  color: var(--text-3);
+  font-style: italic;
+}
+.ctx-menu button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: transparent;
+  border: 0;
+  color: var(--text-1);
+  font-size: 12.5px;
+  padding: 7px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+}
+.ctx-menu button svg { color: var(--text-3); flex-shrink: 0; }
+.ctx-menu button:hover:not(:disabled) { background: var(--bg-3); }
+.ctx-menu button:hover:not(:disabled) svg { color: var(--text-1); }
+.ctx-menu button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.ctx-menu button.danger { color: var(--danger); }
+.ctx-menu button.danger svg { color: var(--danger); }
+.ctx-menu button.danger:hover:not(:disabled) {
+  background: var(--danger-soft);
+}