pl-fe: add interaction requests config suggestion

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/features/compose/components/warning.tsx

@@ -5,17 +5,28 @@ import Motion from '../../ui/util/optional-motion';
 
 interface IWarning {
   message: React.ReactNode;
+  animated?: boolean;
 }
 
 /** Warning message displayed in ComposeForm. */
-const Warning: React.FC<IWarning> = ({ message }) => (
-  <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
-    {({ opacity, scaleX, scaleY }) => (
-      <div className='rounded border border-solid border-gray-400 bg-transparent px-2.5 py-2 text-xs text-gray-900 dark:border-gray-800 dark:text-white' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>
-        {message}
-      </div>
-    )}
-  </Motion>
-);
+const Warning: React.FC<IWarning> = ({ message, animated }) => {
+  const className = 'rounded border border-solid border-gray-400 bg-transparent px-2.5 py-2 text-xs text-gray-900 dark:border-gray-800 dark:text-white';
+
+  if (animated) return (
+    <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
+      {({ opacity, scaleX, scaleY }) => (
+        <div className={className} style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>
+          {message}
+        </div>
+      )}
+    </Motion>
+  );
+
+  return (
+    <div className={className}>
+      {message}
+    </div>
+  );
+};
 
 export { Warning as default };

packages/pl-fe/src/features/compose/containers/warning-container.tsx

@@ -37,6 +37,7 @@ const WarningWrapper: React.FC<IWarningWrapper> = ({ composeId }) => {
             }}
           />
         )}
+        animated
       />
     );
   }
@@ -50,6 +51,7 @@ const WarningWrapper: React.FC<IWarningWrapper> = ({ composeId }) => {
             defaultMessage="This post won't be listed under any hashtag as it is unlisted. Only public posts can be searched by hashtag."
           />
         )}
+        animated
       />
     );
   }
@@ -64,7 +66,7 @@ const WarningWrapper: React.FC<IWarningWrapper> = ({ composeId }) => {
       </span>
     );
 
-    return <Warning message={message} />;
+    return <Warning message={message} animated />;
   }
 
   return null;

packages/pl-fe/src/locales/en.json

@@ -1007,6 +1007,7 @@
   "interaction_policies.entry.public": "Everyone",
   "interaction_policies.fail": "Failed to update interaction policies",
   "interaction_policies.mentioned_warning": "Mentioned users can always reply.",
+  "interaction_policies.preferences_hint": "Control, who can interact with this post. You can also configure the default interaction policies in <link>Preferences > Interaction policies</link>.",
   "interaction_policies.rule.always": "Always",
   "interaction_policies.rule.with_approval": "Require approval",
   "interaction_policies.success": "Updated interaction policies",

packages/pl-fe/src/modals/compose-interaction-policy-modal.tsx

@@ -1,9 +1,11 @@
 import React, { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
 
 import { changeComposeInteractionPolicyOption } from 'pl-fe/actions/compose';
 import Modal from 'pl-fe/components/ui/modal';
 import Stack from 'pl-fe/components/ui/stack';
+import Warning from 'pl-fe/features/compose/components/warning';
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
 import { useCompose } from 'pl-fe/hooks/use-compose';
 import { InteractionPolicyConfig, type Policy, type Rule, type Scope } from 'pl-fe/pages/settings/interaction-policies';
@@ -51,6 +53,21 @@ const ComposeInteractionPolicyModal: React.FC<BaseModalProps & ComposeInteractio
       closePosition={composeId === 'compose-modal' ? 'left' : undefined}
     >
       <Stack space={4}>
+        <Warning
+          message={
+            <FormattedMessage
+              id='interaction_policies.preferences_hint'
+              defaultMessage='Control, who can interact with this post. You can also configure the default interaction policies in <link>Preferences > Interaction policies</link>.'
+              values={{
+                link: (children: React.ReactNode) => (
+                  <Link className='font-bold text-gray-800 hover:underline dark:text-gray-200' to={'/settings/interaction_policies'}>
+                    {children}
+                  </Link>
+                ),
+              }}
+            />
+          }
+        />
         <InteractionPolicyConfig
           interactionPolicy={interactionPolicy}
           visibility={compose.privacy as 'public'}