add top communities status bar

Author: James-Kua

src/components/TopCommunitiesStatusBar.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+interface TopCommunitiesStatusBarProps {
+  topCommunities: [string, number][];
+}
+
+const TopCommunitiesStatusBar: React.FC<TopCommunitiesStatusBarProps> = ({ topCommunities }) => {
+  if (topCommunities.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 bg-slate-200 dark:bg-neutral-900 py-2 border-t border-gray-300 dark:border-gray-700 text-sm z-40 shadow-lg hidden md:block">
+      <div className="max-w-[95vw] mx-auto flex items-center justify-center gap-x-4 px-4 overflow-x-auto whitespace-nowrap hide-scrollbar">
+        <span className="font-bold text-gray-800 dark:text-gray-200 shrink-0">Top Communities:</span>
+        {topCommunities.map(([community, count]) => (
+          <React.Fragment key={community}>
+            <a href={`/r/${community}`} className="shrink-0 flex items-center gap-1 px-2 py-0.5 rounded bg-zinc-300/70 dark:bg-zinc-800/70 text-[11px] text-zinc-700 dark:text-zinc-400 hover:text-white hover:bg-zinc-700/70 transition-colors">
+              <span>r/</span>
+              <span>{community}</span>
+              <span className="text-zinc-600 text-[10px]">{count}</span>
+            </a>
+          </React.Fragment>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default TopCommunitiesStatusBar;

src/components/UserPost.tsx

@@ -19,6 +19,9 @@ import SecureMediaEmbed from "./SecureMediaEmbed";
 import Thumbnail from "./Thumbnail";
 import { postTypeOptions } from "../utils/timeOptions";
 import SegmentedControl from "./SegmentedControl";
+import TopCommunitiesStatusBar from "./TopCommunitiesStatusBar";
+
+const NUM_TOP_COMMUNITIES = 6;
 
 const columnClasses: { [key: number]: string } = {
   1: "lg:columns-1",
@@ -52,6 +55,19 @@ const UserPost: React.FC<UserPostProps> = memo(({ username }) => {
     return posts.filter((post) => getPostType(post) === postTypeFilter);
   }, [posts, comments, postTypeFilter, activeTab]);
 
+  const topCommunities = useMemo(() => {
+    const communityCounts: { [key: string]: number } = {};
+
+    [...posts, ...comments].forEach((item) => {
+      if (item.subreddit) {
+        communityCounts[item.subreddit] = (communityCounts[item.subreddit] || 0) + 1;
+      }
+    });
+
+    const sortedCommunities = Object.entries(communityCounts).sort(([, countA], [, countB]) => countB - countA);
+    return sortedCommunities.slice(0, NUM_TOP_COMMUNITIES);
+  }, [posts, comments]);
+
   const fetchPosts = useCallback(() => {
     if (!hasMore) return;
 
@@ -271,6 +287,7 @@ const UserPost: React.FC<UserPostProps> = memo(({ username }) => {
           ))}
         </div>
         <div ref={sentinel} className="h-1"></div>
+        <TopCommunitiesStatusBar topCommunities={topCommunities} />
       </div>
     </div>
   );