Improve mobile playlist and search UX (#31)

Author: Jamesllllllllll

src/app.css

@@ -644,7 +644,8 @@ h6 {
   .search-panel__row {
     grid-template-columns: minmax(0, 1fr) auto;
     grid-template-areas:
-      "main copy";
+      "main copy"
+      "main stats";
     gap: 0.75rem 1rem;
     padding-inline: 1rem;
     padding-block: 0.9rem;
@@ -655,8 +656,7 @@ h6 {
     grid-template-columns: minmax(0, 1fr);
     grid-template-areas:
       "song"
-      "paths"
-      "stats";
+      "paths";
     gap: 0.75rem;
   }
 
@@ -666,10 +666,12 @@ h6 {
 
   .search-panel__copy {
     grid-area: copy;
+    align-items: start;
   }
 
   .search-panel__copy > div {
     justify-content: flex-end;
+    min-width: max-content;
   }
 
   .search-panel__paths {
@@ -679,6 +681,7 @@ h6 {
   .search-panel__stats {
     grid-area: stats;
     text-align: right;
+    align-self: start;
   }
 
   .search-panel__command,

src/components/blacklist-panel.tsx

@@ -27,7 +27,7 @@ export function BlacklistPanel(props: {
   defaultOpen?: boolean;
 }) {
   const content = (
-    <CardContent className="grid items-start gap-6 lg:grid-cols-3">
+    <CardContent className="grid items-start gap-6 lg:grid-cols-2">
       <div className="grid content-start gap-3 self-start">
         {props.artists.length > 0 ? (
           <div className="overflow-hidden rounded-[20px] border border-(--border)">
@@ -49,27 +49,6 @@ export function BlacklistPanel(props: {
         )}
       </div>
 
-      <div className="grid content-start gap-3 self-start">
-        {(props.charters ?? []).length > 0 ? (
-          <div className="overflow-hidden rounded-[20px] border border-(--border)">
-            {(props.charters ?? []).map((charter, index) => (
-              <div
-                key={charter.charterId}
-                className={`px-4 py-2.5 text-sm ${
-                  index % 2 === 0 ? "bg-(--panel-soft)" : "bg-(--panel-muted)"
-                }`}
-              >
-                <p className="truncate text-(--text)">
-                  {charter.charterName} ({charter.charterId})
-                </p>
-              </div>
-            ))}
-          </div>
-        ) : (
-          <p className="text-sm text-(--muted)">No blacklisted charters.</p>
-        )}
-      </div>
-
       <div className="grid content-start gap-3 self-start">
         {props.songs.length > 0 ? (
           <div className="overflow-hidden rounded-[20px] border border-(--border)">

src/components/song-search-panel.tsx

@@ -229,8 +229,11 @@ function getRejectedSongMessage(input: {
   reason?: string;
   reasonCode?: string;
 }) {
-  if (input.reasonCode === "charter_blacklist") {
-    return `${mention(input.login)} this song cannot be played in this channel.`;
+  if (
+    input.reasonCode === "charter_blacklist" ||
+    input.reasonCode === "song_blacklist"
+  ) {
+    return `${mention(input.login)} I cannot add that song to the playlist.`;
   }
 
   return `${mention(input.login)} ${

src/lib/eventsub/chat-message.ts

@@ -2,18 +2,26 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
 import { AnimatePresence, motion } from "motion/react";
-import { useEffect } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { BlacklistPanel } from "~/components/blacklist-panel";
 import { PublicPlayedHistoryCard } from "~/components/public-played-history-card";
+import type {
+  SearchSong,
+  SearchSongResultState,
+} from "~/components/song-search-panel";
 import { SongSearchPanel } from "~/components/song-search-panel";
+import { Checkbox } from "~/components/ui/checkbox";
+import { Label } from "~/components/ui/label";
 import { formatSlugTitle, pageTitle } from "~/lib/page-title";
 import { getPickNumbersForQueuedItems } from "~/lib/pick-order";
-import { decodeHtmlEntities } from "~/lib/utils";
+import { cn, decodeHtmlEntities } from "~/lib/utils";
 
 type PublicPlaylistItem = {
   id: string;
   songTitle: string;
   songArtist?: string | null;
+  songCreator?: string | null;
+  songCatalogSourceId?: number | null;
   requestedByTwitchUserId?: string | null;
   requestedByLogin?: string | null;
   requestedByDisplayName?: string | null;
@@ -87,6 +95,7 @@ function toPlaylistItems(
 function PublicChannelPage() {
   const { slug } = Route.useParams();
   const queryClient = useQueryClient();
+  const [showBlacklisted, setShowBlacklisted] = useState(false);
   const { data, isLoading } = useQuery({
     queryKey: ["public-channel-page", slug],
     queryFn: async (): Promise<PublicChannelPageData> => {
@@ -145,6 +154,75 @@ function PublicChannelPage() {
   }, [queryClient, slug]);
 
   const channelDisplayName = data?.playlist?.channel?.displayName ?? slug;
+  const publicSearchResultFilter = useMemo(
+    () => (song: SearchSong) =>
+      showBlacklisted ||
+      getBlacklistReasons(
+        {
+          songCatalogSourceId: song.sourceId ?? null,
+          songArtist: song.artist ?? null,
+          songCreator: song.creator ?? null,
+        },
+        {
+          artists: data?.playlist.blacklistArtists ?? [],
+          charters: data?.playlist.blacklistCharters ?? [],
+          songs: data?.playlist.blacklistSongs ?? [],
+        }
+      ).length === 0,
+    [
+      data?.playlist.blacklistArtists,
+      data?.playlist.blacklistCharters,
+      data?.playlist.blacklistSongs,
+      showBlacklisted,
+    ]
+  );
+  const publicSearchResultState = useMemo(
+    () =>
+      (song: SearchSong): SearchSongResultState => {
+        const reasons = getBlacklistReasons(
+          {
+            songCatalogSourceId: song.sourceId ?? null,
+            songArtist: song.artist ?? null,
+            songCreator: song.creator ?? null,
+          },
+          {
+            artists: data?.playlist.blacklistArtists ?? [],
+            charters: data?.playlist.blacklistCharters ?? [],
+            songs: data?.playlist.blacklistSongs ?? [],
+          }
+        );
+
+        return {
+          disabled: reasons.length > 0,
+          reasons,
+        };
+      },
+    [
+      data?.playlist.blacklistArtists,
+      data?.playlist.blacklistCharters,
+      data?.playlist.blacklistSongs,
+    ]
+  );
+  const playlistItems = data?.playlist?.items ?? [];
+  const filteredItems = useMemo(
+    () =>
+      playlistItems.filter((item) => {
+        const blacklistReasons = getBlacklistReasons(item, {
+          artists: data?.playlist.blacklistArtists ?? [],
+          charters: data?.playlist.blacklistCharters ?? [],
+          songs: data?.playlist.blacklistSongs ?? [],
+        });
+        return showBlacklisted || blacklistReasons.length === 0;
+      }),
+    [
+      data?.playlist.blacklistArtists,
+      data?.playlist.blacklistCharters,
+      data?.playlist.blacklistSongs,
+      playlistItems,
+      showBlacklisted,
+    ]
+  );
+  const hiddenBlacklistedCount = playlistItems.length - filteredItems.length;
 
   return (
     <section className="grid gap-6">
@@ -161,13 +239,23 @@ function PublicChannelPage() {
         {isLoading ? <p className="mt-4 px-8">Loading playlist...</p> : null}
         <div className="mt-6 grid gap-3 px-8">
           <AnimatePresence initial={false} mode="popLayout">
-            {data?.playlist?.items?.map((item) => (
-              <PublicPlaylistRow key={item.id} item={item} />
+            {filteredItems.map((item) => (
+              <PublicPlaylistRow
+                key={item.id}
+                item={item}
+                blacklistReasons={getBlacklistReasons(item, {
+                  artists: data?.playlist.blacklistArtists ?? [],
+                  charters: data?.playlist.blacklistCharters ?? [],
+                  songs: data?.playlist.blacklistSongs ?? [],
+                })}
+              />
             ))}
           </AnimatePresence>
-          {!isLoading && !data?.playlist?.items?.length ? (
+          {!isLoading && !filteredItems.length ? (
             <p className="text-sm text-(--muted)">
-              This playlist is empty right now.
+              {playlistItems.length > 0 && !showBlacklisted
+                ? "Only blacklisted songs are in the queue right now."
+                : "This playlist is empty right now."}
             </p>
           ) : null}
         </div>
@@ -177,21 +265,48 @@ function PublicChannelPage() {
         title="Search to add a song"
         description="Copy the request command and use it in Twitch chat."
         placeholder={`Search songs for ${channelDisplayName}`}
+        resultFilter={publicSearchResultFilter}
+        resultState={publicSearchResultState}
+        advancedFiltersContent={
+          <div className="inline-flex flex-wrap items-center gap-3 rounded-full border border-(--border) bg-(--panel) px-4 py-2.5">
+            <Checkbox
+              id="show-blacklisted-public-playlist"
+              checked={showBlacklisted}
+              onCheckedChange={(checked) =>
+                setShowBlacklisted(checked === true)
+              }
+            />
+            <Label
+              htmlFor="show-blacklisted-public-playlist"
+              className="cursor-pointer text-sm font-medium text-(--text)"
+            >
+              Show blacklisted songs
+            </Label>
+            {!showBlacklisted && hiddenBlacklistedCount > 0 ? (
+              <span className="text-xs text-(--muted)">
+                Hiding {hiddenBlacklistedCount}
+              </span>
+            ) : null}
+          </div>
+        }
       />
 
       <BlacklistPanel
         artists={data?.playlist.blacklistArtists ?? []}
         charters={data?.playlist.blacklistCharters ?? []}
         songs={data?.playlist.blacklistSongs ?? []}
-        description="These exact artist IDs, charter IDs, and track IDs are blocked for requests in this channel."
+        description="These exact artist IDs and track IDs are blocked for requests in this channel."
       />
 
       <PublicPlayedHistoryCard slug={slug} />
     </section>
   );
 }
 
-function PublicPlaylistRow(props: { item: EnrichedPublicPlaylistItem }) {
+function PublicPlaylistRow(props: {
+  item: EnrichedPublicPlaylistItem;
+  blacklistReasons: string[];
+}) {
   const requesterName =
     props.item.requestedByDisplayName ??
     props.item.requestedByLogin ??
@@ -210,7 +325,12 @@ function PublicPlaylistRow(props: { item: EnrichedPublicPlaylistItem }) {
       animate={{ opacity: 1, y: 0, scale: 1 }}
       exit={{ opacity: 0, y: -12, scale: 0.985 }}
       transition={publicPlaylistItemTransition}
-      className="rounded-[24px] border border-(--border) bg-(--panel-soft) px-5 py-4"
+      className={cn(
+        "rounded-[24px] border bg-(--panel-soft) px-5 py-4",
+        props.blacklistReasons.length > 0
+          ? "border-amber-400/35 bg-amber-500/8"
+          : "border-(--border)"
+      )}
     >
       <div className="flex items-start gap-4">
         <StatusColumn
@@ -228,6 +348,9 @@ function PublicPlaylistRow(props: { item: EnrichedPublicPlaylistItem }) {
             {props.item.pickNumber && props.item.pickNumber <= 3 ? (
               <PickBadge pickNumber={props.item.pickNumber} />
             ) : null}
+            {props.blacklistReasons.map((reason) => (
+              <BlacklistReasonBadge key={reason} reason={reason} />
+            ))}
           </div>
         </div>
       </div>
@@ -308,3 +431,63 @@ function PickBadge(props: { pickNumber: number }) {
     </span>
   );
 }
+
+function BlacklistReasonBadge(props: { reason: string }) {
+  return (
+    <span className="inline-flex items-center rounded-full border border-amber-400/35 bg-amber-500/12 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">
+      {props.reason}
+    </span>
+  );
+}
+
+function normalizeBlacklistValue(value?: string | null) {
+  return value?.trim().toLowerCase() ?? "";
+}
+
+function getBlacklistReasons(
+  item: {
+    songCatalogSourceId?: number | null;
+    songArtist?: string | null;
+    songCreator?: string | null;
+  },
+  blacklist: {
+    artists: Array<{ artistId: number; artistName: string }>;
+    charters: Array<{ charterId: number; charterName: string }>;
+    songs: Array<{
+      songId: number;
+      songTitle: string;
+      artistName?: string | null;
+    }>;
+  }
+) {
+  const reasons: string[] = [];
+  const artistName = normalizeBlacklistValue(item.songArtist);
+  const creatorName = normalizeBlacklistValue(item.songCreator);
+
+  if (
+    item.songCatalogSourceId != null &&
+    blacklist.songs.some((song) => song.songId === item.songCatalogSourceId)
+  ) {
+    reasons.push("Song blacklisted");
+  }
+
+  if (
+    artistName &&
+    blacklist.artists.some(
+      (artist) => normalizeBlacklistValue(artist.artistName) === artistName
+    )
+  ) {
+    reasons.push("Artist blacklisted");
+  }
+
+  if (
+    creatorName &&
+    blacklist.charters.some(
+      (charter) => normalizeBlacklistValue(charter.charterName) === creatorName
+    )
+  ) {
+    reasons.push("Creator blacklisted");
+  }
+
+  return reasons;
+}