Handle more filter context for notifications

src/components/notification.jsx

@@ -460,7 +460,6 @@ function Notification({
   const expandAccounts = diffCount ? 'remote' : 'local';
 
   // If there's a status and filter action is 'hide', then the notification is hidden
-  // TODO: Handle 'warn' action one day
   if (!!status?.filtered) {
     const isOwnPost = status?.account?.id === currentAccount;
     const filterInfo = isFiltered(status.filtered, 'notifications');
@@ -710,6 +709,7 @@ function Notification({
                     size="s"
                     previewMode
                     allowContextMenu
+                    allowFilters
                   />
                 </TruncatedLink>
               </li>
@@ -749,6 +749,7 @@ function Notification({
                 size="s"
                 readOnly
                 allowContextMenu
+                allowFilters
               />
             ) : (
               <Status
@@ -756,6 +757,7 @@ function Notification({
                 size="s"
                 readOnly
                 allowContextMenu
+                allowFilters
               />
             )}
           </TruncatedLink>

src/components/status.jsx

@@ -3679,7 +3679,7 @@ function FilteredStatus({
 
   return (
     <div
-      class={
+      class={`${
         quoted
           ? ''
           : isReblog
@@ -3689,7 +3689,7 @@ function FilteredStatus({
             : isFollowedTags
               ? 'status-followed-tags'
               : ''
-      }
+      } visibility-${visibility}`}
       {...containerProps}
       // title={statusPeekText}
       onContextMenu={(e) => {

src/pages/filters.jsx

@@ -18,7 +18,7 @@ import useInterval from '../utils/useInterval';
 import useTitle from '../utils/useTitle';
 
 const FILTER_CONTEXT = ['home', 'public', 'notifications', 'thread', 'account'];
-const FILTER_CONTEXT_UNIMPLEMENTED = ['notifications', 'thread', 'account'];
+const FILTER_CONTEXT_UNIMPLEMENTED = ['thread', 'account'];
 const FILTER_CONTEXT_LABELS = {
   home: msg`Home and lists`,
   notifications: msg`Notifications`,

src/pages/home.jsx

@@ -14,6 +14,7 @@ import Loader from '../components/loader';
 import Notification from '../components/notification';
 import { api } from '../utils/api';
 import db from '../utils/db';
+import FilterContext from '../utils/filter-context';
 import { massageNotifications2 } from '../utils/group-notifications';
 import states, { saveStatus } from '../utils/states';
 import { getCurrentAccountNS } from '../utils/store-utils';
@@ -185,6 +186,7 @@ function NotificationsMenu({ anchorRef, state, onClose }) {
           <Trans>Notifications</Trans>
         </h2>
       </header>
+      <FilterContext.Provider value="notifications">
         <main>
           {snapStates.notifications.length ? (
             <>
@@ -218,6 +220,7 @@ function NotificationsMenu({ anchorRef, state, onClose }) {
             )
           )}
         </main>
+      </FilterContext.Provider>
       <footer>
         <Link to="/mentions" class="button plain">
           <Icon icon="at" />{' '}

src/pages/mentions.jsx

@@ -175,6 +175,7 @@ function Mentions({ columnMode, ...props }) {
       useItemID
       timelineStart={TimelineStart}
       refresh={type}
+      filterContext="notifications"
     />
   );
 }

src/pages/notifications.jsx

@@ -28,6 +28,7 @@ import Notification from '../components/notification';
 import Status from '../components/status';
 import { api } from '../utils/api';
 import enhanceContent from '../utils/enhance-content';
+import FilterContext from '../utils/filter-context';
 import groupNotifications, {
   groupNotifications2,
   massageNotifications2,
@@ -797,7 +798,7 @@ function Notifications({ columnMode }) {
           </p>
         )}
         {snapStates.notifications.length ? (
-          <>
+          <FilterContext.Provider value="notifications">
             {snapStates.notifications
               // This is leaked from Notifications popover
               .filter((n) => n.type !== 'follow_request')
@@ -843,7 +844,7 @@ function Notifications({ columnMode }) {
                   </Fragment>
                 );
               })}
-          </>
+          </FilterContext.Provider>
         ) : (
           <>
             {uiState === 'loading' && (