Add MDI icon picker for player icon settings#1779
Conversation
|
Satisfies Music Assistant Project Board (view) |
|
So we are slowly switching everything to lucide icons. @MarvinSchenkel, do you think this make sense or it would be preferable to directly update it with an icon picker with lucide icons ? |
If the effort is low the change the icons in the picker to lucide icons, I would suggest to go for lucide 👍 |
|
@MarvinSchenkel hmmm, i don't think it's low coz we have to do a new component (even if i think there is already examples online so that's ok) but the main problem is that everyone who's already using custom mdi icons will not have it anymore. So either we chose a default icon if they were using a mdi icon and we let them modify with lucide for others or we stay with mdi for now (but we will modify it at some point) |
Replaces the plain text field for
ConfigEntryType.ICON(player icon settings) with a proper autocomplete icon picker, matching the UX pattern from Home Assistant'sha-icon-picker.Changes
src/components/MdiIconPicker.vue— new component:v-autocompletewith icon preview, 5-level keyword search ranking (exact name → exact keyword → starts-with → contains name → contains keyword), max 100 resultssrc/views/settings/ConfigEntryField.vue— swapv-text-fieldforMdiIconPickeronICONconfig entriesscripts/gen-mdi-icon-names.mjs— build-time script that generatessrc/helpers/mdi-icon-names.tsfrom@mdi/svg/meta.json(7188 icons with tags + aliases for keyword search)vite.config.ts— VitebuildStartplugin calls the gen script automatically on everydev/buildrunpackage.json— remove unused@mdi/js; add@mdi/svgas devDependency (providesmeta.jsonwith icon metadata).gitignore— exclude the generatedsrc/helpers/mdi-icon-names.ts(rebuilt at build time, not committed)Approach
Follows the same pattern as Home Assistant: icon list is generated at build time from
@mdi/svg/meta.jsonwhich includes tags and aliases for quality keyword search. The generated file is gitignored and rebuilt automatically.Screenshot