fix: Focus view instance icon and mods routing

xmcl-keystone-ui/src/composables/instanceContextMenu.ts

@@ -0,0 +1,41 @@
+import { BaseServiceKey, Instance, InstanceServiceKey } from '@xmcl/runtime-api'
+import { Ref } from 'vue'
+import { ContextMenuItem } from './contextMenu'
+import { useDialog } from './dialog'
+import { useService } from './service'
+
+export function useInstanceContextMenuItems(instance: Ref<Instance>) {
+  const { show: showDeleteDialog } = useDialog('delete-instance')
+  const { duplicateInstance } = useService(InstanceServiceKey)
+  const { showItemInDirectory } = useService(BaseServiceKey)
+  const { t } = useI18n()
+  const items = computed(() => {
+    const result: ContextMenuItem[] = [
+      {
+        text: t('instance.showInstance', { file: instance.value.path }),
+        onClick: () => {
+          showItemInDirectory(instance.value.path)
+        },
+        icon: 'folder',
+      },
+      {
+        text: t('instance.delete'),
+        color: 'red',
+        icon: 'delete',
+        onClick() {
+          showDeleteDialog({ name: instance.value.name, path: instance.value.path })
+        },
+      },
+      {
+        text: t('instance.duplicate'),
+        icon: 'file_copy',
+        onClick() {
+          duplicateInstance(instance.value.path)
+        },
+      },
+    ]
+    return result
+  })
+
+  return items
+}

xmcl-keystone-ui/src/util/banner.ts

@@ -1,3 +1,4 @@
+import v120 from '@/assets/banners/1.20.webp'
 import v119 from '@/assets/banners/1.19.webp'
 import v118 from '@/assets/banners/1.18.webp'
 import v117 from '@/assets/banners/1.17.webp'
@@ -14,6 +15,7 @@ import v17 from '@/assets/banners/1.7.webp'
 import v16 from '@/assets/banners/1.6.webp'
 
 const dic = Object.freeze({
+  v120,
   v119,
   v118,
   v117,

xmcl-keystone-ui/src/views/AppSideBarInstanceItem.vue

@@ -130,14 +130,12 @@
 </template>
 <script lang="ts" setup>
 import { kInstance } from '@/composables/instance'
+import { useInstanceContextMenuItems } from '@/composables/instanceContextMenu'
 import { getInstanceIcon } from '@/util/favicon'
 import { injection } from '@/util/inject'
-import { Instance, InstanceServiceKey } from '@xmcl/runtime-api'
-import { ContextMenuItem } from '../composables/contextMenu'
-import { useDialog } from '../composables/dialog'
+import { Instance } from '@xmcl/runtime-api'
 import { useInstanceServerStatus } from '../composables/serverStatus'
 import { vContextMenu } from '../directives/contextMenu'
-import { useService } from '@/composables'
 
 const props = defineProps<{ instance: Instance }>()
 const emit = defineEmits(['drop'])
@@ -146,35 +144,14 @@ const router = useRouter()
 const { t } = useI18n()
 
 const { select, path } = injection(kInstance)
-const { show: showDeleteDialog } = useDialog('delete-instance')
 const { status } = useInstanceServerStatus(computed(() => props.instance))
 
 const dragging = ref(false)
 const dragover = ref(0)
 
 const favicon = computed(() => getInstanceIcon(props.instance, status.value))
-const { duplicateInstance } = useService(InstanceServiceKey)
 
-const items = computed(() => {
-  const result: ContextMenuItem[] = [
-    {
-      text: t('instance.delete'),
-      color: 'red',
-      icon: 'delete',
-      onClick() {
-        showDeleteDialog({ name: props.instance.name, path: props.instance.path })
-      },
-    },
-    {
-      text: t('instance.duplicate'),
-      icon: 'file_copy',
-      onClick() {
-        duplicateInstance(props.instance.path)
-      },
-    },
-  ]
-  return result
-})
+const items = useInstanceContextMenuItems(computed(() => props.instance))
 
 const navigate = () => {
   if (router.currentRoute.path !== '/') {

xmcl-keystone-ui/src/views/HomeSettingsSpeedDial.vue

@@ -28,7 +28,7 @@
           text
           icon
           :loading="refreshing"
-          to="/mod"
+          to="/mods"
         >
           <v-tooltip
             :close-delay="0"

xmcl-keystone-ui/src/views/InstancesCard.vue

@@ -188,56 +188,40 @@
   </v-card>
 </template>
 <script lang=ts setup>
-import { BaseServiceKey, Instance, InstanceServiceKey, LockKey } from '@xmcl/runtime-api'
-import { ContextMenuItem } from '../composables/contextMenu'
-import { useInstanceServerStatus } from '../composables/serverStatus'
-import { vContextMenu } from '../directives/contextMenu'
 import unknownServer from '@/assets/unknown_server.png'
-import { useBusy, useService } from '@/composables'
-import { getBanner } from '@/util/banner'
-import { vDraggableCard } from '@/directives/draggableCard'
+import { useBusy } from '@/composables'
 import { kInstance } from '@/composables/instance'
+import { useInstanceContextMenuItems } from '@/composables/instanceContextMenu'
+import { vDraggableCard } from '@/directives/draggableCard'
+import { getBanner } from '@/util/banner'
 import { injection } from '@/util/inject'
+import { Instance, LockKey } from '@xmcl/runtime-api'
+import { useInstanceServerStatus } from '../composables/serverStatus'
+import { vContextMenu } from '../directives/contextMenu'
 
 const props = defineProps<{ instance: Instance }>()
 const isBusy = useBusy(LockKey.instance(props.instance.path))
 const { path } = injection(kInstance)
 const isSelected = computed(() => path.value === props.instance.path)
 const { status } = useInstanceServerStatus(computed(() => props.instance))
-const { showItemInDirectory } = useService(BaseServiceKey)
 
 const emit = defineEmits(['delete', 'click'])
 
 const image = computed(() => {
   if (status.value.favicon && status.value.favicon !== unknownServer) {
     return status.value.favicon
   }
+  if (props.instance.icon) {
+    return props.instance.icon
+  }
   const banner = getBanner(props.instance.runtime.minecraft)
   if (banner) {
     return banner
   }
   return unknownServer
 })
 const description = computed(() => props.instance.description)
-const { t } = useI18n()
-const contextMenuItems = computed(() => {
-  const items: ContextMenuItem[] = [{
-    text: t('instance.showInstance', { file: props.instance.path }),
-    onClick: () => {
-      showItemInDirectory(props.instance.path)
-    },
-    icon: 'folder',
-  }, {
-    text: t('delete.name', { name: props.instance.path }),
-    onClick: () => {
-      emit('delete')
-    },
-    color: 'error',
-    icon: 'delete',
-  }]
-
-  return items
-})
+const contextMenuItems = useInstanceContextMenuItems(computed(() => props.instance))
 
 </script>