From 84ce3aae304f2dcac6679c03531faadcfc059909 Mon Sep 17 00:00:00 2001
From: Sacha Weatherstone <sachaw100@hotmail.com>
Date: Fri, 4 Mar 2022 21:36:23 +1100
Subject: [PATCH] Add char counter to message input

---
 src/components/generic/form/Input.tsx | 8 +++++---
 src/pages/Messages/MessageBar.tsx     | 8 +++++++-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/generic/form/Input.tsx b/src/components/generic/form/Input.tsx
index 78c3a4f9..71f52e37 100644
--- a/src/components/generic/form/Input.tsx
+++ b/src/components/generic/form/Input.tsx
@@ -15,16 +15,18 @@ export interface InputProps extends DefaultInputProps {
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  { label, error, action, suffix, ...props }: InputProps,
+  { label, error, action, suffix, className, disabled, ...props }: InputProps,
   ref,
 ) {
   return (
     <div className="w-full">
       {label && <Label label={label} error={error} />}
-      <InputWrapper error={error} disabled={props.disabled}>
+      <InputWrapper error={error} disabled={disabled}>
         <input
           ref={ref}
-          className="h-10 w-full bg-transparent px-3 py-2 focus:outline-none disabled:cursor-not-allowed dark:text-white"
+          className={`h-10 w-full bg-transparent px-3 py-2 focus:outline-none disabled:cursor-not-allowed dark:text-white ${
+            className ?? ''
+          }`}
           {...props}
         />
         {suffix && (
diff --git a/src/pages/Messages/MessageBar.tsx b/src/pages/Messages/MessageBar.tsx
index 03281ef4..bae8245b 100644
--- a/src/pages/Messages/MessageBar.tsx
+++ b/src/pages/Messages/MessageBar.tsx
@@ -58,7 +58,7 @@ export const MessageBar = ({ chatIndex }: MessageBarProps): JSX.Element => {
     <div className="mx-auto flex w-full space-x-2 bg-gray-50 bg-transparent p-3 text-gray-500 dark:text-gray-400">
       <div className="mx-auto flex w-full max-w-4xl">
         <form
-          className="flex w-full space-x-2"
+          className="relative flex w-full space-x-2"
           onSubmit={(e): void => {
             e.preventDefault();
             sendMessage();
@@ -70,10 +70,16 @@ export const MessageBar = ({ chatIndex }: MessageBarProps): JSX.Element => {
             placeholder="Enter Message"
             disabled={!meshtasticState.ready}
             value={currentMessage}
+            className="mr-16"
             onChange={(e): void => {
               setCurrentMessage(e.target.value);
             }}
           />
+          <div className="absolute right-1 flex h-10">
+            <div className="z-10 my-auto mr-0.5 rounded-md border bg-secondaryDark bg-opacity-50 p-1 font-mono text-xs text-white">
+              {currentMessage.length}/255
+            </div>
+          </div>
         </form>
       </div>
     </div>