src/pages/home.tsx

@@ -8,7 +8,7 @@ import { GameCard } from '../components/GameCard'
 import { ModCard } from '../components/ModCard'
 import { LANDING_PAGE_DATA } from '../constants'
 import { RelayController } from '../controllers'
-import { useDidMount, useGames } from '../hooks'
+import { useDidMount, useGames, useMuteLists } from '../hooks'
 import { appRoutes, getModPageRoute } from '../routes'
 import { ModDetails } from '../types'
 import {
@@ -258,12 +258,12 @@ const DisplayLatestMods = () => {
   const [isFetchingLatestMods, setIsFetchingLatestMods] = useState(true)
   const [latestMods, setLatestMods] = useState<ModDetails[]>([])
 
+  const muteLists = useMuteLists()
+
   useDidMount(() => {
     fetchMods({ source: window.location.host })
       .then((res) => {
-        const mods = res
-          .sort((a, b) => b.published_at - a.published_at)
-          .slice(0, 4)
+        const mods = res.sort((a, b) => b.published_at - a.published_at)
         setLatestMods(mods)
       })
       .finally(() => {
@@ -271,6 +271,21 @@ const DisplayLatestMods = () => {
       })
   })
 
+  const filteredMods = useMemo(() => {
+    const mutedAuthors = [...muteLists.admin.authors, ...muteLists.user.authors]
+    const mutedEvents = [
+      ...muteLists.admin.replaceableEvents,
+      ...muteLists.user.replaceableEvents
+    ]
+
+    const filtered = latestMods.filter(
+      (mod) =>
+        !mutedAuthors.includes(mod.author) && !mutedEvents.includes(mod.aTag)
+    )
+
+    return filtered.slice(0, 4)
+  }, [muteLists, latestMods])
+
   return (
     <div className='IBMSecMain IBMSMListWrapper'>
       <div className='IBMSMTitleMain'>
@@ -280,7 +295,7 @@ const DisplayLatestMods = () => {
         {isFetchingLatestMods ? (
           <Spinner />
         ) : (
-          latestMods.map((mod) => {
+          filteredMods.map((mod) => {
             return <ModCard key={mod.id} {...mod} />
           })
         )}