feat(frontend): add thumbnail support to TagsSelect component

Display item and pokemon images in dropdown options and selected values
Update Admin, Dish, Habitat, Pokemon, and Recipe views to pass image URLs
This commit is contained in:
2026-05-07 09:59:10 +08:00
parent bcf8dd9cb5
commit b1cf40edd0
7 changed files with 71 additions and 15 deletions

View File

@@ -2041,10 +2041,18 @@ button:disabled,
}
.tags-select__single-value {
display: block;
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
max-width: 100%;
overflow: hidden;
color: var(--ink);
}
.tags-select__single-value span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -2054,6 +2062,7 @@ button:disabled,
align-items: center;
justify-content: center;
gap: 6px;
min-width: 0;
min-height: 28px;
padding: 4px 8px;
border: 1px solid rgba(42, 117, 187, 0.28);
@@ -2064,6 +2073,27 @@ button:disabled,
font-weight: 850;
}
.tags-select__tag > span:first-of-type {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.tags-select__thumb {
flex: 0 0 auto;
width: 28px;
height: 28px;
border: 1px solid var(--line);
border-radius: var(--radius-small);
background: var(--surface-soft);
object-fit: contain;
}
.tags-select__thumb--tag {
width: 20px;
height: 20px;
}
.tags-select__remove {
min-width: 18px;
min-height: 18px;
@@ -2145,6 +2175,20 @@ button:disabled,
cursor: pointer;
}
.tags-select__option-label {
display: flex;
align-items: center;
flex: 1 1 auto;
gap: 8px;
min-width: 0;
}
.tags-select__option-label span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.tags-select__option:hover,
.tags-select__option.active,
.tags-select__option.selected {