adam/Remote-Terminal-for-MeshCore
1
0
Fork 0
mirror of https://github.com/jkingsman/Remote-Terminal-for-MeshCore.git synced 2026-08-06 16:53:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

Hide character counter for short messages on mobile

Browse Source
This commit is contained in:
Jack Kingsman
2026-02-20 16:42:04 -08:00
parent d08a113fc8
commit 41bf4eb73a
1 changed files with 48 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/MessageInput.tsx
+48 -18
View File
@@ -166,8 +166,10 @@ export const MessageInput = forwardRef<MessageInputHandle, MessageInputProps>(fu
// For repeater mode, always allow submit (empty = guest login) // For repeater mode, always allow submit (empty = guest login)
const canSubmit = isRepeaterMode ? true : text.trim().length > 0; const canSubmit = isRepeaterMode ? true : text.trim().length > 0;
// Show character counter for messages (not repeater mode or raw) // Show counter for messages (not repeater mode or raw).
// Desktop: always visible. Mobile: only show count after 100 characters.
const showCharCounter = !isRepeaterMode && limits !== null; const showCharCounter = !isRepeaterMode && limits !== null;
const showMobileCounterValue = text.length > 100;
return ( return (
<form <form
@@ -206,25 +208,53 @@ export const MessageInput = forwardRef<MessageInputHandle, MessageInputProps>(fu
</Button> </Button>
</div> </div>
{showCharCounter && ( {showCharCounter && (
<div className="flex items-center justify-end gap-2 text-xs"> <>
<span <div className="hidden sm:flex items-center justify-end gap-2 text-xs">
className={cn( <span
'tabular-nums', className={cn(
limitState === 'error' || limitState === 'danger' 'tabular-nums',
? 'text-red-500 font-medium' limitState === 'error' || limitState === 'danger'
: limitState === 'warning' ? 'text-red-500 font-medium'
? 'text-yellow-500' : limitState === 'warning'
: 'text-muted-foreground' ? 'text-yellow-500'
)} : 'text-muted-foreground'
> )}
{textByteLen}/{limits!.hardLimit}b{remaining < 0 && ` (${remaining})`} >
</span> {textByteLen}/{limits!.hardLimit}
{warningMessage && ( {remaining < 0 && ` (${remaining})`}
<span className={cn(limitState === 'error' ? 'text-red-500' : 'text-yellow-500')}>
— {warningMessage}
</span> </span>
{warningMessage && (
<span className={cn(limitState === 'error' ? 'text-red-500' : 'text-yellow-500')}>
— {warningMessage}
</span>
)}
</div>
{(showMobileCounterValue || warningMessage) && (
<div className="flex sm:hidden items-center justify-end gap-2 text-xs">
{showMobileCounterValue && (
<span
className={cn(
'tabular-nums',
limitState === 'error' || limitState === 'danger'
? 'text-red-500 font-medium'
: limitState === 'warning'
? 'text-yellow-500'
: 'text-muted-foreground'
)}
>
{textByteLen}/{limits!.hardLimit}
{remaining < 0 && ` (${remaining})`}
</span>
)}
{warningMessage && (
<span className={cn(limitState === 'error' ? 'text-red-500' : 'text-yellow-500')}>
— {warningMessage}
</span>
)}
</div>
)} )}
</div> </>
)} )}
</form> </form>
); );