fix(resource): manually sort quilt and optifine version list API response by semver and custom handler (#1586)

* fix(resource): manually sort quilt and optifine version list API response by semver and custom handler

* refactor(frontend): unify shaderpack loader card style, the same as mod loader page

Author: UNIkeEN

src-tauri/src/resource/helpers/loader_meta/optifine.rs

@@ -4,6 +4,24 @@ use crate::resource::models::{OptiFineResourceInfo, ResourceError, ResourceType,
 use tauri::Manager;
 use tauri_plugin_http::reqwest;
 
+fn get_optifine_sort_key(info: &OptiFineResourceInfo) -> (u32, u32, u32) {
+  let Some((_, suffix)) = info.filename.rsplit_once("_HD_U_") else {
+    return (0, 0, 0);
+  };
+  let suffix = suffix.trim_end_matches(".jar");
+  let (version, pre) = match suffix.split_once("_pre") {
+    Some((version, pre)) => (version, pre.parse().unwrap_or(0)),
+    None => (suffix, u32::MAX),
+  };
+  let mut chars = version.chars();
+  let prefix = chars
+    .next()
+    .map(|ch| ch.to_ascii_uppercase() as u32)
+    .unwrap_or(0);
+  let series = chars.as_str().parse().unwrap_or(0);
+  (prefix, series, pre)
+}
+
 async fn get_optifine_meta_by_game_version_bmcl(
   app: &tauri::AppHandle,
   game_version: &str,
@@ -14,10 +32,16 @@ async fn get_optifine_meta_by_game_version_bmcl(
   match client.get(url).send().await {
     Ok(response) => {
       if response.status().is_success() {
-        response
+        let mut manifest = response
           .json::<Vec<OptiFineResourceInfo>>()
           .await
-          .map_err(|_| ResourceError::ParseError.into())
+          .map_err(|_| ResourceError::ParseError)?;
+        manifest.sort_by(|a, b| {
+          get_optifine_sort_key(b)
+            .cmp(&get_optifine_sort_key(a))
+            .then_with(|| b.filename.cmp(&a.filename))
+        });
+        Ok(manifest)
       } else {
         Err(ResourceError::NetworkError.into())
       }

src-tauri/src/resource/helpers/loader_meta/quilt.rs

@@ -2,6 +2,7 @@ use crate::error::SJMCLResult;
 use crate::instance::models::misc::ModLoaderType;
 use crate::resource::helpers::misc::get_download_api;
 use crate::resource::models::{ModLoaderResourceInfo, ResourceError, ResourceType, SourceType};
+use semver::Version;
 use serde::{Deserialize, Serialize};
 use serde_json::Value;
 use tauri::{AppHandle, Manager};
@@ -35,16 +36,34 @@ pub async fn get_quilt_meta_by_game_version(
     match client.get(url).send().await {
       Ok(response) => {
         if response.status().is_success() {
-          if let Ok(manifest) = response.json::<Vec<QuiltMetaItem>>().await {
+          // API response may not be in current order, sort by semver here.
+          if let Ok(mut manifest) = response.json::<Vec<QuiltMetaItem>>().await {
+            manifest.sort_by(|a, b| {
+              match (
+                Version::parse(&a.loader.version),
+                Version::parse(&b.loader.version),
+              ) {
+                (Ok(left), Ok(right)) => right.cmp(&left),
+                (Ok(_), Err(_)) => std::cmp::Ordering::Less,
+                (Err(_), Ok(_)) => std::cmp::Ordering::Greater,
+                (Err(_), Err(_)) => b.loader.version.cmp(&a.loader.version),
+              }
+            });
             return Ok(
               manifest
                 .into_iter()
-                .map(|info| ModLoaderResourceInfo {
-                  loader_type: ModLoaderType::Quilt,
-                  version: info.loader.version,
-                  description: String::new(),
-                  stable: true,
-                  branch: None,
+                .map(|info| {
+                  let version = info.loader.version;
+                  let stable = !version.contains("beta")
+                    && !version.contains("alpha")
+                    && !version.contains("rc");
+                  ModLoaderResourceInfo {
+                    loader_type: ModLoaderType::Quilt,
+                    version,
+                    description: String::new(),
+                    stable,
+                    branch: None,
+                  }
                 })
                 .collect(),
             );

src/pages/instances/details/[id]/shaderpacks.tsx

@@ -1,17 +1,25 @@
-import { Center, HStack, useDisclosure } from "@chakra-ui/react";
+import {
+  Center,
+  Flex,
+  HStack,
+  Icon,
+  IconButton,
+  Image,
+  Text,
+  VStack,
+  useDisclosure,
+} from "@chakra-ui/react";
 import { revealItemInDir } from "@tauri-apps/plugin-opener";
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { LuHaze } from "react-icons/lu";
+import { LuChevronRight, LuHaze } from "react-icons/lu";
 import { BeatLoader } from "react-spinners";
 import { CommonIconButton } from "@/components/common/common-icon-button";
 import CountTag from "@/components/common/count-tag";
 import Empty from "@/components/common/empty";
 import { OptionItem, OptionItemGroup } from "@/components/common/option-item";
 import { Section } from "@/components/common/section";
-import SelectableCard, {
-  SelectableCardProps,
-} from "@/components/common/selectable-card";
+import { WrapCardGroup } from "@/components/common/wrap-card";
 import { ChangeLoaderModal } from "@/components/modals/change-loader-modal";
 import { useFileDnD } from "@/components/special/file-dnd-overlay";
 import { useLauncherConfig } from "@/contexts/config";
@@ -149,21 +157,50 @@ const InstanceShaderPacksPage = () => {
     },
   ];
 
-  const selectableCardItems: SelectableCardProps[] = [
+  const shaderLoaderCardItems = [
     {
-      title: "OptiFine",
-      iconSrc: "/images/icons/OptiFine.png",
-      description:
-        summary?.optifine?.status === "Installed"
-          ? summary?.optifine?.version
-          : t("InstanceShaderPacksPage.shaderLoaderList.notInstalled"),
-      displayMode: "entry",
+      cardContent: (
+        <Flex justify="space-between" align="center">
+          <HStack spacing={2}>
+            <Image
+              src="/images/icons/OptiFine.png"
+              alt="OptiFine"
+              boxSize="28px"
+              borderRadius="4px"
+            />
+            <VStack spacing={0} alignItems="start">
+              <Text
+                fontSize="xs-sm"
+                fontWeight={
+                  summary?.optifine?.status === "Installed" ? "bold" : "normal"
+                }
+                color={
+                  summary?.optifine?.status === "Installed"
+                    ? `${config.appearance.theme.primaryColor}.600`
+                    : "inherit"
+                }
+              >
+                OptiFine
+              </Text>
+              <Text fontSize="xs" className="secondary-text">
+                {summary?.optifine?.status === "Installed"
+                  ? summary?.optifine?.version
+                  : t("InstanceShaderPacksPage.shaderLoaderList.notInstalled")}
+              </Text>
+            </VStack>
+          </HStack>
+          <HStack spacing={0}>
+            <IconButton
+              aria-label="select"
+              icon={<Icon as={LuChevronRight} boxSize={3.5} />}
+              variant="ghost"
+              size="xs"
+              onClick={onChangeLoaderModalOpen}
+            />
+          </HStack>
+        </Flex>
+      ),
       isSelected: summary?.optifine?.status === "Installed",
-      onSelect: () => {
-        onChangeLoaderModalOpen();
-      },
-      isDisabled: false,
-      isChevronShown: true,
     },
   ];
 
@@ -180,17 +217,7 @@ const InstanceShaderPacksPage = () => {
           );
         }}
       >
-        <HStack spacing={3.5} w="100%">
-          {selectableCardItems.map((item, index) => (
-            <SelectableCard
-              key={index}
-              {...item}
-              flex={1}
-              minH="max-content"
-              h="100%"
-            />
-          ))}
-        </HStack>
+        <WrapCardGroup items={shaderLoaderCardItems} />
       </Section>
       <Section
         title={t("InstanceShaderPacksPage.shaderPackList.title")}