feat: show comments on track page

src/lib/server/db/index.ts

@@ -22,6 +22,15 @@ export interface Database {
     producer: {
       username: string;
     };
+    versions: {
+      comments: {
+        createdAt: Date;
+        content: string;
+        author: {
+          username: string;
+        };
+      }[];
+    }[];
   } | null>;
   createTrack: (producerId: string, title: string, objectKey: string) => Promise<Track>;
   createTrackVersion: (trackId: number) => Promise<TrackVersion>;

src/lib/server/db/prisma.ts

@@ -75,6 +75,24 @@ export class DatabasePrisma implements Database {
           select: {
             username: true
           }
+        },
+        versions: {
+          orderBy: {
+            id: 'desc'
+          },
+          select: {
+            comments: {
+              select: {
+                content: true,
+                createdAt: true,
+                author: {
+                  select: {
+                    username: true
+                  }
+                }
+              }
+            }
+          }
         }
       },
       where: {

src/routes/track/[slug]/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Comment from '$lib/components/Comment.svelte';
   export let data;
   let { track } = data;
 </script>
@@ -11,3 +12,27 @@
   <h1>{track.title}</h1>
   <h2>by {track.producer.username}</h2>
 </hgroup>
+
+<section>
+  <h2>Comments</h2>
+
+  {#each track.versions as version, versionIndex}
+    <!-- Automatically open the latest version's comments -->
+    <details open={versionIndex + 1 === track.versions.length}>
+      <summary>Version {versionIndex + 1}</summary>
+
+      {#each version.comments as comment, commentIndex}
+        <Comment
+          content={comment.content}
+          author={comment.author.username}
+          createdAt={comment.createdAt}
+        />
+
+        <!-- Do not print the line on the last comment -->
+        {#if commentIndex + 1 !== version.comments.length}
+          <hr />
+        {/if}
+      {/each}
+    </details>
+  {/each}
+</section>