initial commit

fluxer_app/src/components/invites/DisableInvitesButton.module.css

@@ -0,0 +1,30 @@
+/*
+ * 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/>.
+ */
+
+.container {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.message {
+	font-size: 0.875rem;
+	line-height: 1.25rem;
+	color: var(--text-primary-muted);
+}

fluxer_app/src/components/invites/DisableInvitesButton.tsx

@@ -0,0 +1,99 @@
+/*
+ * 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 {Trans, useLingui} from '@lingui/react/macro';
+import {observer} from 'mobx-react-lite';
+import React from 'react';
+import * as GuildActionCreators from '~/actions/GuildActionCreators';
+import * as ModalActionCreators from '~/actions/ModalActionCreators';
+import {modal} from '~/actions/ModalActionCreators';
+import {ConfirmModal} from '~/components/modals/ConfirmModal';
+import {Button} from '~/components/uikit/Button/Button';
+import GuildStore from '~/stores/GuildStore';
+import UserStore from '~/stores/UserStore';
+import styles from './DisableInvitesButton.module.css';
+
+export const DisableInvitesButton: React.FC<{guildId: string}> = observer(function DisableInvitesButton({guildId}) {
+	const {t} = useLingui();
+	const guild = GuildStore.getGuild(guildId);
+	const currentUser = UserStore.currentUser;
+	const invitesDisabled = guild?.features.has('INVITES_DISABLED') ?? false;
+
+	const isOwner = guild?.ownerId === currentUser?.id;
+	const isUnclaimed = currentUser != null && !currentUser.isClaimed();
+	const isPreviewGuild = isOwner && isUnclaimed;
+
+	const handleToggleInvites = React.useCallback(() => {
+		ModalActionCreators.push(
+			modal(() => (
+				<ConfirmModal
+					title={invitesDisabled ? t`Enable invites for this community` : t`Disable invites for this community`}
+					description={
+						invitesDisabled ? (
+							<Trans>
+								Are you sure you want to enable invites? This will allow users to join this community through invite
+								links again.
+							</Trans>
+						) : (
+							<Trans>
+								Are you sure you want to disable invites? This will prevent new users from joining through invite links
+								until you re-enable them. Existing members will not be affected.
+							</Trans>
+						)
+					}
+					primaryText={invitesDisabled ? t`Enable` : t`Disable`}
+					primaryVariant={invitesDisabled ? 'primary' : 'danger-primary'}
+					secondaryText={t`Cancel`}
+					onPrimary={async () => {
+						await GuildActionCreators.toggleInvitesDisabled(guildId, !invitesDisabled);
+					}}
+				/>
+			)),
+		);
+	}, [guildId, invitesDisabled]);
+
+	if (isPreviewGuild) {
+		return (
+			<div className={styles.container}>
+				<Button variant="secondary" small={true} disabled={true}>
+					<Trans>Invites Locked</Trans>
+				</Button>
+				<p className={styles.message}>
+					<Trans>
+						Invites are locked for preview communities. Claim your account by setting an email and password to enable
+						invites.
+					</Trans>
+				</p>
+			</div>
+		);
+	}
+
+	return (
+		<div className={styles.container}>
+			<Button variant={invitesDisabled ? 'danger-primary' : 'secondary'} small={true} onClick={handleToggleInvites}>
+				{invitesDisabled ? <Trans>Enable Invites</Trans> : <Trans>Pause Invites</Trans>}
+			</Button>
+			{invitesDisabled && (
+				<p className={styles.message}>
+					<Trans>Invites are currently disabled for this community.</Trans>
+				</p>
+			)}
+		</div>
+	);
+});

fluxer_app/src/components/invites/InviteDateToggle.module.css

@@ -0,0 +1,29 @@
+/*
+ * 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/>.
+ */
+
+.container {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.label {
+	font-size: 0.875rem;
+	line-height: 1.25rem;
+}

fluxer_app/src/components/invites/InviteDateToggle.tsx

@@ -0,0 +1,48 @@
+/*
+ * 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 {Trans} from '@lingui/react/macro';
+import {observer} from 'mobx-react-lite';
+import React from 'react';
+import {Checkbox} from '~/components/uikit/Checkbox/Checkbox';
+import styles from './InviteDateToggle.module.css';
+
+interface InviteDateToggleProps {
+	showCreatedDate: boolean;
+	onToggle: (showCreatedDate: boolean) => void;
+}
+
+export const InviteDateToggle: React.FC<InviteDateToggleProps> = observer(({showCreatedDate, onToggle}) => {
+	const handleChange = React.useCallback(
+		(isChecked: boolean) => {
+			onToggle(isChecked);
+		},
+		[onToggle],
+	);
+
+	return (
+		<div className={styles.container}>
+			<Checkbox checked={showCreatedDate} onChange={handleChange} size="small">
+				<span className={styles.label}>
+					<Trans>Show creation date instead of expiration date</Trans>
+				</span>
+			</Checkbox>
+		</div>
+	);
+});

fluxer_app/src/components/invites/InviteListItem.module.css

@@ -0,0 +1,287 @@
+/*
+ * 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/>.
+ */
+
+.header {
+	display: none;
+	grid-template-columns: 170px 130px minmax(140px, 1fr) 90px 140px;
+	gap: 8px;
+	padding: 0 12px 8px 12px;
+}
+
+.headerWithoutChannel {
+	display: none;
+	grid-template-columns: 190px minmax(140px, 1fr) 90px 140px;
+	gap: 12px;
+	padding: 0 12px 8px 12px;
+}
+
+.headerColumn {
+	font-weight: 600;
+	font-size: 12px;
+	text-transform: uppercase;
+	color: var(--text-primary-muted);
+}
+
+.item {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	border-radius: 6px;
+	border: 1px solid var(--background-header-secondary);
+	background-color: var(--background-secondary);
+	padding: 12px;
+	position: relative;
+}
+
+.itemWithChannel {
+	composes: item;
+	display: grid;
+	grid-template-columns: 170px 130px minmax(140px, 1fr) 90px 140px;
+	gap: 8px;
+	align-items: center;
+}
+
+.itemWithoutChannel {
+	composes: item;
+	display: grid;
+	grid-template-columns: 190px minmax(140px, 1fr) 90px 140px;
+	gap: 12px;
+	align-items: center;
+}
+
+.mobileItem {
+	composes: item;
+	cursor: pointer;
+}
+
+.mobileItem:active {
+	opacity: 0.8;
+}
+
+.row {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	overflow: hidden;
+}
+
+.label {
+	font-weight: 600;
+	font-size: 12px;
+	text-transform: uppercase;
+	color: var(--text-primary-muted);
+}
+
+.inviter {
+	composes: row;
+}
+
+.channel {
+	composes: row;
+}
+
+.code {
+	composes: row;
+	position: relative;
+}
+
+.uses {
+	composes: row;
+}
+
+.date {
+	composes: row;
+}
+
+.copyButton {
+	flex-shrink: 0;
+	border-radius: 4px;
+	padding: 4px;
+	color: var(--text-primary-muted);
+	transition:
+		background-color 0.2s,
+		color 0.2s;
+	cursor: pointer;
+}
+
+.copyButton:hover {
+	background-color: var(--background-header-secondary);
+	color: var(--text-primary);
+}
+
+.copyButtonHidden {
+	composes: copyButton;
+	opacity: 0;
+	pointer-events: none;
+}
+
+.revokeButton {
+	position: absolute;
+	top: -8px;
+	right: -8px;
+	border-radius: 50%;
+	border: 1px solid var(--background-header-secondary);
+	background-color: var(--background-primary);
+	padding: 8px;
+	color: var(--text-primary-muted);
+	box-shadow:
+		0 4px 6px -1px rgba(0, 0, 0, 0.1),
+		0 2px 4px -1px rgba(0, 0, 0, 0.06);
+	transition:
+		border-color 0.2s,
+		background-color 0.2s,
+		color 0.2s;
+	cursor: pointer;
+}
+
+.revokeButton:hover {
+	border-color: var(--status-danger);
+	background-color: var(--status-danger);
+	color: white;
+}
+
+.revokeButtonHidden {
+	composes: revokeButton;
+	opacity: 0;
+	pointer-events: none;
+}
+
+@media (hover: hover) and (pointer: fine) {
+	.itemWithChannel:hover .copyButtonHidden,
+	.itemWithoutChannel:hover .copyButtonHidden {
+		opacity: 1;
+		pointer-events: auto;
+	}
+
+	.itemWithChannel:hover .revokeButtonHidden,
+	.itemWithoutChannel:hover .revokeButtonHidden {
+		opacity: 1;
+		pointer-events: auto;
+	}
+}
+
+@media (hover: none) {
+	.revokeButton,
+	.revokeButtonHidden {
+		display: none;
+	}
+}
+
+.avatar {
+	height: 2rem;
+	width: 2rem;
+	flex-shrink: 0;
+	border-radius: 50%;
+}
+
+.username {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-size: 0.875rem;
+}
+
+.usernameUnknown {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-size: 0.875rem;
+	color: var(--text-primary-muted);
+}
+
+.channelIcon {
+	color: var(--text-tertiary);
+	flex-shrink: 0;
+}
+
+.channelInfo {
+	display: flex;
+	min-width: 0;
+	flex: 1;
+	flex-direction: column;
+	justify-content: center;
+	overflow: hidden;
+}
+
+.channelName {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-weight: 500;
+	font-size: 0.875rem;
+	color: var(--text-primary);
+}
+
+.categoryName {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	color: var(--text-tertiary);
+	font-size: 0.75rem;
+}
+
+.inviteCode {
+	user-select: text;
+	-webkit-user-select: text;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
+	font-size: 0.875rem;
+}
+
+.copyIcon {
+	height: 1rem;
+	width: 1rem;
+}
+
+.usesText {
+	font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
+	font-size: 0.875rem;
+	font-variant-numeric: tabular-nums;
+}
+
+.dateText {
+	font-size: 0.875rem;
+}
+
+.dateTextMonospace {
+	font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
+	font-size: 0.875rem;
+	font-variant-numeric: tabular-nums;
+}
+
+.revokeIcon {
+	height: 0.75rem;
+	width: 0.75rem;
+}
+
+@media (min-width: 768px) {
+	.header {
+		display: grid;
+	}
+
+	.headerWithoutChannel {
+		display: grid;
+	}
+
+	.label {
+		display: none;
+	}
+}

fluxer_app/src/components/invites/InviteListItem.tsx

@@ -0,0 +1,235 @@
+/*
+ * 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 {Trans, useLingui} from '@lingui/react/macro';
+import {ClipboardIcon, XIcon} from '@phosphor-icons/react';
+import {observer} from 'mobx-react-lite';
+import React from 'react';
+import * as TextCopyActionCreators from '~/actions/TextCopyActionCreators';
+import {ChannelTypes} from '~/Constants';
+import FocusRing from '~/components/uikit/FocusRing/FocusRing';
+import {Tooltip} from '~/components/uikit/Tooltip/Tooltip';
+import {useInviteCountdown} from '~/hooks/useInviteCountdown';
+import type {Invite} from '~/records/MessageRecord';
+import ChannelStore from '~/stores/ChannelStore';
+import MobileLayoutStore from '~/stores/MobileLayoutStore';
+import RuntimeConfigStore from '~/stores/RuntimeConfigStore';
+import UserStore from '~/stores/UserStore';
+import {isGuildInvite} from '~/types/InviteTypes';
+import * as AvatarUtils from '~/utils/AvatarUtils';
+import * as ChannelUtils from '~/utils/ChannelUtils';
+import * as DateUtils from '~/utils/DateUtils';
+import {stopPropagationOnEnterSpace} from '~/utils/KeyboardUtils';
+import styles from './InviteListItem.module.css';
+
+export const InviteListHeader: React.FC<{showChannel?: boolean; showCreatedDate?: boolean}> = observer(
+	({showChannel = false, showCreatedDate = false}) => {
+		return (
+			<div className={showChannel ? styles.header : styles.headerWithoutChannel}>
+				<div className={styles.headerColumn}>
+					<Trans>Inviter</Trans>
+				</div>
+				{showChannel && (
+					<div className={styles.headerColumn}>
+						<Trans>Channel</Trans>
+					</div>
+				)}
+				<div className={styles.headerColumn}>
+					<Trans>Code</Trans>
+				</div>
+				<div className={styles.headerColumn}>
+					<Trans>Uses</Trans>
+				</div>
+				<div className={styles.headerColumn}>{showCreatedDate ? <Trans>Created</Trans> : <Trans>Expires</Trans>}</div>
+			</div>
+		);
+	},
+);
+
+export const InviteListItem: React.FC<{
+	invite: Invite;
+	onRevoke: (code: string) => void;
+	showChannel?: boolean;
+	showCreatedDate?: boolean;
+}> = observer(({invite, onRevoke, showChannel = false, showCreatedDate = false}) => {
+	const {t, i18n} = useLingui();
+	const {countdown, isMonospace} = useInviteCountdown(invite.expires_at);
+	const inviter = UserStore.getUser(invite.inviter?.id || '');
+	const avatarUrl = inviter ? AvatarUtils.getUserAvatarURL(inviter, false) : null;
+	const {enabled: isMobile} = MobileLayoutStore;
+
+	const guildInvite = isGuildInvite(invite) ? invite : null;
+	const channelFromStore = guildInvite ? ChannelStore.getChannel(guildInvite.channel.id) : null;
+	const categoryFromStore = channelFromStore ? ChannelStore.getChannel(channelFromStore.parentId || '') : null;
+
+	const channel = showChannel ? channelFromStore : null;
+	const category = showChannel && channelFromStore?.parentId ? categoryFromStore : null;
+
+	const usesText = React.useMemo(() => {
+		if (!guildInvite) {
+			return '0';
+		}
+		const currentUses = guildInvite.uses ?? 0;
+		const maxUses = guildInvite.max_uses ?? 0;
+		if (maxUses > 0) {
+			return `${currentUses} / ${maxUses}`;
+		}
+		return String(currentUses);
+	}, [guildInvite]);
+
+	const dateDisplay = React.useMemo(() => {
+		if (showCreatedDate) {
+			if (!guildInvite?.created_at) {
+				return '';
+			}
+			const createdDate = new Date(guildInvite.created_at);
+			return DateUtils.getShortRelativeDateString(createdDate) || '';
+		}
+		return countdown || t`Never`;
+	}, [showCreatedDate, guildInvite, countdown]);
+
+	const dateTooltip = React.useMemo(() => {
+		if (showCreatedDate) {
+			if (!guildInvite?.created_at) {
+				return null;
+			}
+			const createdDate = new Date(guildInvite.created_at);
+			return DateUtils.getFormattedDateTimeWithSeconds(createdDate);
+		}
+		return null;
+	}, [showCreatedDate, guildInvite]);
+
+	const dateIsMonospace = !showCreatedDate && isMonospace;
+
+	const handleCopy = (e: React.MouseEvent) => {
+		e.stopPropagation();
+		TextCopyActionCreators.copy(i18n, `${RuntimeConfigStore.inviteEndpoint}/${invite.code}`);
+	};
+
+	const handleRowClick = () => {
+		if (isMobile) {
+			TextCopyActionCreators.copy(i18n, `${RuntimeConfigStore.inviteEndpoint}/${invite.code}`);
+		}
+	};
+
+	const handleKeyDown = (e: React.KeyboardEvent) => {
+		if (isMobile && (e.key === 'Enter' || e.key === ' ')) {
+			e.preventDefault();
+			handleRowClick();
+		}
+	};
+
+	const itemClass = isMobile ? styles.mobileItem : showChannel ? styles.itemWithChannel : styles.itemWithoutChannel;
+
+	return (
+		// biome-ignore lint/a11y/noStaticElementInteractions: Click/keyboard handlers only on mobile; hover handled in CSS
+		<div
+			role={isMobile ? 'button' : undefined}
+			onClick={isMobile ? handleRowClick : undefined}
+			onKeyDown={isMobile ? handleKeyDown : undefined}
+			tabIndex={isMobile ? 0 : undefined}
+			className={itemClass}
+		>
+			<div className={styles.inviter}>
+				<span className={styles.label}>
+					<Trans>Inviter:</Trans>
+				</span>
+				{inviter && avatarUrl ? (
+					<>
+						<img src={avatarUrl} alt="" className={styles.avatar} loading="lazy" />
+						<span className={styles.username}>{inviter.username}</span>
+					</>
+				) : (
+					<span className={styles.usernameUnknown}>Unknown</span>
+				)}
+			</div>
+
+			{showChannel && channel && (
+				<div className={styles.channel}>
+					<span className={styles.label}>
+						<Trans>Channel:</Trans>
+					</span>
+					{ChannelUtils.getIcon(channel, {size: 20, className: styles.channelIcon})}
+					<div className={styles.channelInfo}>
+						<span className={styles.channelName}>{channel.name}</span>
+						{channel.type !== ChannelTypes.GUILD_CATEGORY && (
+							<span className={styles.categoryName}>{category ? category.name : t`No Category`}</span>
+						)}
+					</div>
+				</div>
+			)}
+
+			<div className={styles.code}>
+				<span className={styles.label}>
+					<Trans>Code:</Trans>
+				</span>
+				<code className={styles.inviteCode}>{invite.code}</code>
+
+				<Tooltip text={t`Click to copy`}>
+					<FocusRing offset={-2}>
+						<button
+							type="button"
+							onClick={handleCopy}
+							className={styles.copyButtonHidden}
+							aria-label={t`Copy invite link`}
+							onKeyDown={stopPropagationOnEnterSpace}
+						>
+							<ClipboardIcon className={styles.copyIcon} />
+						</button>
+					</FocusRing>
+				</Tooltip>
+			</div>
+
+			<div className={styles.uses}>
+				<span className={styles.label}>
+					<Trans>Uses:</Trans>
+				</span>
+				<span className={styles.usesText}>{usesText}</span>
+			</div>
+
+			<div className={styles.date}>
+				<span className={styles.label}>{showCreatedDate ? <Trans>Created:</Trans> : <Trans>Expires:</Trans>}</span>
+				{dateTooltip ? (
+					<Tooltip text={dateTooltip}>
+						<span className={dateIsMonospace ? styles.dateTextMonospace : styles.dateText}>{dateDisplay}</span>
+					</Tooltip>
+				) : (
+					<span className={dateIsMonospace ? styles.dateTextMonospace : styles.dateText}>{dateDisplay}</span>
+				)}
+			</div>
+
+			<Tooltip text={t`Revoke`}>
+				<FocusRing offset={-2}>
+					<button
+						type="button"
+						onClick={(e) => {
+							e.stopPropagation();
+							onRevoke(invite.code);
+						}}
+						className={styles.revokeButtonHidden}
+						aria-label={t`Revoke invite`}
+						onKeyDown={stopPropagationOnEnterSpace}
+					>
+						<XIcon className={styles.revokeIcon} weight="bold" />
+					</button>
+				</FocusRing>
+			</Tooltip>
+		</div>
+	);
+});