From 615b869fc7e37a1ec50fc6a3acc72ae746e2a483 Mon Sep 17 00:00:00 2001
From: candela97 <54083835+candela97@users.noreply.github.com>
Date: Mon, 25 Mar 2024 01:02:53 +0800
Subject: [PATCH] Refactor app page review section toggle button

---
 src/css/augmentedsteam.css                    | 22 ------
 src/js/Content/Features/Store/App/CApp.js     |  2 +-
 .../Features/Store/App/FReviewToggleButton.js | 47 ------------
 .../Store/App/FReviewToggleButton.svelte      | 74 +++++++++++++++++++
 src/localization/en.json                      |  1 +
 5 files changed, 76 insertions(+), 70 deletions(-)
 delete mode 100644 src/js/Content/Features/Store/App/FReviewToggleButton.js
 create mode 100644 src/js/Content/Features/Store/App/FReviewToggleButton.svelte

diff --git a/src/css/augmentedsteam.css b/src/css/augmentedsteam.css
index 0627d21bc..b38387aee 100644
--- a/src/css/augmentedsteam.css
+++ b/src/css/augmentedsteam.css
@@ -993,28 +993,6 @@ video.highlight_movie:hover + .html5_video_overlay {
   background-color: #aeaeae;
 }
 
-/***************************************
- * App pages
- * FReviewToggleButton
- **************************************/
-.es_review_section {
-  overflow: hidden;
-}
-#review_create.es_contracted .es_review_section {
-  max-height: 0;
-}
-#es_review_toggle {
-  float: right;
-}
-#review_create.es_contracted .es_review_contract,
-#review_create:not(.es_contracted) .es_review_expand {
-  display: none;
-}
-#review_create.es_contracted .es_review_expand,
-#review_create:not(.es_contracted) .es_review_contract {
-  display: block;
-}
-
 /***************************************
  * App pages
  * FWaitlistDropdown
diff --git a/src/js/Content/Features/Store/App/CApp.js b/src/js/Content/Features/Store/App/CApp.js
index 7b4b6199e..03098a6cd 100644
--- a/src/js/Content/Features/Store/App/CApp.js
+++ b/src/js/Content/Features/Store/App/CApp.js
@@ -33,7 +33,7 @@ import FPurchaseDate from "./FPurchaseDate";
 import FRemoveBroadcasts from "./FRemoveBroadcasts";
 import FRemoveDupeScreenshots from "./FRemoveDupeScreenshots";
 import FReplaceDevPubLinks from "./FReplaceDevPubLinks";
-import FReviewToggleButton from "./FReviewToggleButton";
+import {FReviewToggleButton} from "./FReviewToggleButton.svelte";
 import FSaveReviewFilters from "./FSaveReviewFilters";
 import FShowCoupon from "./FShowCoupon";
 import FSteamDeckCompatibility from "./FSteamDeckCompatibility";
diff --git a/src/js/Content/Features/Store/App/FReviewToggleButton.js b/src/js/Content/Features/Store/App/FReviewToggleButton.js
deleted file mode 100644
index 5e5d09b6f..000000000
--- a/src/js/Content/Features/Store/App/FReviewToggleButton.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import {Feature} from "../../../Modules/Feature/Feature";
-import {HTML, LocalStorage, Localization} from "../../../../modulesCore";
-
-export default class FReviewToggleButton extends Feature {
-
-    checkPrerequisites() {
-        return document.getElementById("review_create") !== null;
-    }
-
-    apply() {
-        const head = document.querySelector("#review_create h1");
-
-        // Reparent review section nodes
-        const newParent = document.createElement("div");
-        newParent.classList.add("es_review_section");
-        newParent.append(
-            ...document.getElementById("review_create").querySelectorAll("p, .avatar_block, .content")
-        );
-
-        head.insertAdjacentElement("afterend", newParent);
-
-        // Insert review toggle button
-        HTML.beforeEnd(head,
-            `<div class="btnv6_lightblue_blue btn_medium" id="es_review_toggle">
-                <div data-tooltip-text="${Localization.str.expand_slider}" class="es_review_expand">▼</div>
-                <div data-tooltip-text="${Localization.str.contract_slider}" class="es_review_contract">▲</div>
-            </div>`);
-
-        document.querySelector("#es_review_toggle").addEventListener("click", () => {
-            this._toggleReviews();
-        });
-
-        this._toggleReviews(LocalStorage.get("show_review_section"));
-    }
-
-    _toggleReviews(state) {
-
-        let _state = state;
-
-        if (typeof _state === "undefined") {
-            _state = !LocalStorage.get("show_review_section");
-            LocalStorage.set("show_review_section", _state);
-        }
-
-        document.getElementById("review_create").classList.toggle("es_contracted", !_state);
-    }
-}
diff --git a/src/js/Content/Features/Store/App/FReviewToggleButton.svelte b/src/js/Content/Features/Store/App/FReviewToggleButton.svelte
new file mode 100644
index 000000000..9e2ad76d6
--- /dev/null
+++ b/src/js/Content/Features/Store/App/FReviewToggleButton.svelte
@@ -0,0 +1,74 @@
+<script lang="ts" context="module">
+    // @ts-ignore
+    import self_ from "./FReviewToggleButton.svelte";
+    import {Feature} from "../../../modulesContent";
+    import type {CApp} from "./CApp";
+
+    export class FReviewToggleButton extends Feature<CApp> {
+
+        override checkPrerequisites(): boolean {
+            this._node = document.getElementById("review_create");
+            return this._node !== null;
+        }
+
+        override apply(): void {
+            const target = this._node.querySelector("h1");
+            if (!target) {
+                throw new Error("Node not found");
+            }
+
+            // Reparent review section nodes
+            const reviewSection = document.createElement("div");
+            reviewSection.classList.add("es_review_section");
+            reviewSection.append(
+                ...this._node.querySelectorAll("p, .avatar_block, .content")
+            );
+
+            target.after(reviewSection);
+
+            (new self_({
+                target,
+                props: {
+                    reviewSection
+                }
+            }));
+        }
+    }
+</script>
+
+<script lang="ts">
+    import {LocalStorage, Localization} from "../../../../modulesCore";
+    import {onMount} from "svelte";
+
+    export let reviewSection: Element|undefined;
+    export let state: boolean = LocalStorage.get("show_review_section");
+
+    function toggleReviews(event) {
+        if (event) {
+            state = !state;
+            LocalStorage.set("show_review_section", state);
+        }
+
+        reviewSection!.style.maxHeight = state ? null : 0;
+    }
+
+    onMount(() => {
+        toggleReviews();
+    });
+</script>
+
+
+<button class="btnv6_lightblue_blue btn_medium es_review_toggle" on:click={toggleReviews}>
+    <div data-tooltip-text="{Localization.str.expand_or_contract_slider}">{state ? "▲" : "▼"}</div>
+</button>
+
+
+<style>
+    :global(.es_review_section) {
+        overflow: hidden;
+    }
+    .es_review_toggle {
+        float: right;
+        font-size: 18px;
+    }
+</style>
diff --git a/src/localization/en.json b/src/localization/en.json
index 11da5ae65..95e92a272 100644
--- a/src/localization/en.json
+++ b/src/localization/en.json
@@ -292,6 +292,7 @@
     "preview_background": "Preview Background",
     "expand_slider": "Expand slider",
     "contract_slider": "Contract slider",
+    "expand_or_contract_slider": "Expand/contract slider",
     "early_access": "Early Access",
     "tag_short": "Use short tags to save space",
     "no_price_data": "No price data available",