From 3e16e43326ca901c2a7e0a5266bb7e7c23d1eda3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Mon, 27 Oct 2025 15:56:22 +0100
Subject: [PATCH] pl-fe: preparing for compose form panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 .../src/features/compose/components/compose-form.tsx | 11 ++++++-----
 .../compose/components/content-type-button.tsx       |  7 ++++---
 .../compose/components/language-dropdown.tsx         |  5 +++--
 .../features/compose/components/privacy-dropdown.tsx | 12 ++++++++----
 4 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/packages/pl-fe/src/features/compose/components/compose-form.tsx b/packages/pl-fe/src/features/compose/components/compose-form.tsx
index 3ecd9345e..9294483cc 100644
--- a/packages/pl-fe/src/features/compose/components/compose-form.tsx
+++ b/packages/pl-fe/src/features/compose/components/compose-form.tsx
@@ -122,9 +122,10 @@ interface IComposeForm<ID extends string> {
   group?: string;
   withAvatar?: boolean;
   transparent?: boolean;
+  compact?: boolean;
 }
 
-const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickableAreaRef, event, group, withAvatar, transparent }: IComposeForm<ID>) => {
+const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickableAreaRef, event, group, withAvatar, transparent, compact }: IComposeForm<ID>) => {
   const history = useHistory();
   const intl = useIntl();
   const dispatch = useAppDispatch();
@@ -323,9 +324,9 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
 
   const selectButtons = [];
 
-  if (features.privacyScopes && !group && !groupId) selectButtons.push(<PrivacyDropdown key='privacy-dropdown' composeId={id} />);
-  if (features.richText) selectButtons.push(<ContentTypeButton key='compose-type-button' composeId={id} />);
-  if (features.postLanguages) selectButtons.push(<LanguageDropdown key='language-dropdown' composeId={id} />);
+  if (features.privacyScopes && !group && !groupId) selectButtons.push(<PrivacyDropdown key='privacy-dropdown' composeId={id} compact={compact} />);
+  if (features.richText) selectButtons.push(<ContentTypeButton key='compose-type-button' composeId={id} compact={compact} />);
+  if (features.postLanguages) selectButtons.push(<LanguageDropdown key='language-dropdown' composeId={id} compact={compact} />);
 
   const actionsMenu: Menu = [];
 
@@ -425,7 +426,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
         <div className='⁂-compose-form__actions'>
           {maxTootChars && (
             <div className='⁂-compose-form__counter'>
-              <TextCharacterCounter max={maxTootChars} text={text} />
+              {!compact && <TextCharacterCounter max={maxTootChars} text={text} />}
               <VisualCharacterCounter max={maxTootChars} text={text} />
             </div>
           )}
diff --git a/packages/pl-fe/src/features/compose/components/content-type-button.tsx b/packages/pl-fe/src/features/compose/components/content-type-button.tsx
index 4242c5d70..fffb5cda9 100644
--- a/packages/pl-fe/src/features/compose/components/content-type-button.tsx
+++ b/packages/pl-fe/src/features/compose/components/content-type-button.tsx
@@ -19,9 +19,10 @@ const messages = defineMessages({
 
 interface IContentTypeButton {
   composeId: string;
+  compact?: boolean;
 }
 
-const ContentTypeButton: React.FC<IContentTypeButton> = ({ composeId }) => {
+const ContentTypeButton: React.FC<IContentTypeButton> = ({ composeId, compact }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const instance = useInstance();
@@ -88,10 +89,10 @@ const ContentTypeButton: React.FC<IContentTypeButton> = ({ composeId }) => {
       <Button
         theme='muted'
         size='xs'
-        text={option?.text}
+        text={compact ? undefined : option?.text}
         icon={option?.icon}
         secondaryIcon={require('@phosphor-icons/core/regular/caret-down.svg')}
-        title={intl.formatMessage(messages.change_content_type)}
+        title={compact ? option?.text : intl.formatMessage(messages.change_content_type)}
       />
     </DropdownMenu>
   );
diff --git a/packages/pl-fe/src/features/compose/components/language-dropdown.tsx b/packages/pl-fe/src/features/compose/components/language-dropdown.tsx
index ea1ddf2af..290907a25 100644
--- a/packages/pl-fe/src/features/compose/components/language-dropdown.tsx
+++ b/packages/pl-fe/src/features/compose/components/language-dropdown.tsx
@@ -218,9 +218,10 @@ const getLanguageDropdown = (composeId: string): React.FC<ILanguageDropdown> =>
 
 interface ILanguageDropdownButton {
   composeId: string;
+  compact?: boolean;
 }
 
-const LanguageDropdownButton: React.FC<ILanguageDropdownButton> = ({ composeId }) => {
+const LanguageDropdownButton: React.FC<ILanguageDropdownButton> = ({ composeId, compact }) => {
   const intl = useIntl();
 
   const {
@@ -232,7 +233,7 @@ const LanguageDropdownButton: React.FC<ILanguageDropdownButton> = ({ composeId }
 
   const languagesCount = Object.keys(textMap).length;
 
-  let buttonLabel = intl.formatMessage(messages.languagePrompt);
+  let buttonLabel = compact ? undefined : intl.formatMessage(messages.languagePrompt);
   if (language) {
     const list: string[] = [languagesObject[(modifiedLanguage || language) as Language]];
     if (languagesCount) list.push(intl.formatMessage(messages.multipleLanguages, {
diff --git a/packages/pl-fe/src/features/compose/components/privacy-dropdown.tsx b/packages/pl-fe/src/features/compose/components/privacy-dropdown.tsx
index 5b8b1c046..2a4238f5e 100644
--- a/packages/pl-fe/src/features/compose/components/privacy-dropdown.tsx
+++ b/packages/pl-fe/src/features/compose/components/privacy-dropdown.tsx
@@ -122,10 +122,12 @@ const getItems = (features: Features, lists: ReturnType<typeof getOrderedLists>,
 
 interface IPrivacyDropdown {
   composeId: string;
+  compact?: boolean;
 }
 
 const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
   composeId,
+  compact,
 }) => {
   const intl = useIntl();
   const features = useFeatures();
@@ -173,17 +175,19 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
     return null;
   }
 
+  const text = compose.federated ? valueOption?.text : intl.formatMessage(messages.local, {
+    privacy: valueOption?.text,
+  });
+
   return (
     <DropdownMenu items={items} width='16rem'>
       <Button
         theme='muted'
         size='xs'
-        text={compose.federated ? valueOption?.text : intl.formatMessage(messages.local, {
-          privacy: valueOption?.text,
-        })}
+        text={compact ? undefined : text}
         icon={valueOption?.icon}
         secondaryIcon={require('@phosphor-icons/core/regular/caret-down.svg')}
-        title={intl.formatMessage(messages.change_privacy)}
+        title={compact ? text : intl.formatMessage(messages.change_privacy)}
       />
     </DropdownMenu>
   );