From fa33eff372ed49cb2463af9b1327bc92cb368da8 Mon Sep 17 00:00:00 2001
From: Echo <ChaosExAnima@users.noreply.github.com>
Date: Wed, 11 Jun 2025 13:12:39 +0200
Subject: [PATCH] [Glitch] Prevent two composers from being shown

Port 8cf246e4d3305a71e647c2f374468141b8bc846c to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../containers/compose_form_container.js      |  4 +-
 .../features/ui/components/columns_area.jsx   |  2 +-
 .../features/ui/components/compose_panel.jsx  | 54 -------------------
 .../features/ui/components/compose_panel.tsx  | 52 ++++++++++++++++++
 .../flavours/glitch/hooks/useLayout.ts        | 13 +++++
 5 files changed, 67 insertions(+), 58 deletions(-)
 delete mode 100644 app/javascript/flavours/glitch/features/ui/components/compose_panel.jsx
 create mode 100644 app/javascript/flavours/glitch/features/ui/components/compose_panel.tsx
 create mode 100644 app/javascript/flavours/glitch/hooks/useLayout.ts

diff --git a/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js b/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js
index 4b32b0a829..fab954b9b1 100644
--- a/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js
+++ b/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js
@@ -1,5 +1,3 @@
-import { injectIntl } from 'react-intl';
-
 import { connect } from 'react-redux';
 
 import {
@@ -101,4 +99,4 @@ const mapDispatchToProps = (dispatch) => ({
 
 });
 
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ComposeForm));
+export default connect(mapStateToProps, mapDispatchToProps)(ComposeForm);
diff --git a/app/javascript/flavours/glitch/features/ui/components/columns_area.jsx b/app/javascript/flavours/glitch/features/ui/components/columns_area.jsx
index ca24596aa3..94497f62dd 100644
--- a/app/javascript/flavours/glitch/features/ui/components/columns_area.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/columns_area.jsx
@@ -23,7 +23,7 @@ import { useColumnsContext } from '../util/columns_context';
 
 import BundleColumnError from './bundle_column_error';
 import { ColumnLoading } from './column_loading';
-import ComposePanel from './compose_panel';
+import { ComposePanel } from './compose_panel';
 import DrawerLoading from './drawer_loading';
 import NavigationPanel from './navigation_panel';
 
diff --git a/app/javascript/flavours/glitch/features/ui/components/compose_panel.jsx b/app/javascript/flavours/glitch/features/ui/components/compose_panel.jsx
deleted file mode 100644
index da53664da1..0000000000
--- a/app/javascript/flavours/glitch/features/ui/components/compose_panel.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { connect } from 'react-redux';
-
-import { mountCompose, unmountCompose } from 'flavours/glitch/actions/compose';
-import ServerBanner from 'flavours/glitch/components/server_banner';
-import { Search } from 'flavours/glitch/features/compose/components/search';
-import ComposeFormContainer from 'flavours/glitch/features/compose/containers/compose_form_container';
-import { LinkFooter } from 'flavours/glitch/features/ui/components/link_footer';
-import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
-
-class ComposePanel extends PureComponent {
-  static propTypes = {
-    identity: identityContextPropShape,
-    dispatch: PropTypes.func.isRequired,
-  };
-
-  componentDidMount () {
-    const { dispatch } = this.props;
-    dispatch(mountCompose());
-  }
-
-  componentWillUnmount () {
-    const { dispatch } = this.props;
-    dispatch(unmountCompose());
-  }
-
-  render() {
-    const { signedIn } = this.props.identity;
-
-    return (
-      <div className='compose-panel'>
-        <Search openInRoute />
-
-        {!signedIn && (
-          <>
-            <ServerBanner />
-            <div className='flex-spacer' />
-          </>
-        )}
-
-        {signedIn && (
-          <ComposeFormContainer singleColumn />
-        )}
-
-        <LinkFooter />
-      </div>
-    );
-  }
-
-}
-
-export default connect()(withIdentity(ComposePanel));
diff --git a/app/javascript/flavours/glitch/features/ui/components/compose_panel.tsx b/app/javascript/flavours/glitch/features/ui/components/compose_panel.tsx
new file mode 100644
index 0000000000..17154973fd
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/ui/components/compose_panel.tsx
@@ -0,0 +1,52 @@
+import { useCallback, useEffect } from 'react';
+
+import { useLayout } from '@/flavours/glitch/hooks/useLayout';
+import { useAppDispatch, useAppSelector } from '@/flavours/glitch/store';
+import {
+  mountCompose,
+  unmountCompose,
+} from 'flavours/glitch/actions/compose';
+import ServerBanner from 'flavours/glitch/components/server_banner';
+import { Search } from 'flavours/glitch/features/compose/components/search';
+import ComposeFormContainer from 'flavours/glitch/features/compose/containers/compose_form_container';
+import { LinkFooter } from 'flavours/glitch/features/ui/components/link_footer';
+import { useIdentity } from 'flavours/glitch/identity_context';
+
+export const ComposePanel: React.FC = () => {
+  const dispatch = useAppDispatch();
+  const { signedIn } = useIdentity();
+  const hideComposer = useAppSelector((state) => {
+    const mounted = state.compose.get('mounted');
+    if (typeof mounted === 'number') {
+      return mounted > 1;
+    }
+    return false;
+  });
+
+  useEffect(() => {
+    dispatch(mountCompose());
+    return () => {
+      dispatch(unmountCompose());
+    };
+  }, [dispatch]);
+
+  const { singleColumn } = useLayout();
+
+  return (
+    <div className='compose-panel'>
+      <Search singleColumn={singleColumn} />
+
+      {!signedIn && (
+        <>
+          <ServerBanner />
+          <div className='flex-spacer' />
+        </>
+      )}
+
+      {signedIn && !hideComposer && <ComposeFormContainer singleColumn />}
+      {signedIn && hideComposer && <div className='compose-form' />}
+
+      <LinkFooter multiColumn={!singleColumn} />
+    </div>
+  );
+};
diff --git a/app/javascript/flavours/glitch/hooks/useLayout.ts b/app/javascript/flavours/glitch/hooks/useLayout.ts
new file mode 100644
index 0000000000..fc1cf136bf
--- /dev/null
+++ b/app/javascript/flavours/glitch/hooks/useLayout.ts
@@ -0,0 +1,13 @@
+import type { LayoutType } from '../is_mobile';
+import { useAppSelector } from '../store';
+
+export const useLayout = () => {
+  const layout = useAppSelector(
+    (state) => state.meta.get('layout') as LayoutType,
+  );
+
+  return {
+    singleColumn: layout === 'single-column' || layout === 'mobile',
+    layout,
+  };
+};