refactor: update checker moved to App.vue, added new animated icons

apps/app-frontend/src/App.vue

@@ -72,6 +72,9 @@ import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue'
 import { get_available_capes, get_available_skins } from './helpers/skins'
 import { generateSkinPreviews } from './helpers/rendering/batch-skin-renderer'
 
+// [AR] Feature
+import { getRemote, updateState } from '@/helpers/update.js'
+
 const themeStore = useTheming()
 
 const news = ref([])
@@ -99,6 +102,7 @@ const isMaximized = ref(false)
 
 onMounted(async () => {
   await useCheckDisableMouseover()
+  await getRemote(false) // [AR] Check for updates
 
   document.querySelector('body').addEventListener('click', handleClick)
   document.querySelector('body').addEventListener('auxclick', handleAuxClick)
@@ -465,12 +469,20 @@ function handleAuxClick(e) {
         <PlusIcon />
       </NavButton>
       <div class="flex flex-grow"></div>
-      <NavButton v-if="updateAvailable" v-tooltip.right="'Install update'" :to="() => restartApp()">
+      <!-- [AR] TODO -->
+      <!-- <NavButton v-if="updateAvailable" v-tooltip.right="'Install update'" :to="() => restartApp()">
         <DownloadIcon />
-      </NavButton>
-      <NavButton v-tooltip.right="'Settings'" :to="() => $refs.settingsModal.show()">
-        <SettingsIcon />
-      </NavButton>
+      </NavButton> -->
+      <template v-if="updateState">
+        <NavButton class="neon-icon pulse" v-tooltip.right="'Settings'" :to="() => $refs.settingsModal.show()">
+          <SettingsIcon />
+        </NavButton>
+      </template>
+      <template v-else>
+        <NavButton v-tooltip.right="'Settings'" :to="() => $refs.settingsModal.show()">
+          <SettingsIcon />
+        </NavButton>
+      </template>
       <ButtonStyled v-if="credentials" type="transparent" circular>
         <OverflowMenu
           :options="[
@@ -659,6 +671,9 @@ function handleAuxClick(e) {
 </template>
 
 <style lang="scss" scoped>
+@import '../../../packages/assets/styles/neon-icon.scss';
+@import '../../../packages/assets/styles/neon-text.scss';
+
 .window-controls {
   z-index: 20;
   display: none;

apps/app-frontend/src/components/ui/RunningAppBar.vue

@@ -84,9 +84,6 @@ import ProgressBar from '@/components/ui/ProgressBar.vue'
 import { handleError } from '@/store/notifications.js'
 import { get_many } from '@/helpers/profile.js'
 import { trackEvent } from '@/helpers/analytics'
-import { getRemote } from '@/helpers/update.js'
-
-await getRemote(false)
 
 const router = useRouter()
 const card = ref(null)

apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue

@@ -173,13 +173,12 @@ function devModeCount() {
             </div>
             <div v-if="updateState" class="w-8 h-8 cursor-pointer hover:brightness-75 neon-icon pulse">
               <template v-if="installState">
-                <SpinnerIcon class="size-6 animate-spin" />
+                <SpinnerIcon class="size-6 animate-spin" v-tooltip.bottom="'Installing in process...'" />
               </template>
               <template v-else>
-                <DownloadIcon class="size-6" @click="!installState && (initUpdateModal(), getRemote(false))" />
+                <DownloadIcon class="size-6" v-tooltip.bottom="'View update info'" @click="!installState && (initUpdateModal(), getRemote(false))" />
               </template>
             </div>
-
           </div>
         </div>
       </template>