moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch main into fix-classnames

This commit is contained in:
danidfra 2024-11-14 16:25:11 -03:00
parent a3e52a15cc
commit b7dcd4df8a
32 changed files with 156 additions and 272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.vscode/settings.json vendored
View File

@ -18,5 +18,10 @@
}
],
"scss.validate": false,
"typescript.tsdk": "node_modules/typescript/lib"
"typescript.tsdk": "node_modules/typescript/lib",
"path-intellisense.extensionOnImport": true,
"javascript.preferences.importModuleSpecifierEnding": "js",
"javascript.preferences.importModuleSpecifier": "non-relative",
"typescript.preferences.importModuleSpecifierEnding": "js",
"typescript.preferences.importModuleSpecifier": "non-relative"
}

44
src/actions/about.test.ts
View File

@ -1,44 +0,0 @@
import MockAdapter from 'axios-mock-adapter';
import { describe, expect, it } from 'vitest';
import { staticClient } from 'soapbox/api/index.ts';
import { mockStore } from 'soapbox/jest/test-helpers.tsx';
import {
FETCH_ABOUT_PAGE_REQUEST,
FETCH_ABOUT_PAGE_SUCCESS,
FETCH_ABOUT_PAGE_FAIL,
fetchAboutPage,
} from './about.ts';
describe('fetchAboutPage()', () => {
it('creates the expected actions on success', () => {
const mock = new MockAdapter(staticClient);
mock.onGet('/instance/about/index.html')
.reply(200, '<h1>Hello world</h1>');
const expectedActions = [
{ type: FETCH_ABOUT_PAGE_REQUEST, slug: 'index' },
{ type: FETCH_ABOUT_PAGE_SUCCESS, slug: 'index', html: '<h1>Hello world</h1>' },
];
const store = mockStore({});
return store.dispatch(fetchAboutPage()).then(() => {
expect(store.getActions()).toEqual(expectedActions);
});
});
it('creates the expected actions on failure', () => {
const expectedActions = [
{ type: FETCH_ABOUT_PAGE_REQUEST, slug: 'asdf' },
{ type: FETCH_ABOUT_PAGE_FAIL, slug: 'asdf', error: new Error('Request failed with status code 404') },
];
const store = mockStore({});
return store.dispatch(fetchAboutPage('asdf')).catch(() => {
expect(store.getActions()).toEqual(expectedActions);
});
});
});

3
src/actions/notifications.ts
View File

@ -9,7 +9,6 @@ import { compareId } from 'soapbox/utils/comparators.ts';
import { getFeatures, parseVersion, PLEROMA } from 'soapbox/utils/features.ts';
import { unescapeHTML } from 'soapbox/utils/html.ts';
import { EXCLUDE_TYPES, NOTIFICATION_TYPES } from 'soapbox/utils/notification.ts';
import { joinPublicPath } from 'soapbox/utils/static.ts';
import { fetchRelationships } from './accounts.ts';
import { fetchGroupRelationships } from './groups.ts';
@ -120,7 +119,7 @@ const updateNotificationsQueue = (notification: APIEntity, intlMessages: Record<
icon: notification.account.avatar,
tag: notification.id,
data: {
url: joinPublicPath('/notifications'),
url: '/notifications',
},
}).catch(console.error);
}).catch(console.error);

4
src/actions/soapbox.ts
View File

@ -6,7 +6,7 @@ import KVStore from 'soapbox/storage/kv-store.ts';
import { removeVS16s } from 'soapbox/utils/emoji.ts';
import { getFeatures } from 'soapbox/utils/features.ts';
import api, { staticClient } from '../api/index.ts';
import api from '../api/index.ts';
import type { AppDispatch, RootState } from 'soapbox/store.ts';
import type { APIEntity } from 'soapbox/types/entities.ts';
@ -86,7 +86,7 @@ const loadSoapboxConfig = () =>
const fetchSoapboxJson = (host: string | null) =>
(dispatch: AppDispatch) =>
staticClient.get('/instance/soapbox.json').then(({ data }) => {
fetch('/instance/soapbox.json').then((response) => response.json()).then((data) => {
if (!isObject(data)) throw 'soapbox.json failed';
dispatch(importSoapboxConfig(data, host));
return data;

19
src/api/MastodonClient.ts
View File

@ -1,4 +1,5 @@
import { HTTPError } from './HTTPError.ts';
import { MastodonResponse } from './MastodonResponse.ts';
interface Opts {
searchParams?: URLSearchParams | Record<string, string | number | boolean>;
@ -19,35 +20,35 @@ export class MastodonClient {
this.accessToken = accessToken;
}
async get(path: string, opts: Opts = {}): Promise<Response> {
async get(path: string, opts: Opts = {}): Promise<MastodonResponse> {
return this.request('GET', path, undefined, opts);
}
async post(path: string, data?: unknown, opts: Opts = {}): Promise<Response> {
async post(path: string, data?: unknown, opts: Opts = {}): Promise<MastodonResponse> {
return this.request('POST', path, data, opts);
}
async put(path: string, data?: unknown, opts: Opts = {}): Promise<Response> {
async put(path: string, data?: unknown, opts: Opts = {}): Promise<MastodonResponse> {
return this.request('PUT', path, data, opts);
}
async delete(path: string, opts: Opts = {}): Promise<Response> {
async delete(path: string, opts: Opts = {}): Promise<MastodonResponse> {
return this.request('DELETE', path, undefined, opts);
}
async patch(path: string, data: unknown, opts: Opts = {}): Promise<Response> {
async patch(path: string, data: unknown, opts: Opts = {}): Promise<MastodonResponse> {
return this.request('PATCH', path, data, opts);
}
async head(path: string, opts: Opts = {}): Promise<Response> {
async head(path: string, opts: Opts = {}): Promise<MastodonResponse> {
return this.request('HEAD', path, undefined, opts);
}
async options(path: string, opts: Opts = {}): Promise<Response> {
async options(path: string, opts: Opts = {}): Promise<MastodonResponse> {
return this.request('OPTIONS', path, undefined, opts);
}
async request(method: string, path: string, data: unknown, opts: Opts = {}): Promise<Response> {
async request(method: string, path: string, data: unknown, opts: Opts = {}): Promise<MastodonResponse> {
const url = new URL(path, this.baseUrl);
if (opts.searchParams) {
@ -89,7 +90,7 @@ export class MastodonClient {
throw new HTTPError(response, request);
}
return response;
return new MastodonResponse(response.body, response);
}
}

16
src/api/MastodonResponse.ts Normal file
View File

@ -0,0 +1,16 @@
import LinkHeader from 'http-link-header';
export class MastodonResponse extends Response {
/** Parses the `Link` header and returns URLs for the `prev` and `next` pages of this response, if any. */
pagination(): { prev?: string; next?: string } {
const header = this.headers.get('link');
const links = header ? new LinkHeader(header) : undefined;
return {
next: links?.refs.find((link) => link.rel === 'next')?.uri,
prev: links?.refs.find((link) => link.rel === 'prev')?.uri,
};
}
}

2
src/api/__mocks__/index.ts
View File

@ -15,8 +15,6 @@ const setupMock = (axios: AxiosInstance) => {
mocks.map(func => func(mock));
};
export const staticClient = api.staticClient;
export const getLinks = (response: AxiosResponse): LinkHeader => {
return new LinkHeader(response.headers?.link);
};

10
src/api/index.ts
View File

@ -82,16 +82,6 @@ export const baseClient = (
});
};
/**
* Dumb client for grabbing static files.
* It uses FE_SUBDIRECTORY and parses JSON if possible.
* No authorization is needed.
*/
export const staticClient = axios.create({
baseURL: BuildConfig.FE_SUBDIRECTORY,
transformResponse: [maybeParseJSON],
});
/**
* Stateful API client.
* Uses credentials from the Redux store if available.

8
src/build-config-compiletime.ts
View File

@ -3,15 +3,12 @@
* @module soapbox/build-config
*/
// eslint-disable-next-line import/extensions
import trim from 'lodash/trim.js';
// eslint-disable-next-line import/extensions
import trimEnd from 'lodash/trimEnd.js';
const {
NODE_ENV,
BACKEND_URL,
FE_SUBDIRECTORY,
FE_INSTANCE_SOURCE_DIR,
SENTRY_DSN,
} = process.env;
@ -24,14 +21,9 @@ const sanitizeURL = (url: string | undefined = ''): string => {
}
};
const sanitizeBasename = (path: string | undefined = ''): string => {
return `/${trim(path, '/')}`;
};
const env = {
NODE_ENV: NODE_ENV || 'development',
BACKEND_URL: sanitizeURL(BACKEND_URL),
FE_SUBDIRECTORY: sanitizeBasename(FE_SUBDIRECTORY),
FE_INSTANCE_SOURCE_DIR: FE_INSTANCE_SOURCE_DIR || 'instance',
SENTRY_DSN,
};

1
src/build-config.ts
View File

@ -3,7 +3,6 @@ import type { SoapboxEnv } from './build-config-compiletime.ts';
export const {
NODE_ENV,
BACKEND_URL,
FE_SUBDIRECTORY,
FE_INSTANCE_SOURCE_DIR,
SENTRY_DSN,
} = import.meta.compileTime<SoapboxEnv>('./build-config-compiletime.ts');

3
src/components/announcements/emoji.tsx
View File

@ -1,6 +1,5 @@
import unicodeMapping from 'soapbox/features/emoji/mapping.ts';
import { useSettings } from 'soapbox/hooks/useSettings.ts';
import { joinPublicPath } from 'soapbox/utils/static.ts';
import type { Map as ImmutableMap } from 'immutable';
@ -25,7 +24,7 @@ const Emoji: React.FC<IEmoji> = ({ emoji, emojiMap, hovered }) => {
className='emojione m-0 block'
alt={emoji}
title={title}
src={joinPublicPath(`packs/emoji/${filename}.svg`)}
src={`/packs/emoji/${filename}.svg`}
/>
);
} else if (emojiMap.get(emoji as any)) {

3
src/components/autosuggest-emoji.tsx
View File

@ -1,6 +1,5 @@
import { isCustomEmoji } from 'soapbox/features/emoji/index.ts';
import unicodeMapping from 'soapbox/features/emoji/mapping.ts';
import { joinPublicPath } from 'soapbox/utils/static.ts';
import type { Emoji } from 'soapbox/features/emoji/index.ts';
@ -21,7 +20,7 @@ const AutosuggestEmoji: React.FC<IAutosuggestEmoji> = ({ emoji }) => {
return null;
}
url = joinPublicPath(`packs/emoji/${mapping.unified}.svg`);
url = `/packs/emoji/${mapping.unified}.svg`;
alt = emoji.native;
}

71
src/components/sentry-feedback-form.tsx
View File

@ -1,71 +0,0 @@
import { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import Button from 'soapbox/components/ui/button.tsx';
import FormActions from 'soapbox/components/ui/form-actions.tsx';
import FormGroup from 'soapbox/components/ui/form-group.tsx';
import Form from 'soapbox/components/ui/form.tsx';
import Text from 'soapbox/components/ui/text.tsx';
import Textarea from 'soapbox/components/ui/textarea.tsx';
import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
import { captureSentryFeedback } from 'soapbox/sentry.ts';
interface ISentryFeedbackForm {
eventId: string;
}
/** Accept feedback for the given Sentry event. */
const SentryFeedbackForm: React.FC<ISentryFeedbackForm> = ({ eventId }) => {
const { account } = useOwnAccount();
const [feedback, setFeedback] = useState<string>();
const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
const [isSubmitted, setIsSubmitted] = useState<boolean>(false);
const handleFeedbackChange: React.ChangeEventHandler<HTMLTextAreaElement> = (e) => {
setFeedback(e.target.value);
};
const handleSubmitFeedback: React.FormEventHandler = async (_e) => {
if (!feedback || !eventId) return;
setIsSubmitting(true);
await captureSentryFeedback({
name: account?.acct,
associatedEventId: eventId,
message: feedback,
}).catch(console.error);
setIsSubmitted(true);
};
if (isSubmitted) {
return (
<Text align='center'>
<FormattedMessage id='alert.unexpected.thanks' defaultMessage='Thanks for your feedback!' />
</Text>
);
}
return (
<Form onSubmit={handleSubmitFeedback}>
<FormGroup>
<Textarea
value={feedback}
onChange={handleFeedbackChange}
placeholder='Anything you can tell us about what happened?'
disabled={isSubmitting}
autoGrow
/>
</FormGroup>
<FormActions>
<Button type='submit' className='mx-auto' disabled={!feedback || isSubmitting}>
<FormattedMessage id='alert.unexpected.submit_feedback' defaultMessage='Submit Feedback' />
</Button>
</FormActions>
</Form>
);
};
export default SentryFeedbackForm;

46
src/components/site-error-boundary.tsx
View File

@ -2,7 +2,6 @@ import { type ErrorInfo, useRef, useState } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { FormattedMessage } from 'react-intl';
import { NODE_ENV } from 'soapbox/build-config.ts';
import HStack from 'soapbox/components/ui/hstack.tsx';
import Stack from 'soapbox/components/ui/stack.tsx';
import Text from 'soapbox/components/ui/text.tsx';
@ -13,7 +12,6 @@ import KVStore from 'soapbox/storage/kv-store.ts';
import sourceCode from 'soapbox/utils/code.ts';
import { unregisterSW } from 'soapbox/utils/sw.ts';
import SentryFeedbackForm from './sentry-feedback-form.tsx';
import SiteLogo from './site-logo.tsx';
interface ISiteErrorBoundary {
@ -22,16 +20,13 @@ interface ISiteErrorBoundary {
/** Application-level error boundary. Fills the whole screen. */
const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
const { links, sentryDsn } = useSoapboxConfig();
const { links } = useSoapboxConfig();
const textarea = useRef<HTMLTextAreaElement>(null);
const [error, setError] = useState<unknown>();
const [componentStack, setComponentStack] = useState<string | null | undefined>();
const [browser, setBrowser] = useState<Bowser.Parser.Parser>();
const [sentryEventId, setSentryEventId] = useState<string>();
const sentryEnabled = Boolean(sentryDsn);
const isProduction = NODE_ENV === 'production';
const errorText = String(error) + componentStack;
const clearCookies: React.MouseEventHandler = (e) => {
@ -64,7 +59,6 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
ErrorBoundary: 'yes',
},
})
.then((eventId) => setSentryEventId(eventId))
.catch(console.error);
import('bowser')
@ -127,30 +121,22 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
</div>
<div className='mx-auto max-w-lg space-y-4 py-16'>
{(isProduction) ? (
(sentryEnabled && sentryEventId) && (
<SentryFeedbackForm eventId={sentryEventId} />
)
) : (
<>
{errorText && (
<Textarea
ref={textarea}
value={errorText}
onClick={handleCopy}
isCodeEditor
rows={12}
readOnly
/>
)}
{errorText && (
<Textarea
ref={textarea}
value={errorText}
onClick={handleCopy}
isCodeEditor
rows={12}
readOnly
/>
)}
{browser && (
<Stack>
<Text weight='semibold'><FormattedMessage id='alert.unexpected.browser' defaultMessage='Browser' /></Text>
<Text theme='muted'>{browser.getBrowserName()} {browser.getBrowserVersion()}</Text>
</Stack>
)}
</>
{browser && (
<Stack>
<Text weight='semibold'><FormattedMessage id='alert.unexpected.browser' defaultMessage='Browser' /></Text>
<Text theme='muted'>{browser.getBrowserName()} {browser.getBrowserVersion()}</Text>
</Stack>
)}
</div>
</div>

40
src/components/ui/emoji-selector.tsx
View File

@ -3,13 +3,18 @@ import dotsIcon from '@tabler/icons/outline/dots.svg';
import clsx from 'clsx';
import { useEffect, useState } from 'react';
import { closeModal, openModal } from 'soapbox/actions/modals.ts';
import EmojiComponent from 'soapbox/components/ui/emoji.tsx';
import HStack from 'soapbox/components/ui/hstack.tsx';
import IconButton from 'soapbox/components/ui/icon-button.tsx';
import EmojiPickerDropdown from 'soapbox/features/emoji/components/emoji-picker-dropdown.tsx';
import EmojiPickerDropdown, { getFrequentlyUsedEmojis } from 'soapbox/features/emoji/components/emoji-picker-dropdown.tsx';
import emojiData from 'soapbox/features/emoji/data.ts';
import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
import { useClickOutside } from 'soapbox/hooks/useClickOutside.ts';
import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
import { userTouching } from 'soapbox/is-mobile.ts';
import type { Emoji } from 'soapbox/features/emoji/index.ts';
@ -64,9 +69,11 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
offsetOptions,
all = true,
}): JSX.Element => {
const soapboxConfig = useSoapboxConfig();
const { allowedEmoji } = useSoapboxConfig();
const { customEmojiReacts } = useFeatures();
const shortcodes = useAppSelector((state) => getFrequentlyUsedEmojis(state));
const dispatch = useAppDispatch();
const [expanded, setExpanded] = useState(false);
const { x, y, strategy, refs, update } = useFloating<HTMLElement>({
@ -75,7 +82,18 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
});
const handleExpand: React.MouseEventHandler = () => {
setExpanded(true);
if (userTouching.matches) {
dispatch(openModal('EMOJI_PICKER', {
onPickEmoji: (emoji: Emoji) => {
handlePickEmoji(emoji);
dispatch(closeModal('EMOJI_PICKER'));
},
}));
onClose?.();
} else {
setExpanded(true);
}
};
const handlePickEmoji = (emoji: Emoji) => {
@ -95,11 +113,19 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
}, [visible]);
useClickOutside(refs, () => {
if (onClose) {
onClose();
}
onClose?.();
});
const recentEmojis = shortcodes.reduce<string[]>((results, shortcode) => {
const emoji = emojiData.emojis[shortcode]?.skins[0]?.native;
if (emoji) {
results.push(emoji);
}
return results;
}, []);
const emojis = new Set([...recentEmojis, ...allowedEmoji]);
return (
<div
className={clsx('z-[101] transition-opacity duration-100', {
@ -125,7 +151,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
<HStack
className={clsx('z-[999] flex w-max max-w-[100vw] flex-wrap space-x-3 rounded-full bg-white px-3 py-2.5 shadow-lg focus:outline-none dark:bg-gray-900 dark:ring-2 dark:ring-primary-700')}
>
{Array.from(soapboxConfig.allowedEmoji).map((emoji, i) => (
{[...emojis].slice(0, 6).map((emoji, i) => (
<EmojiButton
key={i}
emoji={emoji}

3
src/components/ui/emoji.tsx
View File

@ -1,5 +1,4 @@
import { removeVS16s, toCodePoints } from 'soapbox/utils/emoji.ts';
import { joinPublicPath } from 'soapbox/utils/static.ts';
interface IEmoji extends React.ImgHTMLAttributes<HTMLImageElement> {
/** Unicode emoji character. */
@ -23,7 +22,7 @@ const Emoji: React.FC<IEmoji> = (props): JSX.Element | null => {
<img
draggable='false'
alt={alt || emoji}
src={src || joinPublicPath(`packs/emoji/${filename}.svg`)}
src={src || `/packs/emoji/${filename}.svg`}
{...rest}
/>
);

4
src/components/ui/modal.tsx
View File

@ -16,7 +16,7 @@ const messages = defineMessages({
});
const themes = {
normal: 'bg-white p-6 shadow-xl',
normal: 'bg-white black:bg-black dark:bg-primary-900 p-6 shadow-xl text-gray-900 dark:text-gray-100',
transparent: 'bg-transparent p-0 shadow-none',
};
@ -105,7 +105,7 @@ const Modal = forwardRef<HTMLDivElement, IModal>(({
<div
ref={ref}
data-testid='modal'
className={clsx(className, 'pointer-events-auto mx-auto block w-full rounded-2xl text-start align-middle text-gray-900 transition-all black:bg-black dark:bg-primary-900 dark:text-gray-100', widths[width], themes[theme])}
className={clsx(className, 'pointer-events-auto mx-auto block w-full rounded-2xl text-start align-middle transition-all', widths[width], themes[theme])}
>
<div className='w-full justify-between sm:flex sm:items-start'>
<div className='w-full'>

59
src/features/emoji/components/emoji-picker-dropdown.tsx
View File

@ -45,9 +45,9 @@ export interface IEmojiPickerDropdown {
onPickEmoji?: (emoji: Emoji) => void;
condensed?: boolean;
withCustom?: boolean;
visible: boolean;
setVisible: (value: boolean) => void;
update: (() => any) | null;
visible?: boolean;
setVisible?: (value: boolean) => void;
update?: (() => any) | null;
}
const perLine = 8;
@ -105,8 +105,13 @@ const getCustomEmojis = createSelector([
}
}));
interface IRenderAfter {
children: React.ReactNode;
update: () => void;
}
// Fixes render bug where popover has a delayed position update
const RenderAfter = ({ children, update }: any) => {
const RenderAfter: React.FC<IRenderAfter> = ({ children, update }) => {
const [nextTick, setNextTick] = useState(false);
useEffect(() => {
@ -125,7 +130,7 @@ const RenderAfter = ({ children, update }: any) => {
};
const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({
onPickEmoji, visible, setVisible, update, withCustom = true,
onPickEmoji, visible = true, setVisible, update, withCustom = true,
}) => {
const intl = useIntl();
const dispatch = useAppDispatch();
@ -136,7 +141,7 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({
const frequentlyUsedEmojis = useAppSelector((state) => getFrequentlyUsedEmojis(state));
const handlePick = (emoji: any) => {
setVisible(false);
setVisible?.(false);
let pickedEmoji: Emoji;
@ -213,28 +218,30 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({
document.body.style.overflow = '';
}, []);
if (!visible) {
return null;
}
return (
visible ? (
<RenderAfter update={update}>
<Suspense>
<EmojiPicker
custom={withCustom ? [{ emojis: buildCustomEmojis(customEmojis) }] : undefined}
title={title}
onEmojiSelect={handlePick}
recent={frequentlyUsedEmojis}
perLine={8}
skin={handleSkinTone}
emojiSize={22}
emojiButtonSize={34}
set='twitter'
theme={theme}
i18n={getI18n()}
skinTonePosition='search'
previewPosition='none'
/>
</Suspense>
<Suspense>
<RenderAfter update={update ?? (() => {})}>
<EmojiPicker
custom={withCustom ? [{ emojis: buildCustomEmojis(customEmojis) }] : undefined}
title={title}
onEmojiSelect={handlePick}
recent={frequentlyUsedEmojis}
perLine={8}
skin={handleSkinTone}
emojiSize={22}
emojiButtonSize={34}
set='twitter'
theme={theme}
i18n={getI18n()}
skinTonePosition='search'
previewPosition='none'
/>
</RenderAfter>
) : null
</Suspense>
);
};

8
src/features/emoji/components/emoji-picker.tsx
View File

@ -2,14 +2,12 @@ import spriteSheet from 'emoji-datasource/img/twitter/sheets/32.png';
import { Picker as EmojiPicker } from 'emoji-mart';
import { useRef, useEffect } from 'react';
import { joinPublicPath } from 'soapbox/utils/static.ts';
import data from '../data.ts';
const getSpritesheetURL = () => spriteSheet;
const getImageURL = (set: string, name: string) => {
return joinPublicPath(`/packs/emoji/${name}.svg`);
const getImageURL = (_set: string, name: string) => {
return `/packs/emoji/${name}.svg`;
};
const Picker: React.FC<any> = (props) => {
@ -21,7 +19,7 @@ const Picker: React.FC<any> = (props) => {
new EmojiPicker(input);
}, []);
return <div ref={ref} />;
return <div className='flex justify-center' ref={ref} />;
};
export default Picker;

6
src/features/ui/components/action-button.tsx
View File

@ -226,10 +226,10 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
let icon: string | undefined;
if (isFollowing) {
icon = plusIcon;
} else if (blockedBy) {
if (blockedBy) {
icon = banIcon;
} else if (!isFollowing) {
icon = plusIcon;
}
return (

2
src/features/ui/components/modal-root.tsx
View File

@ -18,6 +18,7 @@ import {
EditDomainModal,
EditFederationModal,
EmbedModal,
EmojiPickerModal,
EventMapModal,
EventParticipantsModal,
FamiliarFollowersModal,
@ -72,6 +73,7 @@ const MODAL_COMPONENTS: Record<string, React.ExoticComponent<any>> = {
'EDIT_FEDERATION': EditFederationModal,
'EDIT_RULE': EditRuleModal,
'EMBED': EmbedModal,
'EMOJI_PICKER': EmojiPickerModal,
'EVENT_MAP': EventMapModal,
'EVENT_PARTICIPANTS': EventParticipantsModal,
'FAMILIAR_FOLLOWERS': FamiliarFollowersModal,

17
src/features/ui/components/modals/emoji-picker-modal.tsx Normal file
View File

@ -0,0 +1,17 @@
import Modal from 'soapbox/components/ui/modal.tsx';
import EmojiPickerDropdown from 'soapbox/features/emoji/components/emoji-picker-dropdown.tsx';
import { Emoji } from 'soapbox/features/emoji/index.ts';
interface IEmojiPickerModal {
onPickEmoji?: (emoji: Emoji) => void;
}
export const EmojiPickerModal: React.FC<IEmojiPickerModal> = (props) => {
return (
<Modal className='flex' theme='transparent'>
<EmojiPickerDropdown {...props} />
</Modal>
);
};
export default EmojiPickerModal;

1
src/features/ui/util/async-components.ts
View File

@ -2,6 +2,7 @@ import { lazy } from 'react';
export const AboutPage = lazy(() => import('soapbox/features/about/index.tsx'));
export const EmojiPicker = lazy(() => import('soapbox/features/emoji/components/emoji-picker.tsx'));
export const EmojiPickerModal = lazy(() => import('soapbox/features/ui/components/modals/emoji-picker-modal.tsx'));
export const Notifications = lazy(() => import('soapbox/features/notifications/index.tsx'));
export const LandingTimeline = lazy(() => import('soapbox/features/landing-timeline/index.tsx'));
export const HomeTimeline = lazy(() => import('soapbox/features/home-timeline/index.tsx'));

3
src/init/soapbox-mount.tsx
View File

@ -4,7 +4,6 @@ import { BrowserRouter, Switch, Redirect, Route } from 'react-router-dom';
import { CompatRouter } from 'react-router-dom-v5-compat';
import { openModal } from 'soapbox/actions/modals.ts';
import * as BuildConfig from 'soapbox/build-config.ts';
import LoadingScreen from 'soapbox/components/loading-screen.tsx';
import { ScrollContext } from 'soapbox/components/scroll-context.tsx';
import SiteErrorBoundary from 'soapbox/components/site-error-boundary.tsx';
@ -48,7 +47,7 @@ const SoapboxMount = () => {
return (
<SiteErrorBoundary>
<BrowserRouter basename={BuildConfig.FE_SUBDIRECTORY}>
<BrowserRouter>
<CompatRouter>
<ScrollContext>
<Switch>

2
src/locales/en.json
View File

@ -202,8 +202,6 @@
"alert.unexpected.links.support": "Support",
"alert.unexpected.message": "Something went wrong.",
"alert.unexpected.return_home": "Return Home",
"alert.unexpected.submit_feedback": "Submit Feedback",
"alert.unexpected.thanks": "Thanks for your feedback!",
"aliases.account.add": "Create alias",
"aliases.account_label": "Old account:",
"aliases.aliases_list_delete": "Unlink alias",

5
src/queries/chats.ts
View File

@ -13,7 +13,6 @@ import { normalizeChatMessage } from 'soapbox/normalizers/index.ts';
import toast from 'soapbox/toast.tsx';
import { ChatMessage } from 'soapbox/types/entities.ts';
import { reOrderChatListItems, updateChatMessage } from 'soapbox/utils/chats.ts';
import { getPagination } from 'soapbox/utils/pagination.ts';
import { flattenPages, PaginatedResult, updatePageItem } from 'soapbox/utils/queries.ts';
import { queryClient } from './client.ts';
@ -91,7 +90,7 @@ const useChatMessages = (chat: IChat) => {
const response = await api.get(uri);
const data = await response.json();
const { next } = getPagination(response);
const { next } = response.pagination();
const hasMore = !!next;
const result = data.map(normalizeChatMessage);
@ -144,7 +143,7 @@ const useChats = (search?: string) => {
});
const data: IChat[] = await response.json();
const { next } = getPagination(response);
const { next } = response.pagination();
const hasMore = !!next;
setUnreadChatsCount(Number(response.headers.get('x-unread-messages-count')) || sumBy(data, (chat) => chat.unread));

3
src/queries/search.ts
View File

@ -2,7 +2,6 @@ import { keepPreviousData, useInfiniteQuery } from '@tanstack/react-query';
import { useApi } from 'soapbox/hooks/useApi.ts';
import { Account } from 'soapbox/types/entities.ts';
import { getPagination } from 'soapbox/utils/pagination.ts';
import { flattenPages, PaginatedResult } from 'soapbox/utils/queries.ts';
export default function useAccountSearch(q: string) {
@ -21,7 +20,7 @@ export default function useAccountSearch(q: string) {
});
const data = await response.json();
const { next } = getPagination(response);
const { next } = response.pagination();
const hasMore = !!next;
return {

5
src/queries/suggestions.ts
View File

@ -4,7 +4,6 @@ import { fetchRelationships } from 'soapbox/actions/accounts.ts';
import { importFetchedAccounts } from 'soapbox/actions/importer/index.ts';
import { useApi } from 'soapbox/hooks/useApi.ts';
import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
import { getPagination } from 'soapbox/utils/pagination.ts';
import { PaginatedResult, removePageItem } from '../utils/queries.ts';
@ -34,7 +33,7 @@ const useSuggestions = () => {
const getV2Suggestions = async (pageParam: PageParam): Promise<PaginatedResult<Result>> => {
const endpoint = pageParam?.link || '/api/v2/suggestions';
const response = await api.get(endpoint);
const { next } = getPagination(response);
const { next } = response.pagination();
const hasMore = !!next;
const data: Suggestion[] = await response.json();
@ -93,7 +92,7 @@ function useOnboardingSuggestions() {
const getV2Suggestions = async (pageParam: any): Promise<{ data: Suggestion[]; link: string | undefined; hasMore: boolean }> => {
const link = pageParam?.link || '/api/v2/suggestions';
const response = await api.get(link);
const { next } = getPagination(response);
const { next } = response.pagination();
const hasMore = !!next;
const data: Suggestion[] = await response.json();

16
src/utils/pagination.ts
View File

@ -1,16 +0,0 @@
import LinkHeader from 'http-link-header';
interface Pagination {
next?: string;
prev?: string;
}
export function getPagination(response: Response): Pagination {
const header = response.headers.get('link');
const links = header ? new LinkHeader(header) : undefined;
return {
next: links?.refs.find((link) => link.rel === 'next')?.uri,
prev: links?.refs.find((link) => link.rel === 'prev')?.uri,
};
}

13
src/utils/static.ts
View File

@ -1,13 +0,0 @@
/**
* Static: functions related to static files.
* @module soapbox/utils/static
*/
import { join } from 'path-browserify';
import * as BuildConfig from 'soapbox/build-config.ts';
/** Gets the path to a file with build configuration being considered. */
export const joinPublicPath = (...paths: string[]): string => {
return join(BuildConfig.FE_SUBDIRECTORY, ...paths);
};

2
tailwind.config.ts
View File

@ -6,7 +6,7 @@ import plugin from 'tailwindcss/plugin';
import { parseColorMatrix } from './tailwind/colors.ts';
const blackVariantPlugin = plugin(({ addVariant }) => addVariant('black', '.black &'));
const blackVariantPlugin = plugin(({ addVariant }) => addVariant('black', '.black.black &'));
const config: Config = {
content: ['./src/**/*.{html,js,ts,tsx}', './custom/instance/**/*.html', './index.html'],