chore: move offline overlay to ready component

src/App.vue

@@ -10,12 +10,6 @@
 				<content-no-auth v-else/>
 				<notification/>
 			</div>
-			<div class="app offline" v-if="!online">
-				<div class="offline-message">
-					<h1>You are offline.</h1>
-					<p>Please check your network connection and try again.</p>
-				</div>
-			</div>
 
 			<transition name="fade">
 				<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
@@ -118,29 +112,3 @@ export default defineComponent({
 <style lang="scss">
 @import '@/styles/global.scss';
 </style>
-
-<style lang="scss" scoped>
-.offline {
-	background: url('@/assets/llama-nightscape.jpg') no-repeat center;
-	background-size: cover;
-	height: 100vh;
-
-	.offline-message {
-		text-align: center;
-		position: absolute;
-		width: 100vw;
-		bottom: 5vh;
-		color: $white;
-		padding: 0 1rem;
-
-		h1 {
-			font-weight: bold;
-			font-size: 1.5rem;
-			text-align: center;
-			color: $white;
-			font-weight: 700 !important;
-			font-size: 1.5rem;
-		}
-	}
-}
-</style>

src/components/misc/ready.vue

@@ -1,5 +1,11 @@
 <template>
-	<template v-if="ready">
+	<div class="app offline" v-if="!online">
+		<div class="offline-message">
+			<h1>You are offline.</h1>
+			<p>Please check your network connection and try again.</p>
+		</div>
+	</div>
+	<template v-else-if="ready">
 		<slot/>
 	</template>
 	<section v-else-if="error !== ''">
@@ -36,6 +42,8 @@
 import logoUrl from '@/assets/logo.svg'
 import ApiConfig from '@/components/misc/api-config'
 import NoAuthWrapper from '@/components/misc/no-auth-wrapper'
+import {mapState} from 'vuex'
+import {ONLINE} from '@/store/mutation-types'
 
 const ERROR_NO_API_URL = 'noApiUrlProvided'
 
@@ -62,6 +70,9 @@ export default {
 		showLoading() {
 			return !this.ready && this.error === ''
 		},
+		...mapState({
+			online: ONLINE,
+		}),
 	},
 	methods: {
 		load() {
@@ -108,4 +119,28 @@ export default {
 		}
 	}
 }
+
+.offline {
+	background: url('@/assets/llama-nightscape.jpg') no-repeat center;
+	background-size: cover;
+	height: 100vh;
+
+	.offline-message {
+		text-align: center;
+		position: absolute;
+		width: 100vw;
+		bottom: 5vh;
+		color: $white;
+		padding: 0 1rem;
+
+		h1 {
+			font-weight: bold;
+			font-size: 1.5rem;
+			text-align: center;
+			color: $white;
+			font-weight: 700 !important;
+			font-size: 1.5rem;
+		}
+	}
+}
 </style>