Refactored fix

src/App.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import Sidebar from "./components/layout/Sidebar";
 import TopBar from "./components/layout/TopBar";
 import PlaySection from "./components/PlaySection";
@@ -21,6 +21,32 @@ export default function App() {
   const versionRef = useRef<HTMLDivElement | null>(null);
   const accountRef = useRef<HTMLDivElement | null>(null);
 
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      const target = event.target as Node;
+
+      // Close version dropdown if clicked outside
+      if (versionRef.current && !versionRef.current.contains(target)) {
+        setIsVersionDropdownOpen(false);
+      }
+
+      // Close account dropdown if clicked outside
+      if (accountRef.current && !accountRef.current.contains(target)) {
+        setIsAccountDropdownOpen(false);
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  useEffect(() => {
+    setSelectedVersion(versions[0]);
+  }, []);
+
   return (
     <div className="flex h-screen">
       <Sidebar active={active} setActive={setActive} />

src/components/ModsSection.tsx

@@ -11,10 +11,10 @@ import {
 import {
   getInstalledMods,
   discoverMods,
-  getVersions,
   toggleMod,
   installMod,
-} from "../lib/saturn";
+  versions,
+} from "@/lib/saturn";
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { motion, AnimatePresence } from "framer-motion";
@@ -40,7 +40,6 @@ const ModsSection: React.FC<ModsSectionProps> = ({ version }) => {
   const [selectedVersionsForInstall, setSelectedVersionsForInstall] = useState<
     string[]
   >([]);
-  const [allVersions, setAllVersions] = useState<GameVersion[]>([]);
 
   useEffect(() => {
     const loadMods = async () => {
@@ -55,14 +54,6 @@ const ModsSection: React.FC<ModsSectionProps> = ({ version }) => {
     loadMods();
   }, [activeTab, version.id, searchQuery]);
 
-  useEffect(() => {
-    const loadAllVersions = async () => {
-      const v = await getVersions();
-      setAllVersions(v);
-    };
-    loadAllVersions();
-  }, []);
-
   const handleToggleMod = async (modId: string) => {
     await toggleMod(modId);
     const m = await getInstalledMods(version.id);
@@ -243,7 +234,7 @@ const ModsSection: React.FC<ModsSectionProps> = ({ version }) => {
               </div>
 
               <div className="p-6 space-y-3 max-h-64 overflow-y-auto">
-                {allVersions.map((v) => {
+                {versions.map((v) => {
                   const isSupported =
                     selectedModForInstall.supported_versions.includes(v.id);
                   const isSelected = selectedVersionsForInstall.includes(v.id);