IsThereAnyDeal · candela97 · Sep 16, 2024
diff --git a/src/css/augmentedsteam.css b/src/css/augmentedsteam.css
@@ -888,41 +888,6 @@ video.highlight_movie:hover + .html5_video_overlay {
   display: none;
 }
 
-/***************************************
- * Wishlist
- * FEmptyWishlist/FExportWishlist
- **************************************/
-#cart_status_data {
-  display: flex;
-  align-items: center;
-}
-
-.es-wbtn {
-  color: #fff;
-  float: right;
-  cursor: pointer;
-  font-size: 11px;
-  text-transform: uppercase;
-  padding: 0 25px;
-  line-height: 20px;
-}
-#es_empty_wishlist {
-  margin-right: 3px;
-  background-color: #bf5a5a;
-}
-#es_empty_wishlist:hover {
-  background-color: #ffd1d1;
-  color: black;
-}
-#es_export_wishlist {
-  background-color: #6c94a0;
-  margin-right: 15px;
-}
-#es_export_wishlist:hover {
-  background-color: #dbdee1;
-  color: black;
-}
-
 /***************************************
  * App pages
  * Common/UserNotes

diff --git a/src/js/Content/Features/Store/Wishlist/CWishlist.ts b/src/js/Content/Features/Store/Wishlist/CWishlist.ts
@@ -6,8 +6,7 @@ import FWishlistHighlights from "./FWishlistHighlights";
 import FWishlistITADPrices from "./FWishlistITADPrices";
 import FWishlistUserNotes from "./FWishlistUserNotes";
 import FWishlistStats from "./FWishlistStats";
-import FEmptyWishlist from "./FEmptyWishlist";
-import FExportWishlist from "./FExportWishlist";
+import FWishlistActionButtons from "./FWishlistActionButtons";
 import FKeepEditableRanking from "./FKeepEditableRanking";
 import FOneClickRemoveFromWishlist from "./FOneClickRemoveFromWishlist";
 import FWishlistProfileLink from "./FWishlistProfileLink";
@@ -16,7 +15,7 @@ import ContextType from "@Content/Modules/Context/ContextType";
 import User from "@Content/Modules/User";
 import ASEventHandler from "@Content/Modules/ASEventHandler";
 
-interface WishlistEntry {
+export interface WishlistEntry {
     appid: number,
     priority: number,
     added: number
@@ -43,8 +42,7 @@ export default class CWishlist extends CStoreBase {
                 FWishlistITADPrices,
                 FWishlistUserNotes,
                 FWishlistStats,
-                FEmptyWishlist,
-                FExportWishlist,
+                FWishlistActionButtons,
                 FKeepEditableRanking,
                 FOneClickRemoveFromWishlist,
                 FWishlistProfileLink,
@@ -64,9 +62,6 @@ export default class CWishlist extends CStoreBase {
             const myWishlistUrlRegex = new RegExp(`^${myWishlistUrl}([/#]|$)`);
             this.myWishlist = myWishlistUrlRegex.test(window.location.href) || window.location.href.includes(`/profiles/${User.steamId}`);
         }
-
-        // Maintain the order of the buttons
-        this.dependency(FEmptyWishlist, [FExportWishlist, true]);
     }
 
     override async applyFeatures(): Promise<void> {

diff --git a/src/js/Content/Features/Store/Wishlist/Components/ExportWishlistForm.svelte b/src/js/Content/Features/Store/Wishlist/Components/ExportWishlistForm.svelte
@@ -40,40 +40,45 @@
 </script>
 
 
-<div class="es-wexport">
-    <h2>{L(__export_type)}</h2>
-    <div class="es-wexport__buttons">
-        <label><input type="radio" value="text" bind:group={type} on:change> {L(__export_text)}</label>
-        <label><input type="radio" value="json" bind:group={type} on:change> JSON</label>
+<div class="as_wexport_container">
+    <div class="as_wexport">
+        <h2>{L(__export_type)}</h2>
+        <div class="as_wexport_buttons">
+            <label><input type="radio" value="text" bind:group={type} on:change> {L(__export_text)}</label>
+            <label><input type="radio" value="json" bind:group={type} on:change> JSON</label>
+        </div>
     </div>
-</div>
 
-{#if type === "text"}
-    <div class="es-wexport" transition:slide={{axis: "y", duration: 200}}>
-        <h2>{L(__export_format)}</h2>
-        <div>
-            <input type="text" id="es-wexport-format" bind:value={format} bind:this={input} on:change>
-            <div class="es-wexport__symbols">
-                {#each ["%title%", "%id%", "%appid%", "%url%", "%release_date%", "%price%", "%discount%", "%base_price%", "%type%", "%note%"] as str, index}
-                    {#if index > 0}, {/if}
-                    <button type="button" on:click={() => add(str)}>{str}</button>
-                {/each}
+    {#if type === "text"}
+        <div class="as_wexport" transition:slide={{axis: "y", duration: 200}}>
+            <h2>{L(__export_format)}</h2>
+            <div>
+                <input type="text" bind:value={format} bind:this={input} on:change>
+                <div class="as_wexport_symbols">
+                    {#each ["%title%", "%id%", "%appid%", "%url%", "%release_date%", "%price%", "%discount%", "%base_price%", "%type%", "%note%"] as str, index}
+                        {#if index > 0}, {/if}
+                        <button type="button" on:click={() => add(str)}>{str}</button>
+                    {/each}
+                </div>
             </div>
         </div>
-    </div>
-{/if}
+    {/if}
+</div>
 
 
 <style>
-    .es-wexport {
+    .as_wexport_container {
+        width: 580px;
+    }
+    .as_wexport {
         margin-bottom: 30px;
     }
-    .es-wexport__buttons {
+    .as_wexport_buttons {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 30px
     }
-    .es-wexport__symbols {
+    .as_wexport_symbols {
         margin-top: 2px;
         font-size: 11px;
     }
@@ -94,9 +99,9 @@
     }
     label:has(input[type=radio]:checked) {
         color: white;
-        border-color: #1a97ff
+        border-color: #1a97ff;
     }
-    label input[type=radio]{
+    label input[type=radio] {
         display: none;
     }
 
@@ -124,4 +129,4 @@
         text-decoration: underline;
         color: white;
     }
-</style>
+</style>
diff --git a/src/js/Content/Features/Store/Wishlist/EmptyWishlist.ts b/src/js/Content/Features/Store/Wishlist/EmptyWishlist.ts
@@ -0,0 +1,44 @@
+import {L} from "@Core/Localization/Localization";
+import {__emptyWishlist_confirm, __emptyWishlist_removing, __emptyWishlist_title} from "@Strings/_strings";
+import DynamicStore from "@Content/Modules/Data/DynamicStore";
+import RequestData from "@Content/Modules/RequestData";
+import User from "@Content/Modules/User";
+import SteamFacade from "@Content/Modules/Facades/SteamFacade";
+import BlockingWaitDialog from "@Core/Modals/BlockingWaitDialog";
+import type {WishlistEntry} from "./CWishlist";
+
+export default class EmptyWishlist {
+
+    static async showDialog(wishlistData: WishlistEntry[]): Promise<void> {
+
+        const result = await SteamFacade.showConfirmDialog(
+            L(__emptyWishlist_title),
+            L(__emptyWishlist_confirm), {
+                explicitConfirm: true
+            });
+
+        if (result !== "OK") { return; }
+
+        let cur = 0;
+
+        const waitDialog = new BlockingWaitDialog(
+            L(__emptyWishlist_title),
+            () => L(__emptyWishlist_removing, {
+                cur,
+                total: wishlistData.length
+            })
+        );
+
+        for (const {appid} of wishlistData) {
+            ++cur;
+            await waitDialog.update();
+            await RequestData.post("https://store.steampowered.com/api/removefromwishlist", {
+                sessionid: User.sessionId!,
+                appid: String(appid)
+            });
+        }
+
+        DynamicStore.clear();
+        location.reload();
+    }
+}
diff --git a/...eatures/Store/Wishlist/FExportWishlist.ts → ...Features/Store/Wishlist/ExportWishlist.ts b/...eatures/Store/Wishlist/FExportWishlist.ts → ...Features/Store/Wishlist/ExportWishlist.ts
@@ -1,13 +1,11 @@
 import Downloader from "@Core/Downloader";
 import {L} from "@Core/Localization/Localization";
 import {__export_copyClipboard, __export_download, __export_wishlist,} from "@Strings/_strings";
-import Feature from "@Content/Modules/Context/Feature";
-import type CWishlist from "@Content/Features/Store/Wishlist/CWishlist";
-import HTML from "@Core/Html/Html";
 import SteamFacade from "@Content/Modules/Facades/SteamFacade";
 import UserNotes from "@Content/Features/Store/Common/UserNotes/UserNotes";
 import Clipboard from "@Content/Modules/Clipboard";
 import ExportWishlistForm from "@Content/Features/Store/Wishlist/Components/ExportWishlistForm.svelte";
+import CustomModal from "@Core/CustomModal";
 
 type WishlistData = Array<[string, {
     name: string,
@@ -105,28 +103,24 @@ class WishlistExporter {
 }
 
 
-export default class FExportWishlist extends Feature<CWishlist> {
+export default class ExportWishlist {
 
-    private type: "text"|"json" = "text";
-    private format: string = "%title%";
+    private static type: "text"|"json" = "text";
+    private static format: string = "%title%";
 
-    override apply(): void {
-        HTML.afterBegin("#cart_status_data", `<div class="es-wbtn" id="es_export_wishlist"><div>${L(__export_wishlist)}</div></div>`);
-
-        document.querySelector("#es_export_wishlist")!.addEventListener("click", () => {
-            this.showDialog();
-        });
-    }
-
-    private async showDialog(): Promise<void> {
+    static async showDialog(): Promise<void> {
 
         let form: ExportWishlistForm|undefined;
 
-        const observer = new MutationObserver(() => {
-            const modal = document.querySelector("#as_export_form");
-            if (modal) {
+        const response = await CustomModal({
+            title: L(__export_wishlist),
+            options: {
+                okButton: L(__export_download),
+                secondaryActionButton: L(__export_copyClipboard)
+            },
+            modalFn: (target) => {
                 form = new ExportWishlistForm({
-                    target: modal,
+                    target,
                     props: {
                         type: this.type,
                         format: this.format
@@ -136,22 +130,9 @@ export default class FExportWishlist extends Feature<CWishlist> {
                     this.format = form!.format;
                     this.type = form!.type;
                 });
-                observer.disconnect();
+                return form;
             }
         });
-        observer.observe(document.body, {
-            childList: true
-        });
-
-        const response = await SteamFacade.showConfirmDialog(
-            L(__export_wishlist),
-            `<div id="as_export_form" style="width:580px"></div>`,
-            {
-                okButton: L(__export_download),
-                secondaryActionButton: L(__export_copyClipboard)
-            });
-
-        form?.$destroy();
 
         if (response === "CANCEL") {
             return;

diff --git a/src/js/Content/Features/Store/Wishlist/FEmptyWishlist.ts b/src/js/Content/Features/Store/Wishlist/FEmptyWishlist.ts