diff --git a/app/javascript/mastodon/features/pinned_statuses/index.jsx b/app/javascript/mastodon/features/pinned_statuses/index.jsx
index 57d9768be..e8206d704 100644
--- a/app/javascript/mastodon/features/pinned_statuses/index.jsx
+++ b/app/javascript/mastodon/features/pinned_statuses/index.jsx
@@ -13,7 +13,7 @@ import { ReactComponent as PushPinIcon } from '@material-symbols/svg-600/outline
import { getStatusList } from 'mastodon/selectors';
import { fetchPinnedStatuses } from '../../actions/pin_statuses';
-import ColumnBackButtonSlim from '../../components/column_back_button_slim';
+import { ColumnBackButtonSlim } from '../../components/column_back_button';
import StatusList from '../../components/status_list';
import Column from '../ui/components/column';
diff --git a/app/javascript/mastodon/features/ui/components/columns_area.jsx b/app/javascript/mastodon/features/ui/components/columns_area.jsx
index 9cf613665..19c2f40ac 100644
--- a/app/javascript/mastodon/features/ui/components/columns_area.jsx
+++ b/app/javascript/mastodon/features/ui/components/columns_area.jsx
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types';
-import { Children, cloneElement } from 'react';
+import { Children, cloneElement, useCallback } from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -21,6 +21,7 @@ import {
ListTimeline,
Directory,
} from '../util/async-components';
+import { useColumnsContext } from '../util/columns_context';
import BundleColumnError from './bundle_column_error';
import { ColumnLoading } from './column_loading';
@@ -43,6 +44,17 @@ const componentMap = {
'DIRECTORY': Directory,
};
+const TabsBarPortal = () => {
+ const {setTabsBarElement} = useColumnsContext();
+
+ const setRef = useCallback((element) => {
+ if(element)
+ setTabsBarElement(element);
+ }, [setTabsBarElement]);
+
+ return
;
+};
+
export default class ColumnsArea extends ImmutablePureComponent {
static propTypes = {
columns: ImmutablePropTypes.list.isRequired,
@@ -146,7 +158,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
diff --git a/app/javascript/mastodon/features/ui/index.jsx b/app/javascript/mastodon/features/ui/index.jsx
index f836dace7..02c69cbba 100644
--- a/app/javascript/mastodon/features/ui/index.jsx
+++ b/app/javascript/mastodon/features/ui/index.jsx
@@ -64,8 +64,8 @@ import {
About,
PrivacyPolicy,
} from './util/async-components';
+import { ColumnsContextProvider } from './util/columns_context';
import { WrappedSwitch, WrappedRoute } from './util/react_router_helpers';
-
// Dummy import, to make sure that
ends up in the application bundle.
// Without this it ends up in ~8 very commonly used bundles.
import '../../components/status';
@@ -179,68 +179,70 @@ class SwitchingColumnsArea extends PureComponent {
}
return (
-
-
- {redirect}
+
+
+
+ {redirect}
- {singleColumn ? : null}
- {singleColumn && pathName.startsWith('/deck/') ? : null}
- {/* Redirect old bookmarks (without /deck) with home-like routes to the advanced interface */}
- {!singleColumn && pathName === '/getting-started' ? : null}
- {!singleColumn && pathName === '/home' ? : null}
+ {singleColumn ? : null}
+ {singleColumn && pathName.startsWith('/deck/') ? : null}
+ {/* Redirect old bookmarks (without /deck) with home-like routes to the advanced interface */}
+ {!singleColumn && pathName === '/getting-started' ? : null}
+ {!singleColumn && pathName === '/home' ? : null}
-
-
-
-
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
-
-
-
-
+
+
+
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
- {/* Legacy routes, cannot be easily factored with other routes because they share a param name */}
-
-
-
-
-
+ {/* Legacy routes, cannot be easily factored with other routes because they share a param name */}
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
+
+
+
+
);
}
diff --git a/app/javascript/mastodon/features/ui/util/columns_context.tsx b/app/javascript/mastodon/features/ui/util/columns_context.tsx
new file mode 100644
index 000000000..e02918deb
--- /dev/null
+++ b/app/javascript/mastodon/features/ui/util/columns_context.tsx
@@ -0,0 +1,51 @@
+import type { ReactElement } from 'react';
+import { createContext, useContext, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+export const ColumnsContext = createContext<{
+ tabsBarElement: HTMLElement | null;
+ setTabsBarElement: (element: HTMLElement) => void;
+ multiColumn: boolean;
+}>({
+ tabsBarElement: null,
+ multiColumn: false,
+ setTabsBarElement: () => undefined, // no-op
+});
+
+export function useColumnsContext() {
+ return useContext(ColumnsContext);
+}
+
+export const ButtonInTabsBar: React.FC<{
+ children: ReactElement | string | undefined;
+}> = ({ children }) => {
+ const { multiColumn, tabsBarElement } = useColumnsContext();
+
+ if (multiColumn) {
+ return children;
+ } else if (!tabsBarElement) {
+ return children;
+ } else {
+ return createPortal(children, tabsBarElement);
+ }
+};
+
+type ContextValue = React.ContextType
;
+
+export const ColumnsContextProvider: React.FC<
+ React.PropsWithChildren<{ multiColumn: boolean }>
+> = ({ multiColumn, children }) => {
+ const [tabsBarElement, setTabsBarElement] =
+ useState(null);
+
+ const contextValue = useMemo(
+ () => ({ multiColumn, tabsBarElement, setTabsBarElement }),
+ [multiColumn, tabsBarElement],
+ );
+
+ return (
+
+ {children}
+
+ );
+};