From ad42519a34128cd4a9af00b9d9213e78ecad61cf Mon Sep 17 00:00:00 2001
From: jp7107 <jpjangid710@gmail.com>
Date: Fri, 15 May 2026 22:58:50 +0530
Subject: [PATCH 1/2] feat: add character count indicator to resume text fields
 (Closes #38)

---
 .../components/ResumeForm/Form/InputGroup.tsx | 36 ++++++++++++++++---
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/app/components/ResumeForm/Form/InputGroup.tsx b/src/app/components/ResumeForm/Form/InputGroup.tsx
index 8f73b99..b50c354 100644
--- a/src/app/components/ResumeForm/Form/InputGroup.tsx
+++ b/src/app/components/ResumeForm/Form/InputGroup.tsx
@@ -3,7 +3,7 @@ import ContentEditable from "react-contenteditable";
 import { useAutosizeTextareaHeight } from "lib/hooks/useAutosizeTextareaHeight";
 
 interface InputProps<K extends string, V extends string | string[]> {
-  label: string;
+  label: string | React.ReactNode;
   labelClassName?: string;
   // name is passed in as a const string. Therefore, we make it a generic type so its type can
   // be more restricted as a const for the first argument in onChange
@@ -22,7 +22,7 @@ export const InputGroupWrapper = ({
   className,
   children,
 }: {
-  label: string;
+  label: string | React.ReactNode;
   className?: string;
   children?: React.ReactNode;
 }) => (
@@ -44,7 +44,15 @@ export const Input = <K extends string>({
   labelClassName,
 }: InputProps<K, string>) => {
   return (
-    <InputGroupWrapper label={label} className={labelClassName}>
+    <InputGroupWrapper 
+      label={
+        <div className="flex justify-between items-center w-full">
+          <span>{label}</span>
+          <span className="text-xs font-normal text-gray-400">{value.length} chars</span>
+        </div>
+      } 
+      className={labelClassName}
+    >
       <input
         type="text"
         name={name}
@@ -68,7 +76,15 @@ export const Textarea = <T extends string>({
   const textareaRef = useAutosizeTextareaHeight({ value });
 
   return (
-    <InputGroupWrapper label={label} className={wrapperClassName}>
+    <InputGroupWrapper 
+      label={
+        <div className="flex justify-between items-center w-full">
+          <span>{label}</span>
+          <span className="text-xs font-normal text-gray-400">{value.length} chars</span>
+        </div>
+      } 
+      className={wrapperClassName}
+    >
       <textarea
         ref={textareaRef}
         name={name}
@@ -122,8 +138,18 @@ const BulletListTextareaGeneral = <T extends string>({
   showBulletPoints = true,
 }: InputProps<T, string[]> & { showBulletPoints?: boolean }) => {
   const html = getHTMLFromBulletListStrings(bulletListStrings);
+  const textLength = bulletListStrings.join("\n").length;
+  
   return (
-    <InputGroupWrapper label={label} className={wrapperClassName}>
+    <InputGroupWrapper 
+      label={
+        <div className="flex justify-between items-center w-full">
+          <span>{label}</span>
+          <span className="text-xs font-normal text-gray-400">{textLength} chars</span>
+        </div>
+      } 
+      className={wrapperClassName}
+    >
       <ContentEditable
         contentEditable={true}
         className={`${INPUT_CLASS_NAME} cursor-text [&>div]:list-item ${

From eaf6b7db70caba750bbc08992bbca0db17bae771 Mon Sep 17 00:00:00 2001
From: jp7107 <jpjangid710@gmail.com>
Date: Fri, 15 May 2026 23:11:54 +0530
Subject: [PATCH 2/2] Added character count indicator feature

---
 package-lock.json | 34 ++--------------------------------
 1 file changed, 2 insertions(+), 32 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6a831d6..4cb0ec1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -96,7 +96,6 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.1.tgz",
       "integrity": "sha512-Hkqu7J4ynysSXxmAahpN1jjRwVJ+NdpraFLIWflgjpVob3KNyK3/tIUc7Q7szed8WMp0JNa7Qtd1E9Oo22F9gA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.21.4",
@@ -1640,7 +1639,6 @@
       "version": "1.9.5",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.5.tgz",
       "integrity": "sha512-Rt97jHmfTeaxL4swLRNPD/zV4OxTes4la07Xc4hetpUW/vc75t5m1ANyxG6ymnEQ2FsLQsoMlYB2vV1sO3m8tQ==",
-      "peer": true,
       "dependencies": {
         "immer": "^9.0.21",
         "redux": "^4.2.1",
@@ -1986,7 +1984,6 @@
       "version": "18.2.4",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.4.tgz",
       "integrity": "sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==",
-      "peer": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -2159,7 +2156,6 @@
       "version": "8.8.2",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
       "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2674,7 +2670,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001489",
         "electron-to-chromium": "^1.4.411",
@@ -3635,7 +3630,6 @@
       "version": "8.41.0",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.41.0.tgz",
       "integrity": "sha512-WQDQpzGBOP5IrXPo4Hc0814r4/v2rrIsB0rhT7jtunIalgg6gYXWhRMOejVO8yH21T/FGaxjmFjBMNqcIlmH1Q==",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.4.0",
@@ -3812,7 +3806,6 @@
       "version": "2.27.5",
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz",
       "integrity": "sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==",
-      "peer": true,
       "dependencies": {
         "array-includes": "^3.1.6",
         "array.prototype.flat": "^1.3.1",
@@ -7410,7 +7403,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
@@ -7602,7 +7594,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -7676,7 +7667,6 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
       "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -7700,7 +7690,6 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
       "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.0"
@@ -7728,7 +7717,6 @@
       "version": "8.0.7",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.7.tgz",
       "integrity": "sha512-1vRQuCQI5Y2uNmrMXg81RXKiBHY3jBzvCvNmZF437O/Z9/pZ+ba2uYHbemYXb3g8rjsacBGo+/wmfrQKzMhJsg==",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.12.1",
         "@types/hoist-non-react-statics": "^3.3.1",
@@ -7821,7 +7809,6 @@
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
       "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.9.2"
       }
@@ -8608,7 +8595,6 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz",
       "integrity": "sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==",
-      "peer": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -8855,7 +8841,6 @@
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
       "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -9344,7 +9329,6 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.1.tgz",
       "integrity": "sha512-Hkqu7J4ynysSXxmAahpN1jjRwVJ+NdpraFLIWflgjpVob3KNyK3/tIUc7Q7szed8WMp0JNa7Qtd1E9Oo22F9gA==",
       "dev": true,
-      "peer": true,
       "requires": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.21.4",
@@ -10517,7 +10501,6 @@
       "version": "1.9.5",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.5.tgz",
       "integrity": "sha512-Rt97jHmfTeaxL4swLRNPD/zV4OxTes4la07Xc4hetpUW/vc75t5m1ANyxG6ymnEQ2FsLQsoMlYB2vV1sO3m8tQ==",
-      "peer": true,
       "requires": {
         "immer": "^9.0.21",
         "redux": "^4.2.1",
@@ -10825,7 +10808,6 @@
       "version": "18.2.4",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.4.tgz",
       "integrity": "sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==",
-      "peer": true,
       "requires": {
         "@types/react": "*"
       }
@@ -10949,8 +10931,7 @@
     "acorn": {
       "version": "8.8.2",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
-      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
-      "peer": true
+      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw=="
     },
     "acorn-globals": {
       "version": "7.0.1",
@@ -11309,7 +11290,6 @@
       "version": "4.21.7",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.7.tgz",
       "integrity": "sha512-BauCXrQ7I2ftSqd2mvKHGo85XR0u7Ru3C/Hxsy/0TkfCtjrmAbPdzLGasmoiBxplpDXlPvdjX9u7srIMfgasNA==",
-      "peer": true,
       "requires": {
         "caniuse-lite": "^1.0.30001489",
         "electron-to-chromium": "^1.4.411",
@@ -12028,7 +12008,6 @@
       "version": "8.41.0",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.41.0.tgz",
       "integrity": "sha512-WQDQpzGBOP5IrXPo4Hc0814r4/v2rrIsB0rhT7jtunIalgg6gYXWhRMOejVO8yH21T/FGaxjmFjBMNqcIlmH1Q==",
-      "peer": true,
       "requires": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.4.0",
@@ -12163,7 +12142,6 @@
       "version": "2.27.5",
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz",
       "integrity": "sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==",
-      "peer": true,
       "requires": {
         "array-includes": "^3.1.6",
         "array.prototype.flat": "^1.3.1",
@@ -14747,7 +14725,6 @@
       "version": "8.4.24",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
       "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
-      "peer": true,
       "requires": {
         "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
@@ -14861,7 +14838,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "peer": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -14908,7 +14884,6 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
       "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
-      "peer": true,
       "requires": {
         "loose-envify": "^1.1.0"
       }
@@ -14926,7 +14901,6 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
       "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
-      "peer": true,
       "requires": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.0"
@@ -14947,7 +14921,6 @@
       "version": "8.0.7",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.7.tgz",
       "integrity": "sha512-1vRQuCQI5Y2uNmrMXg81RXKiBHY3jBzvCvNmZF437O/Z9/pZ+ba2uYHbemYXb3g8rjsacBGo+/wmfrQKzMhJsg==",
-      "peer": true,
       "requires": {
         "@babel/runtime": "^7.12.1",
         "@types/hoist-non-react-statics": "^3.3.1",
@@ -15004,7 +14977,6 @@
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
       "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
-      "peer": true,
       "requires": {
         "@babel/runtime": "^7.9.2"
       }
@@ -15550,7 +15522,6 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz",
       "integrity": "sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==",
-      "peer": true,
       "requires": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -15743,8 +15714,7 @@
     "typescript": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
-      "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
-      "peer": true
+      "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw=="
     },
     "unbox-primitive": {
       "version": "1.0.2",