fix: prevent layout shift by using SettingsContext

frontend/src/components/mod-list/index.tsx

@@ -4,7 +4,7 @@ import { Loader2, MoreHorizontal } from "lucide-react";
 import { toast } from "sonner";
 import { msfs } from "@wailsjs/go/models";
 import { RevealMod, UninsallMod } from "@wailsjs/go/main/App";
-import { useSettings } from "@/hooks/use-settings";
+import useSettings from "@/hooks/use-settings";
 
 import { Button } from "@/components/ui/button";
 import ModToggle from "./toggle";

frontend/src/components/providers/settings-provider.tsx

@@ -0,0 +1,46 @@
+import { createContext, useEffect, useState } from "react";
+import { GetSettings, SetSetting } from "@wailsjs/go/main/App";
+import { config } from "@wailsjs/go/models";
+
+type Settings = config.AppConfig;
+
+type SettingsContextType = {
+  settings: Settings | null;
+  set: <T extends keyof Settings>(key: T, value: Settings[T]) => void;
+};
+
+export const SettingsContext = createContext<SettingsContextType | null>(null);
+
+export function SettingsProvider({ children }: { children: React.ReactNode }) {
+  const [settings, setSettings] = useState<Settings | null>(null);
+
+  useEffect(() => {
+    const fetchSettings = async () => {
+      try {
+        const res = await GetSettings();
+        setSettings(res);
+      } catch (e) {
+        console.error("Failed to fetch settings:", e);
+      }
+    };
+
+    fetchSettings();
+  }, []);
+
+  const set = <T extends keyof Settings>(key: T, value: Settings[T]) => {
+    SetSetting(key, value)
+      .then(() => {
+        setSettings((prevSettings) => {
+          if (!prevSettings) return null;
+          return { ...prevSettings, [key]: value };
+        });
+      })
+      .catch(console.error);
+  };
+
+  return (
+    <SettingsContext.Provider value={{ settings, set }}>
+      {children}
+    </SettingsContext.Provider>
+  );
+}

frontend/src/hooks/use-settings.ts

@@ -1,38 +1,11 @@
-import { useState, useEffect } from "react";
-import { config } from "@wailsjs/go/models";
-import { GetSettings, SetSetting } from "@wailsjs/go/main/App";
+import { useContext } from "react";
+import { SettingsContext } from "@/components/providers/settings-provider";
 
-type Settings = config.AppConfig;
+export default function useSettings() {
+  const context = useContext(SettingsContext);
+  if (context === null) {
+    throw new Error("useSettings must be used within a SettingsProvider");
+  }
 
-export function useSettings() {
-  const [settings, setSettings] = useState<Settings | null>(null);
-
-  useEffect(() => {
-    const fetchSettings = async () => {
-      try {
-        const res = await GetSettings();
-        setSettings(res);
-      } catch (e) {
-        console.error("Failed to fetch settings:", e);
-      }
-    };
-
-    fetchSettings();
-  }, []);
-
-  const set = <T extends keyof Settings>(key: T, value: Settings[T]) => {
-    SetSetting(key, value)
-      .then(() => {
-        setSettings((prevSettings) => {
-          if (!prevSettings) return null;
-          return { ...prevSettings, [key]: value };
-        });
-      })
-      .catch(console.error);
-  };
-
-  return {
-    settings,
-    set,
-  };
+  return context;
 }

frontend/src/main.tsx

@@ -4,6 +4,7 @@ import { createHashRouter, RouterProvider } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 import { ThemeProvider } from "@/components/providers/theme-provider";
+import { SettingsProvider } from "@/components/providers/settings-provider";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { Toaster } from "@/components/ui/sonner";
 
@@ -51,9 +52,11 @@ root.render(
     <ThemeProvider defaultTheme="dark" storageKey="aeromod-theme">
       <AppBar />
       <QueryClientProvider client={queryClient}>
-        <TooltipProvider>
-          <RouterProvider router={router} />
-        </TooltipProvider>
+        <SettingsProvider>
+          <TooltipProvider>
+            <RouterProvider router={router} />
+          </TooltipProvider>
+        </SettingsProvider>
       </QueryClientProvider>
       <Toaster />
     </ThemeProvider>

frontend/src/routes/settings.tsx

@@ -1,4 +1,4 @@
-import { useSettings } from "@/hooks/use-settings";
+import useSettings from "@/hooks/use-settings";
 import SettingsItem from "@/components/settings-item";
 import { ThemeToggle } from "@/components/theme-toggle";