feat: re-design pwa updated notice

Signed-off-by: Innei <[email protected]>

apps/renderer/src/atoms/updater.ts

@@ -4,7 +4,7 @@ import { createAtomHooks } from "~/lib/jotai"
 
 export type UpdaterStatus = "ready"
 export type UpdaterStatusAtom = {
-  type: "app" | "renderer"
+  type: "app" | "renderer" | "pwa"
   status: UpdaterStatus
 } | null
 export const [, , useUpdaterStatus, , getUpdaterStatus, setUpdaterStatus] = createAtomHooks(

apps/renderer/src/components/common/ReloadPrompt.tsx

@@ -1,13 +1,13 @@
 import { useEffect } from "react"
-import { toast } from "sonner"
 import { useRegisterSW } from "virtual:pwa-register/react"
 
+import { setUpdaterStatus } from "~/atoms/updater"
+
 // check for updates every hour
 const period = 60 * 60 * 1000
 
 export function ReloadPrompt() {
   const {
-    // offlineReady: [offlineReady, setOfflineReady],
     needRefresh: [needRefresh],
     updateServiceWorker,
   } = useRegisterSW({
@@ -24,33 +24,11 @@ export function ReloadPrompt() {
     },
   })
 
-  // const close = useCallback(() => {
-  //   setOfflineReady(false)
-  //   setNeedRefresh(false)
-  // }, [setNeedRefresh, setOfflineReady])
-
-  // useEffect(() => {
-  //   if (offlineReady) {
-  //     toast.info("App is ready to work offline", {
-  //       action: {
-  //         label: "Close",
-  //         onClick: close,
-  //       },
-  //       duration: Infinity,
-  //     })
-  //   }
-  // }, [offlineReady, close])
-
   useEffect(() => {
     if (needRefresh) {
-      toast.info("New version available", {
-        action: {
-          label: "Refresh",
-          onClick: () => {
-            updateServiceWorker(true)
-          },
-        },
-        duration: Infinity,
+      setUpdaterStatus({
+        type: "pwa",
+        status: "ready",
       })
     }
   }, [needRefresh, updateServiceWorker])

apps/renderer/src/modules/app-layout/feed-column/desktop.tsx

@@ -42,12 +42,12 @@ import { LoginModalContent } from "~/modules/auth/LoginModalContent"
 import { DebugRegistry } from "~/modules/debug/registry"
 import { FeedColumn } from "~/modules/feed-column"
 import { getSelectedFeedIds, resetSelectedFeedIds } from "~/modules/feed-column/atom"
-import { AutoUpdater } from "~/modules/feed-column/auto-updater"
 import { useShortcutsModal } from "~/modules/modal/shortcuts"
 import { CmdF } from "~/modules/panel/cmdf"
 import { SearchCmdK } from "~/modules/panel/cmdk"
 import { CmdNTrigger } from "~/modules/panel/cmdn"
 import { CornerPlayer } from "~/modules/player/corner-player"
+import { UpdateNotice } from "~/modules/update-notice/UpdateNotice"
 import { AppNotificationContainer } from "~/modules/upgrade/lazy/index"
 import { AppLayoutGridContainerProvider } from "~/providers/app-grid-layout-container-provider"
 
@@ -113,7 +113,7 @@ export function MainDestopLayout() {
               <CornerPlayer />
               <FooterInfo />
 
-              {ELECTRON && <AutoUpdater />}
+              <UpdateNotice />
 
               <NetworkStatusIndicator />
             </FeedColumn>

apps/renderer/src/modules/app-layout/feed-column/index.mobile.tsx

@@ -5,6 +5,7 @@ import { Outlet } from "react-router"
 import { useLoginModalShow, useWhoami } from "~/atoms/user"
 import { useDailyTask } from "~/hooks/biz/useDailyTask"
 import { LoginModalContent } from "~/modules/auth/LoginModalContent"
+import { UpdateNotice } from "~/modules/update-notice/UpdateNotice.mobile"
 
 import { NewUserGuide } from "./index.shared"
 
@@ -17,6 +18,8 @@ export const MobileRootLayout = () => {
       <Outlet />
       <NewUserGuide />
 
+      <UpdateNotice />
+
       {isAuthFail && !user && (
         <RootPortal>
           <PresentSheet

apps/renderer/src/modules/update-notice/UpdateNotice.mobile.tsx

@@ -0,0 +1,41 @@
+import { m } from "framer-motion"
+import { useCallback } from "react"
+import { useTranslation } from "react-i18next"
+
+import { getUpdaterStatus, setUpdaterStatus, useUpdaterStatus } from "~/atoms/updater"
+import { softBouncePreset } from "~/components/ui/constants/spring"
+
+export const UpdateNotice = () => {
+  const updaterStatus = useUpdaterStatus()
+  const { t } = useTranslation()
+
+  const handleClick = useCallback(() => {
+    const status = getUpdaterStatus()
+    if (!status) return
+
+    switch (status.type) {
+      case "pwa": {
+        window.location.reload()
+        break
+      }
+    }
+    setUpdaterStatus(null)
+  }, [])
+
+  if (!updaterStatus) return null
+
+  return (
+    <m.div
+      className={
+        "border-theme-border group absolute inset-x-3 cursor-pointer overflow-hidden rounded-lg border bg-theme-modal-background py-3 text-center text-sm shadow backdrop-blur bottom-safe-offset-3"
+      }
+      onClick={handleClick}
+      initial={{ y: 50, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      transition={softBouncePreset}
+    >
+      <div className="font-medium">{t("notify.update_info", { app_name: APP_NAME })}</div>
+      <div className="text-xs text-zinc-500">{t("notify.update_info_3")}</div>
+    </m.div>
+  )
+}

apps/renderer/src/modules/feed-column/auto-updater.tsx → apps/renderer/src/modules/update-notice/UpdateNotice.tsx

@@ -9,7 +9,7 @@ import { softBouncePreset } from "~/components/ui/constants/spring"
 import { tipcClient } from "~/lib/client"
 import { handlers } from "~/tipc"
 
-export const AutoUpdater = () => {
+export const UpdateNotice = () => {
   const updaterStatus = useUpdaterStatus()
   const { t } = useTranslation()
 
@@ -38,6 +38,10 @@ export const AutoUpdater = () => {
         tipcClient?.rendererUpdateReload()
         break
       }
+      case "pwa": {
+        window.location.reload()
+        break
+      }
     }
     setUpdaterStatus(null)
   }, [])

locales/app/en.json

@@ -271,6 +271,7 @@
   "notify.update_info": "{{app_name}} is ready to update!",
   "notify.update_info_1": "Click to restart",
   "notify.update_info_2": "Click to reload page",
+  "notify.update_info_3": "Touch to reload page",
   "player.back_10s": "Back 10s",
   "player.close": "Close",
   "player.download": "Download",