Merge branch 'filters-v2' into 'develop'

filters v2 See merge request soapbox-pub/soapbox!2321
2023-03-10 11:03:46 +00:00 · 2023-03-10 11:03:46 +00:00 · b1471be142
commit b1471be142
parent 51524118d4 1d64f934d9
28 changed files with 818 additions and 262 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]

 ### Added
+- Posts: Support posts filtering on recent Mastodon versions

 ### Changed
 - Posts: truncate Nostr pubkeys in reply mentions.
--- a/app/soapbox/actions/filters.ts
+++ b/app/soapbox/actions/filters.ts
@ -12,10 +12,18 @@ const FILTERS_FETCH_REQUEST = 'FILTERS_FETCH_REQUEST';
 const FILTERS_FETCH_SUCCESS = 'FILTERS_FETCH_SUCCESS';
 const FILTERS_FETCH_FAIL    = 'FILTERS_FETCH_FAIL';

+const FILTER_FETCH_REQUEST = 'FILTER_FETCH_REQUEST';
+const FILTER_FETCH_SUCCESS = 'FILTER_FETCH_SUCCESS';
+const FILTER_FETCH_FAIL    = 'FILTER_FETCH_FAIL';
+
 const FILTERS_CREATE_REQUEST = 'FILTERS_CREATE_REQUEST';
 const FILTERS_CREATE_SUCCESS = 'FILTERS_CREATE_SUCCESS';
 const FILTERS_CREATE_FAIL    = 'FILTERS_CREATE_FAIL';

+const FILTERS_UPDATE_REQUEST = 'FILTERS_UPDATE_REQUEST';
+const FILTERS_UPDATE_SUCCESS = 'FILTERS_UPDATE_SUCCESS';
+const FILTERS_UPDATE_FAIL    = 'FILTERS_UPDATE_FAIL';
+
 const FILTERS_DELETE_REQUEST = 'FILTERS_DELETE_REQUEST';
 const FILTERS_DELETE_SUCCESS = 'FILTERS_DELETE_SUCCESS';
 const FILTERS_DELETE_FAIL    = 'FILTERS_DELETE_FAIL';
@ -25,22 +33,16 @@ const messages = defineMessages({
  removed: { id: 'filters.removed', defaultMessage: 'Filter deleted.' },
 });

-const fetchFilters = () =>
+type FilterKeywords = { keyword: string, whole_word: boolean }[];
+
+const fetchFiltersV1 = () =>
  (dispatch: AppDispatch, getState: () => RootState) => {
-    if (!isLoggedIn(getState)) return;
-
-    const state = getState();
-    const instance = state.instance;
-    const features = getFeatures(instance);
-
-    if (!features.filters) return;
-
    dispatch({
      type: FILTERS_FETCH_REQUEST,
      skipLoading: true,
    });

-    api(getState)
+    return api(getState)
      .get('/api/v1/filters')
      .then(({ data }) => dispatch({
        type: FILTERS_FETCH_SUCCESS,
@ -55,15 +57,105 @@ const fetchFilters = () =>
      }));
  };

-const createFilter = (phrase: string, expires_at: string, context: Array<string>, whole_word: boolean, irreversible: boolean) =>
+const fetchFiltersV2 = () =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch({
+      type: FILTERS_FETCH_REQUEST,
+      skipLoading: true,
+    });
+
+    return api(getState)
+      .get('/api/v2/filters')
+      .then(({ data }) => dispatch({
+        type: FILTERS_FETCH_SUCCESS,
+        filters: data,
+        skipLoading: true,
+      }))
+      .catch(err => dispatch({
+        type: FILTERS_FETCH_FAIL,
+        err,
+        skipLoading: true,
+        skipAlert: true,
+      }));
+  };
+
+const fetchFilters = (fromFiltersPage = false) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    if (!isLoggedIn(getState)) return;
+
+    const state = getState();
+    const instance = state.instance;
+    const features = getFeatures(instance);
+
+    if (features.filtersV2 && fromFiltersPage) return dispatch(fetchFiltersV2());
+
+    if (features.filters) return dispatch(fetchFiltersV1());
+  };
+
+const fetchFilterV1 = (id: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch({
+      type: FILTER_FETCH_REQUEST,
+      skipLoading: true,
+    });
+
+    return api(getState)
+      .get(`/api/v1/filters/${id}`)
+      .then(({ data }) => dispatch({
+        type: FILTER_FETCH_SUCCESS,
+        filter: data,
+        skipLoading: true,
+      }))
+      .catch(err => dispatch({
+        type: FILTER_FETCH_FAIL,
+        err,
+        skipLoading: true,
+        skipAlert: true,
+      }));
+  };
+
+const fetchFilterV2 = (id: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch({
+      type: FILTER_FETCH_REQUEST,
+      skipLoading: true,
+    });
+
+    return api(getState)
+      .get(`/api/v2/filters/${id}`)
+      .then(({ data }) => dispatch({
+        type: FILTER_FETCH_SUCCESS,
+        filter: data,
+        skipLoading: true,
+      }))
+      .catch(err => dispatch({
+        type: FILTER_FETCH_FAIL,
+        err,
+        skipLoading: true,
+        skipAlert: true,
+      }));
+  };
+
+const fetchFilter = (id: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const state = getState();
+    const instance = state.instance;
+    const features = getFeatures(instance);
+
+    if (features.filtersV2) return dispatch(fetchFilterV2(id));
+
+    if (features.filters) return dispatch(fetchFilterV1(id));
+  };
+
+const createFilterV1 = (title: string, expires_in: string | null, context: Array<string>, hide: boolean, keywords: FilterKeywords) =>
  (dispatch: AppDispatch, getState: () => RootState) => {
    dispatch({ type: FILTERS_CREATE_REQUEST });
    return api(getState).post('/api/v1/filters', {
-      phrase,
+      phrase: keywords[0].keyword,
      context,
-      irreversible,
-      whole_word,
-      expires_at,
+      irreversible: hide,
+      whole_word: keywords[0].whole_word,
+      expires_in,
    }).then(response => {
      dispatch({ type: FILTERS_CREATE_SUCCESS, filter: response.data });
      toast.success(messages.added);
@ -72,7 +164,80 @@ const createFilter = (phrase: string, expires_at: string, context: Array<string>
    });
  };

-const deleteFilter = (id: string) =>
+const createFilterV2 = (title: string, expires_in: string | null, context: Array<string>, hide: boolean, keywords_attributes: FilterKeywords) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch({ type: FILTERS_CREATE_REQUEST });
+    return api(getState).post('/api/v2/filters', {
+      title,
+      context,
+      filter_action: hide ? 'hide' : 'warn',
+      expires_in,
+      keywords_attributes,
+    }).then(response => {
+      dispatch({ type: FILTERS_CREATE_SUCCESS, filter: response.data });
+      toast.success(messages.added);
+    }).catch(error => {
+      dispatch({ type: FILTERS_CREATE_FAIL, error });
+    });
+  };
+
+const createFilter = (title: string, expires_in: string | null, context: Array<string>, hide: boolean, keywords: FilterKeywords) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const state = getState();
+    const instance = state.instance;
+    const features = getFeatures(instance);
+
+    if (features.filtersV2) return dispatch(createFilterV2(title, expires_in, context, hide, keywords));
+
+    return dispatch(createFilterV1(title, expires_in, context, hide, keywords));
+  };
+
+const updateFilterV1 = (id: string, title: string, expires_in: string | null, context: Array<string>, hide: boolean, keywords: FilterKeywords) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch({ type: FILTERS_UPDATE_REQUEST });
+    return api(getState).patch(`/api/v1/filters/${id}`, {
+      phrase: keywords[0].keyword,
+      context,
+      irreversible: hide,
+      whole_word: keywords[0].whole_word,
+      expires_in,
+    }).then(response => {
+      dispatch({ type: FILTERS_UPDATE_SUCCESS, filter: response.data });
+      toast.success(messages.added);
+    }).catch(error => {
+      dispatch({ type: FILTERS_UPDATE_FAIL, error });
+    });
+  };
+
+const updateFilterV2 = (id: string, title: string, expires_in: string | null, context: Array<string>, hide: boolean, keywords_attributes: FilterKeywords) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch({ type: FILTERS_UPDATE_REQUEST });
+    return api(getState).patch(`/api/v2/filters/${id}`, {
+      title,
+      context,
+      filter_action: hide ? 'hide' : 'warn',
+      expires_in,
+      keywords_attributes,
+    }).then(response => {
+      dispatch({ type: FILTERS_UPDATE_SUCCESS, filter: response.data });
+      toast.success(messages.added);
+    }).catch(error => {
+      dispatch({ type: FILTERS_UPDATE_FAIL, error });
+    });
+  };
+
+const updateFilter = (id: string, title: string, expires_in: string | null, context: Array<string>, hide: boolean, keywords: FilterKeywords) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const state = getState();
+    const instance = state.instance;
+    const features = getFeatures(instance);
+
+    if (features.filtersV2) return dispatch(updateFilterV2(id, title, expires_in, context, hide, keywords));
+
+    return dispatch(updateFilterV1(id, title, expires_in, context, hide, keywords));
+  };
+
+const deleteFilterV1 = (id: string) =>
  (dispatch: AppDispatch, getState: () => RootState) => {
    dispatch({ type: FILTERS_DELETE_REQUEST });
    return api(getState).delete(`/api/v1/filters/${id}`).then(response => {
@ -83,17 +248,47 @@ const deleteFilter = (id: string) =>
    });
  };

+const deleteFilterV2 = (id: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch({ type: FILTERS_DELETE_REQUEST });
+    return api(getState).delete(`/api/v2/filters/${id}`).then(response => {
+      dispatch({ type: FILTERS_DELETE_SUCCESS, filter: response.data });
+      toast.success(messages.removed);
+    }).catch(error => {
+      dispatch({ type: FILTERS_DELETE_FAIL, error });
+    });
+  };
+
+const deleteFilter = (id: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const state = getState();
+    const instance = state.instance;
+    const features = getFeatures(instance);
+
+    if (features.filtersV2) return dispatch(deleteFilterV2(id));
+
+    return dispatch(deleteFilterV1(id));
+  };
+
 export {
  FILTERS_FETCH_REQUEST,
  FILTERS_FETCH_SUCCESS,
  FILTERS_FETCH_FAIL,
+  FILTER_FETCH_REQUEST,
+  FILTER_FETCH_SUCCESS,
+  FILTER_FETCH_FAIL,
  FILTERS_CREATE_REQUEST,
  FILTERS_CREATE_SUCCESS,
  FILTERS_CREATE_FAIL,
+  FILTERS_UPDATE_REQUEST,
+  FILTERS_UPDATE_SUCCESS,
+  FILTERS_UPDATE_FAIL,
  FILTERS_DELETE_REQUEST,
  FILTERS_DELETE_SUCCESS,
  FILTERS_DELETE_FAIL,
  fetchFilters,
+  fetchFilter,
  createFilter,
+  updateFilter,
  deleteFilter,
 };
--- a/app/soapbox/actions/statuses.ts
+++ b/app/soapbox/actions/statuses.ts
@ -48,6 +48,8 @@ const STATUS_TRANSLATE_SUCCESS = 'STATUS_TRANSLATE_SUCCESS';
 const STATUS_TRANSLATE_FAIL    = 'STATUS_TRANSLATE_FAIL';
 const STATUS_TRANSLATE_UNDO    = 'STATUS_TRANSLATE_UNDO';

+const STATUS_UNFILTER = 'STATUS_UNFILTER';
+
 const statusExists = (getState: () => RootState, statusId: string) => {
  return (getState().statuses.get(statusId) || null) !== null;
 };
@ -335,6 +337,11 @@ const undoStatusTranslation = (id: string) => ({
  id,
 });

+const unfilterStatus = (id: string) => ({
+  type: STATUS_UNFILTER,
+  id,
+});
+
 export {
  STATUS_CREATE_REQUEST,
  STATUS_CREATE_SUCCESS,
@ -363,6 +370,7 @@ export {
  STATUS_TRANSLATE_SUCCESS,
  STATUS_TRANSLATE_FAIL,
  STATUS_TRANSLATE_UNDO,
+  STATUS_UNFILTER,
  createStatus,
  editStatus,
  fetchStatus,
@ -381,4 +389,5 @@ export {
  toggleStatusHidden,
  translateStatus,
  undoStatusTranslation,
+  unfilterStatus,
 };
--- a/app/soapbox/components/sidebar-menu.tsx
+++ b/app/soapbox/components/sidebar-menu.tsx
@ -297,7 +297,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                    />
                  )}

-                  {features.filters && (
+                  {(features.filters || features.filtersV2) && (
                    <SidebarLink
                      to='/filters'
                      icon={require('@tabler/icons/filter.svg')}
--- a/app/soapbox/components/status.tsx
+++ b/app/soapbox/components/status.tsx
@ -7,7 +7,7 @@ import { useHistory } from 'react-router-dom';
 import { mentionCompose, replyCompose } from 'soapbox/actions/compose';
 import { toggleFavourite, toggleReblog } from 'soapbox/actions/interactions';
 import { openModal } from 'soapbox/actions/modals';
-import { toggleStatusHidden } from 'soapbox/actions/statuses';
+import { toggleStatusHidden, unfilterStatus } from 'soapbox/actions/statuses';
 import Icon from 'soapbox/components/icon';
 import TranslateButton from 'soapbox/components/translate-button';
 import AccountContainer from 'soapbox/containers/account-container';
@ -93,6 +93,8 @@ const Status: React.FC<IStatus> = (props) => {
  const statusUrl = `/@${actualStatus.getIn(['account', 'acct'])}/posts/${actualStatus.id}`;
  const group = actualStatus.group as GroupEntity | null;

+  const filtered = (status.filtered.size || actualStatus.filtered.size) > 0;
+
  // Track height changes we know about to compensate scrolling.
  useEffect(() => {
    didShowCard.current = Boolean(!muted && !hidden && status?.card);
@ -202,6 +204,8 @@ const Status: React.FC<IStatus> = (props) => {
    _expandEmojiSelector();
  };

+  const handleUnfilter = () => dispatch(unfilterStatus(status.filtered.size ? status.id : actualStatus.id));
+
  const _expandEmojiSelector = (): void => {
    const firstEmoji: HTMLDivElement | null | undefined = node.current?.querySelector('.emoji-react-selector .emoji-react-selector__emoji');
    firstEmoji?.focus();
@ -281,7 +285,7 @@ const Status: React.FC<IStatus> = (props) => {
    );
  }

-  if (status.filtered || actualStatus.filtered) {
+  if (filtered && status.showFiltered) {
    const minHandlers = muted ? undefined : {
      moveUp: handleHotkeyMoveUp,
      moveDown: handleHotkeyMoveDown,
@ -291,7 +295,11 @@ const Status: React.FC<IStatus> = (props) => {
      <HotKeys handlers={minHandlers}>
        <div className={clsx('status__wrapper text-center', { focusable })} tabIndex={focusable ? 0 : undefined} ref={node}>
          <Text theme='muted'>
-            <FormattedMessage id='status.filtered' defaultMessage='Filtered' />
+            <FormattedMessage id='status.filtered' defaultMessage='Filtered' />: {status.filtered.join(', ')}.
+            {' '}
+            <button className='text-primary-600 hover:underline dark:text-accent-blue' onClick={handleUnfilter}>
+              <FormattedMessage id='status.show_filter_reason' defaultMessage='Show anyway' />
+            </button>
          </Text>
        </div>
      </HotKeys>
--- a/app/soapbox/components/ui/streamfield/streamfield.tsx
+++ b/app/soapbox/components/ui/streamfield/streamfield.tsx
@ -33,6 +33,8 @@ interface IStreamfield {
  onChange: (values: any[]) => void
  /** Input to render for each value. */
  component: StreamfieldComponent<any>
+  /** Minimum number of allowed inputs. */
+  minItems?: number
  /** Maximum number of allowed inputs. */
  maxItems?: number
 }
@ -47,6 +49,7 @@ const Streamfield: React.FC<IStreamfield> = ({
  onChange,
  component: Component,
  maxItems = Infinity,
+  minItems = 0,
 }) => {
  const intl = useIntl();

@ -67,10 +70,10 @@ const Streamfield: React.FC<IStreamfield> = ({

      {(values.length > 0) && (
        <Stack>
-          {values.map((value, i) => (
+          {values.map((value, i) => value?._destroy ? null : (
            <HStack space={2} alignItems='center'>
              <Component key={i} onChange={handleChange(i)} value={value} />
-              {onRemoveItem && (
+              {values.length > minItems && onRemoveItem && (
                <IconButton
                  iconClassName='h-4 w-4'
                  className='bg-transparent text-gray-400 hover:text-gray-600'
--- a/app/soapbox/features/auth-token-list/index.tsx
+++ b/app/soapbox/features/auth-token-list/index.tsx
@ -3,7 +3,7 @@ import { defineMessages, FormattedDate, useIntl } from 'react-intl';

 import { openModal } from 'soapbox/actions/modals';
 import { fetchOAuthTokens, revokeOAuthTokenById } from 'soapbox/actions/security';
-import { Button, Card, CardBody, CardHeader, CardTitle, Column, Spinner, Stack, Text } from 'soapbox/components/ui';
+import { Button, Card, CardBody, CardHeader, CardTitle, Column, HStack, Spinner, Stack, Text } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 import { Token } from 'soapbox/reducers/security';

@ -59,12 +59,11 @@ const AuthToken: React.FC<IAuthToken> = ({ token, isCurrent }) => {
            </Text>
          )}
        </Stack>
-
-        <div className='flex justify-end'>
+        <HStack justifyContent='end'>
          <Button theme={isCurrent ? 'danger' : 'primary'} onClick={handleRevoke}>
            {intl.formatMessage(messages.revoke)}
          </Button>
-        </div>
+        </HStack>
      </Stack>
    </div>
  );
--- a/app/soapbox/features/filters/edit-filter.tsx
+++ b/app/soapbox/features/filters/edit-filter.tsx
@ -0,0 +1,286 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { useHistory } from 'react-router-dom';
+
+import { createFilter, fetchFilter, updateFilter } from 'soapbox/actions/filters';
+import List, { ListItem } from 'soapbox/components/list';
+import MissingIndicator from 'soapbox/components/missing-indicator';
+import { Button, Column, Form, FormActions, FormGroup, HStack, Input, Stack, Streamfield, Text, Toggle } from 'soapbox/components/ui';
+import { useAppDispatch, useFeatures } from 'soapbox/hooks';
+import { normalizeFilter } from 'soapbox/normalizers';
+import toast from 'soapbox/toast';
+
+import { SelectDropdown } from '../forms';
+
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
+
+interface IFilterField {
+  id?: string
+  keyword: string
+  whole_word: boolean
+  _destroy?: boolean
+}
+
+interface IEditFilter {
+  params: { id?: string }
+}
+
+const messages = defineMessages({
+  subheading_add_new: { id: 'column.filters.subheading_add_new', defaultMessage: 'Add New Filter' },
+  title: { id: 'column.filters.title', defaultMessage: 'Title' },
+  keyword: { id: 'column.filters.keyword', defaultMessage: 'Keyword or phrase' },
+  keywords: { id: 'column.filters.keywords', defaultMessage: 'Keywords or phrases' },
+  expires: { id: 'column.filters.expires', defaultMessage: 'Expire after' },
+  home_timeline: { id: 'column.filters.home_timeline', defaultMessage: 'Home timeline' },
+  public_timeline: { id: 'column.filters.public_timeline', defaultMessage: 'Public timeline' },
+  notifications: { id: 'column.filters.notifications', defaultMessage: 'Notifications' },
+  conversations: { id: 'column.filters.conversations', defaultMessage: 'Conversations' },
+  accounts: { id: 'column.filters.accounts', defaultMessage: 'Accounts' },
+  drop_header: { id: 'column.filters.drop_header', defaultMessage: 'Drop instead of hide' },
+  drop_hint: { id: 'column.filters.drop_hint', defaultMessage: 'Filtered posts will disappear irreversibly, even if filter is later removed' },
+  hide_header: { id: 'column.filters.hide_header', defaultMessage: 'Hide completely' },
+  hide_hint: { id: 'column.filters.hide_hint', defaultMessage: 'Completely hide the filtered content, instead of showing a warning' },
+  add_new: { id: 'column.filters.add_new', defaultMessage: 'Add New Filter' },
+  edit: { id: 'column.filters.edit', defaultMessage: 'Edit Filter' },
+  create_error: { id: 'column.filters.create_error', defaultMessage: 'Error adding filter' },
+  expiration_never: { id: 'colum.filters.expiration.never', defaultMessage: 'Never' },
+  expiration_1800: { id: 'colum.filters.expiration.1800', defaultMessage: '30 minutes' },
+  expiration_3600: { id: 'colum.filters.expiration.3600', defaultMessage: '1 hour' },
+  expiration_21600: { id: 'colum.filters.expiration.21600', defaultMessage: '6 hours' },
+  expiration_43200: { id: 'colum.filters.expiration.43200', defaultMessage: '12 hours' },
+  expiration_86400: { id: 'colum.filters.expiration.86400', defaultMessage: '1 day' },
+  expiration_604800: { id: 'colum.filters.expiration.604800', defaultMessage: '1 week' },
+});
+
+const FilterField: StreamfieldComponent<IFilterField> = ({ value, onChange }) => {
+  const intl = useIntl();
+
+  const handleChange = (key: string): React.ChangeEventHandler<HTMLInputElement> =>
+    e => onChange({ ...value, [key]: e.currentTarget[e.currentTarget.type === 'checkbox' ? 'checked' : 'value'] });
+
+  return (
+    <HStack space={2} grow>
+      <Input
+        type='text'
+        outerClassName='w-2/5 grow'
+        value={value.keyword}
+        onChange={handleChange('keyword')}
+        placeholder={intl.formatMessage(messages.keyword)}
+      />
+      <HStack alignItems='center' space={2}>
+        <Toggle
+          checked={value.whole_word}
+          onChange={handleChange('whole_word')}
+          icons={false}
+        />
+
+        <Text tag='span' theme='muted'>
+          <FormattedMessage id='column.filters.whole_word' defaultMessage='Whole word' />
+        </Text>
+      </HStack>
+    </HStack>
+  );
+};
+
+const EditFilter: React.FC<IEditFilter> = ({ params }) => {
+  const intl = useIntl();
+  const history = useHistory();
+  const dispatch = useAppDispatch();
+  const features = useFeatures();
+
+  const [loading, setLoading] = useState(false);
+  const [notFound, setNotFound] = useState(false);
+
+  const [title, setTitle] = useState('');
+  const [expiresIn, setExpiresIn] = useState<string | null>(null);
+  const [homeTimeline, setHomeTimeline] = useState(true);
+  const [publicTimeline, setPublicTimeline] = useState(false);
+  const [notifications, setNotifications] = useState(false);
+  const [conversations, setConversations] = useState(false);
+  const [accounts, setAccounts] = useState(false);
+  const [hide, setHide] = useState(false);
+  const [keywords, setKeywords] = useState<IFilterField[]>([{ keyword: '', whole_word: false }]);
+
+  const expirations = useMemo(() => ({
+    '': intl.formatMessage(messages.expiration_never),
+    1800: intl.formatMessage(messages.expiration_1800),
+    3600: intl.formatMessage(messages.expiration_3600),
+    21600: intl.formatMessage(messages.expiration_21600),
+    43200: intl.formatMessage(messages.expiration_43200),
+    86400: intl.formatMessage(messages.expiration_86400),
+    604800: intl.formatMessage(messages.expiration_604800),
+  }), []);
+
+  const handleSelectChange: React.ChangeEventHandler<HTMLSelectElement> = e => {
+    setExpiresIn(e.target.value);
+  };
+
+  const handleAddNew: React.FormEventHandler = e => {
+    e.preventDefault();
+    const context: Array<string> = [];
+
+    if (homeTimeline) {
+      context.push('home');
+    }
+    if (publicTimeline) {
+      context.push('public');
+    }
+    if (notifications) {
+      context.push('notifications');
+    }
+    if (conversations) {
+      context.push('thread');
+    }
+    if (accounts) {
+      context.push('account');
+    }
+
+    dispatch(params.id
+      ? updateFilter(params.id, title, expiresIn, context, hide, keywords)
+      : createFilter(title, expiresIn, context, hide, keywords)).then(() => {
+      history.push('/filters');
+    }).catch(() => {
+      toast.error(intl.formatMessage(messages.create_error));
+    });
+  };
+
+  const handleChangeKeyword = (keywords: { keyword: string, whole_word: boolean }[]) => setKeywords(keywords);
+
+  const handleAddKeyword = () => setKeywords(keywords => [...keywords, { keyword: '', whole_word: false }]);
+
+  const handleRemoveKeyword = (i: number) => setKeywords(keywords => keywords[i].id
+    ? keywords.map((keyword, index) => index === i ? { ...keyword, _destroy: true } : keyword)
+    : keywords.filter((_, index) => index !== i));
+
+  useEffect(() => {
+    if (params.id) {
+      setLoading(true);
+      dispatch(fetchFilter(params.id))?.then((res: any) => {
+        if (res.filter) {
+          const filter = normalizeFilter(res.filter);
+
+          setTitle(filter.title);
+          setHomeTimeline(filter.context.includes('home'));
+          setPublicTimeline(filter.context.includes('public'));
+          setNotifications(filter.context.includes('notifications'));
+          setConversations(filter.context.includes('thread'));
+          setAccounts(filter.context.includes('account'));
+          setHide(filter.filter_action === 'hide');
+          setKeywords(filter.keywords.toJS());
+        } else {
+          setNotFound(true);
+        }
+        setLoading(false);
+      });
+    }
+  }, [params.id]);
+
+  if (notFound) return <MissingIndicator />;
+
+  return (
+    <Column className='filter-settings-panel' label={intl.formatMessage(messages.subheading_add_new)}>
+      <Form onSubmit={handleAddNew}>
+        <FormGroup labelText={intl.formatMessage(messages.title)}>
+          <Input
+            required
+            type='text'
+            name='title'
+            value={title}
+            onChange={({ target }) => setTitle(target.value)}
+          />
+        </FormGroup>
+
+        {features.filtersExpiration && (
+          <FormGroup labelText={intl.formatMessage(messages.expires)}>
+            <SelectDropdown
+              items={expirations}
+              defaultValue={''}
+              onChange={handleSelectChange}
+            />
+          </FormGroup>
+        )}
+
+        <Stack>
+          <Text size='sm' weight='medium'>
+            <FormattedMessage id='filters.context_header' defaultMessage='Filter contexts' />
+          </Text>
+          <Text size='xs' theme='muted'>
+            <FormattedMessage id='filters.context_hint' defaultMessage='One or multiple contexts where the filter should apply' />
+          </Text>
+        </Stack>
+
+        <List>
+          <ListItem label={intl.formatMessage(messages.home_timeline)}>
+            <Toggle
+              name='home_timeline'
+              checked={homeTimeline}
+              onChange={({ target }) => setHomeTimeline(target.checked)}
+            />
+          </ListItem>
+          <ListItem label={intl.formatMessage(messages.public_timeline)}>
+            <Toggle
+              name='public_timeline'
+              checked={publicTimeline}
+              onChange={({ target }) => setPublicTimeline(target.checked)}
+            />
+          </ListItem>
+          <ListItem label={intl.formatMessage(messages.notifications)}>
+            <Toggle
+              name='notifications'
+              checked={notifications}
+              onChange={({ target }) => setNotifications(target.checked)}
+            />
+          </ListItem>
+          <ListItem label={intl.formatMessage(messages.conversations)}>
+            <Toggle
+              name='conversations'
+              checked={conversations}
+              onChange={({ target }) => setConversations(target.checked)}
+            />
+          </ListItem>
+          {features.filtersV2 && (
+            <ListItem label={intl.formatMessage(messages.accounts)}>
+              <Toggle
+                name='accounts'
+                checked={accounts}
+                onChange={({ target }) => setAccounts(target.checked)}
+              />
+            </ListItem>
+          )}
+        </List>
+
+        <List>
+          <ListItem
+            label={intl.formatMessage(features.filtersV2 ? messages.hide_header : messages.drop_header)}
+            hint={intl.formatMessage(features.filtersV2 ? messages.hide_hint : messages.drop_hint)}
+          >
+            <Toggle
+              name='hide'
+              checked={hide}
+              onChange={({ target }) => setHide(target.checked)}
+            />
+          </ListItem>
+        </List>
+
+        <Streamfield
+          label={intl.formatMessage(messages.keywords)}
+          component={FilterField}
+          values={keywords}
+          onChange={handleChangeKeyword}
+          onAddItem={handleAddKeyword}
+          onRemoveItem={handleRemoveKeyword}
+          minItems={1}
+          maxItems={features.filtersV2 ? Infinity : 1}
+        />
+
+        <FormActions>
+          <Button type='submit' theme='primary' disabled={loading}>
+            {intl.formatMessage(params.id ? messages.edit : messages.add_new)}
+          </Button>
+        </FormActions>
+      </Form>
+    </Column>
+  );
+};
+
+export default EditFilter;
--- a/app/soapbox/features/filters/index.tsx
+++ b/app/soapbox/features/filters/index.tsx
@ -1,31 +1,23 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { useHistory } from 'react-router-dom';

-import { fetchFilters, createFilter, deleteFilter } from 'soapbox/actions/filters';
-import List, { ListItem } from 'soapbox/components/list';
+import { fetchFilters, deleteFilter } from 'soapbox/actions/filters';
+import RelativeTimestamp from 'soapbox/components/relative-timestamp';
 import ScrollableList from 'soapbox/components/scrollable-list';
-import { Button, CardHeader, CardTitle, Column, Form, FormActions, FormGroup, HStack, IconButton, Input, Stack, Text, Toggle } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { Button, Column, HStack, Stack, Text } from 'soapbox/components/ui';
+import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
 import toast from 'soapbox/toast';

 const messages = defineMessages({
  heading: { id: 'column.filters', defaultMessage: 'Muted words' },
-  subheading_add_new: { id: 'column.filters.subheading_add_new', defaultMessage: 'Add New Filter' },
-  keyword: { id: 'column.filters.keyword', defaultMessage: 'Keyword or phrase' },
-  expires: { id: 'column.filters.expires', defaultMessage: 'Expire after' },
-  expires_hint: { id: 'column.filters.expires_hint', defaultMessage: 'Expiration dates are not currently supported' },
  home_timeline: { id: 'column.filters.home_timeline', defaultMessage: 'Home timeline' },
  public_timeline: { id: 'column.filters.public_timeline', defaultMessage: 'Public timeline' },
  notifications: { id: 'column.filters.notifications', defaultMessage: 'Notifications' },
  conversations: { id: 'column.filters.conversations', defaultMessage: 'Conversations' },
-  drop_header: { id: 'column.filters.drop_header', defaultMessage: 'Drop instead of hide' },
-  drop_hint: { id: 'column.filters.drop_hint', defaultMessage: 'Filtered posts will disappear irreversibly, even if filter is later removed' },
-  whole_word_header: { id: 'column.filters.whole_word_header', defaultMessage: 'Whole word' },
-  whole_word_hint: { id: 'column.filters.whole_word_hint', defaultMessage: 'When the keyword or phrase is alphanumeric only, it will only be applied if it matches the whole word' },
-  add_new: { id: 'column.filters.add_new', defaultMessage: 'Add New Filter' },
-  create_error: { id: 'column.filters.create_error', defaultMessage: 'Error adding filter' },
+  accounts: { id: 'column.filters.accounts', defaultMessage: 'Accounts' },
  delete_error: { id: 'column.filters.delete_error', defaultMessage: 'Error deleting filter' },
-  subheading_filters: { id: 'column.filters.subheading_filters', defaultMessage: 'Current Filters' },
+  edit: { id: 'column.filters.edit', defaultMessage: 'Edit' },
  delete: { id: 'column.filters.delete', defaultMessage: 'Delete' },
 });

@ -34,167 +26,44 @@ const contexts = {
  public: messages.public_timeline,
  notifications: messages.notifications,
  thread: messages.conversations,
+  account: messages.accounts,
 };

-// const expirations = {
-//   null: 'Never',
-//   // 3600: '30 minutes',
-//   // 21600: '1 hour',
-//   // 43200: '12 hours',
-//   // 86400 : '1 day',
-//   // 604800: '1 week',
-// };
-
 const Filters = () => {
  const intl = useIntl();
  const dispatch = useAppDispatch();
+  const history = useHistory();
+  const { filtersV2 } = useFeatures();

  const filters = useAppSelector((state) => state.filters);

-  const [phrase, setPhrase] = useState('');
-  const [expiresAt] = useState('');
-  const [homeTimeline, setHomeTimeline] = useState(true);
-  const [publicTimeline, setPublicTimeline] = useState(false);
-  const [notifications, setNotifications] = useState(false);
-  const [conversations, setConversations] = useState(false);
-  const [irreversible, setIrreversible] = useState(false);
-  const [wholeWord, setWholeWord] = useState(true);
-
-  // const handleSelectChange = e => {
-  //   this.setState({ [e.target.name]: e.target.value });
-  // };
-
-  const handleAddNew: React.FormEventHandler = e => {
-    e.preventDefault();
-    const context: Array<string> = [];
-
-    if (homeTimeline) {
-      context.push('home');
-    }
-    if (publicTimeline) {
-      context.push('public');
-    }
-    if (notifications) {
-      context.push('notifications');
-    }
-    if (conversations) {
-      context.push('thread');
-    }
-
-    dispatch(createFilter(phrase, expiresAt, context, wholeWord, irreversible)).then(() => {
-      return dispatch(fetchFilters());
-    }).catch(error => {
-      toast.error(intl.formatMessage(messages.create_error));
-    });
-  };
+  const handleFilterEdit = (id: string) => () => history.push(`/filters/${id}`);

  const handleFilterDelete = (id: string) => () => {
    dispatch(deleteFilter(id)).then(() => {
-      return dispatch(fetchFilters());
+      return dispatch(fetchFilters(true));
    }).catch(() => {
      toast.error(intl.formatMessage(messages.delete_error));
    });
  };

  useEffect(() => {
-    dispatch(fetchFilters());
+    dispatch(fetchFilters(true));
  }, []);

  const emptyMessage = <FormattedMessage id='empty_column.filters' defaultMessage="You haven't created any muted words yet." />;

  return (
    <Column className='filter-settings-panel' label={intl.formatMessage(messages.heading)}>
-      <CardHeader>
-        <CardTitle title={intl.formatMessage(messages.subheading_add_new)} />
-      </CardHeader>
-      <Form onSubmit={handleAddNew}>
-        <FormGroup labelText={intl.formatMessage(messages.keyword)}>
-          <Input
-            required
-            type='text'
-            name='phrase'
-            onChange={({ target }) => setPhrase(target.value)}
-          />
-        </FormGroup>
-        {/* <FormGroup labelText={intl.formatMessage(messages.expires)} hintText={intl.formatMessage(messages.expires_hint)}>
-          <SelectDropdown
-            items={expirations}
-            defaultValue={expirations.never}
-            onChange={this.handleSelectChange}
-          />
-        </FormGroup> */}
-
-        <Stack>
-          <Text size='sm' weight='medium'>
-            <FormattedMessage id='filters.context_header' defaultMessage='Filter contexts' />
-          </Text>
-          <Text size='xs' theme='muted'>
-            <FormattedMessage id='filters.context_hint' defaultMessage='One or multiple contexts where the filter should apply' />
-          </Text>
-        </Stack>
-
-        <List>
-          <ListItem label={intl.formatMessage(messages.home_timeline)}>
-            <Toggle
-              name='home_timeline'
-              checked={homeTimeline}
-              onChange={({ target }) => setHomeTimeline(target.checked)}
-            />
-          </ListItem>
-          <ListItem label={intl.formatMessage(messages.public_timeline)}>
-            <Toggle
-              name='public_timeline'
-              checked={publicTimeline}
-              onChange={({ target }) => setPublicTimeline(target.checked)}
-            />
-          </ListItem>
-          <ListItem label={intl.formatMessage(messages.notifications)}>
-            <Toggle
-              name='notifications'
-              checked={notifications}
-              onChange={({ target }) => setNotifications(target.checked)}
-            />
-          </ListItem>
-          <ListItem label={intl.formatMessage(messages.conversations)}>
-            <Toggle
-              name='conversations'
-              checked={conversations}
-              onChange={({ target }) => setConversations(target.checked)}
-            />
-          </ListItem>
-        </List>
-
-        <List>
-          <ListItem
-            label={intl.formatMessage(messages.drop_header)}
-            hint={intl.formatMessage(messages.drop_hint)}
-          >
-            <Toggle
-              name='irreversible'
-              checked={irreversible}
-              onChange={({ target }) => setIrreversible(target.checked)}
-            />
-          </ListItem>
-          <ListItem
-            label={intl.formatMessage(messages.whole_word_header)}
-            hint={intl.formatMessage(messages.whole_word_hint)}
-          >
-            <Toggle
-              name='whole_word'
-              checked={wholeWord}
-              onChange={({ target }) => setWholeWord(target.checked)}
-            />
-          </ListItem>
-        </List>
-
-        <FormActions>
-          <Button type='submit' theme='primary'>{intl.formatMessage(messages.add_new)}</Button>
-        </FormActions>
-      </Form>
-
-      <CardHeader>
-        <CardTitle title={intl.formatMessage(messages.subheading_filters)} />
-      </CardHeader>
+      <HStack className='mb-4' space={2} justifyContent='end'>
+        <Button
+          to='/filters/new'
+          theme='primary'
+          size='sm'
+        >
+          <FormattedMessage id='filters.create_filter' defaultMessage='Create filter' />
+        </Button>
+      </HStack>

      <ScrollableList
        scrollKey='filters'
@ -202,38 +71,48 @@ const Filters = () => {
        itemClassName='pb-4 last:pb-0'
      >
        {filters.map((filter, i) => (
-          <HStack space={1} justifyContent='between'>
-            <Stack space={1}>
-              <Text weight='medium'>
-                <FormattedMessage id='filters.filters_list_phrase_label' defaultMessage='Keyword or phrase:' />
-                {' '}
-                <Text theme='muted' tag='span'>{filter.phrase}</Text>
-              </Text>
-              <Text weight='medium'>
-                <FormattedMessage id='filters.filters_list_context_label' defaultMessage='Filter contexts:' />
-                {' '}
-                <Text theme='muted' tag='span'>{filter.context.map(context => contexts[context] ? intl.formatMessage(contexts[context]) : context).join(', ')}</Text>
-              </Text>
-              <HStack space={4}>
+          <div className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
+            <Stack space={2}>
+              <Stack className='grow' space={1}>
                <Text weight='medium'>
-                  {filter.irreversible ?
-                    <FormattedMessage id='filters.filters_list_drop' defaultMessage='Drop' /> :
-                    <FormattedMessage id='filters.filters_list_hide' defaultMessage='Hide' />}
+                  <FormattedMessage id='filters.filters_list_phrases_label' defaultMessage='Keywords or phrases:' />
+                  {' '}
+                  <Text theme='muted' tag='span'>{filter.keywords.map(keyword => keyword.keyword).join(', ')}</Text>
                </Text>
-                {filter.whole_word && (
+                <Text weight='medium'>
+                  <FormattedMessage id='filters.filters_list_context_label' defaultMessage='Filter contexts:' />
+                  {' '}
+                  <Text theme='muted' tag='span'>{filter.context.map(context => contexts[context] ? intl.formatMessage(contexts[context]) : context).join(', ')}</Text>
+                </Text>
+                <HStack space={4} wrap>
                  <Text weight='medium'>
-                    <FormattedMessage id='filters.filters_list_whole-word' defaultMessage='Whole word' />
+                    {filtersV2 ? (
+                      filter.filter_action === 'hide' ?
+                        <FormattedMessage id='filters.filters_list_hide_completely' defaultMessage='Hide content' /> :
+                        <FormattedMessage id='filters.filters_list_warn' defaultMessage='Display warning' />
+                    ) : (filter.filter_action === 'hide' ?
+                      <FormattedMessage id='filters.filters_list_drop' defaultMessage='Drop' /> :
+                      <FormattedMessage id='filters.filters_list_hide' defaultMessage='Hide' />)}
                  </Text>
-                )}
+                  {filter.expires_at && (
+                    <Text weight='medium'>
+                      {new Date(filter.expires_at).getTime() <= Date.now()
+                        ? <FormattedMessage id='filters.filters_list_expired' defaultMessage='Expired' />
+                        : <RelativeTimestamp timestamp={filter.expires_at} className='whitespace-nowrap' futureDate />}
+                    </Text>
+                  )}
+                </HStack>
+              </Stack>
+              <HStack space={2} justifyContent='end'>
+                <Button theme='primary' onClick={handleFilterEdit(filter.id)}>
+                  {intl.formatMessage(messages.edit)}
+                </Button>
+                <Button theme='danger' onClick={handleFilterDelete(filter.id)}>
+                  {intl.formatMessage(messages.delete)}
+                </Button>
              </HStack>
            </Stack>
-            <IconButton
-              iconClassName='h-5 w-5 text-gray-700 hover:text-gray-800 dark:text-gray-600 dark:hover:text-gray-500'
-              src={require('@tabler/icons/trash.svg')}
-              onClick={handleFilterDelete(filter.id)}
-              title={intl.formatMessage(messages.delete)}
-            />
-          </HStack>
+          </div>
        ))}
      </ScrollableList>
    </Column>
--- a/app/soapbox/features/ui/components/link-footer.tsx
+++ b/app/soapbox/features/ui/components/link-footer.tsx
@ -45,7 +45,7 @@ const LinkFooter: React.FC = (): JSX.Element => {
          )}
          <FooterLink to='/blocks'><FormattedMessage id='navigation_bar.blocks' defaultMessage='Blocks' /></FooterLink>
          <FooterLink to='/mutes'><FormattedMessage id='navigation_bar.mutes' defaultMessage='Mutes' /></FooterLink>
-          {features.filters && (
+          {(features.filters || features.filtersV2) && (
            <FooterLink to='/filters'><FormattedMessage id='navigation_bar.filters' defaultMessage='Filters' /></FooterLink>
          )}
          {features.federating && (
--- a/app/soapbox/features/ui/components/modals/edit-announcement-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/edit-announcement-modal.tsx
@ -96,7 +96,7 @@ const EditAnnouncementModal: React.FC<IEditAnnouncementModal> = ({ onClose }) =>
            />)}
          </BundleContainer>
        </FormGroup>
-        <HStack  alignItems='center' space={2}>
+        <HStack alignItems='center' space={2}>
          <Toggle
            icons={false}
            checked={allDay}
--- a/app/soapbox/features/ui/index.tsx
+++ b/app/soapbox/features/ui/index.tsx
@ -66,6 +66,7 @@ import {
  DomainBlocks,
  Mutes,
  Filters,
+  EditFilter,
  PinnedStatuses,
  Search,
  ListTimeline,
@ -267,7 +268,9 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
      <WrappedRoute path='/blocks' page={DefaultPage} component={Blocks} content={children} />
      {features.federating && <WrappedRoute path='/domain_blocks' page={DefaultPage} component={DomainBlocks} content={children} />}
      <WrappedRoute path='/mutes' page={DefaultPage} component={Mutes} content={children} />
-      {features.filters && <WrappedRoute path='/filters' page={DefaultPage} component={Filters} content={children} />}
+      {(features.filters || features.filtersV2) && <WrappedRoute path='/filters/new' page={DefaultPage} component={EditFilter} content={children} />}
+      {(features.filters || features.filtersV2) && <WrappedRoute path='/filters/:id' page={DefaultPage} component={EditFilter} content={children} />}
+      {(features.filters || features.filtersV2) && <WrappedRoute path='/filters' page={DefaultPage} component={Filters} content={children} />}
      <WrappedRoute path='/@:username' publicRoute exact component={AccountTimeline} page={ProfilePage} content={children} />
      <WrappedRoute path='/@:username/with_replies' publicRoute={!authenticatedProfile} component={AccountTimeline} page={ProfilePage} content={children} componentParams={{ withReplies: true }} />
      <WrappedRoute path='/@:username/followers' publicRoute={!authenticatedProfile} component={Followers} page={ProfilePage} content={children} />
--- a/app/soapbox/features/ui/util/async-components.ts
+++ b/app/soapbox/features/ui/util/async-components.ts
@ -102,6 +102,10 @@ export function Filters() {
  return import(/* webpackChunkName: "features/filters" */'../../filters');
 }

+export function EditFilter() {
+  return import(/* webpackChunkName: "features/filters" */'../../filters/edit-filter');
+}
+
 export function ReportModal() {
  return import(/* webpackChunkName: "modals/report-modal/report-modal" */'../components/modals/report-modal/report-modal');
 }
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@ -283,6 +283,13 @@
  "chats.main.blankslate_with_chats.subtitle": "Select from one of your open chats or create a new message.",
  "chats.main.blankslate_with_chats.title": "Select a chat",
  "chats.search_placeholder": "Start a chat with…",
+  "colum.filters.expiration.1800": "30 minutes",
+  "colum.filters.expiration.21600": "6 hours",
+  "colum.filters.expiration.3600": "1 hour",
+  "colum.filters.expiration.43200": "12 hours",
+  "colum.filters.expiration.604800": "1 week",
+  "colum.filters.expiration.86400": "1 day",
+  "colum.filters.expiration.never": "Never",
  "column.admin.announcements": "Announcements",
  "column.admin.awaiting_approval": "Awaiting Approval",
  "column.admin.create_announcement": "Create announcement",
@ -321,6 +328,7 @@
  "column.favourites": "Likes",
  "column.federation_restrictions": "Federation Restrictions",
  "column.filters": "Muted words",
+  "column.filters.accounts": "Accounts",
  "column.filters.add_new": "Add New Filter",
  "column.filters.conversations": "Conversations",
  "column.filters.create_error": "Error adding filter",
@ -328,16 +336,18 @@
  "column.filters.delete_error": "Error deleting filter",
  "column.filters.drop_header": "Drop instead of hide",
  "column.filters.drop_hint": "Filtered posts will disappear irreversibly, even if filter is later removed",
+  "column.filters.edit": "Edit",
  "column.filters.expires": "Expire after",
-  "column.filters.expires_hint": "Expiration dates are not currently supported",
+  "column.filters.hide_header": "Hide completely",
+  "column.filters.hide_hint": "Completely hide the filtered content, instead of showing a warning",
  "column.filters.home_timeline": "Home timeline",
  "column.filters.keyword": "Keyword or phrase",
+  "column.filters.keywords": "Keywords or phrases",
  "column.filters.notifications": "Notifications",
  "column.filters.public_timeline": "Public timeline",
  "column.filters.subheading_add_new": "Add New Filter",
-  "column.filters.subheading_filters": "Current Filters",
-  "column.filters.whole_word_header": "Whole word",
-  "column.filters.whole_word_hint": "When the keyword or phrase is alphanumeric only, it will only be applied if it matches the whole word",
+  "column.filters.title": "Title",
+  "column.filters.whole_word": "Whole word",
  "column.follow_requests": "Follow requests",
  "column.followers": "Followers",
  "column.following": "Following",
@ -740,11 +750,14 @@
  "filters.added": "Filter added.",
  "filters.context_header": "Filter contexts",
  "filters.context_hint": "One or multiple contexts where the filter should apply",
+  "filters.create_filter": "Create filter",
  "filters.filters_list_context_label": "Filter contexts:",
  "filters.filters_list_drop": "Drop",
+  "filters.filters_list_expired": "Expired",
  "filters.filters_list_hide": "Hide",
-  "filters.filters_list_phrase_label": "Keyword or phrase:",
-  "filters.filters_list_whole-word": "Whole word",
+  "filters.filters_list_hide_completely": "Hide content",
+  "filters.filters_list_phrases_label": "Keywords or phrases:",
+  "filters.filters_list_warn": "Display warning",
  "filters.removed": "Filter deleted.",
  "followRecommendations.heading": "Suggested Profiles",
  "follow_request.authorize": "Authorize",
@ -1402,6 +1415,7 @@
  "status.sensitive_warning": "Sensitive content",
  "status.sensitive_warning.subtitle": "This content may not be suitable for all audiences.",
  "status.share": "Share",
+  "status.show_filter_reason": "Show anyway",
  "status.show_less_all": "Show less for all",
  "status.show_more_all": "Show more for all",
  "status.show_original": "Show original",
--- a/app/soapbox/locales/pl.json
+++ b/app/soapbox/locales/pl.json
@ -1271,7 +1271,7 @@
  "status.embed": "Osadź",
  "status.external": "View post on {domain}",
  "status.favourite": "Zareaguj",
-  "status.filtered": "Filtrowany(-a)",
+  "status.filtered": "Filtrowany",
  "status.interactions.favourites": "{count, plural, one {Polubienie} few {Polubienia} other {Polubień}}",
  "status.interactions.reblogs": "{count, plural, one {Podanie dalej} few {Podania dalej} other {Podań dalej}}",
  "status.load_more": "Załaduj więcej",
--- a/app/soapbox/normalizers/filter-keyword.ts
+++ b/app/soapbox/normalizers/filter-keyword.ts
@ -0,0 +1,18 @@
+/**
+ * Filter normalizer:
+ * Converts API filters into our internal format.
+ * @see {@link https://docs.joinmastodon.org/entities/FilterKeyword/}
+ */
+import { Map as ImmutableMap, Record as ImmutableRecord, fromJS } from 'immutable';
+
+// https://docs.joinmastodon.org/entities/FilterKeyword/
+export const FilterKeywordRecord = ImmutableRecord({
+  id: '',
+  keyword: '',
+  whole_word: false,
+});
+
+export const normalizeFilterKeyword = (filterKeyword: Record<string, any>) =>
+  FilterKeywordRecord(
+    ImmutableMap(fromJS(filterKeyword)),
+  );
--- a/app/soapbox/normalizers/filter-result.ts
+++ b/app/soapbox/normalizers/filter-result.ts
@ -0,0 +1,22 @@
+/**
+ * Filter normalizer:
+ * Converts API filters into our internal format.
+ * @see {@link https://docs.joinmastodon.org/entities/FilterResult/}
+ */
+import { List as ImmutableList, Map as ImmutableMap, Record as ImmutableRecord, fromJS } from 'immutable';
+
+import { normalizeFilter } from './filter';
+
+import type { Filter } from 'soapbox/types/entities';
+
+// https://docs.joinmastodon.org/entities/FilterResult/
+export const FilterResultRecord = ImmutableRecord({
+  filter: null as Filter | null,
+  keyword_matches: ImmutableList<string>(),
+  status_matches: ImmutableList<string>(),
+});
+
+export const normalizeFilterResult = (filterResult: Record<string, any>) =>
+  FilterResultRecord(
+    ImmutableMap(fromJS(filterResult)).update('filter', (filter: any) => normalizeFilter(filter) as any),
+  );
--- a/app/soapbox/normalizers/filter-status.ts
+++ b/app/soapbox/normalizers/filter-status.ts
@ -0,0 +1,17 @@
+/**
+ * Filter normalizer:
+ * Converts API filters into our internal format.
+ * @see {@link https://docs.joinmastodon.org/entities/FilterStatus/}
+ */
+import { Map as ImmutableMap, Record as ImmutableRecord, fromJS } from 'immutable';
+
+// https://docs.joinmastodon.org/entities/FilterStatus/
+export const FilterStatusRecord = ImmutableRecord({
+  id: '',
+  status_id: '',
+});
+
+export const normalizeFilterStatus = (filterStatus: Record<string, any>) =>
+  FilterStatusRecord(
+    ImmutableMap(fromJS(filterStatus)),
+  );
--- a/app/soapbox/normalizers/filter.ts
+++ b/app/soapbox/normalizers/filter.ts
@ -5,20 +5,49 @@
 */
 import { List as ImmutableList, Map as ImmutableMap, Record as ImmutableRecord, fromJS } from 'immutable';

-export type ContextType = 'home' | 'public' | 'notifications' | 'thread';
+import { FilterKeyword, FilterStatus } from 'soapbox/types/entities';
+
+import { normalizeFilterKeyword } from './filter-keyword';
+import { normalizeFilterStatus } from './filter-status';
+
+export type ContextType = 'home' | 'public' | 'notifications' | 'thread' | 'account';
+export type FilterActionType = 'warn' | 'hide';

 // https://docs.joinmastodon.org/entities/filter/
 export const FilterRecord = ImmutableRecord({
  id: '',
-  phrase: '',
+  title: '',
  context: ImmutableList<ContextType>(),
-  whole_word: false,
  expires_at: '',
-  irreversible: false,
+  filter_action: 'warn' as FilterActionType,
+  keywords: ImmutableList<FilterKeyword>(),
+  statuses: ImmutableList<FilterStatus>(),
 });

-export const normalizeFilter = (filter: Record<string, any>) => {
-  return FilterRecord(
-    ImmutableMap(fromJS(filter)),
+const normalizeFilterV1 = (filter: ImmutableMap<string, any>) =>
+  filter
+    .set('title', filter.get('phrase'))
+    .set('keywords', ImmutableList([ImmutableMap({
+      keyword: filter.get('phrase'),
+      whole_word: filter.get('whole_word'),
+    })]))
+    .set('filter_action', filter.get('irreversible') ? 'hide' : 'warn');
+
+const normalizeKeywords = (filter: ImmutableMap<string, any>) =>
+  filter.update('keywords', ImmutableList(), keywords =>
+    keywords.map(normalizeFilterKeyword),
+  );
+
+const normalizeStatuses = (filter: ImmutableMap<string, any>) =>
+  filter.update('statuses', ImmutableList(), statuses =>
+    statuses.map(normalizeFilterStatus),
+  );
+
+export const normalizeFilter = (filter: Record<string, any>) =>
+  FilterRecord(
+    ImmutableMap(fromJS(filter)).withMutations(filter => {
+      if (filter.has('phrase')) normalizeFilterV1(filter);
+      normalizeKeywords(filter);
+      normalizeStatuses(filter);
+    }),
  );
-};
--- a/app/soapbox/normalizers/index.ts
+++ b/app/soapbox/normalizers/index.ts
@ -10,6 +10,8 @@ export { ChatMessageRecord, normalizeChatMessage } from './chat-message';
 export { EmojiRecord, normalizeEmoji } from './emoji';
 export { EmojiReactionRecord } from './emoji-reaction';
 export { FilterRecord, normalizeFilter } from './filter';
+export { FilterKeywordRecord, normalizeFilterKeyword } from './filter-keyword';
+export { FilterStatusRecord, normalizeFilterStatus } from './filter-status';
 export { GroupRecord, normalizeGroup } from './group';
 export { GroupRelationshipRecord, normalizeGroupRelationship } from './group-relationship';
 export { HistoryRecord, normalizeHistory } from './history';
--- a/app/soapbox/normalizers/status.ts
+++ b/app/soapbox/normalizers/status.ts
@ -50,6 +50,7 @@ export const StatusRecord = ImmutableRecord({
  emojis: ImmutableList<Emoji>(),
  favourited: false,
  favourites_count: 0,
+  filtered: ImmutableList<string>(),
  group: null as EmbeddedEntity<Group>,
  in_reply_to_account_id: null as string | null,
  in_reply_to_id: null as string | null,
@ -78,9 +79,9 @@ export const StatusRecord = ImmutableRecord({
  // Internal fields
  contentHtml: '',
  expectsCard: false,
-  filtered: false,
  hidden: false,
  search_index: '',
+  showFiltered: true,
  spoilerHtml: '',
  translation: null as ImmutableMap<string, string> | null,
 });
@ -166,11 +167,6 @@ const fixQuote = (status: ImmutableMap<string, any>) => {
  });
 };

-// Workaround for not yet implemented filtering from Mastodon 3.6
-const fixFiltered = (status: ImmutableMap<string, any>) => {
-  status.delete('filtered');
-};
-
 /** If the status contains spoiler text, treat it as sensitive. */
 const fixSensitivity = (status: ImmutableMap<string, any>) => {
  if (status.get('spoiler_text')) {
@ -214,6 +210,13 @@ const fixContent = (status: ImmutableMap<string, any>) => {
  }
 };

+const normalizeFilterResults = (status: ImmutableMap<string, any>) =>
+  status.update('filtered', ImmutableList(), filterResults =>
+    filterResults.map((filterResult: ImmutableMap<string, any>) =>
+      filterResult.getIn(['filter', 'title']),
+    ),
+  );
+
 export const normalizeStatus = (status: Record<string, any>) => {
  return StatusRecord(
    ImmutableMap(fromJS(status)).withMutations(status => {
@ -225,10 +228,10 @@ export const normalizeStatus = (status: Record<string, any>) => {
      fixMentionsOrder(status);
      addSelfMention(status);
      fixQuote(status);
-      fixFiltered(status);
      fixSensitivity(status);
      normalizeEvent(status);
      fixContent(status);
+      normalizeFilterResults(status);
    }),
  );
 };
--- a/app/soapbox/reducers/filters.ts
+++ b/app/soapbox/reducers/filters.ts
@ -9,11 +9,10 @@ import type { APIEntity, Filter as FilterEntity } from 'soapbox/types/entities';

 type State = ImmutableList<FilterEntity>;

-const importFilters = (_state: State, filters: APIEntity[]): State => {
-  return ImmutableList(filters.map((filter) => normalizeFilter(filter)));
-};
+const importFilters = (_state: State, filters: APIEntity[]): State =>
+  ImmutableList(filters.map((filter) => normalizeFilter(filter)));

-export default function filters(state: State = ImmutableList<FilterEntity>(), action: AnyAction): State {
+export default function filters(state: State = ImmutableList(), action: AnyAction): State {
  switch (action.type) {
    case FILTERS_FETCH_SUCCESS:
      return importFilters(state, action.filters);
--- a/app/soapbox/reducers/statuses.ts
+++ b/app/soapbox/reducers/statuses.ts
@ -38,6 +38,7 @@ import {
  STATUS_DELETE_FAIL,
  STATUS_TRANSLATE_SUCCESS,
  STATUS_TRANSLATE_UNDO,
+  STATUS_UNFILTER,
 } from '../actions/statuses';
 import { TIMELINE_DELETE } from '../actions/timelines';

@ -287,6 +288,8 @@ export default function statuses(state = initialState, action: AnyAction): State
      return importTranslation(state, action.id, action.translation);
    case STATUS_TRANSLATE_UNDO:
      return deleteTranslation(state, action.id);
+    case STATUS_UNFILTER:
+      return state.setIn([action.id, 'showFiltered'], false);
    case TIMELINE_DELETE:
      return deleteStatus(state, action.id, action.references);
    case EVENT_JOIN_REQUEST:
--- a/app/soapbox/selectors/index.ts
+++ b/app/soapbox/selectors/index.ts
@ -10,6 +10,7 @@ import { getSettings } from 'soapbox/actions/settings';
 import { getDomain } from 'soapbox/utils/accounts';
 import { validId } from 'soapbox/utils/auth';
 import ConfigDB from 'soapbox/utils/config-db';
+import { getFeatures } from 'soapbox/utils/features';
 import { shouldFilter } from 'soapbox/utils/timelines';

 import type { ContextType } from 'soapbox/normalizers/filter';
@ -117,23 +118,63 @@ const escapeRegExp = (string: string) =>
 export const regexFromFilters = (filters: ImmutableList<FilterEntity>) => {
  if (filters.size === 0) return null;

-  return new RegExp(filters.map(filter => {
-    let expr = escapeRegExp(filter.get('phrase'));
+  return new RegExp(filters.map(filter =>
+    filter.keywords.map(keyword => {
+      let expr = escapeRegExp(keyword.keyword);

-    if (filter.get('whole_word')) {
-      if (/^[\w]/.test(expr)) {
-        expr = `\\b${expr}`;
+      if (keyword.whole_word) {
+        if (/^[\w]/.test(expr)) {
+          expr = `\\b${expr}`;
+        }
+
+        if (/[\w]$/.test(expr)) {
+          expr = `${expr}\\b`;
+        }
      }

-      if (/[\w]$/.test(expr)) {
-        expr = `${expr}\\b`;
-      }
-    }
-
-    return expr;
-  }).join('|'), 'i');
+      return expr;
+    }).join('|'),
+  ).join('|'), 'i');
 };

+const checkFiltered = (index: string, filters: ImmutableList<FilterEntity>) =>
+  filters.reduce((result, filter) =>
+    result.concat(filter.keywords.reduce((result, keyword) => {
+      let expr = escapeRegExp(keyword.keyword);
+
+      if (keyword.whole_word) {
+        if (/^[\w]/.test(expr)) {
+          expr = `\\b${expr}`;
+        }
+
+        if (/[\w]$/.test(expr)) {
+          expr = `${expr}\\b`;
+        }
+      }
+
+      const regex = new RegExp(expr);
+
+      if (regex.test(index)) return result.concat(filter.title);
+      return result;
+    }, ImmutableList<string>())), ImmutableList<string>());
+// const results =
+// let expr = escapeRegExp(filter.phrase);
+
+// if (filter.whole_word) {
+//   if (/^[\w]/.test(expr)) {
+//     expr = `\\b${expr}`;
+//   }
+
+//   if (/[\w]$/.test(expr)) {
+//     expr = `${expr}\\b`;
+//   }
+// }
+
+// const regex = new RegExp(expr);
+
+// if (regex.test(index)) return result.join(filter.phrase);
+// return result;
+
 type APIStatus = { id: string, username?: string };

 export const makeGetStatus = () => {
@ -147,9 +188,10 @@ export const makeGetStatus = () => {
      (_state: RootState, { username }: APIStatus) => username,
      getFilters,
      (state: RootState) => state.me,
+      (state: RootState) => getFeatures(state.instance),
    ],

-    (statusBase, statusReblog, accountBase, accountReblog, group, username, filters, me) => {
+    (statusBase, statusReblog, accountBase, accountReblog, group, username, filters, me, features) => {
      if (!statusBase || !accountBase) return null;

      const accountUsername = accountBase.acct;
@ -165,16 +207,18 @@ export const makeGetStatus = () => {
        statusReblog = undefined;
      }

-      const regex    = (accountReblog || accountBase).id !== me && regexFromFilters(filters);
-      const filtered = regex && regex.test(statusReblog?.search_index || statusBase.search_index);
-
      return statusBase.withMutations(map => {
        map.set('reblog', statusReblog || null);
        // @ts-ignore :(
        map.set('account', accountBase || null);
        // @ts-ignore
        map.set('group', group || null);
-        map.set('filtered', Boolean(filtered));
+
+        if ((features.filters || features.filtersV2) && (accountReblog || accountBase).id !== me) {
+          const filtered = checkFiltered(statusReblog?.search_index || statusBase.search_index, filters);
+
+          map.set('filtered', filtered);
+        }
      });
    },
  );
--- a/app/soapbox/types/entities.ts
+++ b/app/soapbox/types/entities.ts
@ -12,6 +12,8 @@ import {
  EmojiReactionRecord,
  FieldRecord,
  FilterRecord,
+  FilterKeywordRecord,
+  FilterStatusRecord,
  GroupRecord,
  GroupRelationshipRecord,
  HistoryRecord,
@ -44,6 +46,8 @@ type Emoji = ReturnType<typeof EmojiRecord>;
 type EmojiReaction = ReturnType<typeof EmojiReactionRecord>;
 type Field = ReturnType<typeof FieldRecord>;
 type Filter = ReturnType<typeof FilterRecord>;
+type FilterKeyword = ReturnType<typeof FilterKeywordRecord>;
+type FilterStatus = ReturnType<typeof FilterStatusRecord>;
 type Group = ReturnType<typeof GroupRecord>;
 type GroupRelationship = ReturnType<typeof GroupRelationshipRecord>;
 type History = ReturnType<typeof HistoryRecord>;
@ -89,6 +93,8 @@ export {
  EmojiReaction,
  Field,
  Filter,
+  FilterKeyword,
+  FilterStatus,
  Group,
  GroupRelationship,
  History,
--- a/app/soapbox/utils/features.ts
+++ b/app/soapbox/utils/features.ts
@ -314,7 +314,7 @@ const getInstanceFeatures = (instance: Instance) => {

    /**
     * Mastodon's newer solution for direct messaging.
-     * @see {@link https://docs.joinmastodon.org/methods/timelines/conversations/}
+     * @see {@link https://docs.joinmastodon.org/methods/conversations/}
     */
    conversations: any([
      v.software === FRIENDICA,
@ -443,16 +443,28 @@ const getInstanceFeatures = (instance: Instance) => {

    /**
     * Can edit and manage timeline filters (aka "muted words").
-     * @see {@link https://docs.joinmastodon.org/methods/accounts/filters/}
+     * @see {@link https://docs.joinmastodon.org/methods/filters/#v1}
     */
    filters: any([
      v.software === MASTODON && lt(v.compatVersion, '3.6.0'),
      v.software === PLEROMA,
    ]),

+    /** Whether filters can automatically expires. */
+    filtersExpiration: any([
+      v.software === MASTODON,
+      v.software === PLEROMA && gte(v.version, '2.3.0'),
+    ]),
+
+    /**
+     * Can edit and manage timeline filters (aka "muted words").
+     * @see {@link https://docs.joinmastodon.org/methods/filters/}
+     */
+    filtersV2: v.software === MASTODON && gte(v.compatVersion, '3.6.0'),
+
    /**
     * Allows setting the focal point of a media attachment.
-     * @see {@link https://docs.joinmastodon.org/methods/statuses/media/}
+     * @see {@link https://docs.joinmastodon.org/methods/media/}
     */
    focalPoint: v.software === MASTODON && gte(v.compatVersion, '2.3.0'),

@ -528,7 +540,7 @@ const getInstanceFeatures = (instance: Instance) => {

    /**
     * Can create, view, and manage lists.
-     * @see {@link https://docs.joinmastodon.org/methods/timelines/lists/}
+     * @see {@link https://docs.joinmastodon.org/methods/lists/}
     * @see GET /api/v1/timelines/list/:list_id
     */
    lists: any([
@ -643,7 +655,7 @@ const getInstanceFeatures = (instance: Instance) => {

    /**
     * A directory of discoverable profiles from the instance.
-     * @see {@link https://docs.joinmastodon.org/methods/instance/directory/}
+     * @see {@link https://docs.joinmastodon.org/methods/directory/}
     */
    profileDirectory: any([
      v.software === FRIENDICA,
@ -736,7 +748,7 @@ const getInstanceFeatures = (instance: Instance) => {
    /**
     * Can schedule statuses to be posted at a later time.
     * @see POST /api/v1/statuses
-     * @see {@link https://docs.joinmastodon.org/methods/statuses/scheduled_statuses/}
+     * @see {@link https://docs.joinmastodon.org/methods/scheduled_statuses/}
     */
    scheduledStatuses: any([
      v.software === MASTODON && gte(v.version, '2.7.0'),
@ -788,7 +800,7 @@ const getInstanceFeatures = (instance: Instance) => {

    /**
     * Can display suggested accounts.
-     * @see {@link https://docs.joinmastodon.org/methods/accounts/suggestions/}
+     * @see {@link https://docs.joinmastodon.org/methods/suggestions/}
     */
    suggestions: any([
      v.software === MASTODON && gte(v.compatVersion, '2.4.3'),