Resolve shot's comments (#205)

* feat: add name and tag validation to create

* feat: add no activity data in activity tab

* add coming soon sections for profile page

* feat: clicking on leaderboard feed hashtag will redirect to that feed

* fix: keeps name on start when disable feed names collapse

* fix: rsbuild

* fix: add routegen to prettier ignore

* fix: add ability to navigate to collapsed feeds in leaderboard

* add ability to expand or collapse all

* fix: rsbuild

* adjustments

* nitpicks

---------

Co-authored-by: Elliot Braem <elliot@ejlbraem.com>

Author: itexpert120

apps/app/src/components/Leaderboard.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
 import { LeaderboardEntry } from "../lib/api";
 import { Container } from "./Container";
 import { Hero } from "./Hero";
@@ -33,6 +34,8 @@ export default React.memo(function Leaderboard({
     handleTimeDropdownToggle,
     handleFeedDropdownClose,
     handleTimeDropdownClose,
+    expandAllRows,
+    collapseAllRows,
     feedDropdownRef,
     timeDropdownRef,
     table,
@@ -63,6 +66,25 @@ export default React.memo(function Leaderboard({
           timeDropdownRef={timeDropdownRef}
         />
 
+        {hasData && (
+          <div className="flex justify-end gap-2 mb-4">
+            <button
+              onClick={expandAllRows}
+              className="flex items-center gap-1.5 px-3 py-2 text-sm border border-neutral-300 rounded-md bg-white hover:bg-neutral-50 transition-colors text-[#111111]"
+            >
+              <ChevronDown className="h-4 w-4" />
+              Expand All
+            </button>
+            <button
+              onClick={collapseAllRows}
+              className="flex items-center gap-1.5 px-3 py-2 text-sm border border-neutral-300 rounded-md bg-white hover:bg-neutral-50 transition-colors text-[#111111]"
+            >
+              <ChevronUp className="h-4 w-4" />
+              Collapse All
+            </button>
+          </div>
+        )}
+
         <LeaderboardTable
           table={table}
           isLoading={isLoading}

apps/app/src/components/coming-soon.tsx

@@ -0,0 +1,53 @@
+import { Clock, Sparkles } from "lucide-react";
+import { Card } from "./ui/card";
+import { Badge } from "./ui/badge";
+
+interface ComingSoonProps {
+  title: string;
+  description?: string;
+  features?: string[];
+}
+
+export function ComingSoon({ title, description, features }: ComingSoonProps) {
+  return (
+    <Card className="p-6 space-y-6">
+      <div className="text-center space-y-4">
+        <div className="flex items-center justify-center space-x-2">
+          <Sparkles className="h-8 w-8" />
+          <h2 className="text-2xl font-semibold">{title}</h2>
+        </div>
+
+        <Badge
+          variant="secondary"
+          className="flex items-center space-x-1 w-fit mx-auto"
+        >
+          <Clock className="h-3 w-3" />
+          <span>Coming Soon</span>
+        </Badge>
+
+        {description && (
+          <p className="text-gray-600 dark:text-gray-400 max-w-md mx-auto">
+            {description}
+          </p>
+        )}
+      </div>
+
+      {features && features.length > 0 && (
+        <div className="space-y-3">
+          <h3 className="text-lg font-medium text-center">What to expect:</h3>
+          <ul className="space-y-2 max-w-md mx-auto">
+            {features.map((feature, index) => (
+              <li
+                key={index}
+                className="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400"
+              >
+                <div className="w-1.5 h-1.5 bg-blue-500 rounded-full flex-shrink-0" />
+                <span>{feature}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </Card>
+  );
+}

apps/app/src/components/leaderboard/LeaderboardColumns.tsx

@@ -2,6 +2,7 @@ import { ChevronUp } from "lucide-react";
 import { createColumnHelper } from "@tanstack/react-table";
 import { LeaderboardEntry } from "../../lib/api";
 import { UserLink } from "../FeedItem";
+import { Link } from "@tanstack/react-router";
 
 export interface ExtendedLeaderboardEntry extends LeaderboardEntry {
   originalRank: number;
@@ -88,14 +89,20 @@ export function createLeaderboardColumns(
           <div className="flex flex-col min-h-[32px] justify-center">
             <div className="flex items-center gap-2">
               {feedSubmissions && feedSubmissions.length > 0 && (
-                <div className="flex items-center justify-between gap-1 border border-neutral-400 px-2 py-1 rounded-md w-[150px] min-w-0">
-                  <span className="text-sm truncate flex-shrink">
-                    #{feedSubmissions[0].feedId}
-                  </span>
-                  <span className="text-sm whitespace-nowrap flex-shrink-0">
-                    {feedSubmissions[0].count}/{feedSubmissions[0].totalInFeed}
-                  </span>
-                </div>
+                <Link
+                  to={"/feed/$feedId"}
+                  params={{ feedId: feedSubmissions[0].feedId }}
+                >
+                  <div className="flex items-center justify-between gap-1 border border-neutral-400 px-2 py-1 rounded-md w-[150px] min-w-0">
+                    <span className="text-sm truncate flex-shrink">
+                      #{feedSubmissions[0].feedId}
+                    </span>
+                    <span className="text-sm whitespace-nowrap flex-shrink-0">
+                      {feedSubmissions[0].count}/
+                      {feedSubmissions[0].totalInFeed}
+                    </span>
+                  </div>
+                </Link>
               )}
 
               {feedSubmissions && feedSubmissions.length > 1 && (
@@ -118,14 +125,16 @@ export function createLeaderboardColumns(
               <div className="flex flex-col gap-2 mt-2 pl-0">
                 {feedSubmissions.slice(1).map((feed, feedIndex) => (
                   <div key={feedIndex} className="flex items-center">
-                    <div className="flex items-center gap-1 border border-neutral-400 px-2 py-1 rounded-md justify-between w-[150px] min-w-0">
-                      <span className="text-sm truncate flex-shrink">
-                        #{feed.feedId}
-                      </span>
-                      <span className="text-sm whitespace-nowrap flex-shrink-0">
-                        {feed.count}/{feed.totalInFeed}
-                      </span>
-                    </div>
+                    <Link to={"/feed/$feedId"} params={{ feedId: feed.feedId }}>
+                      <div className="flex items-center gap-1 border border-neutral-400 px-2 py-1 rounded-md justify-between w-[150px] min-w-0">
+                        <span className="text-sm truncate flex-shrink">
+                          #{feed.feedId}
+                        </span>
+                        <span className="text-sm whitespace-nowrap flex-shrink-0">
+                          {feed.count}/{feed.totalInFeed}
+                        </span>
+                      </div>
+                    </Link>
                   </div>
                 ))}
               </div>

apps/app/src/components/leaderboard/LeaderboardFilters.tsx

@@ -46,7 +46,7 @@ export function LeaderboardFilters({
   timeDropdownRef,
 }: LeaderboardFiltersProps) {
   return (
-    <div className="flex flex-col md:flex-row max-w-[400px] md:max-w-screen-xl md:w-full mx-auto justify-between items-center mb-6 gap-4 py-8">
+    <div className="flex flex-col md:flex-row max-w-[400px] md:max-w-screen-xl md:w-full mx-auto justify-between items-center gap-4 pt-8 pb-4">
       <div className="relative w-full md:w-auto">
         <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#a3a3a3] h-4 w-4" />
         <input

apps/app/src/components/leaderboard/LeaderboardTable.tsx

@@ -84,7 +84,7 @@ export function LeaderboardTable({
                     {row.getVisibleCells().map((cell) => (
                       <TableCell
                         key={cell.id}
-                        className="py-2 px-2 align-middle"
+                        className="py-2 px-2 align-baseline"
                       >
                         {flexRender(
                           cell.column.columnDef.cell,

apps/app/src/components/profile/activity/index.tsx

@@ -80,6 +80,7 @@ export function ProfileActivity() {
   // );
 
   // const transformedActivity = userActivity?.map(transformActivityData);
+  const hasData = false; // Currently no data is loaded
 
   return (
     <div>
@@ -94,10 +95,15 @@ export function ProfileActivity() {
           </div>
           <div className="w-full border-t border-dashed border-neutral-300 my-1"></div>
           {/* <ActivityTable data={transformedActivity} /> */}
+          {!hasData && (
+            <div className="p-8 text-center text-gray-500">
+              No activity data available
+            </div>
+          )}
         </CardContent>
       </Card>
 
-      <PaginationControls />
+      {hasData && <PaginationControls />}
     </div>
   );
 }

apps/app/src/hooks/useLeaderboard.ts

@@ -86,6 +86,10 @@ export function useLeaderboard(
     );
   }, []);
 
+  const collapseAllRows = useCallback(() => {
+    setExpandedRows([]);
+  }, []);
+
   const handleSearch = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(e.target.value);
   }, []);
@@ -137,6 +141,15 @@ export function useLeaderboard(
     });
   }, [filteredLeaderboard, leaderboard]);
 
+  const expandAllRows = useCallback(() => {
+    if (!filteredLeaderboardWithRanks) return;
+    const allRowIndices = Array.from(
+      { length: filteredLeaderboardWithRanks.length },
+      (_, i) => i,
+    );
+    setExpandedRows(allRowIndices);
+  }, [filteredLeaderboardWithRanks]);
+
   const columns = useMemo(() => {
     return createLeaderboardColumns(expandedRows, toggleRow);
   }, [expandedRows, toggleRow]);
@@ -159,13 +172,16 @@ export function useLeaderboard(
     showTimeDropdown,
     feeds,
     timeOptions,
+    expandedRows,
 
     // Handlers
     handleSearch,
     handleFeedDropdownToggle,
     handleTimeDropdownToggle,
     handleFeedDropdownClose,
     handleTimeDropdownClose,
+    expandAllRows,
+    collapseAllRows,
 
     // Refs
     feedDropdownRef,

apps/app/src/routes/_layout/create/feed/index.tsx

@@ -1,5 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
+import { useState } from "react";
 import { ImageUpload } from "@/components/ImageUpload";
 import { Button } from "@/components/ui/button";
 import {
@@ -43,6 +44,7 @@ function BasicInformationComponent() {
   const search = Route.useSearch();
   const { feedConfig, setValues } = useFeedCreationStore();
   const queryClient = useQueryClient();
+  const [isValidatingId, setIsValidatingId] = useState(false);
 
   const form = useForm<FormValues>({
     resolver: zodResolver(BasicInformationFormSchema),
@@ -66,6 +68,7 @@ function BasicInformationComponent() {
       form.clearErrors("id");
       return;
     }
+    setIsValidatingId(true);
     try {
       const data = await queryClient.fetchQuery({
         queryKey: ["feed-details", id],
@@ -83,6 +86,8 @@ function BasicInformationComponent() {
       }
     } catch {
       form.clearErrors("id");
+    } finally {
+      setIsValidatingId(false);
     }
   };
 
@@ -173,8 +178,15 @@ function BasicInformationComponent() {
               )}
             />
             <div className="flex justify-end">
-              <Button type="submit" disabled={form.formState.isSubmitting}>
-                {form.formState.isSubmitting ? "..." : "Next"}
+              <Button
+                type="submit"
+                disabled={form.formState.isSubmitting || isValidatingId}
+              >
+                {form.formState.isSubmitting
+                  ? "..."
+                  : isValidatingId
+                    ? "Validating..."
+                    : "Next"}
               </Button>
             </div>
           </form>

apps/app/src/routes/_layout/profile/settings/notifications.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { Card } from "../../../../components/ui/card";
+import { ComingSoon } from "@/components/coming-soon";
 
 export const Route = createFileRoute("/_layout/profile/settings/notifications")(
   {
@@ -9,10 +9,16 @@ export const Route = createFileRoute("/_layout/profile/settings/notifications")(
 
 function NotificationsComponent() {
   return (
-    <Card className="p-6 space-y-6">
-      <h2 className="text-2xl font-semibold">Notification Settings</h2>
-      <p>Manage your notification preferences here.</p>
-      {/* Add notification settings form or options here */}
-    </Card>
+    <ComingSoon
+      title="Notification Settings"
+      description="Stay in the loop with customizable notifications for your curated content and community activity."
+      features={[
+        "Email notifications for new submissions and approvals",
+        "Push notifications for real-time updates",
+        "Digest settings for weekly summaries",
+        "Custom notification schedules",
+        "Fine-grained notification categories",
+      ]}
+    />
   );
 }

apps/app/src/routes/_layout/profile/settings/preferences.tsx

@@ -1,16 +1,22 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { Card } from "../../../../components/ui/card";
+import { ComingSoon } from "@/components/coming-soon";
 
 export const Route = createFileRoute("/_layout/profile/settings/preferences")({
   component: PreferencesComponent,
 });
 
 function PreferencesComponent() {
   return (
-    <Card className="p-6 space-y-6">
-      <h2 className="text-2xl font-semibold">User Preferences</h2>
-      <p>Set your preferences for the application.</p>
-      {/* Add user preferences form or options here */}
-    </Card>
+    <ComingSoon
+      title="Preferences Settings"
+      description="Customize your experience with personalized preferences for content, privacy, and accessibility settings."
+      features={[
+        "Content preferences for personalized feeds",
+        "Notification preferences for updates",
+        "Privacy settings for your account",
+        "Language and region settings",
+        "Accessibility options",
+      ]}
+    />
   );
 }