From 705b4a29bc5a055dd8e46d1c7729019660ff020b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 12 Oct 2023 23:43:52 +0200
Subject: [PATCH] Improve UI, open compose modals in separate window
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 src/actions/compose.ts                                    | 8 ++++++--
 src/components/scroll-top-button.tsx                      | 2 +-
 src/components/status-content.tsx                         | 8 ++++----
 src/features/ui/components/compose-button.tsx             | 2 +-
 .../modals/compose-event-modal/compose-event-modal.tsx    | 2 +-
 src/features/ui/util/global-hotkeys.tsx                   | 2 +-
 src/locales/en.json                                       | 2 +-
 7 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/actions/compose.ts b/src/actions/compose.ts
index 00a52d017..94e7d30c0 100644
--- a/src/actions/compose.ts
+++ b/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);
diff --git a/src/components/scroll-top-button.tsx b/src/components/scroll-top-button.tsx
index 58d356c2a..224921725 100644
--- a/src/components/scroll-top-button.tsx
+++ b/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}
diff --git a/src/components/status-content.tsx b/src/components/status-content.tsx
index 26a24c9c5..7207d8382 100644
--- a/src/components/status-content.tsx
+++ b/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'
diff --git a/src/features/ui/components/compose-button.tsx b/src/features/ui/components/compose-button.tsx
index 94bac7bbc..8f449f0bf 100644
--- a/src/features/ui/components/compose-button.tsx
+++ b/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'));
   };
 
diff --git a/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx b/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
index f4afa2932..aacb5ea8b 100644
--- a/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
+++ b/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 && (
diff --git a/src/features/ui/util/global-hotkeys.tsx b/src/features/ui/util/global-hotkeys.tsx
index 5c043d284..7792a01cc 100644
--- a/src/features/ui/util/global-hotkeys.tsx
+++ b/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'));
     }
   };
diff --git a/src/locales/en.json b/src/locales/en.json
index 4d4591097..3069a6df0 100644
--- a/src/locales/en.json
+++ b/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",