feat(tags): unify recipe modal tag UI with model modal

- Replace recipe modal's custom tag display/edit with shared
  renderCompactTags/setupTagEditMode from ModelTags and utils
- Remove 300+ lines of duplicated tag display and editing code
- Parameterize setupTagEditMode with saveHandler/onSaved/showSuggestions
  options for recipe-specific save flow (updateRecipeMetadata + dirty state)
- Scope all DOM queries in ModelTags.js via options.container / this.closest
  to prevent cross-modal element conflicts
- Fix edit button alignment (justify-content: flex-start)
- Fix tag tooltip selector scoping in setupTagTooltip
- Add width: 100% to #recipeTagsContainer for edit container full width
This commit is contained in:
Will Miao
2026-06-19 16:31:27 +08:00
parent cf0fd0e0ad
commit 968d6d1d1f
7 changed files with 194 additions and 537 deletions

View File

@@ -17,6 +17,8 @@
flex-wrap: nowrap;
gap: 6px;
align-items: center;
min-width: 0;
overflow: hidden;
}
.model-tag-compact {
@@ -28,6 +30,9 @@
font-size: 0.75em;
color: var(--text-color);
white-space: nowrap;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
}
/* Style for empty tags placeholder */
@@ -118,8 +123,9 @@
/* Model Tags Edit Mode */
.model-tags-header {
display: flex;
justify-content: space-between;
justify-content: flex-start;
align-items: center;
overflow: hidden;
}
.edit-tags-btn {
@@ -132,6 +138,7 @@
border-radius: var(--border-radius-xs);
transition: var(--transition-base);
margin-left: var(--space-1);
flex-shrink: 0;
}
.edit-tags-btn.visible,