From 62796c10af77e272a9d9865938a862d1540ec943 Mon Sep 17 00:00:00 2001 From: "Calum H. (IMB11)" Date: Mon, 26 Oct 2026 15:07:26 +0000 Subject: [PATCH 1/2] refactor(ui): move icon editor into modrinth/ui --- apps/app-frontend/src/App.vue | 2 +- .../InstanceIconEditorModal.vue | 88 ++++++++ .../src/components/ui/library/index.vue | 2 +- .../settings-modal/general-settings.vue | 2 +- .../app-frontend/src/locales/en-US/index.json | 213 ------------------ .../instance-icons/backpack.png | Bin .../illustrations}/instance-icons/beacon.png | Bin .../instance-icons/blue-shark.png | Bin .../instance-icons/bookshelf.png | Bin .../instance-icons/brown-bear.png | Bin .../illustrations}/instance-icons/cake.png | Bin .../instance-icons/campfire.png | Bin .../illustrations}/instance-icons/chest.png | Bin .../instance-icons/cogwheel.png | Bin .../instance-icons/command-block.png | Bin .../instance-icons/cooking-pot.png | Bin .../illustrations}/instance-icons/couch.png | Bin .../instance-icons/crafting-table.png | Bin .../illustrations}/instance-icons/creeper.png | Bin .../instance-icons/enchanting-table.png | Bin .../instance-icons/ender-chest.png | Bin .../instance-icons/ender-dragon.png | Bin .../illustrations}/instance-icons/engine.png | Bin .../illustrations}/instance-icons/fabric.png | Bin .../illustrations}/instance-icons/forge.png | Bin .../illustrations}/instance-icons/furnace.png | Bin .../illustrations}/instance-icons/gizmo.png | Bin .../illustrations}/instance-icons/globe.png | Bin .../instance-icons/grass-block.png | Bin .../illustrations}/instance-icons/lantern.png | Bin .../instance-icons/moobloom.png | Bin .../illustrations}/instance-icons/mr-pack.png | Bin .../instance-icons/neoforge.png | Bin .../illustrations}/instance-icons/orb.png | Bin .../instance-icons/oxygen-distributor.png | Bin .../instance-icons/pancakes.png | Bin .../illustrations}/instance-icons/pickaxe.png | Bin .../instance-icons/poke-ball.png | Bin .../illustrations}/instance-icons/quilt.png | Bin .../instance-icons/redstone-block.png | Bin .../instance-icons/sculk-sensor.png | Bin .../instance-icons/skeleton.png | Bin .../illustrations}/instance-icons/skillet.png | Bin .../instance-icons/slime-block.png | Bin .../instance-icons/space-helmet.png | Bin .../instance-icons/sticky-piston.png | Bin .../illustrations}/instance-icons/sword.png | Bin .../instance-icons/terminal.png | Bin .../instance-icons/tiny-potato.png | Bin .../illustrations}/instance-icons/tire.png | Bin .../illustrations}/instance-icons/tnt.png | Bin .../instance-icons/wrench-rinth.png | Bin .../illustrations}/instance-icons/wrench.png | Bin .../illustrations}/instance-icons/zombie.png | Bin .../base}/icon-editor-modal/editor-catalog.ts | 104 +++++---- .../base/icon-editor-modal/index.ts | 4 + .../base}/icon-editor-modal/index.vue | 102 +++------ .../base/icon-editor-modal/render-icon.ts | 33 +++ .../base/icon-editor-modal/types.ts | 8 + packages/ui/src/components/base/index.ts | 1 + .../edit-server-icon/EditServerIcon.vue | 123 +++++++++- packages/ui/src/locales/en-US/index.json | 213 ++++++++++++++++++ .../stories/base/IconEditorModal.stories.ts | 37 +++ .../stories/servers/EditServerIcon.stories.ts | 7 + 64 files changed, 601 insertions(+), 338 deletions(-) create mode 100644 apps/app-frontend/src/components/ui/instance_settings/InstanceIconEditorModal.vue rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/backpack.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/beacon.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/blue-shark.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/bookshelf.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/brown-bear.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/cake.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/campfire.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/chest.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/cogwheel.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/command-block.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/cooking-pot.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/couch.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/crafting-table.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/creeper.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/enchanting-table.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/ender-chest.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/ender-dragon.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/engine.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/fabric.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/forge.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/furnace.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/gizmo.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/globe.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/grass-block.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/lantern.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/moobloom.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/mr-pack.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/neoforge.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/orb.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/oxygen-distributor.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/pancakes.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/pickaxe.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/poke-ball.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/quilt.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/redstone-block.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/sculk-sensor.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/skeleton.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/skillet.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/slime-block.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/space-helmet.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/sticky-piston.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/sword.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/terminal.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/tiny-potato.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/tire.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/tnt.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/wrench-rinth.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/wrench.png (100%) rename {apps/app-frontend/src/assets => packages/assets/illustrations}/instance-icons/zombie.png (100%) rename {apps/app-frontend/src/components/ui/instance_settings => packages/ui/src/components/base}/icon-editor-modal/editor-catalog.ts (77%) create mode 100644 packages/ui/src/components/base/icon-editor-modal/index.ts rename {apps/app-frontend/src/components/ui/instance_settings => packages/ui/src/components/base}/icon-editor-modal/index.vue (87%) create mode 100644 packages/ui/src/components/base/icon-editor-modal/render-icon.ts create mode 100644 packages/ui/src/components/base/icon-editor-modal/types.ts create mode 100644 packages/ui/src/stories/base/IconEditorModal.stories.ts diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue index 38fc7a88f7c..9024f45f985 100644 --- a/apps/app-frontend/src/App.vue +++ b/apps/app-frontend/src/App.vue @@ -68,7 +68,7 @@ import ErrorModal from '@/components/ui/ErrorModal.vue' import HostingUpdateRequired from '@/components/ui/HostingUpdateRequired.vue' import AddServerToInstanceModal from '@/components/ui/install_flow/AddServerToInstanceModal.vue' import UnknownPackWarningModal from '@/components/ui/install_flow/UnknownPackWarningModal.vue' -import IconEditorModal from '@/components/ui/instance_settings/icon-editor-modal/index.vue' +import IconEditorModal from '@/components/ui/instance_settings/InstanceIconEditorModal.vue' import MinecraftAuthErrorModal from '@/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue' import MinecraftRequiredModal from '@/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue' import InstallToPlayModal from '@/components/ui/modal/InstallToPlayModal.vue' diff --git a/apps/app-frontend/src/components/ui/instance_settings/InstanceIconEditorModal.vue b/apps/app-frontend/src/components/ui/instance_settings/InstanceIconEditorModal.vue new file mode 100644 index 00000000000..eb1fdfce3cf --- /dev/null +++ b/apps/app-frontend/src/components/ui/instance_settings/InstanceIconEditorModal.vue @@ -0,0 +1,88 @@ + + + diff --git a/apps/app-frontend/src/components/ui/library/index.vue b/apps/app-frontend/src/components/ui/library/index.vue index 20000b683fe..5c77fbb1bb0 100644 --- a/apps/app-frontend/src/components/ui/library/index.vue +++ b/apps/app-frontend/src/components/ui/library/index.vue @@ -4,7 +4,7 @@ import { ContextMenu, defineMessages, useVIntl } from '@modrinth/ui' import { computed, nextTick, onDeactivated, onUnmounted, ref, toRef, watch } from 'vue' import Draggable from 'vuedraggable' -import IconEditorModal from '@/components/ui/instance_settings/icon-editor-modal/index.vue' +import IconEditorModal from '@/components/ui/instance_settings/InstanceIconEditorModal.vue' import GroupInstancesModal from '@/components/ui/library/group-instances-modal.vue' import InstanceGroup from '@/components/ui/library/instance-group/index.vue' import InstanceGroupDnd from '@/components/ui/library/instance-group/instance-group-dnd.vue' diff --git a/apps/app-frontend/src/features/instances/settings-modal/general-settings.vue b/apps/app-frontend/src/features/instances/settings-modal/general-settings.vue index 1524d2a8ed3..1502bdf39e6 100644 --- a/apps/app-frontend/src/features/instances/settings-modal/general-settings.vue +++ b/apps/app-frontend/src/features/instances/settings-modal/general-settings.vue @@ -22,7 +22,7 @@ import { open } from '@tauri-apps/plugin-dialog' import { computed, type Ref, ref, watch } from 'vue' import { useRouter } from 'vue-router' -import IconEditorModal from '@/components/ui/instance_settings/icon-editor-modal/index.vue' +import IconEditorModal from '@/components/ui/instance_settings/InstanceIconEditorModal.vue' import ConfirmDeleteInstanceModal from '@/components/ui/modal/ConfirmDeleteInstanceModal.vue' import { trackEvent } from '@/helpers/analytics' import { install_duplicate_instance } from '@/helpers/install' diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json index 3055ce1c772..367fd055025 100644 --- a/apps/app-frontend/src/locales/en-US/index.json +++ b/apps/app-frontend/src/locales/en-US/index.json @@ -3794,219 +3794,6 @@ "instance.files.save-as": { "message": "Save as..." }, - "instance.icon-editor.background": { - "message": "Background" - }, - "instance.icon-editor.background.blue": { - "message": "Blue" - }, - "instance.icon-editor.background.dark-gray": { - "message": "Dark gray" - }, - "instance.icon-editor.background.dark-green": { - "message": "Dark green" - }, - "instance.icon-editor.background.gray": { - "message": "Gray" - }, - "instance.icon-editor.background.green": { - "message": "Green" - }, - "instance.icon-editor.background.indigo": { - "message": "Indigo" - }, - "instance.icon-editor.background.lavender": { - "message": "Lavender" - }, - "instance.icon-editor.background.light-gray": { - "message": "Light gray" - }, - "instance.icon-editor.background.lime": { - "message": "Lime" - }, - "instance.icon-editor.background.orange": { - "message": "Orange" - }, - "instance.icon-editor.background.pink": { - "message": "Pink" - }, - "instance.icon-editor.background.purple": { - "message": "Purple" - }, - "instance.icon-editor.background.red": { - "message": "Red" - }, - "instance.icon-editor.background.rose": { - "message": "Rose" - }, - "instance.icon-editor.background.yellow": { - "message": "Yellow" - }, - "instance.icon-editor.description": { - "message": "Mix and match elements to create a custom icon." - }, - "instance.icon-editor.recents": { - "message": "Recents" - }, - "instance.icon-editor.save": { - "message": "Save icon" - }, - "instance.icon-editor.surprise-me": { - "message": "Randomize" - }, - "instance.icon-editor.symbol": { - "message": "Symbol" - }, - "instance.icon-editor.symbol.backpack": { - "message": "Backpack" - }, - "instance.icon-editor.symbol.beacon": { - "message": "Beacon" - }, - "instance.icon-editor.symbol.blue-shark": { - "message": "Blue Shark" - }, - "instance.icon-editor.symbol.bookshelf": { - "message": "Bookshelf" - }, - "instance.icon-editor.symbol.brown-bear": { - "message": "Brown Bear" - }, - "instance.icon-editor.symbol.cake": { - "message": "Cake" - }, - "instance.icon-editor.symbol.campfire": { - "message": "Campfire" - }, - "instance.icon-editor.symbol.chest": { - "message": "Chest" - }, - "instance.icon-editor.symbol.cogwheel": { - "message": "Cogwheel" - }, - "instance.icon-editor.symbol.command-block": { - "message": "Command Block" - }, - "instance.icon-editor.symbol.cooking-pot": { - "message": "Cooking Pot" - }, - "instance.icon-editor.symbol.couch": { - "message": "Couch" - }, - "instance.icon-editor.symbol.crafting-table": { - "message": "Crafting Table" - }, - "instance.icon-editor.symbol.create-wrench": { - "message": "Wrench" - }, - "instance.icon-editor.symbol.creeper": { - "message": "Creeper" - }, - "instance.icon-editor.symbol.enchanting-table": { - "message": "Enchanting Table" - }, - "instance.icon-editor.symbol.ender-chest": { - "message": "Ender Chest" - }, - "instance.icon-editor.symbol.ender-dragon": { - "message": "Ender Dragon" - }, - "instance.icon-editor.symbol.engine": { - "message": "Engine" - }, - "instance.icon-editor.symbol.fabric": { - "message": "Fabric" - }, - "instance.icon-editor.symbol.forge": { - "message": "Forge" - }, - "instance.icon-editor.symbol.furnace": { - "message": "Furnace" - }, - "instance.icon-editor.symbol.gizmo": { - "message": "Gizmo" - }, - "instance.icon-editor.symbol.globe": { - "message": "Globe" - }, - "instance.icon-editor.symbol.grass-block": { - "message": "Grass Block" - }, - "instance.icon-editor.symbol.lantern": { - "message": "Lantern" - }, - "instance.icon-editor.symbol.moobloom": { - "message": "Moobloom" - }, - "instance.icon-editor.symbol.mr-pack": { - "message": "Mr Pack" - }, - "instance.icon-editor.symbol.neoforge": { - "message": "NeoForge" - }, - "instance.icon-editor.symbol.orb": { - "message": "Orb" - }, - "instance.icon-editor.symbol.oxygen-distributor": { - "message": "Oxygen Distributor" - }, - "instance.icon-editor.symbol.pancakes": { - "message": "Pancakes" - }, - "instance.icon-editor.symbol.pickaxe": { - "message": "Pickaxe" - }, - "instance.icon-editor.symbol.poke-ball": { - "message": "Poke Ball" - }, - "instance.icon-editor.symbol.quilt": { - "message": "Quilt" - }, - "instance.icon-editor.symbol.redstone-block": { - "message": "Redstone Block" - }, - "instance.icon-editor.symbol.sculk-sensor": { - "message": "Sculk Sensor" - }, - "instance.icon-editor.symbol.skeleton": { - "message": "Skeleton" - }, - "instance.icon-editor.symbol.skillet": { - "message": "Skillet" - }, - "instance.icon-editor.symbol.slime-block": { - "message": "Slime Block" - }, - "instance.icon-editor.symbol.space-helmet": { - "message": "Space Helmet" - }, - "instance.icon-editor.symbol.sticky-piston": { - "message": "Sticky Piston" - }, - "instance.icon-editor.symbol.sword": { - "message": "Sword" - }, - "instance.icon-editor.symbol.terminal": { - "message": "Terminal" - }, - "instance.icon-editor.symbol.tiny-potato": { - "message": "Tiny Potato" - }, - "instance.icon-editor.symbol.tire": { - "message": "Tire" - }, - "instance.icon-editor.symbol.tnt": { - "message": "TNT" - }, - "instance.icon-editor.symbol.wrenth-rinth": { - "message": "Modrinth Wrench" - }, - "instance.icon-editor.symbol.zombie": { - "message": "Zombie" - }, - "instance.icon-editor.title": { - "message": "Icon editor" - }, "instance.last-played": { "message": "Last played" }, diff --git a/apps/app-frontend/src/assets/instance-icons/backpack.png b/packages/assets/illustrations/instance-icons/backpack.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/backpack.png rename to packages/assets/illustrations/instance-icons/backpack.png diff --git a/apps/app-frontend/src/assets/instance-icons/beacon.png b/packages/assets/illustrations/instance-icons/beacon.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/beacon.png rename to packages/assets/illustrations/instance-icons/beacon.png diff --git a/apps/app-frontend/src/assets/instance-icons/blue-shark.png b/packages/assets/illustrations/instance-icons/blue-shark.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/blue-shark.png rename to packages/assets/illustrations/instance-icons/blue-shark.png diff --git a/apps/app-frontend/src/assets/instance-icons/bookshelf.png b/packages/assets/illustrations/instance-icons/bookshelf.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/bookshelf.png rename to packages/assets/illustrations/instance-icons/bookshelf.png diff --git a/apps/app-frontend/src/assets/instance-icons/brown-bear.png b/packages/assets/illustrations/instance-icons/brown-bear.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/brown-bear.png rename to packages/assets/illustrations/instance-icons/brown-bear.png diff --git a/apps/app-frontend/src/assets/instance-icons/cake.png b/packages/assets/illustrations/instance-icons/cake.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/cake.png rename to packages/assets/illustrations/instance-icons/cake.png diff --git a/apps/app-frontend/src/assets/instance-icons/campfire.png b/packages/assets/illustrations/instance-icons/campfire.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/campfire.png rename to packages/assets/illustrations/instance-icons/campfire.png diff --git a/apps/app-frontend/src/assets/instance-icons/chest.png b/packages/assets/illustrations/instance-icons/chest.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/chest.png rename to packages/assets/illustrations/instance-icons/chest.png diff --git a/apps/app-frontend/src/assets/instance-icons/cogwheel.png b/packages/assets/illustrations/instance-icons/cogwheel.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/cogwheel.png rename to packages/assets/illustrations/instance-icons/cogwheel.png diff --git a/apps/app-frontend/src/assets/instance-icons/command-block.png b/packages/assets/illustrations/instance-icons/command-block.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/command-block.png rename to packages/assets/illustrations/instance-icons/command-block.png diff --git a/apps/app-frontend/src/assets/instance-icons/cooking-pot.png b/packages/assets/illustrations/instance-icons/cooking-pot.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/cooking-pot.png rename to packages/assets/illustrations/instance-icons/cooking-pot.png diff --git a/apps/app-frontend/src/assets/instance-icons/couch.png b/packages/assets/illustrations/instance-icons/couch.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/couch.png rename to packages/assets/illustrations/instance-icons/couch.png diff --git a/apps/app-frontend/src/assets/instance-icons/crafting-table.png b/packages/assets/illustrations/instance-icons/crafting-table.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/crafting-table.png rename to packages/assets/illustrations/instance-icons/crafting-table.png diff --git a/apps/app-frontend/src/assets/instance-icons/creeper.png b/packages/assets/illustrations/instance-icons/creeper.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/creeper.png rename to packages/assets/illustrations/instance-icons/creeper.png diff --git a/apps/app-frontend/src/assets/instance-icons/enchanting-table.png b/packages/assets/illustrations/instance-icons/enchanting-table.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/enchanting-table.png rename to packages/assets/illustrations/instance-icons/enchanting-table.png diff --git a/apps/app-frontend/src/assets/instance-icons/ender-chest.png b/packages/assets/illustrations/instance-icons/ender-chest.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/ender-chest.png rename to packages/assets/illustrations/instance-icons/ender-chest.png diff --git a/apps/app-frontend/src/assets/instance-icons/ender-dragon.png b/packages/assets/illustrations/instance-icons/ender-dragon.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/ender-dragon.png rename to packages/assets/illustrations/instance-icons/ender-dragon.png diff --git a/apps/app-frontend/src/assets/instance-icons/engine.png b/packages/assets/illustrations/instance-icons/engine.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/engine.png rename to packages/assets/illustrations/instance-icons/engine.png diff --git a/apps/app-frontend/src/assets/instance-icons/fabric.png b/packages/assets/illustrations/instance-icons/fabric.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/fabric.png rename to packages/assets/illustrations/instance-icons/fabric.png diff --git a/apps/app-frontend/src/assets/instance-icons/forge.png b/packages/assets/illustrations/instance-icons/forge.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/forge.png rename to packages/assets/illustrations/instance-icons/forge.png diff --git a/apps/app-frontend/src/assets/instance-icons/furnace.png b/packages/assets/illustrations/instance-icons/furnace.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/furnace.png rename to packages/assets/illustrations/instance-icons/furnace.png diff --git a/apps/app-frontend/src/assets/instance-icons/gizmo.png b/packages/assets/illustrations/instance-icons/gizmo.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/gizmo.png rename to packages/assets/illustrations/instance-icons/gizmo.png diff --git a/apps/app-frontend/src/assets/instance-icons/globe.png b/packages/assets/illustrations/instance-icons/globe.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/globe.png rename to packages/assets/illustrations/instance-icons/globe.png diff --git a/apps/app-frontend/src/assets/instance-icons/grass-block.png b/packages/assets/illustrations/instance-icons/grass-block.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/grass-block.png rename to packages/assets/illustrations/instance-icons/grass-block.png diff --git a/apps/app-frontend/src/assets/instance-icons/lantern.png b/packages/assets/illustrations/instance-icons/lantern.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/lantern.png rename to packages/assets/illustrations/instance-icons/lantern.png diff --git a/apps/app-frontend/src/assets/instance-icons/moobloom.png b/packages/assets/illustrations/instance-icons/moobloom.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/moobloom.png rename to packages/assets/illustrations/instance-icons/moobloom.png diff --git a/apps/app-frontend/src/assets/instance-icons/mr-pack.png b/packages/assets/illustrations/instance-icons/mr-pack.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/mr-pack.png rename to packages/assets/illustrations/instance-icons/mr-pack.png diff --git a/apps/app-frontend/src/assets/instance-icons/neoforge.png b/packages/assets/illustrations/instance-icons/neoforge.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/neoforge.png rename to packages/assets/illustrations/instance-icons/neoforge.png diff --git a/apps/app-frontend/src/assets/instance-icons/orb.png b/packages/assets/illustrations/instance-icons/orb.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/orb.png rename to packages/assets/illustrations/instance-icons/orb.png diff --git a/apps/app-frontend/src/assets/instance-icons/oxygen-distributor.png b/packages/assets/illustrations/instance-icons/oxygen-distributor.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/oxygen-distributor.png rename to packages/assets/illustrations/instance-icons/oxygen-distributor.png diff --git a/apps/app-frontend/src/assets/instance-icons/pancakes.png b/packages/assets/illustrations/instance-icons/pancakes.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/pancakes.png rename to packages/assets/illustrations/instance-icons/pancakes.png diff --git a/apps/app-frontend/src/assets/instance-icons/pickaxe.png b/packages/assets/illustrations/instance-icons/pickaxe.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/pickaxe.png rename to packages/assets/illustrations/instance-icons/pickaxe.png diff --git a/apps/app-frontend/src/assets/instance-icons/poke-ball.png b/packages/assets/illustrations/instance-icons/poke-ball.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/poke-ball.png rename to packages/assets/illustrations/instance-icons/poke-ball.png diff --git a/apps/app-frontend/src/assets/instance-icons/quilt.png b/packages/assets/illustrations/instance-icons/quilt.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/quilt.png rename to packages/assets/illustrations/instance-icons/quilt.png diff --git a/apps/app-frontend/src/assets/instance-icons/redstone-block.png b/packages/assets/illustrations/instance-icons/redstone-block.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/redstone-block.png rename to packages/assets/illustrations/instance-icons/redstone-block.png diff --git a/apps/app-frontend/src/assets/instance-icons/sculk-sensor.png b/packages/assets/illustrations/instance-icons/sculk-sensor.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/sculk-sensor.png rename to packages/assets/illustrations/instance-icons/sculk-sensor.png diff --git a/apps/app-frontend/src/assets/instance-icons/skeleton.png b/packages/assets/illustrations/instance-icons/skeleton.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/skeleton.png rename to packages/assets/illustrations/instance-icons/skeleton.png diff --git a/apps/app-frontend/src/assets/instance-icons/skillet.png b/packages/assets/illustrations/instance-icons/skillet.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/skillet.png rename to packages/assets/illustrations/instance-icons/skillet.png diff --git a/apps/app-frontend/src/assets/instance-icons/slime-block.png b/packages/assets/illustrations/instance-icons/slime-block.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/slime-block.png rename to packages/assets/illustrations/instance-icons/slime-block.png diff --git a/apps/app-frontend/src/assets/instance-icons/space-helmet.png b/packages/assets/illustrations/instance-icons/space-helmet.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/space-helmet.png rename to packages/assets/illustrations/instance-icons/space-helmet.png diff --git a/apps/app-frontend/src/assets/instance-icons/sticky-piston.png b/packages/assets/illustrations/instance-icons/sticky-piston.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/sticky-piston.png rename to packages/assets/illustrations/instance-icons/sticky-piston.png diff --git a/apps/app-frontend/src/assets/instance-icons/sword.png b/packages/assets/illustrations/instance-icons/sword.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/sword.png rename to packages/assets/illustrations/instance-icons/sword.png diff --git a/apps/app-frontend/src/assets/instance-icons/terminal.png b/packages/assets/illustrations/instance-icons/terminal.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/terminal.png rename to packages/assets/illustrations/instance-icons/terminal.png diff --git a/apps/app-frontend/src/assets/instance-icons/tiny-potato.png b/packages/assets/illustrations/instance-icons/tiny-potato.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/tiny-potato.png rename to packages/assets/illustrations/instance-icons/tiny-potato.png diff --git a/apps/app-frontend/src/assets/instance-icons/tire.png b/packages/assets/illustrations/instance-icons/tire.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/tire.png rename to packages/assets/illustrations/instance-icons/tire.png diff --git a/apps/app-frontend/src/assets/instance-icons/tnt.png b/packages/assets/illustrations/instance-icons/tnt.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/tnt.png rename to packages/assets/illustrations/instance-icons/tnt.png diff --git a/apps/app-frontend/src/assets/instance-icons/wrench-rinth.png b/packages/assets/illustrations/instance-icons/wrench-rinth.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/wrench-rinth.png rename to packages/assets/illustrations/instance-icons/wrench-rinth.png diff --git a/apps/app-frontend/src/assets/instance-icons/wrench.png b/packages/assets/illustrations/instance-icons/wrench.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/wrench.png rename to packages/assets/illustrations/instance-icons/wrench.png diff --git a/apps/app-frontend/src/assets/instance-icons/zombie.png b/packages/assets/illustrations/instance-icons/zombie.png similarity index 100% rename from apps/app-frontend/src/assets/instance-icons/zombie.png rename to packages/assets/illustrations/instance-icons/zombie.png diff --git a/apps/app-frontend/src/components/ui/instance_settings/icon-editor-modal/editor-catalog.ts b/packages/ui/src/components/base/icon-editor-modal/editor-catalog.ts similarity index 77% rename from apps/app-frontend/src/components/ui/instance_settings/icon-editor-modal/editor-catalog.ts rename to packages/ui/src/components/base/icon-editor-modal/editor-catalog.ts index 7fa45b51a56..43ec1863e68 100644 --- a/apps/app-frontend/src/components/ui/instance_settings/icon-editor-modal/editor-catalog.ts +++ b/packages/ui/src/components/base/icon-editor-modal/editor-catalog.ts @@ -1,54 +1,54 @@ -import { defineMessages, type MessageDescriptor } from '@modrinth/ui' +import backpack from '@modrinth/assets/illustrations/instance-icons/backpack.png' +import beacon from '@modrinth/assets/illustrations/instance-icons/beacon.png' +import blueShark from '@modrinth/assets/illustrations/instance-icons/blue-shark.png' +import bookshelf from '@modrinth/assets/illustrations/instance-icons/bookshelf.png' +import brownBear from '@modrinth/assets/illustrations/instance-icons/brown-bear.png' +import cake from '@modrinth/assets/illustrations/instance-icons/cake.png' +import campfire from '@modrinth/assets/illustrations/instance-icons/campfire.png' +import chest from '@modrinth/assets/illustrations/instance-icons/chest.png' +import cogwheel from '@modrinth/assets/illustrations/instance-icons/cogwheel.png' +import commandBlock from '@modrinth/assets/illustrations/instance-icons/command-block.png' +import cookingPot from '@modrinth/assets/illustrations/instance-icons/cooking-pot.png' +import couch from '@modrinth/assets/illustrations/instance-icons/couch.png' +import craftingTable from '@modrinth/assets/illustrations/instance-icons/crafting-table.png' +import creeper from '@modrinth/assets/illustrations/instance-icons/creeper.png' +import enchantingTable from '@modrinth/assets/illustrations/instance-icons/enchanting-table.png' +import enderChest from '@modrinth/assets/illustrations/instance-icons/ender-chest.png' +import enderDragon from '@modrinth/assets/illustrations/instance-icons/ender-dragon.png' +import engine from '@modrinth/assets/illustrations/instance-icons/engine.png' +import fabric from '@modrinth/assets/illustrations/instance-icons/fabric.png' +import forge from '@modrinth/assets/illustrations/instance-icons/forge.png' +import furnace from '@modrinth/assets/illustrations/instance-icons/furnace.png' +import gizmo from '@modrinth/assets/illustrations/instance-icons/gizmo.png' +import globe from '@modrinth/assets/illustrations/instance-icons/globe.png' +import grassBlock from '@modrinth/assets/illustrations/instance-icons/grass-block.png' +import lantern from '@modrinth/assets/illustrations/instance-icons/lantern.png' +import moobloom from '@modrinth/assets/illustrations/instance-icons/moobloom.png' +import mrPack from '@modrinth/assets/illustrations/instance-icons/mr-pack.png' +import neoForge from '@modrinth/assets/illustrations/instance-icons/neoforge.png' +import orb from '@modrinth/assets/illustrations/instance-icons/orb.png' +import oxygenDistributor from '@modrinth/assets/illustrations/instance-icons/oxygen-distributor.png' +import pancakes from '@modrinth/assets/illustrations/instance-icons/pancakes.png' +import pickaxe from '@modrinth/assets/illustrations/instance-icons/pickaxe.png' +import pokeBall from '@modrinth/assets/illustrations/instance-icons/poke-ball.png' +import quilt from '@modrinth/assets/illustrations/instance-icons/quilt.png' +import redstoneBlock from '@modrinth/assets/illustrations/instance-icons/redstone-block.png' +import sculkSensor from '@modrinth/assets/illustrations/instance-icons/sculk-sensor.png' +import skeleton from '@modrinth/assets/illustrations/instance-icons/skeleton.png' +import skillet from '@modrinth/assets/illustrations/instance-icons/skillet.png' +import slimeBlock from '@modrinth/assets/illustrations/instance-icons/slime-block.png' +import spaceHelmet from '@modrinth/assets/illustrations/instance-icons/space-helmet.png' +import stickyPiston from '@modrinth/assets/illustrations/instance-icons/sticky-piston.png' +import sword from '@modrinth/assets/illustrations/instance-icons/sword.png' +import terminal from '@modrinth/assets/illustrations/instance-icons/terminal.png' +import tinyPotato from '@modrinth/assets/illustrations/instance-icons/tiny-potato.png' +import tire from '@modrinth/assets/illustrations/instance-icons/tire.png' +import tnt from '@modrinth/assets/illustrations/instance-icons/tnt.png' +import wrench from '@modrinth/assets/illustrations/instance-icons/wrench.png' +import wrenchRinth from '@modrinth/assets/illustrations/instance-icons/wrench-rinth.png' +import zombie from '@modrinth/assets/illustrations/instance-icons/zombie.png' -import backpack from '@/assets/instance-icons/backpack.png' -import beacon from '@/assets/instance-icons/beacon.png' -import blueShark from '@/assets/instance-icons/blue-shark.png' -import bookshelf from '@/assets/instance-icons/bookshelf.png' -import brownBear from '@/assets/instance-icons/brown-bear.png' -import cake from '@/assets/instance-icons/cake.png' -import campfire from '@/assets/instance-icons/campfire.png' -import chest from '@/assets/instance-icons/chest.png' -import cogwheel from '@/assets/instance-icons/cogwheel.png' -import commandBlock from '@/assets/instance-icons/command-block.png' -import cookingPot from '@/assets/instance-icons/cooking-pot.png' -import couch from '@/assets/instance-icons/couch.png' -import craftingTable from '@/assets/instance-icons/crafting-table.png' -import creeper from '@/assets/instance-icons/creeper.png' -import enchantingTable from '@/assets/instance-icons/enchanting-table.png' -import enderChest from '@/assets/instance-icons/ender-chest.png' -import enderDragon from '@/assets/instance-icons/ender-dragon.png' -import engine from '@/assets/instance-icons/engine.png' -import fabric from '@/assets/instance-icons/fabric.png' -import forge from '@/assets/instance-icons/forge.png' -import furnace from '@/assets/instance-icons/furnace.png' -import gizmo from '@/assets/instance-icons/gizmo.png' -import globe from '@/assets/instance-icons/globe.png' -import grassBlock from '@/assets/instance-icons/grass-block.png' -import lantern from '@/assets/instance-icons/lantern.png' -import moobloom from '@/assets/instance-icons/moobloom.png' -import mrPack from '@/assets/instance-icons/mr-pack.png' -import neoForge from '@/assets/instance-icons/neoforge.png' -import orb from '@/assets/instance-icons/orb.png' -import oxygenDistributor from '@/assets/instance-icons/oxygen-distributor.png' -import pancakes from '@/assets/instance-icons/pancakes.png' -import pickaxe from '@/assets/instance-icons/pickaxe.png' -import pokeBall from '@/assets/instance-icons/poke-ball.png' -import quilt from '@/assets/instance-icons/quilt.png' -import redstoneBlock from '@/assets/instance-icons/redstone-block.png' -import sculkSensor from '@/assets/instance-icons/sculk-sensor.png' -import skeleton from '@/assets/instance-icons/skeleton.png' -import skillet from '@/assets/instance-icons/skillet.png' -import slimeBlock from '@/assets/instance-icons/slime-block.png' -import spaceHelmet from '@/assets/instance-icons/space-helmet.png' -import stickyPiston from '@/assets/instance-icons/sticky-piston.png' -import sword from '@/assets/instance-icons/sword.png' -import terminal from '@/assets/instance-icons/terminal.png' -import tinyPotato from '@/assets/instance-icons/tiny-potato.png' -import tire from '@/assets/instance-icons/tire.png' -import tnt from '@/assets/instance-icons/tnt.png' -import wrench from '@/assets/instance-icons/wrench.png' -import wrenchRinth from '@/assets/instance-icons/wrench-rinth.png' -import zombie from '@/assets/instance-icons/zombie.png' +import { defineMessages, type MessageDescriptor } from '#ui/composables/i18n' const names = defineMessages({ yellow: { @@ -513,3 +513,7 @@ export const RANDOM_CONFIG_BLACKLIST = [ export const DEFAULT_BACKGROUND_ID = 'purple' satisfies BackgroundId export const DEFAULT_SYMBOL_ID = 'grass_block' satisfies SymbolId + +export function getIconSymbolAsset(symbol: string): string | undefined { + return symbolOptions.find((option) => option.id === symbol)?.asset +} diff --git a/packages/ui/src/components/base/icon-editor-modal/index.ts b/packages/ui/src/components/base/icon-editor-modal/index.ts new file mode 100644 index 00000000000..760a34ac03a --- /dev/null +++ b/packages/ui/src/components/base/icon-editor-modal/index.ts @@ -0,0 +1,4 @@ +export { getIconSymbolAsset } from './editor-catalog' +export { default as IconEditorModal } from './index.vue' +export { renderIcon } from './render-icon' +export type { IconBackground, IconConfig } from './types' diff --git a/apps/app-frontend/src/components/ui/instance_settings/icon-editor-modal/index.vue b/packages/ui/src/components/base/icon-editor-modal/index.vue similarity index 87% rename from apps/app-frontend/src/components/ui/instance_settings/icon-editor-modal/index.vue rename to packages/ui/src/components/base/icon-editor-modal/index.vue index 7ecf4ba41ba..3f5bd9e5591 100644 --- a/apps/app-frontend/src/components/ui/instance_settings/icon-editor-modal/index.vue +++ b/packages/ui/src/components/base/icon-editor-modal/index.vue @@ -1,24 +1,13 @@