From b823995f291942102cff6b54c086d43470794ef0 Mon Sep 17 00:00:00 2001
From: Ole-Martin Bratteng <1681525+omBratteng@users.noreply.github.com>
Date: Fri, 10 Oct 2025 20:40:55 +0200
Subject: [PATCH] feat: add trending and popular user sources

---
 packages/shared/src/graphql/sources.ts  |  6 ++++++
 packages/webapp/pages/sources/index.tsx | 18 ++++++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/packages/shared/src/graphql/sources.ts b/packages/shared/src/graphql/sources.ts
index c6758fb3ab..f958983401 100644
--- a/packages/shared/src/graphql/sources.ts
+++ b/packages/shared/src/graphql/sources.ts
@@ -147,6 +147,12 @@ export const SOURCE_DIRECTORY_QUERY = gql`
     topVideoSources {
       ...SourceDirectoryInfo
     }
+    trendingUserSources {
+      ...SourceDirectoryInfo
+    }
+    popularUserSources {
+      ...SourceDirectoryInfo
+    }
   }
   ${SOURCE_DIRECTORY_INFO_FRAGMENT}
 `;
diff --git a/packages/webapp/pages/sources/index.tsx b/packages/webapp/pages/sources/index.tsx
index 2dab1badd6..1bf375d76e 100644
--- a/packages/webapp/pages/sources/index.tsx
+++ b/packages/webapp/pages/sources/index.tsx
@@ -37,6 +37,8 @@ interface SourcesPageProps {
   trendingSources: Source[];
   popularSources: Source[];
   topVideoSources: Source[];
+  trendingUserSources: Source[];
+  popularUserSources: Source[];
 }
 
 const SourcesPage = ({
@@ -44,6 +46,8 @@ const SourcesPage = ({
   trendingSources,
   popularSources,
   topVideoSources,
+  trendingUserSources,
+  popularUserSources,
 }: SourcesPageProps): ReactElement => {
   const { isFallback: isLoading } = useRouter();
   const { openModal } = useLazyModal();
@@ -89,6 +93,16 @@ const SourcesPage = ({
           items={topVideoSources}
           isLoading={isLoading}
         />
+        <SourceTopList
+          containerProps={{ title: 'Trending user sources' }}
+          items={trendingUserSources}
+          isLoading={isLoading}
+        />
+        <SourceTopList
+          containerProps={{ title: 'Popular user sources' }}
+          items={popularUserSources}
+          isLoading={isLoading}
+        />
       </div>
     </PageWrapperLayout>
   );
@@ -118,6 +132,8 @@ export async function getStaticProps(): Promise<
         trendingSources: res.trendingSources,
         popularSources: res.popularSources,
         topVideoSources: res.topVideoSources,
+        trendingUserSources: res.trendingUserSources,
+        popularUserSources: res.popularUserSources,
       },
       revalidate: 60,
     };
@@ -134,6 +150,8 @@ export async function getStaticProps(): Promise<
           trendingSources: [],
           popularSources: [],
           topVideoSources: [],
+          trendingUserSources: [],
+          popularUserSources: [],
         },
         revalidate: 60,
       };