add: profile connections, spotify connection

crates/app/src/public/html/components.html

@@ -801,4 +801,50 @@ secondary=false, show_community=true) -%}
         </div>
     </div>
 </div>
-{%- endmacro %}
+{%- endmacro %} {% macro spotify_playing(state, size="60px") -%} {% if state and
+state.data %}
+<div class="card-nest">
+    <div class="card flex items-center justify-between gap-2 small">
+        <div class="flex items-center gap-2">
+            <b>Listening on</b>
+            {{ icon "spotify" }}
+        </div>
+
+        <span class="fade date short">{{ state.data.timestamp }}</span>
+    </div>
+
+    <div class="card secondary flex gap-2">
+        <a href="{{ state.external_urls.album }}">
+            <img
+                src="{{ state.external_urls.album_img }}"
+                alt="Album cover"
+                loading="lazy"
+                class="avatar"
+                style="--size: {{ size }}"
+            />
+        </a>
+
+        <div class="flex flex-col">
+            <h5 class="w-full">
+                <a href="{{ state.external_urls.track }}" class="flush"
+                    >{{ state.data.track }}</a
+                >
+            </h5>
+
+            <span class="fade"
+                ><a href="{{ state.external_urls.artist }}" class="flush"
+                    >{{ state.data.artist }}</a
+                ></span
+            >
+
+            <span
+                hook="spotify_time_text"
+                hook-arg:updated="{{ state.data.timestamp }}"
+                hook-arg:progress="{{ state.data.progress_ms }}"
+                hook-arg:duration="{{ state.data.duration_ms }}"
+                hook-arg:display="full"
+            ></span>
+        </div>
+    </div>
+</div>
+{% endif %} {%- endmacro %}