Improve UI, open compose modals in separate window

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

src/actions/compose.ts

@@ -150,7 +150,9 @@ interface ComposeReplyAction {
 
 const replyCompose = (status: Status) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
-    if (!isUserTouching()) return window.open(`/compose?in_reply_to=${status.id}`, '_blank');
+    if (!isUserTouching()) {
+      return window.open(`/compose?in_reply_to=${status.id}`, 'targetWindow', 'height=500,width=700');
+    }
     const state = getState();
     const instance = state.instance;
     const { explicitAddressing } = getFeatures(instance);
@@ -187,7 +189,9 @@ interface ComposeQuoteAction {
 
 const quoteCompose = (status: Status) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
-    if (!isUserTouching()) return window.open(`/compose?quote=${status.id}`, '_blank');
+    if (!isUserTouching()) {
+      return window.open(`/compose?quote=${status.id}`, 'targetWindow', 'height=500,width=700');
+    }
     const state = getState();
     const instance = state.instance;
     const { explicitAddressing } = getFeatures(instance);

src/components/scroll-top-button.tsx

@@ -86,7 +86,7 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
   }
 
   return (
-    <div className='fixed left-1/2 top-20 z-50 -translate-x-1/2'>
+    <div className='fixed left-1/2 top-16 z-50 -translate-x-1/2 lg:top-2'>
       <button
         className='flex cursor-pointer items-center space-x-1.5 whitespace-nowrap rounded-full bg-primary-600 px-4 py-2 text-white transition-transform hover:scale-105 hover:bg-primary-700 active:scale-100'
         onClick={handleClick}

src/components/status-content.tsx

@@ -189,11 +189,11 @@ const StatusContent: React.FC<IStatusContent> = ({
     if (translatable && status.translation) {
       output.push(
         <div className='flex flex-col gap-2 sm:flex-row'>
-          <div className='w-full grow'>
+          <div className='break-word-nested w-full grow'>
             {body}
           </div>
           <hr className='sm:hidden' />
-          <div className='w-full grow'>
+          <div className='break-word-nested w-full grow'>
             <Markup
               ref={node}
               tabIndex={0}
@@ -239,11 +239,11 @@ const StatusContent: React.FC<IStatusContent> = ({
     if (translatable && status.translation) {
       output.push(
         <div className='flex flex-col gap-2 sm:flex-row'>
-          <div className='w-full grow'>
+          <div className='break-word-nested w-full grow'>
             {body}
           </div>
           <hr className='sm:hidden' />
-          <div className='w-full grow'>
+          <div className='break-word-nested w-full grow'>
             <Markup
               tabIndex={0}
               key='translated_content'

src/features/ui/components/compose-button.tsx

@@ -26,7 +26,7 @@ const ComposeButton = () => {
 const HomeComposeButton = () => {
   const dispatch = useAppDispatch();
   const onOpenCompose = () => {
-    if (!isUserTouching()) return window.open('/compose', '_blank');
+    if (!isUserTouching()) return window.open('/compose', 'targetWindow', 'height=500,width=700');
     dispatch(openModal('COMPOSE'));
   };
 

src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx

@@ -279,7 +279,7 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
           onChange={onChangeHasEndTime}
         />
         <Text tag='span' theme='muted'>
-          <FormattedMessage id='compose_event.fields.has_end_time' defaultMessage='The event has end date' />
+          <FormattedMessage id='compose_event.fields.has_end_time' defaultMessage='This event has an end date' />
         </Text>
       </HStack>
       {endTime && (

src/features/ui/util/global-hotkeys.tsx

@@ -60,7 +60,7 @@ const GlobalHotkeys: React.FC<IGlobalHotkeys> = ({ children, node }) => {
     if (element) {
       ((element as any).__lexicalEditor as LexicalEditor).dispatchCommand(FOCUS_EDITOR_COMMAND, undefined);
     } else {
-      if (!isUserTouching()) return window.open('/compose', '_blank');
+      if (!isUserTouching()) return window.open('/compose', 'targetWindow', 'height=500,width=700');
       dispatch(openModal('COMPOSE'));
     }
   };

src/locales/en.json

@@ -398,7 +398,7 @@
   "compose_event.fields.description_placeholder": "Description",
   "compose_event.fields.end_time_label": "Event end date",
   "compose_event.fields.end_time_placeholder": "Event ends on…",
-  "compose_event.fields.has_end_time": "The event has end date",
+  "compose_event.fields.has_end_time": "This event has an end date",
   "compose_event.fields.location_label": "Event location",
   "compose_event.fields.name_label": "Event name",
   "compose_event.fields.name_placeholder": "Name",