Merge branch 'main' into launcher-db-overhual

Author: Geometrically

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/cosmetics.js

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

apps/frontend/src/composables/nuxt-accessors.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/composables/theme.js

@@ -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/composables/vue.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 },
+  );
+});