Uninstall button

server.js

@@ -150,31 +150,31 @@ app.use("/scripts/", express.static("./database_assets/scripts"));
 app.use(ssrHandler);
 app.use(express.static(publicPath));
 
-// await catalog_assets.create({
-//   package_name: "com.nebula.cybermonay",
-//   title: "Cyber Monay",
-//   image: "cyber_monay.jpg",
-//   author: "Nebula Services",
-//   version: "1.0.0",
-//   description: 'A parody of the famous "Cyber Monay" hack!',
-//   tags: ["Hacking", "Animated", "Funny"],
-//   payload: "com.nebula.cybermonay.css",
-//   background_video: "cyber_monay_test.mp4",
-//   type: "theme",
-// });
+await catalog_assets.create({
+  package_name: "com.nebula.cybermonay",
+  title: "Cyber Monay",
+  image: "cyber_monay.jpg",
+  author: "Nebula Services",
+  version: "1.0.0",
+  description: 'A parody of the famous "Cyber Monay" hack!',
+  tags: ["Hacking", "Animated", "Funny"],
+  payload: "com.nebula.cybermonay.css",
+  background_video: "cyber_monay_test.mp4",
+  type: "theme",
+});
 
-// await catalog_assets.create({
-//   package_name: "com.nebula.fortnite.jpg",
-//   title: "Fortnite.jpg",
-//   image: "fortnite.jpg",
-//   author: "Nebula Services",
-//   version: "1.0.0",
-//   description: "Like the image in Ultraviolet, now on Nebula!",
-//   tags: ["Image", "Funny"],
-//   payload: "com.nebula.cybermonay.css",
-//   background_image: "fortnite.jpg",
-//   type: "theme",
-// });
+await catalog_assets.create({
+  package_name: "com.nebula.fortnite.jpg",
+  title: "Fortnite.jpg",
+  image: "fortnite.jpg",
+  author: "Nebula Services",
+  version: "1.0.0",
+  description: "Like the image in Ultraviolet, now on Nebula!",
+  tags: ["Image", "Funny"],
+  payload: "com.nebula.cybermonay.css",
+  background_image: "fortnite.jpg",
+  type: "theme",
+});
 
 catalog_assets.sync();
 const server = createServer();

src/components/catalog/CatalogCard.svelte

@@ -1,5 +1,6 @@
 <script>
   let assetPromise = get_assets();
+
   async function get_assets() {
     const response = await fetch("/api/catalog-assets");
     const data = await response.json();
@@ -11,6 +12,7 @@
   {#await assetPromise}
     Loading assets...
   {:then assets}
+    {#if Object.keys(assets).length > 1}
       <div class="flex flex-row gap-6 flex-wrap">
         {#each Object.entries(assets) as [key, asset]}
           <a href={"/assets/" + key}>
@@ -46,7 +48,16 @@
           </a>
         {/each}
       </div>
+    {:else}
+      <div class="text-2xl text-center text-text-color mt-6 w-96">
+        No assets available at the moment. The server host's database is empty.
+        Please contact the maintainer of this site if you think this is an
+        error.
+      </div>
+    {/if}
   {:catch someError}
+    <div class="text-lg text-center text-red-500 mt-6">
       System error: {someError.message}.
+    </div>
   {/await}
 </div>

src/pages/assets/[...package_name].astro

@@ -62,8 +62,28 @@ const assets_json = await response.json();
     }
   </div>
   <script is:inline define:vars={{ assets_json, package_name }}>
+    // determine if this is installed
+    let items = JSON.parse(localStorage.getItem("installed_themes")) || [];
+
+    const packageExists = items.indexOf(package_name) !== -1;
+
+    if (packageExists) {
+      document.getElementById("install").textContent = "Uninstall";
+    }
+
     document.getElementById("install").addEventListener("click", install);
     function install() {
+      if (packageExists) {
+        const index = items.indexOf(package_name);
+        items.splice(index, 1);
+        localStorage.setItem("installed_themes", JSON.stringify(items));
+
+        localStorage.removeItem("background_video");
+        localStorage.removeItem("background_image");
+        localStorage.removeItem("stylesheet");
+        location.reload();
+      } else {
+        console.log("Package does not exist in the items array.");
         let installedThemes = localStorage.getItem("installed_themes");
 
         if (installedThemes) {
@@ -75,15 +95,24 @@ const assets_json = await response.json();
           installedThemes = [package_name];
         }
 
-      localStorage.setItem("installed_themes", JSON.stringify(installedThemes));
+        localStorage.setItem(
+          "installed_themes",
+          JSON.stringify(installedThemes)
+        );
 
         if (assets_json.background_video) {
-        localStorage.setItem("background_video", assets_json.background_video);
+          localStorage.setItem(
+            "background_video",
+            assets_json.background_video
+          );
         } else {
           localStorage.removeItem("video");
         }
         if (assets_json.background_image) {
-        localStorage.setItem("background_image", assets_json.background_image);
+          localStorage.setItem(
+            "background_image",
+            assets_json.background_image
+          );
         } else {
           localStorage.removeItem("background_image");
         }
@@ -92,5 +121,6 @@ const assets_json = await response.json();
         }
         location.reload();
       }
+    }
   </script>
 </Layout>