feat(frontend): show only close button on selected modLoaderCardand h…

src/components/mod-loader-cards.tsx

@@ -23,6 +23,7 @@ interface ModLoaderCardsProps extends BoxProps {
   displayMode: "entry" | "selector";
   loading?: boolean;
   onTypeSelect?: (type: ModLoaderType) => void;
+  expandedType?: ModLoaderType | null;
 }
 
 const ModLoaderCards: React.FC<ModLoaderCardsProps> = ({
@@ -31,6 +32,7 @@ const ModLoaderCards: React.FC<ModLoaderCardsProps> = ({
   displayMode,
   loading = false,
   onTypeSelect,
+  expandedType,
   ...boxProps
 }) => {
   const { t } = useTranslation();
@@ -93,23 +95,25 @@ const ModLoaderCards: React.FC<ModLoaderCardsProps> = ({
               </Text>
             </VStack>
           </HStack>
-          <IconButton
-            aria-label={type}
-            icon={
-              <Icon
-                as={
-                  displayMode === "selector" && isSelected
-                    ? LuX
-                    : LuChevronRight
-                }
-                boxSize={3.5}
-              />
-            }
-            variant="ghost"
-            size="xs"
-            disabled={loading}
-            onClick={() => onTypeSelect?.(type)}
-          />
+          {displayMode === "selector" && expandedType && !isSelected ? null : (
+            <IconButton
+              aria-label={type}
+              icon={
+                <Icon
+                  as={
+                    displayMode === "selector" && isSelected
+                      ? LuX
+                      : LuChevronRight
+                  }
+                  boxSize={3.5}
+                />
+              }
+              variant="ghost"
+              size="xs"
+              disabled={loading}
+              onClick={() => onTypeSelect?.(type)}
+            />
+          )}
         </Flex>
       </Card>
     );

src/components/mod-loader-selector.tsx

@@ -18,6 +18,7 @@ import {
 import { Section } from "@/components/common/section";
 import ModLoaderCards from "@/components/mod-loader-cards";
 import { useLauncherConfig } from "@/contexts/config";
+import { ModLoaderType } from "@/enums/instance";
 import {
   GameResourceInfo,
   ModLoaderResourceInfo,
@@ -37,12 +38,16 @@ interface ModLoaderSelectorProps {
   selectedGameVersion: GameResourceInfo;
   selectedModLoader: ModLoaderResourceInfo;
   onSelectModLoader: (v: ModLoaderResourceInfo) => void;
+  expandedLoaderType?: ModLoaderType | null;
+  onExpandLoaderType?: (loaderType: ModLoaderType | null) => void;
 }
 
 export const ModLoaderSelector: React.FC<ModLoaderSelectorProps> = ({
   selectedGameVersion,
   selectedModLoader,
   onSelectModLoader,
+  expandedLoaderType,
+  onExpandLoaderType,
   ...props
 }) => {
   const { t } = useTranslation();
@@ -123,16 +128,21 @@ export const ModLoaderSelector: React.FC<ModLoaderSelectorProps> = ({
         currentVersion={selectedModLoader.version}
         displayMode="selector"
         loading={loading}
+        expandedType={expandedLoaderType}
         onTypeSelect={(loaderType) => {
-          if (loaderType !== selectedModLoader.loaderType) {
-            onSelectModLoader({
-              loaderType,
-              version: "",
-              description: "",
-              stable: false,
-            });
-          } else {
-            onSelectModLoader(defaultModLoaderResourceInfo);
+          if (onExpandLoaderType) {
+            if (expandedLoaderType === loaderType) {
+              onExpandLoaderType(null);
+              onSelectModLoader(defaultModLoaderResourceInfo);
+            } else {
+              onExpandLoaderType(loaderType);
+              onSelectModLoader({
+                loaderType,
+                version: "",
+                description: "",
+                stable: false,
+              });
+            }
           }
         }}
         w="100%"

src/components/modals/create-instance-modal.tsx

@@ -30,6 +30,7 @@ import { InstanceBasicSettings } from "@/components/instance-basic-settings";
 import { ModLoaderSelector } from "@/components/mod-loader-selector";
 import { useLauncherConfig } from "@/contexts/config";
 import { useToast } from "@/contexts/toast";
+import { ModLoaderType } from "@/enums/instance";
 import { GameDirectory } from "@/models/config";
 import {
   GameResourceInfo,
@@ -75,6 +76,8 @@ export const CreateInstanceModal: React.FC<Omit<ModalProps, "children">> = ({
   const [instanceIconSrc, setInstanceIconSrc] = useState("");
   const [instanceDirectory, setInstanceDirectory] = useState<GameDirectory>();
   const [isLoading, setIsLoading] = useState(false);
+  const [expandedLoaderType, setExpandedLoaderType] =
+    useState<ModLoaderType | null>(null);
 
   useEffect(() => {
     setSelectedModLoader(defaultModLoaderResourceInfo);
@@ -158,13 +161,21 @@ export const CreateInstanceModal: React.FC<Omit<ModalProps, "children">> = ({
               selectedGameVersion={selectedGameVersion}
               selectedModLoader={selectedModLoader}
               onSelectModLoader={setSelectedModLoader}
+              expandedLoaderType={expandedLoaderType}
+              onExpandLoaderType={setExpandedLoaderType}
             />
           </ModalBody>
           <ModalFooter>
             <Button variant="ghost" onClick={modalProps.onClose}>
               {t("General.cancel")}
             </Button>
-            <Button variant="ghost" onClick={() => setActiveStep(0)}>
+            <Button
+              variant="ghost"
+              onClick={() => {
+                setExpandedLoaderType(null);
+                setActiveStep(0);
+              }}
+            >
               {t("General.previous")}
             </Button>
             <Button
@@ -198,6 +209,7 @@ export const CreateInstanceModal: React.FC<Omit<ModalProps, "children">> = ({
     primaryColor,
     selectedGameVersion,
     selectedModLoader,
+    expandedLoaderType,
     setActiveStep,
     t,
   ]);