Replace FAB with plus button in thumb nav, I need to remove one element to move the plus button to the center

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

src/actions/admin.ts

@@ -546,7 +546,6 @@ const expandUserIndex = () =>
       });
   };
 
-
 export {
   ADMIN_CONFIG_FETCH_REQUEST,
   ADMIN_CONFIG_FETCH_SUCCESS,

src/actions/compose.ts

@@ -221,7 +221,7 @@ const cancelQuoteCompose = (composeId: string) => ({
   id: composeId,
 });
 
-const groupComposeModal = (group: Group) =>
+const groupComposeModal = (group: Pick<Group, 'id'>) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     const composeId = `group:${group.id}`;
 

src/actions/groups.ts

@@ -85,7 +85,6 @@ const groupUnblockFail = (groupId: string, accountId: string, error: unknown) =>
   error,
 });
 
-
 export {
   GROUP_BLOCKS_FETCH_REQUEST,
   GROUP_BLOCKS_FETCH_SUCCESS,

src/actions/tags.ts

@@ -160,7 +160,6 @@ const expandFollowedHashtagsFail = (error: unknown) => ({
   error,
 });
 
-
 export {
   HASHTAG_FETCH_REQUEST,
   HASHTAG_FETCH_SUCCESS,

src/components/sidebar-menu.tsx

@@ -28,6 +28,7 @@ const messages = defineMessages({
   groups: { id: 'column.groups', defaultMessage: 'Groups' },
   events: { id: 'column.events', defaultMessage: 'Events' },
   developers: { id: 'navigation.developers', defaultMessage: 'Developers' },
+  dashboard: { id: 'navigation.dashboard', defaultMessage: 'Dashboard' },
   drafts: { id: 'navigation.drafts', defaultMessage: 'Drafts' },
   addAccount: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' },
   followRequests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
@@ -83,6 +84,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
   const settings = useAppSelector((state) => getSettings(state));
   const followRequestsCount = useAppSelector((state) => state.user_lists.follow_requests.items.count());
   const draftCount = useAppSelector((state) => state.draft_statuses.size);
+  // const dashboardCount = useAppSelector((state) => state.admin.openReports.count() + state.admin.awaitingApproval.count());
   const [sidebarVisible, setSidebarVisible] = useState(sidebarOpen);
   const [touchStart, setTouchStart] = useState(0);
   const [touchEnd, setTouchEnd] = useState(0);
@@ -338,6 +340,16 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                       />
                     )}
 
+                    {account.staff && (
+                      <SidebarLink
+                        to='/dashboard'
+                        icon={require('@tabler/icons/outline/dashboard.svg')}
+                        text={intl.formatMessage(messages.dashboard)}
+                        onClick={onClose}
+                        // count={dashboardCount} WIP
+                      />
+                    )}
+
                     <Divider />
 
                     <SidebarLink

src/components/thumb-navigation.tsx

@@ -1,9 +1,13 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
+import { useRouteMatch } from 'react-router-dom';
 
+import { groupComposeModal } from 'soapbox/actions/compose';
+import { openModal } from 'soapbox/actions/modals';
 import { openSidebar } from 'soapbox/actions/sidebar';
 import ThumbNavigationLink from 'soapbox/components/thumb-navigation-link';
 import { useStatContext } from 'soapbox/contexts/stat-context';
+import { Entities } from 'soapbox/entity-store/entities';
 import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks';
 
 import { Icon } from './ui';
@@ -13,12 +17,24 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
   const { account } = useOwnAccount();
   const features = useFeatures();
 
+  const match = useRouteMatch<{ groupId: string }>('/groups/:groupId');
+
   const { unreadChatsCount } = useStatContext();
 
   const notificationCount = useAppSelector((state) => state.notifications.unread);
-  const dashboardCount = useAppSelector((state) => state.admin.openReports.count() + state.admin.awaitingApproval.count());
 
-  const onOpenSidebar = () => dispatch(openSidebar());
+  const handleOpenSidebar = () => dispatch(openSidebar());
+
+  const handleOpenComposeModal = () => {
+    if (match?.params.groupId) {
+      dispatch((_, getState) => {
+        const group = getState().entities[Entities.GROUPS]?.store[match.params.groupId];
+        if (group) dispatch(groupComposeModal(group));
+      });
+    } else {
+      dispatch(openModal('COMPOSE'));
+    }
+  };
 
   /** Conditionally render the supported messages link */
   const renderMessagesLink = (): React.ReactNode => {
@@ -52,7 +68,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
 
   return (
     <div className='fixed inset-x-0 bottom-0 z-50 flex w-full overflow-x-auto border-t border-solid border-gray-200 bg-white/90 shadow-2xl backdrop-blur-md black:bg-black/80 lg:hidden dark:border-gray-800 dark:bg-primary-900/90'>
-      <button className='flex flex-1 flex-col items-center px-2 py-4 text-lg text-gray-600' onClick={onOpenSidebar}>
+      <button className='flex flex-1 flex-col items-center px-2 py-4 text-lg text-gray-600' onClick={handleOpenSidebar}>
         <Icon
           src={require('@tabler/icons/outline/menu-2.svg')}
           className='h-5 w-5 text-gray-600 black:text-white'
@@ -97,13 +113,13 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
 
       {account && renderMessagesLink()}
 
-      {(account && account.staff) && (
-        <ThumbNavigationLink
-          src={require('@tabler/icons/outline/dashboard.svg')}
-          text={<FormattedMessage id='navigation.dashboard' defaultMessage='Dashboard' />}
-          to='/soapbox/admin'
-          count={dashboardCount}
-        />
+      {account && (
+        <button className='flex flex-1 flex-col items-center px-1.5 py-3.5 text-lg text-gray-600' onClick={handleOpenComposeModal}>
+          <Icon
+            src={require('@tabler/icons/outline/square-rounded-plus.svg')}
+            className='h-6 w-6 text-gray-600 black:text-white'
+          />
+        </button>
       )}
     </div>
   );

src/features/admin/announcements.tsx

@@ -91,7 +91,6 @@ const Announcements: React.FC = () => {
 
   const { data: announcements, isLoading } = useAnnouncements();
 
-
   const handleCreateAnnouncement = () => {
     dispatch(openModal('EDIT_ANNOUNCEMENT'));
   };

src/features/bookmark-folders/index.tsx

@@ -9,7 +9,6 @@ import { useFeatures } from 'soapbox/hooks';
 
 import NewFolderForm from './components/new-folder-form';
 
-
 const messages = defineMessages({
   heading: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' },
 });

src/features/compose/components/language-dropdown.tsx

@@ -51,7 +51,6 @@ const LanguageDropdown: React.FC<ILanguageDropdown> = ({ composeId }) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [searchValue, setSearchValue] = useState('');
 
-
   const { x, y, strategy, refs, middlewareData, placement } = useFloating<HTMLButtonElement>({
     placement: 'top',
     middleware: [

src/features/compose/components/privacy-dropdown.tsx

@@ -135,7 +135,6 @@ const PrivacyDropdownMenu: React.FC<IPrivacyDropdownMenu> = ({
     };
   }, []);
 
-
   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 }) => (

src/features/mutes/index.tsx

@@ -10,7 +10,6 @@ const messages = defineMessages({
   heading: { id: 'column.mutes', defaultMessage: 'Mutes' },
 });
 
-
 const Mutes: React.FC = () => {
   const intl = useIntl();
 

src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx

@@ -54,7 +54,6 @@ const DetailsStep: React.FC<IDetailsStep> = ({ params, onChange }) => {
 
   const handleImageClear = (property: keyof CreateGroupParams) => () => onChange({ [property]: undefined });
 
-
   return (
     <Form>
       <div className='relative mb-12 flex'>

src/features/ui/components/panels/sign-up-panel.tsx

@@ -14,7 +14,6 @@ import { isStandalone } from 'soapbox/utils/state';
 
 import type { PlfeResponse } from 'soapbox/api';
 
-
 const SignUpPanel = () => {
   const dispatch = useAppDispatch();
   const instance = useInstance();

src/features/ui/index.tsx

@@ -39,7 +39,6 @@ import { getVapidKey } from 'soapbox/utils/auth';
 import { isStandalone } from 'soapbox/utils/state';
 
 import BackgroundShapes from './components/background-shapes';
-import FloatingActionButton from './components/floating-action-button';
 import {
   Status,
   CommunityTimeline,
@@ -450,11 +449,6 @@ const UI: React.FC<IUI> = ({ children }) => {
     dispatch(registerPushNotifications());
   }, [vapidKey]);
 
-  const shouldHideFAB = (): boolean => {
-    const path = location.pathname;
-    return Boolean(path.match(/^\/posts\/|^\/search|^\/getting-started|^\/chats/));
-  };
-
   // Wait for login to succeed or fail
   if (me === null) return null;
 
@@ -484,12 +478,6 @@ const UI: React.FC<IUI> = ({ children }) => {
             </SwitchingColumnsArea>
           </Layout>
 
-          {(me && !shouldHideFAB()) && (
-            <div className='fixed bottom-24 right-4 z-40 transition-all lg:hidden rtl:left-4 rtl:right-auto'>
-              <FloatingActionButton />
-            </div>
-          )}
-
           <Suspense>
             <SidebarMenu />
           </Suspense>

src/pages/search-page.tsx

@@ -42,7 +42,6 @@ const SearchPage: React.FC<ISearchPage> = ({ children }) => {
           <WhoToFollowPanel limit={3} />
         )}
 
-
         <LinkFooter />
       </Layout.Aside>
     </>

src/schemas/instance.ts

@@ -80,7 +80,6 @@ const contactSchema = coerceObject({
   email: z.string().email().catch(''),
 });
 
-
 const pleromaSchema = coerceObject({
   metadata: coerceObject({
     account_activation_required: z.boolean().catch(false),

src/selectors/index.ts

@@ -291,7 +291,6 @@ const getRemoteInstanceFederation = (state: RootState, host: string): HostFedera
   ) as HostFederation;
 };
 
-
 const makeGetHosts = () =>
   createSelector([getSimplePolicy], (simplePolicy) => {
     const { accept, reject_deletes, report_removal, ...rest } = simplePolicy;