init

templates.js

@@ -0,0 +1,57 @@
+// templates.js
+const Templates = {
+  test: ()=>`
+    <div class="card artist-card">
+        <h1>Test</h1>
+    </div>
+  `,
+
+  home: (nowPlaying, upNext=[]) => `
+    <div class="card nowplaying-card">
+      <h2>Now Playing</h2>
+      ${Cards.TrackCard(nowPlaying)}
+    </div>
+    <div class="card upnext-card">
+      <h3>Up Next</h3>
+      <div class="upnext-list">
+        ${upNext.map(t => Cards.TrackCard(t)).join("")}
+      </div>
+    </div>
+  `,
+
+  search: (results) => `
+    <div class="card search-card">
+      <h2>Search Results</h2>
+      <div class="search-results">
+        ${results.map(r => {
+          if (r.type === "artist") return Cards.ArtistCard(r);
+          if (r.type === "playlist") return Cards.PlaylistCard(r);
+          if (r.type === "track") return Cards.TrackCard(r);
+          return "";
+        }).join("")}
+      </div>
+    </div>
+  `,
+
+  artist: (trackList) => `
+      ${Cards.TrackCard(trackList)}
+  `,
+
+  playlists: (playlists) => `
+    <div class="card playlists-card">
+      <h2>Playlists</h2>
+      <div class="playlist-list">
+        ${playlists.map(p => Cards.PlaylistCard(p)).join("")}
+      </div>
+    </div>
+  `,
+
+  modal: (track) => `
+    <div class="modal-content">
+      <h2>${track.name}</h2>
+      <p>${track.artist} — <em>${track.album}</em></p>
+      <button onclick="queueTrack('${track.uri}')">Add to Queue</button>
+      <button onclick="playNext('${track.uri}')">Play Next</button>
+    </div>
+  `
+};