Allow editing filters

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

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';
@@ -34,7 +42,7 @@ const fetchFiltersV1 = () =>
       skipLoading: true,
     });
 
-    api(getState)
+    return api(getState)
       .get('/api/v1/filters')
       .then(({ data }) => dispatch({
         type: FILTERS_FETCH_SUCCESS,
@@ -56,7 +64,7 @@ const fetchFiltersV2 = () =>
       skipLoading: true,
     });
 
-    api(getState)
+    return api(getState)
       .get('/api/v2/filters')
       .then(({ data }) => dispatch({
         type: FILTERS_FETCH_SUCCESS,
@@ -84,6 +92,61 @@ const fetchFilters = (fromFiltersPage = false) =>
     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_at: string, context: Array<string>, hide: boolean, keywords: FilterKeywords) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     dispatch({ type: FILTERS_CREATE_REQUEST });
@@ -129,6 +192,51 @@ const createFilter = (title: string, expires_at: string, context: Array<string>,
     return dispatch(createFilterV1(title, expires_at, context, hide, keywords));
   };
 
+const updateFilterV1 = (id: string, title: string, expires_at: string, 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_at,
+    }).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_at: string, 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_at,
+      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_at: string, 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_at, context, hide, keywords));
+
+    return dispatch(updateFilterV1(id, title, expires_at, context, hide, keywords));
+  };
+
 const deleteFilterV1 = (id: string) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     dispatch({ type: FILTERS_DELETE_REQUEST });
@@ -166,13 +274,21 @@ 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,
 };

app/soapbox/features/filters/edit-filter.tsx

@@ -0,0 +1,274 @@
+import React, { useEffect, 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 type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
+
+interface IFilterField {
+  keyword: string
+  whole_word: boolean
+}
+
+interface IEditFilter {
+  params: { id?: string }
+}
+
+const messages = defineMessages({
+  subheading_add_new: { id: 'column.filters.subheading_add_new', defaultMessage: 'Add New Filter' },
+  subheading_edit: { id: 'column.filters.subheading_edit', defaultMessage: 'Edit 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' },
+  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' },
+  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' },
+  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' },
+  edit: { id: 'column.filters.edit', defaultMessage: 'Edit Filter' },
+  create_error: { id: 'column.filters.create_error', defaultMessage: 'Error adding filter' },
+});
+
+// const expirations = {
+//   null: 'Never',
+//   // 1800: '30 minutes',
+//   // 3600: '1 hour',
+//   // 21600: '6 hour',
+//   // 43200: '12 hours',
+//   // 86400 : '1 day',
+//   // 604800: '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 [expiresAt] = useState('');
+  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<{ id?: string, keyword: string, whole_word: boolean }[]>([{ keyword: '', whole_word: false }]);
+
+  // 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');
+    }
+    if (accounts) {
+      context.push('account');
+    }
+
+    dispatch(params.id
+      ? updateFilter(params.id, title, expiresAt, context, hide, keywords)
+      : createFilter(title, expiresAt, 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.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>
+        {/* <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>
+          {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;

app/soapbox/features/filters/index.tsx

@@ -1,20 +1,13 @@
-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 { fetchFilters, deleteFilter } from 'soapbox/actions/filters';
-import List, { ListItem } from 'soapbox/components/list';
 import ScrollableList from 'soapbox/components/scrollable-list';
-import { Button, CardHeader, CardTitle, Column, Form, FormActions, FormGroup, HStack, IconButton, Input, Stack, Streamfield, Text, Toggle } from 'soapbox/components/ui';
+import { Button, CardTitle, Column, HStack, IconButton, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 import toast from 'soapbox/toast';
 
-import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
-
-interface IFilterField {
-  keyword: string
-  whole_word: boolean
-}
-
 const messages = defineMessages({
   heading: { id: 'column.filters', defaultMessage: 'Muted words' },
   subheading_add_new: { id: 'column.filters.subheading_add_new', defaultMessage: 'Add New Filter' },
@@ -59,83 +52,14 @@ const contexts = {
 //   // 604800: '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 Filters = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
-  const features = useFeatures();
+  const history = useHistory();
 
   const filters = useAppSelector((state) => state.filters);
 
-  const [title, setTitle] = useState('');
+  const handleFilterEdit = (id: string) => () => history.push(`/filters/${id}`);
-  const [expiresAt] = useState('');
-  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<{ keyword: string, whole_word: boolean }[]>([{ keyword: '', whole_word: false }]);
-
-  // 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');
-    }
-    if (accounts) {
-      context.push('account');
-    }
-
-    dispatch(createFilter(title, expiresAt, context, hide, keywords)).then(() => {
-      return dispatch(fetchFilters(true));
-    }).catch(error => {
-      toast.error(intl.formatMessage(messages.create_error));
-    });
-  };
 
   const handleFilterDelete = (id: string) => () => {
     dispatch(deleteFilter(id)).then(() => {
@@ -145,12 +69,6 @@ const Filters = () => {
     });
   };
 
-  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.filter((_, index) => index !== i));
-
   useEffect(() => {
     dispatch(fetchFilters(true));
   }, []);
@@ -159,118 +77,16 @@ const Filters = () => {
 
   return (
     <Column className='filter-settings-panel' label={intl.formatMessage(messages.heading)}>
-      <CardHeader>
+      <HStack className='mb-4' space={2} justifyContent='between'>
-        <CardTitle title={intl.formatMessage(messages.subheading_add_new)} />
-      </CardHeader>
-      <Form onSubmit={handleAddNew}>
-        <FormGroup labelText={intl.formatMessage(messages.title)}>
-          <Input
-            required
-            type='text'
-            name='title'
-            value={title}
-            onChange={({ target }) => setTitle(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>
-          {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>
-          {/* <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>
-
-        <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'>{intl.formatMessage(messages.add_new)}</Button>
-        </FormActions>
-      </Form>
-
-      <CardHeader>
         <CardTitle title={intl.formatMessage(messages.subheading_filters)} />
-      </CardHeader>
+        <Button
+          to='/filters/new'
+          theme='primary'
+          size='sm'
+        >
+          <FormattedMessage id='filters.create_filter' defaultMessage='Create filter' />
+        </Button>
+      </HStack>
 
       <ScrollableList
         scrollKey='filters'
@@ -278,8 +94,8 @@ const Filters = () => {
         itemClassName='pb-4 last:pb-0'
       >
         {filters.map((filter, i) => (
-          <HStack space={1} justifyContent='between'>
+          <HStack space={1}>
-            <Stack space={1}>
+            <Stack className='grow' space={1}>
               <Text weight='medium'>
                 <FormattedMessage id='filters.filters_list_phrase_label' defaultMessage='Keyword or phrase:' />
                 {' '}
@@ -303,6 +119,12 @@ const Filters = () => {
                 )} */}
               </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/pencil.svg')}
+              onClick={handleFilterEdit(filter.id)}
+              title={intl.formatMessage(messages.delete)}
+            />
             <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')}

app/soapbox/features/ui/index.tsx

@@ -66,6 +66,7 @@ import {
   DomainBlocks,
   Mutes,
   Filters,
+  EditFilter,
   PinnedStatuses,
   Search,
   ListTimeline,
@@ -266,6 +267,8 @@ 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 || 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 }} />

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');
 }

app/soapbox/utils/features.ts

@@ -452,7 +452,7 @@ 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/}
      */
     filtersV2: v.software === MASTODON && gte(v.compatVersion, '3.6.0'),
 
@@ -788,7 +788,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'),