From 7688096fcd9b445f3a1f7ac6d8ef42539a3a8447 Mon Sep 17 00:00:00 2001
From: Frank Tovar <mail@franktovar.de>
Date: Wed, 18 Mar 2026 00:34:42 +0100
Subject: [PATCH] Refine table selector chrome

---
 src/RolemasterDb.App/wwwroot/app.css | 304 +++++++++++++++++++++++----
 1 file changed, 260 insertions(+), 44 deletions(-)

diff --git a/src/RolemasterDb.App/wwwroot/app.css b/src/RolemasterDb.App/wwwroot/app.css
index d3e85d7..8315cdb 100644
--- a/src/RolemasterDb.App/wwwroot/app.css
+++ b/src/RolemasterDb.App/wwwroot/app.css
@@ -314,11 +314,6 @@ textarea {
     min-height: 100%;
 }
 
-.critical-cell-status-row {
-    display: flex;
-    justify-content: flex-end;
-}
-
 .critical-cell-status-chip,
 .critical-editor-curation-badge {
     display: inline-flex;
@@ -581,6 +576,107 @@ textarea {
     gap: 0.35rem;
 }
 
+.table-select-shell {
+    position: relative;
+}
+
+.table-select-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    text-align: left;
+    padding: 0.55rem 0.7rem;
+    border: 1px solid rgba(127, 96, 55, 0.28);
+    border-radius: 8px;
+    background: rgba(255, 252, 247, 0.96);
+    box-shadow: none;
+    appearance: none;
+}
+
+.table-select-trigger-copy {
+    display: block;
+    min-width: 0;
+}
+
+.table-select-trigger-title {
+    color: var(--ink);
+    font-family: var(--font-heading);
+}
+
+.table-select-trigger-chips,
+.table-select-option-chips {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    justify-content: flex-end;
+}
+
+.table-selector-backdrop {
+    position: fixed;
+    inset: 0;
+    border: none;
+    background: transparent;
+    padding: 0;
+    z-index: 15;
+}
+
+.table-select-menu {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: calc(100% + 0.1rem);
+    z-index: 20;
+    display: grid;
+    gap: 0;
+    padding: 0.1rem;
+    border-radius: 8px;
+    background: rgba(255, 250, 242, 0.98);
+    border: 1px solid rgba(127, 96, 55, 0.22);
+    box-shadow: 0 10px 18px rgba(41, 22, 11, 0.1);
+    max-height: min(28rem, 60vh);
+    overflow: auto;
+}
+
+.table-select-option {
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    padding: 0.35rem 0.45rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.45rem;
+    text-align: left;
+}
+
+.table-select-option.is-selected {
+    outline: 1px solid rgba(41, 22, 11, 0.14);
+    outline-offset: -1px;
+}
+
+.table-select-option.is-curated {
+    background: rgba(102, 138, 83, 0.12);
+}
+
+.table-select-option.needs-curation {
+    background: rgba(184, 121, 59, 0.12);
+}
+
+.table-select-option-main {
+    display: block;
+    min-width: 0;
+}
+
+.table-select-option-title {
+    color: var(--ink);
+    font-family: var(--font-heading);
+    font-weight: 400;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .table-browser-toolbar-copy,
 .table-browser-reading-hint,
 .table-browser-edit-hint {
@@ -641,25 +737,13 @@ textarea {
     background: rgba(255, 255, 255, 0.85);
     min-width: 190px;
     max-width: 250px;
-    padding: 0;
+    padding: 0.55rem;
 }
 
 .critical-table-cell {
     position: relative;
 }
 
-.critical-table-cell.is-editable {
-    cursor: pointer;
-    transition: background-color 0.16s ease, box-shadow 0.16s ease;
-}
-
-.critical-table-cell.is-editable:hover,
-.critical-table-cell.is-editable:focus-visible {
-    background: rgba(255, 248, 232, 0.98);
-    box-shadow: inset 0 0 0 2px rgba(184, 121, 59, 0.4);
-    outline: none;
-}
-
 .critical-table-cell.is-curated {
     background:
         linear-gradient(135deg, rgba(102, 138, 83, 0.16), transparent 34%),
@@ -672,11 +756,49 @@ textarea {
         rgba(255, 255, 255, 0.85);
 }
 
+.critical-table-cell-shell {
+    display: flex;
+    flex-direction: column;
+    gap: 0.55rem;
+    min-height: 100%;
+}
+
+.critical-table-cell-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.45rem;
+    flex-wrap: wrap;
+}
+
+.critical-cell-action-button {
+    border: 1px solid rgba(127, 96, 55, 0.18);
+    border-radius: 999px;
+    padding: 0.3rem 0.7rem;
+    background: rgba(255, 252, 247, 0.92);
+    color: #5b4327;
+    font-size: 0.82rem;
+    line-height: 1.2;
+}
+
+.critical-cell-action-button.is-curation {
+    background: rgba(255, 242, 223, 0.95);
+    border-color: rgba(184, 121, 59, 0.28);
+    color: #8a5b21;
+}
+
+.critical-cell-action-button.is-edit {
+    margin-left: auto;
+}
+
+.critical-cell-action-button:hover {
+    background: rgba(255, 248, 236, 0.98);
+}
+
 .critical-table td .critical-cell {
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
-    padding: 0.55rem;
     box-sizing: border-box;
 }
 
@@ -692,11 +814,6 @@ textarea {
     font-size: 2rem;
 }
 
-.critical-table-cell.is-editable:hover .critical-cell-description,
-.critical-table-cell.is-editable:focus-visible .critical-cell-description {
-    color: #8f5a2f;
-}
-
 .empty-cell {
     color: #a08464;
     font-style: italic;
@@ -828,25 +945,6 @@ textarea {
     gap: 0.85rem;
 }
 
-.critical-editor-source-grid {
-    display: grid;
-    gap: 0.85rem;
-    grid-template-columns: minmax(240px, 0.8fr) minmax(320px, 1.2fr);
-}
-
-.critical-editor-status-card,
-.critical-editor-source-card {
-    align-content: start;
-}
-
-.critical-editor-curation-toggle {
-    display: flex;
-    align-items: center;
-    gap: 0.6rem;
-    font-family: var(--font-heading);
-    color: #5b4327;
-}
-
 .critical-editor-source-image {
     width: 100%;
     max-height: 340px;
@@ -856,6 +954,11 @@ textarea {
     background: rgba(255, 255, 255, 0.96);
 }
 
+.critical-editor-source-image.is-inline {
+    height: 100%;
+    max-height: none;
+}
+
 .critical-editor-section h4,
 .critical-editor-subsection h5 {
     margin: 0;
@@ -902,6 +1005,8 @@ textarea {
 
 .critical-editor-textarea.tall {
     min-height: 8rem;
+    height: 8rem;
+    resize: vertical;
 }
 
 .critical-editor-dialog input.input-shell,
@@ -921,6 +1026,42 @@ textarea {
     border: 1px solid rgba(141, 43, 30, 0.18);
 }
 
+.critical-editor-quick-parse-grid {
+    display: grid;
+    gap: 0.85rem;
+    grid-template-columns: minmax(320px, 1.35fr) minmax(260px, 1fr);
+    align-items: start;
+}
+
+.critical-editor-quick-parse-source {
+    display: grid;
+    gap: 0.35rem;
+}
+
+.critical-editor-quick-parse-source-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+}
+
+.critical-editor-quick-parse-source-header label {
+    margin: 0;
+}
+
+.critical-editor-quick-parse-source-frame {
+    height: 8rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.55rem;
+    border-radius: 14px;
+    border: 1px solid rgba(127, 96, 55, 0.14);
+    background: rgba(255, 255, 255, 0.96);
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
 .critical-editor-inline-copy {
     margin: 0;
 }
@@ -1201,6 +1342,80 @@ textarea {
     box-shadow: none;
 }
 
+.critical-curation-dialog {
+    width: min(860px, 100%);
+    max-height: min(480px, calc(100vh - 2.5rem));
+    align-self: center;
+}
+
+.critical-curation-body {
+    flex: 0 1 auto;
+    align-items: stretch;
+    overflow: hidden;
+    padding: 0.85rem 1rem 1rem;
+}
+
+.critical-curation-grid {
+    display: grid;
+    gap: 0.85rem;
+    grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
+    align-items: stretch;
+}
+
+.critical-curation-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.45rem 0.65rem;
+    padding: 0.55rem 0.7rem;
+    border-radius: 14px;
+    background: rgba(247, 239, 225, 0.5);
+    border: 1px solid rgba(127, 96, 55, 0.12);
+}
+
+.critical-curation-legend-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    white-space: nowrap;
+}
+
+.critical-curation-legend-item strong {
+    font-size: 0.9rem;
+    font-weight: 400;
+}
+
+.critical-curation-preview-card,
+.critical-curation-source-card {
+    min-height: 100%;
+    padding: 0.75rem;
+}
+
+.critical-curation-source-card {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.critical-curation-source-image {
+    width: 100%;
+    max-height: 300px;
+    object-fit: contain;
+}
+
+.critical-curation-source-empty {
+    width: 100%;
+    min-height: 180px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+.critical-curation-dialog .critical-editor-header,
+.critical-curation-dialog .critical-editor-footer {
+    padding: 0.85rem 1rem;
+}
+
 @media (max-width: 640.98px) {
     .content-shell {
         padding: 1rem;
@@ -1243,7 +1458,8 @@ textarea {
 
     .critical-editor-effect-row-main,
     .critical-editor-branch-line,
-    .critical-editor-source-grid {
+    .critical-editor-quick-parse-grid,
+    .critical-curation-grid {
         grid-template-columns: 1fr;
     }