Merge pull request #458 from CodebilityDev/dev

nov 17 updates

Author: yyyort

apps/codebility/app/auth/onboarding/OnboardingStepper.tsx

@@ -5,6 +5,7 @@ import { cn } from "@/lib/utils";
 import { Check } from "lucide-react";
 
 // Section configuration - maps to each wrapper component
+// Line 9-17: Section labels array
 const SECTIONS = [
   { id: "about-section", label: "About Us" },
   { id: "software", label: "Software Development" },
@@ -13,7 +14,7 @@ const SECTIONS = [
   { id: "house-rules", label: "House Rules" },
   { id: "team", label: "Meet the Team" },
   { id: "partners", label: "Our Partners" },
-  { id: "welcome", label: "Welcome Aboard" },
+  { id: "welcome", label: "Signup Now!" }, // ✅ CHANGED: "Welcome Aboard" → "Signup Now!"
 ];
 
 export default function OnboardingStepper() {
@@ -119,12 +120,15 @@ export default function OnboardingStepper() {
 
                 {/* Enhanced tooltip label on hover */}
                 <div className="pointer-events-none absolute left-8 flex items-center gap-2">
-                  <div className="h-px w-3 bg-gradient-to-r from-gray-400 to-transparent opacity-0 transition-all duration-200 group-hover:w-4 group-hover:opacity-100 dark:from-gray-600" />
+                  <div className={cn(
+                    "h-px w-3 bg-gradient-to-r from-gray-400 to-transparent transition-all duration-200 dark:from-gray-600",
+                    (isLast || isActive) ? "w-4 opacity-100" : "opacity-0 group-hover:w-4 group-hover:opacity-100"
+                  )} />
                   <span
                     className={cn(
                       "whitespace-nowrap rounded-lg px-4 py-2 text-sm font-medium shadow-xl backdrop-blur-sm transition-all duration-200",
                       "border border-gray-200 bg-white/95 text-gray-900 dark:border-gray-700 dark:bg-gray-800/95 dark:text-white",
-                      "opacity-0 -translate-x-2 group-hover:translate-x-0 group-hover:opacity-100",
+                      (isLast || isActive) ? "translate-x-0 opacity-100" : "opacity-0 -translate-x-2 group-hover:translate-x-0 group-hover:opacity-100",
                       isActive && "border-blue-500/20 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-950/50 dark:to-purple-950/50"
                     )}
                   >

apps/codebility/app/auth/onboarding/page.tsx

@@ -1,7 +1,7 @@
-// app/auth/onboarding/page.tsx
 "use client";
 
 import { useRef } from "react";
+import { useRouter } from "next/navigation";
 import ExpectSectionWrapper from "./ExpectSectionWrapper";
 import HouseRulesSectionWrapper from "./HouseRulesSectionWrapper";
 import OnboardingClientWrapper from "./OnboardingClientWrapper";
@@ -11,13 +11,20 @@ import RoadMapWrapper from "./RoadMapSectionWrapper";
 import SoftwareSectionWrapper from "./SoftwareSectionWrapper";
 import TeamSectionWrapper from "./TeamSectionWrapper";
 import WellcomeSectionWrapper from "./WellcomeSectionWrapper";
+import { Button } from "@codevs/ui/button";
 
 export default function OnboardingPage() {
   const roadmapRef = useRef<HTMLDivElement>(null);
+  const router = useRouter();
+
+  // Handle mobile signup button click
+  const handleSignupClick = () => {
+    router.push('/auth/sign-up');
+  };
 
   return (
     <main className="relative min-h-screen">
-      {/* Vertical stepper navigation */}
+      {/* Vertical stepper navigation (desktop only) */}
       <OnboardingStepper />
 
       <OnboardingClientWrapper />
@@ -50,6 +57,36 @@ export default function OnboardingPage() {
       <section id="welcome">
         <WellcomeSectionWrapper />
       </section>
+
+      {/* ✅ NEW: Mobile-only persistent signup button (lines 48-67) */}
+      <div className="fixed bottom-6 right-6 z-50 lg:hidden">
+        <Button
+          onClick={handleSignupClick}
+          className="
+            group
+            relative
+            overflow-hidden
+            rounded-full
+            bg-gradient-to-br from-cyan-500 via-blue-600 to-purple-600
+            px-6 py-3
+            font-semibold text-white
+            shadow-2xl shadow-blue-500/30
+            transition-all duration-300
+            hover:scale-105 hover:shadow-blue-500/50
+            active:scale-95
+            focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2
+          "
+          aria-label="Go to signup page"
+        >
+          {/* Animated gradient background on hover */}
+          <span className="absolute inset-0 bg-gradient-to-br from-cyan-400 via-blue-500 to-purple-500 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+          
+          {/* Button text */}
+          <span className="relative z-10 flex items-center gap-2">
+            Signup Now!
+          </span>
+        </Button>
+      </div>
     </main>
   );
 }

apps/codebility/app/home/applicants/_service/emailAction.ts

@@ -20,7 +20,7 @@ export const sendMultipleTestReminderEmail = async (emails: string[]) => {
             This is a friendly reminder to complete your application process with Codebility.
 
             Steps to complete your application:
-            1. Visit and Sign In to our and website: https://www.codebility.tech/careers
+            1. Visit and Sign In to our website: https://www.codebility.tech/auth/sign-in
             2. Once Signed In, Click on "Status" in the navigation menu
             3. Click "Take the Test" button
             4. Read the instructions carefully
@@ -112,7 +112,7 @@ export const sendMultipleTestReminderEmail = async (emails: string[]) => {
                 <div class="steps">
                 <h3>Steps to complete your application:</h3>
                 <ol>
-                    <li>Visit and Sign in to our website: <a href="https://www.codebility.tech/careers">https://www.codebility.tech/careers</a></li>
+                    <li>Visit and Sign in to our website: <a href="https://www.codebility.tech/auth/sign-in">https://www.codebility.tech/auth/sign-in</a></li>
                     <li>Once Signed In, Click on "Status" in the navigation menu</li>
                     <li>Click "Take the Test" button</li>
                     <li>Read the instructions carefully</li>
@@ -179,7 +179,7 @@ export const sendTestReminder = async ({ email, name }: { email: string, name: s
                 This is a friendly reminder to complete your application process with Codebility.
 
                 Steps to complete your application:
-                1. Visit and Sign in to our and website: https://www.codebility.tech/careers
+                1. Visit and Sign in to our website: https://www.codebility.tech/auth/sign-in
                 2. Once Sign in, Click on "Status" in the navigation menu
                 3. Click "Take the Test" button
                 4. Read the instructions carefully
@@ -270,7 +270,7 @@ export const sendTestReminder = async ({ email, name }: { email: string, name: s
                           <div class="steps">
                               <h3>Steps to complete your application:</h3>
                               <ol>
-                                  <li>Visit and Sign in to our website: <a href="https://www.codebility.tech/careers">https://www.codebility.tech/careers</a></li>
+                                  <li>Visit and Sign in to our website: <a href="https://www.codebility.tech/auth/sign-in">https://www.codebility.tech/auth/sign-in</a></li>
                                   <li>Once Signed, In Click on "Status" in the navigation menu</li>
                                   <li>Click "Take the Test" button</li>
                                   <li>Read the instructions carefully</li>
@@ -337,7 +337,7 @@ export const sendMultipleOnboardingReminder = async (emails: string[]) => {
             This is a friendly reminder to complete your onboarding process with Codebility.
 
             Steps to complete your onboarding:
-            1. Visit and Sign in to our and website: https://www.codebility.tech/careers
+            1. Visit and Sign in to our website: https://www.codebility.tech/auth/sign-in
             2. Once Sign in, Click on "Status" in the navigation menu
             3. Click the Join Waiting List and Join Discord Server
             
@@ -433,7 +433,7 @@ export const sendMultipleOnboardingReminder = async (emails: string[]) => {
             <div class="steps">
             <h3>Steps to complete your onboarding:</h3>
             <ol>
-                <li>Visit and Sign in to our website: <a href="https://www.codebility.tech/careers">https://www.codebility.tech/careers</a></li>
+                <li>Visit and Sign in to our website: <a href="https://www.codebility.tech/auth/sign-in">https://www.codebility.tech/auth/sign-in</a></li>
                 <li>Once Signed In, Click on "Status" in the navigation menu</li>
                 <li>Click the Join Waiting List and Join Discord Server</li>
             </ol>
@@ -501,7 +501,7 @@ export const sendOnboardingReminder = async ({ email, name }: { email: string, n
             This is a friendly reminder to complete your onboarding process with Codebility.
 
             Steps to complete your onboarding:
-            1. Visit and Sign in to our and website: https://www.codebility.tech/careers
+            1. Visit and Sign in to our website: https://www.codebility.tech/auth/sign-in
             2. Once Sign in, Click on "Status" in the navigation menu
             3. Click the Join Waiting List and Join Discord Server
             
@@ -597,7 +597,7 @@ export const sendOnboardingReminder = async ({ email, name }: { email: string, n
             <div class="steps">
             <h3>Steps to complete your onboarding:</h3>
             <ol>
-                <li>Visit and Sign in to our website: <a href="https://www.codebility.tech/careers">https://www.codebility.tech/careers</a></li>
+                <li>Visit and Sign in to our website: <a href="https://www.codebility.tech/auth/sign-in">https://www.codebility.tech/auth/sign-in</a></li>
                 <li>Once Signed In, Click on "Status" in the navigation menu</li>
                 <li>Click the Join Waiting List and Join Discord Server</li>
             </ol>
@@ -671,7 +671,7 @@ export const sendMultiplePassedTestEmail = async (Applicant: { email: string, na
             For now, please visit our website and check the status of your application.
 
             Steps to check your application status:
-            1. Visit and Sign in to our website: https://www.codebility.tech/careers
+            1. Visit and Sign in to our website: https://www.codebility.tech/auth/sign-in
             2. Once Signed In, Click on "Status" in the navigation menu
             3. Click the Join Waiting List and Join Discord Server
 
@@ -767,7 +767,7 @@ export const sendMultiplePassedTestEmail = async (Applicant: { email: string, na
             <div class="steps">
             <h3>Steps to check your application status:</h3>
             <ol>
-            <li>Visit and Sign In our website: <a href="https://www.codebility.tech/careers">https://www.codebility.tech/careers</a></li>
+            <li>Visit and Sign In our website: <a href="https://www.codebility.tech/auth/sign-in">https://www.codebility.tech/auth/sign-in</a></li>
             <li>Once Signed In, Click on "Status" in the navigation menu</li>
             <li>Click the Join Waiting List and Join Discord Server</li>
             </ol>
@@ -839,7 +839,7 @@ export const sendPassedTestEmail = async ({ email, name }: { email: string, name
             For now, please visit our website and check the status of your application.
 
             Steps to check your application status:
-            1. Visit and Sign In our website: https://www.codebility.tech/careers
+            1. Visit and Sign In our website: https://www.codebility.tech/auth/sign-in
             2. Once Signed In, Click on "Status" in the navigation menu
             3. Click the Join Waiting List and Join Discord Server
 
@@ -935,7 +935,7 @@ export const sendPassedTestEmail = async ({ email, name }: { email: string, name
             <div class="steps">
             <h3>Steps to check your application status:</h3>
             <ol>
-            <li>Visit and Sign In our website: <a href="https://www.codebility.tech/careers">https://www.codebility.tech/careers</a></li>
+            <li>Visit and Sign In our website: <a href="https://www.codebility.tech/auth/sign-in">https://www.codebility.tech/auth/sign-in</a></li>
             <li>Once Signed In, Click on "Status" in the navigation menu</li>
             <li>Click the Join Waiting List and Join Discord Server</li>
             </ol>

apps/codebility/app/home/feeds/_components/Feed.tsx

@@ -1,32 +1,37 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
-import DefaultPagination from "@/components/ui/pagination";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useFeedsStore } from "@/store/feeds-store";
 
 import Post from "./PostCard";
 
 interface FeedProp {
   isAdmin: boolean;
   searchQuery?: string;
+  sortField: "title" | "date" | "upvotes";
+  sortOrder: "asc" | "desc";
 }
 
-export default function Feed({ isAdmin, searchQuery }: FeedProp) {
+export default function Feed({
+  isAdmin,
+  searchQuery,
+  sortField,
+  sortOrder,
+}: FeedProp) {
   const posts = useFeedsStore((state) => state.posts);
   const fetchPosts = useFeedsStore((state) => state.fetchPosts);
 
-  const [currentPage, setCurrentPage] = useState(1);
+  const [visibleCount, setVisibleCount] = useState(6);
+  const loaderRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
     fetchPosts();
   }, [fetchPosts]);
 
-  // Filter posts by title or author's first/last name (case-insensitive)
+  // Filter posts
   const filteredPosts = useMemo(() => {
     if (!searchQuery || searchQuery.trim() === "") return posts;
-
     const query = searchQuery.toLowerCase();
-
     return posts.filter((post) => {
       const titleMatch = post.title?.toLowerCase().includes(query);
       const firstNameMatch = post.author_id?.first_name
@@ -35,42 +40,74 @@ export default function Feed({ isAdmin, searchQuery }: FeedProp) {
       const lastNameMatch = post.author_id?.last_name
         ?.toLowerCase()
         .includes(query);
-
       return titleMatch || firstNameMatch || lastNameMatch;
     });
   }, [posts, searchQuery]);
 
-  const postsPerPage = 6;
-  const totalPages = Math.ceil(filteredPosts.length / postsPerPage);
-  const startIndex = (currentPage - 1) * postsPerPage;
-  const currentPosts = filteredPosts.slice(
-    startIndex,
-    startIndex + postsPerPage,
-  );
+  // Sort posts
+  const sortedPosts = useMemo(() => {
+    const sorted = [...filteredPosts];
+    sorted.sort((a, b) => {
+      let aVal: string | number = "";
+      let bVal: string | number = "";
+
+      switch (sortField) {
+        case "title":
+          aVal = a.title?.toLowerCase() || "";
+          bVal = b.title?.toLowerCase() || "";
+          break;
+        case "date":
+          aVal = new Date(a.created_at).getTime();
+          bVal = new Date(b.created_at).getTime();
+          break;
+        case "upvotes":
+          aVal = a.upvote_count ?? 0;
+          bVal = b.upvote_count ?? 0;
+          break;
+      }
+
+      if (aVal < bVal) return sortOrder === "asc" ? -1 : 1;
+      if (aVal > bVal) return sortOrder === "asc" ? 1 : -1;
+      return 0;
+    });
+    return sorted;
+  }, [filteredPosts, sortField, sortOrder]);
+
+  const visiblePosts = sortedPosts.slice(0, visibleCount);
 
-  // Reset to first page when search changes
   useEffect(() => {
-    setCurrentPage(1);
+    setVisibleCount(6);
   }, [searchQuery]);
 
+  // Infinite scroll
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (entry?.isIntersecting) {
+          setVisibleCount((prev) => Math.min(prev + 6, sortedPosts.length));
+        }
+      },
+      { threshold: 1 },
+    );
+
+    const currentLoader = loaderRef.current;
+    if (currentLoader) observer.observe(currentLoader);
+    return () => {
+      if (currentLoader) observer.unobserve(currentLoader);
+    };
+  }, [sortedPosts.length]);
   const handleDeletePost = (deletedPostId: string | number) => {
     useFeedsStore.setState((state) => ({
       posts: state.posts.filter((post) => post.id !== deletedPostId),
     }));
   };
 
-  const handleNextPage = () => {
-    if (currentPage < totalPages) setCurrentPage((p) => p + 1);
-  };
-
-  const handlePreviousPage = () => {
-    if (currentPage > 1) setCurrentPage((p) => p - 1);
-  };
-
   return (
     <>
+      {/* Posts grid */}
       <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-        {currentPosts.map((post) => (
+        {visiblePosts.map((post) => (
           <Post
             key={post.id}
             post={post}
@@ -80,14 +117,22 @@ export default function Feed({ isAdmin, searchQuery }: FeedProp) {
         ))}
       </div>
 
-      {filteredPosts.length > 0 && (
-        <DefaultPagination
-          totalPages={totalPages}
-          currentPage={currentPage}
-          handleNextPage={handleNextPage}
-          handlePreviousPage={handlePreviousPage}
-          setCurrentPage={setCurrentPage}
-        />
+      {/* Loader */}
+      {visibleCount < sortedPosts.length && (
+        <div
+          ref={loaderRef}
+          className="mt-6 flex justify-center text-sm text-gray-500"
+        >
+          <div className="flex items-center gap-2">
+            <div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
+            Loading more posts...
+          </div>
+        </div>
+      )}
+
+      {/* Empty state */}
+      {sortedPosts.length === 0 && (
+        <div className="mt-8 text-center text-gray-500">No posts found.</div>
       )}
     </>
   );