[Glitch] Prevent two composers from being shown

Port 8cf246e4d3 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

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>
+  );
+};