From 4487c068ec3eb65888c6a40d703f44c9745dbdfa Mon Sep 17 00:00:00 2001
From: I Made Setia Baruna <setia.baruna@sprintasia.co.id>
Date: Mon, 1 Feb 2021 02:08:42 +0800
Subject: [PATCH] Add changelog

---
 src/routes/settings.svelte | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/routes/settings.svelte b/src/routes/settings.svelte
index 81ac9b9b..200ce91f 100644
--- a/src/routes/settings.svelte
+++ b/src/routes/settings.svelte
@@ -1,6 +1,7 @@
 <script>
-  import { mdiCheckCircleOutline, mdiDiscord, mdiGoogleDrive, mdiLoading } from '@mdi/js';
+  import { mdiCheckCircleOutline, mdiChevronDown, mdiDiscord, mdiGoogleDrive, mdiLoading } from '@mdi/js';
   import { onMount } from 'svelte';
+  import { slide } from 'svelte/transition';
 
   import Button from '../components/Button.svelte';
   import Icon from '../components/Icon.svelte';
@@ -17,6 +18,12 @@
 
   let selectedServer = null;
 
+  let changelogOpen = false;
+
+  function toggleChangelog() {
+    changelogOpen = !changelogOpen;
+  }
+
   function signIn() {
     gapi.auth2.getAuthInstance().signIn();
   }
@@ -99,4 +106,21 @@
     <span class="bg-background rounded-xl pr-2"><Icon path={mdiDiscord} /> Baruna#4422</span>
     Thanks😁!
   </div>
+  <div class="bg-item rounded-xl mb-4 p-4 text-white">
+    <p class="cursor-pointer" on:click={toggleChangelog}>
+      Changelog <Icon
+        className={`duration-100 ease-in ${changelogOpen ? 'transform rotate-180' : ''}`}
+        path={mdiChevronDown}
+      />
+    </p>
+    {#if changelogOpen}
+      <div transition:slide class="mt-4">
+        <pre class="bg-background rounded-xl py-2 px-4">2021/02/01 
+- Add detail to wish counter
+- Bug fixes</pre>
+        <pre class="bg-background rounded-xl py-2 px-4 mt-2">2021/01/12 
+- Add Ganyu</pre>
+      </div>
+    {/if}
+  </div>
 </div>