From 8704d3acb35e8a0c5c5a53c4f5c4f5532aae749a Mon Sep 17 00:00:00 2001
From: Sasha Sorokin <10401817+brawaru@users.noreply.github.com>
Date: Sat, 13 Jul 2024 21:20:43 +0200
Subject: [PATCH 1/5] Rewrite cosmetics and theme preferences (#1292)

- Cosmetics and theme preferences are now only stored in cookies instead
  of a combination of both cookies and state.

- The theme plugin now supports client hints. This allows the server
  to render a page using the client-preferred theme provided it supplies
  this information (any browser other than Firefox), helping to avoid an
  annoying flash while the page is hydrating.

- The previous workaround using the Nitro plugin has been removed. Its
  functionality is now handled by the Nuxt theme plugin with cleaner
  code.

- All pages and components now use the new plugins.
---
 apps/frontend/nuxt.config.ts                  |   8 ++
 .../src/components/ui/charts/ChartDisplay.vue |   2 +-
 apps/frontend/src/composables/cosmetics.js    |  52 -------
 .../src/composables/nuxt-accessors.ts         |   7 +
 apps/frontend/src/composables/theme.js        |  58 --------
 apps/frontend/src/composables/vue.ts          |  14 ++
 apps/frontend/src/layouts/default.vue         |  18 +--
 apps/frontend/src/pages/app.vue               |   2 +-
 .../src/pages/auth/reset-password.vue         |   2 +-
 apps/frontend/src/pages/auth/sign-in.vue      |   2 +-
 apps/frontend/src/pages/auth/sign-up.vue      |   2 +-
 apps/frontend/src/pages/collection/[id].vue   |   1 -
 apps/frontend/src/pages/index.vue             |   4 +-
 .../src/pages/search/[searchProjectType].vue  |   1 -
 apps/frontend/src/pages/settings/index.vue    |  69 ++++------
 apps/frontend/src/pages/user/[id].vue         |   1 -
 apps/frontend/src/plugins/1.theme.js          |  27 ----
 apps/frontend/src/plugins/cosmetics.ts        |  57 ++++++++
 apps/frontend/src/plugins/theme.ts            | 130 ++++++++++++++++++
 apps/frontend/src/server/plugins/theme.js     |  38 -----
 apps/frontend/src/utils/analytics.js          |  21 +--
 21 files changed, 268 insertions(+), 248 deletions(-)
 delete mode 100644 apps/frontend/src/composables/cosmetics.js
 create mode 100644 apps/frontend/src/composables/nuxt-accessors.ts
 delete mode 100644 apps/frontend/src/composables/theme.js
 create mode 100644 apps/frontend/src/composables/vue.ts
 delete mode 100644 apps/frontend/src/plugins/1.theme.js
 create mode 100644 apps/frontend/src/plugins/cosmetics.ts
 create mode 100644 apps/frontend/src/plugins/theme.ts
 delete mode 100644 apps/frontend/src/server/plugins/theme.js

diff --git a/apps/frontend/nuxt.config.ts b/apps/frontend/nuxt.config.ts
index e8de813c9..513fd5e93 100644
--- a/apps/frontend/nuxt.config.ts
+++ b/apps/frontend/nuxt.config.ts
@@ -392,6 +392,14 @@ export default defineNuxtConfig({
       autoprefixer: {},
     },
   },
+  routeRules: {
+    "/**": {
+      headers: {
+        "Accept-CH": "Sec-CH-Prefers-Color-Scheme",
+        "Critical-CH": "Sec-CH-Prefers-Color-Scheme",
+      },
+    },
+  },
   compatibilityDate: "2024-07-03",
 });
 
diff --git a/apps/frontend/src/components/ui/charts/ChartDisplay.vue b/apps/frontend/src/components/ui/charts/ChartDisplay.vue
index 852c687de..36a603f58 100644
--- a/apps/frontend/src/components/ui/charts/ChartDisplay.vue
+++ b/apps/frontend/src/components/ui/charts/ChartDisplay.vue
@@ -162,7 +162,7 @@
                     <div
                       :style="{
                         '--color-brand': isUsingProjectColors
-                          ? intToRgba(project.color, project.id, theme ?? undefined)
+                          ? intToRgba(project.color, project.id, theme.active ?? undefined)
                           : getDefaultColor(project.id),
                       }"
                       class="legend__item__color"
diff --git a/apps/frontend/src/composables/cosmetics.js b/apps/frontend/src/composables/cosmetics.js
deleted file mode 100644
index 294c8882b..000000000
--- a/apps/frontend/src/composables/cosmetics.js
+++ /dev/null
@@ -1,52 +0,0 @@
-export const useCosmetics = () =>
-  useState("cosmetics", () => {
-    const cosmetics = useCookie("cosmetics", {
-      maxAge: 60 * 60 * 24 * 365 * 10,
-      sameSite: "lax",
-      secure: true,
-      httpOnly: false,
-      path: "/",
-    });
-
-    if (!cosmetics.value) {
-      cosmetics.value = {
-        searchLayout: false,
-        projectLayout: false,
-        advancedRendering: true,
-        externalLinksNewTab: true,
-        notUsingBlockers: false,
-        hideModrinthAppPromos: false,
-        preferredDarkTheme: "dark",
-        searchDisplayMode: {
-          mod: "list",
-          plugin: "list",
-          resourcepack: "gallery",
-          modpack: "list",
-          shader: "gallery",
-          datapack: "list",
-          user: "list",
-          collection: "list",
-        },
-        hideStagingBanner: false,
-      };
-    }
-
-    return cosmetics.value;
-  });
-
-export const saveCosmetics = () => {
-  const cosmetics = useCosmetics();
-
-  console.log("SAVING COSMETICS:");
-  console.log(cosmetics);
-
-  const cosmeticsCookie = useCookie("cosmetics", {
-    maxAge: 60 * 60 * 24 * 365 * 10,
-    sameSite: "lax",
-    secure: true,
-    httpOnly: false,
-    path: "/",
-  });
-
-  cosmeticsCookie.value = cosmetics.value;
-};
diff --git a/apps/frontend/src/composables/nuxt-accessors.ts b/apps/frontend/src/composables/nuxt-accessors.ts
new file mode 100644
index 000000000..5130f6268
--- /dev/null
+++ b/apps/frontend/src/composables/nuxt-accessors.ts
@@ -0,0 +1,7 @@
+export function useTheme() {
+  return useNuxtApp().$theme;
+}
+
+export function useCosmetics() {
+  return useNuxtApp().$cosmetics;
+}
diff --git a/apps/frontend/src/composables/theme.js b/apps/frontend/src/composables/theme.js
deleted file mode 100644
index 460ebdf1f..000000000
--- a/apps/frontend/src/composables/theme.js
+++ /dev/null
@@ -1,58 +0,0 @@
-export const useTheme = () =>
-  useState("theme", () => {
-    const colorMode = useCookie("color-mode", {
-      maxAge: 60 * 60 * 24 * 365 * 10,
-      sameSite: "lax",
-      secure: true,
-      httpOnly: false,
-      path: "/",
-    });
-
-    if (!colorMode.value) {
-      colorMode.value = {
-        value: "dark",
-        preference: "system",
-      };
-    }
-
-    if (colorMode.value.preference !== "system") {
-      colorMode.value.value = colorMode.value.preference;
-    }
-
-    return colorMode.value;
-  });
-
-export const updateTheme = (value, updatePreference = false) => {
-  const theme = useTheme();
-  const cosmetics = useCosmetics();
-
-  const themeCookie = useCookie("color-mode", {
-    maxAge: 60 * 60 * 24 * 365 * 10,
-    sameSite: "lax",
-    secure: true,
-    httpOnly: false,
-    path: "/",
-  });
-
-  if (value === "system") {
-    theme.value.preference = "system";
-
-    const colorSchemeQueryList = window.matchMedia("(prefers-color-scheme: light)");
-    if (colorSchemeQueryList.matches) {
-      theme.value.value = "light";
-    } else {
-      theme.value.value = cosmetics.value.preferredDarkTheme;
-    }
-  } else {
-    theme.value.value = value;
-    if (updatePreference) theme.value.preference = value;
-  }
-
-  if (import.meta.client) {
-    document.documentElement.className = `${theme.value.value}-mode`;
-  }
-
-  themeCookie.value = theme.value;
-};
-
-export const DARK_THEMES = ["dark", "oled", "retro"];
diff --git a/apps/frontend/src/composables/vue.ts b/apps/frontend/src/composables/vue.ts
new file mode 100644
index 000000000..cf49bc462
--- /dev/null
+++ b/apps/frontend/src/composables/vue.ts
@@ -0,0 +1,14 @@
+/**
+ * Creates a computed reference that uses a provide getter function called with an argument representing the current mount state of the component.
+ * @param getter A getter function that will run with `mounted` argument representing whether or not the component is mounted.
+ * @returns A computed reference that changes when component becomes mounted or unmounted.
+ */
+export function useMountedValue<T>(getter: (isMounted: boolean) => T) {
+  const mounted = ref(getCurrentInstance()?.isMounted ?? false);
+
+  onMounted(() => (mounted.value = true));
+
+  onUnmounted(() => (mounted.value = false));
+
+  return computed(() => getter(mounted.value));
+}
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 4be98be2a..863ad8b31 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -62,7 +62,7 @@
                 :title="formatMessage(messages.changeTheme)"
                 @click="changeTheme"
               >
-                <MoonIcon v-if="$colorMode.value === 'light'" aria-hidden="true" />
+                <MoonIcon v-if="$theme.active === 'light'" aria-hidden="true" />
                 <SunIcon v-else aria-hidden="true" />
               </button>
               <div
@@ -242,7 +242,7 @@
               {{ formatMessage(commonMessages.settingsLabel) }}
             </NuxtLink>
             <button class="iconified-button" @click="changeTheme">
-              <MoonIcon v-if="$colorMode.value === 'light'" class="icon" />
+              <MoonIcon v-if="$theme.active === 'light'" class="icon" />
               <SunIcon v-else class="icon" />
               <span class="dropdown-item__text">
                 {{ formatMessage(messages.changeTheme) }}
@@ -403,7 +403,7 @@
           {{ formatMessage(messages.getModrinthApp) }}
         </nuxt-link>
         <button class="iconified-button raised-button" @click="changeTheme">
-          <MoonIcon v-if="$colorMode.value === 'light'" aria-hidden="true" />
+          <MoonIcon v-if="$theme.active === 'light'" aria-hidden="true" />
           <SunIcon v-else aria-hidden="true" />
           {{ formatMessage(messages.changeTheme) }}
         </button>
@@ -449,7 +449,6 @@ import ModalCreation from "~/components/ui/ModalCreation.vue";
 import Avatar from "~/components/ui/Avatar.vue";
 import { getProjectTypeMessage } from "~/utils/i18n-project-type.ts";
 import { commonMessages } from "~/utils/common-messages.ts";
-import { DARK_THEMES } from "~/composables/theme.js";
 
 const { formatMessage } = useVIntl();
 
@@ -738,18 +737,11 @@ function toggleBrowseMenu() {
     isMobileMenuOpen.value = false;
   }
 }
-function changeTheme() {
-  updateTheme(
-    DARK_THEMES.includes(app.$colorMode.value)
-      ? "light"
-      : cosmetics.value.preferredDarkTheme ?? "dark",
-    true,
-  );
-}
+
+const { cycle: changeTheme } = useTheme();
 
 function hideStagingBanner() {
   cosmetics.value.hideStagingBanner = true;
-  saveCosmetics();
 }
 </script>
 
diff --git a/apps/frontend/src/pages/app.vue b/apps/frontend/src/pages/app.vue
index 8400deaf3..fa092c6a9 100644
--- a/apps/frontend/src/pages/app.vue
+++ b/apps/frontend/src/pages/app.vue
@@ -896,7 +896,7 @@ useSeoMeta({
     </div>
     <div class="logo-banner">
       <svg
-        v-if="$colorMode.value === 'light'"
+        v-if="$theme.active === 'light'"
         viewBox="0 0 865 512"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/frontend/src/pages/auth/reset-password.vue b/apps/frontend/src/pages/auth/reset-password.vue
index 2f57ba8a2..074acb0fc 100644
--- a/apps/frontend/src/pages/auth/reset-password.vue
+++ b/apps/frontend/src/pages/auth/reset-password.vue
@@ -26,7 +26,7 @@
           ref="turnstile"
           v-model="token"
           class="turnstile"
-          :options="{ theme: $colorMode.value === 'light' ? 'light' : 'dark' }"
+          :options="{ theme: $theme.active === 'light' ? 'light' : 'dark' }"
         />
 
         <button class="btn btn-primary centered-btn" :disabled="!token" @click="recovery">
diff --git a/apps/frontend/src/pages/auth/sign-in.vue b/apps/frontend/src/pages/auth/sign-in.vue
index 7dc22f7b6..0110affe2 100644
--- a/apps/frontend/src/pages/auth/sign-in.vue
+++ b/apps/frontend/src/pages/auth/sign-in.vue
@@ -85,7 +85,7 @@
           ref="turnstile"
           v-model="token"
           class="turnstile"
-          :options="{ theme: $colorMode.value === 'light' ? 'light' : 'dark' }"
+          :options="{ theme: $theme.active === 'light' ? 'light' : 'dark' }"
         />
 
         <button
diff --git a/apps/frontend/src/pages/auth/sign-up.vue b/apps/frontend/src/pages/auth/sign-up.vue
index 91ff51bc4..e5f75da2d 100644
--- a/apps/frontend/src/pages/auth/sign-up.vue
+++ b/apps/frontend/src/pages/auth/sign-up.vue
@@ -110,7 +110,7 @@
         ref="turnstile"
         v-model="token"
         class="turnstile"
-        :options="{ theme: $colorMode.value === 'light' ? 'light' : 'dark' }"
+        :options="{ theme: $theme.active === 'light' ? 'light' : 'dark' }"
       />
 
       <button
diff --git a/apps/frontend/src/pages/collection/[id].vue b/apps/frontend/src/pages/collection/[id].vue
index 715dd1836..3486785f7 100644
--- a/apps/frontend/src/pages/collection/[id].vue
+++ b/apps/frontend/src/pages/collection/[id].vue
@@ -487,7 +487,6 @@ function cycleSearchDisplayMode() {
     cosmetics.value.searchDisplayMode.collection,
     tags.value.projectViewModes,
   );
-  saveCosmetics();
 }
 
 let collection, refreshCollection, creator, projects, refreshProjects;
diff --git a/apps/frontend/src/pages/index.vue b/apps/frontend/src/pages/index.vue
index 4dafb6622..39ca70824 100644
--- a/apps/frontend/src/pages/index.vue
+++ b/apps/frontend/src/pages/index.vue
@@ -199,7 +199,7 @@
           <div class="blob-demonstration gradient-border">
             <div class="launcher-view">
               <img
-                v-if="$colorMode.value === 'light'"
+                v-if="$theme.active === 'light'"
                 src="https://cdn.modrinth.com/landing-new/launcher-light.webp"
                 alt="launcher graphic"
                 class="minecraft-screen"
@@ -407,7 +407,7 @@
     </div>
     <div class="logo-banner">
       <svg
-        v-if="$colorMode.value === 'light'"
+        v-if="$theme.active === 'light'"
         viewBox="0 0 865 512"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/frontend/src/pages/search/[searchProjectType].vue b/apps/frontend/src/pages/search/[searchProjectType].vue
index d816743ca..866a09779 100644
--- a/apps/frontend/src/pages/search/[searchProjectType].vue
+++ b/apps/frontend/src/pages/search/[searchProjectType].vue
@@ -763,7 +763,6 @@ function cycleSearchDisplayMode() {
     cosmetics.value.searchDisplayMode[projectType.value.id],
     tags.value.projectViewModes,
   );
-  saveCosmetics();
   setClosestMaxResults();
 }
 
diff --git a/apps/frontend/src/pages/settings/index.vue b/apps/frontend/src/pages/settings/index.vue
index d7ef00b60..98801a605 100644
--- a/apps/frontend/src/pages/settings/index.vue
+++ b/apps/frontend/src/pages/settings/index.vue
@@ -21,7 +21,7 @@
           v-for="option in themeOptions"
           :key="option"
           class="preview-radio button-base"
-          :class="{ selected: theme.preference === option }"
+          :class="{ selected: theme.preferred === option }"
           @click="() => updateColorTheme(option)"
         >
           <div class="preview" :class="`${option === 'system' ? systemTheme : option}-mode`">
@@ -32,7 +32,7 @@
             </div>
           </div>
           <div class="label">
-            <RadioButtonChecked v-if="theme.preference === option" class="radio" />
+            <RadioButtonChecked v-if="theme.preferred === option" class="radio" />
             <RadioButtonIcon v-else class="radio" />
             {{ colorTheme[option] ? formatMessage(colorTheme[option]) : option }}
             <SunIcon
@@ -153,7 +153,6 @@
           v-model="cosmetics.advancedRendering"
           class="switch stylized-toggle"
           type="checkbox"
-          @change="saveCosmetics"
         />
       </div>
       <div class="adjacent-input small">
@@ -170,7 +169,6 @@
           v-model="cosmetics.externalLinksNewTab"
           class="switch stylized-toggle"
           type="checkbox"
-          @change="saveCosmetics"
         />
       </div>
       <div class="adjacent-input small">
@@ -187,7 +185,6 @@
           v-model="cosmetics.hideModrinthAppPromos"
           class="switch stylized-toggle"
           type="checkbox"
-          @change="saveCosmetics"
         />
       </div>
       <div class="adjacent-input small">
@@ -204,7 +201,6 @@
           v-model="cosmetics.searchLayout"
           class="switch stylized-toggle"
           type="checkbox"
-          @change="saveCosmetics"
         />
       </div>
       <div class="adjacent-input small">
@@ -221,19 +217,19 @@
           v-model="cosmetics.projectLayout"
           class="switch stylized-toggle"
           type="checkbox"
-          @change="saveCosmetics"
         />
       </div>
     </section>
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { CodeIcon, RadioButtonIcon, RadioButtonChecked, SunIcon, MoonIcon } from "@modrinth/assets";
 import { Button } from "@modrinth/ui";
 import { formatProjectType } from "~/plugins/shorthands.js";
 import MessageBanner from "~/components/ui/MessageBanner.vue";
-import { DARK_THEMES } from "~/composables/theme.js";
+import { DarkThemes, type Theme } from "~/plugins/theme.ts";
+import type { DisplayLocation } from "~/plugins/cosmetics";
 
 useHead({
   title: "Display settings - Modrinth",
@@ -330,6 +326,10 @@ const projectListLayouts = defineMessages({
     id: "settings.display.project-list-layouts.user",
     defaultMessage: "User profile pages",
   },
+  collection: {
+    id: "settings.display.project-list.layouts.collection",
+    defaultMessage: "Collection",
+  },
 });
 
 const toggleFeatures = defineMessages({
@@ -390,45 +390,32 @@ const cosmetics = useCosmetics();
 const flags = useFeatureFlags();
 const tags = useTags();
 
-const systemTheme = ref("light");
-
 const theme = useTheme();
 
+// On the server the value of native theme can be 'unknown'. To ensure we're
+// hydrating correctly, we need to make sure we aren't using 'unknown' or
+// otherwise wait until we are mounted and supposedly hydrated at this point...
+
+const systemTheme = useMountedValue((mounted) => {
+  if (import.meta.server && theme.native !== "unknown") return theme.native;
+
+  return mounted ? theme.native : theme.active;
+});
+
 const themeOptions = computed(() => {
-  const options = ["system", "light", "dark", "oled"];
-  if (flags.value.developerMode || theme.value.preference === "retro") {
+  const options: Theme[] = ["system", "light", "dark", "oled"];
+  if (flags.value.developerMode || theme.preferred === "retro") {
     options.push("retro");
   }
   return options;
 });
 
-onMounted(() => {
-  updateSystemTheme();
-  window.matchMedia("(prefers-color-scheme: light)").addEventListener("change", (event) => {
-    setSystemTheme(event.matches);
-  });
-});
-
-function updateSystemTheme() {
-  const query = window.matchMedia("(prefers-color-scheme: light)");
-  setSystemTheme(query.matches);
-}
-
-function setSystemTheme(light) {
-  if (light) {
-    systemTheme.value = "light";
-  } else {
-    systemTheme.value = cosmetics.value.preferredDarkTheme ?? "dark";
-  }
-}
-
-function updateColorTheme(value) {
-  if (DARK_THEMES.includes(value)) {
+function updateColorTheme(value: Theme) {
+  if (DarkThemes.includes(value)) {
     cosmetics.value.preferredDarkTheme = value;
-    saveCosmetics();
-    updateSystemTheme();
   }
-  updateTheme(value, true);
+
+  theme.preferred = value;
 }
 
 function disableDeveloperMode() {
@@ -445,16 +432,18 @@ function disableDeveloperMode() {
 const listTypes = computed(() => {
   const types = tags.value.projectTypes.map((type) => {
     return {
-      id: type.id,
+      id: type.id as DisplayLocation,
       name: formatProjectType(type.id) + "s",
       display: "the " + formatProjectType(type.id).toLowerCase() + "s search page",
     };
   });
+
   types.push({
-    id: "user",
+    id: "user" as DisplayLocation,
     name: "User profiles",
     display: "user pages",
   });
+
   return types;
 });
 </script>
diff --git a/apps/frontend/src/pages/user/[id].vue b/apps/frontend/src/pages/user/[id].vue
index dbd82fcba..f7dbd0107 100644
--- a/apps/frontend/src/pages/user/[id].vue
+++ b/apps/frontend/src/pages/user/[id].vue
@@ -489,7 +489,6 @@ function cycleSearchDisplayMode() {
     cosmetics.value.searchDisplayMode.user,
     tags.value.projectViewModes,
   );
-  saveCosmetics();
 }
 </script>
 <script>
diff --git a/apps/frontend/src/plugins/1.theme.js b/apps/frontend/src/plugins/1.theme.js
deleted file mode 100644
index 5f6961b5a..000000000
--- a/apps/frontend/src/plugins/1.theme.js
+++ /dev/null
@@ -1,27 +0,0 @@
-export default defineNuxtPlugin(async (nuxtApp) => {
-  await useAuth();
-  await useUser();
-  const themeStore = useTheme();
-  const cosmetics = useCosmetics();
-
-  nuxtApp.hook("app:mounted", () => {
-    if (import.meta.client && themeStore.value.preference === "system") {
-      const colorSchemeQueryList = window.matchMedia("(prefers-color-scheme: light)");
-
-      const setColorScheme = (e) => {
-        if (themeStore.value.preference === "system") {
-          if (e.matches) {
-            updateTheme("light");
-          } else {
-            updateTheme(cosmetics.value.preferredDarkTheme ?? "dark");
-          }
-        }
-      };
-
-      setColorScheme(colorSchemeQueryList);
-      colorSchemeQueryList.addEventListener("change", setColorScheme);
-    }
-  });
-
-  nuxtApp.provide("colorMode", themeStore.value);
-});
diff --git a/apps/frontend/src/plugins/cosmetics.ts b/apps/frontend/src/plugins/cosmetics.ts
new file mode 100644
index 000000000..bea118224
--- /dev/null
+++ b/apps/frontend/src/plugins/cosmetics.ts
@@ -0,0 +1,57 @@
+import type { Theme } from "./theme.ts";
+
+export type DisplayMode = "list" | "gallery" | "grid";
+
+export type DisplayLocation =
+  | "mod"
+  | "plugin"
+  | "resourcepack"
+  | "modpack"
+  | "shader"
+  | "datapack"
+  | "user"
+  | "collection";
+
+export interface Cosmetics {
+  searchLayout: boolean;
+  projectLayout: boolean;
+  advancedRendering: boolean;
+  externalLinksNewTab: boolean;
+  notUsingBlockers: boolean;
+  hideModrinthAppPromos: boolean;
+  preferredDarkTheme: Theme;
+  searchDisplayMode: Record<DisplayLocation, DisplayMode>;
+  hideStagingBanner: boolean;
+}
+
+export default defineNuxtPlugin(() => {
+  const cosmetics = useCookie<Cosmetics>("cosmetics", {
+    maxAge: 60 * 60 * 24 * 365 * 10,
+    sameSite: "lax",
+    secure: true,
+    httpOnly: false,
+    path: "/",
+    default: () => ({
+      searchLayout: false,
+      projectLayout: false,
+      advancedRendering: true,
+      externalLinksNewTab: true,
+      notUsingBlockers: false,
+      hideModrinthAppPromos: false,
+      preferredDarkTheme: "dark",
+      searchDisplayMode: {
+        mod: "list",
+        plugin: "list",
+        resourcepack: "gallery",
+        modpack: "list",
+        shader: "gallery",
+        datapack: "list",
+        user: "list",
+        collection: "list",
+      },
+      hideStagingBanner: false,
+    }),
+  });
+
+  return { provide: { cosmetics } };
+});
diff --git a/apps/frontend/src/plugins/theme.ts b/apps/frontend/src/plugins/theme.ts
new file mode 100644
index 000000000..3762526fe
--- /dev/null
+++ b/apps/frontend/src/plugins/theme.ts
@@ -0,0 +1,130 @@
+import { ref, computed } from "vue";
+
+export type Theme = "system" | "light" | "dark" | "oled" | "retro";
+
+export const DarkThemes: Theme[] = ["dark", "oled", "retro"];
+
+export type SystemTheme = "unknown" | "light" | "dark";
+
+function useNativeTheme() {
+  if (import.meta.server) {
+    let clientHint;
+
+    switch (useRequestHeader("Sec-CH-Prefers-Color-Scheme")) {
+      case "light":
+        clientHint = "light";
+        break;
+      case "dark":
+        clientHint = "dark";
+        break;
+      default:
+        clientHint = "unknown";
+    }
+
+    return computed(() => clientHint as SystemTheme);
+  }
+
+  const lightPreference = window.matchMedia("(prefers-color-scheme: light)");
+
+  const isLight = ref(lightPreference.matches);
+
+  const onPreferenceChange = ({ matches }: MediaQueryListEvent) => (isLight.value = matches);
+
+  lightPreference.addEventListener("change", onPreferenceChange);
+
+  onScopeDispose(() => lightPreference.removeEventListener("change", onPreferenceChange));
+
+  return computed<SystemTheme>(() => (isLight.value ? "light" : "dark"));
+}
+
+interface ThemeSettings {
+  preference: Theme;
+  value: Exclude<Theme, "system">;
+}
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const $nativeTheme = useNativeTheme();
+
+  const $themeSettings = useCookie<ThemeSettings>("color-mode", {
+    maxAge: 60 * 60 * 24 * 365 * 10,
+    sameSite: "lax",
+    secure: true,
+    httpOnly: false,
+    path: "/",
+    default: () => ({
+      preference: "system",
+      // if we have a client hint - use the associated theme, otherwise use dark
+      // theme, because it's worse to have a bright flash in the dark than just
+      // darkened screen in the light
+      value: $nativeTheme.value === "unknown" ? "dark" : $nativeTheme.value,
+    }),
+  });
+
+  const $preferredTheme = toRef($themeSettings.value, "preference");
+
+  const $cosmetics = useCosmetics();
+
+  const $activeTheme = toRef($themeSettings.value, "value");
+
+  useHead({ htmlAttrs: { class: () => [`${$activeTheme.value}-mode`] } });
+
+  function syncTheme() {
+    const preferredTheme = $preferredTheme.value;
+
+    if (preferredTheme === "system") {
+      const nativeTheme = $nativeTheme.value;
+
+      if (nativeTheme === "unknown" || nativeTheme === "dark") {
+        let { preferredDarkTheme } = $cosmetics.value;
+        if (preferredDarkTheme === "system") {
+          // fail safe in case the user is messing with internals
+          preferredDarkTheme = "dark";
+        }
+
+        $activeTheme.value = preferredDarkTheme;
+      } else {
+        $activeTheme.value = nativeTheme;
+      }
+
+      return;
+    }
+
+    $activeTheme.value = preferredTheme;
+  }
+
+  if (
+    import.meta.server &&
+    $preferredTheme.value === "system" &&
+    $nativeTheme.value !== "unknown"
+  ) {
+    // take advantage of the client hint
+    syncTheme();
+  }
+
+  if (import.meta.client) {
+    const $clientReady = ref(false);
+
+    nuxtApp.hook("app:suspense:resolve", () => {
+      $clientReady.value = true;
+    });
+
+    watchEffect(() => $clientReady.value && syncTheme());
+  }
+
+  function cycle() {
+    $preferredTheme.value = DarkThemes.includes($activeTheme.value)
+      ? "light"
+      : $cosmetics.value.preferredDarkTheme;
+  }
+
+  return {
+    provide: {
+      theme: reactive({
+        preferred: $preferredTheme,
+        active: $activeTheme,
+        native: $nativeTheme,
+        cycle,
+      }),
+    },
+  };
+});
diff --git a/apps/frontend/src/server/plugins/theme.js b/apps/frontend/src/server/plugins/theme.js
deleted file mode 100644
index 298777f4c..000000000
--- a/apps/frontend/src/server/plugins/theme.js
+++ /dev/null
@@ -1,38 +0,0 @@
-export default defineNitroPlugin((nitroApp) => {
-  nitroApp.hooks.hook("render:html", (html, { event }) => {
-    try {
-      const cookies = parseCookies(event);
-
-      if (cookies && cookies["color-mode"]) {
-        const theme = JSON.parse(cookies["color-mode"]);
-
-        html.htmlAttrs.push(`class="${theme.value}-mode"`);
-      } else {
-        html.htmlAttrs.push(`class="dark-mode"`);
-      }
-
-      // Reset cookie attributes to correct ones
-      if (cookies) {
-        const opts = {
-          maxAge: 60 * 60 * 24 * 365 * 10,
-          sameSite: "lax",
-          secure: true,
-          httpOnly: false,
-          path: "/",
-        };
-
-        if (cookies["auth-token"]) {
-          setCookie(event, "auth-token", cookies["auth-token"], opts);
-        }
-        if (cookies["color-mode"]) {
-          setCookie(event, "color-mode", cookies["color-mode"], opts);
-        }
-        if (cookies.cosmetics) {
-          setCookie(event, "cosmetics", cookies.cosmetics, opts);
-        }
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  });
-});
diff --git a/apps/frontend/src/utils/analytics.js b/apps/frontend/src/utils/analytics.js
index 94cb01b13..9ee00977b 100644
--- a/apps/frontend/src/utils/analytics.js
+++ b/apps/frontend/src/utils/analytics.js
@@ -152,7 +152,7 @@ export const analyticsSetToCSVString = (analytics) => {
   return [header, ...data].join(newline);
 };
 
-export const processAnalytics = (category, projects, labelFn, sortFn, mapFn, chartName) => {
+export const processAnalytics = (category, projects, labelFn, sortFn, mapFn, chartName, theme) => {
   if (!category || !projects) {
     return emptyAnalytics;
   }
@@ -219,10 +219,9 @@ export const processAnalytics = (category, projects, labelFn, sortFn, mapFn, cha
         },
       ],
       colors: projectData.map((_, i) => {
-        const theme = useTheme();
         const project = chartData[i];
 
-        return intToRgba(project.color, project.id, theme.value);
+        return intToRgba(project.color, project.id, theme);
       }),
       defaultColors: projectData.map((_, i) => {
         const project = chartData[i];
@@ -282,10 +281,10 @@ const sortTimestamp = ([a], [b]) => a - b;
 const roundValue = ([ts, value]) => [ts, Math.round(parseFloat(value) * 100) / 100];
 
 const processCountryAnalytics = (c, projects) => processAnalyticsByCountry(c, projects, sortCount);
-const processNumberAnalytics = (c, projects) =>
-  processAnalytics(c, projects, formatTimestamp, sortTimestamp, null, "Downloads");
-const processRevAnalytics = (c, projects) =>
-  processAnalytics(c, projects, formatTimestamp, sortTimestamp, roundValue, "Revenue");
+const processNumberAnalytics = (c, projects, theme) =>
+  processAnalytics(c, projects, formatTimestamp, sortTimestamp, null, "Downloads", theme);
+const processRevAnalytics = (c, projects, theme) =>
+  processAnalytics(c, projects, formatTimestamp, sortTimestamp, roundValue, "Revenue", theme);
 
 const useFetchAnalytics = (
   url,
@@ -328,10 +327,12 @@ export const useFetchAllAnalytics = (
     viewsByCountry: processCountryAnalytics(viewsByCountry.value, selectedProjects.value),
   }));
 
+  const theme = useTheme();
+
   const totalData = computed(() => ({
-    downloads: processNumberAnalytics(downloadData.value, projects.value),
-    views: processNumberAnalytics(viewData.value, projects.value),
-    revenue: processRevAnalytics(revenueData.value, projects.value),
+    downloads: processNumberAnalytics(downloadData.value, projects.value, theme.active),
+    views: processNumberAnalytics(viewData.value, projects.value, theme.active),
+    revenue: processRevAnalytics(revenueData.value, projects.value, theme.active),
   }));
 
   const fetchData = async (query) => {

From a129faf99cc6a4b9fb520b30b83f3e2a3a0ed655 Mon Sep 17 00:00:00 2001
From: DIDIRUS4 <DIDIRUS@yandex.ru>
Date: Sun, 14 Jul 2024 15:47:33 +0300
Subject: [PATCH 2/5] Fix onBoardingScreen

---
 apps/app-frontend/src/App.vue                        | 12 +++++-------
 .../src/components/ui/tutorial/OnboardingScreen.vue  |  2 +-
 packages/app-lib/src/state/settings.rs               |  2 +-
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index 64d7843e9..b22ead562 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -62,8 +62,6 @@ const nativeDecorations = ref(false)
 
 const sidebarOpen = ref(false)
 
-const onboardingVideo = ref()
-
 const failureText = ref(null)
 const os = ref('')
 
@@ -85,7 +83,7 @@ defineExpose({
       await get()
     // video should play if the user is not on linux, and has not onboarded
     os.value = await getOS()
-    videoPlaying.value = !fully_onboarded && os.value !== 'Linux'
+    // videoPlaying.value = !fully_onboarded && os.value !== 'Linux'
     const dev = await isDev()
     const version = await getVersion()
     showOnboarding.value = !fully_onboarded
@@ -126,9 +124,9 @@ defineExpose({
       })
     )
 
-    if (showOnboarding.value) {
-      onboardingVideo.value.play()
-    }
+    // if (showOnboarding.value) {
+    //   onboardingVideo.value.play()
+    // }
   },
   failure: async (e) => {
     isLoading.value = false
@@ -312,7 +310,7 @@ const toggleSidebar = () => {
         <hr />
       </div>
       <div class="instances pages-list">
-        <!-- TODO: Fix visual issuesin future... maybe :D -->
+        <!-- FIXME: Fix visual issuesin future... maybe :D -->
         <RouterLink v-for="instance in instancesByPlayed" :key="instance.id"
           :to="`/instance/${encodeURIComponent(instance.path)}`" class="btn icon-only collapsed-button">
           <Avatar class="collapsed-avatar__icon" :src="iconPathAsUrl(instance.metadata?.icon)" size="xl" />
diff --git a/apps/app-frontend/src/components/ui/tutorial/OnboardingScreen.vue b/apps/app-frontend/src/components/ui/tutorial/OnboardingScreen.vue
index ebb840e55..6becd3e59 100644
--- a/apps/app-frontend/src/components/ui/tutorial/OnboardingScreen.vue
+++ b/apps/app-frontend/src/components/ui/tutorial/OnboardingScreen.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { Button } from '@modrinth/ui'
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { get, set } from '@/helpers/settings.js'
 import mixpanel from 'mixpanel-browser'
 import GalleryImage from '@/components/ui/tutorial/GalleryImage.vue'
diff --git a/packages/app-lib/src/state/settings.rs b/packages/app-lib/src/state/settings.rs
index a8c071ac3..ebb4a9bd9 100644
--- a/packages/app-lib/src/state/settings.rs
+++ b/packages/app-lib/src/state/settings.rs
@@ -102,7 +102,7 @@ impl Settings {
                 developer_mode: false,
                 opt_out_analytics: true, // Disabled by default in AstralRinth
                 advanced_rendering: true,
-                fully_onboarded: rescued, // If we rescued the settings file, we should consider the user fully onboarded
+                fully_onboarded: false, // If we rescued the settings file, we should consider the user fully onboarded
 
                 // By default, the config directory is the same as the settings directory
                 loaded_config_dir: DirectoryInfo::get_initial_settings_dir(),

From a29f3de0c4d85347e548eb2a978586b816bd460a Mon Sep 17 00:00:00 2001
From: DIDIRUS4 <DIDIRUS@yandex.ru>
Date: Mon, 15 Jul 2024 00:25:10 +0300
Subject: [PATCH 3/5] Changes in launcher update module

---
 apps/app-frontend/package.json                |   2 +-
 .../src/components/ui/RunningAppBar.vue       |  86 ++++-
 apps/app-frontend/src/helpers/update.js       | 171 +++++----
 apps/app-frontend/src/helpers/utils.js        |   4 +-
 apps/app-frontend/src/languages/en_us.json    |   3 +-
 apps/app-frontend/src/languages/ru_ru.json    |   3 +-
 apps/app-frontend/src/pages/Index.vue         |   3 -
 apps/app-frontend/src/pages/Library.vue       |   1 -
 apps/app-frontend/src/pages/Settings.vue      | 360 ++++++++++++------
 apps/app/src/api/utils.rs                     |   4 +-
 10 files changed, 414 insertions(+), 223 deletions(-)

diff --git a/apps/app-frontend/package.json b/apps/app-frontend/package.json
index a13a3770b..1446e5210 100644
--- a/apps/app-frontend/package.json
+++ b/apps/app-frontend/package.json
@@ -2,7 +2,7 @@
   "name": "@modrinth/app-frontend",
   "private": true,
   "version": "0.7.3",
-  "patch_version": "1 • Patch",
+  "patch_version": "01 • Beta",
   "development_build": true,
   "type": "module",
   "scripts": {
diff --git a/apps/app-frontend/src/components/ui/RunningAppBar.vue b/apps/app-frontend/src/components/ui/RunningAppBar.vue
index 9fcf98405..88bef2a22 100644
--- a/apps/app-frontend/src/components/ui/RunningAppBar.vue
+++ b/apps/app-frontend/src/components/ui/RunningAppBar.vue
@@ -35,10 +35,20 @@
           <DropdownIcon />
         </div>
       </div>
-      <Button v-tooltip="t('RunningAppBar.StopInstance')" icon-only class="stop icon-button" @click="stop()">
+      <Button
+        v-tooltip="t('RunningAppBar.StopInstance')"
+        icon-only
+        class="stop icon-button"
+        @click="stop()"
+      >
         <StopCircleIcon />
       </Button>
-      <Button v-tooltip="t('RunningAppBar.Logs')" icon-only class="utility icon-button" @click="goToTerminal()">
+      <Button
+        v-tooltip="t('RunningAppBar.Logs')"
+        icon-only
+        class="utility icon-button"
+        @click="goToTerminal()"
+      >
         <TerminalSquareIcon />
       </Button>
       <Button
@@ -57,9 +67,17 @@
     </div>
     <div v-if="updateAvailable">
       <a>
-        <Button class="download" :disabled="buildInstalling" @click="confirmUpdating()">
+        <Button
+          class="download"
+          :disabled="buildInstalling"
+          @click="confirmUpdating(), getRemote(false, false)"
+        >
           <DownloadIcon />
-          {{ buildInstalling ? t('RunningAppBar.UpdateDownloading') : t('RunningAppBar.UpdateAvailable') }}
+          {{
+            buildInstalling
+              ? t('RunningAppBar.UpdateDownloading')
+              : t('RunningAppBar.UpdateAvailable')
+          }}
         </Button>
       </a>
     </div>
@@ -70,8 +88,15 @@
             {{ t('RunningAppBar.UpdatingDesc') }}
           </p>
         </div>
+        <span>{{ t('Settings.Remote') }} <a id="releaseData" class="cosmic inline-fix"></a></span>
+        <span
+          >{{ t('Settings.Local') }}
+          <a class="cosmic inline-fix">v{{ version }}{{ patch_version }}</a></span
+        >
         <div class="button-group push-right">
-          <Button class="download-modal" @click="confirmUpdate.hide()"> {{ t('RunningAppBar.RejectUpdating') }}</Button>
+          <Button class="download-modal" @click="confirmUpdate.hide()">
+            {{ t('RunningAppBar.RejectUpdating') }}</Button
+          >
           <Button class="download-modal" @click="approvedUpdating()">
             {{ t('RunningAppBar.AcceptUpdating') }}
           </Button>
@@ -128,12 +153,13 @@
 
 <script setup>
 import { DownloadIcon, StopCircleIcon, TerminalSquareIcon, DropdownIcon } from '@modrinth/assets'
+import { version, patch_version } from '../../../package.json'
 import { Button, Card, Modal } from '@modrinth/ui'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import {
   get_all_running_profiles as getRunningProfiles,
   get_uuids_by_profile_path as getProfileProcesses,
-  kill_by_uuid as killProfile
+  kill_by_uuid as killProfile,
 } from '@/helpers/process'
 import { loading_listener, offline_listener, process_listener } from '@/helpers/events'
 import { useRouter } from 'vue-router'
@@ -143,7 +169,7 @@ import ProgressBar from '@/components/ui/ProgressBar.vue'
 import { handleError } from '@/store/notifications.js'
 import { mixpanel_track } from '@/helpers/mixpanel'
 import { ChatIcon } from '@/assets/icons'
-import { buildInstalling, forceRefreshRemote, updateAvailable } from '@/helpers/update.js'
+import { buildInstalling, getRemote, updateAvailable } from '@/helpers/update.js'
 import { i18n } from '@/main.js'
 
 const t = i18n.global.t
@@ -189,7 +215,7 @@ const stop = async (path) => {
     mixpanel_track('InstanceStop', {
       loader: currentProcesses.value[0].metadata.loader,
       game_version: currentProcesses.value[0].metadata.game_version,
-      source: 'AppBar'
+      source: 'AppBar',
     })
   } catch (e) {
     console.error(e)
@@ -306,11 +332,30 @@ const confirmUpdating = async () => {
 
 const approvedUpdating = async () => {
   confirmUpdate.value.hide()
-  await forceRefreshRemote(true, true)
+  await getRemote(true, true)
 }
+
+await getRemote(true, false)
 </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;
@@ -351,11 +396,12 @@ const approvedUpdating = async () => {
   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.0);
+  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);
+  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;
@@ -369,13 +415,15 @@ const approvedUpdating = async () => {
   color: #10fae5;
   text-shadow: #26065e;
 }
+
 .download-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);
+  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;
 }
 
@@ -419,8 +467,10 @@ const approvedUpdating = async () => {
   gap: var(--gap-xs);
   white-space: nowrap;
   overflow: hidden;
-  -webkit-user-select: none; /* Safari */
-  -ms-user-select: none; /* IE 10 and IE 11 */
+  -webkit-user-select: none;
+  /* Safari */
+  -ms-user-select: none;
+  /* IE 10 and IE 11 */
   user-select: none;
 
   &.clickable:hover {
diff --git a/apps/app-frontend/src/helpers/update.js b/apps/app-frontend/src/helpers/update.js
index b7c4d47ad..fc29b686a 100644
--- a/apps/app-frontend/src/helpers/update.js
+++ b/apps/app-frontend/src/helpers/update.js
@@ -1,6 +1,6 @@
 import { ref } from 'vue'
 import { patch_version, version } from '../../package.json'
-import { downloadBuild, getOS } from '@/helpers/utils.js'
+import { getArtifact, getOS } from '@/helpers/utils.js'
 
 export const blockDownload = ref(true)
 export const buildInstalling = ref(false)
@@ -8,45 +8,58 @@ export const updateAvailable = ref(false)
 export const latestBetaCommitTruncatedSha = ref('')
 export const latestBetaCommitLink = ref('')
 export const hrefAstralium = 'https://www.astralium.su/get/ar'
+
 const os = ref('')
 const releaseLink = `https://api.github.com/repos/DIDIRUS4/AstralRinth/releases/latest`
 const branchesLink = `https://api.github.com/repos/DIDIRUS4/AstralRinth/branches`
 const failedFetchRelease = `Failed to fetch remote releases:`
 const failedFetchCommit = `Failed to fetch remote commits:`
-const v = `v`
-const localVersion = `${v}${version}${patch_version}`
-const macExtension = `.dmg`
-const windowsExtension = `.msi`
-const blacklistDevBuilds = `DEV_BUILD`
+const localVersion = `v${version}${patch_version}`
+const betaBranch = `beta` // Github repository beta branch
+const osNames = ['macos', 'windows', 'linux']
+const macExtension = `.dmg` // MacOS file type for download
+const windowsExtension = `.msi` // Windows file type for download
+const blacklistedBuilds = [
+  `dev`,
+  `nightly`,
+  `dirty`,
+  `dirty-dev`,
+  `dirty-nightly`,
+  `dirty_dev`,
+  `dirty_nightly`,
+] // This is blacklisted builds for download. For example, file.startsWith('dev') is not allowed.
 
+/**
+ * Asynchronously fetches branches and their latest commit information from the specified URLs.
+ *
+ * @return {Promise<void>} This function does not return anything directly but updates the latestBetaCommitTruncatedSha and latestBetaCommitLink values.
+ */
 export async function getBranches() {
   fetch(branchesLink)
     .then(async (response) => {
       if (response.ok) {
         response.json().then((data) => {
           const branches = data.map((branch) => branch)
-          branches.forEach(branch => {
-            fetch(branch.commit.url)
-              .then(async (data) => {
-                if (data.ok) {
-                  data.json().then((data) => {
-                    const truncatedSha = data.sha.slice(0, 7)
-                    const commitLink = data.html_url
-                    if (branch.name.toLowerCase() == "beta".toLowerCase()) {
-                      latestBetaCommitTruncatedSha.value = truncatedSha
-                      latestBetaCommitLink.value = commitLink
-                    }
-                  })
-                } else {
-                  throw new Error(data.status)
-                }
-              })
-          });
+          branches.forEach((branch) => {
+            fetch(branch.commit.url).then(async (data) => {
+              if (data.ok) {
+                data.json().then((data) => {
+                  const truncatedSha = data.sha.slice(0, 7)
+                  const commitLink = data.html_url
+                  if (branch.name.toLowerCase() == betaBranch) {
+                    latestBetaCommitTruncatedSha.value = truncatedSha
+                    latestBetaCommitLink.value = commitLink
+                  }
+                })
+              } else {
+                throw new Error(data.status)
+              }
+            })
+          })
         })
       } else {
         throw new Error(response.status)
       }
-
     })
     .catch((error) => {
       latestBetaCommitTruncatedSha.value = error.message
@@ -55,7 +68,13 @@ export async function getBranches() {
     })
 }
 
-export async function forceRefreshRemote(disableElementId, autoUpdate) {
+/**
+ * Asynchronous function to get remote data and handle updates and downloads.
+ *
+ * @param {boolean} elementIdBool - Indicates whether to disable an element ID.
+ * @param {boolean} downloadArtifactBool - Indicates whether to download an artifact.
+ */
+export async function getRemote(elementIdBool, downloadArtifactBool) {
   fetch(releaseLink)
     .then((response) => {
       if (!response.ok) {
@@ -68,27 +87,24 @@ export async function forceRefreshRemote(disableElementId, autoUpdate) {
       const latestRelease = data.name
       let remoteVersion = undefined
 
-      if (!disableElementId) {
+      if (!elementIdBool) {
         const releaseData = document.getElementById('releaseData')
-        if (!releaseData) {
+        if (releaseData == null) {
           console.error('Release data element not found.')
-          return
+          return false
         }
         releaseData.textContent = latestRelease
         remoteVersion = `${releaseData.textContent}`
       } else {
         remoteVersion = latestRelease
       }
-      if (os.value.toLowerCase() == 'MacOS'.toLowerCase() || os.value.toLowerCase() == 'Windows'.toLowerCase()) {
-        if (remoteVersion && remoteVersion.startsWith(localVersion)) {
+      if (osNames.includes(os.value.toLowerCase())) {
+        if (remoteVersion.startsWith(localVersion)) {
           updateAvailable.value = false
           blockDownload.value = true
-        } else if (remoteVersion && remoteVersion.startsWith(v)) {
+        } else {
           updateAvailable.value = true
           blockDownload.value = false
-        } else {
-          updateAvailable.value = false
-          blockDownload.value = true
         }
       } else {
         updateAvailable.value = false
@@ -96,59 +112,64 @@ export async function forceRefreshRemote(disableElementId, autoUpdate) {
       }
       console.log('Update available state is', updateAvailable.value)
       console.log('Remote version is', remoteVersion)
+      console.log('Local version is', localVersion)
       console.log('Operating System is', os.value)
 
-      if (autoUpdate) {
-        buildInstalling.value = true;
-        let fileName = null
-        const buildType = data.assets
-        if (os.value.toLowerCase() == 'MacOS'.toLowerCase()) {
-          for (let i of buildType) {
-            if (i.name.endsWith(macExtension) && !i.name.startsWith(blacklistDevBuilds)) {
-              fileName = i.name
-              console.log(i.browser_download_url)
-              await downloadBuild(i.browser_download_url, fileName, os.value, true)
-              break
-            }
-          }
-
-
-        } else if (os.value.toLowerCase() == 'Windows'.toLowerCase()) {
-          for (let i of buildType) {
-            if (i.name.endsWith(windowsExtension) && !i.name.startsWith(blacklistDevBuilds)) {
-              fileName = i.name
-              console.log(i.browser_download_url)
-              await downloadBuild(i.browser_download_url, fileName, os.value, true)
-              break
-            }
-          }
-        }
-        // else if (os.value.toLowerCase() == "Linux".toLowerCase()) {
-        //   console.warn(
-        //     "[AR • Warning] • Due to some circumstances, we can't fully determine the structure and condition of your Linux OS," +
-        //     " so we'll download the latest build for the latest ubuntu, that we've available. Installation is done manually")
-        //   for (let i of buildType) {
-        //     if (i.name.endsWith(linuxExtension) && !i.name.startsWith(blacklistDevBuilds)) {
-        //       fileName = i.name
-        //       console.log(i.browser_download_url)
-        //       await downloadBuild(i.browser_download_url, fileName, os.value, false)
-        //       break
-        //     }
-        //   }
-        // }
-        buildInstalling.value = false;
+      if (downloadArtifactBool) {
+        buildInstalling.value = true
+        const builds = data.assets
+        const fileName = getInstaller(getExtension(), builds)
+        await getArtifact(fileName[1], fileName[0], os.value, true)
+        buildInstalling.value = false
       }
     })
     .catch((error) => {
       console.error(failedFetchRelease, error)
-      if (!disableElementId) {
+      if (!elementIdBool) {
         const errorData = document.getElementById('releaseData')
         if (errorData) {
           errorData.textContent = `${error.message}`
         }
         updateAvailable.value = false
         blockDownload.value = true
-        buildInstalling.value = false;
+        buildInstalling.value = false
       }
     })
+}
+
+/**
+ * Retrieves the installer for a specific operating system.
+ *
+ * @param {string} osExtension - The file extension of the installer.
+ * @param {Array} builds - The list of builds.
+ * @return {Array|null} An array containing the installer name and URL if found, or null if not found.
+ */
+function getInstaller(osExtension, builds) {
+  for (let i of builds) {
+    let blacklistedItem = false
+    blacklistedBuilds.forEach((item) => {
+      if (i.name.startsWith(item)) {
+        return (blacklistedItem = true)
+      }
+    })
+    if (i.name.endsWith(osExtension) && !blacklistedItem) {
+      console.log(i.browser_download_url)
+      return [i.name, i.browser_download_url]
+    }
+  }
+  return null
+}
+
+/**
+ * A function to get the extension based on the operating system.
+ *
+ * @return {string} The extension based on the operating system.
+ */
+function getExtension() {
+  if (os.value.toLowerCase() == osNames[0]) {
+    return macExtension
+  } else if (os.value.toLowerCase() == osNames[1]) {
+    return windowsExtension
+  }
+  return null
 }
\ No newline at end of file
diff --git a/apps/app-frontend/src/helpers/utils.js b/apps/app-frontend/src/helpers/utils.js
index 59b617f56..b6c6433db 100644
--- a/apps/app-frontend/src/helpers/utils.js
+++ b/apps/app-frontend/src/helpers/utils.js
@@ -12,9 +12,9 @@ export async function isDev() {
   return await invoke('is_dev')
 }
 
-export async function downloadBuild(downloadurl, filename, ostype, autoupdatesupported) {
+export async function getArtifact(downloadurl, filename, ostype, autoupdatesupported) {
   console.log('Downloading build', downloadurl, filename, ostype, autoupdatesupported)
-  return await invoke('plugin:utils|download_build', { downloadurl, filename, ostype, autoupdatesupported })
+  return await invoke('plugin:utils|get_artifact', { downloadurl, filename, ostype, autoupdatesupported })
 }
 
 // One of 'Windows', 'Linux', 'MacOS'
diff --git a/apps/app-frontend/src/languages/en_us.json b/apps/app-frontend/src/languages/en_us.json
index 259dcfda2..f625288b0 100644
--- a/apps/app-frontend/src/languages/en_us.json
+++ b/apps/app-frontend/src/languages/en_us.json
@@ -108,7 +108,8 @@
     "Local": "Local installed version is",
     "DownloadButton": "Download via github",
     "DevelopmentBuild": "You are using an assembly for development, an unexpected error may occur!",
-    "LatestBetaCommit": "Latest beta commit on remote is"
+    "LatestBetaCommit": "Latest beta commit on remote is",
+    "CheckForUpdates": "Check for updates"
   },
   "RunningAppBar": {
     "GetSupport": "Support",
diff --git a/apps/app-frontend/src/languages/ru_ru.json b/apps/app-frontend/src/languages/ru_ru.json
index 27b9f1176..7436da89b 100644
--- a/apps/app-frontend/src/languages/ru_ru.json
+++ b/apps/app-frontend/src/languages/ru_ru.json
@@ -108,7 +108,8 @@
     "Local": "Локальная установленная версия",
     "DownloadButton": "Скачать через Github",
     "DevelopmentBuild": "Вы используете сборку для разработки, может возникнуть непредвиденная ошибка!",
-    "LatestBetaCommit": "Последний beta коммит на удаленном сервере"
+    "LatestBetaCommit": "Последний beta коммит на удаленном сервере",
+    "CheckForUpdates": "Проверить наличие обновлений"
   },
   "RunningAppBar": {
     "GetSupport": "Поддержка",
diff --git a/apps/app-frontend/src/pages/Index.vue b/apps/app-frontend/src/pages/Index.vue
index 84965d891..d3e0c08c3 100644
--- a/apps/app-frontend/src/pages/Index.vue
+++ b/apps/app-frontend/src/pages/Index.vue
@@ -7,7 +7,6 @@ import { useBreadcrumbs } from '@/store/breadcrumbs'
 import { useFetch } from '@/helpers/fetch.js'
 import { isOffline } from '@/helpers/utils'
 import { i18n } from '@/main.js';
-import { forceRefreshRemote } from '@/helpers/update.js'
 const t = i18n.global.t;
 import { useInstances } from '@/store/instances'
 import { storeToRefs } from 'pinia'
@@ -95,8 +94,6 @@ onUnmounted(() => {
   unlistenProfile()
   unlistenOffline()
 })
-
-await forceRefreshRemote(true)
 </script>
 
 <template>
diff --git a/apps/app-frontend/src/pages/Library.vue b/apps/app-frontend/src/pages/Library.vue
index bec4b3ea8..443168fbc 100644
--- a/apps/app-frontend/src/pages/Library.vue
+++ b/apps/app-frontend/src/pages/Library.vue
@@ -46,7 +46,6 @@ since it always requests an update of the list of instances every time you enter
 as if it were a Reload function in debug or just a Route module in normal use, or the Library start page in Settings after next launcher boot or reload.
 */
 await instancesStore.refreshInstances() 
-
 </script>
 
 <template>
diff --git a/apps/app-frontend/src/pages/Settings.vue b/apps/app-frontend/src/pages/Settings.vue
index 1af9758ee..e964d2459 100644
--- a/apps/app-frontend/src/pages/Settings.vue
+++ b/apps/app-frontend/src/pages/Settings.vue
@@ -1,6 +1,13 @@
 <script setup>
 import { ref, watch } from 'vue'
-import { DownloadIcon, LogOutIcon, LogInIcon, BoxIcon, FolderSearchIcon, UpdatedIcon } from '@modrinth/assets'
+import {
+  DownloadIcon,
+  LogOutIcon,
+  LogInIcon,
+  BoxIcon,
+  FolderSearchIcon,
+  UpdatedIcon,
+} from '@modrinth/assets'
 import { Card, Slider, DropdownSelect, Toggle, Modal, Button } from '@modrinth/ui'
 import { handleError, useTheming } from '@/store/state'
 import { is_dir_writeable, change_config_dir, get, set } from '@/helpers/settings'
@@ -15,10 +22,16 @@ import { open } from '@tauri-apps/api/dialog'
 import { getOS } from '@/helpers/utils.js'
 import { version, patch_version, development_build } from '../../package.json'
 import { useLanguage } from '@/store/language.js'
-import { i18n } from '@/main.js';
+import { i18n } from '@/main.js'
 import { PirateShip } from '@/assets/render/index.js'
-import { blockDownload, buildInstalling, forceRefreshRemote, getBranches, hrefAstralium, latestBetaCommitLink, latestBetaCommitTruncatedSha } from '@/helpers/update.js'
-const t = i18n.global.t;
+import {
+  getRemote,
+  getBranches,
+  hrefAstralium,
+  latestBetaCommitLink,
+  latestBetaCommitTruncatedSha,
+} from '@/helpers/update.js'
+const t = i18n.global.t
 import { storeToRefs } from 'pinia'
 
 const pageOptions = ['Home', 'Library']
@@ -127,15 +140,8 @@ async function refreshDir() {
 
 const confirmUpdate = ref(null)
 
-await forceRefreshRemote(false, false)
+await getRemote(false, false)
 await getBranches()
-const confirmUpdating = async () => {
-  confirmUpdate.value.show()
-}
-const approvedUpdating = async () => {
-  confirmUpdate.value.hide()
-  await forceRefreshRemote(true, true)
-}
 </script>
 
 <template>
@@ -146,7 +152,11 @@ const approvedUpdating = async () => {
           <span class="label__title size-card-header">{{ t('Settings.GeneralSettings') }}</span>
         </h3>
       </div>
-      <Modal ref="loginScreenModal" class="login-screen-modal" :noblur="!themeStore.advancedRendering">
+      <Modal
+        ref="loginScreenModal"
+        class="login-screen-modal"
+        :noblur="!themeStore.advancedRendering"
+      >
         <ModrinthLoginScreen :modal="true" :prev-page="signInAfter" :next-page="signInAfter" />
       </Modal>
       <div class="adjacent-input">
@@ -170,7 +180,6 @@ const approvedUpdating = async () => {
         <span class="label__title">{{ t('Settings.AppDirectory') }}</span>
         <span class="label__description">
           {{ t('Settings.TheDirectoryWhereTheLauncherStoresAllOfItsFiles') }}
-
         </span>
       </label>
       <div class="app-directory">
@@ -198,25 +207,43 @@ const approvedUpdating = async () => {
           <span class="label__title">{{ t('Settings.ColorTheme') }}</span>
           <span class="label__description">{{ t('Settings.ChangeColor') }}</span>
         </label>
-        <DropdownSelect id="theme" name="Theme dropdown" :options="themeStore.themeOptions"
-          :default-value="settings.theme" :model-value="settings.theme" class="theme-dropdown" @change="(e) => {
-            themeStore.setThemeState(e.option.toLowerCase())
-            settings.theme = themeStore.selectedTheme
-          }
-            " />
+        <DropdownSelect
+          id="theme"
+          name="Theme dropdown"
+          :options="themeStore.themeOptions"
+          :default-value="settings.theme"
+          :model-value="settings.theme"
+          class="theme-dropdown"
+          @change="
+            (e) => {
+              themeStore.setThemeState(e.option.toLowerCase())
+              settings.theme = themeStore.selectedTheme
+            }
+          "
+        />
       </div>
 
       <div class="adjacent-input">
         <label for="language">
           <span class="label__title">{{ t('Settings.Language') }}</span>
-          <span class="label__description">{{ t('Settings.ChangeTheGlobalLauncherLanguages') }}</span>
+          <span class="label__description">{{
+            t('Settings.ChangeTheGlobalLauncherLanguages')
+          }}</span>
         </label>
-        <DropdownSelect id="language" name="Language dropdown" :options="languageStore.languageOptions"
-          :default-value="settings.language" :model-value="settings.language" class="language-dropdown" @change="(e) => {
-            languageStore.setLanguageState(e.option.toLowerCase())
-            settings.language = languageStore.selectedLanguage
-          }
-            " />
+        <DropdownSelect
+          id="language"
+          name="Language dropdown"
+          :options="languageStore.languageOptions"
+          :default-value="settings.language"
+          :model-value="settings.language"
+          class="language-dropdown"
+          @change="
+            (e) => {
+              languageStore.setLanguageState(e.option.toLowerCase())
+              settings.language = languageStore.selectedLanguage
+            }
+          "
+        />
       </div>
 
       <div class="adjacent-input">
@@ -226,45 +253,70 @@ const approvedUpdating = async () => {
             {{ t('Settings.EnablesAdvancedRendering') }}
           </span>
         </label>
-        <Toggle id="advanced-rendering" :model-value="themeStore.advancedRendering"
-          :checked="themeStore.advancedRendering" @update:model-value="(e) => {
-            themeStore.advancedRendering = e
-            settings.advanced_rendering = themeStore.advancedRendering
-          }
-            " />
+        <Toggle
+          id="advanced-rendering"
+          :model-value="themeStore.advancedRendering"
+          :checked="themeStore.advancedRendering"
+          @update:model-value="
+            (e) => {
+              themeStore.advancedRendering = e
+              settings.advanced_rendering = themeStore.advancedRendering
+            }
+          "
+        />
       </div>
       <div class="adjacent-input">
         <label for="minimize-launcher">
           <span class="label__title">{{ t('Settings.MinimizeLauncher') }}</span>
           <span class="label__description">{{ t('Settings.MinimizeTheLauncher') }}</span>
         </label>
-        <Toggle id="minimize-launcher" :model-value="settings.hide_on_process" :checked="settings.hide_on_process"
-          @update:model-value="(e) => {
-            settings.hide_on_process = e
-          }
-            " />
+        <Toggle
+          id="minimize-launcher"
+          :model-value="settings.hide_on_process"
+          :checked="settings.hide_on_process"
+          @update:model-value="
+            (e) => {
+              settings.hide_on_process = e
+            }
+          "
+        />
       </div>
       <div v-if="getOS() != 'MacOS'" class="adjacent-input">
         <label for="native-decorations">
           <span class="label__title">{{ t('Settings.NativeDecorations') }}</span>
           <span class="label__description">{{ t('Settings.UseSystemWindowFrame') }}</span>
         </label>
-        <Toggle id="native-decorations" :model-value="settings.native_decorations"
-          :checked="settings.native_decorations" @update:model-value="(e) => {
-            settings.native_decorations = e
-          }
-            " />
+        <Toggle
+          id="native-decorations"
+          :model-value="settings.native_decorations"
+          :checked="settings.native_decorations"
+          @update:model-value="
+            (e) => {
+              settings.native_decorations = e
+            }
+          "
+        />
       </div>
       <div class="adjacent-input">
         <label for="opening-page">
           <span class="label__title">{{ t('Settings.DefaultLandingPage') }}</span>
-          <span class="label__description">{{ t('Settings.ChangeThePageToWhichTheLauncherOpensOn') }}</span>
+          <span class="label__description">{{
+            t('Settings.ChangeThePageToWhichTheLauncherOpensOn')
+          }}</span>
         </label>
-        <DropdownSelect id="opening-page" name="Opening page dropdown" :options="pageOptions"
-          :default-value="settings.default_page" :model-value="settings.default_page" class="opening-page" @change="(e) => {
-            settings.default_page = e.option
-          }
-            " />
+        <DropdownSelect
+          id="opening-page"
+          name="Opening page dropdown"
+          :options="pageOptions"
+          :default-value="settings.default_page"
+          :model-value="settings.default_page"
+          class="opening-page"
+          @change="
+            (e) => {
+              settings.default_page = e.option
+            }
+          "
+        />
       </div>
     </Card>
     <Card>
@@ -279,7 +331,13 @@ const approvedUpdating = async () => {
           <span class="label__title">{{ t('Settings.Mcd') }}</span>
           <span class="label__description">{{ t('Settings.McdDesc') }}</span>
         </label>
-        <Slider id="max-downloads" v-model="settings.max_concurrent_downloads" :min="1" :max="10" :step="1" />
+        <Slider
+          id="max-downloads"
+          v-model="settings.max_concurrent_downloads"
+          :min="1"
+          :max="10"
+          :step="1"
+        />
       </div>
 
       <div class="adjacent-input">
@@ -287,7 +345,13 @@ const approvedUpdating = async () => {
           <span class="label__title">{{ t('Settings.Mcw') }}</span>
           <span class="label__description">{{ t('Settings.McwDesc') }}</span>
         </label>
-        <Slider id="max-writes" v-model="settings.max_concurrent_writes" :min="1" :max="50" :step="1" />
+        <Slider
+          id="max-writes"
+          v-model="settings.max_concurrent_writes"
+          :min="1"
+          :max="50"
+          :step="1"
+        />
       </div>
     </Card>
     <Card>
@@ -303,11 +367,17 @@ const approvedUpdating = async () => {
             {{ t('Settings.AnalyticsDesc') }}
           </span>
         </label>
-        <Toggle id="opt-out-analytics" :disabled="settings.opt_out_analytics" :model-value="settings.opt_out_analytics"
-          :checked="settings.opt_out_analytics" @update:model-value="(e) => {
-            settings.opt_out_analytics = e
-          }
-            " />
+        <Toggle
+          id="opt-out-analytics"
+          :disabled="settings.opt_out_analytics"
+          :model-value="settings.opt_out_analytics"
+          :checked="settings.opt_out_analytics"
+          @update:model-value="
+            (e) => {
+              settings.opt_out_analytics = e
+            }
+          "
+        />
       </div>
       <div class="adjacent-input">
         <label for="disable-discord-rpc">
@@ -316,8 +386,11 @@ const approvedUpdating = async () => {
             {{ t('Settings.DisableRPCDesc') }}
           </span>
         </label>
-        <Toggle id="disable-discord-rpc" v-model="settings.disable_discord_rpc"
-          :checked="settings.disable_discord_rpc" />
+        <Toggle
+          id="disable-discord-rpc"
+          v-model="settings.disable_discord_rpc"
+          :checked="settings.disable_discord_rpc"
+        />
       </div>
     </Card>
     <Card>
@@ -342,13 +415,25 @@ const approvedUpdating = async () => {
       <label for="java-args">
         <span class="label__title">{{ t('Settings.JavaArgs') }}</span>
       </label>
-      <input id="java-args" v-model="settings.javaArgs" autocomplete="off" type="text" class="installation-input"
-        :placeholder="t('Settings.EnterJavaArgs')" />
+      <input
+        id="java-args"
+        v-model="settings.javaArgs"
+        autocomplete="off"
+        type="text"
+        class="installation-input"
+        :placeholder="t('Settings.EnterJavaArgs')"
+      />
       <label for="env-vars">
         <span class="label__title">{{ t('Settings.EnvVars') }}</span>
       </label>
-      <input id="env-vars" v-model="settings.envArgs" autocomplete="off" type="text" class="installation-input"
-        :placeholder="t('Settings.EnterEnvVars')" />
+      <input
+        id="env-vars"
+        v-model="settings.envArgs"
+        autocomplete="off"
+        type="text"
+        class="installation-input"
+        :placeholder="t('Settings.EnterEnvVars')"
+      />
       <hr class="card-divider" />
       <div class="adjacent-input">
         <label for="max-memory">
@@ -357,7 +442,14 @@ const approvedUpdating = async () => {
             {{ t('Settings.JavaMemDesc') }}
           </span>
         </label>
-        <Slider id="max-memory" v-model="settings.memory.maximum" :min="8" :max="maxMemory" :step="64" unit="mb" />
+        <Slider
+          id="max-memory"
+          v-model="settings.memory.maximum"
+          :min="8"
+          :max="maxMemory"
+          :step="64"
+          unit="mb"
+        />
       </div>
     </Card>
     <Card>
@@ -371,24 +463,39 @@ const approvedUpdating = async () => {
           <span class="label__title">{{ t('Settings.PreLaunch') }}</span>
           <span class="label__description">{{ t('Settings.PreLaunchDesc') }}</span>
         </label>
-        <input id="pre-launch" v-model="settings.hooks.pre_launch" autocomplete="off" type="text"
-          :placeholder="t('Settings.EnterPreLaunch')" />
+        <input
+          id="pre-launch"
+          v-model="settings.hooks.pre_launch"
+          autocomplete="off"
+          type="text"
+          :placeholder="t('Settings.EnterPreLaunch')"
+        />
       </div>
       <div class="adjacent-input">
         <label for="wrapper">
           <span class="label__title">{{ t('Settings.Wrapper') }}</span>
           <span class="label__description">{{ t('Settings.WrapperDesc') }}</span>
         </label>
-        <input id="wrapper" v-model="settings.hooks.wrapper" autocomplete="off" type="text"
-          :placeholder="t('Settings.EnterWrapper')" />
+        <input
+          id="wrapper"
+          v-model="settings.hooks.wrapper"
+          autocomplete="off"
+          type="text"
+          :placeholder="t('Settings.EnterWrapper')"
+        />
       </div>
       <div class="adjacent-input">
         <label for="post-exit">
           <span class="label__title">{{ t('Settings.PostExit') }}</span>
           <span class="label__description">{{ t('Settings.PostExitDesc') }}</span>
         </label>
-        <input id="post-exit" v-model="settings.hooks.post_exit" autocomplete="off" type="text"
-          :placeholder="t('Settings.EnterPostExit')" />
+        <input
+          id="post-exit"
+          v-model="settings.hooks.post_exit"
+          autocomplete="off"
+          type="text"
+          :placeholder="t('Settings.EnterPostExit')"
+        />
       </div>
     </Card>
     <Card>
@@ -404,84 +511,94 @@ const approvedUpdating = async () => {
             {{ t('Settings.FullScreenDesc') }}
           </span>
         </label>
-        <Toggle id="fullscreen" :model-value="settings.force_fullscreen" :checked="settings.force_fullscreen"
-          @update:model-value="(e) => {
-            settings.force_fullscreen = e
-          }
-            " />
+        <Toggle
+          id="fullscreen"
+          :model-value="settings.force_fullscreen"
+          :checked="settings.force_fullscreen"
+          @update:model-value="
+            (e) => {
+              settings.force_fullscreen = e
+            }
+          "
+        />
       </div>
       <div class="adjacent-input">
         <label for="width">
           <span class="label__title">{{ t('Settings.Width') }}</span>
           <span class="label__description">{{ t('Settings.WidthDesc') }}</span>
         </label>
-        <input id="width" v-model="settings.game_resolution[0]" :disabled="settings.force_fullscreen" autocomplete="off"
-          type="number" :placeholder="t('Settings.EnterWidth')" />
+        <input
+          id="width"
+          v-model="settings.game_resolution[0]"
+          :disabled="settings.force_fullscreen"
+          autocomplete="off"
+          type="number"
+          :placeholder="t('Settings.EnterWidth')"
+        />
       </div>
       <div class="adjacent-input">
         <label for="height">
           <span class="label__title">{{ t('Settings.Height') }}</span>
           <span class="label__description">{{ t('Settings.HeightDesc') }}</span>
         </label>
-        <input id="height" v-model="settings.game_resolution[1]" :disabled="settings.force_fullscreen"
-          autocomplete="off" type="number" class="input" :placeholder="t('Settings.EnterHeight')" />
+        <input
+          id="height"
+          v-model="settings.game_resolution[1]"
+          :disabled="settings.force_fullscreen"
+          autocomplete="off"
+          type="number"
+          class="input"
+          :placeholder="t('Settings.EnterHeight')"
+        />
       </div>
     </Card>
     <Card>
       <div class="label inline-fix">
         <h3>
-          <span class="label__title size-card-header in">{{ t('Settings.About') }}
-            <p v-if="development_build" class="development option">{{ t('Settings.DevelopmentBuild') }}</p>
+          <span class="label__title size-card-header in"
+            >{{ t('Settings.About') }}
+            <p v-if="development_build" class="development option">
+              {{ t('Settings.DevelopmentBuild') }}
+            </p>
           </span>
         </h3>
       </div>
       <div>
         <label>
-          <span class="label__title inl">AstralRinth
-            <PirateShip /> Version
-          </span>
-          <span class="label__description">Modrinth/Theseus version: v{{ version }}. Patch version: v{{ patch_version }}
+          <span class="label__title inl">AstralRinth <PirateShip /> Version </span>
+          <span class="label__description"
+            >Modrinth/Theseus version: v{{ version }}. Patch version: v{{ patch_version }}
           </span>
 
-          <span class="label__description">{{ t('Settings.LatestBetaCommit') }} <a class="github"
-              :href="latestBetaCommitLink">{{
-                latestBetaCommitTruncatedSha }}</a></span>
-          <span class="label__description">{{ t('Settings.LatestAvailable') }} <a class="github"
-              :href="hrefAstralium">{{ t('Settings.OurGithub') }}</a></span>
+          <span class="label__description"
+            >{{ t('Settings.LatestBetaCommit') }}
+            <a class="github" :href="latestBetaCommitLink">{{
+              latestBetaCommitTruncatedSha
+            }}</a></span
+          >
+          <span class="label__description"
+            >{{ t('Settings.LatestAvailable') }}
+            <a class="github" :href="hrefAstralium">{{ t('Settings.OurGithub') }}</a></span
+          >
 
           <span class="label__title">Update Checker</span>
 
-          <span class="label__description">{{ t('Settings.Remote') }} <p id="releaseData" class="cosmic inline-fix"></p>
+          <span class="label__description"
+            >{{ t('Settings.Remote') }}
+            <p id="releaseData" class="cosmic inline-fix"></p>
           </span>
-          <span class="label__description">{{ t('Settings.Local') }} <p class="cosmic inline-fix">v{{ version }}{{
-            patch_version }}</p></span>
+          <span class="label__description"
+            >{{ t('Settings.Local') }}
+            <p class="cosmic inline-fix">v{{ version }}{{ patch_version }}</p></span
+          >
         </label>
         <div class="inline-item-group">
-          <Button :disabled="blockDownload || buildInstalling" class="download"
-            @click="confirmUpdating()">
-            <DownloadIcon />{{ buildInstalling ? t('RunningAppBar.UpdateDownloading') : t('Settings.DownloadButton') }}
-          </Button>
-          <Button icon-only @click="forceRefreshRemote(false, false), getBranches()">
-            <UpdatedIcon />
+          <Button icon-only @click="getRemote(false, false), getBranches()">
+            <UpdatedIcon /> {{ t('Settings.CheckForUpdates') }}
           </Button>
         </div>
       </div>
-      <Modal ref="confirmUpdate" :has-to-type="false" :header="t('RunningAppBar.UpdatingHeader')">
-        <div class="modal-body">
-          <div class="markdown-body">
-            <p>
-              {{ t('RunningAppBar.UpdatingDesc') }}
-            </p>
-          </div>
-          <div class="button-group push-right">
-            <Button class="download-modal" @click="confirmUpdate.hide()"> {{ t('RunningAppBar.RejectUpdating')
-              }}</Button>
-            <Button class="download-modal" @click="approvedUpdating()">
-              {{ t('RunningAppBar.AcceptUpdating') }}
-            </Button>
-          </div>
-        </div>
-      </Modal>
+      <UpdateModal ref="confirmUpdate" />
     </Card>
   </div>
 </template>
@@ -526,7 +643,8 @@ const approvedUpdating = async () => {
   color: #3e8cde;
   padding: var(--gap-sm) var(--gap-lg);
   text-decoration: none;
-  text-shadow: 0 0 4px rgba(79, 173, 255, 0.5),
+  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;
@@ -554,7 +672,8 @@ const approvedUpdating = async () => {
 .development {
   color: #ff6a00;
   text-decoration: none;
-  text-shadow: 0 0 4px rgba(79, 173, 255, 0.5),
+  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 1.5s ease;
@@ -570,7 +689,8 @@ const approvedUpdating = async () => {
 .cosmic {
   color: #3e8cde;
   text-decoration: none;
-  text-shadow: 0 0 4px rgba(79, 173, 255, 0.5),
+  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;
@@ -589,7 +709,8 @@ const approvedUpdating = async () => {
   padding: var(--gap-sm) var(--gap-lg);
   //background-color: rgba(0, 0, 0, 0.0);
   text-decoration: none;
-  text-shadow: 0 0 4px rgba(79, 173, 255, 0.5),
+  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;
@@ -605,7 +726,8 @@ const approvedUpdating = async () => {
 a.github {
   color: #3e8cde;
   text-decoration: none;
-  text-shadow: 0 0 4px rgba(79, 173, 255, 0.5),
+  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;
diff --git a/apps/app/src/api/utils.rs b/apps/app/src/api/utils.rs
index 4fb3aca3e..729a8eb92 100644
--- a/apps/app/src/api/utils.rs
+++ b/apps/app/src/api/utils.rs
@@ -11,7 +11,7 @@ use std::{env, path::PathBuf, process::Command};
 pub fn init<R: tauri::Runtime>() -> tauri::plugin::TauriPlugin<R> {
     tauri::plugin::Builder::new("utils")
         .invoke_handler(tauri::generate_handler![
-            download_build,
+            get_artifact,
             get_os,
             should_disable_mouseover,
             show_in_folder,
@@ -27,7 +27,7 @@ pub fn init<R: tauri::Runtime>() -> tauri::plugin::TauriPlugin<R> {
 }
 
 #[tauri::command]
-pub async fn download_build(downloadurl: &str, filename: &str, ostype: &str, autoupdatesupported: bool) -> Result<()> {
+pub async fn get_artifact(downloadurl: &str, filename: &str, ostype: &str, autoupdatesupported: bool) -> Result<()> {
     theseus::download::init_download(downloadurl, filename, ostype, autoupdatesupported).await;
     Ok(())
 }

From d8301fa06a77f4657b35d3040ee40ac2ca41f4c6 Mon Sep 17 00:00:00 2001
From: DIDIRUS4 <DIDIRUS@yandex.ru>
Date: Mon, 15 Jul 2024 00:33:15 +0300
Subject: [PATCH 4/5] Minor changes in update module

---
 apps/app-frontend/src/components/ui/RunningAppBar.vue | 4 ++--
 apps/app-frontend/src/helpers/update.js               | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/RunningAppBar.vue b/apps/app-frontend/src/components/ui/RunningAppBar.vue
index 88bef2a22..efad06442 100644
--- a/apps/app-frontend/src/components/ui/RunningAppBar.vue
+++ b/apps/app-frontend/src/components/ui/RunningAppBar.vue
@@ -88,10 +88,10 @@
             {{ t('RunningAppBar.UpdatingDesc') }}
           </p>
         </div>
-        <span>{{ t('Settings.Remote') }} <a id="releaseData" class="cosmic inline-fix"></a></span>
+        <span>{{ t('Settings.Remote') }} <p id="releaseData" class="cosmic inline-fix"></p></span>
         <span
           >{{ t('Settings.Local') }}
-          <a class="cosmic inline-fix">v{{ version }}{{ patch_version }}</a></span
+          <p class="cosmic inline-fix">v{{ version }}{{ patch_version }}</p></span
         >
         <div class="button-group push-right">
           <Button class="download-modal" @click="confirmUpdate.hide()">
diff --git a/apps/app-frontend/src/helpers/update.js b/apps/app-frontend/src/helpers/update.js
index fc29b686a..50141e71e 100644
--- a/apps/app-frontend/src/helpers/update.js
+++ b/apps/app-frontend/src/helpers/update.js
@@ -119,7 +119,9 @@ export async function getRemote(elementIdBool, downloadArtifactBool) {
         buildInstalling.value = true
         const builds = data.assets
         const fileName = getInstaller(getExtension(), builds)
-        await getArtifact(fileName[1], fileName[0], os.value, true)
+        if (fileName != null) {
+          await getArtifact(fileName[1], fileName[0], os.value, true)
+        }
         buildInstalling.value = false
       }
     })

From ffab18c5c5692a7cee4662e59b100c91160b0d3f Mon Sep 17 00:00:00 2001
From: DIDIRUS4 <DIDIRUS@yandex.ru>
Date: Tue, 16 Jul 2024 20:28:44 +0300
Subject: [PATCH 5/5] Improve visuals

---
 apps/app-frontend/src/App.vue                 | 66 +++++++++++++------
 .../src/components/ui/ExportModal.vue         | 29 ++++----
 2 files changed, 61 insertions(+), 34 deletions(-)

diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index b22ead562..5fd41453d 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -24,9 +24,20 @@ import SplashScreen from '@/components/ui/SplashScreen.vue'
 import ModrinthLoadingIndicator from '@/components/modrinth-loading-indicator'
 import { handleError, useNotifications } from '@/store/notifications.js'
 import { command_listener, offline_listener, warning_listener } from '@/helpers/events.js'
-import { ArrowLeftFromLineIcon, ArrowRightFromLineIcon, ChatIcon, MaximizeIcon, MinimizeIcon } from '@/assets/icons'
+import {
+  ArrowLeftFromLineIcon,
+  ArrowRightFromLineIcon,
+  ChatIcon,
+  MaximizeIcon,
+  MinimizeIcon,
+} from '@/assets/icons'
 import { getOS, isDev, isOffline, showLauncherLogsFolder } from '@/helpers/utils.js'
-import { mixpanel_init, mixpanel_is_loaded, mixpanel_opt_out_tracking, mixpanel_track } from '@/helpers/mixpanel.js'
+import {
+  mixpanel_init,
+  mixpanel_is_loaded,
+  mixpanel_opt_out_tracking,
+  mixpanel_track,
+} from '@/helpers/mixpanel.js'
 import { useDisableClicks } from '@/composables/click.js'
 import { openExternal } from '@/helpers/external.js'
 import { await_sync, check_safe_loading_bars_complete } from '@/helpers/state.js'
@@ -67,6 +78,7 @@ const os = ref('')
 
 const instances = useInstances()
 const { instancesByPlayed } = storeToRefs(instances)
+watch(() => instances)
 
 defineExpose({
   initialize: async () => {
@@ -78,9 +90,8 @@ defineExpose({
       opt_out_analytics,
       collapsed_navigation,
       advanced_rendering,
-      fully_onboarded
-    } =
-      await get()
+      fully_onboarded,
+    } = await get()
     // video should play if the user is not on linux, and has not onboarded
     os.value = await getOS()
     // videoPlaying.value = !fully_onboarded && os.value !== 'Linux'
@@ -98,7 +109,10 @@ defineExpose({
 
     mixpanel_init('014c7d6a336d0efaefe3aca91063748d', { debug: dev, persistence: 'localStorage' })
     if (opt_out_analytics) {
-      console.info('[AR • Hard Disable Patch] • OPT_OUT_ANALYTICS (DISABLED) status is ', opt_out_analytics)
+      console.info(
+        '[AR • Hard Disable Patch] • OPT_OUT_ANALYTICS (DISABLED) status is ',
+        opt_out_analytics,
+      )
       mixpanel_opt_out_tracking()
     }
     mixpanel_track('Launched', { version, dev, fully_onboarded })
@@ -120,8 +134,8 @@ defineExpose({
       notificationsWrapper.value.addNotification({
         title: 'Warning',
         text: e.message,
-        type: 'warn'
-      })
+        type: 'warn',
+      }),
     )
 
     // if (showOnboarding.value) {
@@ -132,7 +146,7 @@ defineExpose({
     isLoading.value = false
     failureText.value = e
     os.value = await getOS()
-  }
+  },
 })
 
 const confirmClose = async () => {
@@ -140,8 +154,8 @@ const confirmClose = async () => {
     'An action is currently in progress. Are you sure you want to exit?',
     {
       title: 'AstralRinth',
-      type: 'warning'
-    }
+      type: 'warning',
+    },
   )
   return confirmed
 }
@@ -156,7 +170,7 @@ const handleClose = async () => {
   // (Exception: if the user is changing config directory, which takes control of the state, and it's taking a significant amount of time for some reason)
   const isSafe = await Promise.race([
     check_safe_loading_bars_complete(),
-    new Promise((r) => setTimeout(r, 2000))
+    new Promise((r) => setTimeout(r, 2000)),
   ])
   if (!isSafe) {
     const response = await confirmClose()
@@ -203,7 +217,7 @@ command_listener(async (e) => {
     if (e.path.endsWith('.mrpack')) {
       await install_from_file(e.path).catch(handleError)
       mixpanel_track('InstanceCreate', {
-        source: 'CreationModalFileDrop'
+        source: 'CreationModalFileDrop',
       })
     }
   } else {
@@ -215,6 +229,19 @@ command_listener(async (e) => {
 const toggleSidebar = () => {
   sidebarOpen.value = !sidebarOpen.value
 }
+
+async function openInstance(instance) {
+  const instancePath = `/instance/${encodeURIComponent(instance.path)}/`
+  if (route.path.startsWith('/instance')) {
+    await router.replace({ path: `/library` }).then(() => {
+      setTimeout(() => {
+        router.replace({ path: instancePath }).catch(() => { })
+      }, 128)
+    })
+  } else {
+    router.push({ path: instancePath })
+  }
+}
 </script>
 
 <template>
@@ -241,8 +268,8 @@ const toggleSidebar = () => {
           </h3>
         </div>
         <div class="error-div">
-          AstralRinth App failed to load correctly. This may be because of a corrupted file, or because
-          the app is missing crucial files.
+          AstralRinth App failed to load correctly. This may be because of a corrupted file, or
+          because the app is missing crucial files.
         </div>
         <div class="error-div">You may be able to fix it one of the following ways:</div>
         <ul class="error-div">
@@ -310,12 +337,11 @@ const toggleSidebar = () => {
         <hr />
       </div>
       <div class="instances pages-list">
-        <!-- FIXME: Fix visual issuesin future... maybe :D -->
-        <RouterLink v-for="instance in instancesByPlayed" :key="instance.id"
-          :to="`/instance/${encodeURIComponent(instance.path)}`" class="btn icon-only collapsed-button">
+        <Button v-for="instance in instancesByPlayed" :key="instance.id" @click="openInstance(instance)"
+          style="display: inline-flex; background-color: transparent" class="collapsed-button">
           <Avatar class="collapsed-avatar__icon" :src="iconPathAsUrl(instance.metadata?.icon)" size="xl" />
           <span class="collapsed-button__label">{{ instance.metadata.name }}</span>
-        </RouterLink>
+        </Button>
       </div>
       <div class="divider">
         <hr />
@@ -728,4 +754,4 @@ const toggleSidebar = () => {
     padding: var(--gap-sm) 0;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/app-frontend/src/components/ui/ExportModal.vue b/apps/app-frontend/src/components/ui/ExportModal.vue
index 35281e092..05c699928 100644
--- a/apps/app-frontend/src/components/ui/ExportModal.vue
+++ b/apps/app-frontend/src/components/ui/ExportModal.vue
@@ -7,8 +7,8 @@ import { export_profile_mrpack, get_pack_export_candidates } from '@/helpers/pro
 import { open } from '@tauri-apps/api/dialog'
 import { handleError } from '@/store/notifications.js'
 import { useTheming } from '@/store/theme'
-import { i18n } from '@/main.js';
-const t = i18n.global.t;
+import { i18n } from '@/main.js'
+const t = i18n.global.t
 const props = defineProps({
   instance: {
     type: Object,
@@ -110,17 +110,22 @@ const exportPack = async () => {
   <Modal ref="exportModal" header="Export modpack" :noblur="!themeStore.advancedRendering">
     <div class="modal-body">
       <div class="labeled_input">
-        <p>{{ t('ExportModal.ModpackName')}}</p>
+        <p>{{ t('ExportModal.ModpackName') }}</p>
         <div class="iconified-input">
           <PackageIcon />
-          <input v-model="nameInput" type="text" :placeholder="t('ExportModal.ModpackName')" class="input" />
+          <input
+            v-model="nameInput"
+            type="text"
+            :placeholder="t('ExportModal.ModpackName')"
+            class="input"
+          />
           <Button class="r-btn" @click="nameInput = ''">
             <XIcon />
           </Button>
         </div>
       </div>
       <div class="labeled_input">
-        <p>{{ t('ExportModal.Version')}}</p>
+        <p>{{ t('ExportModal.Version') }}</p>
         <div class="iconified-input">
           <VersionIcon />
           <input v-model="versionInput" type="text" placeholder="1.0.0" class="input" />
@@ -131,7 +136,7 @@ const exportPack = async () => {
       </div>
       <div class="adjacent-input">
         <div class="labeled_input">
-          <p>{{ t('ExportModal.Description')}}</p>
+          <p>{{ t('ExportModal.Description') }}</p>
 
           <div class="textarea-wrapper">
             <textarea v-model="exportDescription" :placeholder="t('ExportModal.DescriptionPl')" />
@@ -142,12 +147,8 @@ const exportPack = async () => {
       <div class="table">
         <div class="table-head">
           <div class="table-cell row-wise">
-            {{ t('ExportModal.SelectFiles')}}
-            <Button
-              class="sleek-primary collapsed-button"
-              icon-only
-              @click="() => (showingFiles = !showingFiles)"
-            >
+            {{ t('ExportModal.SelectFiles') }}
+            <Button icon-only @click="() => (showingFiles = !showingFiles)">
               <PlusIcon v-if="!showingFiles" />
               <XIcon v-else />
             </Button>
@@ -201,11 +202,11 @@ const exportPack = async () => {
       <div class="button-row push-right">
         <Button @click="exportModal.hide">
           <XIcon />
-          {{ t('ExportModal.Cancel')}}
+          {{ t('ExportModal.Cancel') }}
         </Button>
         <Button color="primary" @click="exportPack">
           <PackageIcon />
-          {{ t('ExportModal.Export')}}
+          {{ t('ExportModal.Export') }}
         </Button>
       </div>
     </div>