fix initial loading and select

Author: blarfoon

apps/desktop/packages/main/index.ts

@@ -88,6 +88,7 @@ const RUNTIME_PATH_DEFAULT_NAME = "data"
 export let CURRENT_RUNTIME_PATH: string | null = null
 
 let win: BrowserWindow | null = null
+let lastCoreModuleProgress: number | null = null
 
 const getWin = () => {
   return win
@@ -439,6 +440,7 @@ const loadCoreModule: CoreModule = () =>
                 break
             }
 
+            lastCoreModuleProgress = progress
             getWin()?.webContents.send("coreModuleProgress", progress)
           }
         } else if (row.startsWith("_INSTANCE_STATE_:")) {
@@ -978,6 +980,10 @@ ipcMain.handle("getCoreModule", async () => {
   }
 })
 
+ipcMain.handle("getCurrentProgress", () => {
+  return lastCoreModuleProgress
+})
+
 app.whenReady().then(async () => {
   console.log("App is ready")
   const accessibility = validateArgument("--enable-accessibility")

apps/desktop/packages/mainWindow/src/components/ExploreVersionsNavbar/index.tsx

@@ -52,10 +52,13 @@ const ExploreVersionsNavbar = (props: Props) => {
 
   const infiniteQuery = useInfiniteVersionsQuery()
 
-  // Helper to determine if modloader filter should be shown
-  // Currently only hides for resourcePack, easily extensible to other types
+  // Addon types that don't need modloader filtering
+  const NO_MODLOADER_TYPES = ["resourcePack", "shader", "world", "datapack"]
+
   const shouldShowModloaderFilter = () => {
-    return props.addonType !== "resourcePack"
+    return props.addonType
+      ? !NO_MODLOADER_TYPES.includes(props.addonType)
+      : true
   }
 
   const [overrideEnabled, setOverrideEnabled] = createSignal(
@@ -72,9 +75,13 @@ const ExploreVersionsNavbar = (props: Props) => {
     queryKey: ["instance.getInstanceDetails", instanceId()]
   }))
 
+  // Supported modloaders in GDLauncher
+  const SUPPORTED_MODLOADERS = ["forge", "fabric", "quilt", "neoforge"]
+
   const modloaders = () => {
-    const results = globalStore.modloaders.data
-    return ["", ...(results?.map((v) => v.toString()) || [])]
+    // Always show all supported modloaders
+    // The default selection is set in InfiniteScrollVersionsQueryWrapper based on instance
+    return ["", ...SUPPORTED_MODLOADERS]
   }
 
   const getModloaderLabel = (value: string | null | undefined) => {
@@ -158,6 +165,11 @@ const ExploreVersionsNavbar = (props: Props) => {
           value={infiniteQuery.query.gameVersion || ""}
           options={filteredMappedGameVersions()}
           disabled={!overrideEnabled()}
+          gutter={4}
+          sameWidth={true}
+          placement="bottom"
+          modal={false}
+          preventScroll={false}
           placeholder={
             <div class="flex items-center gap-2">
               <div class="i-hugeicons:tag-01" />
@@ -194,6 +206,11 @@ const ExploreVersionsNavbar = (props: Props) => {
             value={infiniteQuery.query.modLoaderType || ""}
             options={modloaders()}
             disabled={!overrideEnabled()}
+            gutter={4}
+            sameWidth={true}
+            placement="bottom"
+            modal={false}
+            preventScroll={false}
             placeholder={
               <div class="flex items-center gap-2">
                 <div class="i-hugeicons:tag-01" />

apps/desktop/packages/mainWindow/src/components/InfiniteScrollVersionsQueryWrapper/index.tsx

@@ -8,6 +8,13 @@ import { useSearchParams } from "@solidjs/router"
 import useVersionsQuery from "@/pages/Mods/useVersionsQuery"
 import useSearchContext from "../SearchInputContext"
 import { VirtualizerHandle } from "virtua/lib/solid"
+import { FEUnifiedSearchType } from "@gd/core_module/bindings"
+
+// Addon types that don't support modloader filtering
+const supportsModloader = (type?: FEUnifiedSearchType) => {
+  const noModloaderTypes = ["resourcePack", "shader", "world", "datapack"]
+  return type ? !noModloaderTypes.includes(type) : true
+}
 
 export interface VersionRowType {
   data: VersionRowTypeData[]
@@ -47,6 +54,7 @@ interface Props {
   modplatform: "curseforge" | "modrinth"
   modId: string
   initialQuery?: Partial<typeof versionsQuery>
+  addonType?: FEUnifiedSearchType
 }
 
 const InfiniteQueryContext = createContext<InfiniteQueryType>()
@@ -185,6 +193,7 @@ const InfiniteScrollVersionsQueryWrapper = (props: Props) => {
   createEffect(() => {
     const _instanceId = parseInt(searchParams.instanceId, 10)
     const instanceId = isNaN(_instanceId) ? undefined : _instanceId
+    const addonType = props.addonType
 
     searchContext?.setSelectedInstanceId(instanceId)
 
@@ -193,7 +202,9 @@ const InfiniteScrollVersionsQueryWrapper = (props: Props) => {
         .query(["instance.getInstanceDetails", instanceId])
         .then((details) => {
           setQueryWrapper({
-            modLoaderType: details?.modloaders[0].type_,
+            modLoaderType: supportsModloader(addonType)
+              ? details?.modloaders[0].type_
+              : undefined,
             gameVersion: details?.version
           })
         })

apps/desktop/packages/mainWindow/src/global.d.ts

@@ -89,6 +89,7 @@ declare global {
     listenToCoreModuleProgress: (
       cb: (event: Electron.IpcRendererEvent, progress: number) => void
     ) => void
+    getCurrentProgress: () => Promise<number | null>
     onProtocolUrl: (cb: (url: string) => void) => void
   }
 }

apps/desktop/packages/mainWindow/src/main.tsx

@@ -100,32 +100,14 @@ render(() => {
   })
 
   window.listenToCoreModuleProgress((_, progress) => {
-    const startProgress = coreModuleProgress() ?? 0
-    const endProgress = progress
-    const duration = 300
-    const startTime = Date.now()
-
-    const easeOutCubic = (x: number): number => {
-      return 1 - Math.pow(1 - x, 3)
-    }
+    setCoreModuleProgress(progress)
+  })
 
-    const animate = () => {
-      const currentTime = Date.now()
-      const elapsed = currentTime - startTime
-      const progress = Math.min(elapsed / duration, 1)
-
-      if (progress < 1) {
-        const easedProgress = easeOutCubic(progress)
-        const currentValue =
-          startProgress + (endProgress - startProgress) * easedProgress
-        setCoreModuleProgress(currentValue)
-        requestAnimationFrame(animate)
-      } else {
-        setCoreModuleProgress(endProgress)
-      }
+  // Request any buffered progress that was sent before listener was ready
+  window.getCurrentProgress().then((progress) => {
+    if (progress !== null && progress > (coreModuleProgress() ?? 0)) {
+      setCoreModuleProgress(progress)
     }
-
-    requestAnimationFrame(animate)
   })
 
   const startTime = Date.now()

apps/desktop/packages/mainWindow/src/pages/AddonViewPage/Changelog.tsx

@@ -21,8 +21,7 @@ import {
 } from "@gd/ui"
 import { rspc } from "@/utils/rspcClient"
 import fetchData from "./changelog.data"
-import { CFFEFile, CFFEFileIndex } from "@gd/core_module/bindings"
-import { sortArrayByGameVersion } from "@/utils/mods"
+import { CFFEFile } from "@gd/core_module/bindings"
 import { format, formatDistanceToNowStrict } from "date-fns"
 
 const ChangelogCard = (props: {
@@ -211,22 +210,22 @@ const Changelog = () => {
         setOptionLabels(labels)
       }
     } else {
-      const sortedVersions = sortArrayByGameVersion(
-        routeData.modpackDetails.data?.data.latestFilesIndexes
-      )
+      // Use latestFiles for actual distinct file versions (not latestFilesIndexes which is per-game-version)
+      const files = routeData.modpackDetails.data?.data.latestFiles || []
       setChangelog(undefined)
       setReleaseDate(undefined)
       setIsLoadingChangelog(false)
 
-      const opts = (sortedVersions as CFFEFileIndex[]).map((file) =>
-        file.fileId.toString()
-      )
+      const opts = files.map((file) => file.id.toString())
       const labels = Object.fromEntries(
-        (sortedVersions as CFFEFileIndex[]).map((file) => [
-          file.fileId.toString(),
-          file.filename
-        ])
+        files.map((file) => [file.id.toString(), file.displayName])
       )
+
+      // Set default value to first option for CurseForge
+      if (opts.length > 0) {
+        setFileId(opts[0])
+      }
+
       setOptions(opts)
       setOptionLabels(labels)
     }

apps/desktop/packages/mainWindow/src/pages/AddonViewPage/index.tsx

@@ -28,7 +28,8 @@ import {
   createSignal,
   createMemo,
   onMount,
-  onCleanup
+  onCleanup,
+  useContext
 } from "solid-js"
 import { format } from "date-fns"
 import ExploreVersionsNavbar from "@/components/ExploreVersionsNavbar"
@@ -66,14 +67,33 @@ const ModsInfiniteScrollQueryWrapper = () => {
   const params = useParams()
   const platform = () => params.platform as FEUnifiedPlatform
 
+  // Hoisted project query to pass addonType to InfiniteScrollVersionsQueryWrapper
+  const project = rspc.createQuery(() => ({
+    queryKey: [
+      "modplatforms.unifiedGetProject",
+      platform() === "curseforge"
+        ? {
+            type: "curseforge",
+            value: parseInt(params.id, 10)
+          }
+        : {
+            type: "modrinth",
+            value: params.id
+          }
+    ]
+  }))
+
   return (
     <InfiniteScrollVersionsQueryWrapper
       modId={params.id}
       modplatform={platform()}
+      addonType={project.data?.type}
     >
-      <ContentWrapper zeroPadding>
-        <AddonExplore />
-      </ContentWrapper>
+      <AddonContext.Provider value={project}>
+        <ContentWrapper zeroPadding>
+          <AddonExplore />
+        </ContentWrapper>
+      </AddonContext.Provider>
     </InfiniteScrollVersionsQueryWrapper>
   )
 }
@@ -116,20 +136,8 @@ const AddonExplore = () => {
     enabled: selectedInstanceId() !== undefined
   }))
 
-  const project = rspc.createQuery(() => ({
-    queryKey: [
-      "modplatforms.unifiedGetProject",
-      platform() === "curseforge"
-        ? {
-            type: "curseforge",
-            value: parseInt(params.id, 10)
-          }
-        : {
-            type: "modrinth",
-            value: params.id
-          }
-    ]
-  }))
+  // Use the hoisted project query from context
+  const project = useContext(AddonContext)!
 
   const isFetching = () => project.isLoading
 
@@ -236,11 +244,26 @@ const AddonExplore = () => {
 
     // Measure sticky header height for versions table positioning
     if (refStickyTabs) {
+      let rafId: number | null = null
+
       const resizeObserver = new ResizeObserver(() => {
-        setStickyHeaderHeight(refStickyTabs.getBoundingClientRect().height)
+        // Debounce with requestAnimationFrame to avoid layout thrashing
+        // when Select dropdowns open (prevents page shift)
+        if (rafId !== null) {
+          cancelAnimationFrame(rafId)
+        }
+        rafId = requestAnimationFrame(() => {
+          setStickyHeaderHeight(refStickyTabs.getBoundingClientRect().height)
+          rafId = null
+        })
       })
       resizeObserver.observe(refStickyTabs)
-      onCleanup(() => resizeObserver.disconnect())
+      onCleanup(() => {
+        if (rafId !== null) {
+          cancelAnimationFrame(rafId)
+        }
+        resizeObserver.disconnect()
+      })
     }
   })
 

apps/desktop/packages/preload/loading.ts

@@ -513,3 +513,7 @@ contextBridge.exposeInMainWorld(
   (cb: (event: Electron.IpcRendererEvent, progress: number) => void) =>
     ipcRenderer.on("coreModuleProgress", cb)
 )
+
+contextBridge.exposeInMainWorld("getCurrentProgress", () =>
+  ipcRenderer.invoke("getCurrentProgress")
+)

packages/i18n/locale/english/onboarding.json

@@ -4,9 +4,9 @@
   "_trn_search_syntax_description": "You can search addons in multiple ways:",
   "_trn_search_syntax_text": "Search by addon name",
   "_trn_search_syntax_urls": "Paste CurseForge or Modrinth links directly",
-  "_trn_search_syntax_ids": "Use project IDs (e.g., #12345)",
+  "_trn_search_syntax_ids": "Use project IDs or slugs (e.g., #12345, #sodium)",
   "_trn_search_syntax_urls_label": "URLs",
-  "_trn_search_syntax_id_label": "#id",
+  "_trn_search_syntax_id_label": "#id/slug",
   "_trn_search_syntax_addon_type": "Select addon type (mods, modpacks, etc.) on the left",
   "_trn_search_syntax_filters": "Filter by categories and more on the right",
   "_trn_welcome_gdlauncher_title": "Welcome to GDLauncher! 🎉",

packages/ui/src/Progress/index.tsx

@@ -48,7 +48,7 @@ export const Progress = (props: Props) => {
   }
 
   const barClasses = () => {
-    const baseClasses = `h-full transition-all duration-300 ease-out ${mergedProps.color}`
+    const baseClasses = `h-full transition-all duration-400 ease-spring ${mergedProps.color}`
     const animationClasses = isIndeterminate()
       ? "w-full origin-[0%_50%] animate-loadingbar"
       : ""