Merge pull request #92 from Jamesllllllllll/feature/homepage-community-surfaces

Add homepage community pulse and stabilize the Twitch panel

Author: Jamesllllllllll

CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project are documented here.
 
+## [0.8.0] - 2026-04-15
+
+### Added
+- The homepage now highlights live streamers with a community pulse that shows daily request activity, artists in rotation, and songs currently being played, with quick links out to Twitch.
+
+### Changed
+- The live homepage section is easier to scan, with a stronger featured streamer layout and more compact supporting activity widgets.
+- The Twitch panel feels lighter and more focused, with quieter search behavior and faster playlist updates while a stream is live.
+
+### Fixed
+- Search and playlist views stay more responsive during broader song lookups and panel refreshes.
+
 ## [0.7.0] - 2026-04-14
 
 ### Added

docs/community-homepage-plan.md

@@ -0,0 +1,78 @@
+# Community Homepage Plan
+
+## Goal
+
+Make the home page feel like an active Rocksmith community instead of just a product landing page.
+
+The tone should stay celebratory and discovery-focused:
+
+- help viewers find active streamers quickly
+- help streamers feel momentum in their request flow
+- avoid turning the page into a hard leaderboard
+
+## Shipped MVP
+
+This pass adds a lightweight public community surface on the home page:
+
+- show all live RockList.Live channels instead of cutting the page off after a small fixed set
+- show the current song or next queued request on every live channel card
+- show `played today` counts on each live channel card
+- add a `Community pulse` section with:
+  - requests played today
+  - requesters active today
+  - songs in rotation today
+  - channels active today
+- add `Most played today` and `Artists in rotation` lists
+
+## Why This MVP Works
+
+- It uses data the app already exposes publicly through live channels and played-song history.
+- It adds movement and energy to the homepage without asking streamers to configure anything new.
+- It gives viewers a reason to browse beyond a single featured channel.
+
+## Good Next Expansions
+
+### Time ranges
+
+- add `Today / 7d / 30d` toggles to the public community module
+- keep `Today` as the default homepage view, and move heavier history to a dedicated community page later
+
+### Live discovery modules
+
+- `Now on stream`: a compact strip of the songs currently being played across live channels
+- `Freshly played`: the most recent completed songs from live channels
+- `Busy rooms`: channels with the most songs played today, framed as activity rather than ranking
+
+### Viewer-energy modules
+
+- `Requesters active today`: highlight how many distinct viewers participated
+- `First requests today`: celebrate newcomers joining the queue
+- `Returners`: light-touch recognition for viewers who keep showing up without creating a public leaderboard
+
+### Channel momentum modules
+
+- songs played this stream
+- current queue depth
+- how long the streamer has been live
+- whether the queue is moving quickly right now
+
+### Community flavor modules
+
+- top artists this week
+- most requested artists this week
+- genre or tuning waves when the catalog metadata makes that feel reliable
+- rotating highlights like `Acoustic hour`, `Bass-heavy night`, or `Throwback rotation` when enough signals exist
+
+## Guardrails
+
+- keep public stats limited to data that is already intentionally public
+- prefer “activity” and “discovery” framing over channel-vs-channel competition
+- avoid cluttering live channel cards with too many numbers
+- keep the home page fast even when many channels are live
+
+## Suggested Follow-up Split
+
+1. Home page community pulse and unlimited live channel discovery
+2. Dedicated `/community` or `/stats` page with time-range filters
+3. Private dashboard analytics for streamers
+4. Optional richer public channel modules on `/slug`

drizzle/0041_catalog_song_grouping_indexes.sql

@@ -0,0 +1,9 @@
+CREATE INDEX `catalog_songs_grouped_project_idx` ON `catalog_songs` (`grouped_project_id`);
+CREATE INDEX `catalog_songs_grouping_fallback_idx` ON `catalog_songs` (
+	CASE
+		WHEN trim(lower(coalesce(`artist_name`, ''))) LIKE 'the %'
+			THEN substr(trim(lower(coalesce(`artist_name`, ''))), 5)
+		ELSE trim(lower(coalesce(`artist_name`, '')))
+	END,
+	trim(lower(coalesce(`title`, '')))
+);

package-lock.json

@@ -2,7 +2,7 @@
   "name": "request-bot",
   "private": true,
   "type": "module",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "engines": {
     "node": ">=22"
   },

package.json

@@ -367,6 +367,7 @@ export type PlaylistManagementSurfaceProps = {
   playlistData?: PlaylistManagementSurfaceData | null;
   refetchIntervalMs?: number | false;
   staleTimeMs?: number;
+  invalidateOnMutationSuccess?: boolean;
   headerTitle?: string;
   headerDescription?: string;
   showAncillaryPanels?: boolean;
@@ -488,14 +489,16 @@ export function PlaylistManagementSurface(
 
   const manualSearchQuery = useQuery<ManualSearchData>({
     queryKey: ["playlist-manual-search", debouncedManualQuery],
-    queryFn: async () => {
+    queryFn: async ({ signal }) => {
       const params = new URLSearchParams({
         query: debouncedManualQuery.trim(),
         page: "1",
         pageSize: "6",
         field: "any",
       });
-      const response = await fetch(`/api/search?${params.toString()}`);
+      const response = await fetch(`/api/search?${params.toString()}`, {
+        signal,
+      });
       const body = (await response.json().catch(() => null)) as
         | SearchResponse
         | { message?: string }
@@ -776,9 +779,11 @@ export function PlaylistManagementSurface(
         setDebouncedManualQuery("");
         setManualRequesterLogin("");
       }
-      void queryClient.invalidateQueries({
-        queryKey: playlistQueryKey,
-      });
+      if (props.invalidateOnMutationSuccess ?? true) {
+        void queryClient.invalidateQueries({
+          queryKey: playlistQueryKey,
+        });
+      }
     },
     onSettled: () => {
       setPendingRowAction(null);
@@ -822,9 +827,11 @@ export function PlaylistManagementSurface(
     },
     onSuccess: () => {
       setPlaylistActionError(null);
-      void queryClient.invalidateQueries({
-        queryKey: playlistQueryKey,
-      });
+      if (props.invalidateOnMutationSuccess ?? true) {
+        void queryClient.invalidateQueries({
+          queryKey: playlistQueryKey,
+        });
+      }
     },
   });
 

src/components/playlist-management-surface.tsx

@@ -87,11 +87,13 @@ type SearchResponse = {
 };
 
 type SearchFilterOptionsResponse = {
+  catalogTotal: number;
   tunings: TuningOption[];
   years: number[];
 };
 
 type SearchFilterOptionsWireResponse = {
+  catalogTotal?: number;
   tunings: Array<TuningOption | string>;
   years: number[];
 };
@@ -125,6 +127,7 @@ function normalizeSearchFilterOptionsResponse(
 ): SearchFilterOptionsResponse {
   if (!input) {
     return {
+      catalogTotal: 0,
       tunings: [],
       years: [],
     };
@@ -156,6 +159,11 @@ function normalizeSearchFilterOptionsResponse(
   }
 
   return {
+    catalogTotal:
+      typeof input.catalogTotal === "number" &&
+      Number.isFinite(input.catalogTotal)
+        ? input.catalogTotal
+        : 0,
     tunings: [...tuningOptionsById.values()].sort((left, right) =>
       compareTuningIds(left.id, right.id)
     ),
@@ -314,6 +322,20 @@ export function SongSearchPanel(props: {
     [props.extraSearchParams]
   );
   const activePathFilters = debouncedAdvancedFilters.parts;
+  const hasCustomPathFilters = useMemo(() => {
+    const activePathKey = [...new Set(activePathFilters)].sort().join(",");
+    const defaultPathKey = [...normalizedDefaultPathFilters].sort().join(",");
+
+    return (
+      activePathKey !== defaultPathKey ||
+      debouncedAdvancedFilters.partsMatchMode !== defaultPathFilterMatchMode
+    );
+  }, [
+    activePathFilters,
+    debouncedAdvancedFilters.partsMatchMode,
+    defaultPathFilterMatchMode,
+    normalizedDefaultPathFilters,
+  ]);
   const activeNonPathFilterCount = useMemo(
     () =>
       [
@@ -402,15 +424,10 @@ export function SongSearchPanel(props: {
     () =>
       Boolean(
         debouncedQuery.trim() ||
-          Object.entries(debouncedAdvancedFilters).some(([key, value]) =>
-            key === "partsMatchMode"
-              ? false
-              : Array.isArray(value)
-                ? value.length > 0
-                : value.trim()
-          )
+          activeNonPathFilterCount > 0 ||
+          hasCustomPathFilters
       ),
-    [debouncedAdvancedFilters, debouncedQuery]
+    [activeNonPathFilterCount, debouncedQuery, hasCustomPathFilters]
   );
   const hasAdvancedFilter = useMemo(
     () =>
@@ -430,9 +447,9 @@ export function SongSearchPanel(props: {
   const searchEnabled = props.searchEnabled ?? true;
 
   const filterOptionsQuery = useQuery<SearchFilterOptionsResponse>({
-    queryKey: ["search-filter-options-v2"],
-    queryFn: async () => {
-      const response = await fetch("/api/search/filters");
+    queryKey: ["search-filter-options-v3"],
+    queryFn: async ({ signal }) => {
+      const response = await fetch("/api/search/filters", { signal });
       const body = (await response.json().catch(() => null)) as
         | SearchFilterOptionsWireResponse
         | { message?: string }
@@ -454,38 +471,29 @@ export function SongSearchPanel(props: {
     staleTime: 60 * 60 * 1000,
     gcTime: 60 * 60 * 1000,
   });
-
-  const shouldLoadCatalogTotal = Boolean(props.infoNote?.includes("{count}"));
-  const catalogTotalQuery = useQuery<Pick<SearchResponse, "total">>({
-    queryKey: ["song-search-total-count"],
-    queryFn: async () => {
-      const response = await fetch("/api/search?page=1&pageSize=1&field=any");
-      const body = (await response.json().catch(() => null)) as
-        | SearchResponse
-        | { message?: string }
-        | null;
-
-      if (!response.ok) {
-        throw new Error(
-          getUserFriendlySearchErrorMessage(
-            body && "message" in body ? body.message : null,
-            t("errors.searchFailed")
+  const hasMeaningfulExtraSearchParams = useMemo(
+    () =>
+      Boolean(
+        props.extraSearchParams &&
+          Object.entries(props.extraSearchParams).some(
+            ([key, value]) =>
+              value !== undefined &&
+              value !== false &&
+              key !== "channelSlug" &&
+              key !== "showBlacklisted"
           )
-        );
-      }
-
-      return { total: (body as SearchResponse).total };
-    },
-    enabled: shouldLoadCatalogTotal,
-    staleTime: 60 * 60 * 1000,
-    gcTime: 60 * 60 * 1000,
-  });
+      ),
+    [props.extraSearchParams]
+  );
+  const hasSearchIntent = hasSearchInput || hasMeaningfulExtraSearchParams;
 
   const searchQuery = useQuery<SearchResponse>({
     queryKey: ["song-search", searchParamsBaseKey, page],
-    enabled: searchEnabled && !queryTooShort,
-    queryFn: async (): Promise<SearchResponse> => {
-      const response = await fetch(`/api/search?${searchParams.toString()}`);
+    enabled: searchEnabled && !queryTooShort && hasSearchIntent,
+    queryFn: async ({ signal }): Promise<SearchResponse> => {
+      const response = await fetch(`/api/search?${searchParams.toString()}`, {
+        signal,
+      });
       const body = (await response.json().catch(() => null)) as
         | SearchResponse
         | { message?: string }
@@ -557,7 +565,7 @@ export function SongSearchPanel(props: {
   );
   const resolvedInfoNote = props.infoNote?.replace(
     "{count}",
-    String(catalogTotalQuery.data?.total ?? 0)
+    String(filterOptionsQuery.data?.catalogTotal ?? 0)
   );
   const summaryCount = props.useTotalForSummary
     ? (data?.total ?? 0)
@@ -1185,9 +1193,19 @@ export function SongSearchPanel(props: {
                   </div>
                 ) : null}
 
-                {!isLoading && !queryTooShort && visibleResults.length === 0 ? (
+                {!isLoading && !queryTooShort && !error && !hasSearchIntent ? (
+                  <div className="px-5 py-8 text-sm text-(--muted)">
+                    {t("states.startSearch")}
+                  </div>
+                ) : null}
+
+                {!isLoading &&
+                !queryTooShort &&
+                !error &&
+                hasSearchIntent &&
+                visibleResults.length === 0 ? (
                   <div className="px-5 py-8 text-sm text-(--muted)">
-                    {hasSearchInput
+                    {hasSearchInput || hasMeaningfulExtraSearchParams
                       ? t("states.emptyFiltered")
                       : t("states.emptyCatalog")}
                   </div>