From d2b05a1b1b907a5e6e7633e5b4196cd6b3ecc6ca Mon Sep 17 00:00:00 2001
From: MotorTruck1221 <motortruck1221@protonmail.com>
Date: Sat, 28 Dec 2024 03:25:12 -0700
Subject: [PATCH] Remove the svelte component from InstalledThemes

---
 .../catalog/InstalledPlugins.svelte           |   3 +-
 src/components/catalog/InstalledThemes.astro  | 116 ++++++++++++++++++
 src/components/catalog/InstalledThemes.svelte |  67 ----------
 src/components/catalog/Parent.svelte          |   1 -
 src/pages/[lang]/settings/appearance.astro    |   4 +-
 tailwind.config.mjs => tailwind.config.ts     |   0
 6 files changed, 120 insertions(+), 71 deletions(-)
 create mode 100644 src/components/catalog/InstalledThemes.astro
 delete mode 100644 src/components/catalog/InstalledThemes.svelte
 rename tailwind.config.mjs => tailwind.config.ts (100%)

diff --git a/src/components/catalog/InstalledPlugins.svelte b/src/components/catalog/InstalledPlugins.svelte
index ace6fcc..984f8fa 100644
--- a/src/components/catalog/InstalledPlugins.svelte
+++ b/src/components/catalog/InstalledPlugins.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+import { unmount } from "svelte";
 import { Suspense, createSuspense } from "@svelte-drama/suspense";
 const suspend = createSuspense();
 import { Settings, settings } from "@utils/settings/index";
@@ -40,7 +41,7 @@ let compRef = [];
                     <div class="h-2/6 text-center content-center p-3 font-semibold items-center flex flex-col">
                         <div class="text-2xl"> {asset.title} </div>
                         <div class="flex flex-row">
-                            <div class="h-8 w-8 cursor-pointer" on:click={() => {settings.marketPlaceSettings.uninstall(asset.type === "page" ? "plugin-page" : "plugin-sw", asset.package_name); compRef[key].$destroy()}}>
+                            <div class="h-8 w-8 cursor-pointer" on:click={() => {settings.marketPlaceSettings.uninstall(asset.type === "page" ? "plugin-page" : "plugin-sw", asset.package_name); unmount(compRef[key])}}>
                                 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256" {...$$props}>
                                     <path fill="currentColor" d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M112 168a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm0-120H96v-8a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8Z" />
                                 </svg>
diff --git a/src/components/catalog/InstalledThemes.astro b/src/components/catalog/InstalledThemes.astro
new file mode 100644
index 0000000..aa3ed06
--- /dev/null
+++ b/src/components/catalog/InstalledThemes.astro
@@ -0,0 +1,116 @@
+<div id="parent" class="flex flex-row flex-wrap gap-4 items-center font-roboto justify-center">
+    <div class="rounded-3xl bg-navbar-color w-64 flex flex-col cursor-pointer">
+        <div class="w-full" id="main-theme">
+            <img src="/classic_theme.png" alt="Classic nebula" class="aspect-[16/9] rounded-t-3xl"/>
+        </div>
+        <div class="h-2/6 text-center content-center p-3 font-semibold items-center flex flex-col text-2xl">
+            Classic Nebula
+        </div>
+    </div>
+</div>
+
+<script>
+    type Assets = {
+        description: string,
+        image: string,
+        package_name: string,
+        payload: string,
+        tags: [],
+        background_video: string,
+        background_image: string,
+        title: string,
+        type: string,
+        version: string
+    }
+    import { pageLoad } from "@utils/events";
+    import { Settings, settings } from "@utils/settings";
+    async function getItem(item: any) {
+        try {
+            const res = await fetch(new URL(`/api/packages/${item}`, window.location.origin));
+            const data = await res.json();
+            return { ...data, package_name: item }
+        }
+        catch (err: any) {
+            console.log(`Err in themes: ${err}`);
+            return null;
+        }
+    }
+
+    async function getAssets() {
+        const items = JSON.parse(localStorage.getItem(Settings.AppearanceSettings.themes) as string) || [];
+        const promises = items.map(getItem);
+        const dataArray = await Promise.all(promises);
+        const accumulatedData = dataArray.filter((data) => data !== null);
+        return accumulatedData;
+    }
+
+    const attachThemeEvent = (elem: HTMLElement, def: boolean | Assets) => {
+        elem.addEventListener("click", () => {
+            if (def === true || def === false) return settings.marketPlaceSettings.changeTheme(def);
+            settings.marketPlaceSettings.changeTheme(false, def.payload, def.background_video, def.background_image, def.package_name);
+        });
+    };
+
+    const attachDeleteEvent = (elem: HTMLElement, mainElem: HTMLElement, parentElem: HTMLElement, asset: Assets) => {
+        elem.addEventListener("click", () => {
+            settings.marketPlaceSettings.uninstall("theme", asset.package_name);
+            settings.marketPlaceSettings.changeTheme(true);
+            parentElem.removeChild(mainElem);
+        });
+    }
+    
+    const createElem = (asset: Assets) => {
+        const parent = document.getElementById("parent");
+        const mainDiv = document.createElement("div");
+        mainDiv.classList.add("rounded-3xl", "bg-navbar-color", "w-64", "flex", "flex-col", "cursor-pointer");
+
+        const clickDiv = document.createElement("div");
+        clickDiv.classList.add("w-full");
+        attachThemeEvent(clickDiv, asset);
+        const imgDiv = document.createElement("img");
+        imgDiv.classList.add("aspect-[16/9]", "rounded-t-3xl");
+        imgDiv.src = `/packages/${asset.package_name}/${asset.image}`;
+        imgDiv.alt = `${asset.type}-${asset.title}`;
+        clickDiv.appendChild(imgDiv);
+
+        const infoDiv = document.createElement("div");
+        infoDiv.classList.add("h-2/6", "text-center", "content-center", "p-3", "font-semibold", "items-center", "flex", "flex-col");
+        const infoTitle = document.createElement("p");
+        infoTitle.classList.add("text-2xl");
+        infoTitle.innerHTML = asset.title;
+
+        const elemInfoMain = document.createElement("div");
+        elemInfoMain.classList.add("flex", "flex-row");
+        const deleteButton = document.createElement("div");
+        deleteButton.classList.add("h-8", "w-8", "cursor-pointer");
+        attachDeleteEvent(deleteButton, mainDiv, parent!, asset);
+        //FUCK SVG's
+        const deleteButtonSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256"><path fill="currentColor" d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M112 168a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm0-120H96v-8a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8Z" /></svg>`
+        deleteButton.innerHTML= deleteButtonSVG;
+        elemInfoMain.appendChild(deleteButton);
+
+        const openButton = document.createElement("a");
+        openButton.classList.add("h-8", "w-8", "cursor-pointer");
+        openButton.href = `../catalog/package/${asset.package_name}`
+        const openButtonSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256"><path fill="currentColor" d="M192 136v72a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h72a8 8 0 0 1 0 16H48v128h128v-72a8 8 0 0 1 16 0m32-96a8 8 0 0 0-8-8h-64a8 8 0 0 0-5.66 13.66L172.69 72l-42.35 42.34a8 8 0 0 0 11.32 11.32L184 83.31l26.34 26.35A8 8 0 0 0 224 104Z" /></svg>`
+        openButton.innerHTML = openButtonSVG;
+        elemInfoMain.appendChild(openButton);
+
+        infoDiv.appendChild(elemInfoMain);
+        infoDiv.appendChild(infoTitle);
+        
+
+        mainDiv.appendChild(clickDiv);
+        mainDiv.appendChild(infoDiv);
+        parent?.appendChild(mainDiv);
+        console.log(mainDiv);
+    }
+
+    pageLoad(async () => {
+        const mainElem = document.getElementById("main-theme");
+        try { attachThemeEvent(mainElem!, true) } catch(_) {}
+        const assets = await getAssets();
+        console.log(assets);
+        assets.map((asset) => { createElem(asset); });
+    }, true);
+</script>
diff --git a/src/components/catalog/InstalledThemes.svelte b/src/components/catalog/InstalledThemes.svelte
deleted file mode 100644
index 69bfb7b..0000000
--- a/src/components/catalog/InstalledThemes.svelte
+++ /dev/null
@@ -1,67 +0,0 @@
-<script lang="ts">
-import { Suspense, createSuspense } from "@svelte-drama/suspense";
-const suspend = createSuspense();
-import { Settings, settings } from "@utils/settings/index";
-import Parent from "./Parent.svelte";
-async function getItem(item) {
-    try {
-        const response = await fetch(`/api/packages/${item}`);
-        const data = await response.json();
-        return {
-            ...data,
-            package_name: item
-        };
-    } catch (error) {
-        console.error("error: failed to fetch", error);
-        return null;
-    }
-}
-async function getAssets() {
-    const items = JSON.parse(localStorage.getItem(Settings.AppearanceSettings.themes)) || [];
-    const promises = items.map(getItem);
-    const dataArray = await Promise.all(promises);
-    const accumulatedData = dataArray.filter((data) => data !== null);
-    console.log(JSON.stringify(accumulatedData));
-    return accumulatedData;
-}
-let assets = getAssets();
-let compRef = [];
-</script>
-<Suspense> 
-    {#snippet children(suspend)}
-        <div class="rounded-3xl bg-navbar-color w-64 flex flex-col cursor-pointer">
-            <div class="w-full" on:click={() => {settings.marketPlaceSettings.changeTheme(true)}}>
-                <img src='/classic_theme.png' alt="Classic Nebula" class="aspect-[16/9] rounded-t-3xl"/>
-            </div>
-            <div class="h-2/6 text-center content-center p-3 font-semibold items-center flex flex-col text-2xl">
-                Classic Nebula
-            </div>
-        </div>
-        {#await suspend(assets) then data}
-            {#each Object.entries(data) as [key, asset]}
-                <Parent bind:this={compRef[key]}>
-                    <div class="rounded-3xl bg-navbar-color w-64 flex flex-col cursor-pointer">
-                        <div class="w-full" on:click={() => {settings.marketPlaceSettings.changeTheme(false, asset.payload, asset.background_video, asset.background_image, asset.package_name)}}>
-                        <img src={`/packages/${asset.package_name}/${asset.image}`} alt="theme" class="aspect-[16/9] rounded-t-3xl"/>
-                    </div>
-                    <div class="h-2/6 text-center content-center p-3 font-semibold items-center flex flex-col">
-                        <div class="text-2xl"> {asset.title} </div>
-                        <div class="flex flex-row">
-                            <div class="h-8 w-8 cursor-pointer" on:click={() => {settings.marketPlaceSettings.uninstall("theme", asset.package_name); settings.marketPlaceSettings.changeTheme(true); compRef[key].$destroy()}}>
-                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256" {...$$props}>
-                                    <path fill="currentColor" d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M112 168a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm0-120H96v-8a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8Z" />
-                                </svg>
-                            </div>
-                            <a class="h-8 w-8 cursor-pointer" href={`../catalog/package/${asset.package_name}`}>
-                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256" {...$$props}>
-                                    <path fill="currentColor" d="M192 136v72a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h72a8 8 0 0 1 0 16H48v128h128v-72a8 8 0 0 1 16 0m32-96a8 8 0 0 0-8-8h-64a8 8 0 0 0-5.66 13.66L172.69 72l-42.35 42.34a8 8 0 0 0 11.32 11.32L184 83.31l26.34 26.35A8 8 0 0 0 224 104Z" />
-                                </svg>
-                            </a>
-                        </div>
-                    </div>
-                </div>
-            </Parent>
-        {/each}
-    {/await}
-    {/snippet}
-</Suspense>
diff --git a/src/components/catalog/Parent.svelte b/src/components/catalog/Parent.svelte
index b10e18f..4fa864c 100644
--- a/src/components/catalog/Parent.svelte
+++ b/src/components/catalog/Parent.svelte
@@ -1,2 +1 @@
-<!-- Legit just so we can use $destroy() -->
 <slot />
diff --git a/src/pages/[lang]/settings/appearance.astro b/src/pages/[lang]/settings/appearance.astro
index 8308302..645dc82 100644
--- a/src/pages/[lang]/settings/appearance.astro
+++ b/src/pages/[lang]/settings/appearance.astro
@@ -1,5 +1,5 @@
 ---
-import InstalledThemes from "@components/catalog/InstalledThemes.svelte";
+import InstalledThemes from "@components/catalog/InstalledThemes.astro";
 import Layout from "@layouts/Layout.astro";
 import SettingsLayout from "@layouts/SettingsLayout.astro";
 import SettingsSection from "@layouts/SettingsSection.astro";
@@ -17,7 +17,7 @@ import { MARKETPLACE_ENABLED } from "astro:env/client";
       subtitle="Choose a theme so your eyes don't hate us.">
       <div class="flex flex-row flex-wrap gap-4 items-center font-roboto">
         <div class="justify-center flex flex-row gap-6 flex-wrap md:justify-normal">
-            <InstalledThemes client:only="svelte" />
+            <InstalledThemes />
           {MARKETPLACE_ENABLED && 
             <a href={`/${lang}/catalog/1`} class="rounded-3xl bg-navbar-color w-64 flex flex-col">
                 <div class="w-full items-center justify-center flex aspect-[16/9]">
diff --git a/tailwind.config.mjs b/tailwind.config.ts
similarity index 100%
rename from tailwind.config.mjs
rename to tailwind.config.ts