Add local-only option back as a federation setting dropdown

app/javascript/flavours/glitch/features/compose/components/compose_form.jsx

@@ -29,6 +29,7 @@ import { countableText } from '../util/counter';
 import { CharacterCounter } from './character_counter';
 import { ContentTypeButton } from './content_type_button';
 import { EditIndicator } from './edit_indicator';
+import { FederationButton } from './federation_button';
 import { NavigationBar } from './navigation_bar';
 import { PollForm } from "./poll_form";
 import { ReplyIndicator } from './reply_indicator';
@@ -312,6 +313,7 @@ class ComposeForm extends ImmutablePureComponent {
                 {!this.props.spoilerAlwaysOn && <SpoilerButtonContainer />}
                 <ContentTypeButton />
                 <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
+                <FederationButton />
                 <CharacterCounter max={maxChars} text={this.getFulltextForCharacterCounting()} />
               </div>
 

app/javascript/flavours/glitch/features/compose/components/federation_button.jsx

@@ -0,0 +1,94 @@
+import { useCallback, useState, useRef } from 'react';
+
+import { useIntl, defineMessages } from 'react-intl';
+
+import Overlay from 'react-overlays/Overlay';
+
+import ShareIcon from '@/material-icons/400-24px/share.svg?react';
+import ShareOffIcon from '@/material-icons/400-24px/share_off.svg?react';
+import { changeComposeAdvancedOption } from 'flavours/glitch/actions/compose';
+import { IconButton } from 'flavours/glitch/components/icon_button';
+import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';
+
+import DropdownMenu from './dropdown_menu';
+
+const messages = defineMessages({
+  change_federation_settings: { id: 'compose.change_federation', defaultMessage: 'Change federation settings' },
+  local_only_label: { id: 'federation.local_only.short', defaultMessage: 'Local-only' },
+  local_only_meta: { id: 'federation.local_only.long', defaultMessage: 'Prevent this post from reaching other servers' },
+  federated_label: { id: 'federation.federated.short', defaultMessage: 'Federated' },
+  federated_meta: { id: 'federation.federated.long', defaultMessage: 'Allow this post to reach other servers' },
+});
+
+export const FederationButton = () => {
+  const intl = useIntl();
+
+  const do_not_federate = useAppSelector((state) => state.getIn(['compose', 'advanced_options', 'do_not_federate']));
+  const dispatch = useAppDispatch();
+
+  const containerRef = useRef(null);
+
+  const [activeElement, setActiveElement] = useState(null);
+  const [open, setOpen] = useState(false);
+  const [placement, setPlacement] = useState('bottom');
+
+  const handleToggle = useCallback(() => {
+    if (open && activeElement) {
+      activeElement.focus({ preventScroll: true });
+      setActiveElement(null);
+    }
+
+    setOpen(!open);
+  }, [open, setOpen, activeElement, setActiveElement]);
+
+  const handleClose = useCallback(() => {
+    if (open && activeElement) {
+      activeElement.focus({ preventScroll: true });
+      setActiveElement(null);
+    }
+
+    setOpen(false);
+  }, [open, setOpen, activeElement, setActiveElement]);
+
+  const handleChange = useCallback((value) => {
+    dispatch(changeComposeAdvancedOption('do_not_federate', value === 'local-only'));
+  }, [dispatch]);
+
+  const handleOverlayEnter = useCallback((state) => {
+    setPlacement(state.placement);
+  }, [setPlacement]);
+
+  const options = [
+    { icon: 'link', iconComponent: ShareIcon, value: 'federated', text: intl.formatMessage(messages.federated_label), meta: intl.formatMessage(messages.federated_meta) },
+    { icon: 'link-slash', iconComponent: ShareOffIcon, value: 'local-only', text: intl.formatMessage(messages.local_only_label), meta: intl.formatMessage(messages.local_only_meta) },
+  ];
+
+  return (
+    <div ref={containerRef}>
+      <IconButton
+        icon={do_not_federate ? 'link-slash' : 'link'}
+        onClick={handleToggle}
+        iconComponent={do_not_federate ? ShareOffIcon : ShareIcon}
+        title={intl.formatMessage(messages.change_federation_settings)}
+        active={open}
+        size={18}
+        inverted
+      />
+
+      <Overlay show={open} offset={[5, 5]} placement={placement} flip target={containerRef} popperConfig={{ strategy: 'fixed', onFirstUpdate: handleOverlayEnter }}>
+        {({ props, placement }) => (
+          <div {...props}>
+            <div className={`dropdown-animation privacy-dropdown__dropdown ${placement}`}>
+              <DropdownMenu
+                items={options}
+                value={do_not_federate ? 'local-only' : 'federated'}
+                onClose={handleClose}
+                onChange={handleChange}
+              />
+            </div>
+          </div>
+        )}
+      </Overlay>
+    </div>
+  );
+};