Style edited fields in metadata editor

This commit is contained in:
ChrisScott9456
2026-06-28 20:56:46 -04:00
parent 8917a5d076
commit cde2b85148
4 changed files with 9 additions and 1 deletions
@@ -104,6 +104,7 @@ export const SongEditModal = ({ songs }: { songs: Song[] }) => {
<Table.Tbody>
{editor.sortedFieldEntries.map(([key, value]) => (
<TagFieldRow
isDirty={key in editor.editedFields}
isMixed={editor.mixedKeys.has(key)}
key={key}
meta={editor.getFieldMeta(key)}
@@ -6,3 +6,7 @@
font-size: 1.05rem;
line-height: 1;
}
.dirty-label {
box-shadow: inset 2px 0 0 var(--mantine-primary-color-filled);
}
@@ -12,6 +12,7 @@ import { TextInput } from '/@/shared/components/text-input/text-input';
import { Textarea } from '/@/shared/components/textarea/textarea';
interface TagFieldRowProps {
isDirty?: boolean;
isMixed: boolean;
meta: KnownTag;
mixedPlaceholder?: string;
@@ -22,6 +23,7 @@ interface TagFieldRowProps {
}
export const TagFieldRow = ({
isDirty,
isMixed,
meta,
mixedPlaceholder,
@@ -31,7 +33,7 @@ export const TagFieldRow = ({
value,
}: TagFieldRowProps) => (
<Table.Tr data-field-key={tagKey} key={tagKey}>
<Table.Th>{meta.label}</Table.Th>
<Table.Th className={isDirty ? styles.dirtyLabel : undefined}>{meta.label}</Table.Th>
<Table.Td>
{meta.type === 'textarea' ? (
<Textarea
@@ -323,6 +323,7 @@ export const useMetadataEditor = ({ browser, songs: songsProp, utils }: UseMetad
artworkDisplayUrl,
artworkIsMixed,
availableToAdd,
editedFields,
error,
getFieldMeta,
handleAddField,