added background removal

interface/src/pages/Themes.tsx

@@ -88,16 +88,25 @@ const Themes: FC = () => {
     setBackgrounds(prev => prev.filter(bg => bg.id !== fileId));
   };
 
+  const selectNoBackground = (): void => {
+    setSelectedBackground(null);
+    localStorage.removeItem('selectedBackground');
+  };  
+
   useEffect(() => {
     loadBackgrounds();
   }, []);
 
   return (
   <div>
-      <button className="absolute top-0 right-0 p-2 text-lg text-blue-500" onClick={() => setIsEditMode(!isEditMode)}>
+    <button className="p-2 my-4 text-white bg-red-600 rounded" onClick={() => selectNoBackground()}>
+      No Background
+    </button>
+    <div className="relative">
+      <button className="absolute top-0 right-0 p-2 text-[0.8rem] text-blue-500" onClick={() => setIsEditMode(!isEditMode)}>
         {isEditMode ? 'Done' : 'Edit'}
       </button>
-    <h2 className="py-2 text-lg font-bold">Images</h2>
+      <h2 className="pb-2 text-lg font-bold">Images</h2>
       <div className="flex flex-wrap gap-4">
         {/* Image uploader swatch */}
         <div className="relative w-16 h-16 overflow-hidden transition rounded-xl bg-zinc-900">
@@ -154,6 +163,7 @@ const Themes: FC = () => {
         ))}
       </div>
     </div>
+  </div>
   );
 };
 

public/backgrounds/background.js

@@ -37,6 +37,12 @@ const updateBackground = async () => {
     const data = await readData();
     if (!data) {
       console.log("No data found in IndexedDB.");
+
+      const container = document.getElementById("media-container");
+      const currentMedia = container.querySelector(".current-media");
+      if (currentMedia) {
+        currentMedia.remove();
+      }
       return;
     }