refactor: move updates to settings

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

@@ -321,12 +321,12 @@ async function onApplyMigrationFix(eol) {
             <template v-if="copied"> <CheckIcon class="text-green" /> Copied! </template>
             <template v-else> <CopyIcon /> Copy debug info </template>
           </button>
-        <ButtonStyled class="btn-wrapper neon">
+        <ButtonStyled class="neon-button neon">
                 <a href="https://me.astralium.su/get/ar/help" target="_blank" rel="noopener noreferrer">
                   Get AstralRinth support
                 </a>
         </ButtonStyled>
-        <ButtonStyled class="btn-wrapper neon" >
+        <ButtonStyled class="neon-button neon" >
                 <a href="https://me.astralium.su/get/ar" target="_blank" rel="noopener noreferrer">
                   Checkout latest releases
                 </a>
@@ -334,7 +334,7 @@ async function onApplyMigrationFix(eol) {
         </ButtonStyled>
       </div>
       <template v-if="hasDebugInfo">
-        <div class="bg-button-bg rounded-xl mt-2 overflow-clip">
+        <div class="bg-button-bg rounded-xl mt-2 overflow-hidden">
           <button
             class="flex items-center justify-between w-full bg-transparent border-0 px-4 py-3 cursor-pointer"
             @click="errorCollapsed = !errorCollapsed"
@@ -346,7 +346,9 @@ async function onApplyMigrationFix(eol) {
             />
           </button>
           <Collapsible :collapsed="errorCollapsed">
-            <pre class="m-0 px-4 py-3 bg-bg rounded-none">{{ debugInfo }}</pre>
+            <pre
+              class="m-0 px-4 py-3 bg-bg rounded-none whitespace-pre-wrap break-words overflow-x-auto max-w-full"
+            >{{ debugInfo }}</pre>
           </Collapsible>
         </div>
         <template v-if="errorType === 'state_init'">
@@ -392,7 +394,7 @@ async function onApplyMigrationFix(eol) {
             <div class="flex justify-between">
               <ol class="flex flex-col gap-3">
                 <li>
-                  <ButtonStyled class="btn-wrapper neon">
+                  <ButtonStyled class="neon-button neon">
                     <button
                       :title="language === 'en' 
                         ? 'Convert all line endings in migration files to LF (Unix-style: \\n)' 
@@ -405,7 +407,7 @@ async function onApplyMigrationFix(eol) {
                   </ButtonStyled>
                 </li>
                 <li>
-                  <ButtonStyled class="btn-wrapper neon">
+                  <ButtonStyled class="neon-button neon">
                     <button
                       :title="language === 'en' 
                         ? 'Convert all line endings in migration files to CRLF (Windows-style: \\r\\n)' 
@@ -432,13 +434,13 @@ async function onApplyMigrationFix(eol) {
     <div class="modal-body">
       <h2 class="text-lg font-bold text-contrast space-y-2">
         <template v-if="migrationFixSuccess === true">
-          <p class="flex items-center gap-2 text-green-600">
+          <p class="flex items-center gap-2 neon-text">
             ✅
             {{ language === 'en' 
               ? 'The migration fix has been applied successfully. Please restart the launcher and try to log in to the game :)' 
               : 'Исправление миграции успешно применено. Пожалуйста, перезапустите лаунчер и попробуйте снова авторизоваться в игре :)' }}
           </p>
-          <p class="mt-2 text-sm text-gray-600">
+          <p class="mt-2 text-sm neon-text">
             {{ language === 'en' 
               ? 'If the problem persists, please try the other fix.' 
               : 'Если проблема сохраняется, пожалуйста, попробуйте другой способ.' }}
@@ -446,13 +448,13 @@ async function onApplyMigrationFix(eol) {
         </template>
       
         <template v-else-if="migrationFixSuccess === false">
-          <p class="flex items-center gap-2 text-red-600">
+          <p class="flex items-center gap-2 neon-text">
             ❌
             {{ language === 'en' 
               ? 'The migration fix failed or had no effect.' 
               : 'Исправление миграции не было успешно применено или не имело эффекта.' }}
           </p>
-          <p class="mt-2 text-sm text-gray-600">
+          <p class="mt-2 text-sm neon-text">
             {{ language === 'en' 
               ? 'If the problem persists, please try the other fix.' 
               : 'Если проблема сохраняется, пожалуйста, попробуйте другой способ.' }}
@@ -476,6 +478,7 @@ async function onApplyMigrationFix(eol) {
 
 <style scoped lang="scss">
 @import '../../../../../packages/assets/styles/neon-button.scss';
+@import '../../../../../packages/assets/styles/neon-text.scss';
 
 .cta-button {
   display: flex;

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

@@ -36,60 +36,6 @@
       <span class="circle stopped" />
       <span class="running-text"> No instances running </span>
     </div>
-    <div v-if="updateState">
-      <a>
-        <Button class="download" :disabled="installState" @click="initUpdateModal(), getRemote(false)">
-          <DownloadIcon />
-          {{
-            installState
-              ? "Downloading new update..."
-              : "Download new update"
-          }}
-        </Button>
-      </a>
-    </div>
-    <ModalWrapper ref="updateModalView" :has-to-type="false" header="Request to update the AstralRinth launcher">
-      <div class="modal-body">
-        <div class="markdown-body">
-          <p>The new version of the AstralRinth launcher is available.</p>
-          <p>Your version is outdated. We recommend that you update to the latest version.</p>
-          <p><strong>⚠️ Warning ⚠️</strong></p>
-          <p>
-            Before updating, make sure that you have saved all running instances and made a backup copy of the instances
-            that are valuable to you. Remember that the authors of the product are not responsible for the breakdown of
-            your files, so you should always make copies of them and keep them in a safe place.
-          </p>
-        </div>
-        <span>Source • Git Astralium</span>
-        <span>Version on remote server • <p id="releaseData" class="cosmic inline-fix"></p></span>
-        <span>Version on local device •
-          <p class="cosmic inline-fix">v{{ version }}</p>
-        </span>
-        <div class="button-group push-right">
-          <Button class="updater-modal" @click="updateModalView.hide()">
-            Cancel</Button>
-          <Button class="updater-modal" @click="initDownload()">
-            Download file
-          </Button>
-        </div>
-      </div>
-    </ModalWrapper>
-    <ModalWrapper ref="updateRequestFailView" :has-to-type="false" header="Failed to request a file from the server :(">
-      <div class="modal-body">
-        <div class="markdown-body">
-          <p><strong>Error occurred</strong></p>
-          <p>Unfortunately, the program was unable to download the file from our servers.</p>
-          <p>Please try downloading it yourself from <a href="https://me.astralium.su/get/ar" target="_blank" rel="noopener noreferrer">Git Astralium</a> if there are any updates available.</p>
-        </div>
-        <span>Local AstralRinth •
-          <p class="cosmic inline-fix">v{{ version }}</p>
-        </span>
-      </div>
-      <div class="button-group push-right">
-          <Button class="updater-modal" @click="updateRequestFailView.hide()">
-            Close</Button>
-      </div>
-    </ModalWrapper>
   </div>
   <transition name="download">
     <Card v-if="showCard === true && currentLoadingBars.length > 0" ref="card" class="info-card">
@@ -138,27 +84,7 @@ 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 { getVersion } from '@tauri-apps/api/app'
+import { getRemote } from '@/helpers/update.js'
-
-const version = await getVersion()
-
-import { installState, getRemote, updateState } from '@/helpers/update.js'
-import ModalWrapper from './modal/ModalWrapper.vue'
-
-const updateModalView = ref(null)
-const updateRequestFailView = ref(null)
-
-const initUpdateModal = async () => {
-  updateModalView.value.show()
-}
-
-const initDownload = async () => {
-  updateModalView.value.hide()
-  const result = await getRemote(true);
-  if (!result) {
-    updateRequestFailView.value.show()
-  }
-}
 
 await getRemote(false)
 
@@ -318,101 +244,6 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped lang="scss">
-.inline-fix {
-  display: inline-flex;
-  margin-top: -2rem;
-  margin-bottom: -2rem;
-  //margin-left: 0.3rem;
-}
-
-.cosmic {
-  color: #3e8cde;
-  text-decoration: none;
-  text-shadow:
-    0 0 4px rgba(79, 173, 255, 0.5),
-    0 0 8px rgba(14, 98, 204, 0.5),
-    0 0 12px rgba(122, 31, 199, 0.5);
-  transition: color 0.35s ease;
-}
-
-.markdown-body {
-  :deep(table) {
-    width: auto;
-  }
-
-  :deep(hr),
-  :deep(h1),
-  :deep(h2) {
-    max-width: max(60rem, 90%);
-  }
-
-  :deep(ul),
-  :deep(ol) {
-    margin-left: 2rem;
-  }
-}
-
-.modal-body {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: var(--gap-lg);
-  text-align: left;
-
-  .button-group {
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.5rem;
-  }
-
-  strong {
-    color: var(--color-contrast);
-  }
-}
-
-.download {
-  color: #3e8cde;
-  border-radius: var(--radius-md);
-  border: 1px solid var(--color-button-bg);
-  // padding: var(--gap-sm) var(--gap-lg);
-  background-color: rgba(0, 0, 0, 0);
-  text-decoration: none;
-  text-shadow:
-    0 0 4px rgba(79, 173, 255, 0.5),
-    0 0 8px rgba(14, 98, 204, 0.5),
-    0 0 12px rgba(122, 31, 199, 0.5);
-  transition: color 0.35s ease;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.download:hover,
-.download:focus,
-.download:active {
-  color: #10fae5;
-  text-shadow: #26065e;
-}
-
-.updater-modal {
-  color: #3e8cde;
-  padding: var(--gap-sm) var(--gap-lg);
-  text-decoration: none;
-  text-shadow:
-    0 0 4px rgba(79, 173, 255, 0.5),
-    0 0 8px rgba(14, 98, 204, 0.5),
-    0 0 12px rgba(122, 31, 199, 0.5);
-  transition: color 0.35s ease;
-}
-
-.updater-modal:hover,
-.updater-modal:focus,
-.updater-modal:active {
-  color: #10fae5;
-  text-shadow: #26065e;
-}
-
 .action-groups {
   display: flex;
   flex-direction: row;

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

@@ -8,6 +8,8 @@ import {
   PaintbrushIcon,
   GameIcon,
   CoffeeIcon,
+  DownloadIcon,
+  SpinnerIcon,
 } from '@modrinth/assets'
 import { TabbedModal } from '@modrinth/ui'
 import { computed, ref, watch } from 'vue'
@@ -23,6 +25,23 @@ import { useTheming } from '@/store/state'
 import FeatureFlagSettings from '@/components/ui/settings/FeatureFlagSettings.vue'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { get, set } from '@/helpers/settings.ts'
+// [AR] Imports
+import { installState, getRemote, updateState } from '@/helpers/update.js'
+
+const updateModalView = ref(null)
+const updateRequestFailView = ref(null)
+
+const initUpdateModal = async () => {
+  updateModalView.value.show()
+}
+
+const initDownload = async () => {
+  updateModalView.value.hide()
+  const result = await getRemote(true);
+  if (!result) {
+    updateRequestFailView.value.show()
+  }
+}
 
 const themeStore = useTheming()
 
@@ -141,8 +160,7 @@ function devModeCount() {
             <button 
               class="p-0 m-0 bg-transparent border-none cursor-pointer button-animation"
               :class="{ 'text-brand': themeStore.devMode, 'text-secondary': !themeStore.devMode }"
-              @click="devModeCount"
+              @click="devModeCount">
-            >
               <AstralRinthLogo class="w-6 h-6" />
             </button>
             <div>
@@ -153,9 +171,81 @@ function devModeCount() {
                 {{ osVersion }}
               </p>
             </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" />
+              </template>
+              <template v-else>
+                <DownloadIcon class="size-6" @click="!installState && (initUpdateModal(), getRemote(false))" />
+              </template>
+            </div>
+
           </div>
         </div>
       </template>
     </TabbedModal>
+    <!-- [AR] Feature -->
+    <ModalWrapper ref="updateModalView" :has-to-type="false" header="Request to update the AstralRinth launcher">
+      <div class="space-y-4">
+        <div class="space-y-2">
+          <p>The new version of the AstralRinth launcher is available.</p>
+          <p>Your version is outdated. We recommend that you update to the latest version.</p>
+          <p><strong>⚠️ Warning ⚠️</strong></p>
+          <p>
+            Before updating, make sure that you have saved all running instances and made a backup copy of the instances
+            that are valuable to you. Remember that the authors of the product are not responsible for the breakdown of
+            your files, so you should always make copies of them and keep them in a safe place.
+          </p>
+        </div>
+        <div class="text-sm text-secondary space-y-1">
+          <a class="neon-text" href="https://me.astralium.su/get/ar" target="_blank"
+            rel="noopener noreferrer"><strong>Source:</strong> Git Astralium</a>
+          <p>
+            <strong>Version on remote server:</strong>
+            <span id="releaseData" class="neon-text"></span>
+          </p>
+          <p>
+            <strong>Version on local device:</strong>
+            <span class="neon-text">v{{ version }}</span>
+          </p>
+        </div>
+
+        <div class="absolute bottom-4 right-4 flex items-center gap-4 neon-button neon">
+          <Button class="bordered" @click="updateModalView.hide()">Cancel</Button>
+          <Button class="bordered" @click="initDownload()">Download file</Button>
+        </div>
+      </div>
+    </ModalWrapper>
+    <ModalWrapper ref="updateRequestFailView" :has-to-type="false" header="Failed to request a file from the server :(">
+      <div class="space-y-4">
+        <div class="space-y-2">
+          <p><strong>Error occurred</strong></p>
+          <p>Unfortunately, the program was unable to download the file from our servers.</p>
+          <p>
+            Please try downloading it yourself from
+            <a class="neon-text" href="https://me.astralium.su/get/ar" target="_blank" rel="noopener noreferrer">Git
+              Astralium</a>
+            if there are any updates available.
+          </p>
+        </div>
+
+        <div class="text-sm text-secondary">
+          <p>
+            <strong>Local AstralRinth:</strong>
+            <span class="neon-text">v{{ version }}</span>
+          </p>
+        </div>
+
+        <div class="absolute bottom-4 right-4 flex items-center gap-4 neon-button neon">
+          <Button class="bordered" @click="updateRequestFailView.hide()">Close</Button>
+        </div>
+      </div>
+    </ModalWrapper>
   </ModalWrapper>
 </template>
+
+<style lang="scss" scoped>
+@import '../../../../../../packages/assets/styles/neon-icon.scss';
+@import '../../../../../../packages/assets/styles/neon-button.scss';
+@import '../../../../../../packages/assets/styles/neon-text.scss';
+</style>

packages/assets/styles/neon-button.scss

@@ -1,13 +1,8 @@
 // [AR] Feature
-.btn-wrapper.neon :deep(:is(button, a, .button-like):first-child),
+.neon-button.neon :deep(:is(button, a, .button-like)),
-.btn-wrapper.neon :slotted(:is(button, a, .button-like):first-child),
+.neon-button.neon :slotted(:is(button, a, .button-like)),
-.btn-wrapper.neon :slotted(*) > :is(button, a, .button-like):first-child,
+.neon-button.neon :slotted(*) :is(button, a, .button-like) {
-.btn-wrapper.neon :slotted(*) > *:first-child > :is(button, a, .button-like):first-child,
+  cursor: pointer;
-.btn-wrapper.neon
-  :slotted(*)
-  > *:first-child
-  > *:first-child
-  > :is(button, a, .button-like):first-child {
   background-color: transparent;
   border: 1px solid #3e8cde;
   color: #3e8cde;
@@ -22,20 +17,17 @@
   box-shadow: 0 0 4px rgba(79, 173, 255, 0.5);
 }
 
+.bordered {
+  border-radius: 12px;
+}
+
 /* Hover */
-.btn-wrapper.neon
+.neon-button.neon
-  :deep(:is(button, a, .button-like):first-child):hover:not([disabled]):not(.disabled),
+  :deep(:is(button, a, .button-like):hover):not([disabled]):not(.disabled),
-.btn-wrapper.neon
+.neon-button.neon
-  :slotted(:is(button, a, .button-like):first-child):hover:not([disabled]):not(.disabled),
+  :slotted(:is(button, a, .button-like):hover):not([disabled]):not(.disabled),
-.btn-wrapper.neon
+.neon-button.neon
-  :slotted(*) > :is(button, a, .button-like):first-child:hover:not([disabled]):not(.disabled),
+  :slotted(*) :is(button, a, .button-like):hover:not([disabled]):not(.disabled) {
-.btn-wrapper.neon
-  :slotted(*) > *:first-child > :is(button, a, .button-like):first-child:hover:not([disabled]):not(.disabled),
-.btn-wrapper.neon
-  :slotted(*)
-  > *:first-child
-  > *:first-child
-  > :is(button, a, .button-like):first-child:hover:not([disabled]):not(.disabled) {
   color: #10fae5;
   transform: scale(1.02);
   box-shadow:

packages/assets/styles/neon-icon.scss

@@ -0,0 +1,37 @@
+// [AR] Feature
+.neon-icon {
+  background-color: transparent;
+  color: #3e8cde;
+  text-shadow:
+    0 0 4px rgba(79, 173, 255, 0.5),
+    0 0 8px rgba(14, 98, 204, 0.5),
+    0 0 12px rgba(122, 31, 199, 0.5);
+  transition: transform 0.25s ease, color 0.25s ease, text-shadow 0.25s ease;
+  cursor: pointer;
+  display: inline-block;
+}
+
+/* Hover */
+.neon-icon:hover {
+  color: #10fae5;
+  transform: scale(1.05);
+  text-shadow:
+    0 0 2px rgba(16, 250, 229, 0.4),
+    0 0 4px rgba(16, 250, 229, 0.25);
+}
+
+.neon-icon.pulse {
+  position: relative;
+  animation: neon-pulse 1s ease-in-out infinite;
+  filter: drop-shadow(0 0 6px #10fae5);
+  box-shadow: none;
+}
+
+@keyframes neon-pulse {
+  0%, 100% {
+    filter: drop-shadow(0 0 4px #10fae5);
+  }
+  50% {
+    filter: drop-shadow(0 0 12px #10fae5);
+  }
+}

packages/assets/styles/neon-text.scss

@@ -0,0 +1,28 @@
+// [AR] Feature
+.neon-text {
+  background-color: transparent;
+  color: #3e8cde;
+  text-shadow:
+    0 0 4px rgba(79, 173, 255, 0.5),
+    0 0 8px rgba(14, 98, 204, 0.5),
+    0 0 12px rgba(122, 31, 199, 0.5);
+  transition:
+    color 0.25s ease,
+    box-shadow 0.3s ease,
+    transform 0.15s ease;
+
+  white-space: normal;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  max-width: 100%;
+  display: inline-block;
+  padding: 4px 8px;
+}
+
+/* Hover */
+.neon-text:hover:not([disabled]):not(.disabled) {
+  color: #10fae5;
+  text-shadow:
+    0 0 2px rgba(16, 250, 229, 0.4),
+    0 0 4px rgba(16, 250, 229, 0.25);
+}