[Glitch] Auto-focus mobile composer

Port 782ceb3795e3cc97cb0e7e29983962adcea7e946 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/compose/index.tsx

@@ -249,7 +249,11 @@ const Compose: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
       />
 
       <div className='scrollable'>
-        <ComposeFormContainer />
+        <ComposeFormContainer
+          // This is fine on this single-purpose view
+          // eslint-disable-next-line jsx-a11y/no-autofocus
+          autoFocus
+        />
       </div>
 
       <Helmet>

app/javascript/flavours/glitch/features/navigation_panel/index.tsx

@@ -285,7 +285,7 @@ export const NavigationPanel: React.FC<{ multiColumn?: boolean }> = ({
             {!multiColumn && (
               <li>
                 <ColumnLink
-                  to='/publish'
+                  to={{ pathname: '/publish', state: { focusTarget: false } }}
                   icon='plus'
                   iconComponent={AddIcon}
                   activeIconComponent={AddIcon}

app/javascript/flavours/glitch/features/ui/components/column_link.tsx

@@ -5,6 +5,7 @@ import { useRouteMatch, NavLink } from 'react-router-dom';
 
 import { Icon } from 'flavours/glitch/components/icon';
 import type { IconProp } from 'flavours/glitch/components/icon';
+import type { MastodonLocationDescriptor } from 'flavours/glitch/components/router';
 
 export const ColumnLink: React.FC<{
   icon: React.ReactNode;
@@ -13,7 +14,7 @@ export const ColumnLink: React.FC<{
   activeIconComponent?: IconProp;
   isActive?: (match: unknown, location: { pathname: string }) => boolean;
   text: string;
-  to?: string;
+  to?: MastodonLocationDescriptor;
   onClick?: MouseEventHandler;
   href?: string;
   method?: string;
@@ -35,7 +36,9 @@ export const ColumnLink: React.FC<{
   transparent,
   ...other
 }) => {
-  const match = useRouteMatch(to ?? '');
+  const match = useRouteMatch(
+    (typeof to === 'string' ? to : to?.pathname) ?? '',
+  );
   const className = classNames('column-link', {
     'column-link--transparent': transparent,
   });

app/javascript/flavours/glitch/features/ui/components/navigation_bar.tsx

@@ -17,6 +17,7 @@ import { toggleNavigation } from 'flavours/glitch/actions/navigation';
 import { fetchServer } from 'flavours/glitch/actions/server';
 import { Icon } from 'flavours/glitch/components/icon';
 import { IconWithBadge } from 'flavours/glitch/components/icon_with_badge';
+import type { MastodonLocationDescriptor } from 'flavours/glitch/components/router';
 import { useIdentity } from 'flavours/glitch/identity_context';
 import { registrationsOpen, sso_redirect } from 'flavours/glitch/initial_state';
 import { selectUnreadNotificationGroupsCount } from 'flavours/glitch/selectors/notifications';
@@ -38,12 +39,14 @@ export const messages = defineMessages({
 });
 
 const IconLabelButton: React.FC<{
-  to: string;
+  to: MastodonLocationDescriptor;
   icon?: React.ReactNode;
   activeIcon?: React.ReactNode;
   title: string;
 }> = ({ to, icon, activeIcon, title }) => {
-  const match = useRouteMatch(to);
+  const match = useRouteMatch(
+    typeof to === 'string' ? to : (to.pathname ?? ''),
+  );
 
   return (
     <NavLink
@@ -189,7 +192,7 @@ export const NavigationBar: React.FC = () => {
             />
             <IconLabelButton
               title={intl.formatMessage(messages.publish)}
-              to='/publish'
+              to={{ pathname: '/publish', state: { focusTarget: false } }}
               icon={<Icon id='' icon={AddIcon} />}
             />
             <NotificationsButton />