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,39 +186,41 @@ function NotificationsMenu({ anchorRef, state, onClose }) {
           <Trans>Notifications</Trans>
         </h2>
       </header>
-      <main>
-        {snapStates.notifications.length ? (
-          <>
-            {snapStates.notifications
-              .slice(0, NOTIFICATIONS_DISPLAY_LIMIT)
-              .map((notification) => (
-                <Notification
-                  key={notification._ids || notification.id}
-                  instance={instance}
-                  notification={notification}
-                  disableContextMenu
-                />
-              ))}
-          </>
-        ) : uiState === 'loading' ? (
-          <div class="ui-state">
-            <Loader abrupt />
-          </div>
-        ) : (
-          uiState === 'error' && (
+      <FilterContext.Provider value="notifications">
+        <main>
+          {snapStates.notifications.length ? (
+            <>
+              {snapStates.notifications
+                .slice(0, NOTIFICATIONS_DISPLAY_LIMIT)
+                .map((notification) => (
+                  <Notification
+                    key={notification._ids || notification.id}
+                    instance={instance}
+                    notification={notification}
+                    disableContextMenu
+                  />
+                ))}
+            </>
+          ) : uiState === 'loading' ? (
             <div class="ui-state">
-              <p>
-                <Trans>Unable to fetch notifications.</Trans>
-              </p>
-              <p>
-                <button type="button" onClick={loadNotifications}>
-                  <Trans>Try again</Trans>
-                </button>
-              </p>
+              <Loader abrupt />
             </div>
-          )
-        )}
-      </main>
+          ) : (
+            uiState === 'error' && (
+              <div class="ui-state">
+                <p>
+                  <Trans>Unable to fetch notifications.</Trans>
+                </p>
+                <p>
+                  <button type="button" onClick={loadNotifications}>
+                    <Trans>Try again</Trans>
+                  </button>
+                </p>
+              </div>
+            )
+          )}
+        </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' && (