{
	"id": "unbound.character-counter",
	"name": "Character Counter",
	"description": "Shows the current message length and Discord's character limit in the composer.",
	"authors": [
		{
			"name": "thororen",
			"id": "848339671629299742"
		},
		{
			"name": "creations",
			"id": "209830981060788225"
		},
		{
			"name": "adrian",
			"id": "224617799434108928"
		}
	],
	"version": "1.0.5",
	"unbound": {
		"min": "3.0.0"
	},
	"icon": "TextIcon",
	"main": "index.tsx"
}

import { unbound } from '@unbound-app/cli/rollup';

export default unbound(import.meta.url);

[test]
# Serves the plugin's manifest, translations, settings and a fake Unbound API to every test.
preload = ["@unbound-app/api/testing/preset"]

import { patcher } from '@unbound-app/api';

import { patchChatInput } from '~/patches';

export function start() {
	patchChatInput();
}

export function stop() {
	patcher.unpatchAll();
}

import { cloneElement, isValidElement, type ReactNode } from 'react';
import { flux, metro, patcher } from '@unbound-app/api';

import { CharacterCounter } from '~/components/character-counter';

type ContainerProps = { channel?: { id?: string }; channelId?: string };

/**
 * @description Shows the counter above the composer without changing the composer's layout, by patching the render of
 * Discord's `FloatingChatInputContainer`; the counter reads the draft from `ChatInputs`.
 */
export function patchChatInput(): void {
	const ChatInputs = metro.findByProps('getBestActiveInputForChannelId');
	const FloatingChatInputContainer = metro.findByFilePath(
		'modules/chat_input/native/FloatingChatInputContainer.tsx',
	);

	if (!ChatInputs || !FloatingChatInputContainer) {
		logger.warn('Counter skipped: Discord moved ChatInputs or FloatingChatInputContainer.');

		return;
	}

	const SelectedChannelStore = flux.getStore('SelectedChannel');

	patcher.react.after(FloatingChatInputContainer, 'default', ({ props, result }) => {
		const container: ContainerProps = props;
		const channelId =
			container.channel?.id ?? container.channelId ?? SelectedChannelStore.getChannelId();

		if (!channelId || !isValidElement<{ children?: ReactNode }>(result)) return;

		return cloneElement(
			result,
			{},
			<>
				{result.props.children}
				<CharacterCounter
					key='character-counter'
					channelId={channelId}
					inputs={ChatInputs}
				/>
			</>,
		);
	});
}

import type { FluxUser } from '@unbound-app/api/flux';

export type CounterTone = 'primary' | 'muted' | 'yellow' | 'orange' | 'red';

/**
 * @description Discord's message length limit for a user.
 * @param user The signed-in user; a `premiumType` of `2` is Nitro.
 * @returns 4000 for Nitro, otherwise 2000.
 */
export function characterLimit(user: Pick<FluxUser, 'premiumType'> | undefined): number {
	return user?.premiumType === 2 ? 4000 : 2000;
}

/**
 * @description Picks the counter's color as the message approaches the limit.
 * @param length The message length.
 * @param limit The user's message length limit.
 * @param colorEffects Whether the warning colors are turned on.
 * @returns `primary` when warnings are off, otherwise a tone for the share of the limit used.
 */
export function counterTone(length: number, limit: number, colorEffects: boolean): CounterTone {
	if (!colorEffects) return 'primary';

	const used = length / limit;

	if (used < 0.5) return 'muted';
	if (used < 0.75) return 'yellow';
	if (used < 0.9) return 'orange';

	return 'red';
}

	const length = useDraftLength(inputs, channelId);
	const limit = flux.useStore(UserStore, (store) => characterLimit(store.getCurrentUser()));
	const colorEffects = useSetting('colorEffects');

// Each tone tries Discord's theme tokens in order, then a fixed color when the theme has none.
export const TONE_COLORS = {
	primary: { tokens: ['BRAND_330', 'BRAND_500'], fallback: '#5865f2' },
	muted: { tokens: ['TEXT_NORMAL'], fallback: '#f2f3f5' },
	yellow: { tokens: ['YELLOW_330', 'YELLOW_300'], fallback: '#fee75c' },
	orange: { tokens: ['ORANGE_330', 'ORANGE_300'], fallback: '#f0b232' },
	red: { tokens: ['RED_360', 'RED_400'], fallback: '#ed4245' },
};

export const COUNTER_HEIGHT = 20;

import { defineSettings, setting } from '@unbound-app/settings/schema';

export default defineSettings(
	{
		colorEffects: setting.boolean({
			default: true,
			title: 'COLOR_THRESHOLDS',
			subtitle: 'COLOR_THRESHOLDS_SUBTITLE',
		}),
	},
	{ title: 'APPEARANCE' },
);

{
	"APPEARANCE": "Appearance",
	"COLOR_THRESHOLDS": "Color thresholds",
	"COLOR_THRESHOLDS_SUBTITLE": "Warn as the message approaches Discord’s character limit.",
	"COUNTER_LABEL": "{length} of {limit} characters"
}

	test('shows the length over the limit while a message is written', () => {
		draft.text = 'hello';

		const counter = renderComposer().find('Text');

		expect(counter.text()).toBe('5/2000');
		expect(counter.props.accessibilityLabel).toBe('5 of 2000 characters');
	});

---
banner: media/banner.png
---

## :sparkle: What it does

- :text: Shows length over your limit, like `120/2000`, while you type.
- :star: The limit is 4000 characters with Nitro and 2000 without.
- :eye: Hides while the chat input is empty and never changes its layout.
- :arrow-up: Moves up to clear the slowmode notice in channels that have one.

## :gear: Settings

- :color-palette: **Color thresholds** turns the counter yellow at 50% of the limit, orange at 75% and red at 90%. Off, it stays in Discord's brand color. On by default.