From 332c408b89ddb198cba1af830deefb041203a981 Mon Sep 17 00:00:00 2001
From: Nathan Woodburn <github@nathan.woodburn.au>
Date: Tue, 28 Oct 2025 14:46:09 +1100
Subject: [PATCH] fix: Animation for spotify toggle

---
 templates/index.html | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index c63a127..46ea342 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -294,7 +294,7 @@ Check them out here!</blockquote><img class="img-fluid" src="/assets/img/pfront.
             <path fill-rule="evenodd" clip-rule="evenodd" d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM11 6C11 5.44772 10.5523 5 10 5C9.44771 5 9 5.44772 9 6V10C9 10.2652 9.10536 10.5196 9.29289 10.7071L12.1213 13.5355C12.5118 13.9261 13.145 13.9261 13.5355 13.5355C13.9261 13.145 13.9261 12.5118 13.5355 12.1213L11 9.58579V6Z" fill="currentColor"></path>
         </svg><span style="margin-left: 10px;font-family: 'Anonymous Pro', monospace;">{{time|safe}}</span></div><!-- Pop-out button for mobile -->
 <button id="spotify-toggle" style="
-    display: none;
+    display: block;
     position: fixed;
     bottom: 20px;
     right: 20px;
@@ -305,6 +305,8 @@ Check them out here!</blockquote><img class="img-fluid" src="/assets/img/pfront.
     background: none;
     cursor: pointer;
     padding: 0;
+    transition: transform 0.5s ease;
+    transform: translateX(200%); /* start hidden off-screen *
 ">
 <img src="/assets/img/external/spotify.png" alt="Spotify" style="
     width: 100%;
@@ -374,16 +376,17 @@ function isMobile() {
 function updateVisibility() {
     if(isMobile()){
         widget.style.transform = 'translateX(120%)'; // hidden off-screen
-        toggleBtn.style.display = 'block';
+        toggleBtn.style.transform = 'translateX(0)'; // visible
     } else {
         widget.style.transform = 'translateX(0)'; // visible
-        toggleBtn.style.display = 'none';
+        toggleBtn.style.transform = 'translateX(200%)'; // hidden off-screen
     }
 }
 
 // Toggle widget slide in/out on mobile
 toggleBtn.addEventListener('click', (e) => {
     widget.style.transform = 'translateX(0)'; // slide in
+    toggleBtn.style.transform = 'translateX(200%)'; // hide button
     e.stopPropagation();
 });
 
@@ -392,6 +395,7 @@ document.addEventListener('click', (e) => {
     if(isMobile()){
         if(!widget.contains(e.target) && e.target !== toggleBtn){
             widget.style.transform = 'translateX(120%)'; // slide out
+            toggleBtn.style.transform = 'translateX(0)'; // show button
         }
     }
 });
@@ -434,8 +438,10 @@ async function updateSpotifyWidget() {
         document.getElementById('spotify-song').textContent = track.song_name;
         document.getElementById('spotify-artist').textContent = track.artist;
         document.getElementById('spotify-album').textContent = track.album_name;
+        
+        // If first load and desktop, slide in the widget
         if (firstLoad) {
-            widget.style.transform = 'translateX(0)'; // slide in on first load            
+            updateVisibility();                   
         }
 
     } catch (err) {