iarv/Remote-Terminal-for-MeshCore
1
0
Fork 1
mirror of https://github.com/jkingsman/Remote-Terminal-for-MeshCore.git synced 2026-03-28 17:43:05 +01: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

66
frontend/src/components/MessageInput.tsx
View File

@@ -166,8 +166,10 @@ export const MessageInput = forwardRef<MessageInputHandle, MessageInputProps>(fu
// For repeater mode, always allow submit (empty = guest login)
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 showMobileCounterValue = text.length > 100;
return (
<form
@@ -206,25 +208,53 @@ export const MessageInput = forwardRef<MessageInputHandle, MessageInputProps>(fu
</Button>
</div>
{showCharCounter && (
<div className="flex items-center justify-end gap-2 text-xs">
<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}b{remaining < 0 && ` (${remaining})`}
</span>
{warningMessage && (
<span className={cn(limitState === 'error' ? 'text-red-500' : 'text-yellow-500')}>
— {warningMessage}
<>
<div className="hidden sm:flex items-center justify-end gap-2 text-xs">
<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>
{(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>
);