Show filter title in placeholder instead of reason. More efficient detection

Author: webdevsk

src/data/filters-database.ts

@@ -36,9 +36,15 @@ export const filtersDatabase: Record<string, FiltersDatabaseItem> = {
 		keywordsDB: keywordsPerLanguage.peopleYouMayKnow,
 	},
 	uncategorized: {
-		title: "Uncategorized",
+		title: "Follow/Join",
 		description: "Removes suggested pages with join/follow link",
 		icon: "󱠂",
 		keywordsDB: keywordsPerLanguage.uncategorized,
 	},
 }
+
+export const filterTitlePerKeywordIndex = new Map<string, string>(
+	Object.entries(filtersDatabase).flatMap(([_category, { title, keywordsDB }]) =>
+		Object.values(keywordsDB).flatMap((keyword) => Array.isArray(keyword) ? keyword.map(k => [k, title]) : [[keyword, title]])
+	)
+)

src/lib/purge-element.ts

@@ -2,19 +2,22 @@ import { showPlaceholder, theme } from "@/config"
 
 export const purgeElement = ({
 	element,
+	filter,
 	reason,
 	author,
 	placeHolderMessage,
 	sponsoredFilters,
 }: {
 	element: HTMLElement
+	filter: string
 	reason: string
 	author: string
 	placeHolderMessage: string
 	sponsoredFilters: string[]
 }) => {
 	element.tabIndex = -1
 	element.dataset.purged = "true"
+	element.dataset.reason = reason
 
 	// Sponsored posts get removed in an "out of order" fashion automatically.
 	// Having placeholder inside them results in a  scroll jump
@@ -25,7 +28,7 @@ export const purgeElement = ({
 
 		const overlay = document.createElement("article")
 		overlay.className = "placeholder"
-		overlay.innerHTML = `<p style="color: ${theme.textColor}">${placeHolderMessage}: ${author} (${reason})</p>`
+		overlay.innerHTML = `<p style="color: ${theme.textColor}">${placeHolderMessage}: ${author} (${filter})</p>`
 		element.appendChild(overlay)
 	} else {
 		// Hide elements by resizing to 0px

src/lib/run-feeds-cleaner.ts

@@ -3,7 +3,7 @@ import {
 	possibleTargetsSelectorInPost,
 	postContainerSelector,
 } from "@/config"
-import { filtersDatabase } from "@/data/filters-database"
+import { filterTitlePerKeywordIndex, filtersDatabase } from "@/data/filters-database"
 import { keywordsPerLanguage } from "@/data/keywords-per-language"
 import { BlockCounter } from "@/lib/block-counter"
 import { getOwnLangFilters } from "./get-own-language-filters"
@@ -52,32 +52,39 @@ export const runFeedsCleaner = (): (() => void) => {
 	const checkElement = (element: HTMLElement) => {
 		// Handled already
 		if (element.dataset.purged === "true") return
-		let suspect: boolean = false
-		let reason: string | null = null
-		let raw: string | null = null
+		let flagged: boolean = false
+		let matchedfilter: string
+		let reason: string
 
 		for (const span of element.querySelectorAll(
 			possibleTargetsSelectorInPost
 		)) {
-			if (!activeFilters.some(str => span.textContent?.includes(str))) continue
-			suspect = true
-			reason = span.innerHTML.split("󰞋")[0]
-			raw = span.innerHTML
-			break
+			let done: boolean = false
+			for (const filter of activeFilters){
+				if (!span.textContent?.includes(filter)) continue
+				flagged = true
+				matchedfilter = filterTitlePerKeywordIndex.get(filter)!
+				reason = span.innerHTML
+				if (devMode) console.log(`Flagged post containing: "${reason}" with filter: "${matchedfilter}"`)
+				done = true
+				break
+			}
+			if (done) break
 		}
 
-		if (!suspect) {
+		if (!flagged) {
 			BlockCounter.getInstance().increaseWhite()
 			return
 		}
 		BlockCounter.getInstance().increaseBlack()
 
 		purgeElement({
 			element,
-			reason: reason ?? raw ?? "",
+			reason: reason!,
 			author: element.querySelector("span.f2")?.innerHTML ?? "",
 			placeHolderMessage,
 			sponsoredFilters,
+			filter: matchedfilter!,
 		})
 	}
 

src/lib/settings-menu-injector.ts

@@ -53,6 +53,7 @@ export class SettingsMenuInjector {
       <div class="settingsIcon native-text" style="color: ${theme.iconColor}"><span>${closeMenuIcon}</span></div>
       <div class="settingsLabelContainer">
         <span class="settingsLabel">Close Menu</span>
+        <span class="settingsDescription" style="color: ${theme.iconColor}" >Changes take effect on newly retrieved posts</span>
       </div>
     </div>`
 				)}