refactor: use DI for instance page + subpages (#6987)

* refactor: use DI for instance page + subpages

* fix: qa

* refactor: layout.vue bring up a layer

* refactor: rename folders

* import order

* refactor: move settings into instance page

* fix: lint

---------

Co-authored-by: tdgao <mr.trumgao@gmail.com>

apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue

@@ -15,6 +15,7 @@ import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { trackEvent } from '@/helpers/analytics'
 import { list } from '@/helpers/instance'
 import { add_server_to_instance, get_instance_worlds } from '@/helpers/worlds.ts'
+import { instanceKeys } from '@/pages/instance/query-options'
 
 const { handleError } = injectNotificationManager()
 const queryClient = useQueryClient()
@@ -67,7 +68,7 @@ async function addServer(instance) {
 	try {
 		await add_server_to_instance(instance.id, serverName.value, serverAddress.value, 'prompt')
 		instance.added = true
-		await queryClient.invalidateQueries({ queryKey: ['worlds', instance.id] })
+		await queryClient.invalidateQueries({ queryKey: instanceKeys.worlds(instance.id) })
 
 		trackEvent('AddServerToInstance', {
 			server_name: serverName.value,