feat: add message to add to home screen on mobile

src/components/home/AddToHomeScreen.vue

@@ -0,0 +1,80 @@
+<template>
+	<div
+		v-if="shouldShowMessage"
+		class="add-to-home-screen"
+		:class="{'has-update-available': hasUpdateAvailable}"
+	>
+		<icon icon="arrow-up-from-bracket" class="add-icon"/>
+		<p>
+			{{ $t('home.addToHomeScreen') }}
+		</p>
+		<BaseButton @click="() => hideMessage = true" class="hide-button">
+			<icon icon="x"/>
+		</BaseButton>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import BaseButton from '@/components/base/BaseButton.vue'
+import {useLocalStorage} from '@vueuse/core'
+import {computed} from 'vue'
+import {useBaseStore} from '@/stores/base'
+
+const baseStore = useBaseStore()
+
+const hideMessage = useLocalStorage('hideAddToHomeScreenMessage', false)
+const hasUpdateAvailable = computed(() => baseStore.updateAvailable)
+
+const shouldShowMessage = computed(() => {
+	if (hideMessage.value) {
+		return false
+	}
+
+	if (typeof window !== 'undefined' && window.matchMedia('(display-mode: standalone)').matches) {
+		return false
+	}
+
+	return true
+})
+</script>
+
+<style lang="scss" scoped>
+.add-to-home-screen {
+	position: fixed;
+	// FIXME: We should prevent usage of z-index or
+	// at least define it centrally
+	// the highest z-index of a modal is .hint-modal with 4500
+	z-index: 5000;
+	bottom: 1rem;
+	inset-inline: 1rem;
+	max-width: max-content;
+	margin-inline: auto;
+
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 1rem;
+	padding: .5rem 1rem;
+	background: var(--grey-900);
+	border-radius: $radius;
+	font-size: .9rem;
+	color: var(--grey-200);
+
+	@media screen and (min-width: $tablet) {
+		display: none;
+	}
+	
+	&.has-update-available {
+		bottom: 5rem;
+	}
+}
+
+.add-icon {
+	color: var(--primary-light);
+}
+
+.hide-button {
+	padding: .25rem .5rem;
+	cursor: pointer;
+}
+</style>

src/components/home/UpdateNotification.vue

@@ -12,9 +12,12 @@
 </template>
 
 <script lang="ts" setup>
-import {ref} from 'vue'
+import {computed, ref} from 'vue'
+import {useBaseStore} from '@/stores/base'
 
-const updateAvailable = ref(false)
+const baseStore = useBaseStore()
+
+const updateAvailable = computed(() => baseStore.updateAvailable)
 const registration = ref(null)
 const refreshing = ref(false)
 
@@ -31,11 +34,11 @@ navigator?.serviceWorker?.addEventListener(
 function showRefreshUI(e: Event) {
 	console.log('recieved refresh event', e)
 	registration.value = e.detail
-	updateAvailable.value = true
+	baseStore.setUpdateAvailable(true)
 }
 
 function refreshApp() {
-	updateAvailable.value = false
+	baseStore.setUpdateAvailable(false)
 	if (!registration.value || !registration.value.waiting) {
 		return
 	}
@@ -65,7 +68,6 @@ function refreshApp() {
 	border-radius: $radius;
 	font-size: .9rem;
 	color: var(--grey-900);
-
 }
 
 .update-notification__message {

src/components/misc/Icon.ts

@@ -4,6 +4,7 @@ import {
 	faAngleRight,
 	faArchive,
 	faArrowLeft,
+	faArrowUpFromBracket,
 	faBars,
 	faBell,
 	faCalendar,
@@ -56,7 +57,7 @@ import {
 	faTimes,
 	faTrashAlt,
 	faUser,
-	faUsers,
+	faUsers, faX,
 } from '@fortawesome/free-solid-svg-icons'
 import {
 	faBellSlash,
@@ -71,7 +72,7 @@ import {
 } from '@fortawesome/free-regular-svg-icons'
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
 
-import type { FontAwesomeIcon as FontAwesomeIconFixedTypes } from '@/types/vue-fontawesome'
+import type {FontAwesomeIcon as FontAwesomeIconFixedTypes} from '@/types/vue-fontawesome'
 
 library.add(faAlignLeft)
 library.add(faAngleRight)
@@ -139,6 +140,8 @@ library.add(faTimesCircle)
 library.add(faTrashAlt)
 library.add(faUser)
 library.add(faUsers)
+library.add(faArrowUpFromBracket)
+library.add(faX)
 
 // overwriting the wrong types
 export default FontAwesomeIcon as unknown as FontAwesomeIconFixedTypes