pepepper/fluxer
1
0 Fork 0
mirror of https://github.com/fluxerapp/fluxer synced 2026-10-19 05:55:34 +09:00
Code Issues Packages Projects Releases Wiki Activity

fix(app): rework composer layout and footer alignment (#1591)

Browse Source
This commit is contained in:
Hampus authored and GitHub committed 2026-08-14 19:28:22 +02:00
1 parent d56c1e5674
commit 01432bc682
76 files changed
+8772 -8759
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

fluxer_app/src/features/channel/components/SlowmodeIndicator.tsx
+45 -30
View File
@@ -16,22 +16,29 @@ import {ClockIcon} from '@phosphor-icons/react';
import {clsx} from 'clsx';
import {observer} from 'mobx-react-lite';
const SLOWMODE_IS_ENABLED_BUT_YOU_ARE_IMMUNE_DESCRIPTOR = msg({
message: 'Slowmode is enabled, but you are immune.',
comment: 'Description text in the channel and chat slowmode indicator.',
});
const YOU_ARE_IN_SLOWMODE_PLEASE_WAIT_BEFORE_SENDING_DESCRIPTOR = msg({
message: "You're in slowmode. Wait before sending another message.",
comment: 'Description text in the channel and chat slowmode indicator.',
});
const SLOWMODE_IS_ENABLED_FOR_THIS_CHANNEL_DESCRIPTOR = msg({
message: 'Slowmode is enabled for this channel.',
comment: 'Description text in the channel and chat slowmode indicator.',
});
const SLOWMODE_DESCRIPTOR = msg({
message: '{durationLabel} slowmode',
const SLOWMODE_IS_SET_BUT_YOU_ARE_IMMUNE_DESCRIPTOR = msg({
message: 'Slowmode is set to {durationLabel}, but you are immune.',
comment:
'Short label in the channel and chat slowmode indicator. Keep it concise. Preserve {durationLabel}; it is inserted by code.',
'Tooltip on the composer slowmode indicator when the reader can bypass slowmode. Preserve {durationLabel}; it is inserted by code.',
});
const SLOWMODE_IS_SET_WAIT_BEFORE_SENDING_DESCRIPTOR = msg({
message: 'Slowmode is set to {durationLabel}. Wait before sending another message.',
comment:
'Tooltip on the composer slowmode indicator while the reader is counting down. Preserve {durationLabel}; it is inserted by code.',
});
const SLOWMODE_IS_SET_FOR_THIS_CHANNEL_DESCRIPTOR = msg({
message: 'Slowmode is set to {durationLabel} for this channel.',
comment:
'Tooltip on the composer slowmode indicator when the reader is free to send. Preserve {durationLabel}; it is inserted by code.',
});
const SLOWMODE_IS_ENABLED_DESCRIPTOR = msg({
message: 'Slowmode is enabled',
comment: 'Short label in the composer slowmode indicator when the reader is free to send. Keep it concise.',
});
const SLOWMODE_IS_ACTIVE_DESCRIPTOR = msg({
message: 'Slowmode is active ({remaining})',
comment:
'Short label in the composer slowmode indicator while the countdown runs. Keep it concise. Preserve {remaining}; it is an mm:ss or hh:mm:ss timer inserted by code.',
});
interface SlowmodeIndicatorProps {
@@ -83,28 +90,36 @@ export const SlowmodeIndicator = observer(({slowmodeRemaining, slowmodeDuration,
const {i18n} = useLingui();
const locale = i18n.locale;
const onCooldown = !isImmune && slowmodeRemaining > 0;
const tooltipText = isImmune
? i18n._(SLOWMODE_IS_ENABLED_BUT_YOU_ARE_IMMUNE_DESCRIPTOR)
: onCooldown
? i18n._(YOU_ARE_IN_SLOWMODE_PLEASE_WAIT_BEFORE_SENDING_DESCRIPTOR)
: i18n._(SLOWMODE_IS_ENABLED_FOR_THIS_CHANNEL_DESCRIPTOR);
const durationLabel = formatSlowmodeDuration(slowmodeDuration, locale);
let tooltipText: string;
if (isImmune) {
tooltipText = i18n._(SLOWMODE_IS_SET_BUT_YOU_ARE_IMMUNE_DESCRIPTOR, {durationLabel});
} else if (onCooldown) {
tooltipText = i18n._(SLOWMODE_IS_SET_WAIT_BEFORE_SENDING_DESCRIPTOR, {durationLabel});
} else {
tooltipText = i18n._(SLOWMODE_IS_SET_FOR_THIS_CHANNEL_DESCRIPTOR, {durationLabel});
}
let statusLabel: string;
if (onCooldown) {
statusLabel = i18n._(SLOWMODE_IS_ACTIVE_DESCRIPTOR, {remaining: formatSlowmodeTime(slowmodeRemaining, locale)});
} else {
statusLabel = i18n._(SLOWMODE_IS_ENABLED_DESCRIPTOR);
}
return (
<Tooltip text={tooltipText} data-flx="channel.slowmode-indicator.tooltip">
<div
className={clsx(styles.container, onCooldown && styles.cooldown)}
data-flx="channel.slowmode-indicator.container"
>
<ClockIcon size={remFromPx(12)} weight="fill" data-flx="channel.slowmode-indicator.clock-icon" />
{onCooldown ? (
<span className={styles.time} data-flx="channel.slowmode-indicator.time">
{formatSlowmodeTime(slowmodeRemaining, locale)}
</span>
) : (
<span className={styles.label} data-flx="channel.slowmode-indicator.label">
{i18n._(SLOWMODE_DESCRIPTOR, {durationLabel})}
</span>
)}
<span className={styles.label} data-flx="channel.slowmode-indicator.label">
{statusLabel}
</span>
<ClockIcon
size={remFromPx(12)}
weight="fill"
className={styles.icon}
data-flx="channel.slowmode-indicator.clock-icon"
/>
</div>
</Tooltip>
);