Refactor app page review section toggle button

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

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";

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>

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",