From cd268c9bc7e544e39ea4560e76d2e2b515d27526 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Fri, 23 Dec 2022 19:26:28 +0100
Subject: [PATCH] ui: update button for mobile

---
 components/main/MainContent.vue                 |  1 +
 components/pwa/PwaBadge.client.vue              | 17 +++++++++++++++++
 .../PwaPrompt.client.vue}                       | 16 +++++-----------
 composables/pwa/index.ts                        |  2 ++
 layouts/default.vue                             |  2 +-
 locales/en-US.json                              |  3 ++-
 6 files changed, 28 insertions(+), 13 deletions(-)
 create mode 100644 components/pwa/PwaBadge.client.vue
 rename components/{PWAPrompt.client.vue => pwa/PwaPrompt.client.vue} (54%)

diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
index eb88bc10..ebccc6e7 100644
--- a/components/main/MainContent.vue
+++ b/components/main/MainContent.vue
@@ -22,6 +22,7 @@ defineProps<{
         </div>
         <div flex items-center flex-shrink-0 gap-x-2>
           <slot name="actions" />
+          <PwaBadge lg:hidden />
           <NavUser v-if="isHydrated.value" />
         </div>
       </div>
diff --git a/components/pwa/PwaBadge.client.vue b/components/pwa/PwaBadge.client.vue
new file mode 100644
index 00000000..5ab45c79
--- /dev/null
+++ b/components/pwa/PwaBadge.client.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { pwa } from '~/composables/pwa'
+</script>
+
+<template>
+  <button
+    v-if="pwa.needRefresh"
+    bg="fade" relative rounded
+    flex="~ gap-1 center" px3 py1 text-primary
+    @click="pwa.updateServiceWorker()"
+  >
+    <div i-ri-download-cloud-2-line />
+    <h2 flex="~ gap-2" items-center>
+      {{ $t('pwa.update_available_short') }}
+    </h2>
+  </button>
+</template>
diff --git a/components/PWAPrompt.client.vue b/components/pwa/PwaPrompt.client.vue
similarity index 54%
rename from components/PWAPrompt.client.vue
rename to components/pwa/PwaPrompt.client.vue
index 903e3c74..a0335a9c 100644
--- a/components/PWAPrompt.client.vue
+++ b/components/pwa/PwaPrompt.client.vue
@@ -1,28 +1,22 @@
 <script setup>
-import { usePWA } from '~/composables/pwa'
-
-const { close, needRefresh, updateServiceWorker } = usePWA()
+import { pwa } from '~/composables/pwa'
 </script>
 
-<!-- TODO: remove shadow on mobile and position it above the bottom nav -->
 <template>
   <div
-    v-if="needRefresh"
-    role="alertdialog"
-    aria-labelledby="pwa-toast-title"
-    aria-describedby="pwa-toast-description"
+    v-if="pwa.needRefresh"
     m-2 p5 bg="fade" relative
     rounded-lg of-hidden
     flex="~ col gap-3"
   >
-    <h2 id="pwa-toast-title" flex="~ gap-2" items-center>
+    <h2 flex="~ gap-2" items-center>
       {{ $t('pwa.title') }}
     </h2>
     <div flex="~ gap-1">
-      <button type="button" btn-solid px-4 py-1 text-center text-sm @click="updateServiceWorker()">
+      <button type="button" btn-solid px-4 py-1 text-center text-sm @click="pwa.updateServiceWorker()">
         {{ $t('pwa.update') }}
       </button>
-      <button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="close()">
+      <button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="pwa.close()">
         {{ $t('pwa.dismiss') }}
       </button>
     </div>
diff --git a/composables/pwa/index.ts b/composables/pwa/index.ts
index 30cfc77e..64269202 100644
--- a/composables/pwa/index.ts
+++ b/composables/pwa/index.ts
@@ -44,3 +44,5 @@ export const usePWA = () => {
     close,
   }
 }
+
+export const pwa = reactive(usePWA())
diff --git a/layouts/default.vue b/layouts/default.vue
index affa1395..52f514b6 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -53,7 +53,7 @@
           <slot name="right">
             <SearchWidget />
             <div flex-auto />
-            <PWAPrompt />
+            <PwaPrompt />
             <NavFooter />
           </slot>
         </div>
diff --git a/locales/en-US.json b/locales/en-US.json
index 1eec13fa..20beb98a 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -210,7 +210,8 @@
     "message": "@:pwa.title{','} click on the @:pwa.reload button to update.",
     "reload": "Reload",
     "title": "New Elk update available!",
-    "update": "Update"
+    "update": "Update",
+    "update_available_short": "Update Elk"
   },
   "search": {
     "search_desc": "Search for people & hashtags"