Support bubble timeline

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

src/features/bubble-timeline/index.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import { expandBubbleTimeline } from 'soapbox/actions/timelines';
+import PullToRefresh from 'soapbox/components/pull-to-refresh';
+import { Column } from 'soapbox/components/ui';
+import { useAppSelector, useAppDispatch, useSettings, useTheme } from 'soapbox/hooks';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile';
+
+import Timeline from '../ui/components/timeline';
+
+const messages = defineMessages({
+  title: { id: 'column.bubble', defaultMessage: 'Bubble timeline' },
+});
+
+const BubbleTimeline = () => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+  const theme = useTheme();
+
+  const settings = useSettings();
+  const onlyMedia = settings.bubble.other.onlyMedia;
+  const next = useAppSelector(state => state.timelines.get('bubble')?.next);
+
+  const timelineId = 'bubble';
+  const isMobile = useIsMobile();
+
+  const handleLoadMore = (maxId: string) => {
+    dispatch(expandBubbleTimeline({ url: next, maxId, onlyMedia }, intl));
+  };
+
+  const handleRefresh = () => dispatch(expandBubbleTimeline({ onlyMedia }, intl));
+
+  useEffect(() => {
+    dispatch(expandBubbleTimeline({ onlyMedia }, intl));
+  }, [onlyMedia]);
+
+  return (
+    <Column className='-mt-3 sm:mt-0' label={intl.formatMessage(messages.title)} transparent={!isMobile}>
+      <PullToRefresh onRefresh={handleRefresh}>
+        <Timeline
+          className='black:p-0 black:sm:p-4'
+          scrollKey={`${timelineId}_timeline`}
+          timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
+          prefix='home'
+          onLoadMore={handleLoadMore}
+          emptyMessage={<FormattedMessage id='empty_column.bubble' defaultMessage='There is nothing here! Write something publicly to fill it up' />}
+          divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
+        />
+      </PullToRefresh>
+    </Column>
+  );
+};
+
+export { BubbleTimeline as default };

src/features/ui/index.tsx

@@ -130,6 +130,7 @@ import {
   Rules,
   DraftStatuses,
   Circle,
+  BubbleTimeline,
 } from './util/async-components';
 import GlobalHotkeys from './util/global-hotkeys';
 import { WrappedRoute } from './util/react-router-helpers';
@@ -175,6 +176,7 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
       */}
       {features.federating && <WrappedRoute path='/timeline/local' exact page={HomePage} component={CommunityTimeline} content={children} publicRoute />}
       {features.federating && <WrappedRoute path='/timeline/fediverse' exact page={HomePage} component={PublicTimeline} content={children} publicRoute />}
+      {features.bubbleTimeline && <WrappedRoute path='/timeline/bubble' exact page={HomePage} component={BubbleTimeline} content={children} publicRoute />}
       {features.federating && <WrappedRoute path='/timeline/:instance' exact page={RemoteInstancePage} component={RemoteTimeline} content={children} />}
 
       {features.conversations && <WrappedRoute path='/conversations' page={DefaultPage} component={Conversations} content={children} />}

src/features/ui/util/async-components.ts

@@ -160,3 +160,4 @@ export const Rules = lazy(() => import('soapbox/features/admin/rules'));
 export const EditRuleModal = lazy(() => import('soapbox/features/ui/components/modals/edit-rule-modal'));
 export const DraftStatuses = lazy(() => import('soapbox/features/draft-statuses'));
 export const Circle = lazy(() => import('soapbox/features/circle'));
+export const BubbleTimeline = lazy(() => import('soapbox/features/bubble-timeline'));