dx: use shared FloatingActionButton component everywhere

src/frontend/components/FloatingActionButton.ts

@@ -13,25 +13,22 @@ import {Palette} from '~frontend/global-styles/palette';
 import {withTitle} from './withTitle';
 
 const FIXED_PROPS: IFloatingActionProps = {
-  distanceToEdge: {
-    vertical:
-      Dimensions.verticalSpaceTiny + Dimensions.verticalSpaceNormal + 24,
-    horizontal: Dimensions.horizontalSpaceBig,
-  },
   iconHeight: Dimensions.iconSizeNormal,
   iconWidth: Dimensions.iconSizeNormal,
   overlayColor: Palette.transparencyDark,
+  overrideWithAction: true,
 };
 
 export interface Props
-  extends Omit<
-    IFloatingActionProps,
-    | 'distanceToEdge'
-    | 'iconHeight'
-    | 'iconWidth'
-    | 'overlayColor'
-    | 'overrideWithAction'
-  > {
+  extends Pick<
+      IFloatingActionProps,
+      | 'color'
+      | 'distanceToEdge'
+      | 'floatingIcon'
+      | 'overrideWithAction'
+      | 'visible'
+    >,
+    Required<Pick<IFloatingActionProps, 'actions'>> {
   sel: string;
   title: string;
 }

src/frontend/screens/central/connections-tab/fab.ts

@@ -1,4 +1,4 @@
-// SPDX-FileCopyrightText: 2021-2022 The Manyverse Authors
+// SPDX-FileCopyrightText: 2021-2023 The Manyverse Authors
 //
 // SPDX-License-Identifier: MPL-2.0
 
@@ -7,18 +7,15 @@ import {Palette} from '~frontend/global-styles/palette';
 import {Dimensions} from '~frontend/global-styles/dimens';
 import {Images} from '~frontend/global-styles/images';
 import {t} from '~frontend/drivers/localization';
-import {FabProps} from '../fab';
+import {Props as FabProps} from '~frontend/components/FloatingActionButton';
 import {FAB_VERTICAL_DISTANCE_TO_EDGE} from '../styles';
 
 export default function floatingAction(): Stream<FabProps> {
-  return xs.of({
+  return xs.of<FabProps>({
     sel: 'fab',
     color: Palette.backgroundCTA,
     visible: false,
     actions: [],
-    iconHeight: 24,
-    iconWidth: 24,
-    overlayColor: Palette.transparencyDark,
     title: t('connections.floating_action_button.add_connection'),
     distanceToEdge: {
       vertical: FAB_VERTICAL_DISTANCE_TO_EDGE,

src/frontend/screens/central/connections-tab/index.ts

@@ -1,4 +1,4 @@
-// SPDX-FileCopyrightText: 2021-2022 The Manyverse Authors
+// SPDX-FileCopyrightText: 2021-2023 The Manyverse Authors
 //
 // SPDX-License-Identifier: MPL-2.0
 
@@ -7,6 +7,7 @@ import {ReactElement} from 'react';
 import {Reducer, StateSource} from '@cycle/state';
 import {ReactSource} from '@cycle/react';
 import {Command, NavSource} from 'cycle-native-navigation';
+import {Props as FabProps} from '~frontend/components/FloatingActionButton';
 import {State as AppState} from '~frontend/drivers/appstate';
 import {NetworkSource} from '~frontend/drivers/network';
 import {SSBSource} from '~frontend/drivers/ssb';
@@ -18,7 +19,6 @@ import view from './view';
 import navigation from './navigation';
 import floatingAction from './fab';
 import model from './model';
-import {FabProps} from '../fab';
 
 export interface Sources {
   screen: ReactSource;

src/frontend/screens/central/private-tab/fab.ts

@@ -1,4 +1,4 @@
-// SPDX-FileCopyrightText: 2020-2022 The Manyverse Authors
+// SPDX-FileCopyrightText: 2020-2023 The Manyverse Authors
 //
 // SPDX-License-Identifier: MPL-2.0
 
@@ -8,32 +8,30 @@ import {Palette} from '~frontend/global-styles/palette';
 import {Dimensions} from '~frontend/global-styles/dimens';
 import {t} from '~frontend/drivers/localization';
 import {Images} from '~frontend/global-styles/images';
-import {FabProps} from '../fab';
+import {Props as FabProps} from '~frontend/components/FloatingActionButton';
 import {FAB_VERTICAL_DISTANCE_TO_EDGE} from '../styles';
 
 export default function floatingAction(
   state$: Stream<State>,
 ): Stream<FabProps> {
-  return state$.map((state) => ({
-    sel: 'fab',
-    color: Palette.backgroundCTA,
-    visible: !!state.getPrivateFeedReadable,
-    actions: [
-      {
-        color: Palette.backgroundCTA,
-        name: 'recipients-input',
-        icon: Images.messagePlus,
-        text: t('private.floating_action_button.compose'),
+  return state$.map(
+    (state): FabProps => ({
+      sel: 'fab',
+      color: Palette.backgroundCTA,
+      visible: !!state.getPrivateFeedReadable,
+      actions: [
+        {
+          color: Palette.backgroundCTA,
+          name: 'recipients-input',
+          icon: Images.messagePlus,
+          text: t('private.floating_action_button.compose'),
+        },
+      ],
+      title: t('private.floating_action_button.compose'),
+      distanceToEdge: {
+        vertical: FAB_VERTICAL_DISTANCE_TO_EDGE,
+        horizontal: Dimensions.horizontalSpaceBig,
       },
-    ],
-    title: t('private.floating_action_button.compose'),
-    overrideWithAction: true,
-    iconHeight: 24,
-    iconWidth: 24,
-    overlayColor: Palette.transparencyDark,
-    distanceToEdge: {
-      vertical: FAB_VERTICAL_DISTANCE_TO_EDGE,
-      horizontal: Dimensions.horizontalSpaceBig,
-    },
-  }));
+    }),
+  );
 }

src/frontend/screens/central/private-tab/index.ts

@@ -1,4 +1,4 @@
-// SPDX-FileCopyrightText: 2020-2022 The Manyverse Authors
+// SPDX-FileCopyrightText: 2020-2023 The Manyverse Authors
 //
 // SPDX-License-Identifier: MPL-2.0
 
@@ -7,14 +7,14 @@ import {ReactElement} from 'react';
 import {ReactSource} from '@cycle/react';
 import {StateSource, Reducer} from '@cycle/state';
 import {Command, NavSource} from 'cycle-native-navigation';
+import {Props as FabProps} from '~frontend/components/FloatingActionButton';
 import {SSBSource} from '~frontend/drivers/ssb';
 import {State} from './model';
 import model from './model';
 import view from './view';
 import intent from './intent';
 import navigation from './navigation';
 import floatingAction from './fab';
-import {FabProps} from '../fab';
 
 export interface Sources {
   screen: ReactSource;

src/frontend/screens/central/public-tab/fab.ts

@@ -1,4 +1,4 @@
-// SPDX-FileCopyrightText: 2018-2022 The Manyverse Authors
+// SPDX-FileCopyrightText: 2018-2023 The Manyverse Authors
 //
 // SPDX-License-Identifier: MPL-2.0
 
@@ -8,34 +8,32 @@ import {Palette} from '~frontend/global-styles/palette';
 import {Dimensions} from '~frontend/global-styles/dimens';
 import {t} from '~frontend/drivers/localization';
 import {Images} from '~frontend/global-styles/images';
-import {FabProps} from '../fab';
+import {Props as FabProps} from '~frontend/components/FloatingActionButton';
 import {FAB_VERTICAL_DISTANCE_TO_EDGE} from '../styles';
 
 export default function floatingAction(
   state$: Stream<State>,
 ): Stream<FabProps> {
-  return state$.map((state) => ({
-    sel: 'fab',
-    color: state.hasComposeDraft
-      ? Palette.backgroundWarningAction
-      : Palette.backgroundCTA,
-    visible: !!state.selfFeedId && state.canPublishSSB,
-    actions: [
-      {
-        color: Palette.backgroundCTA,
-        name: 'compose',
-        icon: Images.pencil,
-        text: t('public.floating_action_button.compose'),
+  return state$.map(
+    (state): FabProps => ({
+      sel: 'fab',
+      color: state.hasComposeDraft
+        ? Palette.backgroundWarningAction
+        : Palette.backgroundCTA,
+      visible: !!state.selfFeedId && state.canPublishSSB,
+      actions: [
+        {
+          color: Palette.backgroundCTA,
+          name: 'compose',
+          icon: Images.pencil,
+          text: t('public.floating_action_button.compose'),
+        },
+      ],
+      title: t('profile.floating_action_button.compose'),
+      distanceToEdge: {
+        vertical: FAB_VERTICAL_DISTANCE_TO_EDGE,
+        horizontal: Dimensions.horizontalSpaceBig,
       },
-    ],
-    title: t('profile.floating_action_button.compose'),
-    overrideWithAction: true,
-    iconHeight: 24,
-    iconWidth: 24,
-    overlayColor: Palette.transparencyDark,
-    distanceToEdge: {
-      vertical: FAB_VERTICAL_DISTANCE_TO_EDGE,
-      horizontal: Dimensions.horizontalSpaceBig,
-    },
-  }));
+    }),
+  );
 }

src/frontend/screens/central/public-tab/index.ts

@@ -14,6 +14,7 @@ import {Command as AlertCommand, DialogSource} from '~frontend/drivers/dialogs';
 import {Toast} from '~frontend/drivers/toast';
 import messageEtc from '~frontend/components/messageEtc';
 import messageShare from '~frontend/components/messageShare';
+import {Props as FabProps} from '~frontend/components/FloatingActionButton';
 import {timestampAlert} from '~frontend/drivers/dialogs/sharedCommands';
 import intent from './intent';
 import view from './view';
@@ -22,7 +23,6 @@ import ssb from './ssb';
 import floatingAction from './fab';
 import asyncStorage from './asyncstorage';
 import navigation from './navigation';
-import {FabProps} from '../fab';
 
 export interface Sources {
   screen: ReactSource;

src/frontend/screens/central/styles.ts

@@ -1,4 +1,4 @@
-// SPDX-FileCopyrightText: 2018-2022 The Manyverse Authors
+// SPDX-FileCopyrightText: 2018-2023 The Manyverse Authors
 //
 // SPDX-License-Identifier: MPL-2.0
 
@@ -122,10 +122,4 @@ export const styles = StyleSheet.create({
     color: Palette.textBrand,
     textAlign: 'center',
   },
-
-  desktopFabContainer: {
-    position: 'absolute',
-    bottom: 0,
-    right: `calc(50vw - ${Dimensions.desktopMiddleWidth.px} * 0.5)`,
-  },
 });

src/frontend/screens/central/view.ts

@@ -1,4 +1,4 @@
-// SPDX-FileCopyrightText: 2018-2022 The Manyverse Authors
+// SPDX-FileCopyrightText: 2018-2023 The Manyverse Authors
 //
 // SPDX-License-Identifier: MPL-2.0
 
@@ -22,13 +22,15 @@ import {
   TouchableOpacityProps,
 } from 'react-native';
 import {h} from '@cycle/react';
-import {FloatingAction} from 'react-native-floating-action';
+import {
+  Props as FabProps,
+  FloatingActionButton,
+} from '~frontend/components/FloatingActionButton';
 import {t} from '~frontend/drivers/localization';
 import PublicTabIcon from '~frontend/components/tab-buttons/PublicTabIcon';
 import PrivateTabIcon from '~frontend/components/tab-buttons/PrivateTabIcon';
 import ActivityTabIcon from '~frontend/components/tab-buttons/ActivityTabIcon';
 import ConnectionsTabIcon from '~frontend/components/tab-buttons/ConnectionsTabIcon';
-import {withTitle} from '~frontend/components/withTitle';
 import ProgressBar from '~frontend/components/ProgressBar';
 import StatusBarBlank from '~frontend/components/StatusBarBlank';
 import {
@@ -39,7 +41,6 @@ import {
   PROGRESS_BAR_HEIGHT,
 } from './styles';
 import {State} from './model';
-import {FabProps} from './fab';
 
 class CurrentTabPage extends PureComponent<{
   currentTab: State['currentTab'];
@@ -65,17 +66,7 @@ class CurrentTabPage extends PureComponent<{
     const isActivity = currentTab === 'activity';
     const isConnections = currentTab === 'connections';
 
-    const fabSection =
-      Platform.OS === 'web'
-        ? h(
-            withTitle(View),
-            {
-              style: styles.desktopFabContainer,
-              title: fab.title,
-            },
-            [h(FloatingAction, fab)],
-          )
-        : h(FloatingAction, fab);
+    const fabSection = FloatingActionButton(fab);
 
     return h(Fragment, [
       h(View, {style: [isPublic ? shown : hidden]}, [

src/frontend/screens/connections-panel/view/index.ts

@@ -1,4 +1,4 @@
-// SPDX-FileCopyrightText: 2018-2022 The Manyverse Authors
+// SPDX-FileCopyrightText: 2018-2023 The Manyverse Authors
 //
 // SPDX-License-Identifier: MPL-2.0
 
@@ -7,15 +7,15 @@ import debounce from 'xstream/extra/debounce';
 import dropRepeatsByKeys from 'xstream-drop-repeats-by-keys';
 import {h} from '@cycle/react';
 import {Platform, ScrollView, View} from 'react-native';
-import {FloatingAction} from 'react-native-floating-action';
 import {t} from '~frontend/drivers/localization';
 import {Palette} from '~frontend/global-styles/palette';
-import {Dimensions} from '~frontend/global-styles/dimens';
 import {Images} from '~frontend/global-styles/images';
 import TopBar from '~frontend/components/TopBar';
 import StatusBarBlank from '~frontend/components/StatusBarBlank';
-import {withTitle} from '~frontend/components/withTitle';
-import {FabProps} from '~frontend/screens/central/fab';
+import {
+  Props as FabProps,
+  FloatingActionButton,
+} from '~frontend/components/FloatingActionButton';
 import {State} from '../model';
 import {styles} from './styles';
 import ConnectivityModes from './ConnectivityModes';
@@ -38,14 +38,6 @@ function getFABProps(state: State): FabProps {
       },
     ],
     title: t('connections.floating_action_button.add_connection'),
-    overrideWithAction: true,
-    iconHeight: 24,
-    iconWidth: 24,
-    overlayColor: Palette.transparencyDark,
-    distanceToEdge: {
-      vertical: Dimensions.verticalSpaceLarge,
-      horizontal: Dimensions.horizontalSpaceBig,
-    },
     floatingIcon: Images.plusNetwork,
   };
 }
@@ -75,13 +67,7 @@ export default function view(state$: Stream<State>) {
           },
           [h(ConnectivityModes, state), h(Body, state)],
         ),
-        Platform.OS === 'web'
-          ? h(
-              withTitle(View),
-              {style: styles.desktopFabContainer, title: fabProps.title},
-              [h(FloatingAction, fabProps)],
-            )
-          : h(FloatingAction, fabProps),
+        FloatingActionButton(fabProps),
       ]);
     });
 }

src/frontend/screens/connections-panel/view/styles.ts

@@ -1,4 +1,4 @@
-// SPDX-FileCopyrightText: 2018-2022 The Manyverse Authors
+// SPDX-FileCopyrightText: 2018-2023 The Manyverse Authors
 //
 // SPDX-License-Identifier: MPL-2.0
 
@@ -18,12 +18,6 @@ export const styles = StyleSheet.create({
     minHeight: 400,
   },
 
-  desktopFabContainer: {
-    position: 'absolute',
-    bottom: 0,
-    right: `calc(50vw - ${Dimensions.desktopMiddleWidth.px} * 0.5)`,
-  },
-
   modesContainer: {
     alignSelf: 'stretch',
     backgroundColor: Palette.backgroundText,