From eb283c29fff06c11debfb87e7dbf217a19406e1a Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Thu, 28 May 2026 16:58:37 -0400
Subject: [PATCH] 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>
---
 src/app/features/settings/account/Profile.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/app/features/settings/account/Profile.tsx b/src/app/features/settings/account/Profile.tsx
index 393fec523..3737a3047 100644
--- a/src/app/features/settings/account/Profile.tsx
+++ b/src/app/features/settings/account/Profile.tsx
@@ -436,7 +436,7 @@ function ProfileStatus() {
     >
       <Box direction="Column" grow="Yes" gap="100">
         <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
               name="statusMsgInput"
               aria-label="Status message"
@@ -446,8 +446,23 @@ function ProfileStatus() {
               variant="Secondary"
               radii="300"
               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>
           <PopOut
             anchor={emojiAnchor}