Merge remote-tracking branch 'origin/launcher-db-overhual' into launc…

…her-db-overhual

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",
 });
 

apps/frontend/package.json

@@ -13,14 +13,14 @@
     "intl:extract": "formatjs extract \"{,components,composables,layouts,middleware,modules,pages,plugins,utils}/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" --ignore '**/*.d.ts' --ignore 'node_modules' --out-file locales/en-US/index.json --format crowdin --preserve-whitespace"
   },
   "devDependencies": {
-    "eslint": "^8.57.0",
     "@nuxt/devtools": "^1.3.3",
     "@nuxtjs/turnstile": "^0.8.0",
     "@types/node": "^20.1.0",
     "@vintl/compact-number": "^2.0.5",
     "@vintl/how-ago": "^3.0.1",
-    "@vintl/nuxt": "^1.8.0",
+    "@vintl/nuxt": "^1.9.2",
     "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
     "glob": "^10.2.7",
     "nuxt": "^3.12.3",
     "postcss": "^8.4.39",

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"

apps/frontend/src/composables/nuxt-accessors.ts

@@ -0,0 +1,7 @@
+export function useTheme() {
+  return useNuxtApp().$theme;
+}
+
+export function useCosmetics() {
+  return useNuxtApp().$cosmetics;
+}

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));
+}

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>
 

apps/frontend/src/middleware/auth.ts

@@ -0,0 +1,35 @@
+const whitelistedParams = ["flow", "error"];
+
+export default defineNuxtRouteMiddleware(async (_to, from) => {
+  const config = useRuntimeConfig();
+  const auth = await useAuth();
+
+  if (auth.value.user) return;
+
+  const fullPath = from.fullPath;
+
+  const url = new URL(fullPath, config.public.apiBaseUrl);
+
+  const extractedParams = Object.create(null) as Record<string, string>;
+
+  for (const param of whitelistedParams) {
+    const val = url.searchParams.get(param);
+    if (val != null) {
+      extractedParams[param] = val;
+      url.searchParams.delete(param);
+    }
+  }
+
+  const redirect = encodeURIComponent(url.pathname + url.search);
+
+  return await navigateTo(
+    {
+      path: "/auth/sign-in",
+      query: {
+        redirect,
+        ...extractedParams,
+      },
+    },
+    { replace: true },
+  );
+});

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"

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">

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

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

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;

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"

apps/frontend/src/pages/search/[searchProjectType].vue

@@ -763,7 +763,6 @@ function cycleSearchDisplayMode() {
     cosmetics.value.searchDisplayMode[projectType.value.id],
     tags.value.projectViewModes,
   );
-  saveCosmetics();
   setClosestMaxResults();
 }