feat: add character counter to status message input
CI / Build & Quality Checks (push) Successful in 10m12s
CI / Build & Quality Checks (push) Successful in 10m12s
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:
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user