Updating demo DB song # notice

Author: Jamesllllllllll

src/components/song-search-panel.tsx

@@ -274,6 +274,10 @@ export function SongSearchPanel(props: {
 
   const results =
     !queryTooShort && !requiresCoreSearchTerm ? (data?.results ?? []) : [];
+  const resolvedInfoNote = props.infoNote?.replace(
+    "{count}",
+    String(data?.total ?? 0)
+  );
   const totalPages = Math.max(
     1,
     Math.ceil((data?.total ?? 0) / (data?.pageSize ?? 25))
@@ -441,12 +445,12 @@ export function SongSearchPanel(props: {
                     {props.description}
                   </p>
                 ) : null}
-                {props.infoNote ? (
+                {resolvedInfoNote ? (
                   <div className="mt-4 rounded-[20px] border border-sky-400/30 bg-sky-500/10 px-4 py-3 text-sm text-sky-100">
                     <p className="font-semibold uppercase tracking-[0.18em] text-sky-200">
                       Note:
                     </p>
-                    <p className="mt-2">{props.infoNote}</p>
+                    <p className="mt-2">{resolvedInfoNote}</p>
                   </div>
                 ) : null}
               </div>

src/routes/$slug/index.tsx

@@ -206,6 +206,12 @@ function PublicChannelPage() {
         </div>
       </div>
 
+      <SongSearchPanel
+        title="Search to add a song"
+        description="Copy the request command and use it in Twitch chat."
+        placeholder={`Search songs for ${channelDisplayName}`}
+      />
+
       <Card>
         <CardHeader className="flex flex-row items-center justify-between gap-4">
           <div className="flex items-center gap-3">
@@ -302,12 +308,6 @@ function PublicChannelPage() {
           </CardContent>
         ) : null}
       </Card>
-
-      <SongSearchPanel
-        title="Search to add a song"
-        description="Copy the request command and use it in Twitch chat."
-        placeholder={`Search songs for ${channelDisplayName}`}
-      />
     </section>
   );
 }

src/routes/search.tsx

@@ -15,7 +15,7 @@ function SearchPage() {
     <SongSearchPanel
       eyebrow="Search"
       title="Songs"
-      infoNote="This demo only contains 50 songs."
+      infoNote="This demo only contains {count} songs."
       placeholder="Search by song title, artist or album"
     />
   );