patch tags

frontend/src/styles.css

@@ -52,6 +52,30 @@ button:hover:not([disabled]) {
   background: #2047d9;
 }
 
+a.button-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font: inherit;
+  border-radius: 2px;
+  border: 1px solid transparent;
+  padding: 0.35rem 0.85rem;
+  background: var(--accent);
+  color: #fff;
+  text-decoration: none;
+  font-weight: 500;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+a.button-link[aria-disabled='true'] {
+  opacity: 0.55;
+  pointer-events: none;
+}
+
+a.button-link:hover:not([aria-disabled='true']) {
+  background: #2047d9;
+}
+
 button.secondary {
   background: transparent;
   color: var(--fg);
@@ -194,6 +218,16 @@ button.icon-button.ghost:hover:not([disabled]) {
   overflow: hidden;
 }
 
+.tags-main {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 220px minmax(0, 1fr);
+  gap: 1.5rem;
+  padding: 0.75rem 1.5rem 1.25rem;
+  min-height: 0;
+  overflow: hidden;
+}
+
 .preview-main {
   flex: 1;
   display: flex;
@@ -254,6 +288,90 @@ button.icon-button.ghost:hover:not([disabled]) {
   border: none;
 }
 
+.tags-panel__body {
+  overflow-y: auto;
+}
+
+.tags-table {
+  width: 100%;
+  overflow: auto;
+}
+
+.tags-table table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 320px;
+}
+
+.tags-table th,
+.tags-table td {
+  padding: 0.45rem 0.6rem;
+  text-align: left;
+  border-bottom: 1px solid var(--divider);
+  font-size: 0.85rem;
+}
+
+.tags-table th.numeric,
+.tags-table td.numeric {
+  text-align: right;
+}
+
+.tags-table th.actions,
+.tags-table td.actions {
+  text-align: right;
+  width: 0;
+}
+
+.tags-table tbody tr:hover {
+  background: var(--surface-subtle);
+}
+
+.tags-table tr.editing {
+  background: rgba(43, 92, 255, 0.08);
+}
+
+.tags-table__label {
+  max-width: 24rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tags-table__swatch {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 2px;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+}
+
+.tags-panel__error {
+  margin: 0.5rem 0;
+  color: var(--danger);
+  font-size: 0.8rem;
+}
+
+.tags-table__label-input {
+  width: 100%;
+}
+
+.tags-table__color-editor {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.tags-table__color-field {
+  width: 7rem;
+  font-family: var(--monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace);
+}
+
+.tags-table__edit-controls {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.4rem;
+}
+
 .preview-workspace__message {
   color: var(--muted);
   font-size: 0.95rem;
@@ -441,6 +559,52 @@ button.icon-button.ghost:hover:not([disabled]) {
   padding: 0;
 }
 
+.sidebar-section {
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.sidebar-section__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 0.75rem;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.sidebar-section__header h3 {
+  margin: 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: inherit;
+}
+
+.sidebar-link {
+  border: none;
+  background: transparent;
+  padding: 0.3rem 0.3rem;
+  text-align: left;
+  font-size: 0.82rem;
+  color: var(--fg);
+  border-radius: 3px;
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+
+.sidebar-link:hover {
+  background: var(--surface-subtle);
+}
+
+.sidebar-link.active {
+  background: rgba(43, 92, 255, 0.12);
+  color: var(--accent);
+  font-weight: 600;
+}
+
 .folder-row.is-drop-target {
   outline: 2px dashed var(--accent);
   outline-offset: 2px;
@@ -631,22 +795,22 @@ button.icon-button.ghost:hover:not([disabled]) {
 
 .tag-filter {
   border: 1px solid var(--border);
-  background: transparent;
+  background: var(--surface-subtle);
   color: var(--fg);
   padding: 0.25rem 0.6rem;
   border-radius: 2px;
   cursor: pointer;
   font-size: 0.85rem;
-  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
+  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
 }
 
 .tag-filter:hover {
-  background: var(--surface-subtle);
+  filter: brightness(0.97);
 }
 
 .tag-filter.active {
-  background: var(--accent);
-  color: white;
+  box-shadow: 0 0 0 1px currentColor inset;
+  transform: translateY(-1px);
 }
 
 .filter-actions {
@@ -668,7 +832,11 @@ button.icon-button.ghost:hover:not([disabled]) {
   background: var(--surface-subtle);
   color: var(--fg);
   font-size: 0.74rem;
-  margin-right: 0.25rem;
+  border: 1px solid transparent;
+}
+
+.tag-chip {
+  gap: 0.25rem;
 }
 
 .empty-state {
@@ -866,10 +1034,15 @@ button.icon-button.ghost:hover:not([disabled]) {
 .tag-pill button {
   background: none;
   border: none;
-  color: var(--muted);
+  color: inherit;
   padding: 0;
   cursor: pointer;
   font-size: 0.85rem;
+  opacity: 0.8;
+}
+
+.tag-pill button:hover {
+  opacity: 1;
 }
 
 input,