Done with the discover apps tab revamp : New look

frontend/src/components/AppModal.jsx

@@ -309,7 +309,7 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
         }}
       >
         <Typography variant="h5" component="div" sx={{ fontWeight: 500 }}>
-          About Gmail
+          About {app?.name.replace(/_/g, ' ').replace(/\b\w/g, char => char.toUpperCase())}
         </Typography>
         <IconButton
           onClick={onClose}

frontend/src/views/Apps2.jsx

@@ -299,24 +299,16 @@ const Hits = ({
               <Typography variant="body1">No Apps Found</Typography>
             </div>
           ) : (
-            <Grid item spacing={2} justifyContent="flex-start">
             <div
               style={{
-                  minHeight: 570,
-                  overflowY: "auto",
-                  overflowX: "hidden",
-                }}>
-                <div
-                  style={{
-                    rowGap: 16,
-                    columnGap: 16,
                 marginTop: 16,
-                    display: "flex",
+                width: "100%",
-                    flexWrap: "wrap",
+                display: "grid",
-                    justifyContent: "flex-start",
+                gridTemplateColumns: "repeat(auto-fill, minmax(365px, 1fr))",
-                    maxHeight: 570,
+                gap: "20px",
-                    scrollbarWidth: "thin",
+                justifyContent: "space-between",
-                    scrollbarColor: "#494949 #2f2f2f",
+                alignItems: "start",
+                padding: "0 10px"
               }}
             >
               {hits?.map((data, index) => {
@@ -332,29 +324,21 @@ const Hits = ({
                     style={{
                       transitionDelay: `${workflowDelay}ms`,
                     }}
-                      >
-                        <div
-                          onClick={
-                            () => {
-                              handleAppClick(data);
-                            }
-                          }
-                          style={{
-                            color: "#f85a3e",
-                          }}
                   >
                     <Paper
                       elevation={0}
                       style={{
-                              backgroundColor: hoverEffect === index ? "rgba(26, 26, 26, 1)" : "#1A1A1A",
+                        backgroundColor: hoverEffect === index ? "rgba(26, 26, 26, 1)" : "#212121",
                         color: "rgba(241, 241, 241, 1)",
                         cursor: "pointer",
-                              position: "relative",
+                        fontFamily: "Inter",
-                              width: leftSideBarOpenByClick ? 325 : 365,
+                        // position: "relative",
+                        width: "100%",
                         height: 96,
                         borderRadius: 8,
                         boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.1)",
                         marginBottom: 20,
+                        transition: "width 0.3s ease",
                       }}
                       onMouseEnter={() => {
                         setHoverEffect(index);
@@ -368,10 +352,14 @@ const Hits = ({
                         fontSize: 16,
                         overflow: "hidden",
                         display: "flex",
-                              alignItems: "flex-start",
+                        fontFamily: "Inter",
                         width: '100%',
                         backgroundColor: hoverEffect === index ? "#2F2F2F" : "#212121"
-                            }}>
+                      }}
+                        onClick={() => {
+                          handleAppClick(data);
+                        }}
+                      >
                         <img
                           alt={data.name}
                           src={data.image_url ? data.image_url : "/images/no_image.png"}
@@ -390,10 +378,11 @@ const Hits = ({
                             flexDirection: "column",
                             alignItems: "flex-start",
                             width: 339,
-                                  gap: 8,
+                            gap: 6,
                             fontWeight: '400',
                             overflow: "hidden",
                             margin: "12px 0",
+                            fontFamily: "Inter"
                           }}
                         >
                           <div
@@ -402,6 +391,7 @@ const Hits = ({
                               flexDirection: "row",
                               overflow: "hidden",
                               gap: 8,
+                              fontWeight:600,
                               textOverflow: "ellipsis",
                               whiteSpace: "nowrap",
                               color: '#F1F1F1'
@@ -517,19 +507,17 @@ const Hits = ({
                         </div>
                       </ButtonBase>
                     </Paper>
-                        </div>
                   </Zoom>
                 );
               })}
             </div>
-              </div>
-            </Grid>
           )}
         </div>
       ) : (
         <div><Box sx={{ position: 'absolute', top: '30%', left: '50%', }}> <CircularProgress /></Box></div>
-      )}
+      )
-    </div>
+      }
+    </div >
   );
 }
 
@@ -540,6 +528,14 @@ const SearchBox = ({ refine, searchQuery, setSearchQuery }) => {
   const inputRef = useRef(null);
   const [localQuery, setLocalQuery] = useState(searchQuery);
 
+  // Initialize search when component mounts or when switching to Discover tab
+  useEffect(() => {
+    if (searchQuery) {
+      setLocalQuery(searchQuery);
+      refine(searchQuery); // This will trigger the Algolia search
+    }
+  }, [searchQuery, refine]);
+
   // Debounced function to refine search
   const debouncedRefine = useRef(
     debounce((value) => {
@@ -600,7 +596,6 @@ const SearchBox = ({ refine, searchQuery, setSearchQuery }) => {
               <ClearIcon
                 style={{
                   cursor: "pointer",
-                  marginRight: 10
                 }}
                 onClick={() => {
                   setLocalQuery('');
@@ -626,6 +621,7 @@ const CategoryDropdown = ({ items, currentRefinement, refine }) => {
   };
 
   return (
+    <div style={{ position: 'relative', width: '100%' }}>
       <Select
         fullWidth
         variant="outlined"
@@ -640,12 +636,28 @@ const CategoryDropdown = ({ items, currentRefinement, refine }) => {
           All Categories
         </MenuItem>
         {items.map(item => (
-        <MenuItem key={item.label} value={item.label} style={{ fontFamily: "Inter" }}>
+          <MenuItem key={item.label} value={item.label} style={{ fontFamily: "Inter", fontSize: 16 }}>
             <Checkbox checked={currentRefinement.includes(item.label)} />
             {item.label} ({item.count})
           </MenuItem>
         ))}
       </Select>
+      {currentRefinement.length > 0 && (
+        <ClearIcon
+          style={{
+            position: 'absolute',
+            right: 35,
+            top: '50%',
+            transform: 'translateY(-50%)',
+            cursor: 'pointer',
+            color: 'white',
+            fontSize: 20,
+            zIndex: 1000
+          }}
+          onClick={() => refine([])}
+        />
+      )}
+    </div>
   );
 };
 const CustomCategoryDropdown = connectRefinementList(CategoryDropdown);
@@ -658,6 +670,7 @@ const LabelDropdown = ({ items, currentRefinement, refine }) => {
   };
 
   return (
+    <div style={{ position: 'relative', width: '100%' }}>
       <Select
         fullWidth
         variant="outlined"
@@ -672,12 +685,31 @@ const LabelDropdown = ({ items, currentRefinement, refine }) => {
           All Labels
         </MenuItem>
         {items.map(item => (
-        <MenuItem key={item.label} value={item.label}>
+          <MenuItem key={item.label} value={item.label} style={{
+            fontFamily: "Inter",
+            fontSize: 16
+          }}>
             <Checkbox checked={currentRefinement.includes(item.label)} />
             {item.label} ({item.count})
           </MenuItem>
         ))}
       </Select>
+      {currentRefinement.length > 0 && (
+        <ClearIcon
+          style={{
+            position: 'absolute',
+            right: 35,
+            top: '50%',
+            transform: 'translateY(-50%)',
+            cursor: 'pointer',
+            color: 'white',
+            fontSize: 20,
+            zIndex: 1000
+          }}
+          onClick={() => refine([])}
+        />
+      )}
+    </div>
   );
 };
 const CustomLabelDropdown = connectRefinementList(LabelDropdown);
@@ -936,6 +968,7 @@ const Apps2 = (props) => {
 
   const handleTabChange = (newTab) => {
     setCurrTab(newTab);
+    
     // Apply filters immediately when changing tabs
     if (newTab === 0) {
       const filteredOrgApps = filterApps(orgApps, searchQuery, selectedCategory, selectedLabel);
@@ -944,15 +977,20 @@ const Apps2 = (props) => {
       const filteredUserApps = filterApps(userApps, searchQuery, selectedCategory, selectedLabel);
       setAppsToShow(filteredUserApps);
     }
+    // Note: We don't clear the search when switching to tab 2 (Discover Apps) anymore
 
     // Update URL query params
     const newQueryParam = newTab === 0 ? 'org_apps' : newTab === 1 ? 'my_apps' : 'all_apps';
     const queryParams = new URLSearchParams(location.search);
     queryParams.set('tab', newQueryParam);
-    // Only remove 'q' param if search is empty
+    
-    if (!searchQuery) {
+    // Maintain search query in URL regardless of tab
+    if (searchQuery) {
+      queryParams.set('q', searchQuery);
+    } else {
       queryParams.delete('q');
     }
+    
     window.history.replaceState({}, '', `${location.pathname}?${queryParams.toString()}`);
   };
 
@@ -1110,7 +1148,7 @@ const Apps2 = (props) => {
                       All Categories
                     </MenuItem>
                     {categories?.map((category) => (
-                      <MenuItem key={category.category} value={category.category} style={{ fontFamily: "Inter" }}>
+                      <MenuItem key={category.category} value={category.category} style={{ fontFamily: "Inter", fontSize: 16 }}>
                         <Checkbox checked={selectedCategory.includes(category.category)} />
                         {category.category}
                       </MenuItem>
@@ -1153,7 +1191,7 @@ const Apps2 = (props) => {
                       All Labels
                     </MenuItem>
                     {labels?.map((tag) => (
-                      <MenuItem key={tag.tag} value={tag.tag} style={{ fontFamily: "Inter" }}>
+                      <MenuItem key={tag.tag} value={tag.tag} style={{ fontFamily: "Inter", fontSize: 16 }}>
                         <Checkbox checked={selectedLabel.includes(tag.tag)} />
                         {tag.tag}
                       </MenuItem>