feat(instance): support customize instance icon (UNIkeEN#1228)

Author: UNIkeEN

src-tauri/src/instance/commands.rs

@@ -1239,3 +1239,29 @@ pub async fn retrieve_modpack_meta_info(
   let file = fs::File::open(&path).map_err(|_| InstanceError::FileNotFoundError)?;
   ModpackMetaInfo::from_archive(&app, &file).await
 }
+
+#[tauri::command]
+pub fn add_custom_instance_icon(
+  app: AppHandle,
+  instance_id: String,
+  source_src: String,
+) -> SJMCLResult<()> {
+  let version_path = {
+    let binding = app.state::<Mutex<HashMap<String, Instance>>>();
+    let state = binding.lock()?;
+    let instance = state
+      .get(&instance_id)
+      .ok_or(InstanceError::InstanceNotFoundByID)?;
+    instance.version_path.clone()
+  };
+
+  let source_path = Path::new(&source_src);
+  if !source_path.exists() || !source_path.is_file() {
+    return Err(InstanceError::FileNotFoundError.into());
+  }
+
+  let dest_path = Path::new(&version_path).join("icon");
+  fs::copy(source_path, &dest_path)?;
+
+  Ok(())
+}

src-tauri/src/lib.rs

@@ -122,6 +122,7 @@ pub async fn run() {
       instance::commands::check_change_mod_loader_availablity,
       instance::commands::change_mod_loader,
       instance::commands::retrieve_modpack_meta_info,
+      instance::commands::add_custom_instance_icon,
       launch::commands::select_suitable_jre,
       launch::commands::validate_game_files,
       launch::commands::validate_selected_player,

src/components/instance-basic-settings.tsx

@@ -1,3 +1,4 @@
+// This component is used in the create-instance modal, instead of instance settings page.
 import { Box, HStack, Image, Radio, VStack } from "@chakra-ui/react";
 import { t } from "i18next";
 import { useEffect } from "react";

src/components/instance-icon-selector.tsx

@@ -1,76 +1,195 @@
 import {
+  Button,
   Center,
   Divider,
   HStack,
+  Icon,
   IconButton,
   Image,
   Popover,
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
+  Portal,
   StackProps,
+  Text,
+  VStack,
 } from "@chakra-ui/react";
-import { LuPenLine } from "react-icons/lu";
+import { open } from "@tauri-apps/plugin-dialog";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { LuCirclePlus, LuPenLine } from "react-icons/lu";
 import SelectableButton from "@/components/common/selectable-button";
+import { useLauncherConfig } from "@/contexts/config";
+import { useToast } from "@/contexts/toast";
+import { InstanceService } from "@/services/instance";
+import { getInstanceIconSrc } from "@/utils/instance";
 
 interface InstanceIconSelectorProps extends StackProps {
   value?: string;
   onIconSelect: (value: string) => void;
+  // if provided instanceId and versionPath, support uploading for customization
+  instanceId?: string;
+  versionPath?: string;
 }
 
+/**
+ * If image fails to load, hide the WHOLE selectable item so it doesn't occupy space.
+ * refreshKey changes => reset ok=true (so custom icon can reappear after upload)
+ */
+const IconSelectableButton: React.FC<{
+  src: string;
+  selectedValue?: string;
+  onSelect: (v: string) => void;
+  versionPath: string;
+  refreshKey?: number;
+}> = ({ src, selectedValue, onSelect, versionPath, refreshKey }) => {
+  const [ok, setOk] = useState(true);
+
+  useEffect(() => {
+    setOk(true);
+  }, [refreshKey]);
+
+  if (!ok) return null;
+
+  return (
+    <SelectableButton
+      value={src}
+      isSelected={src === selectedValue}
+      onClick={() => onSelect(src)}
+      paddingX={0.5}
+    >
+      <Center w="100%">
+        <Image
+          src={getInstanceIconSrc(src, versionPath)}
+          alt={src}
+          boxSize="24px"
+          onError={() => setOk(false)}
+        />
+      </Center>
+    </SelectableButton>
+  );
+};
+
 export const InstanceIconSelector: React.FC<InstanceIconSelectorProps> = ({
   value,
   onIconSelect,
+  instanceId,
+  versionPath = "",
   ...stackProps
 }) => {
-  const iconList = [
-    "/images/icons/JEIcon_Release.png",
-    "/images/icons/JEIcon_Snapshot.png",
-    "divider",
-    "/images/icons/CommandBlock.png",
-    "/images/icons/CraftingTable.png",
-    "/images/icons/GrassBlock.png",
-    "/images/icons/StoneOldBeta.png",
-    "/images/icons/YellowGlazedTerracotta.png",
-    "divider",
-    "/images/icons/Fabric.png",
-    "/images/icons/Anvil.png",
-    "/images/icons/NeoForge.png",
+  const { t } = useTranslation();
+  const toast = useToast();
+  const { config } = useLauncherConfig();
+  const primaryColor = config.appearance.theme.primaryColor;
+
+  const [customIconRefreshKey, setCustomIconRefreshKey] = useState(0);
+
+  const handleAddCustomIcon = () => {
+    if (!instanceId) return;
+
+    open({
+      multiple: false,
+      filters: [
+        {
+          name: t("General.dialog.filterName.image"),
+          extensions: ["jpg", "jpeg", "png", "gif", "webp"],
+        },
+      ],
+    })
+      .then((selectedPath) => {
+        if (!selectedPath) return;
+        if (Array.isArray(selectedPath)) return;
+
+        InstanceService.addCustomInstanceIcon(instanceId, selectedPath).then(
+          (response) => {
+            if (response.status === "success") {
+              // select custom icon immediately
+              onIconSelect("custom");
+              // refresh the "custom" icon button in case it was hidden by onError previously
+              setCustomIconRefreshKey((v) => v + 1);
+              toast({
+                title: response.message,
+                status: "success",
+              });
+            } else {
+              toast({
+                title: response.message,
+                description: response.details,
+                status: "error",
+              });
+            }
+          }
+        );
+      })
+      .catch(() => {});
+  };
+
+  const itemRows: Array<Array<string | React.ReactNode>> = [
+    [
+      "/images/icons/JEIcon_Release.png",
+      "/images/icons/JEIcon_Snapshot.png",
+      <Divider orientation="vertical" key="d1" />,
+      "/images/icons/CommandBlock.png",
+      "/images/icons/CraftingTable.png",
+      "/images/icons/GrassBlock.png",
+      "/images/icons/StoneOldBeta.png",
+      "/images/icons/YellowGlazedTerracotta.png",
+    ],
+    [
+      "/images/icons/Fabric.png",
+      "/images/icons/Anvil.png",
+      "/images/icons/NeoForge.png",
+      ...(instanceId
+        ? [
+            <Divider orientation="vertical" key="d2" />,
+            "custom", // will be converted by `getInstanceIconSrc()`
+            <Button
+              key="add-btn"
+              size="xs"
+              variant="ghost"
+              colorScheme={primaryColor}
+              onClick={handleAddCustomIcon}
+            >
+              <HStack spacing={1.5}>
+                <Icon as={LuCirclePlus} />
+                <Text>{t("InstanceIconSelector.customize")}</Text>
+              </HStack>
+            </Button>,
+          ]
+        : []),
+    ],
   ];
 
   return (
-    <HStack h="32px" {...stackProps}>
-      {iconList.map((iconSrc, index) => {
-        return iconSrc === "divider" ? (
-          <Divider key={index} orientation="vertical" />
-        ) : (
-          <SelectableButton
-            key={index}
-            value={iconSrc}
-            isSelected={iconSrc === value}
-            onClick={() => onIconSelect(iconSrc)}
-            paddingX={0.5}
-          >
-            <Center w="100%">
-              <Image
-                src={iconSrc}
-                alt={iconSrc}
-                boxSize="24px"
-                objectFit="cover"
+    <VStack spacing={1} align="stretch" {...stackProps}>
+      {itemRows.map((row, rowIndex) => (
+        <HStack key={rowIndex} h="32px">
+          {row.map((item, index) =>
+            typeof item === "string" ? (
+              <IconSelectableButton
+                key={`i-${rowIndex}-${index}`}
+                src={item}
+                selectedValue={value}
+                onSelect={onIconSelect}
+                versionPath={versionPath}
+                refreshKey={item === "custom" ? customIconRefreshKey : 0}
               />
-            </Center>
-          </SelectableButton>
-        );
-      })}
-    </HStack>
+            ) : (
+              item
+            )
+          )}
+        </HStack>
+      ))}
+    </VStack>
   );
 };
 
 export const InstanceIconSelectorPopover: React.FC<
   InstanceIconSelectorProps
 > = ({ ...props }) => {
   return (
-    <Popover>
+    <Popover placement="bottom-end">
       <PopoverTrigger>
         <IconButton
           icon={<LuPenLine />}
@@ -79,11 +198,13 @@ export const InstanceIconSelectorPopover: React.FC<
           aria-label="edit"
         />
       </PopoverTrigger>
-      <PopoverContent width="auto">
-        <PopoverBody>
-          <InstanceIconSelector {...props} />
-        </PopoverBody>
-      </PopoverContent>
+      <Portal>
+        <PopoverContent width="auto">
+          <PopoverBody>
+            <InstanceIconSelector {...props} />
+          </PopoverBody>
+        </PopoverContent>
+      </Portal>
     </Popover>
   );
 };

src/components/instance-widgets.tsx

@@ -50,7 +50,7 @@ import {
   formatRelativeTime,
   formatTimeInterval,
 } from "@/utils/datetime";
-import { parseModLoaderVersion } from "@/utils/instance";
+import { getInstanceIconSrc, parseModLoaderVersion } from "@/utils/instance";
 import { base64ImgSrc } from "@/utils/string";
 
 // All these widgets are used in InstanceContext with WarpCard wrapped.
@@ -133,7 +133,12 @@ export const InstanceBasicInfoWidget = () => {
           </VStack>
         }
         prefixElement={
-          <Image src={summary?.iconSrc} alt={summary?.iconSrc} boxSize="28px" />
+          <Image
+            src={getInstanceIconSrc(summary?.iconSrc, summary?.versionPath)}
+            alt={summary?.iconSrc}
+            boxSize="28px"
+            fallbackSrc="/images/icons/JEIcon_Release.png"
+          />
         }
         zIndex={998}
       />

src/components/instances-view.tsx

@@ -18,7 +18,7 @@ import InstanceMenu from "@/components/instance-menu";
 import { useLauncherConfig } from "@/contexts/config";
 import { useGlobalData } from "@/contexts/global-data";
 import { InstanceSummary } from "@/models/instance/misc";
-import { generateInstanceDesc } from "@/utils/instance";
+import { generateInstanceDesc, getInstanceIconSrc } from "@/utils/instance";
 
 interface InstancesViewProps extends BoxProps {
   instances: InstanceSummary[];
@@ -63,9 +63,9 @@ const InstancesView: React.FC<InstancesViewProps> = ({
         />
         <Image
           boxSize="32px"
-          objectFit="cover"
-          src={instance.iconSrc}
+          src={getInstanceIconSrc(instance.iconSrc, instance.versionPath)}
           alt={instance.name}
+          fallbackSrc="/images/icons/JEIcon_Release.png"
         />
       </HStack>
     ),

src/locales/en.json

@@ -1185,6 +1185,9 @@
       "launch": "Launch Instance"
     }
   },
+  "InstanceIconSelector": {
+    "customize": "Customize Icon"
+  },
   "InstanceMenu": {
     "label": {
       "details": "Instance Details",
@@ -2389,6 +2392,12 @@
             "MODPACK_MANIFEST_PARSE_ERROR": "Modpack manifest file parse error"
           }
         }
+      },
+      "addCustomInstanceIcon": {
+        "success": "Successfully added custom instance icon",
+        "error": {
+          "title": "Failed to add custom instance icon"
+        }
       }
     },
     "task": {

src/locales/zh-Hans.json

@@ -1185,6 +1185,9 @@
       "launch": "启动实例"
     }
   },
+  "InstanceIconSelector": {
+    "customize": "自定义图像"
+  },
   "InstanceMenu": {
     "label": {
       "details": "实例详情",
@@ -2389,6 +2392,12 @@
             "MODPACK_MANIFEST_PARSE_ERROR": "整合包清单文件解析错误"
           }
         }
+      },
+      "addCustomInstanceIcon": {
+        "success": "自定义实例图标添加成功",
+        "error": {
+          "title": "自定义实例图标添加失败"
+        }
       }
     },
     "task": {