Merge branch 'main' into main

Author: priyankarpal

package.json

@@ -157,6 +157,6 @@
     "react-snap": "^1.23.0",
     "tailwind-scrollbar": "^2.1.0",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5.3.3"
+    "typescript": "^5.9.3"
   }
 }

src/common/Testimonial/TestimonialCard.jsx

@@ -53,7 +53,10 @@ const TestimonialCard = ({ home, quote, name, avatarUrl, category, created_at, e
       </div>
 
       <div className="mx-2 mt-4">
-        <blockquote className={`${home && 'h-32'} max-h-32 px-6 overflow-y-auto`}>
+        <blockquote
+          className={`${home ? 'h-32' : ''} max-h-32 px-6 overflow-y-auto`}
+          style={{ touchAction: 'pan-y' }}
+        >
           <p
             className="leading-relaxed text-gray-700"
             dangerouslySetInnerHTML={{ __html: replaceWithBr() }}

src/common/Testimonial/TestimonialSection.jsx

@@ -18,8 +18,13 @@ function TestimonialSection() {
   const [testimonials, setTestimonials] = useState([]);
 
   const fetchTestimonials = async () => {
-    const res = await submit(fetchTestimonialsHomePage());
-    setTestimonials(res);
+    try {
+      const res = await submit(fetchTestimonialsHomePage());
+      setTestimonials(res || []);
+    } catch (error) {
+      console.warn('Failed to fetch testimonials:', error.message);
+      setTestimonials([]);
+    }
   };
 
   useEffect(() => {
@@ -30,6 +35,7 @@ function TestimonialSection() {
     <>
       <div className="mx-5 lg:mx-20 h-72 mt-16 sm:mt-20">
         <Swiper
+          grabCursor
           rewind
           autoplay={{
             delay: 2500,
@@ -56,6 +62,7 @@ function TestimonialSection() {
           }}
           slidesPerView={1}
           spaceBetween={10}
+          touchEventsTarget="container"
         >
           {testimonials &&
             testimonials.map((testimonial) => (

src/common/Testimonial/Testimonials.jsx

@@ -15,8 +15,13 @@ const Testimonials = () => {
   const isAuthenticated = useAuthenticated();
 
   const fetchTestimonials = async () => {
-    const res = await submit(fetchAllTestimonials());
-    setTestimonials(res);
+    try {
+      const res = await submit(fetchAllTestimonials());
+      setTestimonials(res || []);
+    } catch (error) {
+      console.warn('Failed to fetch testimonials:', error.message);
+      setTestimonials([]);
+    }
   };
 
   const handleLogin = (value) => {

src/common/header/HeaderNav.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { BsGithub, BsTrophyFill } from 'react-icons/bs';
 import { FaLightbulb } from 'react-icons/fa';
@@ -16,6 +16,26 @@ const HeaderNav = ({ showBrowse }) => {
   const { showShareModal, setShowShareModal } = useSearchContext();
 
   const [showToggleMenu, setShowToggleMenu] = useState(false);
+  const menuRef = useRef(null);
+
+  // Close drawer when clicking outside the menu panel
+  useEffect(() => {
+    if (!showToggleMenu) return;
+
+    const handleClickOutside = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setShowToggleMenu(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('touchstart', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
+    };
+  }, [showToggleMenu]);
 
   const [anchorEl, setAnchorEl] = useState(null);
 
@@ -129,6 +149,7 @@ const HeaderNav = ({ showBrowse }) => {
         <ul
           className="header-links"
           data-testid="header-links-container"
+          ref={menuRef}
           onClick={(e) => e.stopPropagation()}
         >
           <li className="menu-closer">

src/common/header/header.css

@@ -29,7 +29,12 @@
 }
 
 .nav--visible {
-  transform: translateY(0);
+  transform: none;
+}
+
+/* Push page content below the fixed header, but not the footer */
+.nav-wrapper ~ *:not(footer) {
+  padding-top: 64px;
 }
 
 

src/common/home/home.css

@@ -13,6 +13,7 @@
   width: 100%;
   overflow-x: hidden;
   min-height: 100vh;
+  padding-top: 32px; /* extra offset for activity banner on home page */
 }
 
 .app-home-body .app-home-body-content {

src/common/playleaderboard/LeaderBoard.jsx

@@ -6,6 +6,7 @@ import TopPlayCreators from './TopPlayCreators';
 import { Watch } from 'react-loader-spinner';
 import { groupBy } from 'lodash';
 import { format, lastDayOfMonth } from 'date-fns';
+import './leaderBoard.css';
 
 const LeaderBoard = () => {
   const [top10Contributors, updateTop10Contributors] = useState([]);
@@ -69,7 +70,7 @@ const LeaderBoard = () => {
   }, [publishedPlays]);
 
   return (
-    <main className="app-body  app-body-overflow-hidden">
+    <main className="app-body">
       {publishedPlays.length && (topContributorOfTheMonth || top10Contributors) ? (
         <div className=" overflow-auto lg:flex flex-row justify-center">
           {topContributorOfTheMonth && (

src/common/playleaderboard/leaderBoard.css

@@ -38,6 +38,13 @@
     height: 100vh;
   } */
 
+.leaderboard-loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100vh - 160px);
+}
+
 .leaderboard-wrapper {
     background-color: #ffffff;
     border-radius: 16px;

src/plays/body-composition-calculator/BodyCompositionCalculator.tsx

@@ -0,0 +1,82 @@
+import React, { useMemo, useState } from 'react';
+
+import './styles/styles.css';
+import CalculatorForm from './components/CalculatorForm';
+import ResultDisplay from './components/ResultDisplay';
+
+import { calculateBMR, calculateTDEE } from './utils/healthUtils';
+import { FormData } from './types';
+
+const BodyCompositionCalculator: React.FC = () => {
+  const [formData, setFormData] = useState<FormData>({
+    gender: 'male',
+    weight: '',
+    height: '',
+    age: '',
+    activityLevel: 'sedentary'
+  });
+
+  /**
+   * Generic handler for updating form state
+   */
+  const handleChange = (field: keyof FormData, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value
+    }));
+  };
+
+  /**
+   * Convert Inputs Safely
+   */
+  const numericWeight = Number(formData.weight);
+  const numericHeight = Number(formData.height);
+  const numericAge = Number(formData.age);
+
+  const isValid = numericWeight > 0 && numericHeight > 0 && numericAge > 0;
+
+  /**
+   * Derived BMR
+   */
+  const bmr = useMemo(() => {
+    if (!isValid) return null;
+
+    return calculateBMR({
+      gender: formData.gender,
+      weight: numericWeight,
+      height: numericHeight,
+      age: numericAge
+    });
+  }, [formData.gender, numericWeight, numericHeight, numericAge, isValid]);
+
+  /**
+   * Derived TDEE
+   */
+  const tdee = useMemo(() => {
+    if (!bmr) return null;
+
+    return calculateTDEE(bmr, formData.activityLevel);
+  }, [bmr, formData.activityLevel]);
+
+  return (
+    <div className="container">
+      <h2 className="calculator-title">BMR & TDEE Calculator</h2>
+
+      <p className="calculator-summary">
+        <strong>BMR (Basal Metabolic Rate)</strong> is the number of calories your body needs at
+        complete rest to maintain essential functions such as breathing, circulation, and
+        temperature regulation.
+        <br />
+        <br />
+        <strong>TDEE (Total Daily Energy Expenditure)</strong> is the total number of calories your
+        body burns in a day, including all physical activities like walking, exercise, and daily
+        tasks.
+      </p>
+      <CalculatorForm formData={formData} onChange={handleChange} />
+
+      <ResultDisplay bmr={bmr} tdee={tdee} />
+    </div>
+  );
+};
+
+export default BodyCompositionCalculator;