Release v1.4.2 (#15)

* automatically check for updates

* Update CHANGELOG.txt

CHANGELOG.txt

@@ -1,5 +1,6 @@
 OverBuddy has been updated! Steam support is coming soon.
 - Added Season 13 background.
+- Added update check on startup.
 Other changes in this update:
 - Updated "Check for Updates" in Settings.
 - Added new backgrounds and removed ones no longer available.

README.md

@@ -2,7 +2,7 @@
     <img width="128px" height="128px" src="src-tauri/icons/[email protected]">
     <h1>OverBuddy</h1>
     <p>Customize your Overwatch™ 2 in-game main menu background.</p>
-    <p>Current Version: 1.4.1</p>
+    <p>Current Version: 1.4.2</p>
     <div>
       <a href="https://github.com/KirillTregubov/OverBuddy/releases/latest">Download</a>
       ·

package.json

@@ -3,7 +3,7 @@
   "author": "Kirill Tregubov",
   "repository": "https://github.com/KirillTregubov/OverBuddy",
   "private": true,
-  "version": "1.4.1",
+  "version": "1.4.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "overbuddy"
-version = "1.4.1"
+version = "1.4.2"
 description = "Elevate your Overwatch™ 2 experience by customizing your in-game menu background with ease."
 authors = ["Kirill Tregubov"]
 license = "../LICENSE"

src/components/Toaster.tsx

@@ -11,8 +11,8 @@ export default function Toaster() {
         duration: 2000,
         classNames: {
           icon: 'mr-1',
-          toast: 'select-none w-96',
-          actionButton: 'font-semibold'
+          toast: 'select-none w-max max-w-[28rem]',
+          actionButton: 'font-semibold !ml-1'
         }
       }}
       offset="0.75rem"

src/lib/data.ts

@@ -396,32 +396,34 @@ type useCheckUpdatesReturnType =
     }
   | undefined
 
+const checkUpdate = async () => {
+  const update = await check()
+  if (isDev()) {
+    return {
+      available: false
+    } satisfies useCheckUpdatesReturnType
+  }
+
+  if (update) {
+    return {
+      available: update.available,
+      version: update.version,
+      body: update.body
+    } satisfies useCheckUpdatesReturnType
+  }
+
+  return {
+    available: false
+  } satisfies useCheckUpdatesReturnType
+}
+
 export const useCheckUpdates = ({
   onSuccess
 }: {
   onSuccess?: (data?: useCheckUpdatesReturnType) => void
 } = {}) =>
   useMutation({
-    mutationFn: async () => {
-      const update = await check()
-      if (isDev()) {
-        return {
-          available: false
-        } satisfies useCheckUpdatesReturnType
-      }
-
-      if (update) {
-        return {
-          available: update.available,
-          version: update.version,
-          body: update.body
-        } satisfies useCheckUpdatesReturnType
-      }
-
-      return {
-        available: false
-      } satisfies useCheckUpdatesReturnType
-    },
+    mutationFn: checkUpdate,
     onError: (error) => {
       handleError(error)
     },
@@ -467,3 +469,10 @@ export const useUpdateMutation = ({
     },
     onSuccess: (data) => onSuccess?.(data)
   })
+
+export const updateQueryOptions = (enabled: boolean = false) =>
+  queryOptions({
+    queryKey: ['check_for_update'],
+    queryFn: checkUpdate,
+    enabled
+  })

src/routes/menu.tsx

@@ -1,5 +1,5 @@
-import { useSuspenseQuery } from '@tanstack/react-query'
-import { createFileRoute, redirect } from '@tanstack/react-router'
+import { useQuery, useSuspenseQuery } from '@tanstack/react-query'
+import { createFileRoute, redirect, useNavigate } from '@tanstack/react-router'
 import clsx from 'clsx'
 import { AnimatePresence, motion, useAnimation } from 'framer-motion'
 import {
@@ -19,6 +19,7 @@ import {
   activeBackgroundQueryOptions,
   backgroundsQueryOptions,
   launchQueryOptions,
+  updateQueryOptions,
   useActiveBackgroundMutation,
   useBackgroundMutation,
   useResetBackgroundMutation
@@ -31,8 +32,10 @@ const buttonTapAnimation = {
 }
 
 export const Route = createFileRoute('/menu')({
-  loader: async ({ context: { queryClient } }) =>
-    await queryClient.ensureQueryData(backgroundsQueryOptions),
+  loader: async ({ context: { queryClient } }) => {
+    queryClient.ensureQueryData(updateQueryOptions(true))
+    await queryClient.ensureQueryData(backgroundsQueryOptions)
+  },
   beforeLoad: async ({ context: { queryClient } }) => {
     const { is_setup, steam } = await queryClient
       .fetchQuery(launchQueryOptions)
@@ -58,8 +61,10 @@ const onImageError = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
 }
 
 function Menu() {
+  const navigate = useNavigate()
   const { data: backgrounds } = useSuspenseQuery(backgroundsQueryOptions)
   const { data: config } = useSuspenseQuery(launchQueryOptions)
+  const { data: updateAvailable } = useQuery(updateQueryOptions(true))
   const {
     status: setStatus,
     mutate: setBackground,
@@ -79,6 +84,26 @@ function Menu() {
   )
   const { mutate: setActiveBackground } = useActiveBackgroundMutation()
 
+  useEffect(() => {
+    if (updateAvailable?.available) {
+      toast.warning('There is a new version of OverBuddy available.', {
+        id: 'update-available',
+        action: {
+          label: 'View Update',
+          onClick: () => {
+            navigate({
+              to: '/settings',
+              search: {
+                update: true
+              }
+            })
+          }
+        },
+        duration: 5000
+      })
+    }
+  }, [updateAvailable, navigate])
+
   const prevButtonRef = useRef<HTMLButtonElement>(null)
   const prevButtonAnimation = useAnimation()
   const nextButtonRef = useRef<HTMLButtonElement>(null)

src/routes/settings.tsx

@@ -1,4 +1,4 @@
-import { useSuspenseQuery } from '@tanstack/react-query'
+import { useQuery, useSuspenseQuery } from '@tanstack/react-query'
 import { createFileRoute, useRouter } from '@tanstack/react-router'
 import { relaunch } from '@tauri-apps/plugin-process'
 import clsx from 'clsx'
@@ -40,6 +40,7 @@ import {
 import {
   invalidateActiveBackground,
   settingsQueryOptions,
+  updateQueryOptions,
   useCheckUpdates,
   useResetMutation,
   useSetupMutation,
@@ -48,9 +49,21 @@ import {
 import { ConfigError, ConfigErrors, SetupError } from '@/lib/errors'
 import useKeyPress from '@/lib/useKeyPress'
 
+type SettingsSearch = {
+  update: boolean
+}
+
 export const Route = createFileRoute('/settings')({
-  loader: ({ context: { queryClient } }) => {
+  loaderDeps: ({ search: { update } }) => ({ update }),
+  loader: async ({ context: { queryClient }, deps: { update } }) => {
     queryClient.prefetchQuery(settingsQueryOptions)
+    if (update) await queryClient.ensureQueryData(updateQueryOptions(true))
+    else queryClient.removeQueries(updateQueryOptions(true))
+  },
+  validateSearch: (search: Record<string, unknown>): SettingsSearch => {
+    return {
+      update: (search.update as boolean) || false
+    }
   },
   component: Settings,
   pendingComponent: Loading
@@ -536,7 +549,9 @@ function preventReload(event: KeyboardEvent) {
 }
 
 function CheckForUpdates() {
-  const [isOpen, setIsOpen] = useState(false)
+  const { update } = Route.useSearch()
+  const { data: checkData2 } = useQuery(updateQueryOptions(update))
+  const [isOpen, setIsOpen] = useState(checkData2?.available ?? false)
   const [progress, setProgress] = useState(0)
   const {
     status: checkStatus,
@@ -546,6 +561,7 @@ function CheckForUpdates() {
     onSuccess: (data) => {
       if (!data) return
       setIsOpen(data.available)
+
       if (data.available === false) {
         toast.success('You are using the latest version of OverBuddy.')
       }
@@ -554,7 +570,7 @@ function CheckForUpdates() {
   const {
     data: updateSuccess,
     status: updateStatus,
-    mutate: update
+    mutate: applyUpdate
   } = useUpdateMutation()
 
   useEffect(() => {
@@ -569,7 +585,9 @@ function CheckForUpdates() {
 
   return (
     <>
-      <AlertDialog open={isOpen && checkData?.available}>
+      <AlertDialog
+        open={isOpen && (checkData?.available || checkData2?.available)}
+      >
         <AlertDialogContent data-ignore-global-shortcut>
           <AnimatePresence mode="wait" initial={false}>
             {updateStatus === 'idle' ? (
@@ -582,11 +600,13 @@ function CheckForUpdates() {
               >
                 <AlertDialogHeader>
                   <AlertDialogTitle>
-                    OverBuddy v{checkData?.version} is available.
+                    OverBuddy v{checkData?.version || checkData2?.version} is
+                    available.
                   </AlertDialogTitle>
                   <pre className="whitespace-pre-wrap font-sans">
                     <AlertDialogDescription>
-                      {checkData?.body ?? 'There is no changelog available.'}
+                      {(checkData?.body || checkData2?.body) ??
+                        'There is no changelog available.'}
                     </AlertDialogDescription>
                   </pre>
                 </AlertDialogHeader>
@@ -601,7 +621,8 @@ function CheckForUpdates() {
               >
                 <AlertDialogHeader>
                   <AlertDialogTitle>
-                    OverBuddy v{checkData?.version} has been installed.
+                    OverBuddy v{checkData?.version || checkData2?.version} has
+                    been installed.
                   </AlertDialogTitle>
                   <AlertDialogDescription>
                     Please restart OverBuddy to complete the update.
@@ -618,7 +639,8 @@ function CheckForUpdates() {
               >
                 <AlertDialogHeader>
                   <AlertDialogTitle>
-                    Updating to OverBuddy v{checkData?.version}...
+                    Updating to OverBuddy v
+                    {checkData?.version || checkData2?.version}...
                   </AlertDialogTitle>
                   <AlertDialogDescription asChild>
                     <div className="py-1">
@@ -644,6 +666,8 @@ function CheckForUpdates() {
                   </AlertDialogCancel>
                 </motion.div>
               )}
+            </AnimatePresence>
+            <AnimatePresence mode="wait" initial={false}>
               {updateStatus === 'idle' ? (
                 <motion.div
                   initial={{ opacity: 0 }}
@@ -652,7 +676,7 @@ function CheckForUpdates() {
                   transition={{ opacity: { duration: 0.15 } }}
                   key="download"
                 >
-                  <AlertDialogAction onClick={() => update(setProgress)}>
+                  <AlertDialogAction onClick={() => applyUpdate(setProgress)}>
                     Download and Install
                   </AlertDialogAction>
                 </motion.div>

src/routes/setup/index.tsx

@@ -8,25 +8,35 @@ import { BookLockIcon, GlobeIcon, SparklesIcon } from 'lucide-react'
 
 import logo from '@/assets/logo.svg'
 import { Button, ExternalLinkInline } from '@/components/Button'
+import Loading from '@/components/Loading'
 import {
   fadeInVariants,
   moveInVariants,
   staggerChildrenVariants
 } from '@/lib/animations'
-import { useSetupMutation } from '@/lib/data'
+import { updateQueryOptions, useSetupMutation } from '@/lib/data'
 import {
   ConfigError,
   ConfigErrors,
   handleError,
   SetupError
 } from '@/lib/errors'
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { useEffect } from 'react'
+import { toast } from 'sonner'
 
 export const Route = createFileRoute('/setup/')({
-  component: SetupSplash
+  loader: async ({ context: { queryClient } }) =>
+    await queryClient.ensureQueryData(updateQueryOptions(true)),
+  component: SetupSplash,
+  pendingComponent: Loading
 })
 
 function SetupSplash() {
   const navigate = useNavigate()
+  const {
+    data: { available: updateAvailable }
+  } = useSuspenseQuery(updateQueryOptions(true))
   const { status, mutate, reset } = useSetupMutation({
     onError: (error) => {
       if (error instanceof SetupError) {
@@ -58,6 +68,26 @@ function SetupSplash() {
     }
   })
 
+  useEffect(() => {
+    if (updateAvailable) {
+      toast.warning('There is a new version of OverBuddy available.', {
+        id: 'update-available',
+        action: {
+          label: 'View Update',
+          onClick: () => {
+            navigate({
+              to: '/settings',
+              search: {
+                update: true
+              }
+            })
+          }
+        },
+        duration: 5000
+      })
+    }
+  }, [updateAvailable, navigate])
+
   return (
     <motion.div
       className="mx-auto h-full w-full max-w-xl"