From 7cc6fc9f249e309695db8fa9b10c63c5ebaad380 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Fedor?= <tomas.fedor3@gmail.com>
Date: Wed, 10 Apr 2024 16:46:16 +0200
Subject: [PATCH] Make feature more svelte-y

---
 src/img/steam/review_graph_expander.png       | Bin 0 -> 1445 bytes
 .../Store/Licenses/FLicensesSummary.svelte    | 136 +++++++++---------
 src/js/Content/Steam/SmallSteamButton.svelte  |  26 ++++
 src/js/Content/Steam/ToggleIcon.svelte        |  19 +++
 4 files changed, 109 insertions(+), 72 deletions(-)
 create mode 100644 src/img/steam/review_graph_expander.png
 create mode 100644 src/js/Content/Steam/SmallSteamButton.svelte
 create mode 100644 src/js/Content/Steam/ToggleIcon.svelte

diff --git a/src/img/steam/review_graph_expander.png b/src/img/steam/review_graph_expander.png
new file mode 100644
index 0000000000000000000000000000000000000000..a1a4ac6bdbdb17d8b67f5a2eab9938b8f3a8c54c
GIT binary patch
literal 1445
zcmeAS@N?(olHy`uVBq!ia0vp^d_XM4!3HGT`Ez4{lw^r(L`iUdT1k0gQ7VIDN`6wR
zf@f}GdTLN=VoGJ<$y6H#24<zqkcg59UmvUF{9L_6kQ%*;+ybC(1_m4Zih{)C?9>v4
zq}24xJX@vryZ0+8WTx0Eg`4^s_!c;)W@LI)6{QAO`Gq7`WhYyvDB0U7*i={n4aiL`
zNmQuF&B-gas<2f8n`;GRgM{^!6u?SKvTc<hj*9RNP;kyKN>wn`GuBNuFf>#!Gt)CP
zF*P$Y)KM@pFf`IP03tJ8LlY}gGb<x=1t?Gg+E$d3W)<Y(2DJ;wvsKC{DJihh*Do(G
z*DE*H%P&gTH?*|01esxEqzhD`TU?n}l31aeSF8*(!6mggxhS)sBr`ux0c2ugQhsTP
ztrF0s5HI8wz>Uo-h6WQb!1OB;3-k^33_xCjDfIQluQWFouDZA+C>7yetOgf{R2HP_
z2c;J0mlh=hBQ8xDWL1Hcb5UwyNq$jCetr%t6azByOY(~|@(UE4gUu8)!ZY(y^2>`g
z!Rmc|tvvIJOA_;vQ$1a5m4GJbWoD*W8Jn89nz<UeSvs1!8XCHqTN=7qI=LAbxj6xO
zZZ1wRy)OC5rManjB{01yaJ|L`IQ4>(LT&-jW|!2W%(B!Jx1#)91+bT`GI6`b1*dsX
zy(u`|V&sZbuRhQ*`k;tKifEV+F!g|#@MH_*z!QFI9x$~R0h4uxZ;c@X1Cykui(^Q|
ztvOTtJth}Q9KT=Q8PJ~8QX#-1d5~|ONmrYN30L|Bp`}rcM+Eq<s%mW9RdJDLl3(l+
zXV!&lnM7~7y}pvLsGZ}}CC4)1CCyJ3Ds0?-p85X4)3;yq{XUrf{@(r1HTUn&f8PJP
zrRS8}SAqWYs=ZTRyt%>uYlq^ZG`aN;x|ZELpz+9_ol8*m;YT^Pgz(Gm3poyV)c;j?
zDd};S6WYN0JVncK_09tdkLH_6PCUVr+PUfibGl3avom4S)<6EV+&RAYAls4$Qa0DR
zCV!CPy1+Sm+ibNuG1aJcZUe^e57xJAE|B^4fO(FQ@8o^|7~UO_={Y#>nQg>{_C;3T
zgJ%@hDsFh&b0FWNm{axUnMz5%!`3_U78Z&&sn+HmKi83{E3oXcRdUGpLd``IGc&j+
zIZos~tNJu~pR2In!SEMHAI>g5Fkx-@zTkDwEB%y}ADLLZDQXi<@m?<fb<W4!z^HS#
zx*{z&S4-S_-En4{*8Me{?GM&&THfSr<02A1>G%_Ck-)jB4=lH6PTXC)C{NU3c8$?i
z7K?+YE$+0t7ld!E2)reF^@;HO^EJ9BcW>!keQI82YS-eBYK=rc_t)l$Qg)e2>!+4o
zDb_h*{%~nd`orCsG51Zyw|?3c<?f{|ma@6%SCScb^oG(k8f(`qIDh&}AnTu-Wx?69
ziD$KzH{H8Z;=@{Fxh0bI)?@D06M>5NSKO9!mf941?(K%QKmHAj3@xDt92u7-KL-_@
Mp00i_>zopr0NhR-$N&HU

literal 0
HcmV?d00001

diff --git a/src/js/Content/Features/Store/Licenses/FLicensesSummary.svelte b/src/js/Content/Features/Store/Licenses/FLicensesSummary.svelte
index 018748c40..8aae894cc 100644
--- a/src/js/Content/Features/Store/Licenses/FLicensesSummary.svelte
+++ b/src/js/Content/Features/Store/Licenses/FLicensesSummary.svelte
@@ -1,5 +1,4 @@
 <script lang="ts" context="module">
-    // @ts-ignore
     import self_ from "./FLicensesSummary.svelte";
     import {Feature} from "../../../modulesContent";
     import type {CLicenses} from "./CLicenses";
@@ -20,98 +19,91 @@
     }
 </script>
 
-<script lang="js">
+<script lang="ts">
     import {Localization} from "../../../../modulesCore";
+    import {slide} from "svelte/transition";
+    import SmallSteamButton from "../../../Steam/SmallSteamButton.svelte";
+    import ToggleIcon from "../../../Steam/ToggleIcon.svelte";
 
-    const list = {};
-    const types = {};
+    const total: Record<string, number> = {};
+    const yearly: Record<string, Record<string, number>> = {};
 
     for (const item of document.querySelectorAll(".account_table tr")) {
-        const dateStr = item.querySelector("td.license_date_col")?.textContent.trim();
+        const dateStr = item.querySelector("td.license_date_col")?.textContent?.trim();
         if (!dateStr) { continue; }
 
         const year = /\d{4}/.exec(dateStr)?.[0] ?? Localization.str.thewordunknown;
-        const type = item.querySelector("td.license_acquisition_col")?.textContent.trim() || Localization.str.thewordunknown;
+        const type = item.querySelector("td.license_acquisition_col")?.textContent?.trim() || Localization.str.thewordunknown;
 
-        (list[year] ??= {})[type] = (list[year][type] ?? 0) + 1;
-        types[type] = (types[type] ?? 0) + 1;
+        total[type] = (total[type] ?? 0) + 1;
+        (yearly[year] ??= {})[type] = (yearly[year][type] ?? 0) + 1;
     }
 
-    const listEntries = Object.entries(list).reverse();
-    const totals = listEntries.map(
-        ([, row]) => Object.entries(row)
-            .map(([, count]) => count)
-            .reduce((a, b) => a + b, 0)
-    );
-
-    const totalGlobal = totals.reduce((a, b) => a + b, 0);
-    const typesEntries = Object.entries(types);
-
-    const tableHeader = typesEntries
-        .map(([name]) => `<th>${name}</th>`)
-        .join("");
-
-    const tableFooter = typesEntries
-        .map(([, value]) => `<td>${value || "0"}</td>`)
-        .join("");
-
-    const rows = listEntries
-        .map(([year, row], i) => `<tr>
-            <td>${year}</td>
-            ${typesEntries
-                .map(([name]) => `<td>${row[name] || "0"}</td>`)
-                .join("")
-            }
-            <td>${totals[i] || "0"}</td>
-        </tr>`)
-        .join("");
-
-    let show = false;
+    let isOpen: boolean = false;
 </script>
 
-<span class="h3">{Localization.str.wl.label}</span>
-<button on:click={() => (show = !show)}>{show ? Localization.str.hide : Localization.str.show}</button>
-{#if show}
-<div class="block_content">
-    <table class="account_table">
-        <thead>
-            <tr>
-                <th>{Localization.str.year}</th>
-                {@html tableHeader}
-                <th>{Localization.str.all}</th>
-            </tr>
-        </thead>
-        <tbody>
-            {@html rows}
-        </tbody>
-        <tfoot>
-            <tr>
-                <td>{Localization.str.all}</td>
-                {@html tableFooter}
-                <td>{totalGlobal}</td>
-            </tr>
-        </tfoot>
-    </table>
+
+<div class="stats">
+    <h3>
+        {Localization.str.wl.label}
+        <SmallSteamButton on:click={() => (isOpen = !isOpen)}>
+            {isOpen ? Localization.str.hide : Localization.str.show}
+            <ToggleIcon down={!isOpen} />
+        </SmallSteamButton>
+    </h3>
+
+    {#if isOpen}
+        <div class="block_content" transition:slide={{axis: "y", duration: 200}}>
+            <table class="account_table">
+                <thead>
+                    <tr>
+                        <th>{Localization.str.year}</th>
+                        {#each Object.keys(total) as type}
+                            <th>{type}</th>
+                        {/each}
+                        <th>{Localization.str.all}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {#each Object.entries(yearly).reverse() as [year, map]}
+                        <tr>
+                            <td>{year}</td>
+                            {#each Object.keys(total) as type}
+                                <td>{map[type] ?? 0}</td>
+                            {/each}
+                            <td>{Object.values(map).reduce((result, currentValue) => result + currentValue, 0)}</td>
+                        </tr>
+                    {/each}
+                </tbody>
+                <tfoot>
+                    <tr>
+                        <td>{Localization.str.all}</td>
+                        {#each Object.values(total) as count}
+                            <td>{count}</td>
+                        {/each}
+                        <td>{Object.values(total).reduce((result, currentValue) => result + currentValue, 0)}</td>
+                    </tr>
+                </tfoot>
+            </table>
+        </div>
+    {/if}
 </div>
-{/if}
 
 
 <style>
-    :global(.block) {
-        margin-top: 20px;
+    .stats {
+        margin-bottom: 20px;
     }
-    .h3 {
+
+    h3 {
         color: #ffffff;
         font-size: 22px;
         font-family: "Motiva Sans", Sans-serif;
         font-weight: normal;
         text-transform: uppercase;
-    }
-    button {
-        vertical-align: text-bottom;
-        margin-left: 5px;
-        cursor: pointer;
-        border: solid #8ecafc 1px;
-        padding: 0px 10px;
+        display: flex;
+        gap: 5px;
+        justify-content: flex-start;
+        align-items: baseline;
     }
 </style>
diff --git a/src/js/Content/Steam/SmallSteamButton.svelte b/src/js/Content/Steam/SmallSteamButton.svelte
new file mode 100644
index 000000000..81fb42457
--- /dev/null
+++ b/src/js/Content/Steam/SmallSteamButton.svelte
@@ -0,0 +1,26 @@
+
+<button on:click>
+    <slot></slot>
+</button>
+
+
+<style>
+    button {
+        border-radius: 2px;
+        padding: 2px 4px;
+        border: none;
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+        text-decoration: none !important;
+        color: #67c1f5 !important;
+        background: rgba( 103, 193, 245, 0.2 );
+    }
+    button:hover {
+        text-decoration: none !important;
+        color: #fff !important;
+        background: #417a9b;
+        background: -webkit-linear-gradient( 150deg, #417a9b 5%,#67c1f5 95%);
+        background: linear-gradient( -60deg, #417a9b 5%,#67c1f5 95%);
+    }
+</style>
diff --git a/src/js/Content/Steam/ToggleIcon.svelte b/src/js/Content/Steam/ToggleIcon.svelte
new file mode 100644
index 000000000..9c7a5db80
--- /dev/null
+++ b/src/js/Content/Steam/ToggleIcon.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+    export let down: boolean = false;
+</script>
+
+<i class:down></i>
+
+<style>
+    i {
+        width: 14px;
+        height: 16px;
+        background-size: 14px 26px;
+        display: inline-block;
+        background: url("extension://img/steam/review_graph_expander.png") no-repeat 0 2px;
+        transition: background-position 200ms;
+    }
+    .down {
+        background-position: 0 -12px;
+    }
+</style>