feat: add most popular section in apps (#6539)

* feat: add most popular section in apps

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* chore: remove margin

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* fix: merge conflict

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

apps/web/pages/apps/index.tsx

@@ -14,7 +14,7 @@ import {
   HorizontalTabs,
   Icon,
   TextField,
-  TrendingAppsSlider,
+  PopularAppsSlider,
 } from "@calcom/ui";
 
 import AppsLayout from "@components/apps/layouts/AppsLayout";
@@ -77,7 +77,7 @@ export default function Apps({ categories, appStore }: inferSSRProps<typeof getS
         {!searchText && (
           <>
             <AppStoreCategories categories={categories} />
-            <TrendingAppsSlider items={appStore} />
+            <PopularAppsSlider items={appStore} />
           </>
         )}
         <AllApps

apps/web/public/static/locales/en/common.json

@@ -789,6 +789,7 @@
   "number_apps_one": "{{count}} App",
   "number_apps_other": "{{count}} Apps",
   "trending_apps": "Trending Apps",
+  "most_popular":"Most Popular",
   "explore_apps": "{{category}} apps",
   "installed_apps": "Installed Apps",
   "free_to_use_apps": "Free",

packages/app-store/_appRegistry.ts

@@ -62,6 +62,11 @@ export async function getAppRegistryWithCredentials(userId: number) {
         select: safeCredentialSelect,
       },
     },
+    orderBy: {
+      credentials: {
+        _count: "desc",
+      },
+    },
   });
   const apps = [] as (App & {
     credentials: Credential[];

packages/ui/components/apps/AllApps.tsx

@@ -155,7 +155,12 @@ export function AllApps({ apps, searchText, categories }: AllAppsPropsType) {
           : app.category === selectedCategory
         : true
     )
-    .filter((app) => (searchText ? app.name.toLowerCase().includes(searchText.toLowerCase()) : true));
+    .filter((app) => (searchText ? app.name.toLowerCase().includes(searchText.toLowerCase()) : true))
+    .sort(function (a, b) {
+      if (a.name < b.name) return -1;
+      else if (a.name > b.name) return 1;
+      return 0;
+    });
 
   return (
     <div>

packages/ui/components/apps/PopularAppsSlider.tsx

@@ -4,12 +4,12 @@ import { AppFrontendPayload as App } from "@calcom/types/App";
 import { AppCard } from "./AppCard";
 import { Slider } from "./Slider";
 
-export const TrendingAppsSlider = <T extends App>({ items }: { items: T[] }) => {
+export const PopularAppsSlider = <T extends App>({ items }: { items: T[] }) => {
   const { t } = useLocale();
 
   return (
     <Slider<T>
-      title={t("trending_apps")}
+      title={t("most_popular")}
       items={items.filter((app) => !!app.trending)}
       itemKey={(app) => app.name}
       options={{

packages/ui/components/apps/Slider.tsx

@@ -56,11 +56,11 @@ export const Slider = <T extends string | unknown>({
         `}
       </style>
       <div className="glide" ref={glide}>
-        <div className="flex cursor-default pb-3">
+        <div className="flex cursor-default items-center pb-3">
           {isLocaleReady ? (
             title && (
               <div>
-                <h2 className="mt-0 mb-2 text-base font-semibold leading-none text-gray-900">{title}</h2>
+                <h2 className="mt-0 text-base font-semibold leading-none text-gray-900">{title}</h2>
               </div>
             )
           ) : (

packages/ui/components/apps/index.ts

@@ -3,5 +3,5 @@ export { AppCard } from "./AppCard";
 export { Slider } from "./Slider";
 export { SkeletonLoader as AppSkeletonLoader } from "./SkeletonLoader";
 export { SkeletonLoader } from "./SkeletonLoader";
-export { TrendingAppsSlider } from "./TrendingAppsSlider";
+export { PopularAppsSlider } from "./PopularAppsSlider";
 export { AppStoreCategories } from "./Categories";

packages/ui/index.tsx

@@ -64,7 +64,7 @@ export {
   AppSkeletonLoader,
   SkeletonLoader,
   Slider,
-  TrendingAppsSlider,
+  PopularAppsSlider,
   useShouldShowArrows,
   AppStoreCategories,
 } from "./components/apps";