From 9d3206f229170b969deecca080357141b33607f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Tue, 30 Aug 2022 22:26:42 +0200
Subject: [PATCH 01/32] Allow users to create events
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/actions/events.ts                 | 268 ++++++++++++++++++
 app/soapbox/actions/interactions.ts           |   1 -
 .../components/autosuggest-location.tsx       |  41 +++
 app/soapbox/components/autosuggest_input.tsx  |   7 +-
 .../components/hover-status-wrapper.tsx       |   2 +-
 app/soapbox/components/location-search.tsx    | 110 +++++++
 app/soapbox/components/polls/poll-footer.tsx  |   1 -
 .../components/ui/textarea/textarea.tsx       |   2 +-
 .../compose/components/schedule_form.tsx      |   2 +-
 .../features/compose/components/upload.tsx    |   2 +-
 .../containers/compose_form_container.js      |   4 +-
 .../steps/suggested-accounts-step.tsx         |   1 -
 app/soapbox/features/status/index.tsx         |   2 +-
 .../features/ui/components/modal_root.js      |   2 +
 .../create-event-modal/create-event-modal.tsx | 223 +++++++++++++++
 .../create-event-modal/upload-button.tsx      |  59 ++++
 .../features/ui/util/async-components.ts      |   4 +
 app/soapbox/normalizers/index.ts              |   1 +
 app/soapbox/normalizers/location.ts           |  35 +++
 app/soapbox/queries/suggestions.ts            |   1 -
 app/soapbox/reducers/admin.ts                 |   2 +-
 app/soapbox/reducers/create_event.ts          |  86 ++++++
 app/soapbox/reducers/index.ts                 |   4 +
 app/soapbox/reducers/locations.ts             |  28 ++
 app/soapbox/reducers/trending_statuses.ts     |   2 +-
 app/soapbox/types/entities.ts                 |   3 +
 package.json                                  |   2 +-
 yarn.lock                                     |   8 +-
 28 files changed, 884 insertions(+), 19 deletions(-)
 create mode 100644 app/soapbox/actions/events.ts
 create mode 100644 app/soapbox/components/autosuggest-location.tsx
 create mode 100644 app/soapbox/components/location-search.tsx
 create mode 100644 app/soapbox/features/ui/components/modals/create-event-modal/create-event-modal.tsx
 create mode 100644 app/soapbox/features/ui/components/modals/create-event-modal/upload-button.tsx
 create mode 100644 app/soapbox/normalizers/location.ts
 create mode 100644 app/soapbox/reducers/create_event.ts
 create mode 100644 app/soapbox/reducers/locations.ts

diff --git a/app/soapbox/actions/events.ts b/app/soapbox/actions/events.ts
new file mode 100644
index 000000000..f9417a6c0
--- /dev/null
+++ b/app/soapbox/actions/events.ts
@@ -0,0 +1,268 @@
+import { defineMessages, IntlShape } from 'react-intl';
+
+import api from 'soapbox/api';
+import { formatBytes } from 'soapbox/utils/media';
+import resizeImage from 'soapbox/utils/resize_image';
+
+import { importFetchedStatus } from './importer';
+import { fetchMedia, uploadMedia } from './media';
+import { closeModal } from './modals';
+import snackbar from './snackbar';
+
+import type { AxiosError } from 'axios';
+import type { AppDispatch, RootState } from 'soapbox/store';
+import type { APIEntity } from 'soapbox/types/entities';
+
+const LOCATION_SEARCH_REQUEST = 'LOCATION_SEARCH_REQUEST';
+const LOCATION_SEARCH_SUCCESS = 'LOCATION_SEARCH_SUCCESS';
+const LOCATION_SEARCH_FAIL    = 'LOCATION_SEARCH_FAIL';
+
+const CREATE_EVENT_NAME_CHANGE              = 'CREATE_EVENT_NAME_CHANGE';
+const CREATE_EVENT_DESCRIPTION_CHANGE       = 'CREATE_EVENT_DESCRIPTION_CHANGE';
+const CREATE_EVENT_START_TIME_CHANGE        = 'CREATE_EVENT_START_TIME_CHANGE';
+const CREATE_EVENT_HAS_END_TIME_CHANGE      = 'CREATE_EVENT_HAS_END_TIME_CHANGE';
+const CREATE_EVENT_END_TIME_CHANGE          = 'CREATE_EVENT_END_TIME_CHANGE';
+const CREATE_EVENT_APPROVAL_REQUIRED_CHANGE = 'CREATE_EVENT_APPROVAL_REQUIRED_CHANGE';
+const CREATE_EVENT_LOCATION_CHANGE          = 'CREATE_EVENT_LOCATION_CHANGE';
+
+const EVENT_BANNER_UPLOAD_REQUEST  = 'EVENT_BANNER_UPLOAD_REQUEST';
+const EVENT_BANNER_UPLOAD_PROGRESS = 'EVENT_BANNER_UPLOAD_PROGRESS';
+const EVENT_BANNER_UPLOAD_SUCCESS  = 'EVENT_BANNER_UPLOAD_SUCCESS';
+const EVENT_BANNER_UPLOAD_FAIL     = 'EVENT_BANNER_UPLOAD_FAIL';
+const EVENT_BANNER_UPLOAD_UNDO     = 'EVENT_BANNER_UPLOAD_UNDO';
+
+const EVENT_SUBMIT_REQUEST = 'EVENT_SUBMIT_REQUEST';
+const EVENT_SUBMIT_SUCCESS = 'EVENT_SUBMIT_SUCCESS';
+const EVENT_SUBMIT_FAIL    = 'EVENT_SUBMIT_FAIL';
+
+const messages = defineMessages({
+  exceededImageSizeLimit: { id: 'upload_error.image_size_limit', defaultMessage: 'Image exceeds the current file size limit ({limit})' },
+  success: { id: 'create_event.submit_success', defaultMessage: 'Your event was created' },
+  view: { id: 'snackbar.view', defaultMessage: 'View' },
+});
+
+const locationSearch = (query: string, signal?: AbortSignal) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch({ type: LOCATION_SEARCH_REQUEST, query });
+    return api(getState).get('/api/v1/pleroma/search/location', { params: { q: query }, signal }).then(({ data: locations }) => {
+      dispatch({ type: LOCATION_SEARCH_SUCCESS, locations });
+      return locations;
+    }).catch(error => {
+      dispatch({ type: LOCATION_SEARCH_FAIL });
+      throw error;
+    });
+  };
+
+const changeCreateEventName = (value: string) => ({
+  type: CREATE_EVENT_NAME_CHANGE,
+  value,
+});
+
+const changeCreateEventDescription = (value: string) => ({
+  type: CREATE_EVENT_DESCRIPTION_CHANGE,
+  value,
+});
+
+const changeCreateEventStartTime = (value: Date) => ({
+  type: CREATE_EVENT_START_TIME_CHANGE,
+  value,
+});
+
+const changeCreateEventEndTime = (value: Date) => ({
+  type: CREATE_EVENT_END_TIME_CHANGE,
+  value,
+});
+
+const changeCreateEventHasEndTime = (value: boolean) => ({
+  type: CREATE_EVENT_HAS_END_TIME_CHANGE,
+  value,
+});
+
+const changeCreateEventApprovalRequired = (value: boolean) => ({
+  type: CREATE_EVENT_APPROVAL_REQUIRED_CHANGE,
+  value,
+});
+
+const changeCreateEventLocation = (value: string | null) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    let location = null;
+
+    if (value) {
+      location = getState().locations.get(value);
+    }
+
+    dispatch({
+      type: CREATE_EVENT_LOCATION_CHANGE,
+      value: location,
+    });
+  };
+
+const uploadEventBanner = (file: File, intl: IntlShape) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const maxImageSize = getState().instance.configuration.getIn(['media_attachments', 'image_size_limit']) as number | undefined;
+
+    let progress = 0;
+
+    dispatch(uploadEventBannerRequest());
+
+    if (maxImageSize && (file.size > maxImageSize)) {
+      const limit = formatBytes(maxImageSize);
+      const message = intl.formatMessage(messages.exceededImageSizeLimit, { limit });
+      dispatch(snackbar.error(message));
+      dispatch(uploadEventBannerFail(true));
+      return;
+    }
+
+    resizeImage(file).then(file => {
+      const data = new FormData();
+      data.append('file', file);
+      // Account for disparity in size of original image and resized data
+
+      const onUploadProgress = ({ loaded }: any) => {
+        progress = loaded;
+        dispatch(uploadEventBannerProgress(progress));
+      };
+
+      return dispatch(uploadMedia(data, onUploadProgress))
+        .then(({ status, data }) => {
+          // If server-side processing of the media attachment has not completed yet,
+          // poll the server until it is, before showing the media attachment as uploaded
+          if (status === 200) {
+            dispatch(uploadEventBannerSuccess(data, file));
+          } else if (status === 202) {
+            const poll = () => {
+              dispatch(fetchMedia(data.id)).then(({ status, data }) => {
+                if (status === 200) {
+                  dispatch(uploadEventBannerSuccess(data, file));
+                } else if (status === 206) {
+                  setTimeout(() => poll(), 1000);
+                }
+              }).catch(error => dispatch(uploadEventBannerFail(error)));
+            };
+
+            poll();
+          }
+        });
+    }).catch(error => dispatch(uploadEventBannerFail(error)));
+  };
+
+const uploadEventBannerRequest = () => ({
+  type: EVENT_BANNER_UPLOAD_REQUEST,
+  skipLoading: true,
+});
+
+const uploadEventBannerProgress = (loaded: number) => ({
+  type: EVENT_BANNER_UPLOAD_PROGRESS,
+  loaded: loaded,
+});
+
+const uploadEventBannerSuccess = (media: APIEntity, file: File) => ({
+  type: EVENT_BANNER_UPLOAD_SUCCESS,
+  media: media,
+  file,
+  skipLoading: true,
+});
+
+const uploadEventBannerFail = (error: AxiosError | true) => ({
+  type: EVENT_BANNER_UPLOAD_FAIL,
+  error: error,
+  skipLoading: true,
+});
+
+const undoUploadEventBanner = () => ({
+  type: EVENT_BANNER_UPLOAD_UNDO,
+});
+
+const submitEvent = () =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const state = getState();
+
+    const name = state.create_event.name;
+    const status    = state.create_event.status;
+    const banner    = state.create_event.banner;
+    const startTime = state.create_event.start_time;
+    const endTime   = state.create_event.end_time;
+    const joinMode  = state.create_event.approval_required ? 'restricted' : 'free';
+    const location  = state.create_event.location;
+
+    if (!status || !status.length) {
+      return;
+    }
+
+    dispatch(submitEventRequest());
+
+    const idempotencyKey = state.compose.idempotencyKey;
+
+    const params: Record<string, any> = {
+      name,
+      status,
+      start_time: startTime,
+      join_mode: joinMode,
+    };
+
+    if (endTime) params.end_time = endTime;
+    if (banner) params.banner_id = banner.id;
+    if (location) params.location_id = location.origin_id;
+
+    return api(getState).post('/api/v1/pleroma/events', params).then(({ data }) => {
+      dispatch(closeModal('CREATE_EVENT'));
+      dispatch(importFetchedStatus(data, idempotencyKey));
+      dispatch(submitEventSuccess(data));
+      dispatch(snackbar.success(messages.success, messages.view, `/@${data.account.acct}/posts/${data.id}`));
+    }).catch(function(error) {
+      dispatch(submitEventFail(error));
+    });
+  };
+
+const submitEventRequest = () => ({
+  type: EVENT_SUBMIT_REQUEST,
+});
+
+const submitEventSuccess = (status: APIEntity) => ({
+  type: EVENT_SUBMIT_SUCCESS,
+  status: status,
+});
+
+const submitEventFail = (error: AxiosError) => ({
+  type: EVENT_SUBMIT_FAIL,
+  error: error,
+});
+
+export {
+  LOCATION_SEARCH_REQUEST,
+  LOCATION_SEARCH_SUCCESS,
+  LOCATION_SEARCH_FAIL,
+  CREATE_EVENT_NAME_CHANGE,
+  CREATE_EVENT_DESCRIPTION_CHANGE,
+  CREATE_EVENT_START_TIME_CHANGE,
+  CREATE_EVENT_END_TIME_CHANGE,
+  CREATE_EVENT_HAS_END_TIME_CHANGE,
+  CREATE_EVENT_APPROVAL_REQUIRED_CHANGE,
+  CREATE_EVENT_LOCATION_CHANGE,
+  EVENT_BANNER_UPLOAD_REQUEST,
+  EVENT_BANNER_UPLOAD_PROGRESS,
+  EVENT_BANNER_UPLOAD_SUCCESS,
+  EVENT_BANNER_UPLOAD_FAIL,
+  EVENT_BANNER_UPLOAD_UNDO,
+  EVENT_SUBMIT_REQUEST,
+  EVENT_SUBMIT_SUCCESS,
+  EVENT_SUBMIT_FAIL,
+  locationSearch,
+  changeCreateEventName,
+  changeCreateEventDescription,
+  changeCreateEventStartTime,
+  changeCreateEventEndTime,
+  changeCreateEventHasEndTime,
+  changeCreateEventApprovalRequired,
+  changeCreateEventLocation,
+  uploadEventBanner,
+  uploadEventBannerRequest,
+  uploadEventBannerProgress,
+  uploadEventBannerSuccess,
+  uploadEventBannerFail,
+  undoUploadEventBanner,
+  submitEvent,
+  submitEventRequest,
+  submitEventSuccess,
+  submitEventFail,
+};
diff --git a/app/soapbox/actions/interactions.ts b/app/soapbox/actions/interactions.ts
index 1a90a259f..cb23f3dae 100644
--- a/app/soapbox/actions/interactions.ts
+++ b/app/soapbox/actions/interactions.ts
@@ -177,7 +177,6 @@ const toggleFavourite = (status: StatusEntity) =>
     }
   };
 
-
 const favouriteRequest = (status: StatusEntity) => ({
   type: FAVOURITE_REQUEST,
   status: status,
diff --git a/app/soapbox/components/autosuggest-location.tsx b/app/soapbox/components/autosuggest-location.tsx
new file mode 100644
index 000000000..6b6eee434
--- /dev/null
+++ b/app/soapbox/components/autosuggest-location.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { useAppSelector } from 'soapbox/hooks';
+
+import { HStack, Icon, Stack, Text } from './ui';
+
+const buildingCommunityIcon = require('@tabler/icons/building-community.svg');
+const homeIcon = require('@tabler/icons/home-2.svg');
+const mapPinIcon = require('@tabler/icons/map-pin.svg');
+const roadIcon = require('@tabler/icons/road.svg');
+
+export const ADDRESS_ICONS: Record<string, string> = {
+  house: homeIcon,
+  street: roadIcon,
+  secondary: roadIcon,
+  zone: buildingCommunityIcon,
+  city: buildingCommunityIcon,
+  administrative: buildingCommunityIcon,
+};
+
+interface IAutosuggestLocation {
+  id: string,
+}
+
+const AutosuggestLocation: React.FC<IAutosuggestLocation> = ({ id }) => {
+  const location = useAppSelector((state) => state.locations.get(id));
+
+  if (!location) return null;
+
+  return (
+    <HStack alignItems='center' space={2}>
+      <Icon src={ADDRESS_ICONS[location.type] || mapPinIcon} />
+      <Stack>
+        <Text>{location.description}</Text>
+        <Text size='xs' theme='muted'>{[location.street, location.locality, location.country].filter(val => val.trim()).join(' · ')}</Text>
+      </Stack>
+    </HStack>
+  );
+};
+
+export default AutosuggestLocation;
diff --git a/app/soapbox/components/autosuggest_input.tsx b/app/soapbox/components/autosuggest_input.tsx
index 54f126a23..fcc9cdc92 100644
--- a/app/soapbox/components/autosuggest_input.tsx
+++ b/app/soapbox/components/autosuggest_input.tsx
@@ -59,6 +59,7 @@ interface IAutosuggestInput extends Pick<React.HTMLAttributes<HTMLInputElement>,
   maxLength?: number,
   menu?: Menu,
   resultsPosition: string,
+  renderSuggestion?: React.FC<{ id: string }>,
 }
 
 export default class AutosuggestInput extends ImmutablePureComponent<IAutosuggestInput> {
@@ -200,7 +201,11 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
     const { selectedSuggestion } = this.state;
     let inner, key;
 
-    if (typeof suggestion === 'object') {
+    if (this.props.renderSuggestion && typeof suggestion === 'string') {
+      const RenderSuggestion = this.props.renderSuggestion;
+      inner = <RenderSuggestion id={suggestion} />;
+      key = suggestion;
+    } else if (typeof suggestion === 'object') {
       inner = <AutosuggestEmoji emoji={suggestion} />;
       key = suggestion.id;
     } else if (suggestion[0] === '#') {
diff --git a/app/soapbox/components/hover-status-wrapper.tsx b/app/soapbox/components/hover-status-wrapper.tsx
index 6860762e7..7dbe61c26 100644
--- a/app/soapbox/components/hover-status-wrapper.tsx
+++ b/app/soapbox/components/hover-status-wrapper.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
 import React, { useRef } from 'react';
 import { useDispatch } from 'react-redux';
 
diff --git a/app/soapbox/components/location-search.tsx b/app/soapbox/components/location-search.tsx
new file mode 100644
index 000000000..915c2770a
--- /dev/null
+++ b/app/soapbox/components/location-search.tsx
@@ -0,0 +1,110 @@
+import classNames from 'classnames';
+import { OrderedSet as ImmutableOrderedSet } from 'immutable';
+import throttle from 'lodash/throttle';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { locationSearch } from 'soapbox/actions/events';
+import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest_input';
+import Icon from 'soapbox/components/icon';
+import { useAppDispatch } from 'soapbox/hooks';
+
+import AutosuggestLocation from './autosuggest-location';
+
+const noOp = () => {};
+
+const messages = defineMessages({
+  placeholder: { id: 'location_search.placeholder', defaultMessage: 'Find an address' },
+});
+
+interface ILocationSearch {
+  onSelected: (locationId: string) => void,
+}
+
+const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+  const [locationIds, setLocationIds] = useState(ImmutableOrderedSet<string>());
+  const controller = useRef(new AbortController());
+
+  const [value, setValue] = useState('');
+
+  const isEmpty = (): boolean => {
+    return !(value.length > 0);
+  };
+
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
+    refreshCancelToken();
+    handleLocationSearch(target.value);
+    setValue(target.value);
+  };
+
+  const handleSelected = (_tokenStart: number, _lastToken: string | null, suggestion: AutoSuggestion) => {
+    if (typeof suggestion === 'string') {
+      onSelected(suggestion);
+    }
+  };
+
+  const handleClear: React.MouseEventHandler = e => {
+    e.preventDefault();
+
+    if (!isEmpty()) {
+      setValue('');
+    }
+  };
+
+  const handleKeyDown: React.KeyboardEventHandler = e => {
+    if (e.key === 'Escape') {
+      document.querySelector('.ui')?.parentElement?.focus();
+    }
+  };
+
+  const refreshCancelToken = () => {
+    controller.current.abort();
+    controller.current = new AbortController();
+  };
+
+  const clearResults = () => {
+    setLocationIds(ImmutableOrderedSet());
+  };
+
+  const handleLocationSearch = useCallback(throttle(q => {
+    dispatch(locationSearch(q, controller.current.signal))
+      .then((locations: { origin_id: string }[]) => {
+        const locationIds = locations.map(location => location.origin_id);
+        setLocationIds(ImmutableOrderedSet(locationIds));
+      })
+      .catch(noOp);
+
+  }, 900, { leading: true, trailing: true }), []);
+
+  useEffect(() => {
+    if (value === '') {
+      clearResults();
+    }
+  }, [value]);
+
+  return (
+    <div className='search'>
+      <AutosuggestInput
+        className='rounded-full'
+        placeholder={intl.formatMessage(messages.placeholder)}
+        value={value}
+        onChange={handleChange}
+        suggestions={locationIds.toList()}
+        onSuggestionsFetchRequested={noOp}
+        onSuggestionsClearRequested={noOp}
+        onSuggestionSelected={handleSelected}
+        searchTokens={[]}
+        onKeyDown={handleKeyDown}
+        renderSuggestion={AutosuggestLocation}
+      />
+      <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
+        <Icon src={require('@tabler/icons/search.svg')} className={classNames('svg-icon--search', { active: isEmpty() })} />
+        <Icon src={require('@tabler/icons/backspace.svg')} className={classNames('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
+      </div>
+    </div>
+  );
+};
+
+export default LocationSearch;
diff --git a/app/soapbox/components/polls/poll-footer.tsx b/app/soapbox/components/polls/poll-footer.tsx
index 366f34d1c..a663b0e13 100644
--- a/app/soapbox/components/polls/poll-footer.tsx
+++ b/app/soapbox/components/polls/poll-footer.tsx
@@ -45,7 +45,6 @@ const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected }): JSX
     votesCount = <FormattedMessage id='poll.total_votes' defaultMessage='{count, plural, one {# vote} other {# votes}}' values={{ count: poll.get('votes_count') }} />;
   }
 
-
   return (
     <Stack space={4} data-testid='poll-footer'>
       {(!showResults && poll?.multiple) && (
diff --git a/app/soapbox/components/ui/textarea/textarea.tsx b/app/soapbox/components/ui/textarea/textarea.tsx
index 5ba1a523c..be13a6657 100644
--- a/app/soapbox/components/ui/textarea/textarea.tsx
+++ b/app/soapbox/components/ui/textarea/textarea.tsx
@@ -28,7 +28,7 @@ const Textarea = React.forwardRef(
         {...props}
         ref={ref}
         className={classNames({
-          'bg-white dark:bg-transparent shadow-sm block w-full sm:text-sm rounded-md text-gray-900 dark:text-gray-100 placeholder:text-gray-600 dark:placeholder:text-gray-600 border-gray-400 dark:border-gray-800 dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
+          'bg-white dark:bg-gray-900 shadow-sm block w-full sm:text-sm rounded-md text-gray-900 dark:text-gray-100 placeholder:text-gray-600 dark:placeholder:text-gray-600 border-gray-400 dark:border-gray-800 dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
             true,
           'font-mono': isCodeEditor,
           'text-red-600 border-red-600': hasError,
diff --git a/app/soapbox/features/compose/components/schedule_form.tsx b/app/soapbox/features/compose/components/schedule_form.tsx
index 32137a71f..72afa86de 100644
--- a/app/soapbox/features/compose/components/schedule_form.tsx
+++ b/app/soapbox/features/compose/components/schedule_form.tsx
@@ -11,7 +11,7 @@ import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
 import { DatePicker } from 'soapbox/features/ui/util/async-components';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
-const isCurrentOrFutureDate = (date: Date) => {
+export const isCurrentOrFutureDate = (date: Date) => {
   return date && new Date().setHours(0, 0, 0, 0) <= new Date(date).setHours(0, 0, 0, 0);
 };
 
diff --git a/app/soapbox/features/compose/components/upload.tsx b/app/soapbox/features/compose/components/upload.tsx
index 5c9788575..80dcf3a84 100644
--- a/app/soapbox/features/compose/components/upload.tsx
+++ b/app/soapbox/features/compose/components/upload.tsx
@@ -148,7 +148,7 @@ const Upload: React.FC<IUpload> = (props) => {
       <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
         {({ scale }) => (
           <div
-            className={classNames('compose-form__upload-thumbnail',  `${mediaType}`)}
+            className={classNames('compose-form__upload-thumbnail',  mediaType)}
             style={{
               transform: `scale(${scale})`,
               backgroundImage: mediaType === 'image' ? `url(${props.media.get('preview_url')})` : undefined,
diff --git a/app/soapbox/features/compose/containers/compose_form_container.js b/app/soapbox/features/compose/containers/compose_form_container.js
index d54f1d082..153262464 100644
--- a/app/soapbox/features/compose/containers/compose_form_container.js
+++ b/app/soapbox/features/compose/containers/compose_form_container.js
@@ -63,8 +63,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     dispatch(selectComposeSuggestion(position, token, suggestion, path));
   },
 
-  onChangeSpoilerText(checked) {
-    dispatch(changeComposeSpoilerText(checked));
+  onChangeSpoilerText(value) {
+    dispatch(changeComposeSpoilerText(value));
   },
 
   onPaste(files) {
diff --git a/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx b/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
index 4df00061a..8db08d1a4 100644
--- a/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
+++ b/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
@@ -10,7 +10,6 @@ import useOnboardingSuggestions from 'soapbox/queries/suggestions';
 const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
   const { data, fetchNextPage, hasNextPage, isFetching } = useOnboardingSuggestions();
 
-
   const handleLoadMore = debounce(() => {
     if (isFetching) {
       return null;
diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index 1f02961d8..935d8b07a 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { HotKeys } from 'react-hotkeys';
 import { defineMessages, useIntl } from 'react-intl';
diff --git a/app/soapbox/features/ui/components/modal_root.js b/app/soapbox/features/ui/components/modal_root.js
index f7b9b007c..050d705b6 100644
--- a/app/soapbox/features/ui/components/modal_root.js
+++ b/app/soapbox/features/ui/components/modal_root.js
@@ -32,6 +32,7 @@ import {
   CompareHistoryModal,
   VerifySmsModal,
   FamiliarFollowersModal,
+  CreateEventModal,
 } from 'soapbox/features/ui/util/async-components';
 
 import BundleContainer from '../containers/bundle_container';
@@ -69,6 +70,7 @@ const MODAL_COMPONENTS = {
   'COMPARE_HISTORY': CompareHistoryModal,
   'VERIFY_SMS': VerifySmsModal,
   'FAMILIAR_FOLLOWERS': FamiliarFollowersModal,
+  'CREATE_EVENT': CreateEventModal,
 };
 
 export default class ModalRoot extends React.PureComponent {
diff --git a/app/soapbox/features/ui/components/modals/create-event-modal/create-event-modal.tsx b/app/soapbox/features/ui/components/modals/create-event-modal/create-event-modal.tsx
new file mode 100644
index 000000000..3e4f0f86e
--- /dev/null
+++ b/app/soapbox/features/ui/components/modals/create-event-modal/create-event-modal.tsx
@@ -0,0 +1,223 @@
+import React from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import Toggle from 'react-toggle';
+
+import {
+  changeCreateEventApprovalRequired,
+  changeCreateEventDescription,
+  changeCreateEventEndTime,
+  changeCreateEventHasEndTime,
+  changeCreateEventName,
+  changeCreateEventStartTime,
+  changeCreateEventLocation,
+  uploadEventBanner,
+  undoUploadEventBanner,
+  submitEvent,
+} from 'soapbox/actions/events';
+import { ADDRESS_ICONS } from 'soapbox/components/autosuggest-location';
+import LocationSearch from 'soapbox/components/location-search';
+import { Form, FormGroup, HStack, Icon, IconButton, Input, Modal, Stack, Text, Textarea } from 'soapbox/components/ui';
+import { isCurrentOrFutureDate } from 'soapbox/features/compose/components/schedule_form';
+import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
+import { DatePicker } from 'soapbox/features/ui/util/async-components';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+
+import UploadButton from './upload-button';
+
+const messages = defineMessages({
+  eventNamePlaceholder: { id: 'create_event.fields.name_placeholder', defaultMessage: 'Name' },
+  eventDescriptionPlaceholder: { id: 'create_event.fields.description_placeholder', defaultMessage: 'Description' },
+  eventStartTimePlaceholder: { id: 'create_event.fields.start_time_placeholder', defaultMessage: 'Event begins on…' },
+  eventEndTimePlaceholder: { id: 'create_event.fields.end_time_placeholder', defaultMessage: 'Event ends on…' },
+  resetLocation: { id: 'create_event.reset_location', defaultMessage: 'Reset location' },
+});
+
+interface ICreateEventModal {
+  onClose: (type?: string) => void,
+}
+
+const CreateEventModal: React.FC<ICreateEventModal> = ({ onClose }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const banner = useAppSelector((state) => state.create_event.banner);
+  const isUploading = useAppSelector((state) => state.create_event.is_uploading);
+
+  const name = useAppSelector((state) => state.create_event.name);
+  const description = useAppSelector((state) => state.create_event.status);
+  const startTime = useAppSelector((state) => state.create_event.start_time);
+  const endTime = useAppSelector((state) => state.create_event.end_time);
+  const approvalRequired = useAppSelector((state) => state.create_event.approval_required);
+  const location = useAppSelector((state) => state.create_event.location);
+
+  const isSubmitting = useAppSelector((state) => state.create_event.is_submitting);
+
+  const onChangeName: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
+    dispatch(changeCreateEventName(target.value));
+  };
+
+  const onChangeDescription: React.ChangeEventHandler<HTMLTextAreaElement> = ({ target }) => {
+    dispatch(changeCreateEventDescription(target.value));
+  };
+
+  const onChangeStartTime = (date: Date) => {
+    dispatch(changeCreateEventStartTime(date));
+  };
+
+  const onChangeEndTime = (date: Date) => {
+    dispatch(changeCreateEventEndTime(date));
+  };
+
+  const onChangeHasEndTime: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
+    dispatch(changeCreateEventHasEndTime(target.checked));
+  };
+
+  const onChangeApprovalRequired: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
+    dispatch(changeCreateEventApprovalRequired(target.checked));
+  };
+
+  const onChangeLocation = (value: string | null) => {
+    dispatch(changeCreateEventLocation(value));
+  };
+
+  const onClickClose = () => {
+    onClose('CREATE_EVENT');
+  };
+
+  const handleFiles = (files: FileList) => {
+    dispatch(uploadEventBanner(files[0], intl));
+  };
+
+  const handleClearBanner = () => {
+    dispatch(undoUploadEventBanner());
+  };
+
+  const handleSubmit = () => {
+    dispatch(submitEvent());
+  };
+
+  const renderLocation = () => location && (
+    <HStack className='h-[38px] text-gray-700 dark:text-gray-500' alignItems='center' space={2}>
+      <Icon src={ADDRESS_ICONS[location.type] || require('@tabler/icons/map-pin.svg')} />
+      <Stack className='flex-grow'>
+        <Text>{location.description}</Text>
+        <Text theme='muted' size='xs'>{[location.street, location.locality, location.country].filter(val => val.trim()).join(' · ')}</Text>
+      </Stack>
+      <IconButton title={intl.formatMessage(messages.resetLocation)} src={require('@tabler/icons/x.svg')} onClick={() => onChangeLocation(null)} />
+    </HStack>
+  );
+
+  return (
+    <Modal
+      title={<FormattedMessage id='navigation_bar.create_event' defaultMessage='Create new event' />}
+      confirmationAction={handleSubmit}
+      confirmationText={<FormattedMessage id='create_event.create' defaultMessage='Create' />}
+      confirmationDisabled={isSubmitting}
+      onClose={onClickClose}
+    >
+      <Form>
+        <FormGroup
+          labelText={<FormattedMessage id='create_event.fields.banner_label' defaultMessage='Event banner' />}
+        >
+          <div className='flex items-center justify-center bg-gray-200 dark:bg-gray-900/50 rounded-lg text-black dark:text-white sm:shadow dark:sm:shadow-inset overflow-hidden h-24 sm:h-32 relative'>
+            {banner ? (
+              <>
+                <img className='h-full w-full object-cover' src={banner.url} alt='' />
+                <IconButton className='absolute top-2 right-2' src={require('@tabler/icons/x.svg')} onClick={handleClearBanner} />
+              </>
+            ) : (
+              <UploadButton disabled={isUploading} onSelectFile={handleFiles} />
+            )}
+
+          </div>
+        </FormGroup>
+        <FormGroup
+          labelText={<FormattedMessage id='create_event.fields.name_label' defaultMessage='Event name' />}
+        >
+          <Input
+            type='text'
+            placeholder={intl.formatMessage(messages.eventNamePlaceholder)}
+            value={name}
+            onChange={onChangeName}
+          />
+        </FormGroup>
+        <FormGroup
+          labelText={<FormattedMessage id='create_event.fields.description_label' defaultMessage='Event description' />}
+          hintText={<FormattedMessage id='create_event.fields.description_hint' defaultMessage='Markdown syntax is supported' />}
+        >
+          <Textarea
+            autoComplete='off'
+            placeholder={intl.formatMessage(messages.eventDescriptionPlaceholder)}
+            value={description}
+            onChange={onChangeDescription}
+          />
+        </FormGroup>
+        <FormGroup
+          labelText={<FormattedMessage id='create_event.fields.location_label' defaultMessage='Event location' />}
+        >
+          {location ? renderLocation() : (
+            <LocationSearch
+              onSelected={onChangeLocation}
+            />
+          )}
+        </FormGroup>
+        <FormGroup
+          labelText={<FormattedMessage id='create_event.fields.start_time_label' defaultMessage='Event start date' />}
+        >
+          <BundleContainer fetchComponent={DatePicker}>
+            {Component => (<Component
+              showTimeSelect
+              dateFormat='MMMM d, yyyy h:mm aa'
+              timeIntervals={15}
+              wrapperClassName='react-datepicker-wrapper'
+              placeholderText={intl.formatMessage(messages.eventStartTimePlaceholder)}
+              filterDate={isCurrentOrFutureDate}
+              selected={startTime}
+              onChange={onChangeStartTime}
+            />)}
+          </BundleContainer>
+        </FormGroup>
+        <HStack alignItems='center' space={2}>
+          <Toggle
+            icons={false}
+            checked={!!endTime}
+            onChange={onChangeHasEndTime}
+          />
+          <Text tag='span' theme='muted'>
+            <FormattedMessage id='create_event.fields.has_end_time' defaultMessage='The event has end date' />
+          </Text>
+        </HStack>
+        {endTime && (
+          <FormGroup
+            labelText={<FormattedMessage id='create_event.fields.end_time_label' defaultMessage='Event end date' />}
+          >
+            <BundleContainer fetchComponent={DatePicker}>
+              {Component => (<Component
+                showTimeSelect
+                dateFormat='MMMM d, yyyy h:mm aa'
+                timeIntervals={15}
+                wrapperClassName='react-datepicker-wrapper'
+                placeholderText={intl.formatMessage(messages.eventEndTimePlaceholder)}
+                filterDate={isCurrentOrFutureDate}
+                selected={endTime}
+                onChange={onChangeEndTime}
+              />)}
+            </BundleContainer>
+          </FormGroup>
+        )}
+        <HStack alignItems='center' space={2}>
+          <Toggle
+            icons={false}
+            checked={approvalRequired}
+            onChange={onChangeApprovalRequired}
+          />
+          <Text tag='span' theme='muted'>
+            <FormattedMessage id='create_event.fields.approval_required' defaultMessage='I want to approve participation requests manually' />
+          </Text>
+        </HStack>
+      </Form>
+    </Modal>
+  );
+};
+
+export default CreateEventModal;
diff --git a/app/soapbox/features/ui/components/modals/create-event-modal/upload-button.tsx b/app/soapbox/features/ui/components/modals/create-event-modal/upload-button.tsx
new file mode 100644
index 000000000..fc75a6b77
--- /dev/null
+++ b/app/soapbox/features/ui/components/modals/create-event-modal/upload-button.tsx
@@ -0,0 +1,59 @@
+import React, { useRef } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { IconButton } from 'soapbox/components/ui';
+import { useAppSelector } from 'soapbox/hooks';
+
+import type { List as ImmutableList } from 'immutable';
+
+const messages = defineMessages({
+  upload: { id: 'create_event.upload_banner', defaultMessage: 'Upload event banner' },
+});
+
+interface IUploadButton {
+  disabled?: boolean,
+  onSelectFile: (files: FileList) => void,
+}
+
+const UploadButton: React.FC<IUploadButton> = ({ disabled, onSelectFile }) => {
+  const intl = useIntl();
+
+  const fileElement = useRef<HTMLInputElement>(null);
+  const attachmentTypes = useAppSelector(state => state.instance.configuration.getIn(['media_attachments', 'supported_mime_types']) as ImmutableList<string>)?.filter(type => type.startsWith('image/'));
+
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    if (e.target.files?.length) {
+      onSelectFile(e.target.files);
+    }
+  };
+
+  const handleClick = () => {
+    fileElement.current?.click();
+  };
+
+  return (
+    <div>
+      <IconButton
+        src={require('@tabler/icons/photo-plus.svg')}
+        className='h-8 w-8 text-gray-600 hover:text-gray-700 dark:hover:text-gray-500'
+        title={intl.formatMessage(messages.upload)}
+        disabled={disabled}
+        onClick={handleClick}
+      />
+
+      <label>
+        <span className='sr-only'>{intl.formatMessage(messages.upload)}</span>
+        <input
+          ref={fileElement}
+          type='file'
+          accept={attachmentTypes && attachmentTypes.toArray().join(',')}
+          onChange={handleChange}
+          disabled={disabled}
+          className='hidden'
+        />
+      </label>
+    </div>
+  );
+};
+
+export default UploadButton;
diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts
index e73efd243..955137704 100644
--- a/app/soapbox/features/ui/util/async-components.ts
+++ b/app/soapbox/features/ui/util/async-components.ts
@@ -525,3 +525,7 @@ export function FamiliarFollowersModal() {
 export function AnnouncementsPanel() {
   return import(/* webpackChunkName: "features/announcements" */'../../../components/announcements/announcements-panel');
 }
+
+export function CreateEventModal() {
+  return import(/* webpackChunkName: "features/create_event_modal" */'../components/modals/create-event-modal/create-event-modal');
+}
diff --git a/app/soapbox/normalizers/index.ts b/app/soapbox/normalizers/index.ts
index 9fdc04f68..20e30dd01 100644
--- a/app/soapbox/normalizers/index.ts
+++ b/app/soapbox/normalizers/index.ts
@@ -12,6 +12,7 @@ export { FilterRecord, normalizeFilter } from './filter';
 export { HistoryRecord, normalizeHistory } from './history';
 export { InstanceRecord, normalizeInstance } from './instance';
 export { ListRecord, normalizeList } from './list';
+export { LocationRecord, normalizeLocation } from './location';
 export { MentionRecord, normalizeMention } from './mention';
 export { NotificationRecord, normalizeNotification } from './notification';
 export { PollRecord, PollOptionRecord, normalizePoll } from './poll';
diff --git a/app/soapbox/normalizers/location.ts b/app/soapbox/normalizers/location.ts
new file mode 100644
index 000000000..dcec453de
--- /dev/null
+++ b/app/soapbox/normalizers/location.ts
@@ -0,0 +1,35 @@
+import { Map as ImmutableMap, Record as ImmutableRecord, fromJS } from 'immutable';
+
+export const GeographicLocationRecord = ImmutableRecord({
+  coordinates: null as [number, number] | null,
+  srid: '',
+});
+
+export const LocationRecord = ImmutableRecord({
+  url: '',
+  description: '',
+  country: '',
+  locality: '',
+  region: '',
+  postal_code: '',
+  street: '',
+  origin_id: '',
+  origin_provider: '',
+  type: '',
+  timezone: '',
+  geom: null as ReturnType<typeof GeographicLocationRecord> | null,
+});
+
+const normalizeGeographicLocation = (location: ImmutableMap<string, any>) => {
+  if (location.get('geom')) {
+    return location.set('geom', GeographicLocationRecord(location.get('geom')));
+  }
+
+  return location;
+};
+
+export const normalizeLocation = (location: Record<string, any>) => {
+  return LocationRecord(ImmutableMap(fromJS(location)).withMutations((location: ImmutableMap<string, any>) => {
+    normalizeGeographicLocation(location);
+  }));
+};
diff --git a/app/soapbox/queries/suggestions.ts b/app/soapbox/queries/suggestions.ts
index d5ddf07bf..433a0c940 100644
--- a/app/soapbox/queries/suggestions.ts
+++ b/app/soapbox/queries/suggestions.ts
@@ -35,7 +35,6 @@ type Suggestion = {
   account: Account
 }
 
-
 export default function useOnboardingSuggestions() {
   const api = useApi();
   const dispatch = useAppDispatch();
diff --git a/app/soapbox/reducers/admin.ts b/app/soapbox/reducers/admin.ts
index fb2635371..b51368f46 100644
--- a/app/soapbox/reducers/admin.ts
+++ b/app/soapbox/reducers/admin.ts
@@ -21,10 +21,10 @@ import {
   ADMIN_USERS_APPROVE_SUCCESS,
 } from 'soapbox/actions/admin';
 import { normalizeAdminReport, normalizeAdminAccount } from 'soapbox/normalizers';
-import { APIEntity } from 'soapbox/types/entities';
 import { normalizeId } from 'soapbox/utils/normalizers';
 
 import type { AnyAction } from 'redux';
+import type { APIEntity } from 'soapbox/types/entities';
 import type { Config } from 'soapbox/utils/config_db';
 
 const ReducerRecord = ImmutableRecord({
diff --git a/app/soapbox/reducers/create_event.ts b/app/soapbox/reducers/create_event.ts
new file mode 100644
index 000000000..7aed099bf
--- /dev/null
+++ b/app/soapbox/reducers/create_event.ts
@@ -0,0 +1,86 @@
+import { fromJS, Record as ImmutableRecord } from 'immutable';
+import { AnyAction } from 'redux';
+
+import {
+  CREATE_EVENT_APPROVAL_REQUIRED_CHANGE,
+  CREATE_EVENT_DESCRIPTION_CHANGE,
+  CREATE_EVENT_END_TIME_CHANGE,
+  CREATE_EVENT_HAS_END_TIME_CHANGE,
+  CREATE_EVENT_LOCATION_CHANGE,
+  CREATE_EVENT_NAME_CHANGE,
+  CREATE_EVENT_START_TIME_CHANGE,
+  EVENT_BANNER_UPLOAD_REQUEST,
+  EVENT_BANNER_UPLOAD_PROGRESS,
+  EVENT_BANNER_UPLOAD_SUCCESS,
+  EVENT_BANNER_UPLOAD_FAIL,
+  EVENT_BANNER_UPLOAD_UNDO,
+  EVENT_SUBMIT_REQUEST,
+  EVENT_SUBMIT_SUCCESS,
+  EVENT_SUBMIT_FAIL,
+} from 'soapbox/actions/events';
+import { normalizeAttachment } from 'soapbox/normalizers';
+
+import type {
+  Attachment as AttachmentEntity,
+  Location as LocationEntity,
+} from 'soapbox/types/entities';
+
+export const ReducerRecord = ImmutableRecord({
+  name: '',
+  status: '',
+  location: null as LocationEntity | null,
+  start_time: new Date(),
+  end_time: null as Date | null,
+  approval_required: false,
+  banner: null as AttachmentEntity | null,
+  progress: 0,
+  is_uploading: false,
+  is_submitting: false,
+});
+
+type State = ReturnType<typeof ReducerRecord>;
+
+const setHasEndTime = (state: State) => {
+  const endTime = new Date(state.start_time);
+
+  endTime.setHours(endTime.getHours() + 2);
+
+  return state.set('end_time', endTime);
+};
+
+export default function create_event(state = ReducerRecord(), action: AnyAction): State {
+  switch (action.type) {
+    case CREATE_EVENT_NAME_CHANGE:
+      return state.set('name', action.value);
+    case CREATE_EVENT_DESCRIPTION_CHANGE:
+      return state.set('status', action.value);
+    case CREATE_EVENT_START_TIME_CHANGE:
+      return state.set('start_time', action.value);
+    case CREATE_EVENT_END_TIME_CHANGE:
+      return state.set('end_time', action.value);
+    case CREATE_EVENT_HAS_END_TIME_CHANGE:
+      if (action.value) return setHasEndTime(state);
+      return state.set('end_time', null);
+    case CREATE_EVENT_APPROVAL_REQUIRED_CHANGE:
+      return state.set('approval_required', action.value);
+    case CREATE_EVENT_LOCATION_CHANGE:
+      return state.set('location', action.value);
+    case EVENT_BANNER_UPLOAD_REQUEST:
+      return state.set('is_uploading', true);
+    case EVENT_BANNER_UPLOAD_SUCCESS:
+      return state.set('banner', normalizeAttachment(fromJS(action.media)));
+    case EVENT_BANNER_UPLOAD_FAIL:
+      return state.set('is_uploading', false);
+    case EVENT_BANNER_UPLOAD_UNDO:
+      return state.set('banner', null);
+    case EVENT_BANNER_UPLOAD_PROGRESS:
+      return state.set('progress', action.loaded * 100);
+    case EVENT_SUBMIT_REQUEST:
+      return state.set('is_submitting', true);
+    case EVENT_SUBMIT_SUCCESS:
+    case EVENT_SUBMIT_FAIL:
+      return state.set('is_submitting', false);
+    default:
+      return state;
+  }
+}
diff --git a/app/soapbox/reducers/index.ts b/app/soapbox/reducers/index.ts
index 87750381b..99e11ffa8 100644
--- a/app/soapbox/reducers/index.ts
+++ b/app/soapbox/reducers/index.ts
@@ -21,6 +21,7 @@ import chats from './chats';
 import compose from './compose';
 import contexts from './contexts';
 import conversations from './conversations';
+import create_event from './create_event';
 import custom_emojis from './custom_emojis';
 import domain_lists from './domain_lists';
 import dropdown_menu from './dropdown_menu';
@@ -34,6 +35,7 @@ import instance from './instance';
 import listAdder from './list_adder';
 import listEditor from './list_editor';
 import lists from './lists';
+import locations from './locations';
 import me from './me';
 import meta from './meta';
 import modals from './modals';
@@ -90,6 +92,7 @@ const reducers = {
   lists,
   listEditor,
   listAdder,
+  locations,
   filters,
   conversations,
   suggestions,
@@ -124,6 +127,7 @@ const reducers = {
   rules,
   history,
   announcements,
+  create_event,
 };
 
 // Build a default state from all reducers: it has the key and `undefined`
diff --git a/app/soapbox/reducers/locations.ts b/app/soapbox/reducers/locations.ts
new file mode 100644
index 000000000..abfe363df
--- /dev/null
+++ b/app/soapbox/reducers/locations.ts
@@ -0,0 +1,28 @@
+import { Map as ImmutableMap } from 'immutable';
+import { AnyAction } from 'redux';
+
+import { LOCATION_SEARCH_SUCCESS } from 'soapbox/actions/events';
+import { normalizeLocation } from 'soapbox/normalizers/location';
+
+import type { APIEntity } from 'soapbox/types/entities';
+
+type LocationRecord = ReturnType<typeof normalizeLocation>;
+type State = ImmutableMap<any, LocationRecord>;
+
+const initialState: State = ImmutableMap();
+
+const normalizeLocations = (state: State, locations: APIEntity[]) => {
+  return locations.reduce(
+    (state: State, location: APIEntity) => state.set(location.origin_id, normalizeLocation(location)),
+    state,
+  );
+};
+
+export default function accounts(state: State = initialState, action: AnyAction): State {
+  switch (action.type) {
+    case LOCATION_SEARCH_SUCCESS:
+      return normalizeLocations(state, action.locations);
+    default:
+      return state;
+  }
+}
diff --git a/app/soapbox/reducers/trending_statuses.ts b/app/soapbox/reducers/trending_statuses.ts
index c27ab31a0..c968c4db8 100644
--- a/app/soapbox/reducers/trending_statuses.ts
+++ b/app/soapbox/reducers/trending_statuses.ts
@@ -4,9 +4,9 @@ import {
   TRENDING_STATUSES_FETCH_REQUEST,
   TRENDING_STATUSES_FETCH_SUCCESS,
 } from 'soapbox/actions/trending_statuses';
-import { APIEntity } from 'soapbox/types/entities';
 
 import type { AnyAction } from 'redux';
+import type { APIEntity } from 'soapbox/types/entities';
 
 const ReducerRecord = ImmutableRecord({
   items: ImmutableOrderedSet<string>(),
diff --git a/app/soapbox/types/entities.ts b/app/soapbox/types/entities.ts
index 4a8a80858..70b51857d 100644
--- a/app/soapbox/types/entities.ts
+++ b/app/soapbox/types/entities.ts
@@ -14,6 +14,7 @@ import {
   HistoryRecord,
   InstanceRecord,
   ListRecord,
+  LocationRecord,
   MentionRecord,
   NotificationRecord,
   PollRecord,
@@ -40,6 +41,7 @@ type Filter = ReturnType<typeof FilterRecord>;
 type History = ReturnType<typeof HistoryRecord>;
 type Instance = ReturnType<typeof InstanceRecord>;
 type List = ReturnType<typeof ListRecord>;
+type Location = ReturnType<typeof LocationRecord>;
 type Mention = ReturnType<typeof MentionRecord>;
 type Notification = ReturnType<typeof NotificationRecord>;
 type Poll = ReturnType<typeof PollRecord>;
@@ -80,6 +82,7 @@ export {
   History,
   Instance,
   List,
+  Location,
   Mention,
   Notification,
   Poll,
diff --git a/package.json b/package.json
index b74ac5285..31405b1f7 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "@sentry/browser": "^7.2.0",
     "@sentry/react": "^7.2.0",
     "@sentry/tracing": "^7.2.0",
-    "@tabler/icons": "^1.73.0",
+    "@tabler/icons": "^1.92.0",
     "@tailwindcss/forms": "^0.4.0",
     "@tailwindcss/typography": "^0.5.1",
     "@tanstack/react-query": "^4.0.10",
diff --git a/yarn.lock b/yarn.lock
index 6677785fd..32a454f6c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2275,10 +2275,10 @@
     remark "^13.0.0"
     unist-util-find-all-after "^3.0.2"
 
-"@tabler/icons@^1.73.0":
-  version "1.73.0"
-  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-1.73.0.tgz#26d81858baf41be939504e1f9b4b32835eda6fdb"
-  integrity sha512-MhAHFzVj79ZWlAIRD++7Mk55PZsdlEdkfkjO3DD257mqj8iJZQRAQtkx2UFJXVs2mMrcOUu1qtj4rlVC8BfnKA==
+"@tabler/icons@^1.92.0":
+  version "1.92.0"
+  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-1.92.0.tgz#e068938db61d5f932d317a8fd18acd5c0204496e"
+  integrity sha512-eZP5jYvNPtZKiWj1Bn2C+zjvGXhQoormXAyE3TH7ihCxXBHMzKF/ZLYhU3rnMC/+NjuLDBifKc6dmwoh7s62vQ==
 
 "@tailwindcss/forms@^0.4.0":
   version "0.4.0"

From eabab437a76e3a96191360e0db0a9caeb8a4317c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 5 Sep 2022 18:32:35 +0200
Subject: [PATCH 02/32] Normalize event information
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/normalizers/status.ts | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/app/soapbox/normalizers/status.ts b/app/soapbox/normalizers/status.ts
index 4788758d3..ff0ebfe83 100644
--- a/app/soapbox/normalizers/status.ts
+++ b/app/soapbox/normalizers/status.ts
@@ -21,6 +21,19 @@ import type { Account, Attachment, Card, Emoji, Mention, Poll, EmbeddedEntity }
 
 export type StatusVisibility = 'public' | 'unlisted' | 'private' | 'direct' | 'self';
 
+export type EventJoinMode = 'free' | 'restricted' | 'invite';
+export type EventJoinState = 'pending' | 'reject' | 'accept';
+
+export const EventRecord = ImmutableRecord({
+  name: '',
+  start_time: null as string | null,
+  end_time: null as string | null,
+  join_mode: null as EventJoinMode | null,
+  participants_count: 0,
+  location: null as ImmutableMap<string, any> | null,
+  join_state: null as EventJoinState | null,
+});
+
 // https://docs.joinmastodon.org/entities/status/
 export const StatusRecord = ImmutableRecord({
   account: null as EmbeddedEntity<Account | ReducerAccount>,
@@ -55,6 +68,7 @@ export const StatusRecord = ImmutableRecord({
   uri: '',
   url: '',
   visibility: 'public' as StatusVisibility,
+  event: null as ReturnType<typeof EventRecord> | null,
 
   // Internal fields
   contentHtml: '',
@@ -149,6 +163,15 @@ const fixFiltered = (status: ImmutableMap<string, any>) => {
   status.delete('filtered');
 };
 
+// Normalize event
+const normalizeEvent = (status: ImmutableMap<string, any>) => {
+  if (status.getIn(['pleroma', 'event'])) {
+    return status.set('event', EventRecord(status.getIn(['pleroma', 'event']) as ImmutableMap<string, any>));
+  } else {
+    return status.set('event', null);
+  }
+};
+
 export const normalizeStatus = (status: Record<string, any>) => {
   return StatusRecord(
     ImmutableMap(fromJS(status)).withMutations(status => {
@@ -161,6 +184,7 @@ export const normalizeStatus = (status: Record<string, any>) => {
       addSelfMention(status);
       fixQuote(status);
       fixFiltered(status);
+      normalizeEvent(status);
     }),
   );
 };

From 8527384479ad764991124a45d4a7fc88723002e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Tue, 6 Sep 2022 15:13:28 +0200
Subject: [PATCH 03/32] Display event previews
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../components/announcements/announcement.tsx |   3 +-
 app/soapbox/components/event-preview.tsx      | 126 ++++++++++++++++++
 app/soapbox/components/status.tsx             |  39 +++---
 3 files changed, 150 insertions(+), 18 deletions(-)
 create mode 100644 app/soapbox/components/event-preview.tsx

diff --git a/app/soapbox/components/announcements/announcement.tsx b/app/soapbox/components/announcements/announcement.tsx
index f6344f7b5..09767f458 100644
--- a/app/soapbox/components/announcements/announcement.tsx
+++ b/app/soapbox/components/announcements/announcement.tsx
@@ -38,7 +38,8 @@ const Announcement: React.FC<IAnnouncement> = ({ announcement, addReaction, remo
             year={(skipYear || startsAt.getFullYear() === now.getFullYear()) ? undefined : 'numeric'}
             month='short'
             day='2-digit'
-            hour={skipTime ? undefined : '2-digit'} minute={skipTime ? undefined : '2-digit'}
+            hour={skipTime ? undefined : '2-digit'}
+            minute={skipTime ? undefined : '2-digit'}
           />
           {' '}
           -
diff --git a/app/soapbox/components/event-preview.tsx b/app/soapbox/components/event-preview.tsx
new file mode 100644
index 000000000..bf9ef4353
--- /dev/null
+++ b/app/soapbox/components/event-preview.tsx
@@ -0,0 +1,126 @@
+import React, { useCallback } from 'react';
+import { FormattedDate, FormattedMessage } from 'react-intl';
+
+import { useAppSelector } from 'soapbox/hooks';
+
+import Icon from './icon';
+import { Button, HStack, Stack, Text } from './ui';
+import VerificationBadge from './verification_badge';
+
+import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
+
+interface IEventPreview {
+  status: StatusEntity,
+}
+
+const EventPreview: React.FC<IEventPreview> = ({ status }) => {
+  const me = useAppSelector((state) => state.me);
+
+  const account = status.account as AccountEntity;
+  const event = status.event!;
+
+  const banner = status.media_attachments?.find(({ description }) => description === 'Banner');
+
+  const renderDate = useCallback(() => {
+    if (!event.start_time) return null;
+
+    const startDate = new Date(event.start_time);
+
+    let date;
+
+    if (event.end_time) {
+      const endDate = new Date(event.end_time);
+
+      const sameDay = startDate.getDate() === endDate.getDate() && startDate.getMonth() === endDate.getMonth() && startDate.getFullYear() === endDate.getFullYear();
+
+      if (sameDay) {
+        date = (
+          <>
+            <FormattedDate value={event.start_time} year='2-digit' month='short' day='2-digit' weekday='short' hour='2-digit' minute='2-digit' />
+            {' - '}
+            <FormattedDate value={event.end_time} hour='2-digit' minute='2-digit' />
+          </>
+        );
+      } else {
+        date = (
+          <>
+            <FormattedDate value={event.start_time} year='2-digit' month='short' day='2-digit' weekday='short' />
+            {' - '}
+            <FormattedDate value={event.end_time} year='2-digit' month='short' day='2-digit' weekday='short' />
+          </>
+        );
+      }
+    } else {
+      date = (
+        <FormattedDate value={event.start_time} year='2-digit' month='short' day='2-digit' weekday='short' hour='2-digit' minute='2-digit' />
+      );
+    }
+
+    return (
+      <HStack alignItems='center' space={1}>
+        <Icon src={require('@tabler/icons/calendar.svg')} />
+        <span>{date}</span>
+      </HStack>
+    );
+  }, [event.start_time, event.end_time]);
+
+  return (
+    <div className='rounded-lg bg-gray-100 dark:bg-primary-800 shadow-xl relative overflow-hidden'>
+      <div className='absolute top-28 right-3'>
+        {account.id === me ? (
+          <Button
+            size='sm'
+            theme='secondary'
+            to={`/@${account.acct}/events/${status.id}`}
+          >
+            <FormattedMessage id='event.manage' defaultMessage='Manage' />
+          </Button>
+        ) : event.join_state === 'accept' ? (
+          <Button
+            size='sm'
+            theme='secondary'
+            icon={require('@tabler/icons/check.svg')}
+          >
+            <FormattedMessage id='event.join_state.accept' defaultMessage='Going' />
+          </Button>
+        ) : (
+          <Button
+            size='sm'
+            theme='primary'
+          >
+            <FormattedMessage id='event.join_state.empty' defaultMessage='Participate' />
+          </Button>
+        )}
+      </div>
+      <div className='bg-primary-200 dark:bg-gray-600 h-40'>
+        {banner && <img className='h-full w-full object-cover' src={banner.url} alt={banner.url} />}
+      </div>
+      <Stack className='p-2.5' space={2}>
+        <Text weight='semibold'>{event.name}</Text>
+
+        <div className='flex gap-y-1 gap-x-2 flex-wrap text-gray-700 dark:text-gray-600'>
+          <HStack alignItems='center' space={1}>
+            <Icon src={require('@tabler/icons/user.svg')} />
+            <span>
+              <span dangerouslySetInnerHTML={{ __html: account.display_name_html }} />
+              {account.verified && <VerificationBadge />}
+            </span>
+          </HStack>
+
+          {renderDate()}
+
+          {event.location && (
+            <HStack alignItems='center' space={1}>
+              <Icon src={require('@tabler/icons/map-pin.svg')} />
+              <span>
+                {event.location.get('name')}
+              </span>
+            </HStack>
+          )}
+        </div>
+      </Stack>
+    </div>
+  );
+};
+
+export default EventPreview;
diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx
index dd2a15142..094e1aaed 100644
--- a/app/soapbox/components/status.tsx
+++ b/app/soapbox/components/status.tsx
@@ -14,6 +14,7 @@ import QuotedStatus from 'soapbox/features/status/containers/quoted_status_conta
 import { useAppDispatch, useSettings } from 'soapbox/hooks';
 import { defaultMediaVisibility, textForScreenReader, getActualStatus } from 'soapbox/utils/status';
 
+import EventPreview from './event-preview';
 import StatusActionBar from './status-action-bar';
 import StatusMedia from './status-media';
 import StatusReplyMentions from './status-reply-mentions';
@@ -360,23 +361,27 @@ const Status: React.FC<IStatus> = (props) => {
               hoverable={hoverable}
             />
 
-            <StatusContent
-              status={actualStatus}
-              onClick={handleClick}
-              expanded={!status.hidden}
-              onExpandedToggle={handleExpandedToggle}
-              collapsable
-            />
-
-            <StatusMedia
-              status={actualStatus}
-              muted={muted}
-              onClick={handleClick}
-              showMedia={showMedia}
-              onToggleVisibility={handleToggleMediaVisibility}
-            />
-
-            {quote}
+            {actualStatus.event ? <EventPreview status={actualStatus} /> : (
+              <>
+                <StatusContent
+                  status={actualStatus}
+                  onClick={handleClick}
+                  expanded={!status.hidden}
+                  onExpandedToggle={handleExpandedToggle}
+                  collapsable
+                />
+
+                <StatusMedia
+                  status={actualStatus}
+                  muted={muted}
+                  onClick={handleClick}
+                  showMedia={showMedia}
+                  onToggleVisibility={handleToggleMediaVisibility}
+                />
+
+                {quote}
+              </>
+            )}
 
             {!hideActionBar && (
               <div className='pt-4'>

From 3f4f820de7823a4417a3dafabf86daea5c26c431 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 7 Sep 2022 20:03:26 +0200
Subject: [PATCH 04/32] Participation management
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/actions/events.ts                 | 95 ++++++++++++++++++-
 app/soapbox/components/event-preview.tsx      | 95 +++++++++++++++----
 .../features/ui/components/modal_root.js      |  2 +
 .../ui/components/modals/join-event-modal.tsx | 71 ++++++++++++++
 .../features/ui/util/async-components.ts      |  4 +
 5 files changed, 245 insertions(+), 22 deletions(-)
 create mode 100644 app/soapbox/features/ui/components/modals/join-event-modal.tsx

diff --git a/app/soapbox/actions/events.ts b/app/soapbox/actions/events.ts
index f9417a6c0..6413fe268 100644
--- a/app/soapbox/actions/events.ts
+++ b/app/soapbox/actions/events.ts
@@ -35,9 +35,19 @@ const EVENT_SUBMIT_REQUEST = 'EVENT_SUBMIT_REQUEST';
 const EVENT_SUBMIT_SUCCESS = 'EVENT_SUBMIT_SUCCESS';
 const EVENT_SUBMIT_FAIL    = 'EVENT_SUBMIT_FAIL';
 
+const EVENT_JOIN_REQUEST = 'EVENT_JOIN_REQUEST';
+const EVENT_JOIN_SUCCESS = 'EVENT_JOIN_SUCCESS';
+const EVENT_JOIN_FAIL    = 'EVENT_JOIN_FAIL';
+
+const EVENT_LEAVE_REQUEST = 'EVENT_LEAVE_REQUEST';
+const EVENT_LEAVE_SUCCESS = 'EVENT_LEAVE_SUCCESS';
+const EVENT_LEAVE_FAIL    = 'EVENT_LEAVE_FAIL';
+
 const messages = defineMessages({
   exceededImageSizeLimit: { id: 'upload_error.image_size_limit', defaultMessage: 'Image exceeds the current file size limit ({limit})' },
   success: { id: 'create_event.submit_success', defaultMessage: 'Your event was created' },
+  joinSuccess: { id: 'join_event.success', defaultMessage: 'Joined the event' },
+  joinRequestSuccess: { id: 'join_event.request_success', defaultMessage: 'Requested to join the event' },
   view: { id: 'snackbar.view', defaultMessage: 'View' },
 });
 
@@ -191,8 +201,6 @@ const submitEvent = () =>
 
     dispatch(submitEventRequest());
 
-    const idempotencyKey = state.compose.idempotencyKey;
-
     const params: Record<string, any> = {
       name,
       status,
@@ -206,9 +214,9 @@ const submitEvent = () =>
 
     return api(getState).post('/api/v1/pleroma/events', params).then(({ data }) => {
       dispatch(closeModal('CREATE_EVENT'));
-      dispatch(importFetchedStatus(data, idempotencyKey));
+      dispatch(importFetchedStatus(data));
       dispatch(submitEventSuccess(data));
-      dispatch(snackbar.success(messages.success, messages.view, `/@${data.account.acct}/posts/${data.id}`));
+      dispatch(snackbar.success(messages.success, messages.view, `/@${data.account.acct}/events/${data.id}`));
     }).catch(function(error) {
       dispatch(submitEventFail(error));
     });
@@ -228,6 +236,71 @@ const submitEventFail = (error: AxiosError) => ({
   error: error,
 });
 
+const joinEvent = (id: string, participationMessage?: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const status = getState().statuses.get(id);
+
+    if (!status || !status.event || status.event.join_state) return;
+
+    dispatch(joinEventRequest());
+
+    return api(getState).post(`/api/v1/pleroma/events/${id}/join`, { participationMessage }).then(({ data }) => {
+      dispatch(importFetchedStatus(data));
+      dispatch(joinEventSuccess(data));
+      dispatch(snackbar.success(
+        data.pleroma.event?.join_state === 'pending' ? messages.joinRequestSuccess : messages.joinSuccess,
+        messages.view,
+        `/@${data.account.acct}/events/${data.id}`,
+      ));
+    }).catch(function(error) {
+      dispatch(joinEventFail(error));
+    });
+  };
+
+const joinEventRequest = () => ({
+  type: EVENT_JOIN_REQUEST,
+});
+
+const joinEventSuccess = (status: APIEntity) => ({
+  type: EVENT_JOIN_SUCCESS,
+  status: status,
+});
+
+const joinEventFail = (error: AxiosError) => ({
+  type: EVENT_JOIN_FAIL,
+  error: error,
+});
+
+const leaveEvent = (id: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const status = getState().statuses.get(id);
+
+    if (!status || !status.event || !status.event.join_state) return;
+
+    dispatch(leaveEventRequest());
+
+    return api(getState).post(`/api/v1/pleroma/events/${id}/leave`).then(({ data }) => {
+      dispatch(importFetchedStatus(data));
+      dispatch(leaveEventSuccess(data));
+    }).catch(function(error) {
+      dispatch(leaveEventFail(error));
+    });
+  };
+
+const leaveEventRequest = () => ({
+  type: EVENT_LEAVE_REQUEST,
+});
+
+const leaveEventSuccess = (status: APIEntity) => ({
+  type: EVENT_LEAVE_SUCCESS,
+  status: status,
+});
+
+const leaveEventFail = (error: AxiosError) => ({
+  type: EVENT_LEAVE_FAIL,
+  error: error,
+});
+
 export {
   LOCATION_SEARCH_REQUEST,
   LOCATION_SEARCH_SUCCESS,
@@ -247,6 +320,12 @@ export {
   EVENT_SUBMIT_REQUEST,
   EVENT_SUBMIT_SUCCESS,
   EVENT_SUBMIT_FAIL,
+  EVENT_JOIN_REQUEST,
+  EVENT_JOIN_SUCCESS,
+  EVENT_JOIN_FAIL,
+  EVENT_LEAVE_REQUEST,
+  EVENT_LEAVE_SUCCESS,
+  EVENT_LEAVE_FAIL,
   locationSearch,
   changeCreateEventName,
   changeCreateEventDescription,
@@ -265,4 +344,12 @@ export {
   submitEventRequest,
   submitEventSuccess,
   submitEventFail,
+  joinEvent,
+  joinEventRequest,
+  joinEventSuccess,
+  joinEventFail,
+  leaveEvent,
+  leaveEventRequest,
+  leaveEventSuccess,
+  leaveEventFail,
 };
diff --git a/app/soapbox/components/event-preview.tsx b/app/soapbox/components/event-preview.tsx
index bf9ef4353..e1da5af62 100644
--- a/app/soapbox/components/event-preview.tsx
+++ b/app/soapbox/components/event-preview.tsx
@@ -1,7 +1,10 @@
 import React, { useCallback } from 'react';
-import { FormattedDate, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedDate, FormattedMessage, useIntl } from 'react-intl';
 
-import { useAppSelector } from 'soapbox/hooks';
+import { joinEvent, leaveEvent } from 'soapbox/actions/events';
+import { openModal } from 'soapbox/actions/modals';
+import { buildStatus } from 'soapbox/features/scheduled_statuses/builder';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
 import Icon from './icon';
 import { Button, HStack, Stack, Text } from './ui';
@@ -9,11 +12,19 @@ import VerificationBadge from './verification_badge';
 
 import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
 
+const messages = defineMessages({
+  leaveConfirm: { id: 'confirmations.leave_event.confirm', defaultMessage: 'Leave event' },
+  leaveMessage: { id: 'confirmations.leave_event.message', defaultMessage: 'If you want to rejoin the event, the request will be manually reviewed again. Are you sure you want to proceed?' },
+});
+
 interface IEventPreview {
   status: StatusEntity,
 }
 
 const EventPreview: React.FC<IEventPreview> = ({ status }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
   const me = useAppSelector((state) => state.me);
 
   const account = status.account as AccountEntity;
@@ -21,6 +32,32 @@ const EventPreview: React.FC<IEventPreview> = ({ status }) => {
 
   const banner = status.media_attachments?.find(({ description }) => description === 'Banner');
 
+  const handleJoin: React.EventHandler<React.MouseEvent> = (e) => {
+    e.preventDefault();
+
+    if (event.join_mode === 'free') {
+      dispatch(joinEvent(status.id));
+    } else {
+      dispatch(openModal('JOIN_EVENT', {
+        statusId: status.id,
+      }));
+    }
+  };
+
+  const handleLeave: React.EventHandler<React.MouseEvent> = (e) => {
+    e.preventDefault();
+
+    if (event.join_mode === 'restricted') {
+      dispatch(openModal('CONFIRM', {
+        message: intl.formatMessage(messages.leaveMessage),
+        confirm: intl.formatMessage(messages.leaveConfirm),
+        onConfirm: () => dispatch(leaveEvent(status.id)),
+      }));
+    } else {
+      dispatch(leaveEvent(status.id));
+    }
+  };
+
   const renderDate = useCallback(() => {
     if (!event.start_time) return null;
 
@@ -64,6 +101,43 @@ const EventPreview: React.FC<IEventPreview> = ({ status }) => {
     );
   }, [event.start_time, event.end_time]);
 
+  const renderAction = useCallback(() => {
+    let buttonLabel;
+    let buttonIcon;
+    let buttonDisabled = false;
+    let buttonAction = handleLeave;
+
+    switch (event.join_state) {
+      case 'accept':
+        buttonLabel = <FormattedMessage id='event.join_state.accept' defaultMessage='Going' />;
+        buttonIcon = require('@tabler/icons/check.svg');
+        break;
+      case 'pending':
+        buttonLabel = <FormattedMessage id='event.join_state.pending' defaultMessage='Pending' />;
+        break;
+      case 'reject':
+        buttonLabel = <FormattedMessage id='event.join_state.rejected' defaultMessage='Going' />;
+        buttonIcon = require('@tabler/icons/ban.svg');
+        buttonDisabled = true;
+        break;
+      default:
+        buttonLabel = <FormattedMessage id='event.join_state.empty' defaultMessage='Participate' />;
+        buttonAction = handleJoin;
+    }
+
+    return (
+      <Button
+        size='sm'
+        theme='secondary'
+        icon={buttonIcon}
+        onClick={buttonAction}
+        disabled={buttonDisabled}
+      >
+        {buttonLabel}
+      </Button>
+    );
+  }, [event.join_state]);
+
   return (
     <div className='rounded-lg bg-gray-100 dark:bg-primary-800 shadow-xl relative overflow-hidden'>
       <div className='absolute top-28 right-3'>
@@ -75,22 +149,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status }) => {
           >
             <FormattedMessage id='event.manage' defaultMessage='Manage' />
           </Button>
-        ) : event.join_state === 'accept' ? (
-          <Button
-            size='sm'
-            theme='secondary'
-            icon={require('@tabler/icons/check.svg')}
-          >
-            <FormattedMessage id='event.join_state.accept' defaultMessage='Going' />
-          </Button>
-        ) : (
-          <Button
-            size='sm'
-            theme='primary'
-          >
-            <FormattedMessage id='event.join_state.empty' defaultMessage='Participate' />
-          </Button>
-        )}
+        ) : renderAction()}
       </div>
       <div className='bg-primary-200 dark:bg-gray-600 h-40'>
         {banner && <img className='h-full w-full object-cover' src={banner.url} alt={banner.url} />}
diff --git a/app/soapbox/features/ui/components/modal_root.js b/app/soapbox/features/ui/components/modal_root.js
index 050d705b6..0f7b8c025 100644
--- a/app/soapbox/features/ui/components/modal_root.js
+++ b/app/soapbox/features/ui/components/modal_root.js
@@ -33,6 +33,7 @@ import {
   VerifySmsModal,
   FamiliarFollowersModal,
   CreateEventModal,
+  JoinEventModal,
 } from 'soapbox/features/ui/util/async-components';
 
 import BundleContainer from '../containers/bundle_container';
@@ -71,6 +72,7 @@ const MODAL_COMPONENTS = {
   'VERIFY_SMS': VerifySmsModal,
   'FAMILIAR_FOLLOWERS': FamiliarFollowersModal,
   'CREATE_EVENT': CreateEventModal,
+  'JOIN_EVENT': JoinEventModal,
 };
 
 export default class ModalRoot extends React.PureComponent {
diff --git a/app/soapbox/features/ui/components/modals/join-event-modal.tsx b/app/soapbox/features/ui/components/modals/join-event-modal.tsx
new file mode 100644
index 000000000..c3a7743fa
--- /dev/null
+++ b/app/soapbox/features/ui/components/modals/join-event-modal.tsx
@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import { joinEvent } from 'soapbox/actions/events';
+import { closeModal } from 'soapbox/actions/modals';
+import { Modal, Text } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
+
+const messages = defineMessages({
+  placeholder: { id: 'join_event.placeholder', defaultMessage: 'Message to organizer' },
+  join: { id: 'join_event.join', defaultMessage: 'Request join' },
+});
+
+interface IAccountNoteModal {
+  statusId: string,
+}
+
+const AccountNoteModal: React.FC<IAccountNoteModal> = ({ statusId }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const [participationMessage, setParticipationMessage] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const onClose = () => {
+    dispatch(closeModal('JOIN_EVENT'));
+  };
+
+  const handleChange: React.ChangeEventHandler<HTMLTextAreaElement> = e => {
+    setParticipationMessage(e.target.value);
+  };
+
+  const handleSubmit = () => {
+    setIsSubmitting(true);
+    dispatch(joinEvent(statusId, participationMessage))?.then(() => {
+      onClose();
+    }).catch(() => {});
+  };
+
+  const handleKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement> = e => {
+    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+      handleSubmit();
+    }
+  };
+
+  return (
+    <Modal
+      title={<FormattedMessage id='join_event.title' defaultMessage='Join event' />}
+      onClose={onClose}
+      confirmationAction={handleSubmit}
+      confirmationText={intl.formatMessage(messages.join)}
+      confirmationDisabled={isSubmitting}
+    >
+      <Text theme='muted'>
+        <FormattedMessage id='join_event.hint' defaultMessage='You can tell the organizer why do you want to participate in this event:' />
+      </Text>
+
+      <textarea
+        className='setting-text light'
+        placeholder={intl.formatMessage(messages.placeholder)}
+        value={participationMessage}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        disabled={isSubmitting}
+        autoFocus
+      />
+    </Modal>
+  );
+};
+
+export default AccountNoteModal;
diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts
index 955137704..78353c3d8 100644
--- a/app/soapbox/features/ui/util/async-components.ts
+++ b/app/soapbox/features/ui/util/async-components.ts
@@ -529,3 +529,7 @@ export function AnnouncementsPanel() {
 export function CreateEventModal() {
   return import(/* webpackChunkName: "features/create_event_modal" */'../components/modals/create-event-modal/create-event-modal');
 }
+
+export function JoinEventModal() {
+  return import(/* webpackChunkName: "features/join_event_modal" */'../components/modals/join-event-modal');
+}

From b97518d6005c724249dade48b2c2f07afe986719 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 7 Sep 2022 21:24:10 +0200
Subject: [PATCH 05/32] Join state optimistic responses
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/actions/events.ts      | 26 ++++++++++++--------------
 app/soapbox/reducers/statuses.ts   | 16 +++++++++++++---
 app/soapbox/reducers/user_lists.ts | 17 ++++++++++++++++-
 3 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/app/soapbox/actions/events.ts b/app/soapbox/actions/events.ts
index 6413fe268..ac2d1fda2 100644
--- a/app/soapbox/actions/events.ts
+++ b/app/soapbox/actions/events.ts
@@ -158,25 +158,22 @@ const uploadEventBanner = (file: File, intl: IntlShape) =>
 
 const uploadEventBannerRequest = () => ({
   type: EVENT_BANNER_UPLOAD_REQUEST,
-  skipLoading: true,
 });
 
 const uploadEventBannerProgress = (loaded: number) => ({
   type: EVENT_BANNER_UPLOAD_PROGRESS,
-  loaded: loaded,
+  loaded,
 });
 
 const uploadEventBannerSuccess = (media: APIEntity, file: File) => ({
   type: EVENT_BANNER_UPLOAD_SUCCESS,
-  media: media,
+  media,
   file,
-  skipLoading: true,
 });
 
 const uploadEventBannerFail = (error: AxiosError | true) => ({
   type: EVENT_BANNER_UPLOAD_FAIL,
-  error: error,
-  skipLoading: true,
+  error,
 });
 
 const undoUploadEventBanner = () => ({
@@ -228,12 +225,12 @@ const submitEventRequest = () => ({
 
 const submitEventSuccess = (status: APIEntity) => ({
   type: EVENT_SUBMIT_SUCCESS,
-  status: status,
+  status,
 });
 
 const submitEventFail = (error: AxiosError) => ({
   type: EVENT_SUBMIT_FAIL,
-  error: error,
+  error,
 });
 
 const joinEvent = (id: string, participationMessage?: string) =>
@@ -253,7 +250,7 @@ const joinEvent = (id: string, participationMessage?: string) =>
         `/@${data.account.acct}/events/${data.id}`,
       ));
     }).catch(function(error) {
-      dispatch(joinEventFail(error));
+      dispatch(joinEventFail(error, status?.event?.join_state || null));
     });
   };
 
@@ -263,12 +260,13 @@ const joinEventRequest = () => ({
 
 const joinEventSuccess = (status: APIEntity) => ({
   type: EVENT_JOIN_SUCCESS,
-  status: status,
+  status,
 });
 
-const joinEventFail = (error: AxiosError) => ({
+const joinEventFail = (error: AxiosError, previousState: string | null) => ({
   type: EVENT_JOIN_FAIL,
-  error: error,
+  error,
+  previousState,
 });
 
 const leaveEvent = (id: string) =>
@@ -293,12 +291,12 @@ const leaveEventRequest = () => ({
 
 const leaveEventSuccess = (status: APIEntity) => ({
   type: EVENT_LEAVE_SUCCESS,
-  status: status,
+  status,
 });
 
 const leaveEventFail = (error: AxiosError) => ({
   type: EVENT_LEAVE_FAIL,
-  error: error,
+  error,
 });
 
 export {
diff --git a/app/soapbox/reducers/statuses.ts b/app/soapbox/reducers/statuses.ts
index 49c946aa0..0d8b1c6ad 100644
--- a/app/soapbox/reducers/statuses.ts
+++ b/app/soapbox/reducers/statuses.ts
@@ -7,10 +7,13 @@ import { simulateEmojiReact, simulateUnEmojiReact } from 'soapbox/utils/emoji_re
 import { stripCompatibilityFeatures, unescapeHTML } from 'soapbox/utils/html';
 import { makeEmojiMap, normalizeId } from 'soapbox/utils/normalizers';
 
+import { EMOJI_REACT_REQUEST, UNEMOJI_REACT_REQUEST } from '../actions/emoji_reacts';
 import {
-  EMOJI_REACT_REQUEST,
-  UNEMOJI_REACT_REQUEST,
-} from '../actions/emoji_reacts';
+  EVENT_JOIN_REQUEST,
+  EVENT_JOIN_FAIL,
+  EVENT_LEAVE_REQUEST,
+  EVENT_LEAVE_FAIL,
+} from '../actions/events';
 import { STATUS_IMPORT, STATUSES_IMPORT } from '../actions/importer';
 import {
   REBLOG_REQUEST,
@@ -257,6 +260,13 @@ export default function statuses(state = initialState, action: AnyAction): State
       return incrementReplyCount(state, action.params);
     case TIMELINE_DELETE:
       return deleteStatus(state, action.id, action.references);
+    case EVENT_JOIN_REQUEST:
+      return state.setIn([action.status.get('id'), 'event', 'join_state'], 'pending');
+    case EVENT_JOIN_FAIL:
+    case EVENT_LEAVE_REQUEST:
+      return state.setIn([action.status.get('id'), 'event', 'join_state'], null);
+    case EVENT_LEAVE_FAIL:
+      return state.setIn([action.status.get('id'), 'event', 'join_state'], action.previousState);
     default:
       return state;
   }
diff --git a/app/soapbox/reducers/user_lists.ts b/app/soapbox/reducers/user_lists.ts
index fc86cceb2..c6527222f 100644
--- a/app/soapbox/reducers/user_lists.ts
+++ b/app/soapbox/reducers/user_lists.ts
@@ -72,6 +72,17 @@ const ReactionListRecord = ImmutableRecord({
   isLoading: false,
 });
 
+export const ParticipationRequestRecord = ImmutableRecord({
+  account: '',
+  participation_message: null as string | null,
+});
+
+const ParticipationRequestListRecord = ImmutableRecord({
+  next: null as string | null,
+  items: ImmutableOrderedSet<ParticipationRequest>(),
+  isLoading: false,
+});
+
 export const ReducerRecord = ImmutableRecord({
   followers: ImmutableMap<string, List>(),
   following: ImmutableMap<string, List>(),
@@ -87,14 +98,18 @@ export const ReducerRecord = ImmutableRecord({
   pinned: ImmutableMap<string, List>(),
   birthday_reminders: ImmutableMap<string, List>(),
   familiar_followers: ImmutableMap<string, List>(),
+  event_participations: ImmutableMap<string, List>(),
+  event_participation_requests: ImmutableMap<string, ParticipationRequestList>(),
 });
 
 type State = ReturnType<typeof ReducerRecord>;
 export type List = ReturnType<typeof ListRecord>;
 type Reaction = ReturnType<typeof ReactionRecord>;
 type ReactionList = ReturnType<typeof ReactionListRecord>;
+type ParticipationRequest = ReturnType<typeof ParticipationRequestRecord>;
+type ParticipationRequestList = ReturnType<typeof ParticipationRequestListRecord>;
 type Items = ImmutableOrderedSet<string>;
-type NestedListPath = ['followers' | 'following' | 'reblogged_by' | 'favourited_by' | 'reactions' | 'groups' | 'groups_removed_accounts' | 'pinned' | 'birthday_reminders' | 'familiar_followers', string];
+type NestedListPath = ['followers' | 'following' | 'reblogged_by' | 'favourited_by' | 'reactions' | 'groups' | 'groups_removed_accounts' | 'pinned' | 'birthday_reminders' | 'familiar_followers' | 'event_participations' | 'event_participation_requests', string];
 type ListPath = ['follow_requests' | 'blocks' | 'mutes' | 'directory'];
 
 const normalizeList = (state: State, path: NestedListPath | ListPath, accounts: APIEntity[], next?: string | null) => {

From f7c09461fdeb0fe8f0d47669c5ec83660fe39c60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 8 Sep 2022 23:25:02 +0200
Subject: [PATCH 06/32] Event pages?
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/actions/events.ts                 | 205 +++++++++++++++-
 app/soapbox/components/event-preview.tsx      | 131 +---------
 app/soapbox/components/status-media.tsx       |  19 +-
 app/soapbox/components/ui/layout/layout.tsx   |   2 +-
 app/soapbox/components/ui/stack/stack.tsx     |   6 +-
 .../admin/components/report_status.tsx        |   2 +-
 app/soapbox/features/admin/tabs/dashboard.tsx |  15 +-
 .../event/components/event-action-button.tsx  |  88 +++++++
 .../features/event/components/event-date.tsx  |  58 +++++
 .../event/components/event-header.tsx         | 163 +++++++++++++
 .../features/event/event-discussion.tsx       | 227 ++++++++++++++++++
 .../features/event/event-information.tsx      |  69 ++++++
 .../components/placeholder_event_header.tsx   |  26 ++
 .../report/components/status_check_box.tsx    |   6 +-
 .../ui/components/modals/join-event-modal.tsx |   2 +-
 app/soapbox/features/ui/index.tsx             |   5 +
 .../features/ui/util/async-components.ts      |  12 +
 app/soapbox/pages/event_page.tsx              | 108 +++++++++
 app/soapbox/reducers/user_lists.ts            |  44 +++-
 app/soapbox/utils/download.ts                 |  13 +
 20 files changed, 1037 insertions(+), 164 deletions(-)
 create mode 100644 app/soapbox/features/event/components/event-action-button.tsx
 create mode 100644 app/soapbox/features/event/components/event-date.tsx
 create mode 100644 app/soapbox/features/event/components/event-header.tsx
 create mode 100644 app/soapbox/features/event/event-discussion.tsx
 create mode 100644 app/soapbox/features/event/event-information.tsx
 create mode 100644 app/soapbox/features/placeholder/components/placeholder_event_header.tsx
 create mode 100644 app/soapbox/pages/event_page.tsx
 create mode 100644 app/soapbox/utils/download.ts

diff --git a/app/soapbox/actions/events.ts b/app/soapbox/actions/events.ts
index ac2d1fda2..711dd6a63 100644
--- a/app/soapbox/actions/events.ts
+++ b/app/soapbox/actions/events.ts
@@ -1,10 +1,10 @@
 import { defineMessages, IntlShape } from 'react-intl';
 
-import api from 'soapbox/api';
+import api, { getLinks } from 'soapbox/api';
 import { formatBytes } from 'soapbox/utils/media';
 import resizeImage from 'soapbox/utils/resize_image';
 
-import { importFetchedStatus } from './importer';
+import { importFetchedAccounts, importFetchedStatus } from './importer';
 import { fetchMedia, uploadMedia } from './media';
 import { closeModal } from './modals';
 import snackbar from './snackbar';
@@ -43,6 +43,24 @@ const EVENT_LEAVE_REQUEST = 'EVENT_LEAVE_REQUEST';
 const EVENT_LEAVE_SUCCESS = 'EVENT_LEAVE_SUCCESS';
 const EVENT_LEAVE_FAIL    = 'EVENT_LEAVE_FAIL';
 
+const EVENT_PARTICIPATIONS_FETCH_REQUEST = 'EVENT_PARTICIPATIONS_FETCH_REQUEST';
+const EVENT_PARTICIPATIONS_FETCH_SUCCESS = 'EVENT_PARTICIPATIONS_FETCH_SUCCESS';
+const EVENT_PARTICIPATIONS_FETCH_FAIL    = 'EVENT_PARTICIPATIONS_FETCH_FAIL';
+
+const EVENT_PARTICIPATIONS_EXPAND_REQUEST = 'EVENT_PARTICIPATIONS_EXPAND_REQUEST';
+const EVENT_PARTICIPATIONS_EXPAND_SUCCESS = 'EVENT_PARTICIPATIONS_EXPAND_SUCCESS';
+const EVENT_PARTICIPATIONS_EXPAND_FAIL    = 'EVENT_PARTICIPATIONS_EXPAND_FAIL';
+
+const EVENT_PARTICIPATION_REQUESTS_FETCH_REQUEST = 'EVENT_PARTICIPATION_REQUESTS_FETCH_REQUEST';
+const EVENT_PARTICIPATION_REQUESTS_FETCH_SUCCESS = 'EVENT_PARTICIPATION_REQUESTS_FETCH_SUCCESS';
+const EVENT_PARTICIPATION_REQUESTS_FETCH_FAIL    = 'EVENT_PARTICIPATION_REQUESTS_FETCH_FAIL';
+
+const EVENT_PARTICIPATION_REQUESTS_EXPAND_REQUEST = 'EVENT_PARTICIPATION_REQUESTS_EXPAND_REQUEST';
+const EVENT_PARTICIPATION_REQUESTS_EXPAND_SUCCESS = 'EVENT_PARTICIPATION_REQUESTS_EXPAND_SUCCESS';
+const EVENT_PARTICIPATION_REQUESTS_EXPAND_FAIL    = 'EVENT_PARTICIPATION_REQUESTS_EXPAND_FAIL';
+
+const noOp = () => new Promise(f => f(undefined));
+
 const messages = defineMessages({
   exceededImageSizeLimit: { id: 'upload_error.image_size_limit', defaultMessage: 'Image exceeds the current file size limit ({limit})' },
   success: { id: 'create_event.submit_success', defaultMessage: 'Your event was created' },
@@ -184,7 +202,7 @@ const submitEvent = () =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     const state = getState();
 
-    const name = state.create_event.name;
+    const name      = state.create_event.name;
     const status    = state.create_event.status;
     const banner    = state.create_event.banner;
     const startTime = state.create_event.start_time;
@@ -205,8 +223,8 @@ const submitEvent = () =>
       join_mode: joinMode,
     };
 
-    if (endTime) params.end_time = endTime;
-    if (banner) params.banner_id = banner.id;
+    if (endTime)  params.end_time    = endTime;
+    if (banner)   params.banner_id   = banner.id;
     if (location) params.location_id = location.origin_id;
 
     return api(getState).post('/api/v1/pleroma/events', params).then(({ data }) => {
@@ -237,7 +255,9 @@ const joinEvent = (id: string, participationMessage?: string) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     const status = getState().statuses.get(id);
 
-    if (!status || !status.event || status.event.join_state) return;
+    if (!status || !status.event || status.event.join_state) {
+      return dispatch(noOp);
+    }
 
     dispatch(joinEventRequest());
 
@@ -273,7 +293,9 @@ const leaveEvent = (id: string) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     const status = getState().statuses.get(id);
 
-    if (!status || !status.event || !status.event.join_state) return;
+    if (!status || !status.event || !status.event.join_state) {
+      return dispatch(noOp);
+    }
 
     dispatch(leaveEventRequest());
 
@@ -299,6 +321,146 @@ const leaveEventFail = (error: AxiosError) => ({
   error,
 });
 
+const fetchEventParticipations = (id: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch(fetchEventParticipationsRequest(id));
+
+    return api(getState).get(`/api/v1/pleroma/events/${id}/participations`).then(response => {
+      const next = getLinks(response).refs.find(link => link.rel === 'next');
+      dispatch(importFetchedAccounts(response.data));
+      return dispatch(fetchEventParticipationsSuccess(id, response.data, next ? next.uri : null));
+    }).catch(error => {
+      dispatch(fetchEventParticipationsFail(id, error));
+    });
+  };
+
+const fetchEventParticipationsRequest = (id: string) => ({
+  type: EVENT_PARTICIPATIONS_FETCH_REQUEST,
+  id,
+});
+
+const fetchEventParticipationsSuccess = (id: string, accounts: APIEntity[], next: string | null) => ({
+  type: EVENT_PARTICIPATIONS_FETCH_SUCCESS,
+  id,
+  accounts,
+  next,
+});
+
+const fetchEventParticipationsFail = (id: string, error: AxiosError) => ({
+  type: EVENT_PARTICIPATIONS_FETCH_FAIL,
+  id,
+  error,
+});
+
+const expandEventParticipations = (id: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const url = getState().user_lists.event_participations.get(id)?.next || null;
+
+    if (url === null) {
+      return dispatch(noOp);
+    }
+
+    dispatch(expandEventParticipationsRequest(id));
+
+    return api(getState).get(url).then(response => {
+      const next = getLinks(response).refs.find(link => link.rel === 'next');
+      dispatch(importFetchedAccounts(response.data));
+      return dispatch(expandEventParticipationsSuccess(id, response.data, next ? next.uri : null));
+    }).catch(error => {
+      dispatch(expandEventParticipationsFail(id, error));
+    });
+  };
+
+const expandEventParticipationsRequest = (id: string) => ({
+  type: EVENT_PARTICIPATIONS_EXPAND_REQUEST,
+  id,
+});
+
+const expandEventParticipationsSuccess = (id: string, accounts: APIEntity[], next: string | null) => ({
+  type: EVENT_PARTICIPATIONS_EXPAND_SUCCESS,
+  id,
+  accounts,
+  next,
+});
+
+const expandEventParticipationsFail = (id: string, error: AxiosError) => ({
+  type: EVENT_PARTICIPATIONS_EXPAND_FAIL,
+  id,
+  error,
+});
+
+const fetchEventParticipationRequests = (id: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch(fetchEventParticipationRequestsRequest(id));
+
+    return api(getState).get(`/api/v1/pleroma/events/${id}/participation_requests`).then(response => {
+      const next = getLinks(response).refs.find(link => link.rel === 'next');
+      dispatch(importFetchedAccounts(response.data.map(({ account }: APIEntity) => account)));
+      return dispatch(fetchEventParticipationRequestsSuccess(id, response.data, next ? next.uri : null));
+    }).catch(error => {
+      dispatch(fetchEventParticipationRequestsFail(id, error));
+    });
+  };
+
+const fetchEventParticipationRequestsRequest = (id: string) => ({
+  type: EVENT_PARTICIPATION_REQUESTS_FETCH_REQUEST,
+  id,
+});
+
+const fetchEventParticipationRequestsSuccess = (id: string, participations: APIEntity[], next: string | null) => ({
+  type: EVENT_PARTICIPATION_REQUESTS_FETCH_SUCCESS,
+  id,
+  participations,
+  next,
+});
+
+const fetchEventParticipationRequestsFail = (id: string, error: AxiosError) => ({
+  type: EVENT_PARTICIPATION_REQUESTS_FETCH_FAIL,
+  id,
+  error,
+});
+
+const expandEventParticipationRequests = (id: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const url = getState().user_lists.event_participations.get(id)?.next || null;
+
+    if (url === null) {
+      return dispatch(noOp);
+    }
+
+    dispatch(expandEventParticipationRequestsRequest(id));
+
+    return api(getState).get(url).then(response => {
+      const next = getLinks(response).refs.find(link => link.rel === 'next');
+      dispatch(importFetchedAccounts(response.data.map(({ account }: APIEntity) => account)));
+      return dispatch(expandEventParticipationRequestsSuccess(id, response.data, next ? next.uri : null));
+    }).catch(error => {
+      dispatch(expandEventParticipationRequestsFail(id, error));
+    });
+  };
+
+const expandEventParticipationRequestsRequest = (id: string) => ({
+  type: EVENT_PARTICIPATION_REQUESTS_EXPAND_REQUEST,
+  id,
+});
+
+const expandEventParticipationRequestsSuccess = (id: string, participations: APIEntity[], next: string | null) => ({
+  type: EVENT_PARTICIPATION_REQUESTS_EXPAND_SUCCESS,
+  id,
+  participations,
+  next,
+});
+
+const expandEventParticipationRequestsFail = (id: string, error: AxiosError) => ({
+  type: EVENT_PARTICIPATION_REQUESTS_EXPAND_FAIL,
+  id,
+  error,
+});
+
+const fetchEventIcs = (id: string) =>
+  (dispatch: any, getState: () => RootState) =>
+    api(getState).get(`/api/v1/pleroma/events/${id}/ics`);
+
 export {
   LOCATION_SEARCH_REQUEST,
   LOCATION_SEARCH_SUCCESS,
@@ -324,6 +486,18 @@ export {
   EVENT_LEAVE_REQUEST,
   EVENT_LEAVE_SUCCESS,
   EVENT_LEAVE_FAIL,
+  EVENT_PARTICIPATIONS_FETCH_REQUEST,
+  EVENT_PARTICIPATIONS_FETCH_SUCCESS,
+  EVENT_PARTICIPATIONS_FETCH_FAIL,
+  EVENT_PARTICIPATIONS_EXPAND_REQUEST,
+  EVENT_PARTICIPATIONS_EXPAND_SUCCESS,
+  EVENT_PARTICIPATIONS_EXPAND_FAIL,
+  EVENT_PARTICIPATION_REQUESTS_FETCH_REQUEST,
+  EVENT_PARTICIPATION_REQUESTS_FETCH_SUCCESS,
+  EVENT_PARTICIPATION_REQUESTS_FETCH_FAIL,
+  EVENT_PARTICIPATION_REQUESTS_EXPAND_REQUEST,
+  EVENT_PARTICIPATION_REQUESTS_EXPAND_SUCCESS,
+  EVENT_PARTICIPATION_REQUESTS_EXPAND_FAIL,
   locationSearch,
   changeCreateEventName,
   changeCreateEventDescription,
@@ -350,4 +524,21 @@ export {
   leaveEventRequest,
   leaveEventSuccess,
   leaveEventFail,
+  fetchEventParticipations,
+  fetchEventParticipationsRequest,
+  fetchEventParticipationsSuccess,
+  fetchEventParticipationsFail,
+  expandEventParticipations,
+  expandEventParticipationsRequest,
+  expandEventParticipationsSuccess,
+  expandEventParticipationsFail,
+  fetchEventParticipationRequests,
+  fetchEventParticipationRequestsRequest,
+  fetchEventParticipationRequestsSuccess,
+  fetchEventParticipationRequestsFail,
+  expandEventParticipationRequests,
+  expandEventParticipationRequestsRequest,
+  expandEventParticipationRequestsSuccess,
+  expandEventParticipationRequestsFail,
+  fetchEventIcs,
 };
diff --git a/app/soapbox/components/event-preview.tsx b/app/soapbox/components/event-preview.tsx
index e1da5af62..5999ca44e 100644
--- a/app/soapbox/components/event-preview.tsx
+++ b/app/soapbox/components/event-preview.tsx
@@ -1,10 +1,9 @@
-import React, { useCallback } from 'react';
-import { defineMessages, FormattedDate, FormattedMessage, useIntl } from 'react-intl';
+import React from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { joinEvent, leaveEvent } from 'soapbox/actions/events';
-import { openModal } from 'soapbox/actions/modals';
-import { buildStatus } from 'soapbox/features/scheduled_statuses/builder';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import EventActionButton from 'soapbox/features/event/components/event-action-button';
+import EventDate from 'soapbox/features/event/components/event-date';
+import { useAppSelector } from 'soapbox/hooks';
 
 import Icon from './icon';
 import { Button, HStack, Stack, Text } from './ui';
@@ -13,17 +12,17 @@ import VerificationBadge from './verification_badge';
 import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
 
 const messages = defineMessages({
+  bannerHeader: { id: 'event.banner', defaultMessage: 'Event banner' },
   leaveConfirm: { id: 'confirmations.leave_event.confirm', defaultMessage: 'Leave event' },
   leaveMessage: { id: 'confirmations.leave_event.message', defaultMessage: 'If you want to rejoin the event, the request will be manually reviewed again. Are you sure you want to proceed?' },
 });
 
 interface IEventPreview {
-  status: StatusEntity,
+  status: StatusEntity
 }
 
 const EventPreview: React.FC<IEventPreview> = ({ status }) => {
   const intl = useIntl();
-  const dispatch = useAppDispatch();
 
   const me = useAppSelector((state) => state.me);
 
@@ -32,112 +31,6 @@ const EventPreview: React.FC<IEventPreview> = ({ status }) => {
 
   const banner = status.media_attachments?.find(({ description }) => description === 'Banner');
 
-  const handleJoin: React.EventHandler<React.MouseEvent> = (e) => {
-    e.preventDefault();
-
-    if (event.join_mode === 'free') {
-      dispatch(joinEvent(status.id));
-    } else {
-      dispatch(openModal('JOIN_EVENT', {
-        statusId: status.id,
-      }));
-    }
-  };
-
-  const handleLeave: React.EventHandler<React.MouseEvent> = (e) => {
-    e.preventDefault();
-
-    if (event.join_mode === 'restricted') {
-      dispatch(openModal('CONFIRM', {
-        message: intl.formatMessage(messages.leaveMessage),
-        confirm: intl.formatMessage(messages.leaveConfirm),
-        onConfirm: () => dispatch(leaveEvent(status.id)),
-      }));
-    } else {
-      dispatch(leaveEvent(status.id));
-    }
-  };
-
-  const renderDate = useCallback(() => {
-    if (!event.start_time) return null;
-
-    const startDate = new Date(event.start_time);
-
-    let date;
-
-    if (event.end_time) {
-      const endDate = new Date(event.end_time);
-
-      const sameDay = startDate.getDate() === endDate.getDate() && startDate.getMonth() === endDate.getMonth() && startDate.getFullYear() === endDate.getFullYear();
-
-      if (sameDay) {
-        date = (
-          <>
-            <FormattedDate value={event.start_time} year='2-digit' month='short' day='2-digit' weekday='short' hour='2-digit' minute='2-digit' />
-            {' - '}
-            <FormattedDate value={event.end_time} hour='2-digit' minute='2-digit' />
-          </>
-        );
-      } else {
-        date = (
-          <>
-            <FormattedDate value={event.start_time} year='2-digit' month='short' day='2-digit' weekday='short' />
-            {' - '}
-            <FormattedDate value={event.end_time} year='2-digit' month='short' day='2-digit' weekday='short' />
-          </>
-        );
-      }
-    } else {
-      date = (
-        <FormattedDate value={event.start_time} year='2-digit' month='short' day='2-digit' weekday='short' hour='2-digit' minute='2-digit' />
-      );
-    }
-
-    return (
-      <HStack alignItems='center' space={1}>
-        <Icon src={require('@tabler/icons/calendar.svg')} />
-        <span>{date}</span>
-      </HStack>
-    );
-  }, [event.start_time, event.end_time]);
-
-  const renderAction = useCallback(() => {
-    let buttonLabel;
-    let buttonIcon;
-    let buttonDisabled = false;
-    let buttonAction = handleLeave;
-
-    switch (event.join_state) {
-      case 'accept':
-        buttonLabel = <FormattedMessage id='event.join_state.accept' defaultMessage='Going' />;
-        buttonIcon = require('@tabler/icons/check.svg');
-        break;
-      case 'pending':
-        buttonLabel = <FormattedMessage id='event.join_state.pending' defaultMessage='Pending' />;
-        break;
-      case 'reject':
-        buttonLabel = <FormattedMessage id='event.join_state.rejected' defaultMessage='Going' />;
-        buttonIcon = require('@tabler/icons/ban.svg');
-        buttonDisabled = true;
-        break;
-      default:
-        buttonLabel = <FormattedMessage id='event.join_state.empty' defaultMessage='Participate' />;
-        buttonAction = handleJoin;
-    }
-
-    return (
-      <Button
-        size='sm'
-        theme='secondary'
-        icon={buttonIcon}
-        onClick={buttonAction}
-        disabled={buttonDisabled}
-      >
-        {buttonLabel}
-      </Button>
-    );
-  }, [event.join_state]);
-
   return (
     <div className='rounded-lg bg-gray-100 dark:bg-primary-800 shadow-xl relative overflow-hidden'>
       <div className='absolute top-28 right-3'>
@@ -149,16 +42,16 @@ const EventPreview: React.FC<IEventPreview> = ({ status }) => {
           >
             <FormattedMessage id='event.manage' defaultMessage='Manage' />
           </Button>
-        ) : renderAction()}
+        ) : <EventActionButton status={status} />}
       </div>
       <div className='bg-primary-200 dark:bg-gray-600 h-40'>
-        {banner && <img className='h-full w-full object-cover' src={banner.url} alt={banner.url} />}
+        {banner && <img className='h-full w-full object-cover' src={banner.url} alt={intl.formatMessage(messages.bannerHeader)} />}
       </div>
       <Stack className='p-2.5' space={2}>
         <Text weight='semibold'>{event.name}</Text>
 
         <div className='flex gap-y-1 gap-x-2 flex-wrap text-gray-700 dark:text-gray-600'>
-          <HStack alignItems='center' space={1}>
+          <HStack alignItems='center' space={2}>
             <Icon src={require('@tabler/icons/user.svg')} />
             <span>
               <span dangerouslySetInnerHTML={{ __html: account.display_name_html }} />
@@ -166,10 +59,10 @@ const EventPreview: React.FC<IEventPreview> = ({ status }) => {
             </span>
           </HStack>
 
-          {renderDate()}
+          <EventDate status={status} />
 
           {event.location && (
-            <HStack alignItems='center' space={1}>
+            <HStack alignItems='center' space={2}>
               <Icon src={require('@tabler/icons/map-pin.svg')} />
               <span>
                 {event.location.get('name')}
diff --git a/app/soapbox/components/status-media.tsx b/app/soapbox/components/status-media.tsx
index d64d88e4b..9a0c007e1 100644
--- a/app/soapbox/components/status-media.tsx
+++ b/app/soapbox/components/status-media.tsx
@@ -22,6 +22,8 @@ interface IStatusMedia {
   showMedia?: boolean,
   /** Callback when visibility is toggled (eg clicked through NSFW). */
   onToggleVisibility?: () => void,
+  /** Whether or not to hide image describer as 'Banner' */
+  excludeBanner?: boolean,
 }
 
 /** Render media attachments for a status. */
@@ -31,14 +33,17 @@ const StatusMedia: React.FC<IStatusMedia> = ({
   onClick,
   showMedia = true,
   onToggleVisibility = () => {},
+  excludeBanner = false,
 }) => {
   const dispatch = useAppDispatch();
   const [mediaWrapperWidth, setMediaWrapperWidth] = useState<number | undefined>(undefined);
 
-  const size = status.media_attachments.size;
-  const firstAttachment = status.media_attachments.first();
+  const mediaAttachments = excludeBanner ? status.media_attachments.filter(({ description }) => description !== 'Banner') : status.media_attachments;
 
-  let media = null;
+  const size = mediaAttachments.size;
+  const firstAttachment = mediaAttachments.first();
+
+  let media: JSX.Element | null = null;
 
   const setRef = (c: HTMLDivElement): void => {
     if (c) {
@@ -70,7 +75,7 @@ const StatusMedia: React.FC<IStatusMedia> = ({
     if (muted) {
       media = (
         <AttachmentThumbs
-          media={status.media_attachments}
+          media={mediaAttachments}
           onClick={onClick}
           sensitive={status.sensitive}
         />
@@ -99,7 +104,7 @@ const StatusMedia: React.FC<IStatusMedia> = ({
         );
       } else {
         media = (
-          <Bundle fetchComponent={Video} loading={renderLoadingVideoPlayer} >
+          <Bundle fetchComponent={Video} loading={renderLoadingVideoPlayer}>
             {(Component: any) => (
               <Component
                 preview={video.preview_url}
@@ -122,7 +127,7 @@ const StatusMedia: React.FC<IStatusMedia> = ({
       const attachment = firstAttachment;
 
       media = (
-        <Bundle fetchComponent={Audio} loading={renderLoadingAudioPlayer} >
+        <Bundle fetchComponent={Audio} loading={renderLoadingAudioPlayer}>
           {(Component: any) => (
             <Component
               src={attachment.url}
@@ -142,7 +147,7 @@ const StatusMedia: React.FC<IStatusMedia> = ({
         <Bundle fetchComponent={MediaGallery} loading={renderLoadingMediaGallery}>
           {(Component: any) => (
             <Component
-              media={status.media_attachments}
+              media={mediaAttachments}
               sensitive={status.sensitive}
               inReview={status.visibility === 'self'}
               height={285}
diff --git a/app/soapbox/components/ui/layout/layout.tsx b/app/soapbox/components/ui/layout/layout.tsx
index 239a7c578..c5c18a6cb 100644
--- a/app/soapbox/components/ui/layout/layout.tsx
+++ b/app/soapbox/components/ui/layout/layout.tsx
@@ -40,7 +40,7 @@ const Main: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ children, classN
 /** Right sidebar container in the UI. */
 const Aside: React.FC = ({ children }) => (
   <aside className='hidden xl:block xl:col-span-3'>
-    <StickyBox offsetTop={80} className='space-y-6 pb-12' >
+    <StickyBox offsetTop={80} className='space-y-6 pb-12'>
       {children}
     </StickyBox>
   </aside>
diff --git a/app/soapbox/components/ui/stack/stack.tsx b/app/soapbox/components/ui/stack/stack.tsx
index 3398d8df2..640022462 100644
--- a/app/soapbox/components/ui/stack/stack.tsx
+++ b/app/soapbox/components/ui/stack/stack.tsx
@@ -21,13 +21,15 @@ const justifyContentOptions = {
 
 const alignItemsOptions = {
   center: 'items-center',
+  start: 'items-start',
+  end: 'items-end',
 };
 
 interface IStack extends React.HTMLAttributes<HTMLDivElement> {
   /** Size of the gap between elements. */
   space?: SIZES,
   /** Horizontal alignment of children. */
-  alignItems?: 'center',
+  alignItems?: 'center' | 'start' | 'end',
   /** Vertical alignment of children. */
   justifyContent?: 'center',
   /** Extra class names on the <div> element. */
@@ -43,7 +45,7 @@ const Stack: React.FC<IStack> = (props) => {
   return (
     <div
       {...filteredProps}
-      className={classNames('flex flex-col', {
+      className={classNames('flex flex-col items', {
         // @ts-ignore
         [spaces[space]]: typeof space !== 'undefined',
         // @ts-ignore
diff --git a/app/soapbox/features/admin/components/report_status.tsx b/app/soapbox/features/admin/components/report_status.tsx
index 8ec01792e..6dd89742a 100644
--- a/app/soapbox/features/admin/components/report_status.tsx
+++ b/app/soapbox/features/admin/components/report_status.tsx
@@ -59,7 +59,7 @@ const ReportStatus: React.FC<IReportStatus> = ({ status }) => {
         const video = firstAttachment;
 
         return (
-          <Bundle fetchComponent={Video} >
+          <Bundle fetchComponent={Video}>
             {(Component: any) => (
               <Component
                 preview={video.preview_url}
diff --git a/app/soapbox/features/admin/tabs/dashboard.tsx b/app/soapbox/features/admin/tabs/dashboard.tsx
index f6b81ea29..1be3fe726 100644
--- a/app/soapbox/features/admin/tabs/dashboard.tsx
+++ b/app/soapbox/features/admin/tabs/dashboard.tsx
@@ -6,25 +6,12 @@ import { getSubscribersCsv, getUnsubscribersCsv, getCombinedCsv } from 'soapbox/
 import { Text } from 'soapbox/components/ui';
 import { useAppSelector, useAppDispatch, useOwnAccount, useFeatures } from 'soapbox/hooks';
 import sourceCode from 'soapbox/utils/code';
+import { download } from 'soapbox/utils/download';
 import { parseVersion } from 'soapbox/utils/features';
 import { isNumber } from 'soapbox/utils/numbers';
 
 import RegistrationModePicker from '../components/registration_mode_picker';
 
-import type { AxiosResponse } from 'axios';
-
-/** Download the file from the response instead of opening it in a tab. */
-// https://stackoverflow.com/a/53230807
-const download = (response: AxiosResponse, filename: string) => {
-  const url = URL.createObjectURL(new Blob([response.data]));
-  const link = document.createElement('a');
-  link.href = url;
-  link.setAttribute('download', filename);
-  document.body.appendChild(link);
-  link.click();
-  link.remove();
-};
-
 const Dashboard: React.FC = () => {
   const dispatch = useAppDispatch();
   const instance = useAppSelector(state => state.instance);
diff --git a/app/soapbox/features/event/components/event-action-button.tsx b/app/soapbox/features/event/components/event-action-button.tsx
new file mode 100644
index 000000000..0b72ec8ee
--- /dev/null
+++ b/app/soapbox/features/event/components/event-action-button.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import { joinEvent, leaveEvent } from 'soapbox/actions/events';
+import { openModal } from 'soapbox/actions/modals';
+import { Button } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
+
+import type { Status as StatusEntity } from 'soapbox/types/entities';
+
+const messages = defineMessages({
+  leaveConfirm: { id: 'confirmations.leave_event.confirm', defaultMessage: 'Leave event' },
+  leaveMessage: { id: 'confirmations.leave_event.message', defaultMessage: 'If you want to rejoin the event, the request will be manually reviewed again. Are you sure you want to proceed?' },
+});
+
+interface IEventAction {
+  status: StatusEntity,
+}
+
+const EventActionButton: React.FC<IEventAction> = ({ status }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const event = status.event!;
+
+  const handleJoin: React.EventHandler<React.MouseEvent> = (e) => {
+    e.preventDefault();
+
+    if (event.join_mode === 'free') {
+      dispatch(joinEvent(status.id));
+    } else {
+      dispatch(openModal('JOIN_EVENT', {
+        statusId: status.id,
+      }));
+    }
+  };
+
+  const handleLeave: React.EventHandler<React.MouseEvent> = (e) => {
+    e.preventDefault();
+
+    if (event.join_mode === 'restricted') {
+      dispatch(openModal('CONFIRM', {
+        message: intl.formatMessage(messages.leaveMessage),
+        confirm: intl.formatMessage(messages.leaveConfirm),
+        onConfirm: () => dispatch(leaveEvent(status.id)),
+      }));
+    } else {
+      dispatch(leaveEvent(status.id));
+    }
+  };
+
+  let buttonLabel;
+  let buttonIcon;
+  let buttonDisabled = false;
+  let buttonAction = handleLeave;
+
+  switch (event.join_state) {
+    case 'accept':
+      buttonLabel = <FormattedMessage id='event.join_state.accept' defaultMessage='Going' />;
+      buttonIcon = require('@tabler/icons/check.svg');
+      break;
+    case 'pending':
+      buttonLabel = <FormattedMessage id='event.join_state.pending' defaultMessage='Pending' />;
+      break;
+    case 'reject':
+      buttonLabel = <FormattedMessage id='event.join_state.rejected' defaultMessage='Going' />;
+      buttonIcon = require('@tabler/icons/ban.svg');
+      buttonDisabled = true;
+      break;
+    default:
+      buttonLabel = <FormattedMessage id='event.join_state.empty' defaultMessage='Participate' />;
+      buttonAction = handleJoin;
+  }
+
+  return (
+    <Button
+      size='sm'
+      theme='secondary'
+      icon={buttonIcon}
+      onClick={buttonAction}
+      disabled={buttonDisabled}
+    >
+      {buttonLabel}
+    </Button>
+  );
+};
+
+export default EventActionButton;
diff --git a/app/soapbox/features/event/components/event-date.tsx b/app/soapbox/features/event/components/event-date.tsx
new file mode 100644
index 000000000..130d818d4
--- /dev/null
+++ b/app/soapbox/features/event/components/event-date.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { FormattedDate } from 'react-intl';
+
+import Icon from 'soapbox/components/icon';
+import { HStack } from 'soapbox/components/ui';
+
+import type { Status as StatusEntity } from 'soapbox/types/entities';
+
+interface IEventDate {
+  status: StatusEntity,
+}
+
+const EventDate: React.FC<IEventDate> = ({ status }) => {
+  const event = status.event!;
+
+  if (!event.start_time) return null;
+
+  const startDate = new Date(event.start_time);
+
+  let date;
+
+  if (event.end_time) {
+    const endDate = new Date(event.end_time);
+
+    const sameDay = startDate.getDate() === endDate.getDate() && startDate.getMonth() === endDate.getMonth() && startDate.getFullYear() === endDate.getFullYear();
+
+    if (sameDay) {
+      date = (
+        <>
+          <FormattedDate value={event.start_time} year='2-digit' month='short' day='2-digit' weekday='short' hour='2-digit' minute='2-digit' />
+          {' - '}
+          <FormattedDate value={event.end_time} hour='2-digit' minute='2-digit' />
+        </>
+      );
+    } else {
+      date = (
+        <>
+          <FormattedDate value={event.start_time} year='2-digit' month='short' day='2-digit' weekday='short' />
+          {' - '}
+          <FormattedDate value={event.end_time} year='2-digit' month='short' day='2-digit' weekday='short' />
+        </>
+      );
+    }
+  } else {
+    date = (
+      <FormattedDate value={event.start_time} year='2-digit' month='short' day='2-digit' weekday='short' hour='2-digit' minute='2-digit' />
+    );
+  }
+
+  return (
+    <HStack alignItems='center' space={2}>
+      <Icon src={require('@tabler/icons/calendar.svg')} />
+      <span>{date}</span>
+    </HStack>
+  );
+};
+
+export default EventDate;
diff --git a/app/soapbox/features/event/components/event-header.tsx b/app/soapbox/features/event/components/event-header.tsx
new file mode 100644
index 000000000..3492d1739
--- /dev/null
+++ b/app/soapbox/features/event/components/event-header.tsx
@@ -0,0 +1,163 @@
+import React from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
+
+import { fetchEventIcs } from 'soapbox/actions/events';
+import { openModal } from 'soapbox/actions/modals';
+import Icon from 'soapbox/components/icon';
+import StillImage from 'soapbox/components/still_image';
+import { HStack, IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList, Stack, Text } from 'soapbox/components/ui';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
+import VerificationBadge from 'soapbox/components/verification_badge';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { download } from 'soapbox/utils/download';
+
+import PlaceholderEventHeader from '../../placeholder/components/placeholder_event_header';
+import EventActionButton from '../components/event-action-button';
+import EventDate from '../components/event-date';
+
+import type { Menu as MenuType } from 'soapbox/components/dropdown_menu';
+import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
+
+const messages = defineMessages({
+  bannerHeader: { id: 'event.banner', defaultMessage: 'Event banner' },
+});
+
+interface IEventHeader {
+  status?: StatusEntity,
+}
+
+const EventHeader: React.FC<IEventHeader> = ({ status }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const me = useAppSelector(state => state.me);
+
+  if (!status || !status.event) {
+    return (
+      <>
+        <div className='-mt-4 -mx-4'>
+          <div className='relative h-48 w-full lg:h-64 md:rounded-t-xl bg-gray-200 dark:bg-gray-900/50' />
+        </div>
+
+        <PlaceholderEventHeader />
+      </>
+    );
+  }
+
+  const account = status.account as AccountEntity;
+  const event = status.event;
+  const banner = status.media_attachments?.find(({ description }) => description === 'Banner');
+
+  const handleHeaderClick: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
+    e.preventDefault();
+
+    const index = status.media_attachments!.findIndex(({ description }) => description === 'Banner');
+    dispatch(openModal('MEDIA', { media: status.media_attachments, index }));
+  };
+
+  const handleExportClick: React.MouseEventHandler = e => {
+    dispatch(fetchEventIcs(status.id)).then((response) => {
+      download(response, 'calendar.ics');
+    }).catch(() => {});
+    e.preventDefault();
+  };
+
+  const menu: MenuType = [
+    {
+      text: 'Export to your calendar',
+      action: handleExportClick,
+      icon: require('@tabler/icons/calendar-plus.svg'),
+    },
+  ];
+
+  return (
+    <>
+      <div className='-mt-4 -mx-4'>
+        <div className='relative h-48 w-full lg:h-64 md:rounded-t-xl bg-gray-200 dark:bg-gray-900/50'>
+          {banner && (
+            <a href={banner.url} onClick={handleHeaderClick} target='_blank'>
+              <StillImage
+                src={banner.url}
+                alt={intl.formatMessage(messages.bannerHeader)}
+                className='absolute inset-0 object-cover md:rounded-t-xl'
+              />
+            </a>
+          )}
+        </div>
+      </div>
+      <Stack space={2}>
+        <HStack className='w-full' alignItems='start' space={2}>
+          <Text className='flex-grow' size='lg' weight='bold'>{event.name}</Text>
+          <Menu>
+            <MenuButton
+              as={IconButton}
+              src={require('@tabler/icons/dots.svg')}
+              theme='outlined'
+              className='px-2 h-[30px]'
+              iconClassName='w-4 h-4'
+              children={null}
+            />
+
+            <MenuList>
+              {menu.map((menuItem, idx) => {
+                if (typeof menuItem?.text === 'undefined') {
+                  return <MenuDivider key={idx} />;
+                } else {
+                  const Comp = (menuItem.action ? MenuItem : MenuLink) as any;
+                  const itemProps = menuItem.action ? { onSelect: menuItem.action } : { to: menuItem.to, as: Link, target: menuItem.newTab ? '_blank' : '_self' };
+
+                  return (
+                    <Comp key={idx} {...itemProps} className='group'>
+                      <div className='flex items-center'>
+                        {menuItem.icon && (
+                          <SvgIcon src={menuItem.icon} className='mr-3 h-5 w-5 text-gray-400 flex-none group-hover:text-gray-500' />
+                        )}
+
+                        <div className='truncate'>{menuItem.text}</div>
+                      </div>
+                    </Comp>
+                  );
+                }
+              })}
+            </MenuList>
+          </Menu>
+          {account.id !== me && <EventActionButton status={status} />}
+        </HStack>
+
+        <Stack space={1}>
+          <HStack alignItems='center' space={2}>
+            <Icon src={require('@tabler/icons/user.svg')} />
+            <span>
+              <FormattedMessage
+                id='event.organized_by'
+                defaultMessage='Organized by {name}'
+                values={{
+                  name: (
+                    <Link className='mention' to={`/@${account.acct}`}>
+                      <span dangerouslySetInnerHTML={{ __html: account.display_name_html }} />
+                      {account.verified && <VerificationBadge />}
+                    </Link>
+                  ),
+                }}
+              />
+            </span>
+          </HStack>
+
+          <EventDate status={status} />
+
+          {event.location && (
+            <HStack alignItems='center' space={2}>
+              <Icon src={require('@tabler/icons/map-pin.svg')} />
+              <span>
+                {event.location.get('name')}
+              </span>
+            </HStack>
+          )}
+        </Stack>
+      </Stack>
+    </>
+  );
+};
+
+export default EventHeader;
diff --git a/app/soapbox/features/event/event-discussion.tsx b/app/soapbox/features/event/event-discussion.tsx
new file mode 100644
index 000000000..62c90ae65
--- /dev/null
+++ b/app/soapbox/features/event/event-discussion.tsx
@@ -0,0 +1,227 @@
+import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
+import debounce from 'lodash/debounce';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { createSelector } from 'reselect';
+
+import { fetchStatusWithContext, fetchNext } from 'soapbox/actions/statuses';
+import MissingIndicator from 'soapbox/components/missing_indicator';
+import PullToRefresh from 'soapbox/components/pull-to-refresh';
+import ScrollableList from 'soapbox/components/scrollable_list';
+import Tombstone from 'soapbox/components/tombstone';
+import { Stack } from 'soapbox/components/ui';
+import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder_status';
+import PendingStatus from 'soapbox/features/ui/components/pending_status';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { makeGetStatus } from 'soapbox/selectors';
+
+import ThreadStatus from '../status/components/thread-status';
+
+import type { VirtuosoHandle } from 'react-virtuoso';
+import type { RootState } from 'soapbox/store';
+import type { Attachment as AttachmentEntity } from 'soapbox/types/entities';
+
+const getStatus = makeGetStatus();
+
+const getDescendantsIds = createSelector([
+  (_: RootState, statusId: string) => statusId,
+  (state: RootState) => state.contexts.replies,
+], (statusId, contextReplies) => {
+  let descendantsIds = ImmutableOrderedSet<string>();
+  const ids = [statusId];
+
+  while (ids.length > 0) {
+    const id = ids.shift();
+    if (!id) break;
+
+    const replies = contextReplies.get(id);
+
+    if (descendantsIds.includes(id)) {
+      break;
+    }
+
+    if (statusId !== id) {
+      descendantsIds = descendantsIds.union([id]);
+    }
+
+    if (replies) {
+      replies.reverse().forEach((reply: string) => {
+        ids.unshift(reply);
+      });
+    }
+  }
+
+  return descendantsIds;
+});
+
+type RouteParams = { statusId: string };
+
+interface IThread {
+  params: RouteParams,
+  onOpenMedia: (media: ImmutableList<AttachmentEntity>, index: number) => void,
+  onOpenVideo: (video: AttachmentEntity, time: number) => void,
+}
+
+const Thread: React.FC<IThread> = (props) => {
+  const dispatch = useAppDispatch();
+
+  const status = useAppSelector(state => getStatus(state, { id: props.params.statusId }));
+
+  const descendantsIds = useAppSelector(state => {
+    let descendantsIds = ImmutableOrderedSet<string>();
+
+    if (status) {
+      const statusId = status.id;
+      descendantsIds = getDescendantsIds(state, statusId);
+      descendantsIds = descendantsIds.delete(statusId);
+    }
+
+    return descendantsIds;
+  });
+
+  const [isLoaded, setIsLoaded] = useState<boolean>(!!status);
+  const [next, setNext] = useState<string>();
+
+  const node = useRef<HTMLDivElement>(null);
+  const scroller = useRef<VirtuosoHandle>(null);
+
+  /** Fetch the status (and context) from the API. */
+  const fetchData = async() => {
+    const { params } = props;
+    const { statusId } = params;
+    const { next } = await dispatch(fetchStatusWithContext(statusId));
+    setNext(next);
+  };
+
+  // Load data.
+  useEffect(() => {
+    fetchData().then(() => {
+      setIsLoaded(true);
+    }).catch(() => {
+      setIsLoaded(true);
+    });
+  }, [props.params.statusId]);
+
+  const handleMoveUp = (id: string) => {
+    const index = ImmutableList(descendantsIds).indexOf(id);
+    _selectChild(index - 1);
+  };
+
+  const handleMoveDown = (id: string) => {
+    const index = ImmutableList(descendantsIds).indexOf(id);
+    _selectChild(index + 1);
+  };
+
+  const _selectChild = (index: number) => {
+    scroller.current?.scrollIntoView({
+      index,
+      behavior: 'smooth',
+      done: () => {
+        const element = document.querySelector<HTMLDivElement>(`#thread [data-index="${index}"] .focusable`);
+
+        if (element) {
+          element.focus();
+        }
+      },
+    });
+  };
+
+  const renderTombstone = (id: string) => {
+    return (
+      <div className='py-4 pb-8'>
+        <Tombstone
+          key={id}
+          id={id}
+          onMoveUp={handleMoveUp}
+          onMoveDown={handleMoveDown}
+        />
+      </div>
+    );
+  };
+
+  const renderStatus = (id: string) => {
+    return (
+      <ThreadStatus
+        key={id}
+        id={id}
+        focusedStatusId={status!.id}
+        onMoveUp={handleMoveUp}
+        onMoveDown={handleMoveDown}
+      />
+    );
+  };
+
+  const renderPendingStatus = (id: string) => {
+    const idempotencyKey = id.replace(/^末pending-/, '');
+
+    return (
+      <PendingStatus
+        key={id}
+        idempotencyKey={idempotencyKey}
+        thread
+      />
+    );
+  };
+
+  const renderChildren = (list: ImmutableOrderedSet<string>) => {
+    return list.map(id => {
+      if (id.endsWith('-tombstone')) {
+        return renderTombstone(id);
+      } else if (id.startsWith('末pending-')) {
+        return renderPendingStatus(id);
+      } else {
+        return renderStatus(id);
+      }
+    });
+  };
+
+  const handleRefresh = () => {
+    return fetchData();
+  };
+
+  const handleLoadMore = useCallback(debounce(() => {
+    if (next && status) {
+      dispatch(fetchNext(status.id, next)).then(({ next }) => {
+        setNext(next);
+      }).catch(() => {});
+    }
+  }, 300, { leading: true }), [next, status]);
+
+  const hasDescendants = descendantsIds.size > 0;
+
+  if (!status && isLoaded) {
+    return (
+      <MissingIndicator />
+    );
+  } else if (!status) {
+    return (
+      <PlaceholderStatus />
+    );
+  }
+
+  const children: JSX.Element[] = [];
+
+  if (hasDescendants) {
+    children.push(...renderChildren(descendantsIds).toArray());
+  }
+
+  return (
+    <PullToRefresh onRefresh={handleRefresh}>
+      <Stack space={2}>
+        <div ref={node} className='thread p-0 sm:p-2 shadow-none'>
+          <ScrollableList
+            id='thread'
+            ref={scroller}
+            hasMore={!!next}
+            onLoadMore={handleLoadMore}
+            placeholderComponent={() => <PlaceholderStatus thread />}
+            initialTopMostItemIndex={0}
+          >
+            {children}
+          </ScrollableList>
+        </div>
+      </Stack>
+    </PullToRefresh>
+  );
+};
+
+export default Thread;
diff --git a/app/soapbox/features/event/event-information.tsx b/app/soapbox/features/event/event-information.tsx
new file mode 100644
index 000000000..d3643bc05
--- /dev/null
+++ b/app/soapbox/features/event/event-information.tsx
@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from 'react';
+
+import { fetchStatus } from 'soapbox/actions/statuses';
+import MissingIndicator from 'soapbox/components/missing_indicator';
+import StatusMedia from 'soapbox/components/status-media';
+import { Stack, Text } from 'soapbox/components/ui';
+import { useAppDispatch, useAppSelector, useSettings } from 'soapbox/hooks';
+import { makeGetStatus } from 'soapbox/selectors';
+import { defaultMediaVisibility } from 'soapbox/utils/status';
+
+import type { Status as StatusEntity } from 'soapbox/types/entities';
+
+const getStatus = makeGetStatus();
+
+type RouteParams = { statusId: string };
+
+interface IEventInformation {
+  params: RouteParams,
+}
+
+const EventInformation: React.FC<IEventInformation> = ({ params }) => {
+  const dispatch = useAppDispatch();
+  const status = useAppSelector(state => getStatus(state, { id: params.statusId })) as StatusEntity;
+
+  const settings = useSettings();
+  const displayMedia = settings.get('displayMedia') as string;
+
+  const [isLoaded, setIsLoaded] = useState<boolean>(!!status);
+  const [showMedia, setShowMedia] = useState<boolean>(defaultMediaVisibility(status, displayMedia));
+
+  useEffect(() => {
+    dispatch(fetchStatus(params.statusId)).then(() => {
+      setIsLoaded(true);
+    }).catch(() => {
+      setIsLoaded(true);
+    });
+
+    setShowMedia(defaultMediaVisibility(status, displayMedia));
+  }, [params.statusId]);
+
+  const handleToggleMediaVisibility = (): void => {
+    setShowMedia(!showMedia);
+  };
+
+  if (!status && isLoaded) {
+    return (
+      <MissingIndicator />
+    );
+  } else if (!status) return null;
+
+  return (
+    <Stack className='mt-4 sm:p-2' space={2}>
+      <Text
+        className='break-words status__content'
+        size='sm'
+        dangerouslySetInnerHTML={{ __html: status.contentHtml }}
+      />
+
+      <StatusMedia
+        status={status}
+        excludeBanner
+        showMedia={showMedia}
+        onToggleVisibility={handleToggleMediaVisibility}
+      />
+    </Stack>
+  );
+};
+
+export default EventInformation;
diff --git a/app/soapbox/features/placeholder/components/placeholder_event_header.tsx b/app/soapbox/features/placeholder/components/placeholder_event_header.tsx
new file mode 100644
index 000000000..c01272944
--- /dev/null
+++ b/app/soapbox/features/placeholder/components/placeholder_event_header.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { Stack } from 'soapbox/components/ui';
+
+import { generateText, randomIntFromInterval } from '../utils';
+
+const PlaceholderEventHeader = () => {
+  const eventNameLength = randomIntFromInterval(5, 25);
+  const organizerNameLength = randomIntFromInterval(5, 30);
+  const dateLength = randomIntFromInterval(5, 30);
+  const locationLength = randomIntFromInterval(5, 30);
+
+  return (
+    <Stack className='animate-pulse text-primary-50 dark:text-primary-800' space={2}>
+      <p className='text-lg'>{generateText(eventNameLength)}</p>
+
+      <Stack space={1}>
+        <p>{generateText(organizerNameLength)}</p>
+        <p>{generateText(dateLength)}</p>
+        <p>{generateText(locationLength)}</p>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default PlaceholderEventHeader;
diff --git a/app/soapbox/features/report/components/status_check_box.tsx b/app/soapbox/features/report/components/status_check_box.tsx
index cb2424ea7..3d823c120 100644
--- a/app/soapbox/features/report/components/status_check_box.tsx
+++ b/app/soapbox/features/report/components/status_check_box.tsx
@@ -35,7 +35,7 @@ const StatusCheckBox: React.FC<IStatusCheckBox> = ({ id, disabled }) => {
 
       if (video) {
         media = (
-          <Bundle fetchComponent={Video} >
+          <Bundle fetchComponent={Video}>
             {(Component: any) => (
               <Component
                 preview={video.preview_url}
@@ -58,7 +58,7 @@ const StatusCheckBox: React.FC<IStatusCheckBox> = ({ id, disabled }) => {
 
       if (audio) {
         media = (
-          <Bundle fetchComponent={Audio} >
+          <Bundle fetchComponent={Audio}>
             {(Component: any) => (
               <Component
                 src={audio.url}
@@ -73,7 +73,7 @@ const StatusCheckBox: React.FC<IStatusCheckBox> = ({ id, disabled }) => {
       }
     } else {
       media = (
-        <Bundle fetchComponent={MediaGallery} >
+        <Bundle fetchComponent={MediaGallery}>
           {(Component: any) => <Component media={status.media_attachments} sensitive={status.sensitive} height={110} onOpenMedia={noop} />}
         </Bundle>
       );
diff --git a/app/soapbox/features/ui/components/modals/join-event-modal.tsx b/app/soapbox/features/ui/components/modals/join-event-modal.tsx
index c3a7743fa..e7014bbbf 100644
--- a/app/soapbox/features/ui/components/modals/join-event-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/join-event-modal.tsx
@@ -32,7 +32,7 @@ const AccountNoteModal: React.FC<IAccountNoteModal> = ({ statusId }) => {
 
   const handleSubmit = () => {
     setIsSubmitting(true);
-    dispatch(joinEvent(statusId, participationMessage))?.then(() => {
+    dispatch(joinEvent(statusId, participationMessage)).then(() => {
       onClose();
     }).catch(() => {});
   };
diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx
index e7c0f74e2..2dc454371 100644
--- a/app/soapbox/features/ui/index.tsx
+++ b/app/soapbox/features/ui/index.tsx
@@ -29,6 +29,7 @@ import { Layout } from 'soapbox/components/ui';
 import { useAppSelector, useOwnAccount, useSoapboxConfig, useFeatures } from 'soapbox/hooks';
 import AdminPage from 'soapbox/pages/admin_page';
 import DefaultPage from 'soapbox/pages/default_page';
+import EventPage from 'soapbox/pages/event_page';
 // import GroupsPage from 'soapbox/pages/groups_page';
 // import GroupPage from 'soapbox/pages/group_page';
 import HomePage from 'soapbox/pages/home_page';
@@ -113,6 +114,8 @@ import {
   TestTimeline,
   LogoutPage,
   AuthTokenList,
+  EventInformation,
+  EventDiscussion,
 } from './util/async-components';
 import { WrappedRoute } from './util/react_router_helpers';
 
@@ -280,6 +283,8 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {
       <WrappedRoute path='/@:username/favorites' component={FavouritedStatuses} page={ProfilePage} content={children} />
       <WrappedRoute path='/@:username/pins' component={PinnedStatuses} page={ProfilePage} content={children} />
       <WrappedRoute path='/@:username/posts/:statusId' publicRoute exact page={StatusPage} component={Status} content={children} />
+      <WrappedRoute path='/@:username/events/:statusId' publicRoute exact page={EventPage} component={EventInformation} content={children} />
+      <WrappedRoute path='/@:username/events/:statusId/discussion' publicRoute exact page={EventPage} component={EventDiscussion} content={children} />
       <Redirect from='/@:username/:statusId' to='/@:username/posts/:statusId' />
 
       <WrappedRoute path='/statuses/new' page={DefaultPage} component={NewStatus} content={children} exact />
diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts
index 78353c3d8..ba1cca62e 100644
--- a/app/soapbox/features/ui/util/async-components.ts
+++ b/app/soapbox/features/ui/util/async-components.ts
@@ -533,3 +533,15 @@ export function CreateEventModal() {
 export function JoinEventModal() {
   return import(/* webpackChunkName: "features/join_event_modal" */'../components/modals/join-event-modal');
 }
+
+export function EventHeader() {
+  return import(/* webpackChunkName: "features/event" */'../../event/components/event-header');
+}
+
+export function EventInformation() {
+  return import(/* webpackChunkName: "features/event" */'../../event/event-information');
+}
+
+export function EventDiscussion() {
+  return import(/* webpackChunkName: "features/event" */'../../event/event-discussion');
+}
diff --git a/app/soapbox/pages/event_page.tsx b/app/soapbox/pages/event_page.tsx
new file mode 100644
index 000000000..b243dc5a1
--- /dev/null
+++ b/app/soapbox/pages/event_page.tsx
@@ -0,0 +1,108 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { Column, Layout, Tabs } from 'soapbox/components/ui';
+import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder_status';
+import LinkFooter from 'soapbox/features/ui/components/link_footer';
+import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
+import {
+  EventHeader,
+  CtaBanner,
+  SignUpPanel,
+  TrendsPanel,
+  WhoToFollowPanel,
+} from 'soapbox/features/ui/util/async-components';
+import { useAppSelector, useFeatures } from 'soapbox/hooks';
+import { makeGetStatus } from 'soapbox/selectors';
+
+const getStatus = makeGetStatus();
+
+interface IEventPage {
+  params?: {
+    statusId?: string,
+  },
+}
+
+const EventPage: React.FC<IEventPage> = ({ params, children }) => {
+  const me = useAppSelector(state => state.me);
+  const features = useFeatures();
+
+  const history = useHistory();
+  const statusId = params?.statusId!;
+
+  const status = useAppSelector(state => getStatus(state, { id: statusId }));
+
+  const event = status?.event;
+
+  if (status && !event) {
+    history.push(`/@${status.getIn(['account', 'acct'])}/posts/${status.id}`);
+    return (
+      <PlaceholderStatus />
+    );
+  }
+
+  const pathname = history.location.pathname;
+  const activeItem = pathname.endsWith('/discussion') ? 'discussion' : 'info';
+
+  const tabs = status ? [
+    {
+      text: 'Information',
+      to: `/@${status.getIn(['account', 'acct'])}/events/${status.id}`,
+      name: 'info',
+    },
+    {
+      text: 'Discussion',
+      to: `/@${status.getIn(['account', 'acct'])}/events/${status.id}/discussion`,
+      name: 'discussion',
+    },
+  ] : [];
+
+  const showTabs = !['/participations', 'participation_requests'].some(path => pathname.endsWith(path));
+
+  return (
+    <>
+      <Layout.Main>
+        <Column label={event?.name} withHeader={false}>
+          <div className='space-y-4'>
+            <BundleContainer fetchComponent={EventHeader}>
+              {Component => <Component status={status} />}
+            </BundleContainer>
+
+            {status && showTabs && (
+              <Tabs key={`event-tabs-${status.id}`} items={tabs} activeItem={activeItem} />
+            )}
+
+            {children}
+          </div>
+        </Column>
+
+        {!me && (
+          <BundleContainer fetchComponent={CtaBanner}>
+            {Component => <Component key='cta-banner' />}
+          </BundleContainer>
+        )}
+      </Layout.Main>
+
+      <Layout.Aside>
+        {!me && (
+          <BundleContainer fetchComponent={SignUpPanel}>
+            {Component => <Component key='sign-up-panel' />}
+          </BundleContainer>
+        )}
+        {features.trends && (
+          <BundleContainer fetchComponent={TrendsPanel}>
+            {Component => <Component limit={3} key='trends-panel' />}
+          </BundleContainer>
+        )}
+        {features.suggestions && (
+          <BundleContainer fetchComponent={WhoToFollowPanel}>
+            {Component => <Component limit={5} key='wtf-panel' />}
+          </BundleContainer>
+        )}
+        <LinkFooter key='link-footer' />
+      </Layout.Aside>
+    </>
+  );
+};
+
+export default EventPage;
diff --git a/app/soapbox/reducers/user_lists.ts b/app/soapbox/reducers/user_lists.ts
index c6527222f..421b0c37d 100644
--- a/app/soapbox/reducers/user_lists.ts
+++ b/app/soapbox/reducers/user_lists.ts
@@ -16,11 +16,11 @@ import {
   FOLLOW_REQUEST_REJECT_SUCCESS,
   PINNED_ACCOUNTS_FETCH_SUCCESS,
   BIRTHDAY_REMINDERS_FETCH_SUCCESS,
-} from '../actions/accounts';
+} from 'soapbox/actions/accounts';
 import {
   BLOCKS_FETCH_SUCCESS,
   BLOCKS_EXPAND_SUCCESS,
-} from '../actions/blocks';
+} from 'soapbox/actions/blocks';
 import {
   DIRECTORY_FETCH_REQUEST,
   DIRECTORY_FETCH_SUCCESS,
@@ -28,29 +28,35 @@ import {
   DIRECTORY_EXPAND_REQUEST,
   DIRECTORY_EXPAND_SUCCESS,
   DIRECTORY_EXPAND_FAIL,
-} from '../actions/directory';
+} from 'soapbox/actions/directory';
+import {
+  EVENT_PARTICIPATIONS_EXPAND_SUCCESS,
+  EVENT_PARTICIPATIONS_FETCH_SUCCESS,
+  EVENT_PARTICIPATION_REQUESTS_EXPAND_SUCCESS,
+  EVENT_PARTICIPATION_REQUESTS_FETCH_SUCCESS,
+} from 'soapbox/actions/events';
 import {
   FAMILIAR_FOLLOWERS_FETCH_SUCCESS,
-} from '../actions/familiar_followers';
+} from 'soapbox/actions/familiar_followers';
 import {
   GROUP_MEMBERS_FETCH_SUCCESS,
   GROUP_MEMBERS_EXPAND_SUCCESS,
   GROUP_REMOVED_ACCOUNTS_FETCH_SUCCESS,
   GROUP_REMOVED_ACCOUNTS_EXPAND_SUCCESS,
   GROUP_REMOVED_ACCOUNTS_REMOVE_SUCCESS,
-} from '../actions/groups';
+} from 'soapbox/actions/groups';
 import {
   REBLOGS_FETCH_SUCCESS,
   FAVOURITES_FETCH_SUCCESS,
   REACTIONS_FETCH_SUCCESS,
-} from '../actions/interactions';
+} from 'soapbox/actions/interactions';
 import {
   MUTES_FETCH_SUCCESS,
   MUTES_EXPAND_SUCCESS,
-} from '../actions/mutes';
+} from 'soapbox/actions/mutes';
 import {
   NOTIFICATIONS_UPDATE,
-} from '../actions/notifications';
+} from 'soapbox/actions/notifications';
 
 import type { APIEntity } from 'soapbox/types/entities';
 
@@ -113,7 +119,6 @@ type NestedListPath = ['followers' | 'following' | 'reblogged_by' | 'favourited_
 type ListPath = ['follow_requests' | 'blocks' | 'mutes' | 'directory'];
 
 const normalizeList = (state: State, path: NestedListPath | ListPath, accounts: APIEntity[], next?: string | null) => {
-
   return state.setIn(path, ListRecord({
     next,
     items: ImmutableOrderedSet(accounts.map(item => item.id)),
@@ -202,6 +207,27 @@ export default function userLists(state = ReducerRecord(), action: AnyAction) {
       return normalizeList(state, ['birthday_reminders', action.id], action.accounts, action.next);
     case FAMILIAR_FOLLOWERS_FETCH_SUCCESS:
       return normalizeList(state, ['familiar_followers', action.id], action.accounts, action.next);
+    case EVENT_PARTICIPATIONS_FETCH_SUCCESS:
+      return normalizeList(state, ['event_participations', action.id], action.accounts, action.next);
+    case EVENT_PARTICIPATIONS_EXPAND_SUCCESS:
+      return appendToList(state, ['event_participations', action.id], action.accounts, action.next);
+    case EVENT_PARTICIPATION_REQUESTS_FETCH_SUCCESS:
+      return state.setIn(['event_participations', action.id], ParticipationRequestListRecord({
+        next: action.next,
+        items: ImmutableOrderedSet(action.participations.map(({ account, participation_message }: APIEntity) => ParticipationRequestRecord({
+          account: account.id,
+          participation_message,
+        }))),
+      }));
+    case EVENT_PARTICIPATION_REQUESTS_EXPAND_SUCCESS:
+      return state.updateIn(
+        ['event_participations', action.id, 'items'],
+        (items) => (items as ImmutableOrderedSet<ParticipationRequest>)
+          .union(action.participations.map(({ account, participation_message }: APIEntity) => ParticipationRequestRecord({
+            account: account.id,
+            participation_message,
+          }))),
+      );
     default:
       return state;
   }
diff --git a/app/soapbox/utils/download.ts b/app/soapbox/utils/download.ts
new file mode 100644
index 000000000..c877bee25
--- /dev/null
+++ b/app/soapbox/utils/download.ts
@@ -0,0 +1,13 @@
+import type { AxiosResponse } from 'axios';
+
+/** Download the file from the response instead of opening it in a tab. */
+// https://stackoverflow.com/a/53230807
+export const download = (response: AxiosResponse, filename: string) => {
+  const url = URL.createObjectURL(new Blob([response.data]));
+  const link = document.createElement('a');
+  link.href = url;
+  link.setAttribute('download', filename);
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+};

From 706e303547b501485f02eed093858593d495ecb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 16 Sep 2022 21:02:15 +0200
Subject: [PATCH 07/32] Show compose form on event discussion page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/actions/compose.ts                | 16 +++++++
 .../features/aliases/components/account.tsx   |  2 +-
 .../compose/components/compose-form.tsx       |  9 ++--
 .../containers/quoted_status_container.tsx    |  2 +-
 .../features/event/event-discussion.tsx       | 48 +++++++++----------
 .../components/account_authorize.tsx          |  2 +-
 .../reducers/__tests__/compose.test.ts        |  6 +++
 app/soapbox/reducers/compose.ts               |  2 +-
 8 files changed, 55 insertions(+), 32 deletions(-)

diff --git a/app/soapbox/actions/compose.ts b/app/soapbox/actions/compose.ts
index ab4d47b97..df519fe6c 100644
--- a/app/soapbox/actions/compose.ts
+++ b/app/soapbox/actions/compose.ts
@@ -717,6 +717,21 @@ const removeFromMentions = (composeId: string, accountId: string) =>
     });
   };
 
+const eventDiscussionCompose = (composeId: string, status: Status) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const state = getState();
+    const instance = state.instance;
+    const { explicitAddressing } = getFeatures(instance);
+
+    dispatch({
+      type: COMPOSE_REPLY,
+      id: composeId,
+      status: status,
+      account: state.accounts.get(state.me),
+      explicitAddressing,
+    });
+  };
+
 export {
   COMPOSE_CHANGE,
   COMPOSE_SUBMIT_REQUEST,
@@ -812,4 +827,5 @@ export {
   openComposeWithText,
   addToMentions,
   removeFromMentions,
+  eventDiscussionCompose,
 };
diff --git a/app/soapbox/features/aliases/components/account.tsx b/app/soapbox/features/aliases/components/account.tsx
index be9178b8d..802d3e0f6 100644
--- a/app/soapbox/features/aliases/components/account.tsx
+++ b/app/soapbox/features/aliases/components/account.tsx
@@ -23,7 +23,7 @@ interface IAccount {
 const Account: React.FC<IAccount> = ({ accountId, aliases }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
-  
+
   const getAccount = useCallback(makeGetAccount(), []);
 
   const account = useAppSelector((state) => getAccount(state, accountId));
diff --git a/app/soapbox/features/compose/components/compose-form.tsx b/app/soapbox/features/compose/components/compose-form.tsx
index d4b6a4406..52fff1deb 100644
--- a/app/soapbox/features/compose/components/compose-form.tsx
+++ b/app/soapbox/features/compose/components/compose-form.tsx
@@ -61,9 +61,10 @@ interface IComposeForm {
   shouldCondense?: boolean,
   autoFocus?: boolean,
   clickableAreaRef?: React.RefObject<HTMLDivElement>,
+  eventDiscussion?: boolean
 }
 
-const ComposeForm: React.FC<IComposeForm> = ({ id, shouldCondense, autoFocus, clickableAreaRef }) => {
+const ComposeForm: React.FC<IComposeForm> = ({ id, shouldCondense, autoFocus, clickableAreaRef, eventDiscussion }) => {
   const history = useHistory();
   const intl = useIntl();
   const dispatch = useAppDispatch();
@@ -264,7 +265,7 @@ const ComposeForm: React.FC<IComposeForm> = ({ id, shouldCondense, autoFocus, cl
 
   return (
     <Stack className='w-full' space={1} ref={formRef} onClick={handleClick}>
-      {scheduledStatusCount > 0 && (
+      {scheduledStatusCount > 0 && !eventDiscussion && (
         <Warning
           message={(
             <FormattedMessage
@@ -285,9 +286,9 @@ const ComposeForm: React.FC<IComposeForm> = ({ id, shouldCondense, autoFocus, cl
 
       <WarningContainer composeId={id} />
 
-      {!shouldCondense && <ReplyIndicatorContainer composeId={id} />}
+      {!shouldCondense && !eventDiscussion && <ReplyIndicatorContainer composeId={id} />}
 
-      {!shouldCondense && <ReplyMentions composeId={id} />}
+      {!shouldCondense && !eventDiscussion && <ReplyMentions composeId={id} />}
 
       <div
         className={classNames({
diff --git a/app/soapbox/features/compose/containers/quoted_status_container.tsx b/app/soapbox/features/compose/containers/quoted_status_container.tsx
index 39416867b..00040e770 100644
--- a/app/soapbox/features/compose/containers/quoted_status_container.tsx
+++ b/app/soapbox/features/compose/containers/quoted_status_container.tsx
@@ -13,7 +13,7 @@ interface IQuotedStatusContainer {
 const QuotedStatusContainer: React.FC<IQuotedStatusContainer> = ({ composeId }) => {
   const dispatch = useAppDispatch();
   const getStatus = useCallback(makeGetStatus(), []);
-  
+
   const status = useAppSelector(state => getStatus(state, { id: state.compose.get(composeId)?.quote! }));
 
   const onCancel = () => {
diff --git a/app/soapbox/features/event/event-discussion.tsx b/app/soapbox/features/event/event-discussion.tsx
index 62c90ae65..1ee361799 100644
--- a/app/soapbox/features/event/event-discussion.tsx
+++ b/app/soapbox/features/event/event-discussion.tsx
@@ -3,9 +3,9 @@ import debounce from 'lodash/debounce';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { createSelector } from 'reselect';
 
+import { eventDiscussionCompose } from 'soapbox/actions/compose';
 import { fetchStatusWithContext, fetchNext } from 'soapbox/actions/statuses';
 import MissingIndicator from 'soapbox/components/missing_indicator';
-import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import ScrollableList from 'soapbox/components/scrollable_list';
 import Tombstone from 'soapbox/components/tombstone';
 import { Stack } from 'soapbox/components/ui';
@@ -14,6 +14,7 @@ import PendingStatus from 'soapbox/features/ui/components/pending_status';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 import { makeGetStatus } from 'soapbox/selectors';
 
+import ComposeForm from '../compose/components/compose-form';
 import ThreadStatus from '../status/components/thread-status';
 
 import type { VirtuosoHandle } from 'react-virtuoso';
@@ -55,13 +56,13 @@ const getDescendantsIds = createSelector([
 
 type RouteParams = { statusId: string };
 
-interface IThread {
+interface IEventDiscussion {
   params: RouteParams,
   onOpenMedia: (media: ImmutableList<AttachmentEntity>, index: number) => void,
   onOpenVideo: (video: AttachmentEntity, time: number) => void,
 }
 
-const Thread: React.FC<IThread> = (props) => {
+const EventDiscussion: React.FC<IEventDiscussion> = (props) => {
   const dispatch = useAppDispatch();
 
   const status = useAppSelector(state => getStatus(state, { id: props.params.statusId }));
@@ -101,6 +102,10 @@ const Thread: React.FC<IThread> = (props) => {
     });
   }, [props.params.statusId]);
 
+  useEffect(() => {
+    dispatch(eventDiscussionCompose(`reply:${props.params.statusId}`, status!));
+  }, [isLoaded]);
+
   const handleMoveUp = (id: string) => {
     const index = ImmutableList(descendantsIds).indexOf(id);
     _selectChild(index - 1);
@@ -174,10 +179,6 @@ const Thread: React.FC<IThread> = (props) => {
     });
   };
 
-  const handleRefresh = () => {
-    return fetchData();
-  };
-
   const handleLoadMore = useCallback(debounce(() => {
     if (next && status) {
       dispatch(fetchNext(status.id, next)).then(({ next }) => {
@@ -205,23 +206,22 @@ const Thread: React.FC<IThread> = (props) => {
   }
 
   return (
-    <PullToRefresh onRefresh={handleRefresh}>
-      <Stack space={2}>
-        <div ref={node} className='thread p-0 sm:p-2 shadow-none'>
-          <ScrollableList
-            id='thread'
-            ref={scroller}
-            hasMore={!!next}
-            onLoadMore={handleLoadMore}
-            placeholderComponent={() => <PlaceholderStatus thread />}
-            initialTopMostItemIndex={0}
-          >
-            {children}
-          </ScrollableList>
-        </div>
-      </Stack>
-    </PullToRefresh>
+    <Stack space={2}>
+      <ComposeForm id={`reply:${status.id}`} autoFocus={false} eventDiscussion />
+      <div ref={node} className='thread p-0 sm:p-2 shadow-none'>
+        <ScrollableList
+          id='thread'
+          ref={scroller}
+          hasMore={!!next}
+          onLoadMore={handleLoadMore}
+          placeholderComponent={() => <PlaceholderStatus thread />}
+          initialTopMostItemIndex={0}
+        >
+          {children}
+        </ScrollableList>
+      </div>
+    </Stack>
   );
 };
 
-export default Thread;
+export default EventDiscussion;
diff --git a/app/soapbox/features/follow_requests/components/account_authorize.tsx b/app/soapbox/features/follow_requests/components/account_authorize.tsx
index b820938d6..0d0428d44 100644
--- a/app/soapbox/features/follow_requests/components/account_authorize.tsx
+++ b/app/soapbox/features/follow_requests/components/account_authorize.tsx
@@ -23,7 +23,7 @@ interface IAccountAuthorize {
 const AccountAuthorize: React.FC<IAccountAuthorize> = ({ id }) => {
   const intl = useIntl();
   const dispatch = useDispatch();
-  
+
   const getAccount = useCallback(makeGetAccount(), []);
 
   const account = useAppSelector((state) => getAccount(state, id));
diff --git a/app/soapbox/reducers/__tests__/compose.test.ts b/app/soapbox/reducers/__tests__/compose.test.ts
index c8da1c744..ea79b40ad 100644
--- a/app/soapbox/reducers/__tests__/compose.test.ts
+++ b/app/soapbox/reducers/__tests__/compose.test.ts
@@ -91,6 +91,7 @@ describe('compose reducer', () => {
   it('uses \'public\' scope as default', () => {
     const action = {
       type: actions.COMPOSE_REPLY,
+      id: 'compose-modal',
       status: ImmutableRecord({})(),
       account: ImmutableRecord({})(),
     };
@@ -101,6 +102,7 @@ describe('compose reducer', () => {
     const state = initialState.set('default', ReducerCompose({ privacy: 'public' }));
     const action = {
       type: actions.COMPOSE_REPLY,
+      id: 'compose-modal',
       status: ImmutableRecord({ visibility: 'direct' })(),
       account: ImmutableRecord({})(),
     };
@@ -111,6 +113,7 @@ describe('compose reducer', () => {
     const state = initialState.set('default', ReducerCompose({ privacy: 'public' }));
     const action = {
       type: actions.COMPOSE_REPLY,
+      id: 'compose-modal',
       status: ImmutableRecord({ visibility: 'private' })(),
       account: ImmutableRecord({})(),
     };
@@ -121,6 +124,7 @@ describe('compose reducer', () => {
     const state = initialState.set('default', ReducerCompose({ privacy: 'public' }));
     const action = {
       type: actions.COMPOSE_REPLY,
+      id: 'compose-modal',
       status: ImmutableRecord({ visibility: 'unlisted' })(),
       account: ImmutableRecord({})(),
     };
@@ -131,6 +135,7 @@ describe('compose reducer', () => {
     const state = initialState.set('default', ReducerCompose({ privacy: 'private' }));
     const action = {
       type: actions.COMPOSE_REPLY,
+      id: 'compose-modal',
       status: ImmutableRecord({ visibility: 'public' })(),
       account: ImmutableRecord({})(),
     };
@@ -141,6 +146,7 @@ describe('compose reducer', () => {
     const state = initialState.set('default', ReducerCompose({ privacy: 'unlisted' }));
     const action = {
       type: actions.COMPOSE_REPLY,
+      id: 'compose-modal',
       status: ImmutableRecord({ visibility: 'public' })(),
       account: ImmutableRecord({})(),
     };
diff --git a/app/soapbox/reducers/compose.ts b/app/soapbox/reducers/compose.ts
index 4523edab9..9d4f84556 100644
--- a/app/soapbox/reducers/compose.ts
+++ b/app/soapbox/reducers/compose.ts
@@ -317,7 +317,7 @@ export default function compose(state = initialState, action: AnyAction) {
     case COMPOSE_COMPOSING_CHANGE:
       return updateCompose(state, action.id, compose => compose.set('is_composing', action.value));
     case COMPOSE_REPLY:
-      return updateCompose(state, 'compose-modal', compose => compose.withMutations(map => {
+      return updateCompose(state, action.id, compose => compose.withMutations(map => {
         const defaultCompose = state.get('default')!;
 
         map.set('in_reply_to', action.status.get('id'));

From 309bd2c34f343d5da022a5e97737bda1bab253c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 21 Sep 2022 00:12:52 +0200
Subject: [PATCH 08/32] Event discussion page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../features/compose/components/compose-form.tsx | 16 +++++++++++++---
 .../features/event/components/event-header.tsx   |  4 +++-
 app/soapbox/features/event/event-discussion.tsx  |  8 ++++++--
 app/soapbox/features/status/index.tsx            |  8 +++++++-
 4 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/app/soapbox/features/compose/components/compose-form.tsx b/app/soapbox/features/compose/components/compose-form.tsx
index 52fff1deb..714f6f627 100644
--- a/app/soapbox/features/compose/components/compose-form.tsx
+++ b/app/soapbox/features/compose/components/compose-form.tsx
@@ -1,6 +1,6 @@
 import classNames from 'clsx';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { defineMessages, FormattedMessage, MessageDescriptor, useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 import { length } from 'stringz';
 
@@ -47,7 +47,8 @@ const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u20
 
 const messages = defineMessages({
   placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What\'s on your mind?' },
-  pollPlaceholder: { id: 'compose_form.poll_placeholder', defaultMessage: 'Add a poll topic...' },
+  pollPlaceholder: { id: 'compose_form.poll_placeholder', defaultMessage: 'Add a poll topic…' },
+  eventPlaceholder: { id: 'compose_form.event_placeholder', defaultMessage: 'Post to this event' },
   spoiler_placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: 'Write your warning here' },
   publish: { id: 'compose_form.publish', defaultMessage: 'Post' },
   publishLoud: { id: 'compose_form.publish_loud', defaultMessage: '{publish}!' },
@@ -238,6 +239,7 @@ const ComposeForm: React.FC<IComposeForm> = ({ id, shouldCondense, autoFocus, cl
   const shouldAutoFocus = autoFocus && !showSearch && !isMobile(window.innerWidth);
 
   let publishText: string | JSX.Element = '';
+  let textareaPlaceholder: MessageDescriptor;
 
   if (isEditing) {
     publishText = intl.formatMessage(messages.saveChanges);
@@ -263,6 +265,14 @@ const ComposeForm: React.FC<IComposeForm> = ({ id, shouldCondense, autoFocus, cl
     publishText = intl.formatMessage(messages.schedule);
   }
 
+  if (eventDiscussion) {
+    textareaPlaceholder = messages.eventPlaceholder;
+  } else if (hasPoll) {
+    textareaPlaceholder = messages.pollPlaceholder;
+  } else {
+    textareaPlaceholder = messages.placeholder;
+  }
+
   return (
     <Stack className='w-full' space={1} ref={formRef} onClick={handleClick}>
       {scheduledStatusCount > 0 && !eventDiscussion && (
@@ -316,7 +326,7 @@ const ComposeForm: React.FC<IComposeForm> = ({ id, shouldCondense, autoFocus, cl
 
       <AutosuggestTextarea
         ref={(isModalOpen && shouldCondense) ? undefined : autosuggestTextareaRef}
-        placeholder={intl.formatMessage(hasPoll ? messages.pollPlaceholder : messages.placeholder)}
+        placeholder={intl.formatMessage(textareaPlaceholder)}
         disabled={disabled}
         value={text}
         onChange={handleChange}
diff --git a/app/soapbox/features/event/components/event-header.tsx b/app/soapbox/features/event/components/event-header.tsx
index 3492d1739..e79198e34 100644
--- a/app/soapbox/features/event/components/event-header.tsx
+++ b/app/soapbox/features/event/components/event-header.tsx
@@ -21,6 +21,8 @@ import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/t
 
 const messages = defineMessages({
   bannerHeader: { id: 'event.banner', defaultMessage: 'Event banner' },
+  exportIcs: { id: 'event.export_ics', defaultMessage: 'Export to your calendar' },
+  copy: { id: 'event.copy', defaultMessage: 'Copy link to event' },
 });
 
 interface IEventHeader {
@@ -65,7 +67,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
 
   const menu: MenuType = [
     {
-      text: 'Export to your calendar',
+      text: intl.formatMessage(messages.exportIcs),
       action: handleExportClick,
       icon: require('@tabler/icons/calendar-plus.svg'),
     },
diff --git a/app/soapbox/features/event/event-discussion.tsx b/app/soapbox/features/event/event-discussion.tsx
index 1ee361799..f83d8728b 100644
--- a/app/soapbox/features/event/event-discussion.tsx
+++ b/app/soapbox/features/event/event-discussion.tsx
@@ -1,6 +1,7 @@
 import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
 import debounce from 'lodash/debounce';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { createSelector } from 'reselect';
 
 import { eventDiscussionCompose } from 'soapbox/actions/compose';
@@ -103,7 +104,7 @@ const EventDiscussion: React.FC<IEventDiscussion> = (props) => {
   }, [props.params.statusId]);
 
   useEffect(() => {
-    dispatch(eventDiscussionCompose(`reply:${props.params.statusId}`, status!));
+    if (isLoaded) dispatch(eventDiscussionCompose(`reply:${props.params.statusId}`, status!));
   }, [isLoaded]);
 
   const handleMoveUp = (id: string) => {
@@ -207,7 +208,9 @@ const EventDiscussion: React.FC<IEventDiscussion> = (props) => {
 
   return (
     <Stack space={2}>
-      <ComposeForm id={`reply:${status.id}`} autoFocus={false} eventDiscussion />
+      <div className='sm:p-2 pt-0 border-b border-solid border-gray-200 dark:border-gray-800'>
+        <ComposeForm id={`reply:${status.id}`} autoFocus={false} eventDiscussion />
+      </div>
       <div ref={node} className='thread p-0 sm:p-2 shadow-none'>
         <ScrollableList
           id='thread'
@@ -216,6 +219,7 @@ const EventDiscussion: React.FC<IEventDiscussion> = (props) => {
           onLoadMore={handleLoadMore}
           placeholderComponent={() => <PlaceholderStatus thread />}
           initialTopMostItemIndex={0}
+          emptyMessage={<FormattedMessage id='event.discussion.empty' defaultMessage='No one has commented this event yet. When someone does, they will appear here.' />}
         >
           {children}
         </ScrollableList>
diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index b3df23126..b3224a1db 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@@ -4,7 +4,7 @@ import debounce from 'lodash/debounce';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { HotKeys } from 'react-hotkeys';
 import { defineMessages, useIntl } from 'react-intl';
-import { useHistory } from 'react-router-dom';
+import { Redirect, useHistory } from 'react-router-dom';
 import { createSelector } from 'reselect';
 
 import {
@@ -425,6 +425,12 @@ const Thread: React.FC<IThread> = (props) => {
   const hasAncestors = ancestorsIds.size > 0;
   const hasDescendants = descendantsIds.size > 0;
 
+  if (status?.event) {
+    return (
+      <Redirect to={`/@${status.getIn(['account', 'acct'])}/events/${status.id}`} />
+    );
+  }
+
   if (!status && isLoaded) {
     return (
       <MissingIndicator />

From fe7333ddb04db6b16764b912ae3071c9ac508c75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 21 Sep 2022 23:27:53 +0200
Subject: [PATCH 09/32] Information page, improvements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/actions/events.ts                 |  26 ++--
 app/soapbox/components/status-media.tsx       |   2 +-
 app/soapbox/components/ui/stack/stack.tsx     |   3 +-
 .../event/components/event-action-button.tsx  |  15 +-
 .../event/components/event-header.tsx         | 144 ++++++++++++++++--
 .../features/event/event-discussion.tsx       |  13 +-
 .../features/event/event-information.tsx      | 119 +++++++++++++--
 .../ui/components/bundle_modal_error.tsx      |  28 ++--
 .../features/ui/components/compose-button.tsx |   2 +-
 .../features/ui/components/modal_root.js      |   4 +
 .../ui/components/modals/event-map-modal.tsx  |  79 ++++++++++
 .../modals/event-participants-modal.tsx       |  59 +++++++
 .../ui/components/unauthorized_modal.tsx      |   5 +-
 .../features/ui/util/async-components.ts      |   8 +
 app/soapbox/locales/ast.json                  |   2 +-
 app/soapbox/locales/bg.json                   |   2 +-
 app/soapbox/locales/br.json                   |   2 +-
 app/soapbox/locales/en.json                   |   2 +-
 app/soapbox/locales/ga.json                   |   2 +-
 app/soapbox/locales/hi.json                   |   2 +-
 app/soapbox/locales/hr.json                   |   2 +-
 app/soapbox/locales/io.json                   |   2 +-
 app/soapbox/locales/lt.json                   |   2 +-
 app/soapbox/locales/ms.json                   |   2 +-
 app/soapbox/reducers/statuses.ts              |   6 +-
 package.json                                  |   2 +
 webpack/rules/assets.js                       |   1 +
 yarn.lock                                     |  17 +++
 28 files changed, 478 insertions(+), 75 deletions(-)
 create mode 100644 app/soapbox/features/ui/components/modals/event-map-modal.tsx
 create mode 100644 app/soapbox/features/ui/components/modals/event-participants-modal.tsx

diff --git a/app/soapbox/actions/events.ts b/app/soapbox/actions/events.ts
index 711dd6a63..ac2cbdf74 100644
--- a/app/soapbox/actions/events.ts
+++ b/app/soapbox/actions/events.ts
@@ -11,7 +11,7 @@ import snackbar from './snackbar';
 
 import type { AxiosError } from 'axios';
 import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity, Status as StatusEntity } from 'soapbox/types/entities';
 
 const LOCATION_SEARCH_REQUEST = 'LOCATION_SEARCH_REQUEST';
 const LOCATION_SEARCH_SUCCESS = 'LOCATION_SEARCH_SUCCESS';
@@ -259,7 +259,7 @@ const joinEvent = (id: string, participationMessage?: string) =>
       return dispatch(noOp);
     }
 
-    dispatch(joinEventRequest());
+    dispatch(joinEventRequest(status));
 
     return api(getState).post(`/api/v1/pleroma/events/${id}/join`, { participationMessage }).then(({ data }) => {
       dispatch(importFetchedStatus(data));
@@ -270,22 +270,24 @@ const joinEvent = (id: string, participationMessage?: string) =>
         `/@${data.account.acct}/events/${data.id}`,
       ));
     }).catch(function(error) {
-      dispatch(joinEventFail(error, status?.event?.join_state || null));
+      dispatch(joinEventFail(error, status, status?.event?.join_state || null));
     });
   };
 
-const joinEventRequest = () => ({
+const joinEventRequest = (status: StatusEntity) => ({
   type: EVENT_JOIN_REQUEST,
+  id: status.id,
 });
 
 const joinEventSuccess = (status: APIEntity) => ({
   type: EVENT_JOIN_SUCCESS,
-  status,
+  id: status.id,
 });
 
-const joinEventFail = (error: AxiosError, previousState: string | null) => ({
+const joinEventFail = (error: AxiosError, status: StatusEntity, previousState: string | null) => ({
   type: EVENT_JOIN_FAIL,
   error,
+  id: status.id,
   previousState,
 });
 
@@ -297,27 +299,29 @@ const leaveEvent = (id: string) =>
       return dispatch(noOp);
     }
 
-    dispatch(leaveEventRequest());
+    dispatch(leaveEventRequest(status));
 
     return api(getState).post(`/api/v1/pleroma/events/${id}/leave`).then(({ data }) => {
       dispatch(importFetchedStatus(data));
       dispatch(leaveEventSuccess(data));
     }).catch(function(error) {
-      dispatch(leaveEventFail(error));
+      dispatch(leaveEventFail(error, status));
     });
   };
 
-const leaveEventRequest = () => ({
+const leaveEventRequest = (status: StatusEntity) => ({
   type: EVENT_LEAVE_REQUEST,
+  id: status.id,
 });
 
 const leaveEventSuccess = (status: APIEntity) => ({
   type: EVENT_LEAVE_SUCCESS,
-  status,
+  id: status.id,
 });
 
-const leaveEventFail = (error: AxiosError) => ({
+const leaveEventFail = (error: AxiosError, status: StatusEntity) => ({
   type: EVENT_LEAVE_FAIL,
+  id: status.id,
   error,
 });
 
diff --git a/app/soapbox/components/status-media.tsx b/app/soapbox/components/status-media.tsx
index 9a0c007e1..c312c8a0c 100644
--- a/app/soapbox/components/status-media.tsx
+++ b/app/soapbox/components/status-media.tsx
@@ -38,7 +38,7 @@ const StatusMedia: React.FC<IStatusMedia> = ({
   const dispatch = useAppDispatch();
   const [mediaWrapperWidth, setMediaWrapperWidth] = useState<number | undefined>(undefined);
 
-  const mediaAttachments = excludeBanner ? status.media_attachments.filter(({ description }) => description !== 'Banner') : status.media_attachments;
+  const mediaAttachments = excludeBanner ? status.media_attachments.filter(({ description, pleroma }) => description !== 'Banner' && pleroma.get('mime_type') !== 'text/html') : status.media_attachments;
 
   const size = mediaAttachments.size;
   const firstAttachment = mediaAttachments.first();
diff --git a/app/soapbox/components/ui/stack/stack.tsx b/app/soapbox/components/ui/stack/stack.tsx
index 6527184db..06d4bba44 100644
--- a/app/soapbox/components/ui/stack/stack.tsx
+++ b/app/soapbox/components/ui/stack/stack.tsx
@@ -1,7 +1,7 @@
 import classNames from 'clsx';
 import React from 'react';
 
-type SIZES = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 10
+type SIZES = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 10
 
 const spaces = {
   0: 'space-y-0',
@@ -12,6 +12,7 @@ const spaces = {
   3: 'space-y-3',
   4: 'space-y-4',
   5: 'space-y-5',
+  6: 'space-y-6',
   10: 'space-y-10',
 };
 
diff --git a/app/soapbox/features/event/components/event-action-button.tsx b/app/soapbox/features/event/components/event-action-button.tsx
index 0b72ec8ee..cbc186759 100644
--- a/app/soapbox/features/event/components/event-action-button.tsx
+++ b/app/soapbox/features/event/components/event-action-button.tsx
@@ -4,7 +4,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { joinEvent, leaveEvent } from 'soapbox/actions/events';
 import { openModal } from 'soapbox/actions/modals';
 import { Button } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
 import type { Status as StatusEntity } from 'soapbox/types/entities';
 
@@ -21,6 +21,8 @@ const EventActionButton: React.FC<IEventAction> = ({ status }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
+  const me = useAppSelector((state) => state.me);
+
   const event = status.event!;
 
   const handleJoin: React.EventHandler<React.MouseEvent> = (e) => {
@@ -49,6 +51,15 @@ const EventActionButton: React.FC<IEventAction> = ({ status }) => {
     }
   };
 
+  const handleOpenUnauthorizedModal: React.EventHandler<React.MouseEvent> = (e) => {
+    e.preventDefault();
+
+    dispatch(openModal('UNAUTHORIZED', {
+      action: 'JOIN',
+      ap_id: status.url,
+    }));
+  };
+
   let buttonLabel;
   let buttonIcon;
   let buttonDisabled = false;
@@ -69,7 +80,7 @@ const EventActionButton: React.FC<IEventAction> = ({ status }) => {
       break;
     default:
       buttonLabel = <FormattedMessage id='event.join_state.empty' defaultMessage='Participate' />;
-      buttonAction = handleJoin;
+      buttonAction = me ? handleJoin : handleOpenUnauthorizedModal;
   }
 
   return (
diff --git a/app/soapbox/features/event/components/event-header.tsx b/app/soapbox/features/event/components/event-header.tsx
index e79198e34..8f2cf7ddf 100644
--- a/app/soapbox/features/event/components/event-header.tsx
+++ b/app/soapbox/features/event/components/event-header.tsx
@@ -4,13 +4,15 @@ import { Link } from 'react-router-dom';
 
 import { fetchEventIcs } from 'soapbox/actions/events';
 import { openModal } from 'soapbox/actions/modals';
+import { deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation';
 import Icon from 'soapbox/components/icon';
 import StillImage from 'soapbox/components/still_image';
-import { HStack, IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList, Stack, Text } from 'soapbox/components/ui';
+import { Button, HStack, IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList, Stack, Text } from 'soapbox/components/ui';
 import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import VerificationBadge from 'soapbox/components/verification_badge';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
 import { download } from 'soapbox/utils/download';
+import { shortNumberFormat } from 'soapbox/utils/numbers';
 
 import PlaceholderEventHeader from '../../placeholder/components/placeholder_event_header';
 import EventActionButton from '../components/event-action-button';
@@ -23,6 +25,13 @@ const messages = defineMessages({
   bannerHeader: { id: 'event.banner', defaultMessage: 'Event banner' },
   exportIcs: { id: 'event.export_ics', defaultMessage: 'Export to your calendar' },
   copy: { id: 'event.copy', defaultMessage: 'Copy link to event' },
+  bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' },
+  unbookmark: { id: 'status.unbookmark', defaultMessage: 'Remove bookmark' },
+  adminAccount: { id: 'status.admin_account', defaultMessage: 'Moderate @{name}' },
+  adminStatus: { id: 'status.admin_status', defaultMessage: 'Open this post in the moderation interface' },
+  markStatusSensitive: { id: 'admin.statuses.actions.mark_status_sensitive', defaultMessage: 'Mark post sensitive' },
+  markStatusNotSensitive: { id: 'admin.statuses.actions.mark_status_not_sensitive', defaultMessage: 'Mark post not sensitive' },
+  deleteStatus: { id: 'admin.statuses.actions.delete_status', defaultMessage: 'Delete post' },
 });
 
 interface IEventHeader {
@@ -33,13 +42,15 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const me = useAppSelector(state => state.me);
+  const ownAccount = useOwnAccount();
+  const isStaff = ownAccount ? ownAccount.staff : false;
+  const isAdmin = ownAccount ? ownAccount.admin : false;
 
   if (!status || !status.event) {
     return (
       <>
         <div className='-mt-4 -mx-4'>
-          <div className='relative h-48 w-full lg:h-64 md:rounded-t-xl bg-gray-200 dark:bg-gray-900/50' />
+          <div className='relative h-32 w-full lg:h-48 md:rounded-t-xl bg-gray-200 dark:bg-gray-900/50' />
         </div>
 
         <PlaceholderEventHeader />
@@ -52,17 +63,51 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
   const banner = status.media_attachments?.find(({ description }) => description === 'Banner');
 
   const handleHeaderClick: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
-    e.preventDefault();
+    e.stopPropagation();
 
     const index = status.media_attachments!.findIndex(({ description }) => description === 'Banner');
     dispatch(openModal('MEDIA', { media: status.media_attachments, index }));
   };
 
-  const handleExportClick: React.MouseEventHandler = e => {
+  const handleExportClick = () => {
     dispatch(fetchEventIcs(status.id)).then((response) => {
       download(response, 'calendar.ics');
     }).catch(() => {});
-    e.preventDefault();
+  };
+
+  const handleCopy = () => {
+    const { uri }  = status;
+    const textarea = document.createElement('textarea');
+
+    textarea.textContent    = uri;
+    textarea.style.position = 'fixed';
+
+    document.body.appendChild(textarea);
+
+    try {
+      textarea.select();
+      document.execCommand('copy');
+    } catch {
+      // Do nothing
+    } finally {
+      document.body.removeChild(textarea);
+    }
+  };
+
+  const handleModerate = () => {
+    dispatch(openModal('ACCOUNT_MODERATION', { accountId: account.id }));
+  };
+
+  const handleModerateStatus = () => {
+    window.open(`/pleroma/admin/#/statuses/${status.id}/`, '_blank');
+  };
+
+  const handleToggleStatusSensitivity = () => {
+    dispatch(toggleStatusSensitivityModal(intl, status.id, status.sensitive));
+  };
+
+  const handleDeleteStatus = () => {
+    dispatch(deleteStatusModal(intl, status.id));
   };
 
   const menu: MenuType = [
@@ -71,12 +116,66 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
       action: handleExportClick,
       icon: require('@tabler/icons/calendar-plus.svg'),
     },
+    {
+      text: intl.formatMessage(messages.copy),
+      action: handleCopy,
+      icon: require('@tabler/icons/link.svg'),
+    },
   ];
 
+  if (isStaff) {
+    menu.push(null);
+
+    menu.push({
+      text: intl.formatMessage(messages.adminAccount, { name: account.username }),
+      action: handleModerate,
+      icon: require('@tabler/icons/gavel.svg'),
+    });
+
+    if (isAdmin) {
+      menu.push({
+        text: intl.formatMessage(messages.adminStatus),
+        action: handleModerateStatus,
+        icon: require('@tabler/icons/pencil.svg'),
+      });
+    }
+
+    menu.push({
+      text: intl.formatMessage(status.sensitive === false ? messages.markStatusSensitive : messages.markStatusNotSensitive),
+      action: handleToggleStatusSensitivity,
+      icon: require('@tabler/icons/alert-triangle.svg'),
+    });
+
+    if (account.id !== ownAccount?.id) {
+      menu.push({
+        text: intl.formatMessage(messages.deleteStatus),
+        action: handleDeleteStatus,
+        icon: require('@tabler/icons/trash.svg'),
+        destructive: true,
+      });
+    }
+  }
+
+  const handleManageClick: React.MouseEventHandler = e => {
+    e.stopPropagation();
+
+    dispatch(openModal('MANAGE_EVENT', {
+      statusId: status.id,
+    }));
+  };
+
+  const handleParticipantsClick: React.MouseEventHandler = e => {
+    e.stopPropagation();
+
+    dispatch(openModal('EVENT_PARTICIPANTS', {
+      statusId: status.id,
+    }));
+  };
+
   return (
     <>
       <div className='-mt-4 -mx-4'>
-        <div className='relative h-48 w-full lg:h-64 md:rounded-t-xl bg-gray-200 dark:bg-gray-900/50'>
+        <div className='relative h-32 w-full lg:h-48 md:rounded-t-xl bg-gray-200 dark:bg-gray-900/50'>
           {banner && (
             <a href={banner.url} onClick={handleHeaderClick} target='_blank'>
               <StillImage
@@ -124,12 +223,21 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
               })}
             </MenuList>
           </Menu>
-          {account.id !== me && <EventActionButton status={status} />}
+          {account.id === ownAccount?.id ? (
+            <Button
+              size='sm'
+              theme='secondary'
+              onClick={handleManageClick}
+              to={`/@${account.acct}/events/${status.id}`}
+            >
+              <FormattedMessage id='event.manage' defaultMessage='Manage' />
+            </Button>
+          ) : <EventActionButton status={status} />}
         </HStack>
 
         <Stack space={1}>
           <HStack alignItems='center' space={2}>
-            <Icon src={require('@tabler/icons/user.svg')} />
+            <Icon src={require('@tabler/icons/flag-3.svg')} />
             <span>
               <FormattedMessage
                 id='event.organized_by'
@@ -146,6 +254,22 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
             </span>
           </HStack>
 
+          <HStack alignItems='center' space={2}>
+            <Icon src={require('@tabler/icons/users.svg')} />
+            <a href='#' className='hover:underline' onClick={handleParticipantsClick}>
+              <span>
+                <FormattedMessage
+                  id='event.participants'
+                  defaultMessage='{count} {rawCount, plural, one {person} other {people}} going'
+                  values={{
+                    rawCount: event.participants_count || 0,
+                    count: shortNumberFormat(event.participants_count || 0),
+                  }}
+                />
+              </span>
+            </a>
+          </HStack>
+
           <EventDate status={status} />
 
           {event.location && (
diff --git a/app/soapbox/features/event/event-discussion.tsx b/app/soapbox/features/event/event-discussion.tsx
index f83d8728b..b8df6af57 100644
--- a/app/soapbox/features/event/event-discussion.tsx
+++ b/app/soapbox/features/event/event-discussion.tsx
@@ -22,8 +22,6 @@ import type { VirtuosoHandle } from 'react-virtuoso';
 import type { RootState } from 'soapbox/store';
 import type { Attachment as AttachmentEntity } from 'soapbox/types/entities';
 
-const getStatus = makeGetStatus();
-
 const getDescendantsIds = createSelector([
   (_: RootState, statusId: string) => statusId,
   (state: RootState) => state.contexts.replies,
@@ -66,8 +64,11 @@ interface IEventDiscussion {
 const EventDiscussion: React.FC<IEventDiscussion> = (props) => {
   const dispatch = useAppDispatch();
 
+  const getStatus = useCallback(makeGetStatus(), []);
   const status = useAppSelector(state => getStatus(state, { id: props.params.statusId }));
 
+  const me = useAppSelector((state) => state.me);
+
   const descendantsIds = useAppSelector(state => {
     let descendantsIds = ImmutableOrderedSet<string>();
 
@@ -104,8 +105,8 @@ const EventDiscussion: React.FC<IEventDiscussion> = (props) => {
   }, [props.params.statusId]);
 
   useEffect(() => {
-    if (isLoaded) dispatch(eventDiscussionCompose(`reply:${props.params.statusId}`, status!));
-  }, [isLoaded]);
+    if (isLoaded && me) dispatch(eventDiscussionCompose(`reply:${props.params.statusId}`, status!));
+  }, [isLoaded, me]);
 
   const handleMoveUp = (id: string) => {
     const index = ImmutableList(descendantsIds).indexOf(id);
@@ -208,9 +209,9 @@ const EventDiscussion: React.FC<IEventDiscussion> = (props) => {
 
   return (
     <Stack space={2}>
-      <div className='sm:p-2 pt-0 border-b border-solid border-gray-200 dark:border-gray-800'>
+      {me && <div className='sm:p-2 pt-0 border-b border-solid border-gray-200 dark:border-gray-800'>
         <ComposeForm id={`reply:${status.id}`} autoFocus={false} eventDiscussion />
-      </div>
+      </div>}
       <div ref={node} className='thread p-0 sm:p-2 shadow-none'>
         <ScrollableList
           id='thread'
diff --git a/app/soapbox/features/event/event-information.tsx b/app/soapbox/features/event/event-information.tsx
index d3643bc05..980cbd089 100644
--- a/app/soapbox/features/event/event-information.tsx
+++ b/app/soapbox/features/event/event-information.tsx
@@ -1,17 +1,17 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import { FormattedDate, FormattedMessage } from 'react-intl';
 
+import { openModal } from 'soapbox/actions/modals';
 import { fetchStatus } from 'soapbox/actions/statuses';
 import MissingIndicator from 'soapbox/components/missing_indicator';
 import StatusMedia from 'soapbox/components/status-media';
-import { Stack, Text } from 'soapbox/components/ui';
+import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector, useSettings } from 'soapbox/hooks';
 import { makeGetStatus } from 'soapbox/selectors';
 import { defaultMediaVisibility } from 'soapbox/utils/status';
 
 import type { Status as StatusEntity } from 'soapbox/types/entities';
 
-const getStatus = makeGetStatus();
-
 type RouteParams = { statusId: string };
 
 interface IEventInformation {
@@ -20,6 +20,8 @@ interface IEventInformation {
 
 const EventInformation: React.FC<IEventInformation> = ({ params }) => {
   const dispatch = useAppDispatch();
+  const getStatus = useCallback(makeGetStatus(), []);
+
   const status = useAppSelector(state => getStatus(state, { id: params.statusId })) as StatusEntity;
 
   const settings = useSettings();
@@ -38,10 +40,96 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
     setShowMedia(defaultMediaVisibility(status, displayMedia));
   }, [params.statusId]);
 
-  const handleToggleMediaVisibility = (): void => {
+  const handleToggleMediaVisibility = () => {
     setShowMedia(!showMedia);
   };
 
+  const handleShowMap: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
+    e.stopPropagation();
+
+    dispatch(openModal('EVENT_MAP', {
+      statusId: status.id,
+    }));
+  };
+
+  const renderEventLocation = useCallback(() => {
+    const event = status?.event;
+
+    return event?.location && (
+      <Stack space={1}>
+        <Text size='xl' weight='bold'>
+          <FormattedMessage id='event.location' defaultMessage='Location' />
+        </Text>
+        <HStack space={2} alignItems='center'>
+          <Icon src={require('@tabler/icons/map-pin.svg')} />
+          <Text>
+            {event.location.get('name')}
+            <br />
+            {!!event.location.get('street')?.trim() && (<>
+              {event.location.get('street')}
+              <br />
+            </>)}
+            {[event.location.get('postalCode'), event.location.get('locality'), event.location.get('country')].filter(text => text).join(', ')}
+            {event.location.get('latitude') && (<>
+              <br />
+              <a href='#' className='text-primary-600 dark:text-accent-blue hover:underline' onClick={handleShowMap}>
+                <FormattedMessage id='event.show_on_map' defaultMessage='Show on map' />
+              </a>
+            </>)}
+          </Text>
+        </HStack>
+      </Stack>
+    );
+  }, [status]);
+
+  const renderEventDate = useCallback(() => {
+    const event = status?.event;
+
+    if (!event?.start_time) return null;
+
+    return (
+      <Stack space={1}>
+        <Text size='xl' weight='bold'>
+          <FormattedMessage id='event.date' defaultMessage='Date' />
+        </Text>
+        <HStack space={2} alignItems='center'>
+          <Icon src={require('@tabler/icons/calendar.svg')} />
+          <Text>
+            <FormattedDate value={event.start_time} year='numeric' month='long' day='2-digit' weekday='long' hour='2-digit' minute='2-digit' />
+            {event.end_time && (<>
+              {' - '}
+              <FormattedDate value={event.end_time} year='numeric' month='long' day='2-digit' weekday='long' hour='2-digit' minute='2-digit' />
+            </>)}
+          </Text>
+        </HStack>
+      </Stack>
+    );
+  }, [status]);
+
+  const renderLinks = useCallback(() => {
+    const links = status?.media_attachments.filter(({ pleroma }) => pleroma.get('mime_type') === 'text/html');
+
+    if (!links?.size) return null;
+
+
+    return (
+      <Stack space={1}>
+        <Text size='xl' weight='bold'>
+          <FormattedMessage id='event.website' defaultMessage='External links' />
+        </Text>
+
+        {links.map(link => (
+          <HStack space={2} alignItems='center'>
+            <Icon src={require('@tabler/icons/link.svg')} />
+            <a href={link.remote_url || link.url} className='text-primary-600 dark:text-accent-blue hover:underline' target='_blank'>
+              {(link.remote_url || link.url).replace(/^https?:\/\//, '')}
+            </a>
+          </HStack>
+        ))}
+      </Stack>
+    );
+  }, [status]);
+
   if (!status && isLoaded) {
     return (
       <MissingIndicator />
@@ -50,11 +138,16 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
 
   return (
     <Stack className='mt-4 sm:p-2' space={2}>
-      <Text
-        className='break-words status__content'
-        size='sm'
-        dangerouslySetInnerHTML={{ __html: status.contentHtml }}
-      />
+      <Stack space={1}>
+        <Text size='xl' weight='bold'>
+          <FormattedMessage id='event.description' defaultMessage='Description' />
+        </Text>
+        <Text
+          className='break-words status__content'
+          size='sm'
+          dangerouslySetInnerHTML={{ __html: status.contentHtml }}
+        />
+      </Stack>
 
       <StatusMedia
         status={status}
@@ -62,6 +155,12 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
         showMedia={showMedia}
         onToggleVisibility={handleToggleMediaVisibility}
       />
+
+      {renderEventLocation()}
+
+      {renderEventDate()}
+
+      {renderLinks()}
     </Stack>
   );
 };
diff --git a/app/soapbox/features/ui/components/bundle_modal_error.tsx b/app/soapbox/features/ui/components/bundle_modal_error.tsx
index 2945c442b..1a8ab1d5b 100644
--- a/app/soapbox/features/ui/components/bundle_modal_error.tsx
+++ b/app/soapbox/features/ui/components/bundle_modal_error.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import IconButton from 'soapbox/components/icon_button';
+import { Modal } from 'soapbox/components/ui';
 
 const messages = defineMessages({
-  error: { id: 'bundle_modal_error.message', defaultMessage: 'Something went wrong while loading this page.' },
+  error: { id: 'bundle_modal_error.message', defaultMessage: 'Something went wrong while loading this modal.' },
   retry: { id: 'bundle_modal_error.retry', defaultMessage: 'Try again' },
   close: { id: 'bundle_modal_error.close', defaultMessage: 'Close' },
 });
@@ -22,23 +22,13 @@ const BundleModalError: React.FC<IBundleModalError> = ({ onRetry, onClose }) =>
   };
 
   return (
-    <div className='modal-root__modal error-modal'>
-      <div className='error-modal__body'>
-        <IconButton title={intl.formatMessage(messages.retry)} icon='refresh' onClick={handleRetry} size={64} />
-        {intl.formatMessage(messages.error)}
-      </div>
-
-      <div className='error-modal__footer'>
-        <div>
-          <button
-            onClick={onClose}
-            className='error-modal__nav onboarding-modal__skip'
-          >
-            {intl.formatMessage(messages.close)}
-          </button>
-        </div>
-      </div>
-    </div>
+    <Modal
+      title={intl.formatMessage(messages.error)}
+      confirmationAction={onClose}
+      confirmationText={intl.formatMessage(messages.close)}
+      secondaryAction={handleRetry}
+      secondaryText={intl.formatMessage(messages.retry)}
+    />
   );
 };
 
diff --git a/app/soapbox/features/ui/components/compose-button.tsx b/app/soapbox/features/ui/components/compose-button.tsx
index bbe6467a3..2eff172a4 100644
--- a/app/soapbox/features/ui/components/compose-button.tsx
+++ b/app/soapbox/features/ui/components/compose-button.tsx
@@ -7,7 +7,7 @@ import { Button } from 'soapbox/components/ui';
 
 const ComposeButton = () => {
   const dispatch = useDispatch();
-  const onOpenCompose = () => dispatch(openModal('COMPOSE'));
+  const onOpenCompose = () => dispatch(openModal('CREATE_EVENT'));
 
   return (
     <div className='mt-4'>
diff --git a/app/soapbox/features/ui/components/modal_root.js b/app/soapbox/features/ui/components/modal_root.js
index ab29e93ec..86cd868ac 100644
--- a/app/soapbox/features/ui/components/modal_root.js
+++ b/app/soapbox/features/ui/components/modal_root.js
@@ -35,6 +35,8 @@ import {
   CreateEventModal,
   JoinEventModal,
   AccountModerationModal,
+  EventMapModal,
+  EventParticipantsModal,
 } from 'soapbox/features/ui/util/async-components';
 
 import BundleContainer from '../containers/bundle_container';
@@ -75,6 +77,8 @@ const MODAL_COMPONENTS = {
   'CREATE_EVENT': CreateEventModal,
   'JOIN_EVENT': JoinEventModal,
   'ACCOUNT_MODERATION': AccountModerationModal,
+  'EVENT_MAP': EventMapModal,
+  'EVENT_PARTICIPANTS': EventParticipantsModal,
 };
 
 export default class ModalRoot extends React.PureComponent {
diff --git a/app/soapbox/features/ui/components/modals/event-map-modal.tsx b/app/soapbox/features/ui/components/modals/event-map-modal.tsx
new file mode 100644
index 000000000..b9d3ca968
--- /dev/null
+++ b/app/soapbox/features/ui/components/modals/event-map-modal.tsx
@@ -0,0 +1,79 @@
+import L from 'leaflet';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import { Button, Modal, Stack } from 'soapbox/components/ui';
+import { useAppSelector } from 'soapbox/hooks';
+import { makeGetStatus } from 'soapbox/selectors';
+
+import type { Status as StatusEntity } from 'soapbox/types/entities';
+
+import 'leaflet/dist/leaflet.css';
+
+L.Icon.Default.mergeOptions({
+  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+  iconUrl: require('leaflet/dist/images/marker-icon.png'),
+  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
+});
+
+interface IEventMapModal {
+  onClose: (type: string) => void,
+  statusId: string,
+}
+
+const messages = defineMessages({
+  osmAttribution: { id: 'event_map.osm_attribution', defaultMessage: '© OpenStreetMap Contributors' },
+});
+
+const EventMapModal: React.FC<IEventMapModal> = ({ onClose, statusId }) => {
+  const intl = useIntl();
+
+  const getStatus = useCallback(makeGetStatus(), []);
+  const status = useAppSelector(state => getStatus(state, { id: statusId })) as StatusEntity;
+  const location = status.event!.location!;
+
+  const map = useRef<L.Map>();
+
+  useEffect(() => {
+    const latlng: [number, number] = [+location.get('latitude'), +location.get('longitude')];
+
+    map.current = L.map('event-map').setView(latlng, 15);
+
+    L.marker(latlng, {
+      title: location.get('name'),
+    }).addTo(map.current);
+
+    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: intl.formatMessage(messages.osmAttribution),
+    }).addTo(map.current);
+
+    return () => {
+      map.current?.remove();
+    };
+  }, []);
+
+  const onClickClose = () => {
+    onClose('EVENT_MAP');
+  };
+
+  const onClickNavigate = () => {
+    window.open(`https://www.openstreetmap.org/directions?from=&to=${location.get('latitude')},${location.get('longitude')}#map=14/${location.get('latitude')}/${location.get('longitude')}`, '_blank');
+  };
+
+  return (
+    <Modal
+      title={<FormattedMessage id='column.event_map' defaultMessage='Event location' />}
+      onClose={onClickClose}
+      width='2xl'
+    >
+      <Stack alignItems='center' space={6}>
+        <div className='h-96 w-full' id='event-map' />
+        <Button onClick={onClickNavigate} icon={require('@tabler/icons/gps.svg')}>
+          <FormattedMessage id='event_map.navigate' defaultMessage='Navigate' />
+        </Button>
+      </Stack>
+    </Modal>
+  );
+};
+
+export default EventMapModal;
diff --git a/app/soapbox/features/ui/components/modals/event-participants-modal.tsx b/app/soapbox/features/ui/components/modals/event-participants-modal.tsx
new file mode 100644
index 000000000..bace52774
--- /dev/null
+++ b/app/soapbox/features/ui/components/modals/event-participants-modal.tsx
@@ -0,0 +1,59 @@
+import React, { useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { fetchEventParticipations } from 'soapbox/actions/events';
+import { Modal, Spinner, Stack } from 'soapbox/components/ui';
+import AccountContainer from 'soapbox/containers/account_container';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+
+interface IEventParticipantsModal {
+  onClose: (type: string) => void,
+  statusId: string,
+}
+
+const EventParticipantsModal: React.FC<IEventParticipantsModal> = ({ onClose, statusId }) => {
+  const dispatch = useAppDispatch();
+
+  const accountIds = useAppSelector((state) => state.user_lists.event_participations.get(statusId)?.items);
+
+  const fetchData = () => {
+    dispatch(fetchEventParticipations(statusId));
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const onClickClose = () => {
+    onClose('EVENT_PARTICIPANTS');
+  };
+
+  let body;
+
+  if (!accountIds) {
+    body = <Spinner />;
+  } else {
+    body = (
+      <Stack space={3}>
+        {accountIds.size > 0 ? (
+          accountIds.map((id) =>
+            <AccountContainer key={id} id={id} />,
+          )
+        ) : (
+          <FormattedMessage id='empty_column.event_participants' defaultMessage='No one joined this event yet. When someone does, they will show up here.' />
+        )}
+      </Stack>
+    );
+  }
+
+  return (
+    <Modal
+      title={<FormattedMessage id='column.event_participants' defaultMessage='Event participants' />}
+      onClose={onClickClose}
+    >
+      {body}
+    </Modal>
+  );
+};
+
+export default EventParticipantsModal;
diff --git a/app/soapbox/features/ui/components/unauthorized_modal.tsx b/app/soapbox/features/ui/components/unauthorized_modal.tsx
index ec6865b23..19c8408c6 100644
--- a/app/soapbox/features/ui/components/unauthorized_modal.tsx
+++ b/app/soapbox/features/ui/components/unauthorized_modal.tsx
@@ -15,7 +15,7 @@ const messages = defineMessages({
 
 interface IUnauthorizedModal {
   /** Unauthorized action type. */
-  action: 'FOLLOW' | 'REPLY' | 'REBLOG' | 'FAVOURITE' | 'POLL_VOTE',
+  action: 'FOLLOW' | 'REPLY' | 'REBLOG' | 'FAVOURITE' | 'POLL_VOTE' | 'JOIN',
   /** Close event handler. */
   onClose: (modalType: string) => void,
   /** ActivityPub ID of the account OR status being acted upon. */
@@ -89,6 +89,9 @@ const UnauthorizedModal: React.FC<IUnauthorizedModal> = ({ action, onClose, acco
     } else if (action === 'POLL_VOTE') {
       header = <FormattedMessage id='remote_interaction.poll_vote_title' defaultMessage='Vote in a poll remotely' />;
       button = <FormattedMessage id='remote_interaction.poll_vote' defaultMessage='Proceed to vote' />;
+    } else if (action === 'JOIN') {
+      header = <FormattedMessage id='remote_interaction.event_join_title' defaultMessage='Join an event remotely' />;
+      button = <FormattedMessage id='remote_interaction.event_join' defaultMessage='Proceed to join' />;
     }
 
     return (
diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts
index 08668b662..4bf598fd7 100644
--- a/app/soapbox/features/ui/util/async-components.ts
+++ b/app/soapbox/features/ui/util/async-components.ts
@@ -525,3 +525,11 @@ export function EventInformation() {
 export function EventDiscussion() {
   return import(/* webpackChunkName: "features/event" */'../../event/event-discussion');
 }
+
+export function EventMapModal() {
+  return import(/* webpackChunkName: "modals/event-map-modal" */'../components/modals/event-map-modal');
+}
+
+export function EventParticipantsModal() {
+  return import(/* webpackChunkName: "modals/event-participants-modal" */'../components/modals/event-participants-modal');
+}
diff --git a/app/soapbox/locales/ast.json b/app/soapbox/locales/ast.json
index cf907e74d..e8e18264b 100644
--- a/app/soapbox/locales/ast.json
+++ b/app/soapbox/locales/ast.json
@@ -161,7 +161,7 @@
   "bundle_column_error.retry": "Try again",
   "bundle_column_error.title": "Network error",
   "bundle_modal_error.close": "Close",
-  "bundle_modal_error.message": "Something went wrong while loading this page.",
+  "bundle_modal_error.message": "Something went wrong while loading this modal.",
   "bundle_modal_error.retry": "Try again",
   "card.back.label": "Back",
   "chat_box.actions.send": "Send",
diff --git a/app/soapbox/locales/bg.json b/app/soapbox/locales/bg.json
index c470f3895..05c4b559e 100644
--- a/app/soapbox/locales/bg.json
+++ b/app/soapbox/locales/bg.json
@@ -161,7 +161,7 @@
   "bundle_column_error.retry": "Опитай отново",
   "bundle_column_error.title": "Network error",
   "bundle_modal_error.close": "Close",
-  "bundle_modal_error.message": "Something went wrong while loading this page.",
+  "bundle_modal_error.message": "Something went wrong while loading this modal.",
   "bundle_modal_error.retry": "Try again",
   "card.back.label": "Back",
   "chat_box.actions.send": "Send",
diff --git a/app/soapbox/locales/br.json b/app/soapbox/locales/br.json
index 4008d5d24..217b27678 100644
--- a/app/soapbox/locales/br.json
+++ b/app/soapbox/locales/br.json
@@ -161,7 +161,7 @@
   "bundle_column_error.retry": "Klask endro",
   "bundle_column_error.title": "Fazi rouedad",
   "bundle_modal_error.close": "Serriñ",
-  "bundle_modal_error.message": "Something went wrong while loading this page.",
+  "bundle_modal_error.message": "Something went wrong while loading this modal.",
   "bundle_modal_error.retry": "Klask endro",
   "card.back.label": "Back",
   "chat_box.actions.send": "Send",
diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index 7ce350976..f6abee9f9 100644
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@@ -161,7 +161,7 @@
   "bundle_column_error.retry": "Try again",
   "bundle_column_error.title": "Network error",
   "bundle_modal_error.close": "Close",
-  "bundle_modal_error.message": "Something went wrong while loading this page.",
+  "bundle_modal_error.message": "Something went wrong while loading this modal.",
   "bundle_modal_error.retry": "Try again",
   "card.back.label": "Back",
   "chat_box.actions.send": "Send",
diff --git a/app/soapbox/locales/ga.json b/app/soapbox/locales/ga.json
index 49a8e0491..ca4064534 100644
--- a/app/soapbox/locales/ga.json
+++ b/app/soapbox/locales/ga.json
@@ -161,7 +161,7 @@
   "bundle_column_error.retry": "Try again",
   "bundle_column_error.title": "Network error",
   "bundle_modal_error.close": "Close",
-  "bundle_modal_error.message": "Something went wrong while loading this page.",
+  "bundle_modal_error.message": "Something went wrong while loading this modal.",
   "bundle_modal_error.retry": "Try again",
   "card.back.label": "Back",
   "chat_box.actions.send": "Send",
diff --git a/app/soapbox/locales/hi.json b/app/soapbox/locales/hi.json
index 8c03d6c75..a53d1cc79 100644
--- a/app/soapbox/locales/hi.json
+++ b/app/soapbox/locales/hi.json
@@ -161,7 +161,7 @@
   "bundle_column_error.retry": "Try again",
   "bundle_column_error.title": "Network error",
   "bundle_modal_error.close": "Close",
-  "bundle_modal_error.message": "Something went wrong while loading this page.",
+  "bundle_modal_error.message": "Something went wrong while loading this modal.",
   "bundle_modal_error.retry": "Try again",
   "card.back.label": "Back",
   "chat_box.actions.send": "Send",
diff --git a/app/soapbox/locales/hr.json b/app/soapbox/locales/hr.json
index 35a0d7436..93c0c1d74 100644
--- a/app/soapbox/locales/hr.json
+++ b/app/soapbox/locales/hr.json
@@ -161,7 +161,7 @@
   "bundle_column_error.retry": "Try again",
   "bundle_column_error.title": "Network error",
   "bundle_modal_error.close": "Close",
-  "bundle_modal_error.message": "Something went wrong while loading this page.",
+  "bundle_modal_error.message": "Something went wrong while loading this modal.",
   "bundle_modal_error.retry": "Try again",
   "card.back.label": "Back",
   "chat_box.actions.send": "Send",
diff --git a/app/soapbox/locales/io.json b/app/soapbox/locales/io.json
index 36a86bc2c..e2cf0d438 100644
--- a/app/soapbox/locales/io.json
+++ b/app/soapbox/locales/io.json
@@ -161,7 +161,7 @@
   "bundle_column_error.retry": "Try again",
   "bundle_column_error.title": "Network error",
   "bundle_modal_error.close": "Close",
-  "bundle_modal_error.message": "Something went wrong while loading this page.",
+  "bundle_modal_error.message": "Something went wrong while loading this modal.",
   "bundle_modal_error.retry": "Try again",
   "card.back.label": "Back",
   "chat_box.actions.send": "Send",
diff --git a/app/soapbox/locales/lt.json b/app/soapbox/locales/lt.json
index 9fdc5d331..2794fe5f2 100644
--- a/app/soapbox/locales/lt.json
+++ b/app/soapbox/locales/lt.json
@@ -161,7 +161,7 @@
   "bundle_column_error.retry": "Try again",
   "bundle_column_error.title": "Network error",
   "bundle_modal_error.close": "Close",
-  "bundle_modal_error.message": "Something went wrong while loading this page.",
+  "bundle_modal_error.message": "Something went wrong while loading this modal.",
   "bundle_modal_error.retry": "Try again",
   "card.back.label": "Back",
   "chat_box.actions.send": "Send",
diff --git a/app/soapbox/locales/ms.json b/app/soapbox/locales/ms.json
index 790f63a45..cb944094f 100644
--- a/app/soapbox/locales/ms.json
+++ b/app/soapbox/locales/ms.json
@@ -161,7 +161,7 @@
   "bundle_column_error.retry": "Try again",
   "bundle_column_error.title": "Network error",
   "bundle_modal_error.close": "Close",
-  "bundle_modal_error.message": "Something went wrong while loading this page.",
+  "bundle_modal_error.message": "Something went wrong while loading this modal.",
   "bundle_modal_error.retry": "Try again",
   "card.back.label": "Back",
   "chat_box.actions.send": "Send",
diff --git a/app/soapbox/reducers/statuses.ts b/app/soapbox/reducers/statuses.ts
index 0d8b1c6ad..28662ee75 100644
--- a/app/soapbox/reducers/statuses.ts
+++ b/app/soapbox/reducers/statuses.ts
@@ -261,12 +261,12 @@ export default function statuses(state = initialState, action: AnyAction): State
     case TIMELINE_DELETE:
       return deleteStatus(state, action.id, action.references);
     case EVENT_JOIN_REQUEST:
-      return state.setIn([action.status.get('id'), 'event', 'join_state'], 'pending');
+      return state.setIn([action.id, 'event', 'join_state'], 'pending');
     case EVENT_JOIN_FAIL:
     case EVENT_LEAVE_REQUEST:
-      return state.setIn([action.status.get('id'), 'event', 'join_state'], null);
+      return state.setIn([action.id, 'event', 'join_state'], null);
     case EVENT_LEAVE_FAIL:
-      return state.setIn([action.status.get('id'), 'event', 'join_state'], action.previousState);
+      return state.setIn([action.id, 'event', 'join_state'], action.previousState);
     default:
       return state;
   }
diff --git a/package.json b/package.json
index 389bbb379..d44e12a99 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
     "@types/escape-html": "^1.0.1",
     "@types/http-link-header": "^1.0.3",
     "@types/jest": "^28.1.4",
+    "@types/leaflet": "^1.8.0",
     "@types/lodash": "^4.14.180",
     "@types/object-assign": "^4.0.30",
     "@types/object-fit-images": "^3.2.3",
@@ -135,6 +136,7 @@
     "intl-pluralrules": "^1.3.1",
     "is-nan": "^1.2.1",
     "jsdoc": "~3.6.7",
+    "leaflet": "^1.8.0",
     "libphonenumber-js": "^1.10.8",
     "line-awesome": "^1.3.0",
     "localforage": "^1.10.0",
diff --git a/webpack/rules/assets.js b/webpack/rules/assets.js
index e0a14c250..f3ba14b23 100644
--- a/webpack/rules/assets.js
+++ b/webpack/rules/assets.js
@@ -11,6 +11,7 @@ module.exports = [{
   include: [
     resolve('app', 'images'),
     resolve('node_modules', 'emoji-datasource'),
+    resolve('node_modules', 'leaflet'),
   ],
   generator: {
     filename: 'packs/images/[name]-[contenthash:8][ext]',
diff --git a/yarn.lock b/yarn.lock
index 69a7f05b9..725ccb4fd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2527,6 +2527,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/geojson@*":
+  version "7946.0.10"
+  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.10.tgz#6dfbf5ea17142f7f9a043809f1cd4c448cb68249"
+  integrity sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==
+
 "@types/graceful-fs@^4.1.3":
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.5.tgz#21ffba0d98da4350db64891f92a9e5db3cdb4e15"
@@ -2635,6 +2640,13 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
+"@types/leaflet@^1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.8.0.tgz#dc92d3e868fb6d5067b4b59fa08cd4441f84fabe"
+  integrity sha512-+sXFmiJTFdhaXXIGFlV5re9AdqtAODoXbGAvxx02e5SHXL3ir7ClP5J7pahO8VmzKY3dth4RUS1nf2BTT+DW1A==
+  dependencies:
+    "@types/geojson" "*"
+
 "@types/lodash@^4.14.180":
   version "4.14.180"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.180.tgz#4ab7c9ddfc92ec4a887886483bc14c79fb380670"
@@ -7823,6 +7835,11 @@ language-tags@^1.0.5:
   dependencies:
     language-subtag-registry "~0.3.2"
 
+leaflet@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.8.0.tgz#4615db4a22a304e8e692cae9270b983b38a2055e"
+  integrity sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA==
+
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"

From 04b4a57e069387753f62bc2eb2333c896a5e58bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 25 Sep 2022 23:18:11 +0200
Subject: [PATCH 10/32] Manage event
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/actions/events.ts                 | 220 +++++++++---
 app/soapbox/components/account.tsx            |  15 +-
 .../event/components/event-header.tsx         |   7 +-
 .../notifications/components/notification.tsx |  18 +
 .../features/ui/components/compose-button.tsx |   2 +-
 .../features/ui/components/modal_root.js      |   4 +-
 .../compose-event-modal.tsx                   | 320 ++++++++++++++++++
 .../upload-button.tsx                         |   2 +-
 .../create-event-modal/create-event-modal.tsx | 223 ------------
 .../features/ui/containers/modal_container.js |   4 +
 .../features/ui/util/async-components.ts      |   4 +-
 .../{create_event.ts => compose_event.ts}     |  53 ++-
 app/soapbox/reducers/index.ts                 |   4 +-
 app/soapbox/reducers/user_lists.ts            |  12 +-
 app/soapbox/utils/notification.ts             |   3 +
 15 files changed, 587 insertions(+), 304 deletions(-)
 create mode 100644 app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
 rename app/soapbox/features/ui/components/modals/{create-event-modal => compose-event-modal}/upload-button.tsx (95%)
 delete mode 100644 app/soapbox/features/ui/components/modals/create-event-modal/create-event-modal.tsx
 rename app/soapbox/reducers/{create_event.ts => compose_event.ts} (57%)

diff --git a/app/soapbox/actions/events.ts b/app/soapbox/actions/events.ts
index ac2cbdf74..05e3feef8 100644
--- a/app/soapbox/actions/events.ts
+++ b/app/soapbox/actions/events.ts
@@ -6,8 +6,13 @@ import resizeImage from 'soapbox/utils/resize_image';
 
 import { importFetchedAccounts, importFetchedStatus } from './importer';
 import { fetchMedia, uploadMedia } from './media';
-import { closeModal } from './modals';
+import { closeModal, openModal } from './modals';
 import snackbar from './snackbar';
+import {
+  STATUS_FETCH_SOURCE_FAIL,
+  STATUS_FETCH_SOURCE_REQUEST,
+  STATUS_FETCH_SOURCE_SUCCESS,
+} from './statuses';
 
 import type { AxiosError } from 'axios';
 import type { AppDispatch, RootState } from 'soapbox/store';
@@ -17,13 +22,13 @@ const LOCATION_SEARCH_REQUEST = 'LOCATION_SEARCH_REQUEST';
 const LOCATION_SEARCH_SUCCESS = 'LOCATION_SEARCH_SUCCESS';
 const LOCATION_SEARCH_FAIL    = 'LOCATION_SEARCH_FAIL';
 
-const CREATE_EVENT_NAME_CHANGE              = 'CREATE_EVENT_NAME_CHANGE';
-const CREATE_EVENT_DESCRIPTION_CHANGE       = 'CREATE_EVENT_DESCRIPTION_CHANGE';
-const CREATE_EVENT_START_TIME_CHANGE        = 'CREATE_EVENT_START_TIME_CHANGE';
-const CREATE_EVENT_HAS_END_TIME_CHANGE      = 'CREATE_EVENT_HAS_END_TIME_CHANGE';
-const CREATE_EVENT_END_TIME_CHANGE          = 'CREATE_EVENT_END_TIME_CHANGE';
-const CREATE_EVENT_APPROVAL_REQUIRED_CHANGE = 'CREATE_EVENT_APPROVAL_REQUIRED_CHANGE';
-const CREATE_EVENT_LOCATION_CHANGE          = 'CREATE_EVENT_LOCATION_CHANGE';
+const EDIT_EVENT_NAME_CHANGE              = 'EDIT_EVENT_NAME_CHANGE';
+const EDIT_EVENT_DESCRIPTION_CHANGE       = 'EDIT_EVENT_DESCRIPTION_CHANGE';
+const EDIT_EVENT_START_TIME_CHANGE        = 'EDIT_EVENT_START_TIME_CHANGE';
+const EDIT_EVENT_HAS_END_TIME_CHANGE      = 'EDIT_EVENT_HAS_END_TIME_CHANGE';
+const EDIT_EVENT_END_TIME_CHANGE          = 'EDIT_EVENT_END_TIME_CHANGE';
+const EDIT_EVENT_APPROVAL_REQUIRED_CHANGE = 'EDIT_EVENT_APPROVAL_REQUIRED_CHANGE';
+const EDIT_EVENT_LOCATION_CHANGE          = 'EDIT_EVENT_LOCATION_CHANGE';
 
 const EVENT_BANNER_UPLOAD_REQUEST  = 'EVENT_BANNER_UPLOAD_REQUEST';
 const EVENT_BANNER_UPLOAD_PROGRESS = 'EVENT_BANNER_UPLOAD_PROGRESS';
@@ -59,14 +64,28 @@ const EVENT_PARTICIPATION_REQUESTS_EXPAND_REQUEST = 'EVENT_PARTICIPATION_REQUEST
 const EVENT_PARTICIPATION_REQUESTS_EXPAND_SUCCESS = 'EVENT_PARTICIPATION_REQUESTS_EXPAND_SUCCESS';
 const EVENT_PARTICIPATION_REQUESTS_EXPAND_FAIL    = 'EVENT_PARTICIPATION_REQUESTS_EXPAND_FAIL';
 
+const EVENT_PARTICIPATION_REQUEST_AUTHORIZE_REQUEST = 'EVENT_PARTICIPATION_REQUEST_AUTHORIZE_REQUEST';
+const EVENT_PARTICIPATION_REQUEST_AUTHORIZE_SUCCESS = 'EVENT_PARTICIPATION_REQUEST_AUTHORIZE_SUCCESS';
+const EVENT_PARTICIPATION_REQUEST_AUTHORIZE_FAIL    = 'EVENT_PARTICIPATION_REQUEST_AUTHORIZE_FAIL';
+
+const EVENT_PARTICIPATION_REQUEST_REJECT_REQUEST = 'EVENT_PARTICIPATION_REQUEST_REJECT_REQUEST';
+const EVENT_PARTICIPATION_REQUEST_REJECT_SUCCESS = 'EVENT_PARTICIPATION_REQUEST_REJECT_SUCCESS';
+const EVENT_PARTICIPATION_REQUEST_REJECT_FAIL    = 'EVENT_PARTICIPATION_REQUEST_REJECT_FAIL';
+
+const EVENT_COMPOSE_CANCEL = 'EVENT_COMPOSE_CANCEL';
+
+const EVENT_FORM_SET = 'EVENT_FORM_SET';
+
 const noOp = () => new Promise(f => f(undefined));
 
 const messages = defineMessages({
   exceededImageSizeLimit: { id: 'upload_error.image_size_limit', defaultMessage: 'Image exceeds the current file size limit ({limit})' },
-  success: { id: 'create_event.submit_success', defaultMessage: 'Your event was created' },
+  success: { id: 'compose_event.submit_success', defaultMessage: 'Your event was created' },
   joinSuccess: { id: 'join_event.success', defaultMessage: 'Joined the event' },
   joinRequestSuccess: { id: 'join_event.request_success', defaultMessage: 'Requested to join the event' },
   view: { id: 'snackbar.view', defaultMessage: 'View' },
+  authorized: { id: 'compose_event.participation_requests.authorize_success', defaultMessage: 'User accepted' },
+  rejected: { id: 'compose_event.participation_requests.reject_success', defaultMessage: 'User rejected' },
 });
 
 const locationSearch = (query: string, signal?: AbortSignal) =>
@@ -81,37 +100,37 @@ const locationSearch = (query: string, signal?: AbortSignal) =>
     });
   };
 
-const changeCreateEventName = (value: string) => ({
-  type: CREATE_EVENT_NAME_CHANGE,
+const changeEditEventName = (value: string) => ({
+  type: EDIT_EVENT_NAME_CHANGE,
   value,
 });
 
-const changeCreateEventDescription = (value: string) => ({
-  type: CREATE_EVENT_DESCRIPTION_CHANGE,
+const changeEditEventDescription = (value: string) => ({
+  type: EDIT_EVENT_DESCRIPTION_CHANGE,
   value,
 });
 
-const changeCreateEventStartTime = (value: Date) => ({
-  type: CREATE_EVENT_START_TIME_CHANGE,
+const changeEditEventStartTime = (value: Date) => ({
+  type: EDIT_EVENT_START_TIME_CHANGE,
   value,
 });
 
-const changeCreateEventEndTime = (value: Date) => ({
-  type: CREATE_EVENT_END_TIME_CHANGE,
+const changeEditEventEndTime = (value: Date) => ({
+  type: EDIT_EVENT_END_TIME_CHANGE,
   value,
 });
 
-const changeCreateEventHasEndTime = (value: boolean) => ({
-  type: CREATE_EVENT_HAS_END_TIME_CHANGE,
+const changeEditEventHasEndTime = (value: boolean) => ({
+  type: EDIT_EVENT_HAS_END_TIME_CHANGE,
   value,
 });
 
-const changeCreateEventApprovalRequired = (value: boolean) => ({
-  type: CREATE_EVENT_APPROVAL_REQUIRED_CHANGE,
+const changeEditEventApprovalRequired = (value: boolean) => ({
+  type: EDIT_EVENT_APPROVAL_REQUIRED_CHANGE,
   value,
 });
 
-const changeCreateEventLocation = (value: string | null) =>
+const changeEditEventLocation = (value: string | null) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     let location = null;
 
@@ -120,7 +139,7 @@ const changeCreateEventLocation = (value: string | null) =>
     }
 
     dispatch({
-      type: CREATE_EVENT_LOCATION_CHANGE,
+      type: EDIT_EVENT_LOCATION_CHANGE,
       value: location,
     });
   };
@@ -202,15 +221,15 @@ const submitEvent = () =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     const state = getState();
 
-    const name      = state.create_event.name;
-    const status    = state.create_event.status;
-    const banner    = state.create_event.banner;
-    const startTime = state.create_event.start_time;
-    const endTime   = state.create_event.end_time;
-    const joinMode  = state.create_event.approval_required ? 'restricted' : 'free';
-    const location  = state.create_event.location;
+    const name      = state.compose_event.name;
+    const status    = state.compose_event.status;
+    const banner    = state.compose_event.banner;
+    const startTime = state.compose_event.start_time;
+    const endTime   = state.compose_event.end_time;
+    const joinMode  = state.compose_event.approval_required ? 'restricted' : 'free';
+    const location  = state.compose_event.location;
 
-    if (!status || !status.length) {
+    if (!name || !name.length) {
       return;
     }
 
@@ -228,7 +247,7 @@ const submitEvent = () =>
     if (location) params.location_id = location.origin_id;
 
     return api(getState).post('/api/v1/pleroma/events', params).then(({ data }) => {
-      dispatch(closeModal('CREATE_EVENT'));
+      dispatch(closeModal('COMPOSE_EVENT'));
       dispatch(importFetchedStatus(data));
       dispatch(submitEventSuccess(data));
       dispatch(snackbar.success(messages.success, messages.view, `/@${data.account.acct}/events/${data.id}`));
@@ -261,7 +280,9 @@ const joinEvent = (id: string, participationMessage?: string) =>
 
     dispatch(joinEventRequest(status));
 
-    return api(getState).post(`/api/v1/pleroma/events/${id}/join`, { participationMessage }).then(({ data }) => {
+    return api(getState).post(`/api/v1/pleroma/events/${id}/join`, {
+      participation_message: participationMessage,
+    }).then(({ data }) => {
       dispatch(importFetchedStatus(data));
       dispatch(joinEventSuccess(data));
       dispatch(snackbar.success(
@@ -461,21 +482,108 @@ const expandEventParticipationRequestsFail = (id: string, error: AxiosError) =>
   error,
 });
 
+const authorizeEventParticipationRequest = (id: string, accountId: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch(authorizeEventParticipationRequestRequest(id, accountId));
+
+    return api(getState)
+      .post(`/api/v1/pleroma/events/${id}/participation_requests/${accountId}/authorize`)
+      .then(() => {
+        dispatch(authorizeEventParticipationRequestSuccess(id, accountId));
+        dispatch(snackbar.success(messages.authorized));
+      })
+      .catch(error => dispatch(authorizeEventParticipationRequestFail(id, accountId, error)));
+  };
+
+const authorizeEventParticipationRequestRequest = (id: string, accountId: string) => ({
+  type: EVENT_PARTICIPATION_REQUEST_AUTHORIZE_REQUEST,
+  id,
+  accountId,
+});
+
+const authorizeEventParticipationRequestSuccess = (id: string, accountId: string) => ({
+  type: EVENT_PARTICIPATION_REQUEST_AUTHORIZE_SUCCESS,
+  id,
+  accountId,
+});
+
+const authorizeEventParticipationRequestFail = (id: string, accountId: string, error: AxiosError) => ({
+  type: EVENT_PARTICIPATION_REQUEST_AUTHORIZE_FAIL,
+  id,
+  accountId,
+  error,
+});
+
+const rejectEventParticipationRequest = (id: string, accountId: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch(rejectEventParticipationRequestRequest(id, accountId));
+
+    return api(getState)
+      .post(`/api/v1/pleroma/events/${id}/participation_requests/${accountId}/reject`)
+      .then(() => {
+        dispatch(rejectEventParticipationRequestSuccess(id, accountId));
+        dispatch(snackbar.success(messages.rejected));
+      })
+      .catch(error => dispatch(rejectEventParticipationRequestFail(id, accountId, error)));
+  };
+
+const rejectEventParticipationRequestRequest = (id: string, accountId: string) => ({
+  type: EVENT_PARTICIPATION_REQUEST_REJECT_REQUEST,
+  id,
+  accountId,
+});
+
+const rejectEventParticipationRequestSuccess = (id: string, accountId: string) => ({
+  type: EVENT_PARTICIPATION_REQUEST_REJECT_SUCCESS,
+  id,
+  accountId,
+});
+
+const rejectEventParticipationRequestFail = (id: string, accountId: string, error: AxiosError) => ({
+  type: EVENT_PARTICIPATION_REQUEST_REJECT_FAIL,
+  id,
+  accountId,
+  error,
+});
+
 const fetchEventIcs = (id: string) =>
   (dispatch: any, getState: () => RootState) =>
     api(getState).get(`/api/v1/pleroma/events/${id}/ics`);
 
+const cancelEventCompose = () => ({
+  type: EVENT_COMPOSE_CANCEL,
+});
+
+const editEvent = (id: string) => (dispatch: AppDispatch, getState: () => RootState) => {
+  const status = getState().statuses.get(id)!;
+
+  dispatch({ type: STATUS_FETCH_SOURCE_REQUEST });
+
+  api(getState).get(`/api/v1/statuses/${id}/source`).then(response => {
+    dispatch({ type: STATUS_FETCH_SOURCE_SUCCESS });
+    dispatch({
+      type: EVENT_FORM_SET,
+      status,
+      text: response.data.text,
+      location: response.data.location,
+    });
+    dispatch(openModal('COMPOSE_EVENT'));
+  }).catch(error => {
+    dispatch({ type: STATUS_FETCH_SOURCE_FAIL, error });
+  });
+};
+
 export {
   LOCATION_SEARCH_REQUEST,
   LOCATION_SEARCH_SUCCESS,
   LOCATION_SEARCH_FAIL,
-  CREATE_EVENT_NAME_CHANGE,
-  CREATE_EVENT_DESCRIPTION_CHANGE,
-  CREATE_EVENT_START_TIME_CHANGE,
-  CREATE_EVENT_END_TIME_CHANGE,
-  CREATE_EVENT_HAS_END_TIME_CHANGE,
-  CREATE_EVENT_APPROVAL_REQUIRED_CHANGE,
-  CREATE_EVENT_LOCATION_CHANGE,
+  EDIT_EVENT_NAME_CHANGE,
+  EDIT_EVENT_DESCRIPTION_CHANGE,
+  EDIT_EVENT_START_TIME_CHANGE,
+  EDIT_EVENT_END_TIME_CHANGE,
+  EDIT_EVENT_HAS_END_TIME_CHANGE,
+  EDIT_EVENT_APPROVAL_REQUIRED_CHANGE,
+  EDIT_EVENT_LOCATION_CHANGE,
   EVENT_BANNER_UPLOAD_REQUEST,
   EVENT_BANNER_UPLOAD_PROGRESS,
   EVENT_BANNER_UPLOAD_SUCCESS,
@@ -502,14 +610,22 @@ export {
   EVENT_PARTICIPATION_REQUESTS_EXPAND_REQUEST,
   EVENT_PARTICIPATION_REQUESTS_EXPAND_SUCCESS,
   EVENT_PARTICIPATION_REQUESTS_EXPAND_FAIL,
+  EVENT_PARTICIPATION_REQUEST_AUTHORIZE_REQUEST,
+  EVENT_PARTICIPATION_REQUEST_AUTHORIZE_SUCCESS,
+  EVENT_PARTICIPATION_REQUEST_AUTHORIZE_FAIL,
+  EVENT_PARTICIPATION_REQUEST_REJECT_REQUEST,
+  EVENT_PARTICIPATION_REQUEST_REJECT_SUCCESS,
+  EVENT_PARTICIPATION_REQUEST_REJECT_FAIL,
+  EVENT_COMPOSE_CANCEL,
+  EVENT_FORM_SET,
   locationSearch,
-  changeCreateEventName,
-  changeCreateEventDescription,
-  changeCreateEventStartTime,
-  changeCreateEventEndTime,
-  changeCreateEventHasEndTime,
-  changeCreateEventApprovalRequired,
-  changeCreateEventLocation,
+  changeEditEventName,
+  changeEditEventDescription,
+  changeEditEventStartTime,
+  changeEditEventEndTime,
+  changeEditEventHasEndTime,
+  changeEditEventApprovalRequired,
+  changeEditEventLocation,
   uploadEventBanner,
   uploadEventBannerRequest,
   uploadEventBannerProgress,
@@ -544,5 +660,15 @@ export {
   expandEventParticipationRequestsRequest,
   expandEventParticipationRequestsSuccess,
   expandEventParticipationRequestsFail,
+  authorizeEventParticipationRequest,
+  authorizeEventParticipationRequestRequest,
+  authorizeEventParticipationRequestSuccess,
+  authorizeEventParticipationRequestFail,
+  rejectEventParticipationRequest,
+  rejectEventParticipationRequestRequest,
+  rejectEventParticipationRequestSuccess,
+  rejectEventParticipationRequestFail,
   fetchEventIcs,
+  cancelEventCompose,
+  editEvent,
 };
diff --git a/app/soapbox/components/account.tsx b/app/soapbox/components/account.tsx
index 438d2f0f4..a662460ca 100644
--- a/app/soapbox/components/account.tsx
+++ b/app/soapbox/components/account.tsx
@@ -63,6 +63,7 @@ interface IAccount {
   withRelationship?: boolean,
   showEdit?: boolean,
   emoji?: string,
+  note?: string,
 }
 
 const Account = ({
@@ -86,6 +87,7 @@ const Account = ({
   withRelationship = true,
   showEdit = false,
   emoji,
+  note,
 }: IAccount) => {
   const overflowRef = React.useRef<HTMLDivElement>(null);
   const actionRef = React.useRef<HTMLDivElement>(null);
@@ -163,7 +165,7 @@ const Account = ({
   return (
     <div data-testid='account' className='flex-shrink-0 group block w-full' ref={overflowRef}>
       <HStack alignItems={actionAlignment} justifyContent='between'>
-        <HStack alignItems={withAccountNote ? 'top' : 'center'} space={3}>
+        <HStack alignItems={withAccountNote || note ? 'top' : 'center'} space={3}>
           <ProfilePopper
             condition={showProfileHoverCard}
             wrapper={(children) => <HoverRefWrapper className='relative' accountId={account.id} inline>{children}</HoverRefWrapper>}
@@ -206,7 +208,7 @@ const Account = ({
               </LinkEl>
             </ProfilePopper>
 
-            <Stack space={withAccountNote ? 1 : 0}>
+            <Stack space={withAccountNote || note ? 1 : 0}>
               <HStack alignItems='center' space={1} style={style}>
                 <Text theme='muted' size='sm' truncate>@{username}</Text>
 
@@ -237,7 +239,14 @@ const Account = ({
                 ) : null}
               </HStack>
 
-              {withAccountNote && (
+              {note ? (
+                <Text
+                  size='sm'
+                  className='mr-2'
+                >
+                  {note}
+                </Text>
+              ) : withAccountNote && (
                 <Text
                   size='sm'
                   dangerouslySetInnerHTML={{ __html: account.note_emojified }}
diff --git a/app/soapbox/features/event/components/event-header.tsx b/app/soapbox/features/event/components/event-header.tsx
index 8f2cf7ddf..64794fa1d 100644
--- a/app/soapbox/features/event/components/event-header.tsx
+++ b/app/soapbox/features/event/components/event-header.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { fetchEventIcs } from 'soapbox/actions/events';
+import { editEvent, fetchEventIcs } from 'soapbox/actions/events';
 import { openModal } from 'soapbox/actions/modals';
 import { deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation';
 import Icon from 'soapbox/components/icon';
@@ -159,9 +159,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
   const handleManageClick: React.MouseEventHandler = e => {
     e.stopPropagation();
 
-    dispatch(openModal('MANAGE_EVENT', {
-      statusId: status.id,
-    }));
+    dispatch(editEvent(status.id));
   };
 
   const handleParticipantsClick: React.MouseEventHandler = e => {
@@ -228,7 +226,6 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
               size='sm'
               theme='secondary'
               onClick={handleManageClick}
-              to={`/@${account.acct}/events/${status.id}`}
             >
               <FormattedMessage id='event.manage' defaultMessage='Manage' />
             </Button>
diff --git a/app/soapbox/features/notifications/components/notification.tsx b/app/soapbox/features/notifications/components/notification.tsx
index e1fa87c5a..06d329bb9 100644
--- a/app/soapbox/features/notifications/components/notification.tsx
+++ b/app/soapbox/features/notifications/components/notification.tsx
@@ -53,6 +53,9 @@ const icons: Record<NotificationType, string> = {
   'pleroma:emoji_reaction': require('@tabler/icons/mood-happy.svg'),
   user_approved: require('@tabler/icons/user-plus.svg'),
   update: require('@tabler/icons/pencil.svg'),
+  'pleroma:event_reminder': require('@tabler/icons/calendar-time.svg'),
+  'pleroma:participation_request': require('@tabler/icons/calendar-event.svg'),
+  'pleroma:participation_accepted': require('@tabler/icons/calendar-event.svg'),
 };
 
 const messages: Record<NotificationType, MessageDescriptor> = defineMessages({
@@ -104,6 +107,18 @@ const messages: Record<NotificationType, MessageDescriptor> = defineMessages({
     id: 'notification.update',
     defaultMessage: '{name} edited a post you interacted with',
   },
+  'pleroma:event_reminder': {
+    id: 'notification.pleroma:event_reminder',
+    defaultMessage: 'An event you are participating in starts soon',
+  },
+  'pleroma:participation_request': {
+    id: 'notification.pleroma:participation_request',
+    defaultMessage: '{name} wants to join your event',
+  },
+  'pleroma:participation_accepted': {
+    id: 'notification.pleroma:participation_accepted',
+    defaultMessage: 'You were accepted to join the event',
+  },
 });
 
 const buildMessage = (
@@ -302,6 +317,9 @@ const Notification: React.FC<INotificaton> = (props) => {
       case 'poll':
       case 'update':
       case 'pleroma:emoji_reaction':
+      case 'pleroma:event_reminder':
+      case 'pleroma:participation_accepted':
+      case 'pleroma:participation_request':
         return status && typeof status === 'object' ? (
           <StatusContainer
             id={status.id}
diff --git a/app/soapbox/features/ui/components/compose-button.tsx b/app/soapbox/features/ui/components/compose-button.tsx
index 2eff172a4..567959b32 100644
--- a/app/soapbox/features/ui/components/compose-button.tsx
+++ b/app/soapbox/features/ui/components/compose-button.tsx
@@ -7,7 +7,7 @@ import { Button } from 'soapbox/components/ui';
 
 const ComposeButton = () => {
   const dispatch = useDispatch();
-  const onOpenCompose = () => dispatch(openModal('CREATE_EVENT'));
+  const onOpenCompose = () => dispatch(openModal('COMPOSE_EVENT'));
 
   return (
     <div className='mt-4'>
diff --git a/app/soapbox/features/ui/components/modal_root.js b/app/soapbox/features/ui/components/modal_root.js
index 86cd868ac..8ee7b5fc5 100644
--- a/app/soapbox/features/ui/components/modal_root.js
+++ b/app/soapbox/features/ui/components/modal_root.js
@@ -32,7 +32,7 @@ import {
   CompareHistoryModal,
   VerifySmsModal,
   FamiliarFollowersModal,
-  CreateEventModal,
+  ComposeEventModal,
   JoinEventModal,
   AccountModerationModal,
   EventMapModal,
@@ -74,7 +74,7 @@ const MODAL_COMPONENTS = {
   'COMPARE_HISTORY': CompareHistoryModal,
   'VERIFY_SMS': VerifySmsModal,
   'FAMILIAR_FOLLOWERS': FamiliarFollowersModal,
-  'CREATE_EVENT': CreateEventModal,
+  'COMPOSE_EVENT': ComposeEventModal,
   'JOIN_EVENT': JoinEventModal,
   'ACCOUNT_MODERATION': AccountModerationModal,
   'EVENT_MAP': EventMapModal,
diff --git a/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx b/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
new file mode 100644
index 000000000..0c24d21f1
--- /dev/null
+++ b/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
@@ -0,0 +1,320 @@
+import React, { useEffect, useState } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import Toggle from 'react-toggle';
+
+import {
+  changeEditEventApprovalRequired,
+  changeEditEventDescription,
+  changeEditEventEndTime,
+  changeEditEventHasEndTime,
+  changeEditEventName,
+  changeEditEventStartTime,
+  changeEditEventLocation,
+  uploadEventBanner,
+  undoUploadEventBanner,
+  submitEvent,
+  fetchEventParticipationRequests,
+  rejectEventParticipationRequest,
+  authorizeEventParticipationRequest,
+} from 'soapbox/actions/events';
+import { ADDRESS_ICONS } from 'soapbox/components/autosuggest-location';
+import LocationSearch from 'soapbox/components/location-search';
+import { Button, Form, FormGroup, HStack, Icon, IconButton, Input, Modal, Spinner, Stack, Tabs, Text, Textarea } from 'soapbox/components/ui';
+import AccountContainer from 'soapbox/containers/account_container';
+import { isCurrentOrFutureDate } from 'soapbox/features/compose/components/schedule_form';
+import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
+import { DatePicker } from 'soapbox/features/ui/util/async-components';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+
+import UploadButton from './upload-button';
+
+const messages = defineMessages({
+  eventNamePlaceholder: { id: 'compose_event.fields.name_placeholder', defaultMessage: 'Name' },
+  eventDescriptionPlaceholder: { id: 'compose_event.fields.description_placeholder', defaultMessage: 'Description' },
+  eventStartTimePlaceholder: { id: 'compose_event.fields.start_time_placeholder', defaultMessage: 'Event begins on…' },
+  eventEndTimePlaceholder: { id: 'compose_event.fields.end_time_placeholder', defaultMessage: 'Event ends on…' },
+  resetLocation: { id: 'compose_event.reset_location', defaultMessage: 'Reset location' },
+  edit: { id: 'compose_event.tabs.edit', defaultMessage: 'Edit details' },
+  pending: { id: 'compose_event.tabs.pending', defaultMessage: 'Manage requests' },
+  authorize: { id: 'compose_event.participation_requests.authorize', defaultMessage: 'Authorize' },
+  reject: { id: 'compose_event.participation_requests.reject', defaultMessage: 'Reject' },
+});
+
+
+interface IAccount {
+  eventId: string,
+  id: string,
+  participationMessage: string | null,
+}
+
+const Account: React.FC<IAccount> = ({ eventId, id, participationMessage }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const handleAuthorize = () => {
+    dispatch(authorizeEventParticipationRequest(eventId, id));
+  };
+
+  const handleReject = () => {
+    dispatch(rejectEventParticipationRequest(eventId, id));
+  };
+
+  return (
+    <AccountContainer
+      id={id}
+      note={participationMessage || undefined}
+      action={
+        <HStack space={2}>
+          <Button
+            theme='secondary'
+            size='sm'
+            text={intl.formatMessage(messages.authorize)}
+            onClick={handleAuthorize}
+          />
+          <Button
+            theme='danger'
+            size='sm'
+            text={intl.formatMessage(messages.reject)}
+            onClick={handleReject}
+          />
+        </HStack>
+      }
+    />
+  );
+};
+
+interface IComposeEventModal {
+  onClose: (type?: string) => void,
+}
+
+const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const [tab, setTab] = useState<'edit' | 'pending'>('edit');
+
+  const banner = useAppSelector((state) => state.compose_event.banner);
+  const isUploading = useAppSelector((state) => state.compose_event.is_uploading);
+
+  const name = useAppSelector((state) => state.compose_event.name);
+  const description = useAppSelector((state) => state.compose_event.status);
+  const startTime = useAppSelector((state) => state.compose_event.start_time);
+  const endTime = useAppSelector((state) => state.compose_event.end_time);
+  const approvalRequired = useAppSelector((state) => state.compose_event.approval_required);
+  const location = useAppSelector((state) => state.compose_event.location);
+
+  const id = useAppSelector((state) => state.compose_event.id);
+
+  const isSubmitting = useAppSelector((state) => state.compose_event.is_submitting);
+
+  const onChangeName: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
+    dispatch(changeEditEventName(target.value));
+  };
+
+  const onChangeDescription: React.ChangeEventHandler<HTMLTextAreaElement> = ({ target }) => {
+    dispatch(changeEditEventDescription(target.value));
+  };
+
+  const onChangeStartTime = (date: Date) => {
+    dispatch(changeEditEventStartTime(date));
+  };
+
+  const onChangeEndTime = (date: Date) => {
+    dispatch(changeEditEventEndTime(date));
+  };
+
+  const onChangeHasEndTime: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
+    dispatch(changeEditEventHasEndTime(target.checked));
+  };
+
+  const onChangeApprovalRequired: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
+    dispatch(changeEditEventApprovalRequired(target.checked));
+  };
+
+  const onChangeLocation = (value: string | null) => {
+    dispatch(changeEditEventLocation(value));
+  };
+
+  const onClickClose = () => {
+    onClose('COMPOSE_EVENT');
+  };
+
+  const handleFiles = (files: FileList) => {
+    dispatch(uploadEventBanner(files[0], intl));
+  };
+
+  const handleClearBanner = () => {
+    dispatch(undoUploadEventBanner());
+  };
+
+  const handleSubmit = () => {
+    dispatch(submitEvent());
+  };
+
+  const accounts = useAppSelector((state) => state.user_lists.event_participation_requests.get(id!)?.items);
+
+  useEffect(() => {
+    if (id) dispatch(fetchEventParticipationRequests(id));
+  }, []);
+
+  const renderLocation = () => location && (
+    <HStack className='h-[38px] text-gray-700 dark:text-gray-500' alignItems='center' space={2}>
+      <Icon src={ADDRESS_ICONS[location.type] || require('@tabler/icons/map-pin.svg')} />
+      <Stack className='flex-grow'>
+        <Text>{location.description}</Text>
+        <Text theme='muted' size='xs'>{[location.street, location.locality, location.country].filter(val => val.trim()).join(' · ')}</Text>
+      </Stack>
+      <IconButton title={intl.formatMessage(messages.resetLocation)} src={require('@tabler/icons/x.svg')} onClick={() => onChangeLocation(null)} />
+    </HStack>
+  );
+
+  const renderTabs = () => {
+    const items = [
+      {
+        text: intl.formatMessage(messages.edit),
+        action: () => setTab('edit'),
+        name: 'edit',
+      },
+      {
+        text: intl.formatMessage(messages.pending),
+        action: () => setTab('pending'),
+        name: 'pending',
+      },
+    ];
+
+    return <Tabs items={items} activeItem={tab} />;
+  };
+
+  return (
+    <Modal
+      title={id
+        ? <FormattedMessage id='navigation_bar.compose_event' defaultMessage='Manage event' />
+        : <FormattedMessage id='navigation_bar.create_event' defaultMessage='Create new event' />}
+      confirmationAction={tab === 'edit' ? handleSubmit : undefined}
+      confirmationText={id
+        ? <FormattedMessage id='compose_event.update' defaultMessage='Update' />
+        : <FormattedMessage id='compose_event.create' defaultMessage='Create' />}
+      confirmationDisabled={isSubmitting}
+      onClose={onClickClose}
+    >
+      <Stack space={2}>
+        {id && renderTabs()}
+        {tab === 'edit' ? (
+          <Form>
+            <FormGroup
+              labelText={<FormattedMessage id='compose_event.fields.banner_label' defaultMessage='Event banner' />}
+            >
+              <div className='flex items-center justify-center bg-gray-200 dark:bg-gray-900/50 rounded-lg text-black dark:text-white sm:shadow dark:sm:shadow-inset overflow-hidden h-24 sm:h-32 relative'>
+                {banner ? (
+                  <>
+                    <img className='h-full w-full object-cover' src={banner.url} alt='' />
+                    <IconButton className='absolute top-2 right-2' src={require('@tabler/icons/x.svg')} onClick={handleClearBanner} />
+                  </>
+                ) : (
+                  <UploadButton disabled={isUploading} onSelectFile={handleFiles} />
+                )}
+
+              </div>
+            </FormGroup>
+            <FormGroup
+              labelText={<FormattedMessage id='compose_event.fields.name_label' defaultMessage='Event name' />}
+            >
+              <Input
+                type='text'
+                placeholder={intl.formatMessage(messages.eventNamePlaceholder)}
+                value={name}
+                onChange={onChangeName}
+              />
+            </FormGroup>
+            <FormGroup
+              labelText={<FormattedMessage id='compose_event.fields.description_label' defaultMessage='Event description' />}
+              hintText={<FormattedMessage id='compose_event.fields.description_hint' defaultMessage='Markdown syntax is supported' />}
+            >
+              <Textarea
+                autoComplete='off'
+                placeholder={intl.formatMessage(messages.eventDescriptionPlaceholder)}
+                value={description}
+                onChange={onChangeDescription}
+              />
+            </FormGroup>
+            <FormGroup
+              labelText={<FormattedMessage id='compose_event.fields.location_label' defaultMessage='Event location' />}
+            >
+              {location ? renderLocation() : (
+                <LocationSearch
+                  onSelected={onChangeLocation}
+                />
+              )}
+            </FormGroup>
+            <FormGroup
+              labelText={<FormattedMessage id='compose_event.fields.start_time_label' defaultMessage='Event start date' />}
+            >
+              <BundleContainer fetchComponent={DatePicker}>
+                {Component => (<Component
+                  showTimeSelect
+                  dateFormat='MMMM d, yyyy h:mm aa'
+                  timeIntervals={15}
+                  wrapperClassName='react-datepicker-wrapper'
+                  placeholderText={intl.formatMessage(messages.eventStartTimePlaceholder)}
+                  filterDate={isCurrentOrFutureDate}
+                  selected={startTime}
+                  onChange={onChangeStartTime}
+                />)}
+              </BundleContainer>
+            </FormGroup>
+            <HStack alignItems='center' space={2}>
+              <Toggle
+                icons={false}
+                checked={!!endTime}
+                onChange={onChangeHasEndTime}
+              />
+              <Text tag='span' theme='muted'>
+                <FormattedMessage id='compose_event.fields.has_end_time' defaultMessage='The event has end date' />
+              </Text>
+            </HStack>
+            {endTime && (
+              <FormGroup
+                labelText={<FormattedMessage id='compose_event.fields.end_time_label' defaultMessage='Event end date' />}
+              >
+                <BundleContainer fetchComponent={DatePicker}>
+                  {Component => (<Component
+                    showTimeSelect
+                    dateFormat='MMMM d, yyyy h:mm aa'
+                    timeIntervals={15}
+                    wrapperClassName='react-datepicker-wrapper'
+                    placeholderText={intl.formatMessage(messages.eventEndTimePlaceholder)}
+                    filterDate={isCurrentOrFutureDate}
+                    selected={endTime}
+                    onChange={onChangeEndTime}
+                  />)}
+                </BundleContainer>
+              </FormGroup>
+            )}
+            <HStack alignItems='center' space={2}>
+              <Toggle
+                icons={false}
+                checked={approvalRequired}
+                onChange={onChangeApprovalRequired}
+              />
+              <Text tag='span' theme='muted'>
+                <FormattedMessage id='compose_event.fields.approval_required' defaultMessage='I want to approve participation requests manually' />
+              </Text>
+            </HStack>
+          </Form>
+        ) : accounts ? (
+          <Stack space={3}>
+            {accounts.size > 0 ? (
+              accounts.map(({ account, participation_message }) =>
+                <Account key={account} eventId={id!} id={account} participationMessage={participation_message} />,
+              )
+            ) : (
+              <FormattedMessage id='empty_column.event_participant_requests' defaultMessage='There are no pending event participation requests.' />
+            )}
+          </Stack>
+        ) : <Spinner />}
+      </Stack>
+    </Modal>
+  );
+};
+
+export default ComposeEventModal;
diff --git a/app/soapbox/features/ui/components/modals/create-event-modal/upload-button.tsx b/app/soapbox/features/ui/components/modals/compose-event-modal/upload-button.tsx
similarity index 95%
rename from app/soapbox/features/ui/components/modals/create-event-modal/upload-button.tsx
rename to app/soapbox/features/ui/components/modals/compose-event-modal/upload-button.tsx
index fc75a6b77..72d4dc95c 100644
--- a/app/soapbox/features/ui/components/modals/create-event-modal/upload-button.tsx
+++ b/app/soapbox/features/ui/components/modals/compose-event-modal/upload-button.tsx
@@ -7,7 +7,7 @@ import { useAppSelector } from 'soapbox/hooks';
 import type { List as ImmutableList } from 'immutable';
 
 const messages = defineMessages({
-  upload: { id: 'create_event.upload_banner', defaultMessage: 'Upload event banner' },
+  upload: { id: 'compose_event.upload_banner', defaultMessage: 'Upload event banner' },
 });
 
 interface IUploadButton {
diff --git a/app/soapbox/features/ui/components/modals/create-event-modal/create-event-modal.tsx b/app/soapbox/features/ui/components/modals/create-event-modal/create-event-modal.tsx
deleted file mode 100644
index 3e4f0f86e..000000000
--- a/app/soapbox/features/ui/components/modals/create-event-modal/create-event-modal.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-import React from 'react';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import Toggle from 'react-toggle';
-
-import {
-  changeCreateEventApprovalRequired,
-  changeCreateEventDescription,
-  changeCreateEventEndTime,
-  changeCreateEventHasEndTime,
-  changeCreateEventName,
-  changeCreateEventStartTime,
-  changeCreateEventLocation,
-  uploadEventBanner,
-  undoUploadEventBanner,
-  submitEvent,
-} from 'soapbox/actions/events';
-import { ADDRESS_ICONS } from 'soapbox/components/autosuggest-location';
-import LocationSearch from 'soapbox/components/location-search';
-import { Form, FormGroup, HStack, Icon, IconButton, Input, Modal, Stack, Text, Textarea } from 'soapbox/components/ui';
-import { isCurrentOrFutureDate } from 'soapbox/features/compose/components/schedule_form';
-import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
-import { DatePicker } from 'soapbox/features/ui/util/async-components';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-
-import UploadButton from './upload-button';
-
-const messages = defineMessages({
-  eventNamePlaceholder: { id: 'create_event.fields.name_placeholder', defaultMessage: 'Name' },
-  eventDescriptionPlaceholder: { id: 'create_event.fields.description_placeholder', defaultMessage: 'Description' },
-  eventStartTimePlaceholder: { id: 'create_event.fields.start_time_placeholder', defaultMessage: 'Event begins on…' },
-  eventEndTimePlaceholder: { id: 'create_event.fields.end_time_placeholder', defaultMessage: 'Event ends on…' },
-  resetLocation: { id: 'create_event.reset_location', defaultMessage: 'Reset location' },
-});
-
-interface ICreateEventModal {
-  onClose: (type?: string) => void,
-}
-
-const CreateEventModal: React.FC<ICreateEventModal> = ({ onClose }) => {
-  const intl = useIntl();
-  const dispatch = useAppDispatch();
-
-  const banner = useAppSelector((state) => state.create_event.banner);
-  const isUploading = useAppSelector((state) => state.create_event.is_uploading);
-
-  const name = useAppSelector((state) => state.create_event.name);
-  const description = useAppSelector((state) => state.create_event.status);
-  const startTime = useAppSelector((state) => state.create_event.start_time);
-  const endTime = useAppSelector((state) => state.create_event.end_time);
-  const approvalRequired = useAppSelector((state) => state.create_event.approval_required);
-  const location = useAppSelector((state) => state.create_event.location);
-
-  const isSubmitting = useAppSelector((state) => state.create_event.is_submitting);
-
-  const onChangeName: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
-    dispatch(changeCreateEventName(target.value));
-  };
-
-  const onChangeDescription: React.ChangeEventHandler<HTMLTextAreaElement> = ({ target }) => {
-    dispatch(changeCreateEventDescription(target.value));
-  };
-
-  const onChangeStartTime = (date: Date) => {
-    dispatch(changeCreateEventStartTime(date));
-  };
-
-  const onChangeEndTime = (date: Date) => {
-    dispatch(changeCreateEventEndTime(date));
-  };
-
-  const onChangeHasEndTime: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
-    dispatch(changeCreateEventHasEndTime(target.checked));
-  };
-
-  const onChangeApprovalRequired: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
-    dispatch(changeCreateEventApprovalRequired(target.checked));
-  };
-
-  const onChangeLocation = (value: string | null) => {
-    dispatch(changeCreateEventLocation(value));
-  };
-
-  const onClickClose = () => {
-    onClose('CREATE_EVENT');
-  };
-
-  const handleFiles = (files: FileList) => {
-    dispatch(uploadEventBanner(files[0], intl));
-  };
-
-  const handleClearBanner = () => {
-    dispatch(undoUploadEventBanner());
-  };
-
-  const handleSubmit = () => {
-    dispatch(submitEvent());
-  };
-
-  const renderLocation = () => location && (
-    <HStack className='h-[38px] text-gray-700 dark:text-gray-500' alignItems='center' space={2}>
-      <Icon src={ADDRESS_ICONS[location.type] || require('@tabler/icons/map-pin.svg')} />
-      <Stack className='flex-grow'>
-        <Text>{location.description}</Text>
-        <Text theme='muted' size='xs'>{[location.street, location.locality, location.country].filter(val => val.trim()).join(' · ')}</Text>
-      </Stack>
-      <IconButton title={intl.formatMessage(messages.resetLocation)} src={require('@tabler/icons/x.svg')} onClick={() => onChangeLocation(null)} />
-    </HStack>
-  );
-
-  return (
-    <Modal
-      title={<FormattedMessage id='navigation_bar.create_event' defaultMessage='Create new event' />}
-      confirmationAction={handleSubmit}
-      confirmationText={<FormattedMessage id='create_event.create' defaultMessage='Create' />}
-      confirmationDisabled={isSubmitting}
-      onClose={onClickClose}
-    >
-      <Form>
-        <FormGroup
-          labelText={<FormattedMessage id='create_event.fields.banner_label' defaultMessage='Event banner' />}
-        >
-          <div className='flex items-center justify-center bg-gray-200 dark:bg-gray-900/50 rounded-lg text-black dark:text-white sm:shadow dark:sm:shadow-inset overflow-hidden h-24 sm:h-32 relative'>
-            {banner ? (
-              <>
-                <img className='h-full w-full object-cover' src={banner.url} alt='' />
-                <IconButton className='absolute top-2 right-2' src={require('@tabler/icons/x.svg')} onClick={handleClearBanner} />
-              </>
-            ) : (
-              <UploadButton disabled={isUploading} onSelectFile={handleFiles} />
-            )}
-
-          </div>
-        </FormGroup>
-        <FormGroup
-          labelText={<FormattedMessage id='create_event.fields.name_label' defaultMessage='Event name' />}
-        >
-          <Input
-            type='text'
-            placeholder={intl.formatMessage(messages.eventNamePlaceholder)}
-            value={name}
-            onChange={onChangeName}
-          />
-        </FormGroup>
-        <FormGroup
-          labelText={<FormattedMessage id='create_event.fields.description_label' defaultMessage='Event description' />}
-          hintText={<FormattedMessage id='create_event.fields.description_hint' defaultMessage='Markdown syntax is supported' />}
-        >
-          <Textarea
-            autoComplete='off'
-            placeholder={intl.formatMessage(messages.eventDescriptionPlaceholder)}
-            value={description}
-            onChange={onChangeDescription}
-          />
-        </FormGroup>
-        <FormGroup
-          labelText={<FormattedMessage id='create_event.fields.location_label' defaultMessage='Event location' />}
-        >
-          {location ? renderLocation() : (
-            <LocationSearch
-              onSelected={onChangeLocation}
-            />
-          )}
-        </FormGroup>
-        <FormGroup
-          labelText={<FormattedMessage id='create_event.fields.start_time_label' defaultMessage='Event start date' />}
-        >
-          <BundleContainer fetchComponent={DatePicker}>
-            {Component => (<Component
-              showTimeSelect
-              dateFormat='MMMM d, yyyy h:mm aa'
-              timeIntervals={15}
-              wrapperClassName='react-datepicker-wrapper'
-              placeholderText={intl.formatMessage(messages.eventStartTimePlaceholder)}
-              filterDate={isCurrentOrFutureDate}
-              selected={startTime}
-              onChange={onChangeStartTime}
-            />)}
-          </BundleContainer>
-        </FormGroup>
-        <HStack alignItems='center' space={2}>
-          <Toggle
-            icons={false}
-            checked={!!endTime}
-            onChange={onChangeHasEndTime}
-          />
-          <Text tag='span' theme='muted'>
-            <FormattedMessage id='create_event.fields.has_end_time' defaultMessage='The event has end date' />
-          </Text>
-        </HStack>
-        {endTime && (
-          <FormGroup
-            labelText={<FormattedMessage id='create_event.fields.end_time_label' defaultMessage='Event end date' />}
-          >
-            <BundleContainer fetchComponent={DatePicker}>
-              {Component => (<Component
-                showTimeSelect
-                dateFormat='MMMM d, yyyy h:mm aa'
-                timeIntervals={15}
-                wrapperClassName='react-datepicker-wrapper'
-                placeholderText={intl.formatMessage(messages.eventEndTimePlaceholder)}
-                filterDate={isCurrentOrFutureDate}
-                selected={endTime}
-                onChange={onChangeEndTime}
-              />)}
-            </BundleContainer>
-          </FormGroup>
-        )}
-        <HStack alignItems='center' space={2}>
-          <Toggle
-            icons={false}
-            checked={approvalRequired}
-            onChange={onChangeApprovalRequired}
-          />
-          <Text tag='span' theme='muted'>
-            <FormattedMessage id='create_event.fields.approval_required' defaultMessage='I want to approve participation requests manually' />
-          </Text>
-        </HStack>
-      </Form>
-    </Modal>
-  );
-};
-
-export default CreateEventModal;
diff --git a/app/soapbox/features/ui/containers/modal_container.js b/app/soapbox/features/ui/containers/modal_container.js
index 54f07a371..c41f56371 100644
--- a/app/soapbox/features/ui/containers/modal_container.js
+++ b/app/soapbox/features/ui/containers/modal_container.js
@@ -1,6 +1,7 @@
 import { connect } from 'react-redux';
 
 import { cancelReplyCompose } from 'soapbox/actions/compose';
+import { cancelEventCompose } from 'soapbox/actions/events';
 import { closeModal } from 'soapbox/actions/modals';
 import { cancelReport } from 'soapbox/actions/reports';
 
@@ -24,6 +25,9 @@ const mapDispatchToProps = (dispatch) => ({
       case 'COMPOSE':
         dispatch(cancelReplyCompose());
         break;
+      case 'COMPOSE_EVENT':
+        dispatch(cancelEventCompose());
+        break;
       case 'REPORT':
         dispatch(cancelReport());
         break;
diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts
index 4bf598fd7..bbdf70384 100644
--- a/app/soapbox/features/ui/util/async-components.ts
+++ b/app/soapbox/features/ui/util/async-components.ts
@@ -506,8 +506,8 @@ export function AnnouncementsPanel() {
   return import(/* webpackChunkName: "features/announcements" */'../../../components/announcements/announcements-panel');
 }
 
-export function CreateEventModal() {
-  return import(/* webpackChunkName: "features/create_event_modal" */'../components/modals/create-event-modal/create-event-modal');
+export function ComposeEventModal() {
+  return import(/* webpackChunkName: "features/compose_event_modal" */'../components/modals/compose-event-modal/compose-event-modal');
 }
 
 export function JoinEventModal() {
diff --git a/app/soapbox/reducers/create_event.ts b/app/soapbox/reducers/compose_event.ts
similarity index 57%
rename from app/soapbox/reducers/create_event.ts
rename to app/soapbox/reducers/compose_event.ts
index 7aed099bf..b25d391cc 100644
--- a/app/soapbox/reducers/create_event.ts
+++ b/app/soapbox/reducers/compose_event.ts
@@ -2,13 +2,13 @@ import { fromJS, Record as ImmutableRecord } from 'immutable';
 import { AnyAction } from 'redux';
 
 import {
-  CREATE_EVENT_APPROVAL_REQUIRED_CHANGE,
-  CREATE_EVENT_DESCRIPTION_CHANGE,
-  CREATE_EVENT_END_TIME_CHANGE,
-  CREATE_EVENT_HAS_END_TIME_CHANGE,
-  CREATE_EVENT_LOCATION_CHANGE,
-  CREATE_EVENT_NAME_CHANGE,
-  CREATE_EVENT_START_TIME_CHANGE,
+  EDIT_EVENT_APPROVAL_REQUIRED_CHANGE,
+  EDIT_EVENT_DESCRIPTION_CHANGE,
+  EDIT_EVENT_END_TIME_CHANGE,
+  EDIT_EVENT_HAS_END_TIME_CHANGE,
+  EDIT_EVENT_LOCATION_CHANGE,
+  EDIT_EVENT_NAME_CHANGE,
+  EDIT_EVENT_START_TIME_CHANGE,
   EVENT_BANNER_UPLOAD_REQUEST,
   EVENT_BANNER_UPLOAD_PROGRESS,
   EVENT_BANNER_UPLOAD_SUCCESS,
@@ -17,12 +17,15 @@ import {
   EVENT_SUBMIT_REQUEST,
   EVENT_SUBMIT_SUCCESS,
   EVENT_SUBMIT_FAIL,
+  EVENT_COMPOSE_CANCEL,
+  EVENT_FORM_SET,
 } from 'soapbox/actions/events';
-import { normalizeAttachment } from 'soapbox/normalizers';
+import { normalizeAttachment, normalizeLocation } from 'soapbox/normalizers';
 
 import type {
   Attachment as AttachmentEntity,
   Location as LocationEntity,
+  Status as StatusEntity,
 } from 'soapbox/types/entities';
 
 export const ReducerRecord = ImmutableRecord({
@@ -36,6 +39,7 @@ export const ReducerRecord = ImmutableRecord({
   progress: 0,
   is_uploading: false,
   is_submitting: false,
+  id: null as string | null,
 });
 
 type State = ReturnType<typeof ReducerRecord>;
@@ -48,22 +52,22 @@ const setHasEndTime = (state: State) => {
   return state.set('end_time', endTime);
 };
 
-export default function create_event(state = ReducerRecord(), action: AnyAction): State {
+export default function compose_event(state = ReducerRecord(), action: AnyAction): State {
   switch (action.type) {
-    case CREATE_EVENT_NAME_CHANGE:
+    case EDIT_EVENT_NAME_CHANGE:
       return state.set('name', action.value);
-    case CREATE_EVENT_DESCRIPTION_CHANGE:
+    case EDIT_EVENT_DESCRIPTION_CHANGE:
       return state.set('status', action.value);
-    case CREATE_EVENT_START_TIME_CHANGE:
+    case EDIT_EVENT_START_TIME_CHANGE:
       return state.set('start_time', action.value);
-    case CREATE_EVENT_END_TIME_CHANGE:
+    case EDIT_EVENT_END_TIME_CHANGE:
       return state.set('end_time', action.value);
-    case CREATE_EVENT_HAS_END_TIME_CHANGE:
+    case EDIT_EVENT_HAS_END_TIME_CHANGE:
       if (action.value) return setHasEndTime(state);
       return state.set('end_time', null);
-    case CREATE_EVENT_APPROVAL_REQUIRED_CHANGE:
+    case EDIT_EVENT_APPROVAL_REQUIRED_CHANGE:
       return state.set('approval_required', action.value);
-    case CREATE_EVENT_LOCATION_CHANGE:
+    case EDIT_EVENT_LOCATION_CHANGE:
       return state.set('location', action.value);
     case EVENT_BANNER_UPLOAD_REQUEST:
       return state.set('is_uploading', true);
@@ -80,6 +84,23 @@ export default function create_event(state = ReducerRecord(), action: AnyAction)
     case EVENT_SUBMIT_SUCCESS:
     case EVENT_SUBMIT_FAIL:
       return state.set('is_submitting', false);
+    case EVENT_COMPOSE_CANCEL:
+      return ReducerRecord();
+    case EVENT_FORM_SET:
+      return ReducerRecord({
+        name: action.status.event.name,
+        status: action.text,
+        // location: null as LocationEntity | null,
+        start_time: new Date(action.status.event.start_time),
+        end_time: action.status.event.start_time ? new Date(action.status.event.end_time) : null,
+        approval_required: action.status.event.join_mode !== 'free',
+        banner: (action.status as StatusEntity).media_attachments.find(({ description }) => description === 'Banner') || null,
+        location: action.location ? normalizeLocation(action.location) : null,
+        progress: 0,
+        is_uploading: false,
+        is_submitting: false,
+        id: action.status.id,
+      });
     default:
       return state;
   }
diff --git a/app/soapbox/reducers/index.ts b/app/soapbox/reducers/index.ts
index 99e11ffa8..bd3b9c9e8 100644
--- a/app/soapbox/reducers/index.ts
+++ b/app/soapbox/reducers/index.ts
@@ -19,9 +19,9 @@ import chat_message_lists from './chat_message_lists';
 import chat_messages from './chat_messages';
 import chats from './chats';
 import compose from './compose';
+import compose_event from './compose_event';
 import contexts from './contexts';
 import conversations from './conversations';
-import create_event from './create_event';
 import custom_emojis from './custom_emojis';
 import domain_lists from './domain_lists';
 import dropdown_menu from './dropdown_menu';
@@ -127,7 +127,7 @@ const reducers = {
   rules,
   history,
   announcements,
-  create_event,
+  compose_event,
 };
 
 // Build a default state from all reducers: it has the key and `undefined`
diff --git a/app/soapbox/reducers/user_lists.ts b/app/soapbox/reducers/user_lists.ts
index 421b0c37d..6a9d92463 100644
--- a/app/soapbox/reducers/user_lists.ts
+++ b/app/soapbox/reducers/user_lists.ts
@@ -34,6 +34,8 @@ import {
   EVENT_PARTICIPATIONS_FETCH_SUCCESS,
   EVENT_PARTICIPATION_REQUESTS_EXPAND_SUCCESS,
   EVENT_PARTICIPATION_REQUESTS_FETCH_SUCCESS,
+  EVENT_PARTICIPATION_REQUEST_AUTHORIZE_SUCCESS,
+  EVENT_PARTICIPATION_REQUEST_REJECT_SUCCESS,
 } from 'soapbox/actions/events';
 import {
   FAMILIAR_FOLLOWERS_FETCH_SUCCESS,
@@ -212,7 +214,7 @@ export default function userLists(state = ReducerRecord(), action: AnyAction) {
     case EVENT_PARTICIPATIONS_EXPAND_SUCCESS:
       return appendToList(state, ['event_participations', action.id], action.accounts, action.next);
     case EVENT_PARTICIPATION_REQUESTS_FETCH_SUCCESS:
-      return state.setIn(['event_participations', action.id], ParticipationRequestListRecord({
+      return state.setIn(['event_participation_requests', action.id], ParticipationRequestListRecord({
         next: action.next,
         items: ImmutableOrderedSet(action.participations.map(({ account, participation_message }: APIEntity) => ParticipationRequestRecord({
           account: account.id,
@@ -221,13 +223,19 @@ export default function userLists(state = ReducerRecord(), action: AnyAction) {
       }));
     case EVENT_PARTICIPATION_REQUESTS_EXPAND_SUCCESS:
       return state.updateIn(
-        ['event_participations', action.id, 'items'],
+        ['event_participation_requests', action.id, 'items'],
         (items) => (items as ImmutableOrderedSet<ParticipationRequest>)
           .union(action.participations.map(({ account, participation_message }: APIEntity) => ParticipationRequestRecord({
             account: account.id,
             participation_message,
           }))),
       );
+    case EVENT_PARTICIPATION_REQUEST_AUTHORIZE_SUCCESS:
+    case EVENT_PARTICIPATION_REQUEST_REJECT_SUCCESS:
+      return state.updateIn(
+        ['event_participation_requests', action.id, 'items'],
+        items => (items as ImmutableOrderedSet<ParticipationRequest>).filter(({ account }) => account !== action.accountId),
+      );
     default:
       return state;
   }
diff --git a/app/soapbox/utils/notification.ts b/app/soapbox/utils/notification.ts
index 907a97434..776c728b5 100644
--- a/app/soapbox/utils/notification.ts
+++ b/app/soapbox/utils/notification.ts
@@ -12,6 +12,9 @@ const NOTIFICATION_TYPES = [
   'pleroma:emoji_reaction',
   'user_approved',
   'update',
+  'pleroma:event_reminder',
+  'pleroma:participation_request',
+  'pleroma:participation_accepted',
 ] as const;
 
 type NotificationType = typeof NOTIFICATION_TYPES[number];

From 1aa2f83f1e25e79a4641b1358c68f4c3ea9f90cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 28 Sep 2022 22:22:45 +0200
Subject: [PATCH 11/32] wip event editing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/actions/events.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/actions/events.ts b/app/soapbox/actions/events.ts
index 05e3feef8..2d81d7d59 100644
--- a/app/soapbox/actions/events.ts
+++ b/app/soapbox/actions/events.ts
@@ -221,6 +221,7 @@ const submitEvent = () =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     const state = getState();
 
+    const id        = state.compose_event.id;
     const name      = state.compose_event.name;
     const status    = state.compose_event.status;
     const banner    = state.compose_event.banner;
@@ -246,7 +247,11 @@ const submitEvent = () =>
     if (banner)   params.banner_id   = banner.id;
     if (location) params.location_id = location.origin_id;
 
-    return api(getState).post('/api/v1/pleroma/events', params).then(({ data }) => {
+    return api(getState).request({
+      url: id === null ? '/api/v1/pleroma/events' : `/api/v1/pleroma/events/${id}`,
+      method: id === null ? 'post' : 'put',
+      data: params,
+    }).then(({ data }) => {
       dispatch(closeModal('COMPOSE_EVENT'));
       dispatch(importFetchedStatus(data));
       dispatch(submitEventSuccess(data));

From 9b43ed7015174ab37860fa7043410e2eb4636505 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 30 Sep 2022 23:20:58 +0200
Subject: [PATCH 12/32] fixes, improvements, cleanup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/actions/compose.ts                |  4 +-
 app/soapbox/actions/events.ts                 |  3 +-
 app/soapbox/components/event-preview.tsx      |  8 ++--
 app/soapbox/components/quoted-status.tsx      | 27 +++++++------
 app/soapbox/components/status.tsx             |  2 +-
 .../compose/components/compose-form.tsx       | 12 +++---
 .../features/event/event-discussion.tsx       | 38 +------------------
 app/soapbox/features/status/index.tsx         |  2 +-
 app/soapbox/reducers/compose.ts               | 12 +++++-
 app/soapbox/reducers/compose_event.ts         |  2 +-
 10 files changed, 48 insertions(+), 62 deletions(-)

diff --git a/app/soapbox/actions/compose.ts b/app/soapbox/actions/compose.ts
index 0859199b1..ffac96f06 100644
--- a/app/soapbox/actions/compose.ts
+++ b/app/soapbox/actions/compose.ts
@@ -35,6 +35,7 @@ const COMPOSE_SUBMIT_REQUEST  = 'COMPOSE_SUBMIT_REQUEST';
 const COMPOSE_SUBMIT_SUCCESS  = 'COMPOSE_SUBMIT_SUCCESS';
 const COMPOSE_SUBMIT_FAIL     = 'COMPOSE_SUBMIT_FAIL';
 const COMPOSE_REPLY           = 'COMPOSE_REPLY';
+const COMPOSE_EVENT_REPLY     = 'COMPOSE_EVENT_REPLY';
 const COMPOSE_REPLY_CANCEL    = 'COMPOSE_REPLY_CANCEL';
 const COMPOSE_QUOTE           = 'COMPOSE_QUOTE';
 const COMPOSE_QUOTE_CANCEL    = 'COMPOSE_QUOTE_CANCEL';
@@ -726,7 +727,7 @@ const eventDiscussionCompose = (composeId: string, status: Status) =>
     const { explicitAddressing } = getFeatures(instance);
 
     dispatch({
-      type: COMPOSE_REPLY,
+      type: COMPOSE_EVENT_REPLY,
       id: composeId,
       status: status,
       account: state.accounts.get(state.me),
@@ -741,6 +742,7 @@ export {
   COMPOSE_SUBMIT_FAIL,
   COMPOSE_REPLY,
   COMPOSE_REPLY_CANCEL,
+  COMPOSE_EVENT_REPLY,
   COMPOSE_QUOTE,
   COMPOSE_QUOTE_CANCEL,
   COMPOSE_DIRECT,
diff --git a/app/soapbox/actions/events.ts b/app/soapbox/actions/events.ts
index 2d81d7d59..21089227b 100644
--- a/app/soapbox/actions/events.ts
+++ b/app/soapbox/actions/events.ts
@@ -81,6 +81,7 @@ const noOp = () => new Promise(f => f(undefined));
 const messages = defineMessages({
   exceededImageSizeLimit: { id: 'upload_error.image_size_limit', defaultMessage: 'Image exceeds the current file size limit ({limit})' },
   success: { id: 'compose_event.submit_success', defaultMessage: 'Your event was created' },
+  editSuccess: { id: 'compose_event.edit_success', defaultMessage: 'Your event was edited' },
   joinSuccess: { id: 'join_event.success', defaultMessage: 'Joined the event' },
   joinRequestSuccess: { id: 'join_event.request_success', defaultMessage: 'Requested to join the event' },
   view: { id: 'snackbar.view', defaultMessage: 'View' },
@@ -255,7 +256,7 @@ const submitEvent = () =>
       dispatch(closeModal('COMPOSE_EVENT'));
       dispatch(importFetchedStatus(data));
       dispatch(submitEventSuccess(data));
-      dispatch(snackbar.success(messages.success, messages.view, `/@${data.account.acct}/events/${data.id}`));
+      dispatch(snackbar.success(id ? messages.editSuccess : messages.success, messages.view, `/@${data.account.acct}/events/${data.id}`));
     }).catch(function(error) {
       dispatch(submitEventFail(error));
     });
diff --git a/app/soapbox/components/event-preview.tsx b/app/soapbox/components/event-preview.tsx
index 5999ca44e..719184be7 100644
--- a/app/soapbox/components/event-preview.tsx
+++ b/app/soapbox/components/event-preview.tsx
@@ -1,3 +1,4 @@
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -18,10 +19,11 @@ const messages = defineMessages({
 });
 
 interface IEventPreview {
-  status: StatusEntity
+  status: StatusEntity,
+  className?: string,
 }
 
-const EventPreview: React.FC<IEventPreview> = ({ status }) => {
+const EventPreview: React.FC<IEventPreview> = ({ status, className }) => {
   const intl = useIntl();
 
   const me = useAppSelector((state) => state.me);
@@ -32,7 +34,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status }) => {
   const banner = status.media_attachments?.find(({ description }) => description === 'Banner');
 
   return (
-    <div className='rounded-lg bg-gray-100 dark:bg-primary-800 shadow-xl relative overflow-hidden'>
+    <div className={classNames('rounded-lg bg-gray-100 dark:bg-primary-800 relative overflow-hidden', className)}>
       <div className='absolute top-28 right-3'>
         {account.id === me ? (
           <Button
diff --git a/app/soapbox/components/quoted-status.tsx b/app/soapbox/components/quoted-status.tsx
index d7ecfaf05..6b6e87209 100644
--- a/app/soapbox/components/quoted-status.tsx
+++ b/app/soapbox/components/quoted-status.tsx
@@ -9,6 +9,7 @@ import AccountContainer from 'soapbox/containers/account_container';
 import { useSettings } from 'soapbox/hooks';
 import { defaultMediaVisibility } from 'soapbox/utils/status';
 
+import EventPreview from './event-preview';
 import OutlineBox from './outline-box';
 
 import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
@@ -146,18 +147,22 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
 
         {renderReplyMentions()}
 
-        <Text
-          className='break-words status__content status__content--quote'
-          size='sm'
-          dangerouslySetInnerHTML={{ __html: status.contentHtml }}
-        />
+        {status.event ? <EventPreview status={status} /> : (
+          <>
+            <Text
+              className='break-words status__content status__content--quote'
+              size='sm'
+              dangerouslySetInnerHTML={{ __html: status.contentHtml }}
+            />
 
-        <StatusMedia
-          status={status}
-          muted={compose}
-          showMedia={showMedia}
-          onToggleVisibility={handleToggleMediaVisibility}
-        />
+            <StatusMedia
+              status={status}
+              muted={compose}
+              showMedia={showMedia}
+              onToggleVisibility={handleToggleMediaVisibility}
+            />
+          </>
+        )}
       </Stack>
     </OutlineBox>
   );
diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx
index 1d58fe304..60f82999c 100644
--- a/app/soapbox/components/status.tsx
+++ b/app/soapbox/components/status.tsx
@@ -372,7 +372,7 @@ const Status: React.FC<IStatus> = (props) => {
               hoverable={hoverable}
             />
 
-            {actualStatus.event ? <EventPreview status={actualStatus} /> : (
+            {actualStatus.event ? <EventPreview className='shadow-xl' status={actualStatus} /> : (
               <>
                 <StatusContent
                   status={actualStatus}
diff --git a/app/soapbox/features/compose/components/compose-form.tsx b/app/soapbox/features/compose/components/compose-form.tsx
index f97f20fde..aba85204d 100644
--- a/app/soapbox/features/compose/components/compose-form.tsx
+++ b/app/soapbox/features/compose/components/compose-form.tsx
@@ -62,10 +62,10 @@ interface IComposeForm<ID extends string> {
   shouldCondense?: boolean,
   autoFocus?: boolean,
   clickableAreaRef?: React.RefObject<HTMLDivElement>,
-  eventDiscussion?: boolean
+  event?: string,
 }
 
-const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickableAreaRef, eventDiscussion }: IComposeForm<ID>) => {
+const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickableAreaRef, event }: IComposeForm<ID>) => {
   const history = useHistory();
   const intl = useIntl();
   const dispatch = useAppDispatch();
@@ -267,7 +267,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
     publishText = intl.formatMessage(messages.schedule);
   }
 
-  if (eventDiscussion) {
+  if (event) {
     textareaPlaceholder = messages.eventPlaceholder;
   } else if (hasPoll) {
     textareaPlaceholder = messages.pollPlaceholder;
@@ -277,7 +277,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
 
   return (
     <Stack className='w-full' space={1} ref={formRef} onClick={handleClick}>
-      {scheduledStatusCount > 0 && !eventDiscussion && (
+      {scheduledStatusCount > 0 && !event && (
         <Warning
           message={(
             <FormattedMessage
@@ -298,9 +298,9 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
 
       <WarningContainer composeId={id} />
 
-      {!shouldCondense && !eventDiscussion && <ReplyIndicatorContainer composeId={id} />}
+      {!shouldCondense && !event && <ReplyIndicatorContainer composeId={id} />}
 
-      {!shouldCondense && !eventDiscussion && <ReplyMentions composeId={id} />}
+      {!shouldCondense && !event && <ReplyMentions composeId={id} />}
 
       <div
         className={classNames({
diff --git a/app/soapbox/features/event/event-discussion.tsx b/app/soapbox/features/event/event-discussion.tsx
index b8df6af57..5ece17044 100644
--- a/app/soapbox/features/event/event-discussion.tsx
+++ b/app/soapbox/features/event/event-discussion.tsx
@@ -2,7 +2,6 @@ import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immuta
 import debounce from 'lodash/debounce';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { createSelector } from 'reselect';
 
 import { eventDiscussionCompose } from 'soapbox/actions/compose';
 import { fetchStatusWithContext, fetchNext } from 'soapbox/actions/statuses';
@@ -16,43 +15,12 @@ import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 import { makeGetStatus } from 'soapbox/selectors';
 
 import ComposeForm from '../compose/components/compose-form';
+import { getDescendantsIds } from '../status';
 import ThreadStatus from '../status/components/thread-status';
 
 import type { VirtuosoHandle } from 'react-virtuoso';
-import type { RootState } from 'soapbox/store';
 import type { Attachment as AttachmentEntity } from 'soapbox/types/entities';
 
-const getDescendantsIds = createSelector([
-  (_: RootState, statusId: string) => statusId,
-  (state: RootState) => state.contexts.replies,
-], (statusId, contextReplies) => {
-  let descendantsIds = ImmutableOrderedSet<string>();
-  const ids = [statusId];
-
-  while (ids.length > 0) {
-    const id = ids.shift();
-    if (!id) break;
-
-    const replies = contextReplies.get(id);
-
-    if (descendantsIds.includes(id)) {
-      break;
-    }
-
-    if (statusId !== id) {
-      descendantsIds = descendantsIds.union([id]);
-    }
-
-    if (replies) {
-      replies.reverse().forEach((reply: string) => {
-        ids.unshift(reply);
-      });
-    }
-  }
-
-  return descendantsIds;
-});
-
 type RouteParams = { statusId: string };
 
 interface IEventDiscussion {
@@ -87,7 +55,6 @@ const EventDiscussion: React.FC<IEventDiscussion> = (props) => {
   const node = useRef<HTMLDivElement>(null);
   const scroller = useRef<VirtuosoHandle>(null);
 
-  /** Fetch the status (and context) from the API. */
   const fetchData = async() => {
     const { params } = props;
     const { statusId } = params;
@@ -95,7 +62,6 @@ const EventDiscussion: React.FC<IEventDiscussion> = (props) => {
     setNext(next);
   };
 
-  // Load data.
   useEffect(() => {
     fetchData().then(() => {
       setIsLoaded(true);
@@ -210,7 +176,7 @@ const EventDiscussion: React.FC<IEventDiscussion> = (props) => {
   return (
     <Stack space={2}>
       {me && <div className='sm:p-2 pt-0 border-b border-solid border-gray-200 dark:border-gray-800'>
-        <ComposeForm id={`reply:${status.id}`} autoFocus={false} eventDiscussion />
+        <ComposeForm id={`reply:${status.id}`} autoFocus={false} event={status.id} />
       </div>}
       <div ref={node} className='thread p-0 sm:p-2 shadow-none'>
         <ScrollableList
diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index 6995998b2..1903a7f2d 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@@ -84,7 +84,7 @@ const getAncestorsIds = createSelector([
   return ancestorsIds;
 });
 
-const getDescendantsIds = createSelector([
+export const getDescendantsIds = createSelector([
   (_: RootState, statusId: string) => statusId,
   (state: RootState) => state.contexts.replies,
 ], (statusId, contextReplies) => {
diff --git a/app/soapbox/reducers/compose.ts b/app/soapbox/reducers/compose.ts
index 9d4f84556..d68369dad 100644
--- a/app/soapbox/reducers/compose.ts
+++ b/app/soapbox/reducers/compose.ts
@@ -49,6 +49,7 @@ import {
   COMPOSE_ADD_TO_MENTIONS,
   COMPOSE_REMOVE_FROM_MENTIONS,
   COMPOSE_SET_STATUS,
+  COMPOSE_EVENT_REPLY,
 } from '../actions/compose';
 import { ME_FETCH_SUCCESS, ME_PATCH_SUCCESS } from '../actions/me';
 import { SETTING_CHANGE, FE_NAME } from '../actions/settings';
@@ -337,6 +338,12 @@ export default function compose(state = initialState, action: AnyAction) {
           map.set('spoiler_text', '');
         }
       }));
+    case COMPOSE_EVENT_REPLY:
+      return updateCompose(state, action.id, compose => compose.withMutations(map => {
+        map.set('in_reply_to', action.status.get('id'));
+        map.set('to', statusToMentionsArray(action.status, action.account));
+        map.set('idempotencyKey', uuid());
+      }));
     case COMPOSE_QUOTE:
       return updateCompose(state, 'compose-modal', compose => compose.withMutations(map => {
         const defaultCompose = state.get('default')!;
@@ -360,7 +367,10 @@ export default function compose(state = initialState, action: AnyAction) {
     case COMPOSE_QUOTE_CANCEL:
     case COMPOSE_RESET:
     case COMPOSE_SUBMIT_SUCCESS:
-      return updateCompose(state, action.id, () => state.get('default')!.set('idempotencyKey', uuid()));
+      return updateCompose(state, action.id, () => state.get('default')!.withMutations(map => {
+        map.set('idempotencyKey', uuid());
+        map.set('in_reply_to', action.id.startsWith('reply:') ? action.id.slice(6) : null);
+      }));
     case COMPOSE_SUBMIT_FAIL:
       return updateCompose(state, action.id, compose => compose.set('is_submitting', false));
     case COMPOSE_UPLOAD_CHANGE_FAIL:
diff --git a/app/soapbox/reducers/compose_event.ts b/app/soapbox/reducers/compose_event.ts
index b25d391cc..ab03d994d 100644
--- a/app/soapbox/reducers/compose_event.ts
+++ b/app/soapbox/reducers/compose_event.ts
@@ -92,7 +92,7 @@ export default function compose_event(state = ReducerRecord(), action: AnyAction
         status: action.text,
         // location: null as LocationEntity | null,
         start_time: new Date(action.status.event.start_time),
-        end_time: action.status.event.start_time ? new Date(action.status.event.end_time) : null,
+        end_time: action.status.event.end_time ? new Date(action.status.event.end_time) : null,
         approval_required: action.status.event.join_mode !== 'free',
         banner: (action.status as StatusEntity).media_attachments.find(({ description }) => description === 'Banner') || null,
         location: action.location ? normalizeLocation(action.location) : null,

From d1ab8c7cb666b12d95a9e9e00688e051d0b2266a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sat, 1 Oct 2022 11:41:50 +0200
Subject: [PATCH 13/32] fix edit action
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/status-action-bar.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/components/status-action-bar.tsx b/app/soapbox/components/status-action-bar.tsx
index 546d162a1..642807dad 100644
--- a/app/soapbox/components/status-action-bar.tsx
+++ b/app/soapbox/components/status-action-bar.tsx
@@ -8,6 +8,7 @@ import { blockAccount } from 'soapbox/actions/accounts';
 import { showAlertForError } from 'soapbox/actions/alerts';
 import { launchChat } from 'soapbox/actions/chats';
 import { directCompose, mentionCompose, quoteCompose, replyCompose } from 'soapbox/actions/compose';
+import { editEvent } from 'soapbox/actions/events';
 import { toggleBookmark, toggleFavourite, togglePin, toggleReblog } from 'soapbox/actions/interactions';
 import { openModal } from 'soapbox/actions/modals';
 import { deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation';
@@ -209,7 +210,8 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   };
 
   const handleEditClick: React.EventHandler<React.MouseEvent> = () => {
-    dispatch(editStatus(status.id));
+    if (status.event) dispatch(editEvent(status.id));
+    else dispatch(editStatus(status.id));
   };
 
   const handlePinClick: React.EventHandler<React.MouseEvent> = (e) => {

From 3c8c8048e585e154593f91d3eabcea6ad148a4ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 6 Oct 2022 00:01:26 +0200
Subject: [PATCH 14/32] Minor improvements, add actions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/event-preview.tsx      |   7 +-
 app/soapbox/components/quoted-status.tsx      |   2 +-
 .../event/components/event-header.tsx         | 237 +++++++++++++++---
 .../features/event/event-information.tsx      |  24 +-
 .../features/ui/components/compose-button.tsx |   2 +-
 .../compose-event-modal.tsx                   | 232 ++++++++---------
 6 files changed, 338 insertions(+), 166 deletions(-)

diff --git a/app/soapbox/components/event-preview.tsx b/app/soapbox/components/event-preview.tsx
index 719184be7..a0c2ff7f5 100644
--- a/app/soapbox/components/event-preview.tsx
+++ b/app/soapbox/components/event-preview.tsx
@@ -21,9 +21,10 @@ const messages = defineMessages({
 interface IEventPreview {
   status: StatusEntity,
   className?: string,
+  hideAction?: boolean;
 }
 
-const EventPreview: React.FC<IEventPreview> = ({ status, className }) => {
+const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction }) => {
   const intl = useIntl();
 
   const me = useAppSelector((state) => state.me);
@@ -36,7 +37,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className }) => {
   return (
     <div className={classNames('rounded-lg bg-gray-100 dark:bg-primary-800 relative overflow-hidden', className)}>
       <div className='absolute top-28 right-3'>
-        {account.id === me ? (
+        {!hideAction && (account.id === me ? (
           <Button
             size='sm'
             theme='secondary'
@@ -44,7 +45,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className }) => {
           >
             <FormattedMessage id='event.manage' defaultMessage='Manage' />
           </Button>
-        ) : <EventActionButton status={status} />}
+        ) : <EventActionButton status={status} />)}
       </div>
       <div className='bg-primary-200 dark:bg-gray-600 h-40'>
         {banner && <img className='h-full w-full object-cover' src={banner.url} alt={intl.formatMessage(messages.bannerHeader)} />}
diff --git a/app/soapbox/components/quoted-status.tsx b/app/soapbox/components/quoted-status.tsx
index 6b6e87209..a8846f9e8 100644
--- a/app/soapbox/components/quoted-status.tsx
+++ b/app/soapbox/components/quoted-status.tsx
@@ -147,7 +147,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
 
         {renderReplyMentions()}
 
-        {status.event ? <EventPreview status={status} /> : (
+        {status.event ? <EventPreview status={status} hideAction /> : (
           <>
             <Text
               className='break-words status__content status__content--quote'
diff --git a/app/soapbox/features/event/components/event-header.tsx b/app/soapbox/features/event/components/event-header.tsx
index 64794fa1d..da2ddc4a5 100644
--- a/app/soapbox/features/event/components/event-header.tsx
+++ b/app/soapbox/features/event/components/event-header.tsx
@@ -1,16 +1,23 @@
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { Link } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 
+import { blockAccount } from 'soapbox/actions/accounts';
+import { launchChat } from 'soapbox/actions/chats';
+import { directCompose, mentionCompose, quoteCompose } from 'soapbox/actions/compose';
 import { editEvent, fetchEventIcs } from 'soapbox/actions/events';
+import { toggleBookmark, togglePin } from 'soapbox/actions/interactions';
 import { openModal } from 'soapbox/actions/modals';
 import { deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation';
+import { initMuteModal } from 'soapbox/actions/mutes';
+import { initReport } from 'soapbox/actions/reports';
+import { deleteStatus } from 'soapbox/actions/statuses';
 import Icon from 'soapbox/components/icon';
 import StillImage from 'soapbox/components/still_image';
 import { Button, HStack, IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList, Stack, Text } from 'soapbox/components/ui';
 import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import VerificationBadge from 'soapbox/components/verification_badge';
-import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
+import { useAppDispatch, useFeatures, useOwnAccount } from 'soapbox/hooks';
 import { download } from 'soapbox/utils/download';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 
@@ -27,11 +34,28 @@ const messages = defineMessages({
   copy: { id: 'event.copy', defaultMessage: 'Copy link to event' },
   bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' },
   unbookmark: { id: 'status.unbookmark', defaultMessage: 'Remove bookmark' },
+  quotePost: { id: 'status.quote', defaultMessage: 'Quote post' },
+  pin: { id: 'status.pin', defaultMessage: 'Pin on profile' },
+  unpin: { id: 'status.unpin', defaultMessage: 'Unpin from profile' },
+  reblog_private: { id: 'status.reblog_private', defaultMessage: 'Repost to original audience' },
+  cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Un-repost' },
+  delete: { id: 'status.delete', defaultMessage: 'Delete' },
+  mention: { id: 'status.mention', defaultMessage: 'Mention @{name}' },
+  chat: { id: 'status.chat', defaultMessage: 'Chat with @{name}' },
+  direct: { id: 'status.direct', defaultMessage: 'Direct message @{name}' },
+  mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' },
+  block: { id: 'account.block', defaultMessage: 'Block @{name}' },
+  report: { id: 'status.report', defaultMessage: 'Report @{name}' },
   adminAccount: { id: 'status.admin_account', defaultMessage: 'Moderate @{name}' },
   adminStatus: { id: 'status.admin_status', defaultMessage: 'Open this post in the moderation interface' },
   markStatusSensitive: { id: 'admin.statuses.actions.mark_status_sensitive', defaultMessage: 'Mark post sensitive' },
   markStatusNotSensitive: { id: 'admin.statuses.actions.mark_status_not_sensitive', defaultMessage: 'Mark post not sensitive' },
   deleteStatus: { id: 'admin.statuses.actions.delete_status', defaultMessage: 'Delete post' },
+  blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' },
+  blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block & Report' },
+  deleteConfirm: { id: 'confirmations.delete_event.confirm', defaultMessage: 'Delete' },
+  deleteHeading: { id: 'confirmations.delete_event.heading', defaultMessage: 'Delete event' },
+  deleteMessage: { id: 'confirmations.delete_event.message', defaultMessage: 'Are you sure you want to delete this event?' },
 });
 
 interface IEventHeader {
@@ -41,7 +65,9 @@ interface IEventHeader {
 const EventHeader: React.FC<IEventHeader> = ({ status }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
+  const history = useHistory();
 
+  const features = useFeatures();
   const ownAccount = useOwnAccount();
   const isStaff = ownAccount ? ownAccount.staff : false;
   const isAdmin = ownAccount ? ownAccount.admin : false;
@@ -62,6 +88,8 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
   const event = status.event;
   const banner = status.media_attachments?.find(({ description }) => description === 'Banner');
 
+  const username = account.username;
+
   const handleHeaderClick: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
     e.stopPropagation();
 
@@ -94,6 +122,63 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
     }
   };
 
+  const handleBookmarkClick = () => {
+    dispatch(toggleBookmark(status));
+  };
+
+  const handleQuoteClick = () => {
+    dispatch(quoteCompose(status));
+  };
+
+  const handlePinClick = () => {
+    dispatch(togglePin(status));
+  };
+
+  const handleDeleteClick = () => {
+    dispatch(openModal('CONFIRM', {
+      icon: require('@tabler/icons/trash.svg'),
+      heading: intl.formatMessage(messages.deleteHeading),
+      message: intl.formatMessage(messages.deleteMessage),
+      confirm: intl.formatMessage(messages.deleteConfirm),
+      onConfirm: () => dispatch(deleteStatus(status.id)),
+    }));
+  };
+
+  const handleMentionClick = () => {
+    dispatch(mentionCompose(account));
+  };
+
+  const handleChatClick = () => {
+    dispatch(launchChat(account.id, history));
+  };
+
+  const handleDirectClick = () => {
+    dispatch(directCompose(account));
+  };
+
+  const handleMuteClick = () => {
+    dispatch(initMuteModal(account));
+  };
+
+  const handleBlockClick = () => {
+    dispatch(openModal('CONFIRM', {
+      icon: require('@tabler/icons/ban.svg'),
+      heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
+      message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.acct}</strong> }} />,
+      confirm: intl.formatMessage(messages.blockConfirm),
+      onConfirm: () => dispatch(blockAccount(account.id)),
+      secondary: intl.formatMessage(messages.blockAndReport),
+      onSecondary: () => {
+        dispatch(blockAccount(account.id));
+        dispatch(initReport(account, status));
+      },
+    }));
+  };
+
+  const handleReport = () => {
+    dispatch(initReport(account, status));
+  };
+
   const handleModerate = () => {
     dispatch(openModal('ACCOUNT_MODERATION', { accountId: account.id }));
   };
@@ -110,51 +195,129 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
     dispatch(deleteStatusModal(intl, status.id));
   };
 
-  const menu: MenuType = [
-    {
-      text: intl.formatMessage(messages.exportIcs),
-      action: handleExportClick,
-      icon: require('@tabler/icons/calendar-plus.svg'),
-    },
-    {
-      text: intl.formatMessage(messages.copy),
-      action: handleCopy,
-      icon: require('@tabler/icons/link.svg'),
-    },
-  ];
-
-  if (isStaff) {
-    menu.push(null);
-
-    menu.push({
-      text: intl.formatMessage(messages.adminAccount, { name: account.username }),
-      action: handleModerate,
-      icon: require('@tabler/icons/gavel.svg'),
-    });
+  const makeMenu = () => {
+    const menu: MenuType = [
+      {
+        text: intl.formatMessage(messages.exportIcs),
+        action: handleExportClick,
+        icon: require('@tabler/icons/calendar-plus.svg'),
+      },
+      {
+        text: intl.formatMessage(messages.copy),
+        action: handleCopy,
+        icon: require('@tabler/icons/link.svg'),
+      },
+    ];
+
+    if (!ownAccount) return menu;
+
+    if (features.bookmarks) {
+      menu.push({
+        text: intl.formatMessage(status.bookmarked ? messages.unbookmark : messages.bookmark),
+        action: handleBookmarkClick,
+        icon: status.bookmarked ? require('@tabler/icons/bookmark-off.svg') : require('@tabler/icons/bookmark.svg'),
+      });
+    }
 
-    if (isAdmin) {
+    if (features.quotePosts) {
       menu.push({
-        text: intl.formatMessage(messages.adminStatus),
-        action: handleModerateStatus,
-        icon: require('@tabler/icons/pencil.svg'),
+        text: intl.formatMessage(messages.quotePost),
+        action: handleQuoteClick,
+        icon: require('@tabler/icons/quote.svg'),
       });
     }
 
-    menu.push({
-      text: intl.formatMessage(status.sensitive === false ? messages.markStatusSensitive : messages.markStatusNotSensitive),
-      action: handleToggleStatusSensitivity,
-      icon: require('@tabler/icons/alert-triangle.svg'),
-    });
+    menu.push(null);
+
+    if (ownAccount.id === account.id) {
+      if (['public', 'unlisted'].includes(status.visibility)) {
+        menu.push({
+          text: intl.formatMessage(status.pinned ? messages.unpin : messages.pin),
+          action: handlePinClick,
+          icon: status.pinned ? require('@tabler/icons/pinned-off.svg') : require('@tabler/icons/pin.svg'),
+        });
+      }
 
-    if (account.id !== ownAccount?.id) {
       menu.push({
-        text: intl.formatMessage(messages.deleteStatus),
-        action: handleDeleteStatus,
+        text: intl.formatMessage(messages.delete),
+        action: handleDeleteClick,
         icon: require('@tabler/icons/trash.svg'),
         destructive: true,
       });
+    } else {
+      menu.push({
+        text: intl.formatMessage(messages.mention, { name: username }),
+        action: handleMentionClick,
+        icon: require('@tabler/icons/at.svg'),
+      });
+
+      if (status.getIn(['account', 'pleroma', 'accepts_chat_messages']) === true) {
+        menu.push({
+          text: intl.formatMessage(messages.chat, { name: username }),
+          action: handleChatClick,
+          icon: require('@tabler/icons/messages.svg'),
+        });
+      } else if (features.privacyScopes) {
+        menu.push({
+          text: intl.formatMessage(messages.direct, { name: username }),
+          action: handleDirectClick,
+          icon: require('@tabler/icons/mail.svg'),
+        });
+      }
+
+      menu.push(null);
+      menu.push({
+        text: intl.formatMessage(messages.mute, { name: username }),
+        action: handleMuteClick,
+        icon: require('@tabler/icons/circle-x.svg'),
+      });
+      menu.push({
+        text: intl.formatMessage(messages.block, { name: username }),
+        action: handleBlockClick,
+        icon: require('@tabler/icons/ban.svg'),
+      });
+      menu.push({
+        text: intl.formatMessage(messages.report, { name: username }),
+        action: handleReport,
+        icon: require('@tabler/icons/flag.svg'),
+      });
     }
-  }
+
+    if (isStaff) {
+      menu.push(null);
+
+      menu.push({
+        text: intl.formatMessage(messages.adminAccount, { name: account.username }),
+        action: handleModerate,
+        icon: require('@tabler/icons/gavel.svg'),
+      });
+
+      if (isAdmin) {
+        menu.push({
+          text: intl.formatMessage(messages.adminStatus),
+          action: handleModerateStatus,
+          icon: require('@tabler/icons/pencil.svg'),
+        });
+      }
+
+      menu.push({
+        text: intl.formatMessage(status.sensitive === false ? messages.markStatusSensitive : messages.markStatusNotSensitive),
+        action: handleToggleStatusSensitivity,
+        icon: require('@tabler/icons/alert-triangle.svg'),
+      });
+
+      if (account.id !== ownAccount?.id) {
+        menu.push({
+          text: intl.formatMessage(messages.deleteStatus),
+          action: handleDeleteStatus,
+          icon: require('@tabler/icons/trash.svg'),
+          destructive: true,
+        });
+      }
+    }
+
+    return menu;
+  };
 
   const handleManageClick: React.MouseEventHandler = e => {
     e.stopPropagation();
@@ -199,7 +362,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
             />
 
             <MenuList>
-              {menu.map((menuItem, idx) => {
+              {makeMenu().map((menuItem, idx) => {
                 if (typeof menuItem?.text === 'undefined') {
                   return <MenuDivider key={idx} />;
                 } else {
diff --git a/app/soapbox/features/event/event-information.tsx b/app/soapbox/features/event/event-information.tsx
index 980cbd089..01ae26595 100644
--- a/app/soapbox/features/event/event-information.tsx
+++ b/app/soapbox/features/event/event-information.tsx
@@ -45,7 +45,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
   };
 
   const handleShowMap: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
-    e.stopPropagation();
+    e.preventDefault();
 
     dispatch(openModal('EVENT_MAP', {
       statusId: status.id,
@@ -138,16 +138,18 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
 
   return (
     <Stack className='mt-4 sm:p-2' space={2}>
-      <Stack space={1}>
-        <Text size='xl' weight='bold'>
-          <FormattedMessage id='event.description' defaultMessage='Description' />
-        </Text>
-        <Text
-          className='break-words status__content'
-          size='sm'
-          dangerouslySetInnerHTML={{ __html: status.contentHtml }}
-        />
-      </Stack>
+      {!!status.contentHtml.trim() && (
+        <Stack space={1}>
+          <Text size='xl' weight='bold'>
+            <FormattedMessage id='event.description' defaultMessage='Description' />
+          </Text>
+          <Text
+            className='break-words status__content'
+            size='sm'
+            dangerouslySetInnerHTML={{ __html: status.contentHtml }}
+          />
+        </Stack>
+      )}
 
       <StatusMedia
         status={status}
diff --git a/app/soapbox/features/ui/components/compose-button.tsx b/app/soapbox/features/ui/components/compose-button.tsx
index 567959b32..bbe6467a3 100644
--- a/app/soapbox/features/ui/components/compose-button.tsx
+++ b/app/soapbox/features/ui/components/compose-button.tsx
@@ -7,7 +7,7 @@ import { Button } from 'soapbox/components/ui';
 
 const ComposeButton = () => {
   const dispatch = useDispatch();
-  const onOpenCompose = () => dispatch(openModal('COMPOSE_EVENT'));
+  const onOpenCompose = () => dispatch(openModal('COMPOSE'));
 
   return (
     <div className='mt-4'>
diff --git a/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx b/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
index 0c24d21f1..9569e7306 100644
--- a/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
@@ -185,6 +185,124 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
     return <Tabs items={items} activeItem={tab} />;
   };
 
+  let body;
+  if (tab === 'edit') body = (
+    <Form>
+      <FormGroup
+        labelText={<FormattedMessage id='compose_event.fields.banner_label' defaultMessage='Event banner' />}
+      >
+        <div className='flex items-center justify-center bg-gray-200 dark:bg-gray-900/50 rounded-lg text-black dark:text-white sm:shadow dark:sm:shadow-inset overflow-hidden h-24 sm:h-32 relative'>
+          {banner ? (
+            <>
+              <img className='h-full w-full object-cover' src={banner.url} alt='' />
+              <IconButton className='absolute top-2 right-2' src={require('@tabler/icons/x.svg')} onClick={handleClearBanner} />
+            </>
+          ) : (
+            <UploadButton disabled={isUploading} onSelectFile={handleFiles} />
+          )}
+
+        </div>
+      </FormGroup>
+      <FormGroup
+        labelText={<FormattedMessage id='compose_event.fields.name_label' defaultMessage='Event name' />}
+      >
+        <Input
+          type='text'
+          placeholder={intl.formatMessage(messages.eventNamePlaceholder)}
+          value={name}
+          onChange={onChangeName}
+        />
+      </FormGroup>
+      <FormGroup
+        labelText={<FormattedMessage id='compose_event.fields.description_label' defaultMessage='Event description' />}
+        hintText={<FormattedMessage id='compose_event.fields.description_hint' defaultMessage='Markdown syntax is supported' />}
+      >
+        <Textarea
+          autoComplete='off'
+          placeholder={intl.formatMessage(messages.eventDescriptionPlaceholder)}
+          value={description}
+          onChange={onChangeDescription}
+        />
+      </FormGroup>
+      <FormGroup
+        labelText={<FormattedMessage id='compose_event.fields.location_label' defaultMessage='Event location' />}
+      >
+        {location ? renderLocation() : (
+          <LocationSearch
+            onSelected={onChangeLocation}
+          />
+        )}
+      </FormGroup>
+      <FormGroup
+        labelText={<FormattedMessage id='compose_event.fields.start_time_label' defaultMessage='Event start date' />}
+      >
+        <BundleContainer fetchComponent={DatePicker}>
+          {Component => (<Component
+            showTimeSelect
+            dateFormat='MMMM d, yyyy h:mm aa'
+            timeIntervals={15}
+            wrapperClassName='react-datepicker-wrapper'
+            placeholderText={intl.formatMessage(messages.eventStartTimePlaceholder)}
+            filterDate={isCurrentOrFutureDate}
+            selected={startTime}
+            onChange={onChangeStartTime}
+          />)}
+        </BundleContainer>
+      </FormGroup>
+      <HStack alignItems='center' space={2}>
+        <Toggle
+          icons={false}
+          checked={!!endTime}
+          onChange={onChangeHasEndTime}
+        />
+        <Text tag='span' theme='muted'>
+          <FormattedMessage id='compose_event.fields.has_end_time' defaultMessage='The event has end date' />
+        </Text>
+      </HStack>
+      {endTime && (
+        <FormGroup
+          labelText={<FormattedMessage id='compose_event.fields.end_time_label' defaultMessage='Event end date' />}
+        >
+          <BundleContainer fetchComponent={DatePicker}>
+            {Component => (<Component
+              showTimeSelect
+              dateFormat='MMMM d, yyyy h:mm aa'
+              timeIntervals={15}
+              wrapperClassName='react-datepicker-wrapper'
+              placeholderText={intl.formatMessage(messages.eventEndTimePlaceholder)}
+              filterDate={isCurrentOrFutureDate}
+              selected={endTime}
+              onChange={onChangeEndTime}
+            />)}
+          </BundleContainer>
+        </FormGroup>
+      )}
+      {!id && (
+        <HStack alignItems='center' space={2}>
+          <Toggle
+            icons={false}
+            checked={approvalRequired}
+            onChange={onChangeApprovalRequired}
+          />
+          <Text tag='span' theme='muted'>
+            <FormattedMessage id='compose_event.fields.approval_required' defaultMessage='I want to approve participation requests manually' />
+          </Text>
+        </HStack>
+      )}
+    </Form>
+  );
+  else body = accounts ? (
+    <Stack space={3}>
+      {accounts.size > 0 ? (
+        accounts.map(({ account, participation_message }) =>
+          <Account key={account} eventId={id!} id={account} participationMessage={participation_message} />,
+        )
+      ) : (
+        <FormattedMessage id='empty_column.event_participant_requests' defaultMessage='There are no pending event participation requests.' />
+      )}
+    </Stack>
+  ) : <Spinner />;
+
   return (
     <Modal
       title={id
@@ -199,119 +317,7 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
     >
       <Stack space={2}>
         {id && renderTabs()}
-        {tab === 'edit' ? (
-          <Form>
-            <FormGroup
-              labelText={<FormattedMessage id='compose_event.fields.banner_label' defaultMessage='Event banner' />}
-            >
-              <div className='flex items-center justify-center bg-gray-200 dark:bg-gray-900/50 rounded-lg text-black dark:text-white sm:shadow dark:sm:shadow-inset overflow-hidden h-24 sm:h-32 relative'>
-                {banner ? (
-                  <>
-                    <img className='h-full w-full object-cover' src={banner.url} alt='' />
-                    <IconButton className='absolute top-2 right-2' src={require('@tabler/icons/x.svg')} onClick={handleClearBanner} />
-                  </>
-                ) : (
-                  <UploadButton disabled={isUploading} onSelectFile={handleFiles} />
-                )}
-
-              </div>
-            </FormGroup>
-            <FormGroup
-              labelText={<FormattedMessage id='compose_event.fields.name_label' defaultMessage='Event name' />}
-            >
-              <Input
-                type='text'
-                placeholder={intl.formatMessage(messages.eventNamePlaceholder)}
-                value={name}
-                onChange={onChangeName}
-              />
-            </FormGroup>
-            <FormGroup
-              labelText={<FormattedMessage id='compose_event.fields.description_label' defaultMessage='Event description' />}
-              hintText={<FormattedMessage id='compose_event.fields.description_hint' defaultMessage='Markdown syntax is supported' />}
-            >
-              <Textarea
-                autoComplete='off'
-                placeholder={intl.formatMessage(messages.eventDescriptionPlaceholder)}
-                value={description}
-                onChange={onChangeDescription}
-              />
-            </FormGroup>
-            <FormGroup
-              labelText={<FormattedMessage id='compose_event.fields.location_label' defaultMessage='Event location' />}
-            >
-              {location ? renderLocation() : (
-                <LocationSearch
-                  onSelected={onChangeLocation}
-                />
-              )}
-            </FormGroup>
-            <FormGroup
-              labelText={<FormattedMessage id='compose_event.fields.start_time_label' defaultMessage='Event start date' />}
-            >
-              <BundleContainer fetchComponent={DatePicker}>
-                {Component => (<Component
-                  showTimeSelect
-                  dateFormat='MMMM d, yyyy h:mm aa'
-                  timeIntervals={15}
-                  wrapperClassName='react-datepicker-wrapper'
-                  placeholderText={intl.formatMessage(messages.eventStartTimePlaceholder)}
-                  filterDate={isCurrentOrFutureDate}
-                  selected={startTime}
-                  onChange={onChangeStartTime}
-                />)}
-              </BundleContainer>
-            </FormGroup>
-            <HStack alignItems='center' space={2}>
-              <Toggle
-                icons={false}
-                checked={!!endTime}
-                onChange={onChangeHasEndTime}
-              />
-              <Text tag='span' theme='muted'>
-                <FormattedMessage id='compose_event.fields.has_end_time' defaultMessage='The event has end date' />
-              </Text>
-            </HStack>
-            {endTime && (
-              <FormGroup
-                labelText={<FormattedMessage id='compose_event.fields.end_time_label' defaultMessage='Event end date' />}
-              >
-                <BundleContainer fetchComponent={DatePicker}>
-                  {Component => (<Component
-                    showTimeSelect
-                    dateFormat='MMMM d, yyyy h:mm aa'
-                    timeIntervals={15}
-                    wrapperClassName='react-datepicker-wrapper'
-                    placeholderText={intl.formatMessage(messages.eventEndTimePlaceholder)}
-                    filterDate={isCurrentOrFutureDate}
-                    selected={endTime}
-                    onChange={onChangeEndTime}
-                  />)}
-                </BundleContainer>
-              </FormGroup>
-            )}
-            <HStack alignItems='center' space={2}>
-              <Toggle
-                icons={false}
-                checked={approvalRequired}
-                onChange={onChangeApprovalRequired}
-              />
-              <Text tag='span' theme='muted'>
-                <FormattedMessage id='compose_event.fields.approval_required' defaultMessage='I want to approve participation requests manually' />
-              </Text>
-            </HStack>
-          </Form>
-        ) : accounts ? (
-          <Stack space={3}>
-            {accounts.size > 0 ? (
-              accounts.map(({ account, participation_message }) =>
-                <Account key={account} eventId={id!} id={account} participationMessage={participation_message} />,
-              )
-            ) : (
-              <FormattedMessage id='empty_column.event_participant_requests' defaultMessage='There are no pending event participation requests.' />
-            )}
-          </Stack>
-        ) : <Spinner />}
+        {body}
       </Stack>
     </Modal>
   );

From 6b5e802bd049611ebca5c1e1d31356880ff4b490 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sat, 12 Nov 2022 23:30:46 +0100
Subject: [PATCH 15/32] Add 'create event' button to profile dropdown for now
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../components/ui/textarea/textarea.tsx       |  2 +-
 .../features/account/components/header.tsx    | 12 +++++++++
 .../ui/components/modals/join-event-modal.tsx | 26 +++++++++----------
 .../modals/report-modal/report-modal.tsx      |  2 --
 app/soapbox/normalizers/admin_report.ts       |  2 +-
 .../service_worker/web_push_notifications.ts  |  2 +-
 app/soapbox/utils/features.ts                 |  2 ++
 7 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/app/soapbox/components/ui/textarea/textarea.tsx b/app/soapbox/components/ui/textarea/textarea.tsx
index 43d6efd20..e93229e6a 100644
--- a/app/soapbox/components/ui/textarea/textarea.tsx
+++ b/app/soapbox/components/ui/textarea/textarea.tsx
@@ -1,7 +1,7 @@
 import classNames from 'clsx';
 import React from 'react';
 
-interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'required' | 'disabled' | 'rows' | 'readOnly'> {
+interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'onKeyDown' | 'required' | 'disabled' | 'rows' | 'readOnly'> {
   /** Put the cursor into the input on mount. */
   autoFocus?: boolean,
   /** The initial text in the input. */
diff --git a/app/soapbox/features/account/components/header.tsx b/app/soapbox/features/account/components/header.tsx
index 21e44f33b..91e2685b7 100644
--- a/app/soapbox/features/account/components/header.tsx
+++ b/app/soapbox/features/account/components/header.tsx
@@ -66,6 +66,7 @@ const messages = defineMessages({
   removeFromFollowersConfirm: { id: 'confirmations.remove_from_followers.confirm', defaultMessage: 'Remove' },
   userEndorsed: { id: 'account.endorse.success', defaultMessage: 'You are now featuring @{acct} on your profile' },
   userUnendorsed: { id: 'account.unendorse.success', defaultMessage: 'You are no longer featuring @{acct}' },
+  composeEvent: { od: 'navigation.compose_event', defaultMessage: 'Create new event' },
 });
 
 interface IHeader {
@@ -207,6 +208,10 @@ const Header: React.FC<IHeader> = ({ account }) => {
     history.push('/search');
   };
 
+  const onComposeEvent = () => {
+    dispatch(openModal('COMPOSE_EVENT'));
+  };
+
   const onAvatarClick = () => {
     const avatar = normalizeAttachment({
       type: 'image',
@@ -291,6 +296,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
         to: '/blocks',
         icon: require('@tabler/icons/ban.svg'),
       });
+      if (features.events) {
+        menu.push({
+          text: intl.formatMessage(messages.composeEvent),
+          action: onComposeEvent,
+          icon: require('@tabler/icons/calendar.svg'),
+        });
+      }
     } else {
       menu.push({
         text: intl.formatMessage(messages.mention, { name: account.username }),
diff --git a/app/soapbox/features/ui/components/modals/join-event-modal.tsx b/app/soapbox/features/ui/components/modals/join-event-modal.tsx
index e7014bbbf..a8f0e7368 100644
--- a/app/soapbox/features/ui/components/modals/join-event-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/join-event-modal.tsx
@@ -3,10 +3,11 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { joinEvent } from 'soapbox/actions/events';
 import { closeModal } from 'soapbox/actions/modals';
-import { Modal, Text } from 'soapbox/components/ui';
+import { FormGroup, Modal, Textarea } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
 
 const messages = defineMessages({
+  hint: { id: 'join_event.hint', defaultMessage: 'You can tell the organizer why do you want to participate in this event:' },
   placeholder: { id: 'join_event.placeholder', defaultMessage: 'Message to organizer' },
   join: { id: 'join_event.join', defaultMessage: 'Request join' },
 });
@@ -51,19 +52,16 @@ const AccountNoteModal: React.FC<IAccountNoteModal> = ({ statusId }) => {
       confirmationText={intl.formatMessage(messages.join)}
       confirmationDisabled={isSubmitting}
     >
-      <Text theme='muted'>
-        <FormattedMessage id='join_event.hint' defaultMessage='You can tell the organizer why do you want to participate in this event:' />
-      </Text>
-
-      <textarea
-        className='setting-text light'
-        placeholder={intl.formatMessage(messages.placeholder)}
-        value={participationMessage}
-        onChange={handleChange}
-        onKeyDown={handleKeyDown}
-        disabled={isSubmitting}
-        autoFocus
-      />
+      <FormGroup labelText={intl.formatMessage(messages.hint)}>
+        <Textarea
+          placeholder={intl.formatMessage(messages.placeholder)}
+          value={participationMessage}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          disabled={isSubmitting}
+          autoFocus
+        />
+      </FormGroup>
     </Modal>
   );
 };
diff --git a/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx b/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
index f0e5d562b..77bfe4c98 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
@@ -20,8 +20,6 @@ const messages = defineMessages({
   blankslate: { id: 'report.reason.blankslate', defaultMessage: 'You have removed all statuses from being selected.' },
   done: { id: 'report.done', defaultMessage: 'Done' },
   next: { id: 'report.next', defaultMessage: 'Next' },
-  close: { id: 'lightbox.close', defaultMessage: 'Close' },
-  placeholder: { id: 'report.placeholder', defaultMessage: 'Additional comments' },
   submit: { id: 'report.submit', defaultMessage: 'Submit' },
 });
 
diff --git a/app/soapbox/normalizers/admin_report.ts b/app/soapbox/normalizers/admin_report.ts
index 23a60bc04..acf6786b1 100644
--- a/app/soapbox/normalizers/admin_report.ts
+++ b/app/soapbox/normalizers/admin_report.ts
@@ -24,7 +24,7 @@ export const AdminReportRecord = ImmutableRecord({
   rules: ImmutableList<string>(),
   statuses: ImmutableList<EmbeddedEntity<Status>>(),
   target_account: null as EmbeddedEntity<Account | ReducerAccount>,
-  updated_at:  new Date(),
+  updated_at: new Date(),
 });
 
 const normalizePleromaReport = (report: ImmutableMap<string, any>) => {
diff --git a/app/soapbox/service_worker/web_push_notifications.ts b/app/soapbox/service_worker/web_push_notifications.ts
index fe3d8e652..af14c711a 100644
--- a/app/soapbox/service_worker/web_push_notifications.ts
+++ b/app/soapbox/service_worker/web_push_notifications.ts
@@ -140,7 +140,7 @@ const handlePush = (event: PushEvent) => {
   event.waitUntil(
     fetchFromApi(`/api/v1/notifications/${notification_id}`, 'get', access_token).then(notification => {
       const options: ExtendedNotificationOptions = {
-        title: formatMessage(`notification.${notification.type}`, preferred_locale, { name: notification.account.display_name.length > 0 ? notification.account.display_name : notification.account.username }),
+        title:     formatMessage(`notification.${notification.type}`, preferred_locale, { name: notification.account.display_name.length > 0 ? notification.account.display_name : notification.account.username }),
         body:      notification.status && htmlToPlainText(notification.status.content),
         icon:      notification.account.avatar_static,
         timestamp: notification.created_at && Number(new Date(notification.created_at)),
diff --git a/app/soapbox/utils/features.ts b/app/soapbox/utils/features.ts
index 3cb7e98dc..6a16295ed 100644
--- a/app/soapbox/utils/features.ts
+++ b/app/soapbox/utils/features.ts
@@ -279,6 +279,8 @@ const getInstanceFeatures = (instance: Instance) => {
      */
     ethereumLogin: v.software === MITRA,
 
+    events: v.software === PLEROMA && v.build === SOAPBOX && gte(v.version, '2.4.50'),
+
     /**
      * Ability to address recipients of a status explicitly (with `to`).
      * @see POST /api/v1/statuses

From 91103fe400d291474d514b32d465142340c7ce39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sat, 26 Nov 2022 20:13:14 +0100
Subject: [PATCH 16/32] Events route
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/features/events/index.tsx          | 18 ++++++++++++++++++
 app/soapbox/features/ui/index.tsx              |  2 ++
 .../features/ui/util/async-components.ts       |  4 ++++
 3 files changed, 24 insertions(+)
 create mode 100644 app/soapbox/features/events/index.tsx

diff --git a/app/soapbox/features/events/index.tsx b/app/soapbox/features/events/index.tsx
new file mode 100644
index 000000000..b1aebe0e2
--- /dev/null
+++ b/app/soapbox/features/events/index.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { Column } from 'soapbox/components/ui';
+
+const messages = defineMessages({
+  title: { id: 'column.events', defaultMessage: 'Events' },
+});
+
+const Events = () => {
+  const intl = useIntl();
+
+  return (
+    <Column label={intl.formatMessage(messages.title)} />
+  );
+};
+
+export default Events;
diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx
index 79f35b7e5..d0fa5ad59 100644
--- a/app/soapbox/features/ui/index.tsx
+++ b/app/soapbox/features/ui/index.tsx
@@ -116,6 +116,7 @@ import {
   EventInformation,
   EventDiscussion,
   ServiceWorkerInfo,
+  Events,
 } from './util/async-components';
 import { WrappedRoute } from './util/react_router_helpers';
 
@@ -265,6 +266,7 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {
       <WrappedRoute path='/search' page={DefaultPage} component={Search} content={children} />
       {features.suggestions && <WrappedRoute path='/suggestions' publicRoute page={DefaultPage} component={FollowRecommendations} content={children} />}
       {features.profileDirectory && <WrappedRoute path='/directory' publicRoute page={DefaultPage} component={Directory} content={children} />}
+      {features.events && <WrappedRoute path='/events' page={DefaultPage} component={Events} content={children} />}
 
       {features.chats && <WrappedRoute path='/chats' exact page={DefaultPage} component={ChatIndex} content={children} />}
       {features.chats && <WrappedRoute path='/chats/:chatId' page={DefaultPage} component={ChatRoom} content={children} />}
diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts
index 94f8609f7..6cd217960 100644
--- a/app/soapbox/features/ui/util/async-components.ts
+++ b/app/soapbox/features/ui/util/async-components.ts
@@ -533,3 +533,7 @@ export function EventMapModal() {
 export function EventParticipantsModal() {
   return import(/* webpackChunkName: "modals/event-participants-modal" */'../components/modals/event-participants-modal');
 }
+
+export function Events() {
+  return import(/* webpackChunkName: "features/events" */'../../events');
+}

From c61dcddd812a32b99542541007fc7e12708dccdd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sat, 26 Nov 2022 22:15:58 +0100
Subject: [PATCH 17/32] Events page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/actions/events.ts                 | 59 ++++++++++++-
 app/soapbox/components/event-preview.tsx      |  2 +-
 app/soapbox/components/ui/card/card.tsx       |  9 +-
 .../features/account/components/header.tsx    | 12 ---
 .../event/components/event-header.tsx         |  2 +-
 .../features/event/event-discussion.tsx       |  2 +-
 .../events/components/event-carousel.tsx      | 85 +++++++++++++++++++
 app/soapbox/features/events/index.tsx         | 58 ++++++++++++-
 .../components/placeholder-event-preview.tsx  | 29 +++++++
 .../features/ui/components/link-footer.tsx    |  3 +
 app/soapbox/reducers/status-lists.ts          | 22 +++++
 11 files changed, 261 insertions(+), 22 deletions(-)
 create mode 100644 app/soapbox/features/events/components/event-carousel.tsx
 create mode 100644 app/soapbox/features/placeholder/components/placeholder-event-preview.tsx

diff --git a/app/soapbox/actions/events.ts b/app/soapbox/actions/events.ts
index cf911e385..28d5b9db7 100644
--- a/app/soapbox/actions/events.ts
+++ b/app/soapbox/actions/events.ts
@@ -4,7 +4,7 @@ import api, { getLinks } from 'soapbox/api';
 import { formatBytes } from 'soapbox/utils/media';
 import resizeImage from 'soapbox/utils/resize-image';
 
-import { importFetchedAccounts, importFetchedStatus } from './importer';
+import { importFetchedAccounts, importFetchedStatus, importFetchedStatuses } from './importer';
 import { fetchMedia, uploadMedia } from './media';
 import { closeModal, openModal } from './modals';
 import snackbar from './snackbar';
@@ -76,6 +76,13 @@ const EVENT_COMPOSE_CANCEL = 'EVENT_COMPOSE_CANCEL';
 
 const EVENT_FORM_SET = 'EVENT_FORM_SET';
 
+const RECENT_EVENTS_FETCH_REQUEST = 'RECENT_EVENTS_FETCH_REQUEST';
+const RECENT_EVENTS_FETCH_SUCCESS = 'RECENT_EVENTS_FETCH_SUCCESS';
+const RECENT_EVENTS_FETCH_FAIL = 'RECENT_EVENTS_FETCH_FAIL';
+const JOINED_EVENTS_FETCH_REQUEST = 'JOINED_EVENTS_FETCH_REQUEST';
+const JOINED_EVENTS_FETCH_SUCCESS = 'JOINED_EVENTS_FETCH_SUCCESS';
+const JOINED_EVENTS_FETCH_FAIL = 'JOINED_EVENTS_FETCH_FAIL';
+
 const noOp = () => new Promise(f => f(undefined));
 
 const messages = defineMessages({
@@ -579,6 +586,48 @@ const editEvent = (id: string) => (dispatch: AppDispatch, getState: () => RootSt
   });
 };
 
+const fetchRecentEvents = () =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    if (getState().status_lists.get('recent_events')?.isLoading) {
+      return;
+    }
+
+    dispatch({ type: RECENT_EVENTS_FETCH_REQUEST });
+
+    api(getState).get('/api/v1/timelines/public?only_events=true').then(response => {
+      const next = getLinks(response).refs.find(link => link.rel === 'next');
+      dispatch(importFetchedStatuses(response.data));
+      dispatch({
+        type: RECENT_EVENTS_FETCH_SUCCESS,
+        statuses: response.data,
+        next: next ? next.uri : null,
+      });
+    }).catch(error => {
+      dispatch({ type: RECENT_EVENTS_FETCH_FAIL,  error });
+    });
+  };
+
+const fetchJoinedEvents = () =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    if (getState().status_lists.get('joined_events')?.isLoading) {
+      return;
+    }
+
+    dispatch({ type: JOINED_EVENTS_FETCH_REQUEST });
+
+    api(getState).get('/api/v1/pleroma/events/joined_events').then(response => {
+      const next = getLinks(response).refs.find(link => link.rel === 'next');
+      dispatch(importFetchedStatuses(response.data));
+      dispatch({
+        type: JOINED_EVENTS_FETCH_SUCCESS,
+        statuses: response.data,
+        next: next ? next.uri : null,
+      });
+    }).catch(error => {
+      dispatch({ type: JOINED_EVENTS_FETCH_FAIL,  error });
+    });
+  };
+
 export {
   LOCATION_SEARCH_REQUEST,
   LOCATION_SEARCH_SUCCESS,
@@ -624,6 +673,12 @@ export {
   EVENT_PARTICIPATION_REQUEST_REJECT_FAIL,
   EVENT_COMPOSE_CANCEL,
   EVENT_FORM_SET,
+  RECENT_EVENTS_FETCH_REQUEST,
+  RECENT_EVENTS_FETCH_SUCCESS,
+  RECENT_EVENTS_FETCH_FAIL,
+  JOINED_EVENTS_FETCH_REQUEST,
+  JOINED_EVENTS_FETCH_SUCCESS,
+  JOINED_EVENTS_FETCH_FAIL,
   locationSearch,
   changeEditEventName,
   changeEditEventDescription,
@@ -677,4 +732,6 @@ export {
   fetchEventIcs,
   cancelEventCompose,
   editEvent,
+  fetchRecentEvents,
+  fetchJoinedEvents,
 };
diff --git a/app/soapbox/components/event-preview.tsx b/app/soapbox/components/event-preview.tsx
index 3b4e27031..74dd69021 100644
--- a/app/soapbox/components/event-preview.tsx
+++ b/app/soapbox/components/event-preview.tsx
@@ -35,7 +35,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction }
   const banner = status.media_attachments?.find(({ description }) => description === 'Banner');
 
   return (
-    <div className={classNames('rounded-lg bg-gray-100 dark:bg-primary-800 relative overflow-hidden', className)}>
+    <div className={classNames('w-full rounded-lg bg-gray-100 dark:bg-primary-800 relative overflow-hidden', className)}>
       <div className='absolute top-28 right-3'>
         {!hideAction && (account.id === me ? (
           <Button
diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx
index 2fb89315b..e66bb48f8 100644
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/app/soapbox/components/ui/card/card.tsx
@@ -87,9 +87,14 @@ const CardTitle: React.FC<ICardTitle> = ({ title }): JSX.Element => (
   <Text size='xl' weight='bold' tag='h1' data-testid='card-title' truncate>{title}</Text>
 );
 
+interface ICardBody {
+  /** Classnames for the <div> element. */
+  className?: string
+}
+
 /** A card's body. */
-const CardBody: React.FC = ({ children }): JSX.Element => (
-  <div data-testid='card-body'>{children}</div>
+const CardBody: React.FC<ICardBody> = ({ className, children }): JSX.Element => (
+  <div data-testid='card-body' className={className}>{children}</div>
 );
 
 export { Card, CardHeader, CardTitle, CardBody };
diff --git a/app/soapbox/features/account/components/header.tsx b/app/soapbox/features/account/components/header.tsx
index 5d42164a6..af6e3d079 100644
--- a/app/soapbox/features/account/components/header.tsx
+++ b/app/soapbox/features/account/components/header.tsx
@@ -68,7 +68,6 @@ const messages = defineMessages({
   userUnendorsed: { id: 'account.unendorse.success', defaultMessage: 'You are no longer featuring @{acct}' },
   profileExternal: { id: 'account.profile_external', defaultMessage: 'View profile on {domain}' },
   header: { id: 'account.header.alt', defaultMessage: 'Profile header' },
-  composeEvent: { od: 'navigation.compose_event', defaultMessage: 'Create new event' },
 });
 
 interface IHeader {
@@ -214,10 +213,6 @@ const Header: React.FC<IHeader> = ({ account }) => {
     history.push('/search');
   };
 
-  const onComposeEvent = () => {
-    dispatch(openModal('COMPOSE_EVENT'));
-  };
-
   const onAvatarClick = () => {
     const avatar = normalizeAttachment({
       type: 'image',
@@ -302,13 +297,6 @@ const Header: React.FC<IHeader> = ({ account }) => {
         to: '/blocks',
         icon: require('@tabler/icons/ban.svg'),
       });
-      if (features.events) {
-        menu.push({
-          text: intl.formatMessage(messages.composeEvent),
-          action: onComposeEvent,
-          icon: require('@tabler/icons/calendar.svg'),
-        });
-      }
     } else {
       menu.push({
         text: intl.formatMessage(messages.mention, { name: account.username }),
diff --git a/app/soapbox/features/event/components/event-header.tsx b/app/soapbox/features/event/components/event-header.tsx
index 60bd60910..6a3f12611 100644
--- a/app/soapbox/features/event/components/event-header.tsx
+++ b/app/soapbox/features/event/components/event-header.tsx
@@ -342,7 +342,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
               <StillImage
                 src={banner.url}
                 alt={intl.formatMessage(messages.bannerHeader)}
-                className='absolute inset-0 object-cover md:rounded-t-xl'
+                className='absolute inset-0 object-cover md:rounded-t-xl h-full'
               />
             </a>
           )}
diff --git a/app/soapbox/features/event/event-discussion.tsx b/app/soapbox/features/event/event-discussion.tsx
index a5fd1164b..127bb6cc2 100644
--- a/app/soapbox/features/event/event-discussion.tsx
+++ b/app/soapbox/features/event/event-discussion.tsx
@@ -175,7 +175,7 @@ const EventDiscussion: React.FC<IEventDiscussion> = (props) => {
 
   return (
     <Stack space={2}>
-      {me && <div className='sm:p-2 pt-0 border-b border-solid border-gray-200 dark:border-gray-800'>
+      {me && <div className='p-2 pt-0 border-b border-solid border-gray-200 dark:border-gray-800'>
         <ComposeForm id={`reply:${status.id}`} autoFocus={false} event={status.id} />
       </div>}
       <div ref={node} className='thread p-0 sm:p-2 shadow-none'>
diff --git a/app/soapbox/features/events/components/event-carousel.tsx b/app/soapbox/features/events/components/event-carousel.tsx
new file mode 100644
index 000000000..5682c1a15
--- /dev/null
+++ b/app/soapbox/features/events/components/event-carousel.tsx
@@ -0,0 +1,85 @@
+import React, { useCallback, useState } from 'react';
+import { Link } from 'react-router-dom';
+import ReactSwipeableViews from 'react-swipeable-views';
+
+import EventPreview from 'soapbox/components/event-preview';
+import { Card, Icon } from 'soapbox/components/ui';
+import { useAppSelector } from 'soapbox/hooks';
+import { makeGetStatus } from 'soapbox/selectors';
+
+import PlaceholderEventPreview from '../../placeholder/components/placeholder-event-preview';
+
+import type { OrderedSet as ImmutableOrderedSet } from 'immutable';
+
+const Event = ({ id }: { id: string }) => {
+  const getStatus = useCallback(makeGetStatus(), []);
+  const status = useAppSelector(state => getStatus(state, { id }));
+
+  if (!status) return null;
+
+  return (
+    <Link
+      className='w-full px-1'
+      to={`/@${status.getIn(['account', 'acct'])}/events/${status.id}`}
+    >
+      <EventPreview status={status} />
+    </Link>
+  );
+};
+
+interface IEventCarousel {
+  statusIds: ImmutableOrderedSet<string>
+  isLoading?: boolean | null
+  emptyMessage: React.ReactNode
+}
+
+const EventCarousel: React.FC<IEventCarousel> = ({ statusIds, isLoading, emptyMessage }) => {
+  const [index, setIndex] = useState(0);
+
+  const handleChangeIndex = (index: number) => {
+    setIndex(index % statusIds.size);
+  };
+
+  if (isLoading) {
+    return <PlaceholderEventPreview />;
+  }
+
+  if (statusIds.size === 0) {
+    return (
+      <Card variant='rounded' size='lg'>
+        {emptyMessage}
+      </Card>
+    );
+  }
+  return (
+    <div className='relative -mx-1'>
+      {index !== 0 && (
+        <div className='z-10 absolute left-3 top-1/2 -mt-4'>
+          <button
+            data-testid='prev-page'
+            onClick={() => handleChangeIndex(index - 1)}
+            className='bg-white/50 dark:bg-gray-900/50 backdrop-blur rounded-full h-8 w-8 flex items-center justify-center'
+          >
+            <Icon src={require('@tabler/icons/chevron-left.svg')} className='text-black dark:text-white h-6 w-6' />
+          </button>
+        </div>
+      )}
+      <ReactSwipeableViews animateHeight index={index} onChangeIndex={handleChangeIndex}>
+        {statusIds.map(statusId => <Event key={statusId} id={statusId} />)}
+      </ReactSwipeableViews>
+      {index !== statusIds.size - 1 && (
+        <div className='z-10 absolute right-3 top-1/2 -mt-4'>
+          <button
+            data-testid='next-page'
+            onClick={() => handleChangeIndex(index + 1)}
+            className='bg-white/50 dark:bg-gray-900/50 backdrop-blur rounded-full h-8 w-8 flex items-center justify-center'
+          >
+            <Icon src={require('@tabler/icons/chevron-right.svg')} className='text-black dark:text-white h-6 w-6' />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default EventCarousel;
diff --git a/app/soapbox/features/events/index.tsx b/app/soapbox/features/events/index.tsx
index b1aebe0e2..8115f10e0 100644
--- a/app/soapbox/features/events/index.tsx
+++ b/app/soapbox/features/events/index.tsx
@@ -1,7 +1,12 @@
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import React, { useEffect, useState } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { Column } from 'soapbox/components/ui';
+import { fetchJoinedEvents, fetchRecentEvents } from 'soapbox/actions/events';
+import { openModal } from 'soapbox/actions/modals';
+import { Button, CardBody, CardHeader, CardTitle, Column, HStack } from 'soapbox/components/ui';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+
+import EventCarousel from './components/event-carousel';
 
 const messages = defineMessages({
   title: { id: 'column.events', defaultMessage: 'Events' },
@@ -10,8 +15,53 @@ const messages = defineMessages({
 const Events = () => {
   const intl = useIntl();
 
+  const dispatch = useAppDispatch();
+
+  const recentEvents = useAppSelector((state) => state.status_lists.get('recent_events')!.items);
+  const recentEventsLoading = useAppSelector((state) => state.status_lists.get('recent_events')!.isLoading);
+  const joinedEvents = useAppSelector((state) => state.status_lists.get('joined_events')!.items);
+  const joinedEventsLoading = useAppSelector((state) => state.status_lists.get('joined_events')!.isLoading);
+
+  const onComposeEvent = () => {
+    dispatch(openModal('COMPOSE_EVENT'));
+  };
+
+  useEffect(() => {
+    dispatch(fetchRecentEvents());
+    dispatch(fetchJoinedEvents());
+  }, []);
+
   return (
-    <Column label={intl.formatMessage(messages.title)} />
+    <Column label={intl.formatMessage(messages.title)}>
+      <HStack className='mb-4' space={2} justifyContent='between'>
+        <CardTitle title='Recent events' />
+        <Button
+          className='ml-auto'
+          theme='primary'
+          size='sm'
+          onClick={onComposeEvent}
+        >
+          Create event
+        </Button>
+      </HStack>
+      <CardBody className='mb-2'>
+        <EventCarousel
+          statusIds={recentEvents}
+          isLoading={recentEventsLoading}
+          emptyMessage={<FormattedMessage id='events.recent_events.empty' defaultMessage='There are no public events yet.' />}
+        />
+      </CardBody>
+      <CardHeader>
+        <CardTitle title='Joined events' />
+      </CardHeader>
+      <CardBody>
+        <EventCarousel
+          statusIds={joinedEvents}
+          isLoading={joinedEventsLoading}
+          emptyMessage={<FormattedMessage id='events.joined_events.empty' defaultMessage="You haven't joined any event yet." />}
+        />
+      </CardBody>
+    </Column>
   );
 };
 
diff --git a/app/soapbox/features/placeholder/components/placeholder-event-preview.tsx b/app/soapbox/features/placeholder/components/placeholder-event-preview.tsx
new file mode 100644
index 000000000..ad706c55e
--- /dev/null
+++ b/app/soapbox/features/placeholder/components/placeholder-event-preview.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { Stack, Text } from 'soapbox/components/ui';
+
+import { generateText, randomIntFromInterval } from '../utils';
+
+const PlaceholderEventPreview = () => {
+  const eventNameLength = randomIntFromInterval(5, 25);
+  const nameLength = randomIntFromInterval(5, 15);
+
+  return (
+    <div className='w-full rounded-lg bg-gray-100 dark:bg-primary-800 relative overflow-hidden animate-pulse text-primary-50 dark:text-primary-800'>
+      <div className='bg-primary-200 dark:bg-gray-600 h-40'>
+        {/* <img className='h-full w-full object-cover' src={banner.url} alt={intl.formatMessage(messages.bannerHeader)} />} */}
+      </div>
+      <Stack className='p-2.5' space={2}>
+        <Text weight='semibold'>{generateText(eventNameLength)}</Text>
+
+        <div className='flex gap-y-1 gap-x-2 flex-wrap text-gray-700 dark:text-gray-600'>
+          <span>{generateText(nameLength)}</span>
+          <span>{generateText(nameLength)}</span>
+          <span>{generateText(nameLength)}</span>
+        </div>
+      </Stack>
+    </div>
+  );
+};
+
+export default PlaceholderEventPreview;
diff --git a/app/soapbox/features/ui/components/link-footer.tsx b/app/soapbox/features/ui/components/link-footer.tsx
index bc1c67fd3..5383be4c9 100644
--- a/app/soapbox/features/ui/components/link-footer.tsx
+++ b/app/soapbox/features/ui/components/link-footer.tsx
@@ -43,6 +43,9 @@ const LinkFooter: React.FC = (): JSX.Element => {
           {features.profileDirectory && (
             <FooterLink to='/directory'><FormattedMessage id='navigation_bar.profile_directory' defaultMessage='Profile directory' /></FooterLink>
           )}
+          {features.events && (
+            <FooterLink to='/events'><FormattedMessage id='navigation_bar.events' defaultMessage='Events' /></FooterLink>
+          )}
           <FooterLink to='/blocks'><FormattedMessage id='navigation_bar.blocks' defaultMessage='Blocks' /></FooterLink>
           <FooterLink to='/mutes'><FormattedMessage id='navigation_bar.mutes' defaultMessage='Mutes' /></FooterLink>
           {features.filters && (
diff --git a/app/soapbox/reducers/status-lists.ts b/app/soapbox/reducers/status-lists.ts
index 3a19c5eea..1f743ea16 100644
--- a/app/soapbox/reducers/status-lists.ts
+++ b/app/soapbox/reducers/status-lists.ts
@@ -12,6 +12,14 @@ import {
   BOOKMARKED_STATUSES_EXPAND_SUCCESS,
   BOOKMARKED_STATUSES_EXPAND_FAIL,
 } from '../actions/bookmarks';
+import {
+  RECENT_EVENTS_FETCH_REQUEST,
+  RECENT_EVENTS_FETCH_SUCCESS,
+  RECENT_EVENTS_FETCH_FAIL,
+  JOINED_EVENTS_FETCH_REQUEST,
+  JOINED_EVENTS_FETCH_SUCCESS,
+  JOINED_EVENTS_FETCH_FAIL,
+} from '../actions/events';
 import {
   FAVOURITED_STATUSES_FETCH_REQUEST,
   FAVOURITED_STATUSES_FETCH_SUCCESS,
@@ -68,6 +76,8 @@ const initialState: State = ImmutableMap({
   bookmarks: StatusListRecord(),
   pins: StatusListRecord(),
   scheduled_statuses: StatusListRecord(),
+  recent_events: StatusListRecord(),
+  joined_events: StatusListRecord(),
 });
 
 const getStatusId = (status: string | StatusEntity) => typeof status === 'string' ? status : status.id;
@@ -168,6 +178,18 @@ export default function statusLists(state = initialState, action: AnyAction) {
     case SCHEDULED_STATUS_CANCEL_REQUEST:
     case SCHEDULED_STATUS_CANCEL_SUCCESS:
       return removeOneFromList(state, 'scheduled_statuses', action.id || action.status.id);
+    case RECENT_EVENTS_FETCH_REQUEST:
+      return setLoading(state, 'recent_events', true);
+    case RECENT_EVENTS_FETCH_FAIL:
+      return setLoading(state, 'recent_events', false);
+    case RECENT_EVENTS_FETCH_SUCCESS:
+      return normalizeList(state, 'recent_events', action.statuses, action.next);
+    case JOINED_EVENTS_FETCH_REQUEST:
+      return setLoading(state, 'joined_events', true);
+    case JOINED_EVENTS_FETCH_FAIL:
+      return setLoading(state, 'joined_events', false);
+    case JOINED_EVENTS_FETCH_SUCCESS:
+      return normalizeList(state, 'joined_events', action.statuses, action.next);
     default:
       return state;
   }

From 6465423ccb38f828f33ba96c34cf3473fc05c05d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 27 Nov 2022 23:29:45 +0100
Subject: [PATCH 18/32] Cleanup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/event-preview.tsx      | 42 ++++++++++++-------
 app/soapbox/components/status-media.tsx       | 13 ++----
 .../event/components/event-action-button.tsx  |  8 ++--
 .../event/components/event-header.tsx         |  6 +--
 .../features/event/event-information.tsx      | 28 +++++++------
 .../events/components/event-carousel.tsx      |  4 +-
 app/soapbox/features/events/index.tsx         |  2 +-
 .../components/placeholder-event-preview.tsx  |  4 +-
 app/soapbox/normalizers/status.ts             | 26 ++++++++++--
 app/soapbox/reducers/compose_event.ts         |  4 +-
 10 files changed, 81 insertions(+), 56 deletions(-)

diff --git a/app/soapbox/components/event-preview.tsx b/app/soapbox/components/event-preview.tsx
index 74dd69021..2ee688e05 100644
--- a/app/soapbox/components/event-preview.tsx
+++ b/app/soapbox/components/event-preview.tsx
@@ -19,12 +19,13 @@ const messages = defineMessages({
 });
 
 interface IEventPreview {
-  status: StatusEntity,
-  className?: string,
-  hideAction?: boolean;
+  status: StatusEntity
+  className?: string
+  hideAction?: boolean
+  floatingAction?: boolean
 }
 
-const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction }) => {
+const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction, floatingAction = true }) => {
   const intl = useIntl();
 
   const me = useAppSelector((state) => state.me);
@@ -32,26 +33,37 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction }
   const account = status.account as AccountEntity;
   const event = status.event!;
 
-  const banner = status.media_attachments?.find(({ description }) => description === 'Banner');
+  const banner = event.banner;
+
+  const action = !hideAction && (account.id === me ? (
+    <Button
+      size='sm'
+      theme={floatingAction ? 'secondary' : 'primary'}
+      to={`/@${account.acct}/events/${status.id}`}
+    >
+      <FormattedMessage id='event.manage' defaultMessage='Manage' />
+    </Button>
+  ) : (
+    <EventActionButton
+      status={status}
+      theme={floatingAction ? 'secondary' : 'primary'}
+    />
+  ));
 
   return (
     <div className={classNames('w-full rounded-lg bg-gray-100 dark:bg-primary-800 relative overflow-hidden', className)}>
       <div className='absolute top-28 right-3'>
-        {!hideAction && (account.id === me ? (
-          <Button
-            size='sm'
-            theme='secondary'
-            to={`/@${account.acct}/events/${status.id}`}
-          >
-            <FormattedMessage id='event.manage' defaultMessage='Manage' />
-          </Button>
-        ) : <EventActionButton status={status} />)}
+        {floatingAction && action}
       </div>
       <div className='bg-primary-200 dark:bg-gray-600 h-40'>
         {banner && <img className='h-full w-full object-cover' src={banner.url} alt={intl.formatMessage(messages.bannerHeader)} />}
       </div>
       <Stack className='p-2.5' space={2}>
-        <Text weight='semibold'>{event.name}</Text>
+        <HStack space={2} alignItems='center' justifyContent='between'>
+          <Text weight='semibold' truncate>{event.name}</Text>
+
+          {!floatingAction && action}
+        </HStack>
 
         <div className='flex gap-y-1 gap-x-2 flex-wrap text-gray-700 dark:text-gray-600'>
           <HStack alignItems='center' space={2}>
diff --git a/app/soapbox/components/status-media.tsx b/app/soapbox/components/status-media.tsx
index a09ce171a..d1ca296e9 100644
--- a/app/soapbox/components/status-media.tsx
+++ b/app/soapbox/components/status-media.tsx
@@ -24,8 +24,6 @@ interface IStatusMedia {
   showMedia?: boolean,
   /** Callback when visibility is toggled (eg clicked through NSFW). */
   onToggleVisibility?: () => void,
-  /** Whether or not to hide image describer as 'Banner' */
-  excludeBanner?: boolean,
 }
 
 /** Render media attachments for a status. */
@@ -35,7 +33,6 @@ const StatusMedia: React.FC<IStatusMedia> = ({
   onClick,
   showMedia = true,
   onToggleVisibility = () => { },
-  excludeBanner = false,
 }) => {
   const dispatch = useAppDispatch();
   const settings = useSettings();
@@ -43,10 +40,8 @@ const StatusMedia: React.FC<IStatusMedia> = ({
 
   const [mediaWrapperWidth, setMediaWrapperWidth] = useState<number | undefined>(undefined);
 
-  const mediaAttachments = excludeBanner ? status.media_attachments.filter(({ description, pleroma }) => description !== 'Banner' && pleroma.get('mime_type') !== 'text/html') : status.media_attachments;
-
-  const size = mediaAttachments.size;
-  const firstAttachment = mediaAttachments.first();
+  const size = status.media_attachments.size;
+  const firstAttachment = status.media_attachments.first();
 
   let media: JSX.Element | null = null;
 
@@ -76,7 +71,7 @@ const StatusMedia: React.FC<IStatusMedia> = ({
     if (muted) {
       media = (
         <AttachmentThumbs
-          media={mediaAttachments}
+          media={status.media_attachments}
           onClick={onClick}
           sensitive={status.sensitive}
         />
@@ -147,7 +142,7 @@ const StatusMedia: React.FC<IStatusMedia> = ({
         <Bundle fetchComponent={MediaGallery} loading={renderLoadingMediaGallery}>
           {(Component: any) => (
             <Component
-              media={mediaAttachments}
+              media={status.media_attachments}
               sensitive={status.sensitive}
               height={285}
               onOpenMedia={openMedia}
diff --git a/app/soapbox/features/event/components/event-action-button.tsx b/app/soapbox/features/event/components/event-action-button.tsx
index cbc186759..1c86e0181 100644
--- a/app/soapbox/features/event/components/event-action-button.tsx
+++ b/app/soapbox/features/event/components/event-action-button.tsx
@@ -6,6 +6,7 @@ import { openModal } from 'soapbox/actions/modals';
 import { Button } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
+import type { ButtonThemes } from 'soapbox/components/ui/button/useButtonStyles';
 import type { Status as StatusEntity } from 'soapbox/types/entities';
 
 const messages = defineMessages({
@@ -14,10 +15,11 @@ const messages = defineMessages({
 });
 
 interface IEventAction {
-  status: StatusEntity,
+  status: StatusEntity
+  theme?: ButtonThemes
 }
 
-const EventActionButton: React.FC<IEventAction> = ({ status }) => {
+const EventActionButton: React.FC<IEventAction> = ({ status, theme = 'secondary' }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
@@ -86,7 +88,7 @@ const EventActionButton: React.FC<IEventAction> = ({ status }) => {
   return (
     <Button
       size='sm'
-      theme='secondary'
+      theme={theme}
       icon={buttonIcon}
       onClick={buttonAction}
       disabled={buttonDisabled}
diff --git a/app/soapbox/features/event/components/event-header.tsx b/app/soapbox/features/event/components/event-header.tsx
index 6a3f12611..6f59a49ea 100644
--- a/app/soapbox/features/event/components/event-header.tsx
+++ b/app/soapbox/features/event/components/event-header.tsx
@@ -1,3 +1,4 @@
+import { List as ImmutableList } from 'immutable';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
@@ -86,15 +87,14 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
 
   const account = status.account as AccountEntity;
   const event = status.event;
-  const banner = status.media_attachments?.find(({ description }) => description === 'Banner');
+  const banner = event.banner;
 
   const username = account.username;
 
   const handleHeaderClick: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
     e.stopPropagation();
 
-    const index = status.media_attachments!.findIndex(({ description }) => description === 'Banner');
-    dispatch(openModal('MEDIA', { media: status.media_attachments, index }));
+    dispatch(openModal('MEDIA', { media: ImmutableList([event.banner]) }));
   };
 
   const handleExportClick = () => {
diff --git a/app/soapbox/features/event/event-information.tsx b/app/soapbox/features/event/event-information.tsx
index dd9ce06e5..49382da25 100644
--- a/app/soapbox/features/event/event-information.tsx
+++ b/app/soapbox/features/event/event-information.tsx
@@ -4,8 +4,11 @@ import { FormattedDate, FormattedMessage } from 'react-intl';
 import { openModal } from 'soapbox/actions/modals';
 import { fetchStatus } from 'soapbox/actions/statuses';
 import MissingIndicator from 'soapbox/components/missing-indicator';
+import StatusContent from 'soapbox/components/status-content';
 import StatusMedia from 'soapbox/components/status-media';
+import TranslateButton from 'soapbox/components/translate-button';
 import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
+import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container';
 import { useAppDispatch, useAppSelector, useSettings } from 'soapbox/hooks';
 import { makeGetStatus } from 'soapbox/selectors';
 import { defaultMediaVisibility } from 'soapbox/utils/status';
@@ -107,10 +110,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
   }, [status]);
 
   const renderLinks = useCallback(() => {
-    const links = status?.media_attachments.filter(({ pleroma }) => pleroma.get('mime_type') === 'text/html');
-
-    if (!links?.size) return null;
-
+    if (!status.event?.links.size) return null;
 
     return (
       <Stack space={1}>
@@ -118,11 +118,11 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
           <FormattedMessage id='event.website' defaultMessage='External links' />
         </Text>
 
-        {links.map(link => (
+        {status.event.links.map(link => (
           <HStack space={2} alignItems='center'>
             <Icon src={require('@tabler/icons/link.svg')} />
-            <a href={link.remote_url || link.url} className='text-primary-600 dark:text-accent-blue hover:underline' target='_blank'>
-              {(link.remote_url || link.url).replace(/^https?:\/\//, '')}
+            <a href={link.url} className='text-primary-600 dark:text-accent-blue hover:underline' target='_blank'>
+              {link.url.replace(/^https?:\/\//, '')}
             </a>
           </HStack>
         ))}
@@ -143,21 +143,23 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
           <Text size='xl' weight='bold'>
             <FormattedMessage id='event.description' defaultMessage='Description' />
           </Text>
-          <Text
-            className='break-words status__content'
-            size='sm'
-            dangerouslySetInnerHTML={{ __html: status.contentHtml }}
-          />
+
+          <StatusContent status={status} collapsable={false} translatable />
+
+          <TranslateButton status={status} />
         </Stack>
       )}
 
       <StatusMedia
         status={status}
-        excludeBanner
         showMedia={showMedia}
         onToggleVisibility={handleToggleMediaVisibility}
       />
 
+      {status.quote && status.pleroma.get('quote_visible', true) && (
+        <QuotedStatus statusId={status.quote as string} />
+      )}
+
       {renderEventLocation()}
 
       {renderEventDate()}
diff --git a/app/soapbox/features/events/components/event-carousel.tsx b/app/soapbox/features/events/components/event-carousel.tsx
index 5682c1a15..3f47c9b2b 100644
--- a/app/soapbox/features/events/components/event-carousel.tsx
+++ b/app/soapbox/features/events/components/event-carousel.tsx
@@ -22,7 +22,7 @@ const Event = ({ id }: { id: string }) => {
       className='w-full px-1'
       to={`/@${status.getIn(['account', 'acct'])}/events/${status.id}`}
     >
-      <EventPreview status={status} />
+      <EventPreview status={status} floatingAction={false} />
     </Link>
   );
 };
@@ -56,7 +56,6 @@ const EventCarousel: React.FC<IEventCarousel> = ({ statusIds, isLoading, emptyMe
       {index !== 0 && (
         <div className='z-10 absolute left-3 top-1/2 -mt-4'>
           <button
-            data-testid='prev-page'
             onClick={() => handleChangeIndex(index - 1)}
             className='bg-white/50 dark:bg-gray-900/50 backdrop-blur rounded-full h-8 w-8 flex items-center justify-center'
           >
@@ -70,7 +69,6 @@ const EventCarousel: React.FC<IEventCarousel> = ({ statusIds, isLoading, emptyMe
       {index !== statusIds.size - 1 && (
         <div className='z-10 absolute right-3 top-1/2 -mt-4'>
           <button
-            data-testid='next-page'
             onClick={() => handleChangeIndex(index + 1)}
             className='bg-white/50 dark:bg-gray-900/50 backdrop-blur rounded-full h-8 w-8 flex items-center justify-center'
           >
diff --git a/app/soapbox/features/events/index.tsx b/app/soapbox/features/events/index.tsx
index 8115f10e0..039d60b69 100644
--- a/app/soapbox/features/events/index.tsx
+++ b/app/soapbox/features/events/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { fetchJoinedEvents, fetchRecentEvents } from 'soapbox/actions/events';
diff --git a/app/soapbox/features/placeholder/components/placeholder-event-preview.tsx b/app/soapbox/features/placeholder/components/placeholder-event-preview.tsx
index ad706c55e..486b0af0c 100644
--- a/app/soapbox/features/placeholder/components/placeholder-event-preview.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-event-preview.tsx
@@ -10,9 +10,7 @@ const PlaceholderEventPreview = () => {
 
   return (
     <div className='w-full rounded-lg bg-gray-100 dark:bg-primary-800 relative overflow-hidden animate-pulse text-primary-50 dark:text-primary-800'>
-      <div className='bg-primary-200 dark:bg-gray-600 h-40'>
-        {/* <img className='h-full w-full object-cover' src={banner.url} alt={intl.formatMessage(messages.bannerHeader)} />} */}
-      </div>
+      <div className='bg-primary-200 dark:bg-gray-600 h-40' />
       <Stack className='p-2.5' space={2}>
         <Text weight='semibold'>{generateText(eventNameLength)}</Text>
 
diff --git a/app/soapbox/normalizers/status.ts b/app/soapbox/normalizers/status.ts
index 191947df3..1c3b68f42 100644
--- a/app/soapbox/normalizers/status.ts
+++ b/app/soapbox/normalizers/status.ts
@@ -32,6 +32,8 @@ export const EventRecord = ImmutableRecord({
   participants_count: 0,
   location: null as ImmutableMap<string, any> | null,
   join_state: null as EventJoinState | null,
+  banner: null as Attachment | null,
+  links: ImmutableList<Attachment>(),
 });
 
 // https://docs.joinmastodon.org/entities/status/
@@ -174,9 +176,27 @@ const fixSensitivity = (status: ImmutableMap<string, any>) => {
 // Normalize event
 const normalizeEvent = (status: ImmutableMap<string, any>) => {
   if (status.getIn(['pleroma', 'event'])) {
-    return status.set('event', EventRecord(status.getIn(['pleroma', 'event']) as ImmutableMap<string, any>));
-  } else {
-    return status.set('event', null);
+    const firstAttachment = status.get('media_attachments').first();
+    let banner = null;
+    let mediaAttachments = status.get('media_attachments');
+
+    if (firstAttachment && firstAttachment.description === 'Banner' && firstAttachment.type === 'image') {
+      banner = normalizeAttachment(firstAttachment);
+      mediaAttachments = mediaAttachments.shift();
+    }
+
+    const links = mediaAttachments.filter((attachment: Attachment) => attachment.pleroma.get('mime_type') === 'text/html');
+    mediaAttachments = mediaAttachments.filter((attachment: Attachment) => attachment.pleroma.get('mime_type') !== 'text/html');
+
+    const event = EventRecord(
+      (status.getIn(['pleroma', 'event']) as ImmutableMap<string, any>)
+        .set('banner', banner)
+        .set('links', links),
+    );
+
+    status
+      .set('event', event)
+      .set('media_attachments', mediaAttachments);
   }
 };
 
diff --git a/app/soapbox/reducers/compose_event.ts b/app/soapbox/reducers/compose_event.ts
index ab03d994d..f6ad00b21 100644
--- a/app/soapbox/reducers/compose_event.ts
+++ b/app/soapbox/reducers/compose_event.ts
@@ -25,7 +25,6 @@ import { normalizeAttachment, normalizeLocation } from 'soapbox/normalizers';
 import type {
   Attachment as AttachmentEntity,
   Location as LocationEntity,
-  Status as StatusEntity,
 } from 'soapbox/types/entities';
 
 export const ReducerRecord = ImmutableRecord({
@@ -90,11 +89,10 @@ export default function compose_event(state = ReducerRecord(), action: AnyAction
       return ReducerRecord({
         name: action.status.event.name,
         status: action.text,
-        // location: null as LocationEntity | null,
         start_time: new Date(action.status.event.start_time),
         end_time: action.status.event.end_time ? new Date(action.status.event.end_time) : null,
         approval_required: action.status.event.join_mode !== 'free',
-        banner: (action.status as StatusEntity).media_attachments.find(({ description }) => description === 'Banner') || null,
+        banner: action.status.event.banner || null,
         location: action.location ? normalizeLocation(action.location) : null,
         progress: 0,
         is_uploading: false,

From 7c1726c6657e57b531a38fe9953bda5c1ddd96df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 27 Nov 2022 23:49:51 +0100
Subject: [PATCH 19/32] update test
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/reducers/__tests__/status-lists.test.ts | 12 ++++++++++++
 app/soapbox/utils/features.ts                       |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/reducers/__tests__/status-lists.test.ts b/app/soapbox/reducers/__tests__/status-lists.test.ts
index b01daee09..e362b849e 100644
--- a/app/soapbox/reducers/__tests__/status-lists.test.ts
+++ b/app/soapbox/reducers/__tests__/status-lists.test.ts
@@ -27,6 +27,18 @@ describe('status_lists reducer', () => {
         isLoading: null,
         items: [],
       },
+      joined_events: {
+        next: null,
+        loaded: false,
+        isLoading: null,
+        items: [],
+      },
+      recent_events: {
+        next: null,
+        loaded: false,
+        isLoading: null,
+        items: [],
+      },
     });
   });
 });
diff --git a/app/soapbox/utils/features.ts b/app/soapbox/utils/features.ts
index 0bfc07398..efbbbda37 100644
--- a/app/soapbox/utils/features.ts
+++ b/app/soapbox/utils/features.ts
@@ -280,7 +280,7 @@ const getInstanceFeatures = (instance: Instance) => {
      */
     ethereumLogin: v.software === MITRA,
 
-    events: v.software === PLEROMA && v.build === SOAPBOX && gte(v.version, '2.4.50'),
+    events: v.software === PLEROMA && v.build === REBASED && gte(v.version, '2.4.50'),
 
     /**
      * Ability to address recipients of a status explicitly (with `to`).

From 5d1921b2ccf34ee7f2d083a823c77b9667708f29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 28 Nov 2022 00:28:15 +0100
Subject: [PATCH 20/32] styles fix
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/event-preview.tsx               | 4 ++--
 app/soapbox/features/event/components/event-header.tsx | 6 ++++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/components/event-preview.tsx b/app/soapbox/components/event-preview.tsx
index 2ee688e05..68cc135af 100644
--- a/app/soapbox/components/event-preview.tsx
+++ b/app/soapbox/components/event-preview.tsx
@@ -68,10 +68,10 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
         <div className='flex gap-y-1 gap-x-2 flex-wrap text-gray-700 dark:text-gray-600'>
           <HStack alignItems='center' space={2}>
             <Icon src={require('@tabler/icons/user.svg')} />
-            <span>
+            <HStack space={1} alignItems='center' grow>
               <span dangerouslySetInnerHTML={{ __html: account.display_name_html }} />
               {account.verified && <VerificationBadge />}
-            </span>
+            </HStack>
           </HStack>
 
           <EventDate status={status} />
diff --git a/app/soapbox/features/event/components/event-header.tsx b/app/soapbox/features/event/components/event-header.tsx
index 6f59a49ea..ebf895a83 100644
--- a/app/soapbox/features/event/components/event-header.tsx
+++ b/app/soapbox/features/event/components/event-header.tsx
@@ -405,8 +405,10 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
                 values={{
                   name: (
                     <Link className='mention' to={`/@${account.acct}`}>
-                      <span dangerouslySetInnerHTML={{ __html: account.display_name_html }} />
-                      {account.verified && <VerificationBadge />}
+                      <HStack space={1} alignItems='center' grow>
+                        <span dangerouslySetInnerHTML={{ __html: account.display_name_html }} />
+                        {account.verified && <VerificationBadge />}
+                      </HStack>
                     </Link>
                   ),
                 }}

From 6fb82904445e69bbd33dd46f5797cfe2b77fc601 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 28 Nov 2022 00:46:32 +0100
Subject: [PATCH 21/32] EventCarousel: Do not show placeholder if already has
 results
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/features/events/components/event-carousel.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/features/events/components/event-carousel.tsx b/app/soapbox/features/events/components/event-carousel.tsx
index 3f47c9b2b..3f2f25565 100644
--- a/app/soapbox/features/events/components/event-carousel.tsx
+++ b/app/soapbox/features/events/components/event-carousel.tsx
@@ -40,11 +40,11 @@ const EventCarousel: React.FC<IEventCarousel> = ({ statusIds, isLoading, emptyMe
     setIndex(index % statusIds.size);
   };
 
-  if (isLoading) {
-    return <PlaceholderEventPreview />;
-  }
-
   if (statusIds.size === 0) {
+    if (isLoading) {
+      return <PlaceholderEventPreview />;
+    }
+
     return (
       <Card variant='rounded' size='lg'>
         {emptyMessage}

From 5d9925ed5ffb1c9545d0fb6e8af72812bfd33637 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Tue, 29 Nov 2022 22:49:35 +0100
Subject: [PATCH 22/32] Styles improvements, fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/status.tsx                      | 4 ++--
 app/soapbox/components/ui/modal/modal.tsx              | 9 +++++----
 app/soapbox/features/event/components/event-header.tsx | 3 ++-
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx
index 9a2b3350b..f24adaefb 100644
--- a/app/soapbox/components/status.tsx
+++ b/app/soapbox/components/status.tsx
@@ -385,7 +385,7 @@ const Status: React.FC<IStatus> = (props) => {
               )}
 
               {actualStatus.event ? <EventPreview className='shadow-xl' status={actualStatus} /> : (
-                <>
+                <Stack space={4}>
                   <StatusContent
                     status={actualStatus}
                     onClick={handleClick}
@@ -408,7 +408,7 @@ const Status: React.FC<IStatus> = (props) => {
                       {quote}
                     </Stack>
                   )}
-                </>
+                </Stack>
               )}
             </Stack>
 
diff --git a/app/soapbox/components/ui/modal/modal.tsx b/app/soapbox/components/ui/modal/modal.tsx
index 741309195..8b5564335 100644
--- a/app/soapbox/components/ui/modal/modal.tsx
+++ b/app/soapbox/components/ui/modal/modal.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import Button from '../button/button';
+import HStack from '../hstack/hstack';
 import IconButton from '../icon-button/icon-button';
 import Stack from '../stack/stack';
 
@@ -115,7 +116,7 @@ const Modal: React.FC<IModal> = ({
       </div>
 
       {confirmationAction && (
-        <div className='mt-5 flex flex-row justify-between' data-testid='modal-actions'>
+        <HStack className='mt-5' justifyContent='between' data-testid='modal-actions'>
           <div className='flex-grow'>
             {cancelAction && (
               <Button
@@ -127,7 +128,7 @@ const Modal: React.FC<IModal> = ({
             )}
           </div>
 
-          <Stack space={2}>
+          <HStack space={2}>
             {secondaryAction && (
               <Button
                 theme='secondary'
@@ -146,8 +147,8 @@ const Modal: React.FC<IModal> = ({
             >
               {confirmationText}
             </Button>
-          </Stack>
-        </div>
+          </HStack>
+        </HStack>
       )}
     </div>
   );
diff --git a/app/soapbox/features/event/components/event-header.tsx b/app/soapbox/features/event/components/event-header.tsx
index ebf895a83..b38ca8959 100644
--- a/app/soapbox/features/event/components/event-header.tsx
+++ b/app/soapbox/features/event/components/event-header.tsx
@@ -326,6 +326,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
   };
 
   const handleParticipantsClick: React.MouseEventHandler = e => {
+    e.preventDefault();
     e.stopPropagation();
 
     dispatch(openModal('EVENT_PARTICIPANTS', {
@@ -404,7 +405,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
                 defaultMessage='Organized by {name}'
                 values={{
                   name: (
-                    <Link className='mention' to={`/@${account.acct}`}>
+                    <Link className='mention inline-block' to={`/@${account.acct}`}>
                       <HStack space={1} alignItems='center' grow>
                         <span dangerouslySetInnerHTML={{ __html: account.display_name_html }} />
                         {account.verified && <VerificationBadge />}

From ee389e523dc62d4681cebf73281b2f8eb5c929e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Tue, 29 Nov 2022 23:14:16 +0100
Subject: [PATCH 23/32] Allow to configure tile server
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/ui/modal/modal.tsx     |  1 -
 app/soapbox/features/soapbox-config/index.tsx | 32 ++++++++++++++++++-
 .../ui/components/modals/event-map-modal.tsx  | 14 +++-----
 .../normalizers/soapbox/soapbox-config.ts     |  2 ++
 app/soapbox/pages/event-page.tsx              |  4 +--
 5 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/app/soapbox/components/ui/modal/modal.tsx b/app/soapbox/components/ui/modal/modal.tsx
index 8b5564335..d9bd60e8d 100644
--- a/app/soapbox/components/ui/modal/modal.tsx
+++ b/app/soapbox/components/ui/modal/modal.tsx
@@ -5,7 +5,6 @@ import { defineMessages, useIntl } from 'react-intl';
 import Button from '../button/button';
 import HStack from '../hstack/hstack';
 import IconButton from '../icon-button/icon-button';
-import Stack from '../stack/stack';
 
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
diff --git a/app/soapbox/features/soapbox-config/index.tsx b/app/soapbox/features/soapbox-config/index.tsx
index 3c8b85d33..2ebb71500 100644
--- a/app/soapbox/features/soapbox-config/index.tsx
+++ b/app/soapbox/features/soapbox-config/index.tsx
@@ -22,7 +22,7 @@ import {
   Toggle,
 } from 'soapbox/components/ui';
 import ThemeSelector from 'soapbox/features/ui/components/theme-selector';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { useAppSelector, useAppDispatch, useFeatures } from 'soapbox/hooks';
 import { normalizeSoapboxConfig } from 'soapbox/normalizers';
 
 import ColorWithPicker from './components/color-with-picker';
@@ -54,6 +54,8 @@ const messages = defineMessages({
   singleUserModeProfileHint: { id: 'soapbox_config.single_user_mode_profile_hint', defaultMessage: '@handle' },
   feedInjectionLabel: { id: 'soapbox_config.feed_injection_label', defaultMessage: 'Feed injection' },
   feedInjectionHint: { id: 'soapbox_config.feed_injection_hint', defaultMessage: 'Inject the feed with additional content, such as suggested profiles.' },
+  tileServerLabel: { id: 'soapbox_config.tile_server_label', defaultMessage: 'Map tile server' },
+  tileServerAttributionLabel: { id: 'soapbox_config.tile_server_attribution_label', defaultMessage: 'Map tiles attribution' },
 });
 
 type ValueGetter<T = Element> = (e: React.ChangeEvent<T>) => any;
@@ -72,6 +74,8 @@ const SoapboxConfig: React.FC = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
+  const features = useFeatures();
+
   const initialData = useAppSelector(state => state.soapbox);
 
   const [isLoading, setLoading] = useState(false);
@@ -345,6 +349,32 @@ const SoapboxConfig: React.FC = () => {
             />
           </FormGroup>
 
+          {features.events && (
+            <>
+              <CardHeader>
+                <CardTitle title={<FormattedMessage id='soapbox_config.headings.events' defaultMessage='Events' />} />
+              </CardHeader>
+
+              <FormGroup labelText={intl.formatMessage(messages.tileServerLabel)}>
+                <Input
+                  type='text'
+                  placeholder={intl.formatMessage(messages.tileServerLabel)}
+                  value={soapbox.tileServer}
+                  onChange={handleChange(['tileServer'], (e) => e.target.value)}
+                />
+              </FormGroup>
+
+              <FormGroup labelText={intl.formatMessage(messages.tileServerAttributionLabel)}>
+                <Input
+                  type='text'
+                  placeholder={intl.formatMessage(messages.tileServerAttributionLabel)}
+                  value={soapbox.tileServerAttribution}
+                  onChange={handleChange(['tileServerAttribution'], (e) => e.target.value)}
+                />
+              </FormGroup>
+            </>
+          )}
+
           <CardHeader>
             <CardTitle title={<FormattedMessage id='soapbox_config.headings.cryptocurrency' defaultMessage='Cryptocurrency' />} />
           </CardHeader>
diff --git a/app/soapbox/features/ui/components/modals/event-map-modal.tsx b/app/soapbox/features/ui/components/modals/event-map-modal.tsx
index b9d3ca968..b918d7204 100644
--- a/app/soapbox/features/ui/components/modals/event-map-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/event-map-modal.tsx
@@ -1,9 +1,9 @@
 import L from 'leaflet';
 import React, { useCallback, useEffect, useRef } from 'react';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 
 import { Button, Modal, Stack } from 'soapbox/components/ui';
-import { useAppSelector } from 'soapbox/hooks';
+import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
 import { makeGetStatus } from 'soapbox/selectors';
 
 import type { Status as StatusEntity } from 'soapbox/types/entities';
@@ -21,12 +21,8 @@ interface IEventMapModal {
   statusId: string,
 }
 
-const messages = defineMessages({
-  osmAttribution: { id: 'event_map.osm_attribution', defaultMessage: '© OpenStreetMap Contributors' },
-});
-
 const EventMapModal: React.FC<IEventMapModal> = ({ onClose, statusId }) => {
-  const intl = useIntl();
+  const { tileServer, tileServerAttribution } = useSoapboxConfig();
 
   const getStatus = useCallback(makeGetStatus(), []);
   const status = useAppSelector(state => getStatus(state, { id: statusId })) as StatusEntity;
@@ -43,8 +39,8 @@ const EventMapModal: React.FC<IEventMapModal> = ({ onClose, statusId }) => {
       title: location.get('name'),
     }).addTo(map.current);
 
-    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-      attribution: intl.formatMessage(messages.osmAttribution),
+    L.tileLayer(tileServer, {
+      attribution: tileServerAttribution,
     }).addTo(map.current);
 
     return () => {
diff --git a/app/soapbox/normalizers/soapbox/soapbox-config.ts b/app/soapbox/normalizers/soapbox/soapbox-config.ts
index 3cfedb7af..089833d7f 100644
--- a/app/soapbox/normalizers/soapbox/soapbox-config.ts
+++ b/app/soapbox/normalizers/soapbox/soapbox-config.ts
@@ -114,6 +114,8 @@ export const SoapboxConfigRecord = ImmutableRecord({
   displayCta: true,
   /** Whether to inject suggested profiles into the Home feed. */
   feedInjection: true,
+  tileServer: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+  tileServerAttribution: '© OpenStreetMap Contributors',
 }, 'SoapboxConfig');
 
 type SoapboxConfigMap = ImmutableMap<string, any>;
diff --git a/app/soapbox/pages/event-page.tsx b/app/soapbox/pages/event-page.tsx
index c5c846830..93da549a4 100644
--- a/app/soapbox/pages/event-page.tsx
+++ b/app/soapbox/pages/event-page.tsx
@@ -91,12 +91,12 @@ const EventPage: React.FC<IEventPage> = ({ params, children }) => {
         )}
         {features.trends && (
           <BundleContainer fetchComponent={TrendsPanel}>
-            {Component => <Component limit={3} key='trends-panel' />}
+            {Component => <Component limit={5} key='trends-panel' />}
           </BundleContainer>
         )}
         {features.suggestions && (
           <BundleContainer fetchComponent={WhoToFollowPanel}>
-            {Component => <Component limit={5} key='wtf-panel' />}
+            {Component => <Component limit={3} key='wtf-panel' />}
           </BundleContainer>
         )}
         <LinkFooter key='link-footer' />

From 1de5a69f8b3be19a4e80996d74dea753c353097d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 30 Nov 2022 11:16:42 +0100
Subject: [PATCH 24/32] Use remote_url for external links
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/features/event/event-information.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/event/event-information.tsx b/app/soapbox/features/event/event-information.tsx
index 49382da25..b12469d9b 100644
--- a/app/soapbox/features/event/event-information.tsx
+++ b/app/soapbox/features/event/event-information.tsx
@@ -121,8 +121,8 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
         {status.event.links.map(link => (
           <HStack space={2} alignItems='center'>
             <Icon src={require('@tabler/icons/link.svg')} />
-            <a href={link.url} className='text-primary-600 dark:text-accent-blue hover:underline' target='_blank'>
-              {link.url.replace(/^https?:\/\//, '')}
+            <a href={link.remote_url} className='text-primary-600 dark:text-accent-blue hover:underline' target='_blank'>
+              {link.remote_url.replace(/^https?:\/\//, '')}
             </a>
           </HStack>
         ))}

From 6435f33af9607ce319961b6cb788eb53acd22398 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 30 Nov 2022 16:57:21 +0100
Subject: [PATCH 25/32] fallback to link.url
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/features/event/event-information.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/event/event-information.tsx b/app/soapbox/features/event/event-information.tsx
index b12469d9b..9068d2d5c 100644
--- a/app/soapbox/features/event/event-information.tsx
+++ b/app/soapbox/features/event/event-information.tsx
@@ -121,8 +121,8 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
         {status.event.links.map(link => (
           <HStack space={2} alignItems='center'>
             <Icon src={require('@tabler/icons/link.svg')} />
-            <a href={link.remote_url} className='text-primary-600 dark:text-accent-blue hover:underline' target='_blank'>
-              {link.remote_url.replace(/^https?:\/\//, '')}
+            <a href={link.remote_url || link.url} className='text-primary-600 dark:text-accent-blue hover:underline' target='_blank'>
+              {(link.remote_url || link.url).replace(/^https?:\/\//, '')}
             </a>
           </HStack>
         ))}

From 13ccc3fe7fe9a3e08ee1d4e48f544b0d66491c06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 30 Nov 2022 18:34:05 +0100
Subject: [PATCH 26/32] Date display improvements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/ui/stack/stack.tsx     |  2 +-
 .../components/ui/textarea/textarea.tsx       |  2 +-
 .../features/event/components/event-date.tsx  |  5 ++--
 .../features/event/event-information.tsx      | 29 ++++++++++++++++---
 4 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/app/soapbox/components/ui/stack/stack.tsx b/app/soapbox/components/ui/stack/stack.tsx
index 1931904b9..fed361e93 100644
--- a/app/soapbox/components/ui/stack/stack.tsx
+++ b/app/soapbox/components/ui/stack/stack.tsx
@@ -52,7 +52,7 @@ const Stack = React.forwardRef<HTMLDivElement, IStack>((props, ref: React.Legacy
     <Elem
       {...filteredProps}
       ref={ref}
-      className={classNames('flex flex-col items', {
+      className={classNames('flex flex-col', {
         // @ts-ignore
         [spaces[space]]: typeof space !== 'undefined',
         // @ts-ignore
diff --git a/app/soapbox/components/ui/textarea/textarea.tsx b/app/soapbox/components/ui/textarea/textarea.tsx
index ddf0c9d7d..9abfc499d 100644
--- a/app/soapbox/components/ui/textarea/textarea.tsx
+++ b/app/soapbox/components/ui/textarea/textarea.tsx
@@ -28,7 +28,7 @@ const Textarea = React.forwardRef(
         {...props}
         ref={ref}
         className={classNames({
-          'bg-white dark:bg-gray-900 shadow-sm block w-full sm:text-sm rounded-md text-gray-900 dark:text-gray-100 placeholder:text-gray-600 dark:placeholder:text-gray-600 border-gray-400 dark:border-gray-800 dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
+          'bg-white dark:bg-transparent shadow-sm block w-full sm:text-sm rounded-md text-gray-900 dark:text-gray-100 placeholder:text-gray-600 dark:placeholder:text-gray-600 border-gray-400 dark:border-gray-800 dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
             true,
           'font-mono': isCodeEditor,
           'text-red-600 border-red-600': hasError,
diff --git a/app/soapbox/features/event/components/event-date.tsx b/app/soapbox/features/event/components/event-date.tsx
index 130d818d4..bfd4c37dd 100644
--- a/app/soapbox/features/event/components/event-date.tsx
+++ b/app/soapbox/features/event/components/event-date.tsx
@@ -22,12 +22,13 @@ const EventDate: React.FC<IEventDate> = ({ status }) => {
   if (event.end_time) {
     const endDate = new Date(event.end_time);
 
-    const sameDay = startDate.getDate() === endDate.getDate() && startDate.getMonth() === endDate.getMonth() && startDate.getFullYear() === endDate.getFullYear();
+    const sameYear = startDate.getFullYear() === endDate.getFullYear();
+    const sameDay = startDate.getDate() === endDate.getDate() && startDate.getMonth() === endDate.getMonth() && sameYear;
 
     if (sameDay) {
       date = (
         <>
-          <FormattedDate value={event.start_time} year='2-digit' month='short' day='2-digit' weekday='short' hour='2-digit' minute='2-digit' />
+          <FormattedDate value={event.start_time} year={sameYear ? undefined : '2-digit'} month='short' day='2-digit' weekday='short' hour='2-digit' minute='2-digit' />
           {' - '}
           <FormattedDate value={event.end_time} hour='2-digit' minute='2-digit' />
         </>
diff --git a/app/soapbox/features/event/event-information.tsx b/app/soapbox/features/event/event-information.tsx
index 9068d2d5c..54c5f5f40 100644
--- a/app/soapbox/features/event/event-information.tsx
+++ b/app/soapbox/features/event/event-information.tsx
@@ -88,7 +88,12 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
   const renderEventDate = useCallback(() => {
     const event = status?.event;
 
-    if (!event?.start_time) return null;
+    const startDate = new Date(event.start_time);
+    const endDate = new Date(event.end_time);
+
+    if (!startDate) return null;
+
+    const sameDay = endDate && startDate.getDate() === endDate.getDate() && startDate.getMonth() === endDate.getMonth() && startDate.getFullYear() === endDate.getFullYear();
 
     return (
       <Stack space={1}>
@@ -98,10 +103,26 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
         <HStack space={2} alignItems='center'>
           <Icon src={require('@tabler/icons/calendar.svg')} />
           <Text>
-            <FormattedDate value={event.start_time} year='numeric' month='long' day='2-digit' weekday='long' hour='2-digit' minute='2-digit' />
-            {event.end_time && (<>
+            <FormattedDate
+              value={startDate}
+              year='numeric'
+              month='long'
+              day='2-digit'
+              weekday='long'
+              hour='2-digit'
+              minute='2-digit'
+            />
+            {endDate && (<>
               {' - '}
-              <FormattedDate value={event.end_time} year='numeric' month='long' day='2-digit' weekday='long' hour='2-digit' minute='2-digit' />
+              <FormattedDate
+                value={endDate}
+                year={sameDay ? undefined : 'numeric'}
+                month={sameDay ? undefined : 'long'}
+                day={sameDay ? undefined : '2-digit'}
+                weekday={sameDay ? undefined : 'long'}
+                hour='2-digit'
+                minute='2-digit'
+              />
             </>)}
           </Text>
         </HStack>

From 403bcba52593a9b40e313f3ecf9b827f0935258a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 30 Nov 2022 19:32:35 +0100
Subject: [PATCH 27/32] Compose event modal improvements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/modal-root.tsx         | 50 ++++++++++++++++---
 .../features/event/event-information.tsx      | 12 ++---
 .../compose-event-modal.tsx                   | 26 +++++++++-
 app/soapbox/features/ui/index.tsx             |  5 +-
 .../{compose_event.ts => compose-event.ts}    |  0
 app/soapbox/reducers/index.ts                 |  2 +-
 6 files changed, 79 insertions(+), 16 deletions(-)
 rename app/soapbox/reducers/{compose_event.ts => compose-event.ts} (100%)

diff --git a/app/soapbox/components/modal-root.tsx b/app/soapbox/components/modal-root.tsx
index f3cdac7da..aded268e9 100644
--- a/app/soapbox/components/modal-root.tsx
+++ b/app/soapbox/components/modal-root.tsx
@@ -5,15 +5,18 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
 import { cancelReplyCompose } from 'soapbox/actions/compose';
+import { cancelEventCompose } from 'soapbox/actions/events';
 import { openModal, closeModal } from 'soapbox/actions/modals';
-import { useAppDispatch, useAppSelector, usePrevious } from 'soapbox/hooks';
+import { useAppDispatch, usePrevious } from 'soapbox/hooks';
 
 import type { UnregisterCallback } from 'history';
 import type { ModalType } from 'soapbox/features/ui/components/modal-root';
 import type { ReducerCompose } from 'soapbox/reducers/compose';
+import type { ReducerRecord as ReducerComposeEvent } from 'soapbox/reducers/compose-event';
 
 const messages = defineMessages({
   confirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
+  cancelEditing: { id: 'confirmations.cancel_editing.confirm', defaultMessage: 'Cancel editing' },
 });
 
 export const checkComposeContent = (compose?: ReturnType<typeof ReducerCompose>) => {
@@ -25,6 +28,15 @@ export const checkComposeContent = (compose?: ReturnType<typeof ReducerCompose>)
   ].some(check => check === true);
 };
 
+export const checkEventComposeContent = (compose?: ReturnType<typeof ReducerComposeEvent>) => {
+  return !!compose && [
+    compose.name.length > 0,
+    compose.status.length > 0,
+    compose.location !== null,
+    compose.banner !== null,
+  ].some(check => check === true);
+};
+
 interface IModalRoot {
   onCancel?: () => void,
   onClose: (type?: ModalType) => void,
@@ -46,8 +58,6 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
   const prevChildren = usePrevious(children);
   const prevType = usePrevious(type);
 
-  const isEditing = useAppSelector(state => state.compose.get('compose-modal')?.id !== null);
-
   const visible = !!children;
 
   const handleKeyUp = (e: KeyboardEvent) => {
@@ -58,13 +68,20 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
 
   const handleOnClose = () => {
     dispatch((_, getState) => {
-      const hasComposeContent = checkComposeContent(getState().compose.get('compose-modal'));
+      const compose = getState().compose.get('compose-modal');
+      const hasComposeContent = checkComposeContent(compose);
+      const hasEventComposeContent = checkEventComposeContent(getState().compose_event);
 
       if (hasComposeContent && type === 'COMPOSE') {
+        const isEditing = compose!.id !== null;
         dispatch(openModal('CONFIRM', {
           icon: require('@tabler/icons/trash.svg'),
-          heading: isEditing ? <FormattedMessage id='confirmations.cancel_editing.heading' defaultMessage='Cancel post editing' /> : <FormattedMessage id='confirmations.delete.heading' defaultMessage='Delete post' />,
-          message: isEditing ? <FormattedMessage id='confirmations.cancel_editing.message' defaultMessage='Are you sure you want to cancel editing this post? All changes will be lost.' /> : <FormattedMessage id='confirmations.delete.message' defaultMessage='Are you sure you want to delete this post?' />,
+          heading: isEditing
+            ? <FormattedMessage id='confirmations.cancel_editing.heading' defaultMessage='Cancel post editing' />
+            : <FormattedMessage id='confirmations.delete.heading' defaultMessage='Delete post' />,
+          message: isEditing
+            ? <FormattedMessage id='confirmations.cancel_editing.message' defaultMessage='Are you sure you want to cancel editing this post? All changes will be lost.' />
+            : <FormattedMessage id='confirmations.delete.message' defaultMessage='Are you sure you want to delete this post?' />,
           confirm: intl.formatMessage(messages.confirm),
           onConfirm: () => {
             dispatch(closeModal('COMPOSE'));
@@ -74,7 +91,26 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
             dispatch(closeModal('CONFIRM'));
           },
         }));
-      } else if (hasComposeContent && type === 'CONFIRM') {
+      } else if (hasEventComposeContent && type === 'COMPOSE_EVENT') {
+        const isEditing = getState().compose_event.id !== null;
+        dispatch(openModal('CONFIRM', {
+          icon: require('@tabler/icons/trash.svg'),
+          heading: isEditing
+            ? <FormattedMessage id='confirmations.cancel_event_editing.heading' defaultMessage='Cancel event editing' />
+            : <FormattedMessage id='confirmations.delete_event.heading' defaultMessage='Delete event' />,
+          message: isEditing
+            ? <FormattedMessage id='confirmations.cancel_event_editing.message' defaultMessage='Are you sure you want to cancel editing this event? All changes will be lost.' />
+            : <FormattedMessage id='confirmations.delete_event.message' defaultMessage='Are you sure you want to delete this event?' />,
+          confirm: intl.formatMessage(isEditing ? messages.cancelEditing : messages.confirm),
+          onConfirm: () => {
+            dispatch(closeModal('COMPOSE_EVENT'));
+            dispatch(cancelEventCompose());
+          },
+          onCancel: () => {
+            dispatch(closeModal('CONFIRM'));
+          },
+        }));
+      } else if ((hasComposeContent || hasEventComposeContent) && type === 'CONFIRM') {
         dispatch(closeModal('CONFIRM'));
       } else {
         onClose();
diff --git a/app/soapbox/features/event/event-information.tsx b/app/soapbox/features/event/event-information.tsx
index 54c5f5f40..7e6f2d4a3 100644
--- a/app/soapbox/features/event/event-information.tsx
+++ b/app/soapbox/features/event/event-information.tsx
@@ -56,9 +56,9 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
   };
 
   const renderEventLocation = useCallback(() => {
-    const event = status?.event;
+    const event = status!.event!;
 
-    return event?.location && (
+    return event.location && (
       <Stack space={1}>
         <Text size='xl' weight='bold'>
           <FormattedMessage id='event.location' defaultMessage='Location' />
@@ -86,12 +86,12 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
   }, [status]);
 
   const renderEventDate = useCallback(() => {
-    const event = status?.event;
+    const event = status!.event!;
 
-    const startDate = new Date(event.start_time);
-    const endDate = new Date(event.end_time);
+    if (!event.start_time) return null;
 
-    if (!startDate) return null;
+    const startDate = new Date(event.start_time);
+    const endDate = event.end_time && new Date(event.end_time);
 
     const sameDay = endDate && startDate.getDate() === endDate.getDate() && startDate.getMonth() === endDate.getMonth() && startDate.getFullYear() === endDate.getFullYear();
 
diff --git a/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx b/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
index 4bbe709e2..ca041a758 100644
--- a/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
@@ -16,9 +16,12 @@ import {
   fetchEventParticipationRequests,
   rejectEventParticipationRequest,
   authorizeEventParticipationRequest,
+  cancelEventCompose,
 } from 'soapbox/actions/events';
+import { closeModal, openModal } from 'soapbox/actions/modals';
 import { ADDRESS_ICONS } from 'soapbox/components/autosuggest-location';
 import LocationSearch from 'soapbox/components/location-search';
+import { checkEventComposeContent } from 'soapbox/components/modal-root';
 import { Button, Form, FormGroup, HStack, Icon, IconButton, Input, Modal, Spinner, Stack, Tabs, Text, Textarea } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account-container';
 import { isCurrentOrFutureDate } from 'soapbox/features/compose/components/schedule-form';
@@ -38,6 +41,8 @@ const messages = defineMessages({
   pending: { id: 'compose_event.tabs.pending', defaultMessage: 'Manage requests' },
   authorize: { id: 'compose_event.participation_requests.authorize', defaultMessage: 'Authorize' },
   reject: { id: 'compose_event.participation_requests.reject', defaultMessage: 'Reject' },
+  confirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
+  cancelEditing: { id: 'confirmations.cancel_editing.confirm', defaultMessage: 'Cancel editing' },
 });
 
 
@@ -136,7 +141,26 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
   };
 
   const onClickClose = () => {
-    onClose('COMPOSE_EVENT');
+    dispatch((dispatch, getState) => {
+      if (checkEventComposeContent(getState().compose_event)) {
+        dispatch(openModal('CONFIRM', {
+          icon: require('@tabler/icons/trash.svg'),
+          heading: id
+            ? <FormattedMessage id='confirmations.cancel_event_editing.heading' defaultMessage='Cancel event editing' />
+            : <FormattedMessage id='confirmations.delete_event.heading' defaultMessage='Delete event' />,
+          message: id
+            ? <FormattedMessage id='confirmations.cancel_event_editing.message' defaultMessage='Are you sure you want to cancel editing this event? All changes will be lost.' />
+            : <FormattedMessage id='confirmations.delete_event.message' defaultMessage='Are you sure you want to delete this event?' />,
+          confirm: intl.formatMessage(messages.confirm),
+          onConfirm: () => {
+            dispatch(closeModal('COMPOSE_EVENT'));
+            dispatch(cancelEventCompose());
+          },
+        }));
+      } else {
+        onClose('COMPOSE_EVENT');
+      }
+    });
   };
 
   const handleFiles = (files: FileList) => {
diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx
index 701567ccb..8601deaf7 100644
--- a/app/soapbox/features/ui/index.tsx
+++ b/app/soapbox/features/ui/index.tsx
@@ -120,6 +120,7 @@ import { WrappedRoute } from './util/react-router-helpers';
 // Dummy import, to make sure that <Status /> ends up in the application bundle.
 // Without this it ends up in ~8 very commonly used bundles.
 import 'soapbox/components/status';
+import { uploadEventBanner } from 'soapbox/actions/events';
 
 const EmptyPage = HomePage;
 
@@ -384,7 +385,9 @@ const UI: React.FC = ({ children }) => {
       if (e.dataTransfer && e.dataTransfer.files.length >= 1) {
         const modals = getState().modals;
         const isModalOpen = modals.last()?.modalType === 'COMPOSE';
-        dispatch(uploadCompose(isModalOpen ? 'compose-modal' : 'home', e.dataTransfer.files, intl));
+        const isEventsModalOpen = modals.last()?.modalType === 'COMPOSE_EVENT';
+        if (isEventsModalOpen) dispatch(uploadEventBanner(e.dataTransfer.files[0], intl));
+        else dispatch(uploadCompose(isModalOpen ? 'compose-modal' : 'home', e.dataTransfer.files, intl));
       }
     });
   };
diff --git a/app/soapbox/reducers/compose_event.ts b/app/soapbox/reducers/compose-event.ts
similarity index 100%
rename from app/soapbox/reducers/compose_event.ts
rename to app/soapbox/reducers/compose-event.ts
diff --git a/app/soapbox/reducers/index.ts b/app/soapbox/reducers/index.ts
index c691aebaa..1556e658a 100644
--- a/app/soapbox/reducers/index.ts
+++ b/app/soapbox/reducers/index.ts
@@ -19,7 +19,7 @@ import chat_message_lists from './chat-message-lists';
 import chat_messages from './chat-messages';
 import chats from './chats';
 import compose from './compose';
-import compose_event from './compose_event';
+import compose_event from './compose-event';
 import contexts from './contexts';
 import conversations from './conversations';
 import custom_emojis from './custom-emojis';

From 0481e528af8b057b7e943ef3a70acd8563b29121 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 30 Nov 2022 22:59:37 +0100
Subject: [PATCH 28/32] Add events to sidebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/sidebar-menu.tsx       | 10 ++++++++++
 app/soapbox/components/sidebar-navigation.tsx |  9 +++++++++
 2 files changed, 19 insertions(+)

diff --git a/app/soapbox/components/sidebar-menu.tsx b/app/soapbox/components/sidebar-menu.tsx
index 21703caa0..80a292ec9 100644
--- a/app/soapbox/components/sidebar-menu.tsx
+++ b/app/soapbox/components/sidebar-menu.tsx
@@ -34,6 +34,7 @@ const messages = defineMessages({
   logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
   bookmarks: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' },
   lists: { id: 'column.lists', defaultMessage: 'Lists' },
+  events: { id: 'column.events', defaultMessage: 'Events' },
   invites: { id: 'navigation_bar.invites', defaultMessage: 'Invites' },
   developers: { id: 'navigation.developers', defaultMessage: 'Developers' },
   addAccount: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' },
@@ -208,6 +209,15 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   />
                 )}
 
+                {features.events && (
+                  <SidebarLink
+                    to='/events'
+                    icon={require('@tabler/icons/calendar-event.svg')}
+                    text={intl.formatMessage(messages.events)}
+                    onClick={onClose}
+                  />
+                )}
+
                 {settings.get('isDeveloper') && (
                   <SidebarLink
                     to='/developers'
diff --git a/app/soapbox/components/sidebar-navigation.tsx b/app/soapbox/components/sidebar-navigation.tsx
index 4e8e73e5d..861647137 100644
--- a/app/soapbox/components/sidebar-navigation.tsx
+++ b/app/soapbox/components/sidebar-navigation.tsx
@@ -13,6 +13,7 @@ const messages = defineMessages({
   follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
   bookmarks: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' },
   lists: { id: 'column.lists', defaultMessage: 'Lists' },
+  events: { id: 'column.events', defaultMessage: 'Events' },
   developers: { id: 'navigation.developers', defaultMessage: 'Developers' },
 });
 
@@ -57,6 +58,14 @@ const SidebarNavigation = () => {
         });
       }
 
+      if (features.events) {
+        menu.push({
+          to: '/events',
+          text: intl.formatMessage(messages.events),
+          icon: require('@tabler/icons/calendar-event.svg'),
+        });
+      }
+
       if (settings.get('isDeveloper')) {
         menu.push({
           to: '/developers',

From 6f21905a8bd90e0bac76707e256633de5cf54b82 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 2 Dec 2022 14:15:59 -0600
Subject: [PATCH 29/32] Improve display of emojis

---
 app/soapbox/components/markup.css       |  2 +-
 app/styles/basics.scss                  |  2 +-
 app/styles/components/buttons.scss      |  6 ------
 app/styles/components/display-name.scss |  6 ------
 app/styles/ui.scss                      | 14 --------------
 5 files changed, 2 insertions(+), 28 deletions(-)

diff --git a/app/soapbox/components/markup.css b/app/soapbox/components/markup.css
index 09669fbd7..3e6bf1c3d 100644
--- a/app/soapbox/components/markup.css
+++ b/app/soapbox/components/markup.css
@@ -61,7 +61,7 @@
 
 /* Emojis */
 [data-markup] img.emojione {
-  @apply w-5 h-5;
+  @apply w-5 h-5 m-0;
 }
 
 /* Hide Markdown images (Pleroma) */
diff --git a/app/styles/basics.scss b/app/styles/basics.scss
index 9a9eac717..705b240bc 100644
--- a/app/styles/basics.scss
+++ b/app/styles/basics.scss
@@ -100,7 +100,7 @@ noscript {
 }
 
 .emojione {
-  @apply w-5 h-5 -mt-[3px] inline;
+  @apply w-4 h-4 -mt-[0.2ex] mb-[0.2ex] inline-block align-middle object-contain;
 }
 
 // Virtuoso empty placeholder fix.
diff --git a/app/styles/components/buttons.scss b/app/styles/components/buttons.scss
index dc5bce4f4..dcb8e2343 100644
--- a/app/styles/components/buttons.scss
+++ b/app/styles/components/buttons.scss
@@ -113,9 +113,3 @@ a.button {
     margin-right: 0.6em;
   }
 }
-
-.button--welcome {
-  .emojione {
-    margin: -1px 6px 0 -4px;
-  }
-}
diff --git a/app/styles/components/display-name.scss b/app/styles/components/display-name.scss
index e5625d109..72d36903a 100644
--- a/app/styles/components/display-name.scss
+++ b/app/styles/components/display-name.scss
@@ -8,12 +8,6 @@
   }
 }
 
-.muted {
-  .emojione {
-    opacity: 0.5;
-  }
-}
-
 a.account__display-name {
   &:hover strong {
     text-decoration: underline;
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index 80884e2b5..c49c54562 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -155,20 +155,6 @@
   transition: height 0.4s ease, opacity 0.4s ease;
 }
 
-.emojione {
-  display: inline-block;
-  font-size: inherit;
-  vertical-align: middle;
-  object-fit: contain;
-  margin: -0.2ex 0.15em 0.2ex;
-  width: 16px;
-  height: 16px;
-
-  img {
-    width: auto;
-  }
-}
-
 .image-loader {
   position: relative;
   width: 100%;

From 46cb676822da65ba16ad138780382399abb65962 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 2 Dec 2022 23:16:11 +0100
Subject: [PATCH 30/32] Remove 'show on map' for now
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../features/event/event-information.tsx      | 14 ----
 app/soapbox/features/soapbox-config/index.tsx | 32 +-------
 .../features/ui/components/modal-root.tsx     |  2 -
 .../ui/components/modals/event-map-modal.tsx  | 75 -------------------
 .../features/ui/util/async-components.ts      |  4 -
 .../normalizers/soapbox/soapbox-config.ts     |  2 -
 package.json                                  |  2 -
 webpack/rules/assets.ts                       |  1 -
 yarn.lock                                     | 17 -----
 9 files changed, 1 insertion(+), 148 deletions(-)
 delete mode 100644 app/soapbox/features/ui/components/modals/event-map-modal.tsx

diff --git a/app/soapbox/features/event/event-information.tsx b/app/soapbox/features/event/event-information.tsx
index 7e6f2d4a3..ce9d9b365 100644
--- a/app/soapbox/features/event/event-information.tsx
+++ b/app/soapbox/features/event/event-information.tsx
@@ -47,14 +47,6 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
     setShowMedia(!showMedia);
   };
 
-  const handleShowMap: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
-    e.preventDefault();
-
-    dispatch(openModal('EVENT_MAP', {
-      statusId: status.id,
-    }));
-  };
-
   const renderEventLocation = useCallback(() => {
     const event = status!.event!;
 
@@ -73,12 +65,6 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
               <br />
             </>)}
             {[event.location.get('postalCode'), event.location.get('locality'), event.location.get('country')].filter(text => text).join(', ')}
-            {event.location.get('latitude') && (<>
-              <br />
-              <a href='#' className='text-primary-600 dark:text-accent-blue hover:underline' onClick={handleShowMap}>
-                <FormattedMessage id='event.show_on_map' defaultMessage='Show on map' />
-              </a>
-            </>)}
           </Text>
         </HStack>
       </Stack>
diff --git a/app/soapbox/features/soapbox-config/index.tsx b/app/soapbox/features/soapbox-config/index.tsx
index 2ebb71500..3c8b85d33 100644
--- a/app/soapbox/features/soapbox-config/index.tsx
+++ b/app/soapbox/features/soapbox-config/index.tsx
@@ -22,7 +22,7 @@ import {
   Toggle,
 } from 'soapbox/components/ui';
 import ThemeSelector from 'soapbox/features/ui/components/theme-selector';
-import { useAppSelector, useAppDispatch, useFeatures } from 'soapbox/hooks';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 import { normalizeSoapboxConfig } from 'soapbox/normalizers';
 
 import ColorWithPicker from './components/color-with-picker';
@@ -54,8 +54,6 @@ const messages = defineMessages({
   singleUserModeProfileHint: { id: 'soapbox_config.single_user_mode_profile_hint', defaultMessage: '@handle' },
   feedInjectionLabel: { id: 'soapbox_config.feed_injection_label', defaultMessage: 'Feed injection' },
   feedInjectionHint: { id: 'soapbox_config.feed_injection_hint', defaultMessage: 'Inject the feed with additional content, such as suggested profiles.' },
-  tileServerLabel: { id: 'soapbox_config.tile_server_label', defaultMessage: 'Map tile server' },
-  tileServerAttributionLabel: { id: 'soapbox_config.tile_server_attribution_label', defaultMessage: 'Map tiles attribution' },
 });
 
 type ValueGetter<T = Element> = (e: React.ChangeEvent<T>) => any;
@@ -74,8 +72,6 @@ const SoapboxConfig: React.FC = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const features = useFeatures();
-
   const initialData = useAppSelector(state => state.soapbox);
 
   const [isLoading, setLoading] = useState(false);
@@ -349,32 +345,6 @@ const SoapboxConfig: React.FC = () => {
             />
           </FormGroup>
 
-          {features.events && (
-            <>
-              <CardHeader>
-                <CardTitle title={<FormattedMessage id='soapbox_config.headings.events' defaultMessage='Events' />} />
-              </CardHeader>
-
-              <FormGroup labelText={intl.formatMessage(messages.tileServerLabel)}>
-                <Input
-                  type='text'
-                  placeholder={intl.formatMessage(messages.tileServerLabel)}
-                  value={soapbox.tileServer}
-                  onChange={handleChange(['tileServer'], (e) => e.target.value)}
-                />
-              </FormGroup>
-
-              <FormGroup labelText={intl.formatMessage(messages.tileServerAttributionLabel)}>
-                <Input
-                  type='text'
-                  placeholder={intl.formatMessage(messages.tileServerAttributionLabel)}
-                  value={soapbox.tileServerAttribution}
-                  onChange={handleChange(['tileServerAttribution'], (e) => e.target.value)}
-                />
-              </FormGroup>
-            </>
-          )}
-
           <CardHeader>
             <CardTitle title={<FormattedMessage id='soapbox_config.headings.cryptocurrency' defaultMessage='Cryptocurrency' />} />
           </CardHeader>
diff --git a/app/soapbox/features/ui/components/modal-root.tsx b/app/soapbox/features/ui/components/modal-root.tsx
index 2d00b818b..b4e020fd7 100644
--- a/app/soapbox/features/ui/components/modal-root.tsx
+++ b/app/soapbox/features/ui/components/modal-root.tsx
@@ -33,7 +33,6 @@ import {
   ComposeEventModal,
   JoinEventModal,
   AccountModerationModal,
-  EventMapModal,
   EventParticipantsModal,
 } from 'soapbox/features/ui/util/async-components';
 
@@ -75,7 +74,6 @@ const MODAL_COMPONENTS = {
   'COMPOSE_EVENT': ComposeEventModal,
   'JOIN_EVENT': JoinEventModal,
   'ACCOUNT_MODERATION': AccountModerationModal,
-  'EVENT_MAP': EventMapModal,
   'EVENT_PARTICIPANTS': EventParticipantsModal,
 };
 
diff --git a/app/soapbox/features/ui/components/modals/event-map-modal.tsx b/app/soapbox/features/ui/components/modals/event-map-modal.tsx
deleted file mode 100644
index b918d7204..000000000
--- a/app/soapbox/features/ui/components/modals/event-map-modal.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import L from 'leaflet';
-import React, { useCallback, useEffect, useRef } from 'react';
-import { FormattedMessage } from 'react-intl';
-
-import { Button, Modal, Stack } from 'soapbox/components/ui';
-import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
-import { makeGetStatus } from 'soapbox/selectors';
-
-import type { Status as StatusEntity } from 'soapbox/types/entities';
-
-import 'leaflet/dist/leaflet.css';
-
-L.Icon.Default.mergeOptions({
-  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
-  iconUrl: require('leaflet/dist/images/marker-icon.png'),
-  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
-});
-
-interface IEventMapModal {
-  onClose: (type: string) => void,
-  statusId: string,
-}
-
-const EventMapModal: React.FC<IEventMapModal> = ({ onClose, statusId }) => {
-  const { tileServer, tileServerAttribution } = useSoapboxConfig();
-
-  const getStatus = useCallback(makeGetStatus(), []);
-  const status = useAppSelector(state => getStatus(state, { id: statusId })) as StatusEntity;
-  const location = status.event!.location!;
-
-  const map = useRef<L.Map>();
-
-  useEffect(() => {
-    const latlng: [number, number] = [+location.get('latitude'), +location.get('longitude')];
-
-    map.current = L.map('event-map').setView(latlng, 15);
-
-    L.marker(latlng, {
-      title: location.get('name'),
-    }).addTo(map.current);
-
-    L.tileLayer(tileServer, {
-      attribution: tileServerAttribution,
-    }).addTo(map.current);
-
-    return () => {
-      map.current?.remove();
-    };
-  }, []);
-
-  const onClickClose = () => {
-    onClose('EVENT_MAP');
-  };
-
-  const onClickNavigate = () => {
-    window.open(`https://www.openstreetmap.org/directions?from=&to=${location.get('latitude')},${location.get('longitude')}#map=14/${location.get('latitude')}/${location.get('longitude')}`, '_blank');
-  };
-
-  return (
-    <Modal
-      title={<FormattedMessage id='column.event_map' defaultMessage='Event location' />}
-      onClose={onClickClose}
-      width='2xl'
-    >
-      <Stack alignItems='center' space={6}>
-        <div className='h-96 w-full' id='event-map' />
-        <Button onClick={onClickNavigate} icon={require('@tabler/icons/gps.svg')}>
-          <FormattedMessage id='event_map.navigate' defaultMessage='Navigate' />
-        </Button>
-      </Stack>
-    </Modal>
-  );
-};
-
-export default EventMapModal;
diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts
index 842850fbc..3412c36ba 100644
--- a/app/soapbox/features/ui/util/async-components.ts
+++ b/app/soapbox/features/ui/util/async-components.ts
@@ -530,10 +530,6 @@ export function EventDiscussion() {
   return import(/* webpackChunkName: "features/event" */'../../event/event-discussion');
 }
 
-export function EventMapModal() {
-  return import(/* webpackChunkName: "modals/event-map-modal" */'../components/modals/event-map-modal');
-}
-
 export function EventParticipantsModal() {
   return import(/* webpackChunkName: "modals/event-participants-modal" */'../components/modals/event-participants-modal');
 }
diff --git a/app/soapbox/normalizers/soapbox/soapbox-config.ts b/app/soapbox/normalizers/soapbox/soapbox-config.ts
index 089833d7f..3cfedb7af 100644
--- a/app/soapbox/normalizers/soapbox/soapbox-config.ts
+++ b/app/soapbox/normalizers/soapbox/soapbox-config.ts
@@ -114,8 +114,6 @@ export const SoapboxConfigRecord = ImmutableRecord({
   displayCta: true,
   /** Whether to inject suggested profiles into the Home feed. */
   feedInjection: true,
-  tileServer: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-  tileServerAttribution: '© OpenStreetMap Contributors',
 }, 'SoapboxConfig');
 
 type SoapboxConfigMap = ImmutableMap<string, any>;
diff --git a/package.json b/package.json
index f09bd9c11..d43fc9a6a 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,6 @@
     "@types/escape-html": "^1.0.1",
     "@types/http-link-header": "^1.0.3",
     "@types/jest": "^28.1.4",
-    "@types/leaflet": "^1.8.0",
     "@types/lodash": "^4.14.180",
     "@types/object-assign": "^4.0.30",
     "@types/object-fit-images": "^3.2.3",
@@ -139,7 +138,6 @@
     "intl-pluralrules": "^1.3.1",
     "is-nan": "^1.2.1",
     "jsdoc": "~3.6.7",
-    "leaflet": "^1.8.0",
     "libphonenumber-js": "^1.10.8",
     "line-awesome": "^1.3.0",
     "localforage": "^1.10.0",
diff --git a/webpack/rules/assets.ts b/webpack/rules/assets.ts
index 0f5648987..e9dd0202a 100644
--- a/webpack/rules/assets.ts
+++ b/webpack/rules/assets.ts
@@ -13,7 +13,6 @@ const rules: RuleSetRule[] = [{
   include: [
     resolve('app', 'assets', 'images'),
     resolve('node_modules', 'emoji-datasource'),
-    resolve('node_modules', 'leaflet'),
   ],
   generator: {
     filename: 'packs/images/[name]-[contenthash:8][ext]',
diff --git a/yarn.lock b/yarn.lock
index b70288046..433de7543 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2538,11 +2538,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/geojson@*":
-  version "7946.0.10"
-  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.10.tgz#6dfbf5ea17142f7f9a043809f1cd4c448cb68249"
-  integrity sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==
-
 "@types/graceful-fs@^4.1.3":
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.5.tgz#21ffba0d98da4350db64891f92a9e5db3cdb4e15"
@@ -2651,13 +2646,6 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
-"@types/leaflet@^1.8.0":
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.8.0.tgz#dc92d3e868fb6d5067b4b59fa08cd4441f84fabe"
-  integrity sha512-+sXFmiJTFdhaXXIGFlV5re9AdqtAODoXbGAvxx02e5SHXL3ir7ClP5J7pahO8VmzKY3dth4RUS1nf2BTT+DW1A==
-  dependencies:
-    "@types/geojson" "*"
-
 "@types/lodash@^4.14.180":
   version "4.14.180"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.180.tgz#4ab7c9ddfc92ec4a887886483bc14c79fb380670"
@@ -7953,11 +7941,6 @@ language-tags@^1.0.5:
   dependencies:
     language-subtag-registry "~0.3.2"
 
-leaflet@^1.8.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.8.0.tgz#4615db4a22a304e8e692cae9270b983b38a2055e"
-  integrity sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA==
-
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"

From 6317930b304568bf4c099537eb9a5ffe31af2857 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 4 Dec 2022 12:34:09 +0100
Subject: [PATCH 31/32] Document events endpoints
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/utils/features.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/app/soapbox/utils/features.ts b/app/soapbox/utils/features.ts
index efbbbda37..ecbc09635 100644
--- a/app/soapbox/utils/features.ts
+++ b/app/soapbox/utils/features.ts
@@ -280,6 +280,20 @@ const getInstanceFeatures = (instance: Instance) => {
      */
     ethereumLogin: v.software === MITRA,
 
+    /**
+     * Ability to create and perform actions on events.
+     * @see POST /api/v1/pleroma/events
+     * @see GET /api/v1/pleroma/events/joined_events
+     * @see PUT /api/v1/pleroma/events/:id
+     * @see GET /api/v1/pleroma/events/:id/participations
+     * @see GET /api/v1/pleroma/events/:id/participation_requests
+     * @see POST /api/v1/pleroma/events/:id/participation_requests/:participant_id/authorize
+     * @see POST /api/v1/pleroma/events/:id/participation_requests/:participant_id/reject
+     * @see POST /api/v1/pleroma/events/:id/join
+     * @see POST /api/v1/pleroma/events/:id/leave
+     * @see GET /api/v1/pleroma/events/:id/ics
+     * @see GET /api/v1/pleroma/search/location
+     */
     events: v.software === PLEROMA && v.build === REBASED && gte(v.version, '2.4.50'),
 
     /**

From ee8a424d2893d9e9b6692346e535687f528d3d97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Tue, 6 Dec 2022 16:18:42 +0100
Subject: [PATCH 32/32] lint
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/features/event/event-information.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/soapbox/features/event/event-information.tsx b/app/soapbox/features/event/event-information.tsx
index ce9d9b365..986dff0f9 100644
--- a/app/soapbox/features/event/event-information.tsx
+++ b/app/soapbox/features/event/event-information.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { FormattedDate, FormattedMessage } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
 import { fetchStatus } from 'soapbox/actions/statuses';
 import MissingIndicator from 'soapbox/components/missing-indicator';
 import StatusContent from 'soapbox/components/status-content';