improvements to background setting logic

.github/workflows/build.yml

@@ -42,7 +42,7 @@ jobs:
           mise install
           mise settings set experimental true
 
-      - name: Install Bun Packages
+      - name: Install bun Packages
         run: mise exec bun --command 'bun install'
 
       - name: Build Tauri

.tool-versions

@@ -1 +1,2 @@
-bun 1.1.21
+bun  1.1.22
+nodejs 20.6.1

README.md

@@ -1,4 +1,4 @@
 # Stort
 
-[![Test Build Frontend](https://github.com/Vomitblood/stort/actions/workflows/build-validation.yml/badge.svg)](https://github.com/Vomitblood/stort/actions/workflows/build-validation.yml)  
+[![Build](https://github.com/Vomitblood/stort/actions/workflows/build.yml/badge.svg)](https://github.com/Vomitblood/stort/actions/workflows/build.yml)
 A launcher for Steam Deck to be used in Game Mode.  

build2.sh

@@ -1,26 +0,0 @@
-#!/bin/bash
-
-IMAGE_NAME="ubuntu:22.04"
-HOST_PROJECT_DIR="$PWD"
-CONTAINER_PROJECT_DIR="/app"
-HOST_OUTPUT_DIR="$PWD/src-tauri/target/release/bundle/appimage"
-CONTAINER_OUTPUT_DIR="$CONTAINER_PROJECT_DIR/src-tauri/target/release/bundle/appimage"
-USER_ID=$(id -u)
-GROUP_ID=$(id -g)
-
-docker pull $IMAGE_NAME
-
-# run the docker image and remove on completion
-docker run --rm -it \
-    -v "$HOST_PROJECT_DIR":$CONTAINER_PROJECT_DIR \
-    $IMAGE_NAME \
-    /bin/bash -c "
-    
-    # update packages
-    apt update && apt install curl -y && \
-
-    curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y && \
-    echo $HOME && \
-    source "/root/.cargo/env" && \
-    cargo --version
-    "

package-lock.json

@@ -13,19 +13,20 @@
         "@emotion/server": "^11.11.0",
         "@emotion/styled": "^11.13.0",
         "@mui/icons-material": "^5.16.6",
+        "@mui/lab": "^5.0.0-alpha.173",
         "@mui/material": "^5.16.6",
         "@tauri-apps/api": "^1.6.0",
-        "@types/lodash": "^4.17.7",
         "jotai": "^2.9.1",
         "lodash": "^4.17.21",
-        "lowdb": "^7.0.1",
         "next": "14.2.5",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "smol-toml": "^1.3.0",
         "zustand": "^4.5.4"
       },
       "devDependencies": {
         "@tauri-apps/cli": "^1.6.0",
+        "@types/lodash": "^4.17.7",
         "@types/node": "^20.14.14",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
@@ -410,6 +411,40 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.7.tgz",
+      "integrity": "sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.7"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.10.tgz",
+      "integrity": "sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.7"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.1.tgz",
+      "integrity": "sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz",
+      "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA=="
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "dev": true,
@@ -519,6 +554,37 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mui/base": {
+      "version": "5.0.0-beta.40",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz",
+      "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@floating-ui/react-dom": "^2.0.8",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/core-downloads-tracker": {
       "version": "5.16.6",
       "license": "MIT",
@@ -551,6 +617,46 @@
         }
       }
     },
+    "node_modules/@mui/lab": {
+      "version": "5.0.0-alpha.173",
+      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.173.tgz",
+      "integrity": "sha512-Gt5zopIWwxDgGy/MXcp6GueD84xFFugFai4hYiXY0zowJpTVnIrTQCQXV004Q7rejJ7aaCntX9hpPJqCrioshA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/base": "5.0.0-beta.40",
+        "@mui/system": "^5.16.5",
+        "@mui/types": "^7.2.15",
+        "@mui/utils": "^5.16.5",
+        "clsx": "^2.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material": ">=5.15.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "5.16.6",
       "license": "MIT",
@@ -739,6 +845,66 @@
         "glob": "10.3.10"
       }
     },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.5.tgz",
+      "integrity": "sha512-/9zVxJ+K9lrzSGli1///ujyRfon/ZneeZ+v4ptpiPoOU+GKZnm8Wj8ELWU1Pm7GHltYRBklmXMTUqM/DqQ99FQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.5.tgz",
+      "integrity": "sha512-vXHOPCwfDe9qLDuq7U1OYM2wUY+KQ4Ex6ozwsKxp26BlJ6XXbHleOUldenM67JRyBfVjv371oneEvYd3H2gNSA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.5.tgz",
+      "integrity": "sha512-vlhB8wI+lj8q1ExFW8lbWutA4M2ZazQNvMWuEDqZcuJJc78iUnLdPPunBPX8rC4IgT6lIx/adB+Cwrl99MzNaA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.5.tgz",
+      "integrity": "sha512-NpDB9NUR2t0hXzJJwQSGu1IAOYybsfeB+LxpGsXrRIb7QOrYmidJz3shzY8cM6+rO4Aojuef0N/PEaX18pi9OA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@next/swc-linux-x64-gnu": {
       "version": "14.2.5",
       "cpu": [
@@ -767,6 +933,51 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.5.tgz",
+      "integrity": "sha512-1GpG2VhbspO+aYoMOQPQiqc/tG3LzmsdBH0LhnDS3JrtDx2QmzXe0B6mSZZiN3Bq7IOMXxv1nlsjzoS1+9mzZw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.5.tgz",
+      "integrity": "sha512-Igh9ZlxwvCDsu6438FXlQTHlRno4gFpJzqPjSIBZooD22tKeI4fE/YMRoHVJHmrQ2P5YL1DoZ0qaOKkbeFWeMg==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.5.tgz",
+      "integrity": "sha512-tEQ7oinq1/CjSG9uSTerca3v4AZ+dFa+4Yu6ihaG8Ud8ddqLQgFGcnwYls13H5X5CPDPZJdYxyeMui6muOLd4g==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "dev": true,
@@ -910,6 +1121,7 @@
     },
     "node_modules/@types/lodash": {
       "version": "4.17.7",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/node": {
@@ -3360,19 +3572,6 @@
         "loose-envify": "cli.js"
       }
     },
-    "node_modules/lowdb": {
-      "version": "7.0.1",
-      "license": "MIT",
-      "dependencies": {
-        "steno": "^4.0.2"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/typicode"
-      }
-    },
     "node_modules/lru-cache": {
       "version": "10.4.3",
       "dev": true,
@@ -4178,6 +4377,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/smol-toml": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/smol-toml/-/smol-toml-1.3.0.tgz",
+      "integrity": "sha512-tWpi2TsODPScmi48b/OQZGi2lgUmBCHy6SZrhi/FdnnHiU1GwebbCfuQuxsC3nHaLwtYeJGPrDZDIeodDOc4pA==",
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyyynthia"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.5.7",
       "license": "BSD-3-Clause",
@@ -4192,16 +4402,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/steno": {
-      "version": "4.0.2",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/typicode"
-      }
-    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.0.0",
       "dev": true,
@@ -4920,111 +5120,6 @@
           "optional": true
         }
       }
-    },
-    "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.5.tgz",
-      "integrity": "sha512-/9zVxJ+K9lrzSGli1///ujyRfon/ZneeZ+v4ptpiPoOU+GKZnm8Wj8ELWU1Pm7GHltYRBklmXMTUqM/DqQ99FQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-darwin-x64": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.5.tgz",
-      "integrity": "sha512-vXHOPCwfDe9qLDuq7U1OYM2wUY+KQ4Ex6ozwsKxp26BlJ6XXbHleOUldenM67JRyBfVjv371oneEvYd3H2gNSA==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.5.tgz",
-      "integrity": "sha512-vlhB8wI+lj8q1ExFW8lbWutA4M2ZazQNvMWuEDqZcuJJc78iUnLdPPunBPX8rC4IgT6lIx/adB+Cwrl99MzNaA==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.5.tgz",
-      "integrity": "sha512-NpDB9NUR2t0hXzJJwQSGu1IAOYybsfeB+LxpGsXrRIb7QOrYmidJz3shzY8cM6+rO4Aojuef0N/PEaX18pi9OA==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.5.tgz",
-      "integrity": "sha512-1GpG2VhbspO+aYoMOQPQiqc/tG3LzmsdBH0LhnDS3JrtDx2QmzXe0B6mSZZiN3Bq7IOMXxv1nlsjzoS1+9mzZw==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.5.tgz",
-      "integrity": "sha512-Igh9ZlxwvCDsu6438FXlQTHlRno4gFpJzqPjSIBZooD22tKeI4fE/YMRoHVJHmrQ2P5YL1DoZ0qaOKkbeFWeMg==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.5.tgz",
-      "integrity": "sha512-tEQ7oinq1/CjSG9uSTerca3v4AZ+dFa+4Yu6ihaG8Ud8ddqLQgFGcnwYls13H5X5CPDPZJdYxyeMui6muOLd4g==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
     }
   }
 }

src-tauri/src/tauri.rs

@@ -2,7 +2,7 @@ pub fn run_tauri_app() {
     tauri::Builder::default()
         .invoke_handler(tauri::generate_handler![
             crate::wallpaper::process_wallpaper_image,
-            crate::wallpaper::delete_old_wallpaper_image,
+            crate::wallpaper::delete_old_wallpaper_images,
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

src-tauri/src/wallpaper.rs

@@ -35,7 +35,9 @@ pub fn process_wallpaper_image(file_path_string: String) -> Result<String, Strin
         .map_err(|e| format!("Failed to get app data directory: {e}"))?;
 
     // construct the destination path
-    let destination_path = app_data_dir.join(file_path.file_name().unwrap());
+    let destination_path = app_data_dir
+        .join("wallpaper")
+        .join(file_path.file_name().unwrap());
 
     // move the file to the destination
     crate::fs::copy_file(file_path, &destination_path, true)
@@ -45,12 +47,30 @@ pub fn process_wallpaper_image(file_path_string: String) -> Result<String, Strin
 }
 
 #[tauri::command]
-pub fn delete_old_wallpaper_image(file_path_string: String) -> Result<(), String> {
+pub fn delete_old_wallpaper_images() -> Result<(), String> {
-    // convert the strings to paths
+    // convert the string to a Path
-    let file_path: &std::path::Path = std::path::Path::new(&file_path_string);
+    let app_data_dir = crate::paths::get_app_data_dir()
+        .map_err(|e| format!("Failed to get app data directory: {e}"))?;
+    let directory_path = app_data_dir.join("wallpaper");
 
-    // delete the old wallpaper
+    // check if the directory exists
-    crate::fs::delete_file(file_path).map_err(|e| format!("Failed to delete file: {e}"))?;
+    if !directory_path.is_dir() {
+        return Err(format!("Path is not a directory: {:?}", directory_path));
+    }
+
+    // iterate over the files in the directory
+    for entry in
+        std::fs::read_dir(directory_path).map_err(|e| format!("Failed to read directory: {e}"))?
+    {
+        let entry = entry.map_err(|e| format!("Failed to read directory entry: {e}"))?;
+        let path = entry.path();
+
+        // delete the file
+        if path.is_file() {
+            std::fs::remove_file(&path)
+                .map_err(|e| format!("Failed to delete file {:?}: {e}", path))?;
+        }
+    }
 
     Ok(())
 }

src-tauri/tauri.conf.json

@@ -1,8 +1,8 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/schema.json",
   "build": {
-    "beforeBuildCommand": "bun run build",
+    "beforeBuildCommand": "npm run build",
-    "beforeDevCommand": "bun run dev",
+    "beforeDevCommand": "npm run dev",
     "devPath": "http://localhost:3000",
     "distDir": "../out"
   },
@@ -23,7 +23,8 @@
           "/**/*",
           "$CONFIG/stort/",
           "$CONFIG/stort/**",
-          "$HOME/.local/share/stort/*"
+          "$HOME/.local/share/stort/*",
+          "$HOME/.local/share/stort/**"
         ]
       },
       "notification": {
@@ -39,7 +40,8 @@
         "all": true,
         "asset": true,
         "assetScope": [
-          "$APPDATA/*"
+          "$APPDATA/*",
+          "$APPDATA/**"
         ]
       },
       "window": {

src/components/FooterBar/FooterBar.tsx

@@ -1,21 +1,19 @@
-import { Settings } from "@mui/icons-material";
 import { Box, Stack } from "@mui/material";
+import { useSettings } from "../../contexts/SettingsContext";
+import { Settings } from "../HeaderBar/Settings/Settings";
 import { WindowButtons } from "../HeaderBar/WindowButtons";
 
 export const FooterBar = () => {
+  // contexts
+  const { settings } = useSettings();
+
   return (
     <Box
-      className="titlebar"
-      data-tauri-drag-region="true"
       sx={{
         alignItems: "center",
-        backdropFilter: "blur(10px)",
-        backgroundColor: "rgba(0, 0, 0, 0.5)",
         display: "flex",
         flexDirection: "row",
-        height: "48px",
+        height: "66px",
-        justifyContent: "space-between",
-        p: 1,
       }}
     >
       <Box
@@ -23,33 +21,59 @@ export const FooterBar = () => {
         data-tauri-drag-region="true"
         sx={{
           alignItems: "center",
+          backdropFilter: "blur(10px)",
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          borderRadius: settings.style.radius + "px",
           display: "flex",
           flexDirection: "row",
+          flexGrow: 1,
+          m: 1,
+          p: 1,
+          width: "100%",
         }}
       >
-        hello this is the left side
+        <Box
-      </Box>
+          className="titlebar"
-      <Box
+          data-tauri-drag-region="true"
-        className="titlebar"
-        data-tauri-drag-region="true"
-        sx={{
-          alignItems: "center",
-          display: "flex",
-          flexDirection: "row",
-        }}
-      >
-        <Stack
-          direction="row"
-          spacing={2}
           sx={{
             alignItems: "center",
             display: "flex",
             flexDirection: "row",
           }}
         >
-          <Settings />
+          hello this is the left side
-          <WindowButtons />
+        </Box>
-        </Stack>
+        <Box
+          sx={{
+            alignItems: "center",
+            display: "flex",
+            flexDirection: "row",
+            flexGrow: 1,
+            justifyContent: "center",
+          }}
+        />
+        <Box
+          className="titlebar"
+          data-tauri-drag-region="true"
+          sx={{
+            alignItems: "center",
+            display: "flex",
+            flexDirection: "row",
+          }}
+        >
+          <Stack
+            direction="row"
+            spacing={2}
+            sx={{
+              alignItems: "center",
+              display: "flex",
+              flexDirection: "row",
+            }}
+          >
+            <Settings />
+            <WindowButtons />
+          </Stack>
+        </Box>
       </Box>
     </Box>
   );

src/components/Generic/Layout.tsx

@@ -21,7 +21,6 @@ export const Layout = () => {
 
   return (
     <Box
-      key={imageUrl}
       sx={{
         // Use the URL function for background images
         backgroundColor: settings.background.background_color,

src/components/HeaderBar/Settings/Settings.tsx

@@ -48,18 +48,13 @@ export const Settings = () => {
 
   const applyClickEvent = () => {
     setApplyLoading(true);
-
     updateSettings(stagedSettings);
-
     setApplyLoading(false);
   };
 
   const saveClickEvent = () => {
-    setSaveLoading(true);
+    applyClickEvent();
 
-    updateSettings(stagedSettings);
-
-    setSaveLoading(false);
     closeSettings();
   };
 

src/components/HeaderBar/Settings/SettingsTabs/SettingsTabBackground.tsx

@@ -9,6 +9,7 @@ import { useSettings } from "../../../../contexts/SettingsContext";
 import { stagedSettingsAtom } from "../../../../lib/store/jotai/settings";
 import { CategoryTitle } from "../CategoryTitle";
 import { SettingsItem } from "../SettingsItem";
+import { readBinaryFile } from "@tauri-apps/api/fs";
 
 interface SettingsTabBackgroundProps {
   sx?: any;
@@ -24,7 +25,7 @@ export const SettingsTabBackground: FC<SettingsTabBackgroundProps> = ({ sx }) =>
   // states
   const [oldWallpaperPath, setOldWallpaperPath] = useState<string | null>(null);
   const [targetWallpaperPath, setTargetWallpaperPath] = useState<string | null>(null);
-  const [imageUrl, setImageUrl] = useState<string | null>(null);
+  const [imageBlob, setImageBlob] = useState<string | null>(null);
 
   const handleSettingsBackgroundValueChange = (
     settingKey: string,
@@ -43,13 +44,18 @@ export const SettingsTabBackground: FC<SettingsTabBackgroundProps> = ({ sx }) =>
   };
 
   const setImageSrc = async (filePath: string) => {
-    const assetUrl = convertFileSrc(filePath);
+    const imageBlobTemp = await readBinaryFile(filePath);
-    setImageUrl(assetUrl);
+
+    if (imageBlobTemp) setImageBlob(URL.createObjectURL(new Blob([imageBlobTemp])));
   };
 
   const selectImage = async () => {
     const { appLocalDataDir, basename } = await import("@tauri-apps/api/path");
 
+    // clear the states first
+    setTargetWallpaperPath(null);
+    setImageBlob(null);
+
     let selectedFilePath = await open({
       multiple: false,
       filters: [
@@ -71,44 +77,32 @@ export const SettingsTabBackground: FC<SettingsTabBackgroundProps> = ({ sx }) =>
       // construct the destination file path
       const appLocalDataDirPath = await appLocalDataDir();
       const filename = await basename(selectedFilePath);
-      const destinationFilePath = appLocalDataDirPath + filename;
+      const destinationFilePath = appLocalDataDirPath + "wallpaper/" + filename;
       handleSettingsBackgroundValueChange("background_image_path", destinationFilePath);
     }
   };
 
   const clearImage = async () => {
-    if (stagedSettings.background.background_image_path) {
+    handleSettingsBackgroundValueChange("background_image_path", "");
-      try {
-        await invoke("delete_old_wallpaper_image", {
-          filePathString: stagedSettings.background.background_image_path,
-        });
-      } catch (error) {
-        console.error("Failed to delete old wallpaper image", error);
-      }
-    }
-
-    const newSettings = handleSettingsBackgroundValueChange("background_image_path", "");
-
-    updateSettings(newSettings);
   };
 
   // if settings.background.background_image_path changes, update the image
   useEffect(() => {
     const applyWallpaper = async () => {
+      // apply the new wallpaper image
       try {
-        await invoke("process_wallpaper_image", {
-          filePathString: targetWallpaperPath,
-        });
         // if there is already a wallpaper file, delete it
-        if (settings.background.background_image_path) {
+        if (settings.background.background_image_path && oldWallpaperPath) {
           try {
-            await invoke("delete_old_wallpaper_image", {
+            await invoke("delete_old_wallpaper_images");
-              filePathString: oldWallpaperPath,
-            });
           } catch (error) {
             console.error("Failed to delete old wallpaper image", error);
           }
         }
+        if (targetWallpaperPath)
+          await invoke("process_wallpaper_image", {
+            filePathString: targetWallpaperPath,
+          });
       } catch (error) {
         console.error(error);
       }
@@ -120,13 +114,13 @@ export const SettingsTabBackground: FC<SettingsTabBackgroundProps> = ({ sx }) =>
   }, [settings.background.background_image_path]);
 
   // update the preview image when stagedSettings.background.background_image_path changes
-  // useEffect(() => {
+  useEffect(() => {
-  //   if (stagedSettings.background.background_image_path) {
+    if (targetWallpaperPath) {
-  //     setImageSrc(stagedSettings.background.background_image_path);
+      setImageSrc(targetWallpaperPath);
-  //   } else {
+    } else {
-  //     setImageUrl(null);
+      setImageBlob(null);
-  //   }
+    }
-  // }, [stagedSettings.background.background_image_path]);
+  }, [targetWallpaperPath]);
 
   return (
     <Box sx={{ sx }}>
@@ -143,13 +137,29 @@ export const SettingsTabBackground: FC<SettingsTabBackgroundProps> = ({ sx }) =>
           borderRadius: "8px", // Optional: rounded corners
         }}
       >
-        <Image
+        {imageBlob ? (
-          src={imageUrl || "oh no"}
+          <Image
-          alt="Image not found"
+            src={imageBlob || "oh no"}
-          // fill the box r/catsareliquid
+            alt="Image not found"
-          layout="fill"
+            // fill the box r/catsareliquid
-          objectFit="cover"
+            layout="fill"
-        />
+            objectFit="cover"
+          />
+        ) : (
+          <Box
+            sx={{
+              alignItems: "center",
+              backgroundColor: "rgba(0, 0, 0, 0.1)",
+              display: "flex",
+              height: "100%",
+              justifyContent: "center",
+              position: "absolute",
+              width: "100%",
+            }}
+          >
+            No image selected
+          </Box>
+        )}
       </Box>
       <Box
         sx={{
@@ -164,7 +174,7 @@ export const SettingsTabBackground: FC<SettingsTabBackgroundProps> = ({ sx }) =>
           <Button
             color="primary"
             onClick={() => {
-              selectImage().then(() => updateSettings(stagedSettings));
+              selectImage();
             }}
             startIcon={<FileOpenOutlined />}
             size="small"

src/components/HeaderBar/WindowButtons.tsx

@@ -33,7 +33,7 @@ export const WindowButtons = () => {
   };
 
   const close = async () => {
-    await exit(1);
+    appWindow?.close();
   };
 
   useEffect(() => {