Status drafts

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

src/components/modal-root.tsx

@@ -5,6 +5,7 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
 import { cancelReplyCompose } from 'soapbox/actions/compose';
+import { saveDraftStatus } from 'soapbox/actions/draft-statuses';
 import { cancelEventCompose } from 'soapbox/actions/events';
 import { openModal, closeModal } from 'soapbox/actions/modals';
 import { useAppDispatch, usePrevious } from 'soapbox/hooks';
@@ -16,6 +17,7 @@ import type { ReducerRecord as ReducerComposeEvent } from 'soapbox/reducers/comp
 const messages = defineMessages({
   confirm: { id: 'confirmations.cancel.confirm', defaultMessage: 'Discard' },
   cancelEditing: { id: 'confirmations.cancel_editing.confirm', defaultMessage: 'Cancel editing' },
+  saveDraft: { id: 'confirmations.cancel_editing.save_draft', defaultMessage: 'Save draft' },
 });
 
 export const checkComposeContent = (compose?: ReturnType<typeof ReducerCompose>) => {
@@ -90,6 +92,12 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
           onCancel: () => {
             dispatch(closeModal('CONFIRM'));
           },
+          secondary: intl.formatMessage(messages.saveDraft),
+          onSecondary: isEditing ? undefined : () => {
+            dispatch(saveDraftStatus('compose-modal'));
+            dispatch(closeModal('COMPOSE'));
+            dispatch(cancelReplyCompose());
+          },
         }));
       } else if (hasEventComposeContent && type === 'COMPOSE_EVENT') {
         const isEditing = getState().compose_event.id !== null;

src/components/sidebar-menu.tsx

@@ -37,6 +37,7 @@ const messages = defineMessages({
   events: { id: 'column.events', defaultMessage: 'Events' },
   invites: { id: 'navigation_bar.invites', defaultMessage: 'Invites' },
   developers: { id: 'navigation.developers', defaultMessage: 'Developers' },
+  drafts: { id: 'navigation.drafts', defaultMessage: 'Drafts' },
   addAccount: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' },
   followRequests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
@@ -88,6 +89,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
   const sidebarOpen = useAppSelector((state) => state.sidebar.sidebarOpen);
   const settings = useAppSelector((state) => getSettings(state));
   const followRequestsCount = useAppSelector((state) => state.user_lists.follow_requests.items.count());
+  const draftCount = useAppSelector((state) => state.draft_statuses.size);
   const groupsPath = useGroupsPath();
 
   const closeButtonRef = React.useRef(null);
@@ -243,6 +245,15 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                     />
                   )}
 
+                  {draftCount > 0 && (
+                    <SidebarLink
+                      to='/draft_statuses'
+                      icon={require('@tabler/icons/notes.svg')}
+                      text={intl.formatMessage(messages.drafts)}
+                      onClick={onClose}
+                    />
+                  )}
+
                   {features.publicTimeline && <>
                     <Divider />
 

src/components/sidebar-navigation.tsx

@@ -15,6 +15,7 @@ const messages = defineMessages({
   lists: { id: 'column.lists', defaultMessage: 'Lists' },
   events: { id: 'column.events', defaultMessage: 'Events' },
   developers: { id: 'navigation.developers', defaultMessage: 'Developers' },
+  drafts: { id: 'navigation.drafts', defaultMessage: 'Drafts' },
 });
 
 /** Desktop sidebar with links to different views in the app. */
@@ -31,6 +32,7 @@ const SidebarNavigation = () => {
   const notificationCount = useAppSelector((state) => state.notifications.unread);
   const followRequestsCount = useAppSelector((state) => state.user_lists.follow_requests.items.count());
   const dashboardCount = useAppSelector((state) => state.admin.openReports.count() + state.admin.awaitingApproval.count());
+  const draftCount = useAppSelector((state) => state.draft_statuses.size);
 
   const restrictUnauth = instance.pleroma.metadata.restrict_unauthenticated;
 
@@ -78,6 +80,15 @@ const SidebarNavigation = () => {
           text: intl.formatMessage(messages.developers),
         });
       }
+
+      if (draftCount > 0) {
+        menu.push({
+          to: '/draft_statuses',
+          icon: require('@tabler/icons/notes.svg'),
+          text: intl.formatMessage(messages.drafts),
+          count: draftCount,
+        });
+      }
     }
 
     return menu;