From 3c9083b90dd3e5f97109ba2a23d2f2f8cc7d6c7c Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Mon, 12 Jun 2023 19:37:58 +0200
Subject: [PATCH] feat: add message to add to home screen on mobile

---
 src/App.vue                                |  2 +
 src/components/home/AddToHomeScreen.vue    | 80 ++++++++++++++++++++++
 src/components/home/UpdateNotification.vue | 12 ++--
 src/components/misc/Icon.ts                |  7 +-
 src/i18n/lang/en.json                      |  1 +
 src/stores/base.ts                         |  7 ++
 6 files changed, 102 insertions(+), 7 deletions(-)
 create mode 100644 src/components/home/AddToHomeScreen.vue

diff --git a/src/App.vue b/src/App.vue
index 175ba1dbf..a5edca6be 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,6 +12,7 @@
 		<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
 		
 		<Teleport to="body">
+			<AddToHomeScreen/>
 			<UpdateNotification/>
 			<Notification/>
 		</Teleport>
@@ -43,6 +44,7 @@ import {useBaseStore} from '@/stores/base'
 
 import {useColorScheme} from '@/composables/useColorScheme'
 import {useBodyClass} from '@/composables/useBodyClass'
+import AddToHomeScreen from '@/components/home/AddToHomeScreen.vue'
 
 const baseStore = useBaseStore()
 const authStore = useAuthStore()
diff --git a/src/components/home/AddToHomeScreen.vue b/src/components/home/AddToHomeScreen.vue
new file mode 100644
index 000000000..b8b2db630
--- /dev/null
+++ b/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>
diff --git a/src/components/home/UpdateNotification.vue b/src/components/home/UpdateNotification.vue
index 63799e67b..2e79bcb1e 100644
--- a/src/components/home/UpdateNotification.vue
+++ b/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 {
diff --git a/src/components/misc/Icon.ts b/src/components/misc/Icon.ts
index 4f6698462..392c030ef 100644
--- a/src/components/misc/Icon.ts
+++ b/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
\ No newline at end of file
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index 66b15159a..ac0f754b1 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -5,6 +5,7 @@
     "welcomeDay": "Hi {username}!",
     "welcomeEvening": "Good Evening {username}!",
     "lastViewed": "Last viewed",
+    "addToHomeScreen": "Add this app to your home screen for faster access and improved experience.",
     "project": {
       "importText": "Import your projects and tasks from other services into Vikunja:",
       "import": "Import your data into Vikunja"
diff --git a/src/stores/base.ts b/src/stores/base.ts
index 258d74667..9cd7491d5 100644
--- a/src/stores/base.ts
+++ b/src/stores/base.ts
@@ -28,6 +28,7 @@ export const useBaseStore = defineStore('base', () => {
 	const keyboardShortcutsActive = ref(false)
 	const quickActionsActive = ref(false)
 	const logoVisible = ref(true)
+	const updateAvailable = ref(false)
 
 	function setLoading(newLoading: boolean) {
 		loading.value = newLoading
@@ -77,6 +78,10 @@ export const useBaseStore = defineStore('base', () => {
 	function setReady(value: boolean) {
 		ready.value = value
 	}
+	
+	function setUpdateAvailable(value: boolean) {
+		updateAvailable.value = value
+	}
 
 	async function handleSetCurrentProject(
 		{project, forceUpdate = false}: {project: IProject | null, forceUpdate?: boolean},
@@ -135,6 +140,7 @@ export const useBaseStore = defineStore('base', () => {
 		keyboardShortcutsActive: readonly(keyboardShortcutsActive),
 		quickActionsActive: readonly(quickActionsActive),
 		logoVisible: readonly(logoVisible),
+		updateAvailable: readonly(updateAvailable),
 
 		setLoading,
 		setReady,
@@ -145,6 +151,7 @@ export const useBaseStore = defineStore('base', () => {
 		setBackground,
 		setBlurHash,
 		setLogoVisible,
+		setUpdateAvailable,
 
 		handleSetCurrentProject,
 		loadApp,