Add: 背景画像削除機能の追加

src-tauri/src/commands/background_image.rs

@@ -125,3 +125,19 @@ pub fn save_background_image(image_data: String) -> Result<String, String> {
     Err(e) => Err(format!("Failed to decode image: {}", e)),
   }
 }
+
+///
+/// 背景画像を削除
+/// - `file_id`: 画像ファイルのインデックス
+///
+#[tauri::command]
+pub fn delete_background_image(file_id: String) -> Result<(), String> {
+  let dir_path = get_app_data_dir(BG_IMG_DIR_NAME);
+  let file_name = FILE_NAME_FORMAT.replace("{}", &file_id);
+  let file_path = dir_path.join(file_name);
+
+  match fs::remove_file(&file_path) {
+    Ok(_) => Ok(()),
+    Err(e) => Err(format!("Failed to delete image: {}", e)),
+  }
+}

src-tauri/src/lib.rs

@@ -90,6 +90,7 @@ pub fn run() {
       background_image::get_background_image,
       background_image::get_background_images,
       background_image::save_background_image,
+      background_image::delete_background_image,
     ])
     .run(tauri::generate_context!())
     .expect("error while running tauri application");

src/components/forms/SelectBackgroundImage/SelectBackgroundImage.tsx

@@ -1,12 +1,14 @@
 import { useSettingsAtom } from "@/atom/useSettingsAtom";
 import { Button } from "@/components/ui/button";
-import { useBackgroundImageList } from "@/hooks/useBgImage";
+import { useBackgroundImage, useBackgroundImageList } from "@/hooks/useBgImage";
+import { X } from "@phosphor-icons/react";
 import { twMerge } from "tailwind-merge";
 import { tv } from "tailwind-variants";
 
 export const BackgroundImageList = () => {
   const { settings, updateSettingAtom } = useSettingsAtom();
   const { backgroundImageList } = useBackgroundImageList();
+  const { deleteBackgroundImage } = useBackgroundImage();
 
   const selectImageVariants = tv({
     base: "relative w-20 h-20 mx-2 rounded-2xl",
@@ -40,25 +42,33 @@ export const BackgroundImageList = () => {
         .slice()
         .reverse()
         .map((image) => (
-          <button
-            key={image.fileId}
-            type="button"
-            className={twMerge(
-              selectImageVariants({
-                selected: settings.selectedBackgroundImg === image.fileId,
-              }),
-              "overflow-hidden",
-            )}
-            onClick={() =>
-              updateSettingAtom("selectedBackgroundImg", image.fileId)
-            }
-          >
-            <img
-              src={image.imageData}
-              alt={`background image: ${image.fileId}`}
-              className="object-cover w-full h-full"
-            />
-          </button>
+          <div key={image.fileId} className="relative">
+            <button
+              className="absolute top-0 right-0 p-1 text-white bg-gray-500 bg-opacity-50 rounded-full z-20"
+              type="button"
+              onClick={() => deleteBackgroundImage(image.fileId)}
+            >
+              <X />
+            </button>
+            <button
+              type="button"
+              className={twMerge(
+                selectImageVariants({
+                  selected: settings.selectedBackgroundImg === image.fileId,
+                }),
+                "overflow-hidden",
+              )}
+              onClick={() =>
+                updateSettingAtom("selectedBackgroundImg", image.fileId)
+              }
+            >
+              <img
+                src={image.imageData}
+                alt={`background image: ${image.fileId}`}
+                className="object-cover w-full h-full"
+              />
+            </button>
+          </div>
         ))}
     </div>
   );

src/hooks/useBgImage.ts

@@ -1,6 +1,7 @@
 import { useSettingsAtom } from "@/atom/useSettingsAtom";
 import { convertFileToBase64 } from "@/lib/file";
 import {
+  deleteBgImage,
   fetchBackgroundImages,
   getBgImage,
   saveBgImage,
@@ -14,7 +15,8 @@ const uploadedBackgroundImagesAtom = atom<Array<BackgroundImage>>([]);
 
 export const useBackgroundImage = () => {
   const [backgroundImage, setBackgroundImage] = useAtom(backgroundImageAtom);
-  const { initBackgroundImages } = useBackgroundImageList();
+  const { initBackgroundImages, backgroundImageList, setBackgroundImageList } =
+    useBackgroundImageList();
 
   const { settings, updateSettingAtom } = useSettingsAtom();
 
@@ -48,7 +50,24 @@ export const useBackgroundImage = () => {
     initBackgroundImages();
   };
 
-  return { backgroundImage, saveBackgroundImage };
+  const deleteBackgroundImage = async (fileId: string) => {
+    // 選択中のファイルを削除する場合は選択を解除
+    if (fileId === settings.selectedBackgroundImg) {
+      updateSettingAtom("selectedBackgroundImg", null);
+    }
+
+    try {
+      await deleteBgImage(fileId);
+      const newBackgroundImages = backgroundImageList.filter(
+        (v) => v.fileId !== fileId,
+      );
+      setBackgroundImageList(newBackgroundImages);
+    } catch (error) {
+      console.error("Failed to delete background image:", error);
+    }
+  };
+
+  return { backgroundImage, saveBackgroundImage, deleteBackgroundImage };
 };
 
 export const useBackgroundImageList = () => {
@@ -76,5 +95,5 @@ export const useBackgroundImageList = () => {
     initBackgroundImages();
   }, []);
 
-  return { backgroundImageList, initBackgroundImages };
+  return { backgroundImageList, initBackgroundImages, setBackgroundImageList };
 };

src/services/fileSystemService.ts

@@ -9,8 +9,8 @@ export const saveBgImage = async (image: string): Promise<string> => {
   return await invoke("save_background_image", { imageData: image });
 };
 
-export const deleteBgImage = async (): Promise<void> => {
-  return await invoke("delete_background_image");
+export const deleteBgImage = async (fileId: string): Promise<void> => {
+  return await invoke("delete_background_image", { fileId });
 };
 
 export const fetchBackgroundImages = async (): Promise<