AstralRinth/apps/app-frontend/src/pages/library/Index.vue

<script setup lang="ts">
import { PlusIcon } from '@modrinth/assets'
import { Button, injectNotificationManager } from '@modrinth/ui'
import { inject, onUnmounted, ref, shallowRef } from 'vue'
import { useRoute } from 'vue-router'

import { NewInstanceImage } from '@/assets/icons'
import NavTabs from '@/components/ui/NavTabs.vue'
import { profile_listener } from '@/helpers/events.js'
import { list } from '@/helpers/profile.js'
import { useBreadcrumbs } from '@/store/breadcrumbs.js'

const { handleError } = injectNotificationManager()
const showCreationModal = inject('showCreationModal')
const route = useRoute()
const breadcrumbs = useBreadcrumbs()

breadcrumbs.setRootContext({ name: 'Library', link: route.path })

const instances = shallowRef(await list().catch(handleError))

const offline = ref(!navigator.onLine)
window.addEventListener('offline', () => {
	offline.value = true
})
window.addEventListener('online', () => {
	offline.value = false
})

const unlistenProfile = await profile_listener(async () => {
	instances.value = await list().catch(handleError)
})
onUnmounted(() => {
	unlistenProfile()
})
</script>

<template>
	<div class="p-6 flex flex-col gap-3">
		<h1 class="m-0 text-2xl hidden">Library</h1>
		<NavTabs
			:links="[
				{ label: 'All instances', href: `/library` },
				{ label: 'Modpacks', href: `/library/modpacks` },
				{ label: 'Servers', href: `/library/servers` },
				{ label: 'Custom', href: `/library/custom` },
				{ label: 'Shared with me', href: `/library/shared`, shown: false },
				{ label: 'Saved', href: `/library/saved`, shown: false },
			]"
		/>
		<template v-if="instances && instances.length > 0">
			<RouterView v-if="route.path.startsWith('/library')" :instances="instances" />
		</template>
		<div v-else class="no-instance">
			<div class="icon">
				<NewInstanceImage />
			</div>
			<h3>No instances found</h3>
			<Button color="primary" :disabled="offline" @click="showCreationModal?.()">
				<PlusIcon />
				Create new instance
			</Button>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.no-instance {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	gap: var(--gap-md);

	p,
	h3 {
		margin: 0;
	}

	.icon {
		svg {
			width: 10rem;
			height: 10rem;
		}
	}
}
</style>