Annotate templates with TODOs for markup replacement

To open source the project down the line, it makes sense to have either
everything custom or using OSS components in order to keep licensing as
simple as possible.

lib/music_library_web/live/artist_live/show.html.heex

@@ -60,6 +60,7 @@
     <h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
       {gettext("Collection")}
     </h2>
+    <%!-- TODO: replace with OSS version --%>
     <ul
       role="list"
       class="mt-4 grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8"
@@ -98,6 +99,7 @@
     <h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
       {gettext("Wishlist")}
     </h2>
+    <%!-- TODO: replace with OSS version --%>
     <ul
       role="list"
       class="mt-4 grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8"

lib/music_library_web/live/collection_live/index.html.heex

@@ -109,6 +109,7 @@
           </span>
         </p>
       </div>
+      <%!-- TODO: replace with OSS version --%>
       <div class="relative flex-none">
         <button
           type="button"

lib/music_library_web/live/collection_live/show.html.heex

@@ -70,7 +70,7 @@
     </nav>
   </div>
   <div>
-    <!-- TODO: extract to a component -->
+    <%!-- TODO: replace with OSS version --%>
     <dl class="mt-4 divide-y divide-zinc-100 dark:divide-slate-300/30">
       <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
         <dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">

lib/music_library_web/live/stats_live/index.html.heex

@@ -2,6 +2,7 @@
   <h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
     {gettext("Basics")}
   </h1>
+  <%!-- TODO: replace with OSS version --%>
   <dl class="mt-5 grid grid-cols-2 gap-5 sm:grid-cols-5">
     <.album_preview
       record={@latest_record}
@@ -21,6 +22,7 @@
   <h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
     {gettext("Formats")}
   </h1>
+  <%!-- TODO: replace with OSS version --%>
   <dl class={[
     "mt-5 grid divide-zinc-200 dark:divide-slate-300/50 overflow-hidden rounded-md bg-white dark:bg-zinc-800 shadow divide-x",
     stats_class(@collection_count_by_format)
@@ -45,6 +47,7 @@
   <h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
     {gettext("Types")}
   </h1>
+  <%!-- TODO: replace with OSS version --%>
   <dl class={[
     "mt-5 grid divide-zinc-200 dark:divide-slate-300/50 overflow-hidden rounded-md bg-white dark:bg-zinc-800 shadow divide-x",
     stats_class(@collection_count_by_type)
@@ -79,6 +82,7 @@
       <.icon name="hero-arrow-path" class="-mt-1 h-5 w-5" aria-hidden="true" data-slot="icon" />
     </button>
   </div>
+  <%!-- TODO: replace with OSS version --%>
   <ul
     id="scrobble-activity"
     role="list"

lib/music_library_web/live/wishlist_live/index.html.heex

@@ -109,6 +109,7 @@
           </span>
         </p>
       </div>
+      <%!-- TODO: replace with OSS version --%>
       <div class="relative flex-none">
         <button
           type="button"

lib/music_library_web/live/wishlist_live/show.html.heex

@@ -71,7 +71,7 @@
   </div>
 
   <div>
-    <!-- TODO: extract to a component -->
+    <%!-- TODO: replace with OSS version --%>
     <dl class="mt-4 divide-y divide-zinc-100 dark:divide-slate-300/30">
       <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
         <dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">