feat: add character counter to status message input

Shows X/64 below the input. Fades in at 56 chars (warning colour) and
turns critical red at the limit so users always know where they stand.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-28 16:58:37 -04:00
parent f8ab136492
commit eb283c29ff
+17 -2
View File
@@ -436,7 +436,7 @@ function ProfileStatus() {
> >
<Box direction="Column" grow="Yes" gap="100"> <Box direction="Column" grow="Yes" gap="100">
<Box as="form" onSubmit={handleSubmit} gap="200" alignItems="Center" aria-disabled={saving}> <Box as="form" onSubmit={handleSubmit} gap="200" alignItems="Center" aria-disabled={saving}>
<Box grow="Yes" direction="Column"> <Box grow="Yes" direction="Column" gap="100">
<Input <Input
name="statusMsgInput" name="statusMsgInput"
aria-label="Status message" aria-label="Status message"
@@ -446,8 +446,23 @@ function ProfileStatus() {
variant="Secondary" variant="Secondary"
radii="300" radii="300"
readOnly={saving} readOnly={saving}
maxLength={128} maxLength={64}
/> />
<Text
size="T200"
style={{
textAlign: 'right',
opacity: statusMsg.length >= 56 ? 1 : 0.45,
color:
statusMsg.length >= 64
? 'var(--tc-critical-normal)'
: statusMsg.length >= 56
? 'var(--tc-warning-normal)'
: undefined,
}}
>
{statusMsg.length} / 64
</Text>
</Box> </Box>
<PopOut <PopOut
anchor={emojiAnchor} anchor={emojiAnchor}