initial commit

fluxer_app/src/components/modals/CustomStatusModal.tsx

@@ -0,0 +1,369 @@
+/*
+ * Copyright (C) 2026 Fluxer Contributors
+ *
+ * This file is part of Fluxer.
+ *
+ * Fluxer is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Fluxer is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Fluxer. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import type {I18n} from '@lingui/core';
+import {msg} from '@lingui/core/macro';
+import {Trans, useLingui} from '@lingui/react/macro';
+import {SmileyIcon, XIcon} from '@phosphor-icons/react';
+import clsx from 'clsx';
+import {observer} from 'mobx-react-lite';
+import React from 'react';
+import * as ModalActionCreators from '~/actions/ModalActionCreators';
+import * as UserSettingsActionCreators from '~/actions/UserSettingsActionCreators';
+import {Input} from '~/components/form/Input';
+import {Select, type SelectOption} from '~/components/form/Select';
+import * as Modal from '~/components/modals/Modal';
+import {ExpressionPickerPopout} from '~/components/popouts/ExpressionPickerPopout';
+import {ProfilePreview} from '~/components/profile/ProfilePreview';
+import {Button} from '~/components/uikit/Button/Button';
+import FocusRing from '~/components/uikit/FocusRing/FocusRing';
+import {Popout} from '~/components/uikit/Popout/Popout';
+import {type CustomStatus, normalizeCustomStatus} from '~/lib/customStatus';
+import type {Emoji} from '~/stores/EmojiStore';
+import EmojiStore from '~/stores/EmojiStore';
+import UserSettingsStore from '~/stores/UserSettingsStore';
+import UserStore from '~/stores/UserStore';
+import {getEmojiURL, shouldUseNativeEmoji} from '~/utils/EmojiUtils';
+import styles from './CustomStatusModal.module.css';
+
+const MS_PER_MINUTE = 60 * 1000;
+const MS_PER_DAY = 24 * 60 * 60 * 1000;
+
+interface TimeLabel {
+	dayLabel: string;
+	timeString: string;
+}
+
+type ExpirationKey = '24h' | '4h' | '1h' | '30m' | 'never';
+
+interface ExpirationOption {
+	key: ExpirationKey;
+	minutes: number | null;
+	expiresAt: string | null;
+	relativeLabel: TimeLabel | null;
+	label: string;
+}
+
+const DEFAULT_EXPIRATION_KEY: ExpirationKey = '24h';
+
+const getPopoutClose = (renderProps: unknown): (() => void) => {
+	const props = renderProps as {
+		close?: unknown;
+		requestClose?: unknown;
+		onClose?: unknown;
+	};
+
+	if (typeof props.close === 'function') return props.close as () => void;
+	if (typeof props.requestClose === 'function') return props.requestClose as () => void;
+	if (typeof props.onClose === 'function') return props.onClose as () => void;
+
+	return () => {};
+};
+
+const formatLabelWithRelative = (label: string, relative: TimeLabel | null): React.ReactNode => {
+	if (!relative) return label;
+
+	return (
+		<>
+			{label} (
+			<Trans>
+				{relative.dayLabel} at {relative.timeString}
+			</Trans>
+			)
+		</>
+	);
+};
+
+const getDayDifference = (reference: Date, target: Date): number => {
+	const referenceDayStart = new Date(reference.getFullYear(), reference.getMonth(), reference.getDate());
+	const targetDayStart = new Date(target.getFullYear(), target.getMonth(), target.getDate());
+	return Math.round((targetDayStart.getTime() - referenceDayStart.getTime()) / MS_PER_DAY);
+};
+
+const formatTimeString = (date: Date): string =>
+	date.toLocaleTimeString(undefined, {hour: '2-digit', minute: '2-digit', hourCycle: 'h23'});
+
+const formatRelativeDayTimeLabel = (i18n: I18n, reference: Date, target: Date): TimeLabel => {
+	const dayOffset = getDayDifference(reference, target);
+	const timeString = formatTimeString(target);
+
+	if (dayOffset === 0) return {dayLabel: i18n._(msg`today`), timeString};
+	if (dayOffset === 1) return {dayLabel: i18n._(msg`tomorrow`), timeString};
+
+	const dayLabel = target.toLocaleDateString(undefined, {
+		weekday: 'short',
+		month: 'short',
+		day: 'numeric',
+	});
+	return {dayLabel, timeString};
+};
+
+const buildDraftStatus = (params: {
+	text: string;
+	emojiId: string | null;
+	emojiName: string | null;
+	expiresAt: string | null;
+}): CustomStatus | null => {
+	return normalizeCustomStatus({
+		text: params.text || null,
+		emojiId: params.emojiId,
+		emojiName: params.emojiName,
+		expiresAt: params.expiresAt,
+	});
+};
+
+export const CustomStatusModal = observer(() => {
+	const {i18n} = useLingui();
+	const initialStatus = normalizeCustomStatus(UserSettingsStore.customStatus);
+	const currentUser = UserStore.getCurrentUser();
+
+	const [statusText, setStatusText] = React.useState(initialStatus?.text ?? '');
+	const [emojiId, setEmojiId] = React.useState<string | null>(initialStatus?.emojiId ?? null);
+	const [emojiName, setEmojiName] = React.useState<string | null>(initialStatus?.emojiName ?? null);
+	const mountedAt = React.useMemo(() => new Date(), []);
+	const [emojiPickerOpen, setEmojiPickerOpen] = React.useState(false);
+	const emojiButtonRef = React.useRef<HTMLButtonElement | null>(null);
+
+	const expirationPresets = React.useMemo(
+		() => [
+			{key: '24h' as const, label: i18n._(msg`24 hours`), minutes: 24 * 60},
+			{key: '4h' as const, label: i18n._(msg`4 hours`), minutes: 4 * 60},
+			{key: '1h' as const, label: i18n._(msg`1 hour`), minutes: 60},
+			{key: '30m' as const, label: i18n._(msg`30 minutes`), minutes: 30},
+			{key: 'never' as const, label: i18n._(msg`Don't clear`), minutes: null},
+		],
+		[i18n],
+	);
+
+	const expirationOptions = React.useMemo<Array<ExpirationOption>>(
+		() =>
+			expirationPresets.map((preset) => {
+				if (preset.minutes == null) {
+					return {...preset, expiresAt: null, relativeLabel: null};
+				}
+
+				const target = new Date(mountedAt.getTime() + preset.minutes * MS_PER_MINUTE);
+
+				return {
+					...preset,
+					expiresAt: target.toISOString(),
+					relativeLabel: formatRelativeDayTimeLabel(i18n, mountedAt, target),
+				};
+			}),
+		[mountedAt, i18n, expirationPresets],
+	);
+
+	const expirationLabelMap = React.useMemo<Record<ExpirationKey, TimeLabel | null>>(() => {
+		return expirationOptions.reduce<Record<ExpirationKey, TimeLabel | null>>(
+			(acc, option) => {
+				acc[option.key] = option.relativeLabel;
+				return acc;
+			},
+			{} as Record<ExpirationKey, TimeLabel | null>,
+		);
+	}, [expirationOptions]);
+
+	const selectOptions = React.useMemo<Array<SelectOption<ExpirationKey>>>(() => {
+		return expirationOptions.map((option) => ({value: option.key, label: option.label}));
+	}, [expirationOptions]);
+
+	const [selectedExpiration, setSelectedExpiration] = React.useState<ExpirationKey>(DEFAULT_EXPIRATION_KEY);
+	const [expiresAt, setExpiresAt] = React.useState<string | null>(() => {
+		return expirationOptions.find((option) => option.key === DEFAULT_EXPIRATION_KEY)?.expiresAt ?? null;
+	});
+	const [isSaving, setIsSaving] = React.useState(false);
+
+	const draftStatus = React.useMemo(
+		() => buildDraftStatus({text: statusText.trim(), emojiId, emojiName, expiresAt}),
+		[statusText, emojiId, emojiName, expiresAt],
+	);
+
+	const handleExpirationChange = (value: ExpirationKey) => {
+		const option = expirationOptions.find((entry) => entry.key === value);
+		setSelectedExpiration(value);
+		setExpiresAt(option?.expiresAt ?? null);
+	};
+
+	const handleEmojiSelect = React.useCallback((emoji: Emoji) => {
+		if (emoji.id) {
+			setEmojiId(emoji.id);
+			setEmojiName(emoji.name);
+		} else {
+			setEmojiId(null);
+			setEmojiName(emoji.surrogates ?? emoji.name);
+		}
+	}, []);
+
+	const handleSave = async () => {
+		if (isSaving) return;
+
+		setIsSaving(true);
+		try {
+			await UserSettingsActionCreators.update({customStatus: draftStatus});
+			ModalActionCreators.pop();
+		} finally {
+			setIsSaving(false);
+		}
+	};
+
+	const handleClearDraft = () => {
+		setStatusText('');
+		setEmojiId(null);
+		setEmojiName(null);
+	};
+
+	const renderEmojiPreview = (): React.ReactNode => {
+		if (!draftStatus) return null;
+
+		if (draftStatus.emojiId) {
+			const emoji = EmojiStore.getEmojiById(draftStatus.emojiId);
+			if (emoji?.url) {
+				return <img src={emoji.url} alt={emoji.name} className={styles.emojiPreviewImage} />;
+			}
+		}
+
+		if (draftStatus.emojiName) {
+			if (!shouldUseNativeEmoji) {
+				const twemojiUrl = getEmojiURL(draftStatus.emojiName);
+				if (twemojiUrl) {
+					return <img src={twemojiUrl} alt={draftStatus.emojiName} className={styles.emojiPreviewImage} />;
+				}
+			}
+			return <span className={styles.emojiPreviewNative}>{draftStatus.emojiName}</span>;
+		}
+
+		return null;
+	};
+
+	const emojiPreview = renderEmojiPreview();
+
+	return (
+		<Modal.Root onClose={() => ModalActionCreators.pop()} size="medium" className={styles.modalRoot}>
+			<Modal.ScreenReaderLabel text={i18n._(msg`Set your status`)} />
+			<Modal.Header title={i18n._(msg`Set your status`)} />
+			<Modal.Content>
+				<div className={styles.previewSection}>
+					{currentUser && (
+						<ProfilePreview
+							user={currentUser}
+							showMembershipInfo={false}
+							showMessageButton={false}
+							showPreviewLabel={false}
+							previewCustomStatus={draftStatus}
+						/>
+					)}
+				</div>
+
+				<div className={styles.statusInputWrapper}>
+					<Input
+						id="custom-status-text"
+						value={statusText}
+						onChange={(event) => setStatusText(event.target.value.slice(0, 128))}
+						maxLength={128}
+						placeholder={i18n._(msg`What's happening?`)}
+						leftElement={
+							<Popout
+								position="bottom-start"
+								animationType="none"
+								offsetMainAxis={8}
+								offsetCrossAxis={0}
+								onOpen={() => setEmojiPickerOpen(true)}
+								onClose={() => setEmojiPickerOpen(false)}
+								returnFocusRef={emojiButtonRef}
+								render={(renderProps) => {
+									const closePopout = getPopoutClose(renderProps);
+
+									return (
+										<ExpressionPickerPopout
+											onEmojiSelect={(emoji) => {
+												handleEmojiSelect(emoji);
+												setEmojiPickerOpen(false);
+												closePopout();
+											}}
+											onClose={() => {
+												setEmojiPickerOpen(false);
+												closePopout();
+											}}
+											visibleTabs={['emojis']}
+										/>
+									);
+								}}
+							>
+								<FocusRing offset={-2} enabled={!isSaving}>
+									<button
+										ref={emojiButtonRef}
+										type="button"
+										className={clsx(styles.emojiTriggerButton, emojiPickerOpen && styles.emojiTriggerButtonActive)}
+										aria-label={emojiPreview ? i18n._(msg`Change emoji`) : i18n._(msg`Choose an emoji`)}
+										disabled={isSaving}
+									>
+										{emojiPreview ?? <SmileyIcon size={22} weight="fill" aria-hidden="true" />}
+									</button>
+								</FocusRing>
+							</Popout>
+						}
+						rightElement={
+							draftStatus ? (
+								<FocusRing offset={-2} enabled={!isSaving}>
+									<button
+										type="button"
+										className={styles.clearButtonIcon}
+										onClick={handleClearDraft}
+										disabled={isSaving}
+										aria-label={i18n._(msg`Clear custom status`)}
+									>
+										<XIcon size={16} weight="bold" />
+									</button>
+								</FocusRing>
+							) : null
+						}
+					/>
+					<div className={styles.characterCount}>{statusText.length}/128</div>
+				</div>
+			</Modal.Content>
+
+			<Modal.Footer className={styles.footer}>
+				<div className={styles.expirationSelectWrapper}>
+					<label className={styles.expirationLabel} htmlFor="custom-status-expiration">
+						<Trans>Clear after</Trans>
+					</label>
+
+					<Select
+						id="custom-status-expiration"
+						className={styles.expirationSelect}
+						options={selectOptions}
+						value={selectedExpiration}
+						onChange={handleExpirationChange}
+						disabled={isSaving}
+						renderOption={(option) => formatLabelWithRelative(option.label, expirationLabelMap[option.value])}
+						renderValue={(option) =>
+							option ? formatLabelWithRelative(option.label, expirationLabelMap[option.value]) : null
+						}
+					/>
+				</div>
+
+				<Button variant="primary" onClick={handleSave} submitting={isSaving}>
+					<Trans>Save</Trans>
+				</Button>
+			</Modal.Footer>
+		</Modal.Root>
+	);
+});
+
+CustomStatusModal.displayName = 'CustomStatusModal';