diff --git a/frontend/src/components/AppModal.jsx b/frontend/src/components/AppModal.jsx index 239cec7c..0f0a3173 100644 --- a/frontend/src/components/AppModal.jsx +++ b/frontend/src/components/AppModal.jsx @@ -309,7 +309,7 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => { }} > - About Gmail + About {app?.name.replace(/_/g, ' ').replace(/\b\w/g, char => char.toUpperCase())} No Apps Found ) : ( - -
-
- {hits?.map((data, index) => { - const appUrl = - isCloud - ? `/apps/${data.objectID}?queryID=${data.__queryID}` - : `https://shuffler.io/apps/${data.objectID}?queryID=${data.__queryID}`; +
+ {hits?.map((data, index) => { + const appUrl = + isCloud + ? `/apps/${data.objectID}?queryID=${data.__queryID}` + : `https://shuffler.io/apps/${data.objectID}?queryID=${data.__queryID}`; - return ( - + { + setHoverEffect(index); + }} + onMouseLeave={() => { + setHoverEffect(-1); + }} + > + { + handleAppClick(data); }} > -
{ - handleAppClick(data); - } - } + {data.name} +
- { - setHoverEffect(index); - }} - onMouseLeave={() => { - setHoverEffect(-1); + display: 'flex', + flexDirection: "row", + overflow: "hidden", + gap: 8, + fontWeight:600, + textOverflow: "ellipsis", + whiteSpace: "nowrap", + color: '#F1F1F1' }} > - - {data.name} -
-
- {(allActivatedAppIds && allActivatedAppIds.includes(data.objectID)) && } - {normalizedString(data.name)} -
+ {(allActivatedAppIds && allActivatedAppIds.includes(data.objectID)) && } + {normalizedString(data.name)} +
-
- {data.categories !== null - ? normalizedString(data.categories).join(", ") - : "NA"} -
-
-
- {hoverEffect === index && isCloud ? ( -
- {data.tags && ( - - - {data.tags.slice(0, 1).map((tag, tagIndex) => ( - - {normalizedString(tag)} - {tagIndex < 1 ? ", " : ""} - - ))} - - - )} -
- ) : ( -
- {data.tags && - data.tags.map((tag, tagIndex) => ( - - {normalizedString(tag)} - {tagIndex < data.tags.length - 1 ? ", " : ""} - - ))} -
- )} -
-
- {hoverEffect === index && isCloud && ( -
- {allActivatedAppIds && allActivatedAppIds.includes(data.objectID) ? ( -
+
+
+ {hoverEffect === index && isCloud ? ( +
+ {data.tags && ( + { - handleActivateButton(event, data, "deactivate"); - }}> - Deactivate - - ) : ( - - )} -
- )} -
+ width: "auto", + height: "auto", + fontSize: 16, + border: "1px solid rgba(73, 73, 73, 1)", + } + } + }} + > + + {data.tags.slice(0, 1).map((tag, tagIndex) => ( + + {normalizedString(tag)} + {tagIndex < 1 ? ", " : ""} + + ))} + + + )}
-
- - + ) : ( +
+ {data.tags && + data.tags.map((tag, tagIndex) => ( + + {normalizedString(tag)} + {tagIndex < data.tags.length - 1 ? ", " : ""} + + ))} +
+ )} +
+
+ {hoverEffect === index && isCloud && ( +
+ {allActivatedAppIds && allActivatedAppIds.includes(data.objectID) ? ( + + ) : ( + + )} +
+ )} +
+
- - ); - })} -
-
- + + + + ); + })} +
)} ) : (
- )} - + ) + } + ); } @@ -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 }) => { { setLocalQuery(''); @@ -626,26 +621,43 @@ const CategoryDropdown = ({ items, currentRefinement, refine }) => { }; return ( - selected.length ? selected.join(', ') : 'All Categories'} + > + + All Categories - ))} - + {items.map(item => ( + + + {item.label} ({item.count}) + + ))} + + {currentRefinement.length > 0 && ( + refine([])} + /> + )} + ); }; const CustomCategoryDropdown = connectRefinementList(CategoryDropdown); @@ -658,26 +670,46 @@ const LabelDropdown = ({ items, currentRefinement, refine }) => { }; return ( - selected.length ? selected.join(', ') : 'All Labels'} + > + + All Labels - ))} - + {items.map(item => ( + + + {item.label} ({item.count}) + + ))} + + {currentRefinement.length > 0 && ( + refine([])} + /> + )} + ); }; 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 {categories?.map((category) => ( - + {category.category} @@ -1153,7 +1191,7 @@ const Apps2 = (props) => { All Labels {labels?.map((tag) => ( - + {tag.tag}