add update notification to sidebar, fix aborted requests on navigate

resources/js/Components/UpdateSidebarNotification.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { BellAlertIcon, XMarkIcon } from '@heroicons/vue/20/solid';
+import { SecondaryButton } from '@/packages/ui/src';
+import { useStorage } from '@vueuse/core';
+const showReleaseInfo = useStorage('showReleaseInfo-desktop', true);
+
+function openDesktopGithubRepo() {
+    window
+        .open('https://github.com/solidtime-io/solidtime-desktop', '_blank')
+        ?.focus();
+}
+</script>
+
+<template>
+    <div class="py-4 hidden lg:block" v-if="showReleaseInfo">
+        <div
+            class="rounded-lg px-2.5 py-2 bg-card-background border border-border-secondary">
+            <div class="flex items-start justify-between">
+                <div
+                    class="text-xs pb-1.5 font-semibold text-text-tertiary flex items-center space-x-1">
+                    <BellAlertIcon class="w-3.5"></BellAlertIcon>
+                    <span> New Update </span>
+                </div>
+                <button>
+                    <XMarkIcon
+                        @click="showReleaseInfo = false"
+                        class="w-3.5 text-text-tertiary hover:text-text-secondary"></XMarkIcon>
+                </button>
+            </div>
+
+            <p class="text-xs">
+                <span class="font-semibold">Solidtime Desktop Beta</span> is
+                here! Test our brand new clients for Windows, macOS and Linux
+                now.
+            </p>
+            <SecondaryButton
+                @click="openDesktopGithubRepo"
+                size="small"
+                class="w-full text-center justify-center mt-1.5"
+                >Download now</SecondaryButton
+            >
+        </div>
+    </div>
+</template>
+
+<style scoped></style>

resources/js/Layouts/AppLayout.vue

@@ -33,24 +33,33 @@ import { isBillingActivated } from '@/utils/billing';
 import type { User } from '@/types/models';
 import { ArrowsRightLeftIcon } from '@heroicons/vue/16/solid';
 import { fetchToken, isTokenValid } from '@/utils/session';
+import UpdateSidebarNotification from '@/Components/UpdateSidebarNotification.vue';
 
 defineProps({
     title: String,
 });
 
 const showSidebarMenu = ref(false);
-
+const isUnloading = ref(false);
 onMounted(async () => {
     // make sure that the initial requests are only loaded once, this can be removed once we move away from inertia
     if (window.initialDataLoaded !== true) {
         window.initialDataLoaded = true;
         initializeStores();
     }
+    window.onbeforeunload = () => {
+        isUnloading.value = true;
+    };
     window.onfocus = async () => {
         if (!isTokenValid()) {
             await fetchToken();
         }
-        refreshStores();
+        setTimeout(() => {
+            // prevent store refreshing on navigation
+            if (isUnloading.value === false) {
+                refreshStores();
+            }
+        }, 100);
     };
 });
 
@@ -178,16 +187,19 @@ const page = usePage<{
                 </nav>
             </div>
 
-            <ul
-                class="border-t border-default-background-separator pt-3 flex justify-between pr-4 items-center">
-                <NavigationSidebarItem
-                    class="flex-1"
-                    title="Profile Settings"
-                    :icon="Cog6ToothIcon"
-                    :href="route('profile.show')"></NavigationSidebarItem>
+            <div>
+                <UpdateSidebarNotification></UpdateSidebarNotification>
+                <ul
+                    class="border-t border-default-background-separator pt-3 flex justify-between pr-4 items-center">
+                    <NavigationSidebarItem
+                        class="flex-1"
+                        title="Profile Settings"
+                        :icon="Cog6ToothIcon"
+                        :href="route('profile.show')"></NavigationSidebarItem>
 
-                <UserSettingsIcon></UserSettingsIcon>
-            </ul>
+                    <UserSettingsIcon></UserSettingsIcon>
+                </ul>
+            </div>
         </div>
         <div class="flex-1 sm:ml-[230px] 2xl:ml-[250px]">
             <div