From b7ca08b00867fccf1c9abb94966532170fc0a1a4 Mon Sep 17 00:00:00 2001
From: PhilReact <philliplangmartinez@gmail.com>
Date: Sat, 14 Dec 2024 18:28:00 +0200
Subject: [PATCH] added 'all' category for qapps

---
 src/components/Apps/AppInfoSnippet.tsx      |  6 ++-
 src/components/Apps/AppsCategoryDesktop.tsx | 12 ++++--
 src/components/Apps/AppsLibraryDesktop.tsx  | 43 ++++++++++++++++++---
 3 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/src/components/Apps/AppInfoSnippet.tsx b/src/components/Apps/AppInfoSnippet.tsx
index 01a7083..f141222 100644
--- a/src/components/Apps/AppInfoSnippet.tsx
+++ b/src/components/Apps/AppInfoSnippet.tsx
@@ -22,7 +22,7 @@ import { useRecoilState, useSetRecoilState } from "recoil";
 import { settingsLocalLastUpdatedAtom, sortablePinnedAppsAtom } from "../../atoms/global";
 import { saveToLocalStorage } from "./AppsNavBar";
 
-export const AppInfoSnippet = ({ app, myName, isFromCategory }) => {
+export const AppInfoSnippet = ({ app, myName, isFromCategory, parentStyles = {} }) => {
 
   const isInstalled = app?.status?.status === 'READY'
    const [sortablePinnedApps, setSortablePinnedApps] = useRecoilState(sortablePinnedAppsAtom);
@@ -30,7 +30,9 @@ export const AppInfoSnippet = ({ app, myName, isFromCategory }) => {
   const isSelectedAppPinned = !!sortablePinnedApps?.find((item)=> item?.name === app?.name && item?.service === app?.service)
   const setSettingsLocalLastUpdated = useSetRecoilState(settingsLocalLastUpdatedAtom);
   return (
-    <AppInfoSnippetContainer>
+    <AppInfoSnippetContainer sx={{
+      ...parentStyles
+    }}>
       <AppInfoSnippetLeft>
       <ButtonBase
         sx={{
diff --git a/src/components/Apps/AppsCategoryDesktop.tsx b/src/components/Apps/AppsCategoryDesktop.tsx
index 7ab9ef2..4c4e334 100644
--- a/src/components/Apps/AppsCategoryDesktop.tsx
+++ b/src/components/Apps/AppsCategoryDesktop.tsx
@@ -97,6 +97,7 @@ export const AppsCategoryDesktop = ({
   const { rootHeight } = useContext(MyContext);
 
   const categoryList = useMemo(() => {
+    if(category?.id === 'all') return availableQapps
     return availableQapps.filter(
       (app) => app?.metadata?.category === category?.id
     );
@@ -133,6 +134,9 @@ export const AppsCategoryDesktop = ({
         app={app}
         myName={myName}
         isFromCategory={true}
+        parentStyles={{
+          padding: '0px 10px'
+        }}
       />
     );
   };
@@ -206,7 +210,7 @@ export const AppsCategoryDesktop = ({
         <AppsWidthLimiter>
           <StyledVirtuosoContainer
              sx={{
-              height: `calc(100vh - 36px - 90px)`,
+              height: `calc(100vh - 36px - 90px - 25px)`,
             }}
           >
             <Virtuoso
@@ -215,9 +219,9 @@ export const AppsCategoryDesktop = ({
               itemContent={rowRenderer}
               atBottomThreshold={50}
               followOutput="smooth"
-              components={{
-                Scroller: ScrollerStyled, // Use the styled scroller component
-              }}
+              // components={{
+              //   Scroller: ScrollerStyled, // Use the styled scroller component
+              // }}
             />
           </StyledVirtuosoContainer>
         </AppsWidthLimiter>
diff --git a/src/components/Apps/AppsLibraryDesktop.tsx b/src/components/Apps/AppsLibraryDesktop.tsx
index 9756d1b..aae46a5 100644
--- a/src/components/Apps/AppsLibraryDesktop.tsx
+++ b/src/components/Apps/AppsLibraryDesktop.tsx
@@ -24,7 +24,7 @@ import {
   PublishQAppCTARight,
   PublishQAppDotsBG,
 } from "./Apps-styles";
-import { Avatar, Box, ButtonBase, InputBase, styled } from "@mui/material";
+import { Avatar, Box, ButtonBase, InputBase, Typography, styled } from "@mui/material";
 import { Add } from "@mui/icons-material";
 import { MyContext, getBaseApiReact } from "../../App";
 import LogoSelected from "../../assets/svgs/LogoSelected.svg";
@@ -145,6 +145,9 @@ export const AppsLibraryDesktop = ({
         key={`${app?.service}-${app?.name}`}
         app={app}
         myName={myName}
+        parentStyles={{
+          padding: '0px 10px'
+        }}
       />
     );
   };
@@ -261,7 +264,7 @@ export const AppsLibraryDesktop = ({
             <AppsWidthLimiter>
               <StyledVirtuosoContainer
                 sx={{
-                  height: `calc(100vh - 36px - 90px)`,
+                  height: `calc(100vh - 36px - 90px - 90px)`,
                 }}
               >
                 <Virtuoso
@@ -270,12 +273,16 @@ export const AppsLibraryDesktop = ({
                   itemContent={rowRenderer}
                   atBottomThreshold={50}
                   followOutput="smooth"
-                  components={{
-                    Scroller: ScrollerStyled, // Use the styled scroller component
-                  }}
+                  // components={{
+                  //   Scroller: ScrollerStyled, // Use the styled scroller component
+                  // }}
                 />
               </StyledVirtuosoContainer>
             </AppsWidthLimiter>
+          ) : searchedList?.length === 0 && debouncedValue ? (
+            <AppsWidthLimiter>
+              <Typography>No results</Typography>
+            </AppsWidthLimiter>
           ) : (
             <>
               <AppLibrarySubTitle
@@ -411,6 +418,32 @@ export const AppsLibraryDesktop = ({
                       flexWrap: "wrap",
                     }}
                   >
+                     <ButtonBase
+                        
+                          onClick={() => {
+                            executeEvent("selectedCategory", {
+                              data: {
+                                id: 'all',
+                                name: 'All'
+                              },
+                            });
+                          }}
+                        >
+                          <Box
+                            sx={{
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              height: "60px",
+                              padding: "0px 24px",
+                              border: "4px solid #10242F",
+                              borderRadius: "6px",
+                              boxShadow: "2px 4px 0px 0px #000000",
+                            }}
+                          >
+                            All
+                          </Box>
+                        </ButtonBase>
                     {categories?.map((category) => {
                       return (
                         <ButtonBase