Skip to content

Commit c9c0624

Browse files
IMB11IMB11
committed
refactor(ui): move icon editor into modrinth/ui
1 parent 6cde59c commit c9c0624

64 files changed

Lines changed: 601 additions & 338 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/app-frontend/src/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ import ErrorModal from '@/components/ui/ErrorModal.vue'
6868
import HostingUpdateRequired from '@/components/ui/HostingUpdateRequired.vue'
6969
import AddServerToInstanceModal from '@/components/ui/install_flow/AddServerToInstanceModal.vue'
7070
import UnknownPackWarningModal from '@/components/ui/install_flow/UnknownPackWarningModal.vue'
71-
import IconEditorModal from '@/components/ui/instance_settings/icon-editor-modal/index.vue'
71+
import IconEditorModal from '@/components/ui/instance_settings/InstanceIconEditorModal.vue'
7272
import MinecraftAuthErrorModal from '@/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue'
7373
import MinecraftRequiredModal from '@/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue'
7474
import InstallToPlayModal from '@/components/ui/modal/InstallToPlayModal.vue'

‎apps/app-frontend/src/components/ui/instance_settings/InstanceIconEditorModal.vue‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<script setup lang="ts">
2+
import { getIconSymbolAsset, IconEditorModal, injectNotificationManager } from '@modrinth/ui'
3+
import { ref } from 'vue'
4+
5+
import { toError } from '@/helpers/errors'
6+
import {
7+
cache_generated_icon,
8+
edit_generated_icon,
9+
edit_generated_icon_if_empty,
10+
get_recent_icon_configs,
11+
} from '@/helpers/instance'
12+
import type { InstanceIconConfig } from '@/helpers/types'
13+
14+
const props = defineProps<{
15+
instanceId?: string
16+
config?: InstanceIconConfig | null
17+
}>()
18+
19+
const emit = defineEmits<{
20+
saved: [iconPath: string, config: InstanceIconConfig]
21+
}>()
22+
23+
const { handleError } = injectNotificationManager()
24+
const editor = ref<InstanceType<typeof IconEditorModal> | null>(null)
25+
26+
async function loadSymbolBytes(asset: string): Promise<number[]> {
27+
const response = await fetch(asset)
28+
if (!response.ok) throw new Error('Failed to load the icon symbol.')
29+
return Array.from(new Uint8Array(await response.arrayBuffer()))
30+
}
31+
32+
async function save(config: InstanceIconConfig, asset: string): Promise<string> {
33+
const symbolBytes = await loadSymbolBytes(asset)
34+
return props.instanceId
35+
? edit_generated_icon(props.instanceId, config, symbolBytes)
36+
: cache_generated_icon(config, symbolBytes, true)
37+
}
38+
39+
function onSaved(result: string | void, config: InstanceIconConfig) {
40+
if (result) emit('saved', result, config)
41+
}
42+
43+
function show() {
44+
editor.value?.show()
45+
}
46+
47+
function hide() {
48+
editor.value?.hide()
49+
}
50+
51+
async function randomizeAndSave() {
52+
try {
53+
const selection = editor.value?.randomize()
54+
if (!selection) return null
55+
const iconPath = await cache_generated_icon(
56+
selection.config,
57+
await loadSymbolBytes(selection.symbolAsset),
58+
)
59+
return { iconPath, config: selection.config }
60+
} catch (error) {
61+
handleError(toError(error))
62+
return null
63+
}
64+
}
65+
66+
async function applyGeneratedIcon(instanceId: string, config: InstanceIconConfig) {
67+
const asset = getIconSymbolAsset(config.symbol)
68+
if (!asset) return false
69+
try {
70+
return await edit_generated_icon_if_empty(instanceId, config, await loadSymbolBytes(asset))
71+
} catch (error) {
72+
handleError(toError(error))
73+
return false
74+
}
75+
}
76+
77+
defineExpose({ show, hide, randomize: randomizeAndSave, randomizeAndSave, applyGeneratedIcon })
78+
</script>
79+
80+
<template>
81+
<IconEditorModal
82+
ref="editor"
83+
:config="config"
84+
:load-recents="get_recent_icon_configs"
85+
:save="save"
86+
@saved="onSaved"
87+
/>
88+
</template>

‎apps/app-frontend/src/components/ui/library/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { ContextMenu, defineMessages, useVIntl } from '@modrinth/ui'
44
import { computed, nextTick, onDeactivated, onUnmounted, ref, toRef, watch } from 'vue'
55
import Draggable from 'vuedraggable'
66
7-
import IconEditorModal from '@/components/ui/instance_settings/icon-editor-modal/index.vue'
7+
import IconEditorModal from '@/components/ui/instance_settings/InstanceIconEditorModal.vue'
88
import GroupInstancesModal from '@/components/ui/library/group-instances-modal.vue'
99
import InstanceGroup from '@/components/ui/library/instance-group/index.vue'
1010
import InstanceGroupDnd from '@/components/ui/library/instance-group/instance-group-dnd.vue'

‎apps/app-frontend/src/features/instances/settings-modal/general-settings.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import { open } from '@tauri-apps/plugin-dialog'
2222
import { computed, type Ref, ref, watch } from 'vue'
2323
import { useRouter } from 'vue-router'
2424
25-
import IconEditorModal from '@/components/ui/instance_settings/icon-editor-modal/index.vue'
25+
import IconEditorModal from '@/components/ui/instance_settings/InstanceIconEditorModal.vue'
2626
import ConfirmDeleteInstanceModal from '@/components/ui/modal/ConfirmDeleteInstanceModal.vue'
2727
import { trackEvent } from '@/helpers/analytics'
2828
import { install_duplicate_instance } from '@/helpers/install'

‎apps/app-frontend/src/locales/en-US/index.json‎

Lines changed: 0 additions & 213 deletions
Original file line numberDiff line numberDiff line change
@@ -3794,219 +3794,6 @@
37943794
"instance.files.save-as": {
37953795
"message": "Save as..."
37963796
},
3797-
"instance.icon-editor.background": {
3798-
"message": "Background"
3799-
},
3800-
"instance.icon-editor.background.blue": {
3801-
"message": "Blue"
3802-
},
3803-
"instance.icon-editor.background.dark-gray": {
3804-
"message": "Dark gray"
3805-
},
3806-
"instance.icon-editor.background.dark-green": {
3807-
"message": "Dark green"
3808-
},
3809-
"instance.icon-editor.background.gray": {
3810-
"message": "Gray"
3811-
},
3812-
"instance.icon-editor.background.green": {
3813-
"message": "Green"
3814-
},
3815-
"instance.icon-editor.background.indigo": {
3816-
"message": "Indigo"
3817-
},
3818-
"instance.icon-editor.background.lavender": {
3819-
"message": "Lavender"
3820-
},
3821-
"instance.icon-editor.background.light-gray": {
3822-
"message": "Light gray"
3823-
},
3824-
"instance.icon-editor.background.lime": {
3825-
"message": "Lime"
3826-
},
3827-
"instance.icon-editor.background.orange": {
3828-
"message": "Orange"
3829-
},
3830-
"instance.icon-editor.background.pink": {
3831-
"message": "Pink"
3832-
},
3833-
"instance.icon-editor.background.purple": {
3834-
"message": "Purple"
3835-
},
3836-
"instance.icon-editor.background.red": {
3837-
"message": "Red"
3838-
},
3839-
"instance.icon-editor.background.rose": {
3840-
"message": "Rose"
3841-
},
3842-
"instance.icon-editor.background.yellow": {
3843-
"message": "Yellow"
3844-
},
3845-
"instance.icon-editor.description": {
3846-
"message": "Mix and match elements to create a custom icon."
3847-
},
3848-
"instance.icon-editor.recents": {
3849-
"message": "Recents"
3850-
},
3851-
"instance.icon-editor.save": {
3852-
"message": "Save icon"
3853-
},
3854-
"instance.icon-editor.surprise-me": {
3855-
"message": "Randomize"
3856-
},
3857-
"instance.icon-editor.symbol": {
3858-
"message": "Symbol"
3859-
},
3860-
"instance.icon-editor.symbol.backpack": {
3861-
"message": "Backpack"
3862-
},
3863-
"instance.icon-editor.symbol.beacon": {
3864-
"message": "Beacon"
3865-
},
3866-
"instance.icon-editor.symbol.blue-shark": {
3867-
"message": "Blue Shark"
3868-
},
3869-
"instance.icon-editor.symbol.bookshelf": {
3870-
"message": "Bookshelf"
3871-
},
3872-
"instance.icon-editor.symbol.brown-bear": {
3873-
"message": "Brown Bear"
3874-
},
3875-
"instance.icon-editor.symbol.cake": {
3876-
"message": "Cake"
3877-
},
3878-
"instance.icon-editor.symbol.campfire": {
3879-
"message": "Campfire"
3880-
},
3881-
"instance.icon-editor.symbol.chest": {
3882-
"message": "Chest"
3883-
},
3884-
"instance.icon-editor.symbol.cogwheel": {
3885-
"message": "Cogwheel"
3886-
},
3887-
"instance.icon-editor.symbol.command-block": {
3888-
"message": "Command Block"
3889-
},
3890-
"instance.icon-editor.symbol.cooking-pot": {
3891-
"message": "Cooking Pot"
3892-
},
3893-
"instance.icon-editor.symbol.couch": {
3894-
"message": "Couch"
3895-
},
3896-
"instance.icon-editor.symbol.crafting-table": {
3897-
"message": "Crafting Table"
3898-
},
3899-
"instance.icon-editor.symbol.create-wrench": {
3900-
"message": "Wrench"
3901-
},
3902-
"instance.icon-editor.symbol.creeper": {
3903-
"message": "Creeper"
3904-
},
3905-
"instance.icon-editor.symbol.enchanting-table": {
3906-
"message": "Enchanting Table"
3907-
},
3908-
"instance.icon-editor.symbol.ender-chest": {
3909-
"message": "Ender Chest"
3910-
},
3911-
"instance.icon-editor.symbol.ender-dragon": {
3912-
"message": "Ender Dragon"
3913-
},
3914-
"instance.icon-editor.symbol.engine": {
3915-
"message": "Engine"
3916-
},
3917-
"instance.icon-editor.symbol.fabric": {
3918-
"message": "Fabric"
3919-
},
3920-
"instance.icon-editor.symbol.forge": {
3921-
"message": "Forge"
3922-
},
3923-
"instance.icon-editor.symbol.furnace": {
3924-
"message": "Furnace"
3925-
},
3926-
"instance.icon-editor.symbol.gizmo": {
3927-
"message": "Gizmo"
3928-
},
3929-
"instance.icon-editor.symbol.globe": {
3930-
"message": "Globe"
3931-
},
3932-
"instance.icon-editor.symbol.grass-block": {
3933-
"message": "Grass Block"
3934-
},
3935-
"instance.icon-editor.symbol.lantern": {
3936-
"message": "Lantern"
3937-
},
3938-
"instance.icon-editor.symbol.moobloom": {
3939-
"message": "Moobloom"
3940-
},
3941-
"instance.icon-editor.symbol.mr-pack": {
3942-
"message": "Mr Pack"
3943-
},
3944-
"instance.icon-editor.symbol.neoforge": {
3945-
"message": "NeoForge"
3946-
},
3947-
"instance.icon-editor.symbol.orb": {
3948-
"message": "Orb"
3949-
},
3950-
"instance.icon-editor.symbol.oxygen-distributor": {
3951-
"message": "Oxygen Distributor"
3952-
},
3953-
"instance.icon-editor.symbol.pancakes": {
3954-
"message": "Pancakes"
3955-
},
3956-
"instance.icon-editor.symbol.pickaxe": {
3957-
"message": "Pickaxe"
3958-
},
3959-
"instance.icon-editor.symbol.poke-ball": {
3960-
"message": "Poke Ball"
3961-
},
3962-
"instance.icon-editor.symbol.quilt": {
3963-
"message": "Quilt"
3964-
},
3965-
"instance.icon-editor.symbol.redstone-block": {
3966-
"message": "Redstone Block"
3967-
},
3968-
"instance.icon-editor.symbol.sculk-sensor": {
3969-
"message": "Sculk Sensor"
3970-
},
3971-
"instance.icon-editor.symbol.skeleton": {
3972-
"message": "Skeleton"
3973-
},
3974-
"instance.icon-editor.symbol.skillet": {
3975-
"message": "Skillet"
3976-
},
3977-
"instance.icon-editor.symbol.slime-block": {
3978-
"message": "Slime Block"
3979-
},
3980-
"instance.icon-editor.symbol.space-helmet": {
3981-
"message": "Space Helmet"
3982-
},
3983-
"instance.icon-editor.symbol.sticky-piston": {
3984-
"message": "Sticky Piston"
3985-
},
3986-
"instance.icon-editor.symbol.sword": {
3987-
"message": "Sword"
3988-
},
3989-
"instance.icon-editor.symbol.terminal": {
3990-
"message": "Terminal"
3991-
},
3992-
"instance.icon-editor.symbol.tiny-potato": {
3993-
"message": "Tiny Potato"
3994-
},
3995-
"instance.icon-editor.symbol.tire": {
3996-
"message": "Tire"
3997-
},
3998-
"instance.icon-editor.symbol.tnt": {
3999-
"message": "TNT"
4000-
},
4001-
"instance.icon-editor.symbol.wrenth-rinth": {
4002-
"message": "Modrinth Wrench"
4003-
},
4004-
"instance.icon-editor.symbol.zombie": {
4005-
"message": "Zombie"
4006-
},
4007-
"instance.icon-editor.title": {
4008-
"message": "Icon editor"
4009-
},
40103797
"instance.last-played": {
40113798
"message": "Last played"
40123799
},

apps/app-frontend/src/assets/instance-icons/backpack.png renamed to packages/assets/illustrations/instance-icons/backpack.png

File renamed without changes.

apps/app-frontend/src/assets/instance-icons/beacon.png renamed to packages/assets/illustrations/instance-icons/beacon.png

File renamed without changes.

apps/app-frontend/src/assets/instance-icons/blue-shark.png renamed to packages/assets/illustrations/instance-icons/blue-shark.png

File renamed without changes.

apps/app-frontend/src/assets/instance-icons/bookshelf.png renamed to packages/assets/illustrations/instance-icons/bookshelf.png

File renamed without changes.

apps/app-frontend/src/assets/instance-icons/brown-bear.png renamed to packages/assets/illustrations/instance-icons/brown-bear.png

File renamed without changes.

0 commit comments

Comments
 (0)