Merge pull request #20 from Mra1k3r0/master

feat: improve social invites, leaderboard sharing, and dashboard stats UX

Author: mrepol742

app/(public)/join/[code]/JoinButton.tsx

@@ -29,7 +29,8 @@ export default function JoinButton({
         <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
         </svg>
-        Already a Member &mdash; View Leaderboard
+        <span className="sm:hidden">View</span>
+        <span className="hidden sm:inline">View Leaderboard</span>
       </Link>
     );
   }

app/(public)/join/page.tsx

@@ -22,7 +22,7 @@ async function getLeaderboard(code: string) {
 async function getMemberCount(leaderboardId: string) {
   const supabase = await createClient();
   const { count } = await supabase
-    .from("leaderboard_members")
+    .from("leaderboard_members_view")
     .select("*", { count: "exact", head: true })
     .eq("leaderboard_id", leaderboardId);
   return count ?? 0;
@@ -163,7 +163,7 @@ export default async function JoinPage({ searchParams }: Props) {
           </div>
 
           <p className="text-xs uppercase tracking-[0.2em] text-indigo-400 font-semibold mb-3">
-            You&apos;ve been invited
+            {alreadyMember ? "You\u2019re already a member of" : "You\u2019ve been invited to"}
           </p>
 
           <h1 className="text-2xl md:text-3xl font-bold gradient-text mb-2">
@@ -198,17 +198,19 @@ export default async function JoinPage({ searchParams }: Props) {
             alreadyMember={alreadyMember}
           />
 
-          <p className="text-[11px] text-gray-600 mt-6">
-            Powered by{" "}
-            <Link href="/" className="text-indigo-400/70 hover:text-indigo-400 transition-colors">
-              DevPulse
-            </Link>{" "}
-            &mdash; Track your coding activity &amp; compete
-          </p>
+          {!user && (
+            <p className="text-[11px] text-gray-600 mt-6">
+              Powered by{" "}
+              <Link href="/" className="text-indigo-400/70 hover:text-indigo-400 transition-colors">
+                DevPulse
+              </Link>{" "}
+              &mdash; Track your coding activity &amp; compete
+            </p>
+          )}
         </div>
       </div>
 
-      <Footer />
+      {!user && <Footer />}
     </div>
   );
 }

app/(public)/leaderboard/[slug]/page.tsx

@@ -61,7 +61,7 @@ export default async function LeaderboardPage(props: {
         />
       </div>
 
-      <CTA />
+      {!user && <CTA />}
       <Footer />
     </div>
   );

app/components/BoardList.tsx

@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createClient } from "../lib/supabase/client";
@@ -18,7 +18,11 @@ export default function BoardList({
 }) {
   const supabase = createClient();
   const [showCodeModal, setShowCodeModal] = useState(false);
-  const [selectedCode, setSelectedCode] = useState<string | null>(null);        
+  const [selectedCode, setSelectedCode] = useState<string | null>(null);
+  const inviteUrl =
+    typeof window !== "undefined" && selectedCode
+      ? `${window.location.origin}/join?id=${selectedCode}`
+      : "";
   const [showDeleteModal, setShowDeleteModal] = useState(false);
 
   const handleDelete = async () => {
@@ -155,22 +159,47 @@ export default function BoardList({
             <div className="absolute -top-10 -right-10 w-32 h-32 bg-indigo-500/20 rounded-full blur-3xl" />
 
             <h3 className="text-[11px] font-bold tracking-widest uppercase text-indigo-400 mb-6 text-center flex items-center justify-center gap-2">
-              <FontAwesomeIcon icon={faKey} /> Server Join Code
+              <FontAwesomeIcon icon={faKey} /> Share Server
             </h3>
-            
-            <div className="bg-black/50 border border-white/10 rounded-xl p-6 text-center relative overflow-hidden group">
-              <div className="absolute inset-0 bg-gradient-to-tr from-indigo-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
-              <p className="text-3xl font-mono text-white tracking-[0.2em] font-bold relative z-10">
-                {selectedCode}
-              </p>
-            </div>
-            
-            <div className="mt-8 flex justify-center">
+
+            <div className="space-y-5">
+              <div>
+                <p className="text-[11px] uppercase tracking-widest text-gray-400 font-bold mb-2">
+                  Join Code
+                </p>
+                <div className="bg-black/50 border border-white/10 rounded-xl p-4 text-center relative overflow-hidden group">
+                  <div className="absolute inset-0 bg-gradient-to-tr from-indigo-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
+                  <p className="text-2xl font-mono text-white tracking-[0.2em] font-bold relative z-10">
+                    {selectedCode}
+                  </p>
+                </div>
+              </div>
+
+              <div>
+                <p className="text-[11px] uppercase tracking-widest text-gray-400 font-bold mb-2">
+                  Invite URL
+                </p>
+                <div className="bg-black/50 border border-white/10 rounded-xl px-3 py-2 text-xs text-gray-300 flex items-center gap-2">
+                  <span className="flex-1 truncate">{inviteUrl}</span>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      if (!inviteUrl) return;
+                      navigator.clipboard.writeText(inviteUrl);
+                      toast.success("Invite link copied");
+                    }}
+                    className="px-3 py-1 rounded-lg text-[11px] font-semibold bg-white/5 hover:bg-white/10 border border-white/10 text-gray-200 transition-colors"
+                  >
+                    Copy
+                  </button>
+                </div>
+              </div>
+
               <button
                 onClick={() => setShowCodeModal(false)}
                 className="w-full py-2.5 px-4 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm font-medium text-gray-300 transition-colors"
               >
-                Close Window
+                Close
               </button>
             </div>
           </div>

app/components/LeaderboardTable.tsx

@@ -1,4 +1,4 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faClock, faCode, faTerminal, faServer, faBolt, faFire, faStar, faRocket } from "@fortawesome/free-solid-svg-icons";
 
 type Member = {