From 523ce3489edddf8bd20f49c8132693e308f54c8a Mon Sep 17 00:00:00 2001
From: onlyonehas <hassanabbas93@hotmail.com>
Date: Mon, 27 Jul 2026 00:41:36 +0100
Subject: [PATCH 01/13] feat: migrate input to react-quill with syntax
 highlighting

- Replace textarea with ReactQuill via next/dynamic (ssr: false)
- Syntax highlighting: headings green/bold, comments gray/italic,
  expense names in amber, variable names in cyan
- Scroll sync between Quill container and output textarea
- Custom CSS overrides for transparent background, ruled lines, no toolbar
- Auto-commenting syncs back into Quill editor
- removed auto-height effect (Quill handles its own height)
---
 package-lock.json | 263 +++++++++++++++++++++++++++++++++++++++++-----
 package.json      |   1 +
 pages/index.tsx   | 128 +++++++++++++++-------
 styles/Dark.css   |  28 +++++
 4 files changed, 360 insertions(+), 60 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cf7a1a2c..633c2ba2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "next-pwa": "^5.6.0",
         "react": "^18.3.0",
         "react-dom": "^18.3.0",
+        "react-quill": "^2.0.0",
         "tailwindcss": "^3.4.12"
       },
       "devDependencies": {
@@ -3533,6 +3534,15 @@
       "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
       "dev": true
     },
+    "node_modules/@types/quill": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@types/quill/-/quill-1.3.10.tgz",
+      "integrity": "sha512-IhW3fPW+bkt9MLNlycw8u8fWb7oO7W5URC9MfZYHBlA24rex9rs23D5DETChu1zvgVdc5ka64ICjJOgQMr6Shw==",
+      "license": "MIT",
+      "dependencies": {
+        "parchment": "^1.1.2"
+      }
+    },
     "node_modules/@types/react": {
       "version": "18.3.5",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.5.tgz",
@@ -4648,6 +4658,35 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -4913,6 +4952,15 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -5059,6 +5107,26 @@
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
       "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
     },
+    "node_modules/deep-equal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz",
+      "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arguments": "^1.1.1",
+        "is-date-object": "^1.0.5",
+        "is-regex": "^1.1.4",
+        "object-is": "^1.1.5",
+        "object-keys": "^1.1.1",
+        "regexp.prototype.flags": "^1.5.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -5260,6 +5328,20 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -5377,12 +5459,10 @@
       }
     },
     "node_modules/es-define-property": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
-      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
-      "dependencies": {
-        "get-intrinsic": "^1.2.4"
-      },
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       }
@@ -5423,6 +5503,18 @@
       "integrity": "sha512-shc1dbU90Yl/xq1QrC7QRtfcwURZuVRfPhZbDoldJ1cn1gzDvBaBWlv0eFolj5+0znnPJz5TXLxsN77X/12KTA==",
       "license": "MIT"
     },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
+      "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-set-tostringtag": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.2.tgz",
@@ -6044,6 +6136,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+      "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==",
+      "license": "MIT"
+    },
     "node_modules/events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
@@ -6100,6 +6198,12 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -6109,7 +6213,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
       "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==",
-      "dev": true,
       "license": "Apache-2.0"
     },
     "node_modules/fast-glob": {
@@ -6496,15 +6599,21 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
-      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
       "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
         "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
         "function-bind": "^1.1.2",
-        "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3",
-        "hasown": "^2.0.0"
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6518,6 +6627,19 @@
       "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
       "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g=="
     },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/get-stream": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
@@ -6645,11 +6767,12 @@
       }
     },
     "node_modules/gopd": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
-      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dependencies": {
-        "get-intrinsic": "^1.1.3"
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -6705,9 +6828,10 @@
       }
     },
     "node_modules/has-symbols": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       },
@@ -6730,9 +6854,10 @@
       }
     },
     "node_modules/hasown": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
-      "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+      "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -6837,6 +6962,22 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/is-arguments": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz",
+      "integrity": "sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
@@ -8211,6 +8352,15 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/mathjs": {
       "version": "15.2.0",
       "resolved": "https://registry.npmjs.org/mathjs/-/mathjs-15.2.0.tgz",
@@ -8675,6 +8825,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/object-is": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
+      "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
@@ -8874,6 +9040,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -9411,6 +9583,34 @@
         }
       ]
     },
+    "node_modules/quill": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
+      "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.2",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      }
+    },
+    "node_modules/quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "license": "MIT",
+      "dependencies": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -9450,6 +9650,21 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "dev": true
     },
+    "node_modules/react-quill": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-2.0.0.tgz",
+      "integrity": "sha512-4qQtv1FtCfLgoD3PXAur5RyxuUbPXQGOHgTlFie3jtxp43mXDtzCKaOgQ3mLyZfi1PUlyjycfivKelFhy13QUg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/quill": "^1.3.10",
+        "lodash": "^4.17.4",
+        "quill": "^1.3.7"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 89a3e391..3ec23b7e 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "next-pwa": "^5.6.0",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
+    "react-quill": "^2.0.0",
     "tailwindcss": "^3.4.12"
   },
   "devDependencies": {
diff --git a/pages/index.tsx b/pages/index.tsx
index dc1cf432..c4524b56 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -15,7 +15,11 @@ import { get, ref, set } from "firebase/database";
 import { motion } from "framer-motion";
 import { Calendar, Edit2, Moon, Save, Sun, Trash2 } from "lucide-react";
 import { ChangeEvent, useCallback, useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
 import "tailwindcss/tailwind.css";
+
+const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
+import "react-quill/dist/quill.snow.css";
 import { evaluateExpression } from "../helpers/calculate";
 import { getAutoCommentedLines, computeSummary, parseVariableLine } from "../helpers/calculations";
 
@@ -46,6 +50,9 @@ export default function Index() {
 
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const outputRef = useRef<HTMLTextAreaElement>(null);
+  const inputContainerRef = useRef<HTMLDivElement>(null);
+  const quillEditorRef = useRef<any>(null);
+  const quillScrollRef = useRef<HTMLElement | null>(null);
   const variablesRef = useRef<{ [name: string]: number }>({});
   const originalValuesRef = useRef<{ [name: string]: number }>({});
   const [scrollTop, setScrollTop] = useState(0);
@@ -71,17 +78,6 @@ export default function Index() {
     }
   }, [calculations]);
 
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.style.height = "auto";
-      inputRef.current.style.height = `${inputRef.current.scrollHeight}px`;
-    }
-    if (outputRef.current) {
-      outputRef.current.style.height = "auto";
-      outputRef.current.style.height = `${outputRef.current.scrollHeight}px`;
-    }
-  }, [input, output]);
-
   useEffect(() => {
     handleInput();
   }, [input]);
@@ -92,6 +88,80 @@ export default function Index() {
     }
   }, [isEditingName]);
 
+  const highlightSyntax = useCallback((editor: any) => {
+    if (!editor) return;
+    const text = editor.getText() || "";
+    const lines = text.split("\n");
+    let offset = 0;
+    for (const line of lines) {
+      const trimmed = line.trim();
+      const length = line.length;
+      if (trimmed.startsWith("#")) {
+        editor.formatText(offset, length, { color: "#16a34a", bold: true });
+      } else if (trimmed.startsWith("//")) {
+        editor.formatText(offset, length, { color: "#9ca3af", italic: true });
+      } else if (/^monthlypaydate\b/i.test(trimmed)) {
+        const eqIdx = trimmed.indexOf("=");
+        const keywordLen = eqIdx >= 0 ? eqIdx : trimmed.length;
+        editor.formatText(offset, keywordLen, { color: "#3b82f6" });
+      } else {
+        const colonIdx = trimmed.indexOf(":");
+        const eqIdx = trimmed.indexOf("=");
+        const sepIdx = eqIdx >= 0 && (colonIdx < 0 || eqIdx < colonIdx) ? eqIdx : colonIdx;
+        if (sepIdx > 0) {
+          const nameLen = trimmed.slice(0, sepIdx).length;
+          const color = trimmed[sepIdx] === ":" ? "#d97706" : "#06b6d4";
+          editor.formatText(offset, nameLen, { color, bold: false });
+        }
+      }
+      offset += length + 1;
+    }
+  }, []);
+
+  const handleInputScroll = useCallback(() => {
+    const container = quillScrollRef.current;
+    if (!container) return;
+    setScrollTop(container.scrollTop);
+    if (outputRef.current) {
+      outputRef.current.scrollTop = container.scrollTop;
+    }
+  }, []);
+
+  const attachQuillScroll = useCallback(() => {
+    quillScrollRef.current?.removeEventListener("scroll", handleInputScroll);
+    const container = inputContainerRef.current?.querySelector<HTMLElement>(".ql-container");
+    if (container) {
+      quillScrollRef.current = container;
+      container.addEventListener("scroll", handleInputScroll);
+    }
+  }, [handleInputScroll]);
+
+  const handleQuillChange = useCallback(
+    (_value: string, _delta: any, _source: string, editor: any) => {
+      quillEditorRef.current = editor;
+      attachQuillScroll();
+      const text = (editor.getText() || "").replace(/\n$/, "");
+      if (text !== input) {
+        setInput(text);
+      }
+      requestAnimationFrame(() => highlightSyntax(editor));
+    },
+    [input, highlightSyntax, attachQuillScroll],
+  );
+
+  useEffect(() => {
+    const editor = quillEditorRef.current;
+    if (!editor) return;
+    const currentText = (editor.getText() || "").replace(/\n$/, "");
+    if (currentText !== input) {
+      editor.setText(input || "");
+    }
+    requestAnimationFrame(() => highlightSyntax(editor));
+  }, [input, highlightSyntax]);
+
+  const quillModules = { toolbar: false };
+  const quillFormats = ["bold", "italic", "color"];
+
   useEffect(() => {
     localStorage.setItem("deductionDates", JSON.stringify(deductionDates));
   }, [deductionDates]);
@@ -252,17 +322,11 @@ export default function Index() {
     }
   }, [input, deductionDates, showNextMonth]);
 
-  const handleInputScroll = (event: React.UIEvent<HTMLTextAreaElement>) => {
-    setScrollTop(event.currentTarget.scrollTop);
-    if (inputRef.current && outputRef.current) {
-      outputRef.current.scrollTop = event.currentTarget.scrollTop;
-    }
-  };
-
   const handleOutputScroll = (event: React.UIEvent<HTMLTextAreaElement>) => {
     setScrollTop(event.currentTarget.scrollTop);
-    if (inputRef.current && outputRef.current) {
-      inputRef.current.scrollTop = event.currentTarget.scrollTop;
+    const container = quillScrollRef.current;
+    if (container) {
+      container.scrollTop = event.currentTarget.scrollTop;
     }
   };
 
@@ -444,23 +508,15 @@ export default function Index() {
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5, delay: 0.5 }}
           >
-            <div className="flex-1 min-w-0 relative">
-              <textarea
-                ref={inputRef}
-                value={input || ""}
-                onChange={(e) => setInput(e.target.value)}
-                onScroll={handleInputScroll}
+            <div className="flex-1 min-w-0 relative" ref={inputContainerRef}>
+              <ReactQuill
+                defaultValue={input || ""}
+                onChange={handleQuillChange}
+                modules={quillModules}
+                formats={quillFormats}
                 placeholder="Type your calculations here..."
-                className="w-full bg-transparent text-gray-800 dark:text-white rounded-none focus:outline-none resize-none overflow-hidden font-mono text-xs md:text-2xl lg:text-3xl leading-relaxed"
-                style={{
-                  backgroundImage:
-                    "repeating-linear-gradient(transparent, transparent 47px, #999 47px, #999 48px, var(--row-alt) 48px, var(--row-alt) 95px, #999 95px, #999 96px)",
-                  lineHeight: "48px",
-                  padding: "8px 2px",
-                  border: "none",
-                  minHeight: "calc(100vh - 400px)",
-                  minWidth: "80px",
-                }}
+                className="quill-editor w-full font-mono text-xs md:text-2xl lg:text-3xl"
+                theme="snow"
               />
               <div className="absolute top-0 bottom-0 left-0 w-0.5 bg-red-400"></div>
             </div>
diff --git a/styles/Dark.css b/styles/Dark.css
index 16e0c908..0fc27cce 100644
--- a/styles/Dark.css
+++ b/styles/Dark.css
@@ -85,3 +85,31 @@
     -5em 0 0 -2.7em #fff,
     -3.5em -3.5em 0 -3em #fff;
 }
+
+.quill-editor .ql-toolbar {
+  display: none;
+}
+.quill-editor .ql-container {
+  font-family: inherit;
+  font-size: inherit;
+  border: none;
+  background: transparent;
+}
+.quill-editor .ql-editor {
+  padding: 8px 2px;
+  line-height: 48px;
+  background-image: repeating-linear-gradient(transparent, transparent 47px, #999 47px, #999 48px, transparent 48px, transparent 95px, #999 95px, #999 96px);
+  min-height: calc(100vh - 400px);
+  outline: none;
+}
+.dark .quill-editor .ql-editor {
+  color: #fff;
+}
+.light .quill-editor .ql-editor {
+  color: #403c3d;
+}
+.quill-editor .ql-editor.ql-blank::before {
+  color: #9ca3af;
+  font-style: normal;
+  left: 2px;
+}

From f541e6725cb9259bafbe1c900b0a3a079b2d2c85 Mon Sep 17 00:00:00 2001
From: onlyonehas <hassanabbas93@hotmail.com>
Date: Mon, 27 Jul 2026 00:46:47 +0100
Subject: [PATCH 02/13] fix: use full Quill instance for formatText

react-quill v2 onChange provides UnprivilegedEditor as 4th arg
which lacks formatText(). Use ref.getEditor() instead.
---
 pages/index.tsx | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index c4524b56..e80fd61f 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -51,6 +51,7 @@ export default function Index() {
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const outputRef = useRef<HTMLTextAreaElement>(null);
   const inputContainerRef = useRef<HTMLDivElement>(null);
+  const quillRef = useRef<any>(null);
   const quillEditorRef = useRef<any>(null);
   const quillScrollRef = useRef<HTMLElement | null>(null);
   const variablesRef = useRef<{ [name: string]: number }>({});
@@ -136,9 +137,18 @@ export default function Index() {
     }
   }, [handleInputScroll]);
 
+  const getQuillEditor = useCallback(() => {
+    if (quillEditorRef.current) return quillEditorRef.current;
+    try {
+      quillEditorRef.current = quillRef.current?.getEditor?.();
+    } catch {}
+    return quillEditorRef.current;
+  }, []);
+
   const handleQuillChange = useCallback(
-    (_value: string, _delta: any, _source: string, editor: any) => {
-      quillEditorRef.current = editor;
+    (_value: string, _delta: any, _source: string, _editor: any) => {
+      const editor = getQuillEditor();
+      if (!editor) return;
       attachQuillScroll();
       const text = (editor.getText() || "").replace(/\n$/, "");
       if (text !== input) {
@@ -146,18 +156,18 @@ export default function Index() {
       }
       requestAnimationFrame(() => highlightSyntax(editor));
     },
-    [input, highlightSyntax, attachQuillScroll],
+    [input, highlightSyntax, attachQuillScroll, getQuillEditor],
   );
 
   useEffect(() => {
-    const editor = quillEditorRef.current;
+    const editor = getQuillEditor();
     if (!editor) return;
     const currentText = (editor.getText() || "").replace(/\n$/, "");
     if (currentText !== input) {
       editor.setText(input || "");
     }
     requestAnimationFrame(() => highlightSyntax(editor));
-  }, [input, highlightSyntax]);
+  }, [input, highlightSyntax, getQuillEditor]);
 
   const quillModules = { toolbar: false };
   const quillFormats = ["bold", "italic", "color"];
@@ -510,6 +520,7 @@ export default function Index() {
           >
             <div className="flex-1 min-w-0 relative" ref={inputContainerRef}>
               <ReactQuill
+                {...({ ref: quillRef } as any)}
                 defaultValue={input || ""}
                 onChange={handleQuillChange}
                 modules={quillModules}

From d9eff0d601bdf8b5e66d03025e8895aaadc935dc Mon Sep 17 00:00:00 2001
From: onlyonehas <hassanabbas93@hotmail.com>
Date: Mon, 27 Jul 2026 00:59:56 +0100
Subject: [PATCH 03/13] fix: access Quill editor via __quill on DOM element

ref spread bypass didn't work for class component (no forwardRef). Use
.querySelector('.ql-editor') + .closest('.ql-container') to find the
root element that has __quill set by Quill's constructor.
---
 pages/index.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index e80fd61f..11f92e93 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -51,7 +51,6 @@ export default function Index() {
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const outputRef = useRef<HTMLTextAreaElement>(null);
   const inputContainerRef = useRef<HTMLDivElement>(null);
-  const quillRef = useRef<any>(null);
   const quillEditorRef = useRef<any>(null);
   const quillScrollRef = useRef<HTMLElement | null>(null);
   const variablesRef = useRef<{ [name: string]: number }>({});
@@ -139,9 +138,13 @@ export default function Index() {
 
   const getQuillEditor = useCallback(() => {
     if (quillEditorRef.current) return quillEditorRef.current;
-    try {
-      quillEditorRef.current = quillRef.current?.getEditor?.();
-    } catch {}
+    const root = inputContainerRef.current;
+    if (!root) return null;
+    const editorEl = root.querySelector<HTMLElement>(".ql-editor");
+    const container = editorEl?.closest(".ql-container") as any;
+    if (container?.__quill) {
+      quillEditorRef.current = container.__quill;
+    }
     return quillEditorRef.current;
   }, []);
 
@@ -520,7 +523,6 @@ export default function Index() {
           >
             <div className="flex-1 min-w-0 relative" ref={inputContainerRef}>
               <ReactQuill
-                {...({ ref: quillRef } as any)}
                 defaultValue={input || ""}
                 onChange={handleQuillChange}
                 modules={quillModules}

From b8a95b0f099041b80c7906d0b207070a2abb78e7 Mon Sep 17 00:00:00 2001
From: onlyonehas <hassanabbas93@hotmail.com>
Date: Mon, 27 Jul 2026 01:08:36 +0100
Subject: [PATCH 04/13] fix: allow output textarea to scroll independently

Change overflow:hidden to overflow-y:auto on output textarea so
user can see all lines when they don't fit in the viewport.
Scroll sync still works as a helper, but no longer required.
---
 pages/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 11f92e93..2a8f3d58 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -572,7 +572,7 @@ export default function Index() {
                 value={output || ""}
                 onScroll={handleOutputScroll}
                 placeholder="Output will appear here..."
-                className="w-full bg-transparent text-gray-800 dark:text-green-500 rounded-none resize-none overflow-hidden font-mono text-xs md:text-2xl lg:text-3xl leading-relaxed whitespace-nowrap"
+                className="w-full bg-transparent text-gray-800 dark:text-green-500 rounded-none resize-none overflow-y-auto font-mono text-xs md:text-2xl lg:text-3xl leading-relaxed whitespace-nowrap"
                 style={{
                   backgroundImage:
                     "repeating-linear-gradient(transparent, transparent 47px, #999 47px, #999 48px, var(--row-alt) 48px, var(--row-alt) 95px, #999 95px, #999 96px)",

From 0ecc05e390ced692b8961e018d4cdaac02b816eb Mon Sep 17 00:00:00 2001
From: onlyonehas <hassanabbas93@hotmail.com>
Date: Mon, 27 Jul 2026 01:11:15 +0100
Subject: [PATCH 05/13] fix: make Quill .ql-container scrollable, .ql-editor
 grows with content

- .ql-editor: overflow:hidden + height:auto (grows with content, no internal scroll)
- .ql-container: overflow-y:auto (scrolls when editor content overflows)
- p { margin:0 } in .ql-editor to prevent extra spacing from user-agent styles
- Scroll listener on .ql-container for sync with output textarea
- Revert output textarea to overflow:hidden (scroll sync handles it)
---
 pages/index.tsx |  2 +-
 styles/Dark.css | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 2a8f3d58..11f92e93 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -572,7 +572,7 @@ export default function Index() {
                 value={output || ""}
                 onScroll={handleOutputScroll}
                 placeholder="Output will appear here..."
-                className="w-full bg-transparent text-gray-800 dark:text-green-500 rounded-none resize-none overflow-y-auto font-mono text-xs md:text-2xl lg:text-3xl leading-relaxed whitespace-nowrap"
+                className="w-full bg-transparent text-gray-800 dark:text-green-500 rounded-none resize-none overflow-hidden font-mono text-xs md:text-2xl lg:text-3xl leading-relaxed whitespace-nowrap"
                 style={{
                   backgroundImage:
                     "repeating-linear-gradient(transparent, transparent 47px, #999 47px, #999 48px, var(--row-alt) 48px, var(--row-alt) 95px, #999 95px, #999 96px)",
diff --git a/styles/Dark.css b/styles/Dark.css
index 0fc27cce..872b2dfa 100644
--- a/styles/Dark.css
+++ b/styles/Dark.css
@@ -94,13 +94,21 @@
   font-size: inherit;
   border: none;
   background: transparent;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 .quill-editor .ql-editor {
   padding: 8px 2px;
   line-height: 48px;
-  background-image: repeating-linear-gradient(transparent, transparent 47px, #999 47px, #999 48px, transparent 48px, transparent 95px, #999 95px, #999 96px);
   min-height: calc(100vh - 400px);
+  height: auto;
   outline: none;
+  overflow: hidden;
+  background-image: repeating-linear-gradient(transparent, transparent 47px, #999 47px, #999 48px, transparent 48px, transparent 95px, #999 95px, #999 96px);
+}
+.quill-editor .ql-editor p {
+  margin: 0;
+  line-height: inherit;
 }
 .dark .quill-editor .ql-editor {
   color: #fff;

From 09abdb5910dd96f6be397547eb50e32c6c97ec2a Mon Sep 17 00:00:00 2001
From: onlyonehas <hassanabbas93@hotmail.com>
Date: Mon, 27 Jul 2026 01:14:17 +0100
Subject: [PATCH 06/13] debug: show input/output line counts in output prefix

---
 pages/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 11f92e93..793b5597 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -238,6 +238,7 @@ export default function Index() {
       return;
     }
     const lines = input.split("\n");
+    const lineCount = lines.length;
 
     for (const line of lines) {
       const trimmedLine = line.trim();
@@ -314,7 +315,7 @@ export default function Index() {
       customOutput = "-";
     }
 
-    setOutput(newOutput);
+    setOutput(`[${lines.length}→${(newOutput.match(/\n/g)||[]).length}] ${newOutput}`);
     setSum(keywordValues.tempSum);
     setPrev(keywordValues.tempPrev);
     variablesRef.current = { ...variables };

From c32fec5577e09e6b3bb128aef61dd5465e40c3c7 Mon Sep 17 00:00:00 2001
From: onlyonehas <hassanabbas93@hotmail.com>
Date: Mon, 27 Jul 2026 01:19:04 +0100
Subject: [PATCH 07/13] fix: preserve newlines when loading content into Quill

- defaultValue="" (empty) to avoid clipbard.convert which collapses \n
- handleQuillChange ignores source='api' to prevent feedback loop
- sync useEffect calls editor.setText() which treats input as plain text
  preserving newlines correctly
---
 pages/index.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 793b5597..6e853d89 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -149,7 +149,8 @@ export default function Index() {
   }, []);
 
   const handleQuillChange = useCallback(
-    (_value: string, _delta: any, _source: string, _editor: any) => {
+    (_value: string, _delta: any, source: string, _editor: any) => {
+      if (source !== "user") return;
       const editor = getQuillEditor();
       if (!editor) return;
       attachQuillScroll();
@@ -524,7 +525,7 @@ export default function Index() {
           >
             <div className="flex-1 min-w-0 relative" ref={inputContainerRef}>
               <ReactQuill
-                defaultValue={input || ""}
+                defaultValue=""
                 onChange={handleQuillChange}
                 modules={quillModules}
                 formats={quillFormats}

From c52104d1c22dcd3e4c85ca56015326e702d02061 Mon Sep 17 00:00:00 2001
From: onlyonehas <hassanabbas93@hotmail.com>
Date: Mon, 27 Jul 2026 01:20:45 +0100
Subject: [PATCH 08/13] fix: prettier spacing around ||

---
 pages/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 6e853d89..7be5c876 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -239,7 +239,6 @@ export default function Index() {
       return;
     }
     const lines = input.split("\n");
-    const lineCount = lines.length;
 
     for (const line of lines) {
       const trimmedLine = line.trim();
@@ -316,7 +315,7 @@ export default function Index() {
       customOutput = "-";
     }
 
-    setOutput(`[${lines.length}→${(newOutput.match(/\n/g)||[]).length}] ${newOutput}`);
+    setOutput(`[${lines.length}→${(newOutput.match(/\n/g) || []).length}] ${newOutput}`);
     setSum(keywordValues.tempSum);
     setPrev(keywordValues.tempPrev);
     variablesRef.current = { ...variables };

From 89b9db9bb9fc06ec47a323bc940768d79793890d Mon Sep 17 00:00:00 2001
From: onlyonehas <hassanabbas93@hotmail.com>
Date: Mon, 27 Jul 2026 01:23:01 +0100
Subject: [PATCH 09/13] fix: auto-height output textarea to match Quill editor
 growth

---
 pages/index.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/pages/index.tsx b/pages/index.tsx
index 7be5c876..13a4580f 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -78,6 +78,13 @@ export default function Index() {
     }
   }, [calculations]);
 
+  useEffect(() => {
+    if (outputRef.current) {
+      outputRef.current.style.height = "auto";
+      outputRef.current.style.height = `${outputRef.current.scrollHeight}px`;
+    }
+  }, [output]);
+
   useEffect(() => {
     handleInput();
   }, [input]);

From 88fb834a5b431046123d04a5d680337cf4663031 Mon Sep 17 00:00:00 2001
From: onlyonehas <hassanabbas93@hotmail.com>
Date: Mon, 27 Jul 2026 01:27:05 +0100
Subject: [PATCH 10/13] fix: scroll listener on mount with cleanup, add
 edge-case tests

- Attach scroll listener in useEffect on mount (not just on user input)
- Clean up scroll listener on unmount to prevent memory leaks
- 6 new unit tests: empty/whitespace lines, blank line preservation
  through auto-commenting, trailing blank lines
---
 helpers/__tests__/calculations.test.ts | 37 ++++++++++++++++++++++++++
 pages/index.tsx                        |  8 ++++++
 2 files changed, 45 insertions(+)

diff --git a/helpers/__tests__/calculations.test.ts b/helpers/__tests__/calculations.test.ts
index da5c0087..dc3c1e16 100644
--- a/helpers/__tests__/calculations.test.ts
+++ b/helpers/__tests__/calculations.test.ts
@@ -62,6 +62,18 @@ describe("parseVariableLine", () => {
       isCommented: false,
     });
   });
+
+  it("returns null for empty string", () => {
+    expect(parseVariableLine("")).toBeNull();
+  });
+
+  it("returns null for whitespace-only line", () => {
+    expect(parseVariableLine("   ")).toBeNull();
+  });
+
+  it("returns null for tab-only line", () => {
+    expect(parseVariableLine("\t")).toBeNull();
+  });
 });
 
 describe("getAutoCommentedLines", () => {
@@ -174,6 +186,31 @@ describe("getAutoCommentedLines", () => {
     );
     expect(result).toEqual(["rent=1000"]);
   });
+
+  it("preserves blank lines through auto-commenting", () => {
+    const result = getAutoCommentedLines(
+      ["rent: 1000", "", "food: 250"],
+      {},
+      false,
+      10,
+    );
+    expect(result).toEqual(["rent: 1000", "", "food: 250"]);
+  });
+
+  it("handles blank lines between commented and active lines", () => {
+    const result = getAutoCommentedLines(
+      ["//rent: 1000", "", "food: 250"],
+      { rent: 15 },
+      false,
+      20,
+    );
+    expect(result).toEqual(["//rent: 1000", "", "food: 250"]);
+  });
+
+  it("handles trailing blank line", () => {
+    const result = getAutoCommentedLines(["rent: 1000", ""], {}, false, 10);
+    expect(result).toEqual(["rent: 1000", ""]);
+  });
 });
 
 describe("tryGetValue", () => {
diff --git a/pages/index.tsx b/pages/index.tsx
index 13a4580f..c484bba8 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -180,6 +180,14 @@ export default function Index() {
     requestAnimationFrame(() => highlightSyntax(editor));
   }, [input, highlightSyntax, getQuillEditor]);
 
+  useEffect(() => {
+    attachQuillScroll();
+    const container = quillScrollRef.current;
+    return () => {
+      container?.removeEventListener("scroll", handleInputScroll);
+    };
+  }, [attachQuillScroll, handleInputScroll]);
+
   const quillModules = { toolbar: false };
   const quillFormats = ["bold", "italic", "color"];
 

From 02bd5cce073dde9f188bc69352c3023f0aef5184 Mon Sep 17 00:00:00 2001
From: onlyonehas <hassanabbas93@hotmail.com>
Date: Mon, 27 Jul 2026 01:31:18 +0100
Subject: [PATCH 11/13] =?UTF-8?q?fix:=20spacing=20=E2=80=94=20padding=20af?=
 =?UTF-8?q?ter=20red=20line,=20gap=20for=20calendar=20icons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- .ql-editor padding: 8px 16px (left 16px to space text from red line,
  right 16px for breathing room)
- Calendar gutter: w-4 mr-2 (16px + 8px gap instead of 12px + 2px)
- Output textarea: matching padding 8px 16px for visual alignment
---
 pages/index.tsx | 4 ++--
 styles/Dark.css | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index c484bba8..be9dd6db 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -551,7 +551,7 @@ export default function Index() {
             </div>
 
             <div
-              className="w-3 mr-0.5 relative flex-shrink-0 overflow-visible"
+              className="w-4 mr-2 relative flex-shrink-0 overflow-visible"
               ref={iconContainerRef}
             >
               {variableLines.map(({ name, lineIndex }) => {
@@ -593,7 +593,7 @@ export default function Index() {
                   backgroundImage:
                     "repeating-linear-gradient(transparent, transparent 47px, #999 47px, #999 48px, var(--row-alt) 48px, var(--row-alt) 95px, #999 95px, #999 96px)",
                   lineHeight: "48px",
-                  padding: "8px 2px",
+                  padding: "8px 16px",
                   border: "none",
                   minHeight: "calc(100vh - 400px)",
                   minWidth: "60px",
diff --git a/styles/Dark.css b/styles/Dark.css
index 872b2dfa..9d51cd00 100644
--- a/styles/Dark.css
+++ b/styles/Dark.css
@@ -98,7 +98,7 @@
   overflow-x: hidden;
 }
 .quill-editor .ql-editor {
-  padding: 8px 2px;
+  padding: 8px 16px 8px 16px;
   line-height: 48px;
   min-height: calc(100vh - 400px);
   height: auto;

From 8a4c4f1339c715265fa14df5004dd6adef483334 Mon Sep 17 00:00:00 2001
From: onlyonehas <hassanabbas93@hotmail.com>
Date: Mon, 27 Jul 2026 01:36:37 +0100
Subject: [PATCH 12/13] chore: cleanup debug prefix, console.logs, update docs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove [22→22] debug prefix from output
- Remove unnecessary console.log in new-features.tsx and getCurrencyConversion.ts
- Update /about page with accurate feature list and usage guide
- Update /new-features page subtitle
- Update README with current tech stack and features
---
 README.md                        | 62 ++++++++++++++++++++------------
 helpers/getCurrencyConversion.ts |  1 -
 pages/about.tsx                  | 62 ++++++++++++++------------------
 pages/index.tsx                  |  2 +-
 pages/new-features.tsx           |  3 +-
 5 files changed, 67 insertions(+), 63 deletions(-)

diff --git a/README.md b/README.md
index 1a583504..073d7abe 100644
--- a/README.md
+++ b/README.md
@@ -1,30 +1,46 @@
 # Instant Calc 🧮
 
-Instant Calc is a custom project, providing a simple and intuitive way to perform calculations and evaluate expressions in your web browser.
+Real-time calculation notebook with syntax highlighting, deduction tracking, and cloud sync.
 
-## Features ✏️
+## Features ✨
 
-- Natural Language Syntax: Perform calculations using familiar phrases and expressions.
-- Real-Time Evaluation: Instantly see the results of your calculations as you type.
-- Variable Assignment: Define and use variables to store values for repeated use.
-- Expression Parsing: Evaluate complex expressions with operators, functions, and parentheses.
-- Commenting: Add comments to your calculations for better organization and understanding.
-- Responsive Design: Enjoy a seamless experience across different devices and screen sizes.
+- **Syntax Highlighting** — headings, comments, expenses, and variables colour-coded as you type
+- **Real-Time Evaluation** — results appear instantly in the output panel; no submit button needed
+- **Variable Assignment** — `name = expression` or `name: expression` stores a value
+- **Auto-Commenting** — set a deduction day per expense; past-due lines are commented out automatically
+- **Due Next mode** — toggle to preview next month's deductions
+- **Rich Text Input** — powered by Quill, with coloured formatting preserved
+- **Cloud Sync** — sign in with Google to save notebooks to Firebase
+- **Dark Mode** — toggle between light and dark themes
+- **PWA** — installable as a progressive web app
 
 ## Usage
 
-1. Type your calculations in the input textarea.
-2. Press Enter or click outside the textarea to evaluate the expression.
-3. The output will be displayed in the output textarea.
-4. Store operations in a variable by starting with `name=`
-5. Add comments using the `//` prefix to document your calculations.
-6. Add headings using the `#` prefix for ease of labelling.
-7. Make use of reserved keywords ["prev", "sum", "to", "monthlyPayDate", "in"]
-
-## Technologies Used
-
-- React.js
-- Next.js
-- CSS Modules
-- TypeScript
-- Firebase
+1. Type into the left panel (rich-text editor).
+2. Each line is evaluated on the fly — output appears on the right.
+3. `name: value` or `name = value` creates a variable you can reuse later.
+4. `//` comments out a line, `#` creates a heading.
+5. Keywords: `prev` (last result), `sum` (running total), `monthlyPayDate` (days until payday).
+6. Click the calendar icon 🌿 next to an expense to set its deduction day.
+7. Sign in to save automatically.
+
+## Quick Start
+
+```bash
+npm install
+npm run dev      # local dev server
+npm test         # vitest
+npm run build    # production build
+npm run lint     # eslint + prettier
+```
+
+## Tech Stack
+
+- **Framework:** Next.js 14 (Pages Router), React 18
+- **Language:** TypeScript
+- **Editor:** react-quill (Quill rich text editor)
+- **Styling:** Tailwind CSS + CSS Modules
+- **State:** React hooks (useState, useCallback, useEffect)
+- **Database:** Firebase Realtime Database (auth + data sync)
+- **Animation:** Framer Motion
+- **Testing:** Vitest
diff --git a/helpers/getCurrencyConversion.ts b/helpers/getCurrencyConversion.ts
index 3b6ca879..8f6619c9 100644
--- a/helpers/getCurrencyConversion.ts
+++ b/helpers/getCurrencyConversion.ts
@@ -3,7 +3,6 @@ import { acceptedCurrencySymbols } from "../currencies";
 export const isCurrency = async (name: string) => {
   let withToCode: string | boolean = false;
   const hasIn = name.includes("in");
-  console.log(hasIn);
   if (hasIn) {
     const expression = name
       .split("in")
diff --git a/pages/about.tsx b/pages/about.tsx
index 8bebf9b9..44827eb2 100644
--- a/pages/about.tsx
+++ b/pages/about.tsx
@@ -148,14 +148,9 @@ export default function About() {
         <div className="max-w-3xl mx-auto">
           <h2 className="text-3xl font-bold text-white mb-4 text-center">About Instant Calc 🧮</h2>
           <p className="text-gray-300 mb-4">
-            Instant Calc is a cutting-edge calculation tool designed to revolutionize the way you
-            work with numbers. Our platform combines lightning-fast processing with intuitive
-            design, making complex computations a breeze for users of all levels.
-          </p>
-          <p className="text-gray-300 mb-4">
-            Whether you&apos;re a student tackling advanced mathematics, a professional dealing with
-            intricate financial models, or simply someone who loves efficient problem-solving,
-            Instant Calc is your ultimate companion for all calculation needs.
+            Instant Calc is a real-time calculation notebook. Type expenses, set variables,
+            write expressions — and see results instantly on the right. Every line is evaluated
+            as you type, with support for comments, headings, and deduction tracking.
           </p>
           <motion.div
             initial="hidden"
@@ -181,26 +176,25 @@ export default function About() {
           <h2 className="text-3xl font-bold text-center text-white mb-4">Key Features ✨</h2>
           <ul className="list-disc list-inside text-gray-300 space-y-2 mb-4">
             <li>
-              🗣️ Natural Language Syntax: Perform calculations using familiar phrases and
-              expressions.
+              🎨 Syntax Highlighting: Headings, comments, expenses, and variables are colour-coded as you type.
+            </li>
+            <li>
+              ⚡ Real-Time Evaluation: Results appear instantly in the output panel — no buttons needed.
             </li>
             <li>
-              ⚡ Real-Time Evaluation: Instantly see the results of your calculations as you type.
+              🔤 Variable Assignment: Use <code className="text-purple-400">name = expression</code> or <code className="text-purple-400">name: expression</code> to store values.
             </li>
             <li>
-              🔤 Variable Assignment: Define and use variables to store values for repeated use.
+              💬 Comments &amp; Headings: Organise with <code className="text-purple-400">//</code> comments and <code className="text-purple-400">#</code> headings.
             </li>
             <li>
-              🧠 Expression Parsing: Evaluate complex expressions with operators, functions, and
-              parentheses.
+              📅 Deduction Tracking: Set a deduction day per expense; past-due lines auto-comment.
             </li>
             <li>
-              💬 Commenting: Add comments to your calculations for better organization and
-              understanding.
+              🔄 Cloud Sync: Log in to save your notebook to Firebase and pick up where you left off.
             </li>
             <li>
-              📱 Responsive Design: Enjoy a seamless experience across different devices and screen
-              sizes.
+              🌙 Dark Mode: Toggle between light and dark themes.
             </li>
           </ul>
           <motion.div
@@ -222,16 +216,14 @@ export default function About() {
         <div className="max-w-3xl mx-auto">
           <h2 className="text-3xl text-center font-bold text-white mb-4">Usage Guide 📘</h2>
           <ol className="list-decimal list-inside text-gray-300 space-y-2 mb-4">
-            <li>Type your calculations in the input textarea.</li>
-            <li>Press Enter or click outside the textarea to evaluate the expression.</li>
-            <li>The output will be displayed in the output textarea.</li>
-            <li>Store operations in a variable by starting with name=</li>
-            <li>Add comments using the // prefix to document your calculations.</li>
-            <li>Add headings using the # prefix for ease of labelling.</li>
-            <li>
-              Make use of reserved keywords [&quot;prev&quot;, &quot;sum&quot;, &quot;to&quot;,
-              &quot;monthlyPayDate&quot;, &quot;in&quot;]
-            </li>
+            <li>Type your calculations in the rich-text editor (left panel).</li>
+            <li>Each line is evaluated automatically — output appears on the right.</li>
+            <li>Use <code className="text-purple-400">name = value</code> or <code className="text-purple-400">name: value</code> to store a variable.</li>
+            <li>Use <code className="text-purple-400">//</code> to comment out a line, <code className="text-purple-400">#</code> for headings.</li>
+            <li>Reserved keywords: <code className="text-purple-400">prev</code> (last result), <code className="text-purple-400">sum</code> (running total), <code className="text-purple-400">monthlyPayDate</code> (pay-day countdown).</li>
+            <li>Click the calendar icon next to an expense to set its deduction day — it auto-comments when past due.</li>
+            <li>Toggle <strong>Due Next</strong> to uncomment all deduction lines for next-month planning.</li>
+            <li>Sign in to save your notebook automatically to the cloud.</li>
           </ol>
           <p className="text-gray-300 mb-4">
             Instant Calc is designed to be intuitive and user-friendly. Start exploring its
@@ -264,14 +256,12 @@ export default function About() {
             we&apos;re planning to implement:
           </p>
           <ul className="list-disc list-inside text-gray-300 space-y-2 mb-4">
-            <li>📊 Data Visualization: Show charts and graphs for your calculations.</li>
-            <li>📑 Multiple Tabs: Add and save more tabs for different calculation sessions.</li>
-            <li>
-              📤 Export Functionality: Export your calculations and results in various formats.
-            </li>
-            <li>📅 Pay Date Setting: Set a date for pay dates and track expenses that are due.</li>
-            <li>💾 Auto-Save: Automatically save your work to prevent data loss.</li>
-            <li>🔄 Sync Across Devices: Access your calculations from any device.</li>
+            <li>📊 Charts &amp; Visualisations for expense breakdowns.</li>
+            <li>📑 Multiple Tabs for different notebooks.</li>
+            <li>📤 Export to CSV / PDF.</li>
+            <li>📱 Progressive Web App — install on your phone.</li>
+            <li>🌐 Real-time multi-user collaboration.</li>
+            <li>🧮 Currency conversion (<code className="text-purple-400">100 usd in gbp</code>).</li>
           </ul>
           <p className="text-gray-300 mb-4">
             Stay tuned for these exciting updates that will make Instant Calc even more powerful and
diff --git a/pages/index.tsx b/pages/index.tsx
index be9dd6db..b1742f57 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -330,7 +330,7 @@ export default function Index() {
       customOutput = "-";
     }
 
-    setOutput(`[${lines.length}→${(newOutput.match(/\n/g) || []).length}] ${newOutput}`);
+    setOutput(newOutput);
     setSum(keywordValues.tempSum);
     setPrev(keywordValues.tempPrev);
     variablesRef.current = { ...variables };
diff --git a/pages/new-features.tsx b/pages/new-features.tsx
index 6e4ce504..8954d0a5 100644
--- a/pages/new-features.tsx
+++ b/pages/new-features.tsx
@@ -23,7 +23,6 @@ export default function NewFeatures() {
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     // Submit the form data to your backend here
-    console.log("Form Data Submitted:", formData);
   };
 
   return (
@@ -46,7 +45,7 @@ export default function NewFeatures() {
             <br />
             Let us know!
             <br />
-            We appreciate your feedback and are always looking for ways to improve our platform.
+            We review every request and prioritize based on community interest.
           </p>
 
           <form onSubmit={handleSubmit} className="space-y-6">

From a7e9190b58cb53898b2bd6541051b479eeab636b Mon Sep 17 00:00:00 2001
From: onlyonehas <hassanabbas93@hotmail.com>
Date: Mon, 27 Jul 2026 01:43:41 +0100
Subject: [PATCH 13/13] fix: JSX comment syntax in about.tsx, setIndex dep, and
 wire feature request form to Firebase

- Wrap // and # in {String.fromCharCode(39)}//{String.fromCharCode(39)} to satisfy react/jsx-no-comment-textnodes
- Add setIndex to useEffect deps in useTypewriter
- Feature request form now pushes to Firebase Realtime Database under featureRequests/{pushId}
- Show thank-you message after submission
---
 pages/about.tsx        |  58 +++++++++++------
 pages/new-features.tsx | 139 ++++++++++++++++++++++++-----------------
 2 files changed, 121 insertions(+), 76 deletions(-)

diff --git a/pages/about.tsx b/pages/about.tsx
index 44827eb2..38f99cad 100644
--- a/pages/about.tsx
+++ b/pages/about.tsx
@@ -33,7 +33,7 @@ const useTypewriter = (
       }, speed);
       return () => clearTimeout(timer);
     }
-  }, [text, index, speed, isDeleting, displayedText]);
+  }, [text, index, speed, isDeleting, displayedText, setIndex]);
 
   return displayedText;
 };
@@ -148,9 +148,9 @@ export default function About() {
         <div className="max-w-3xl mx-auto">
           <h2 className="text-3xl font-bold text-white mb-4 text-center">About Instant Calc 🧮</h2>
           <p className="text-gray-300 mb-4">
-            Instant Calc is a real-time calculation notebook. Type expenses, set variables,
-            write expressions — and see results instantly on the right. Every line is evaluated
-            as you type, with support for comments, headings, and deduction tracking.
+            Instant Calc is a real-time calculation notebook. Type expenses, set variables, write
+            expressions — and see results instantly on the right. Every line is evaluated as you
+            type, with support for comments, headings, and deduction tracking.
           </p>
           <motion.div
             initial="hidden"
@@ -176,26 +176,30 @@ export default function About() {
           <h2 className="text-3xl font-bold text-center text-white mb-4">Key Features ✨</h2>
           <ul className="list-disc list-inside text-gray-300 space-y-2 mb-4">
             <li>
-              🎨 Syntax Highlighting: Headings, comments, expenses, and variables are colour-coded as you type.
+              🎨 Syntax Highlighting: Headings, comments, expenses, and variables are colour-coded
+              as you type.
             </li>
             <li>
-              ⚡ Real-Time Evaluation: Results appear instantly in the output panel — no buttons needed.
+              ⚡ Real-Time Evaluation: Results appear instantly in the output panel — no buttons
+              needed.
             </li>
             <li>
-              🔤 Variable Assignment: Use <code className="text-purple-400">name = expression</code> or <code className="text-purple-400">name: expression</code> to store values.
+              🔤 Variable Assignment: Use <code className="text-purple-400">name = expression</code>{" "}
+              or <code className="text-purple-400">name: expression</code> to store values.
             </li>
             <li>
-              💬 Comments &amp; Headings: Organise with <code className="text-purple-400">//</code> comments and <code className="text-purple-400">#</code> headings.
+              💬 Comments &amp; Headings: Organise with{" "}
+              <code className="text-purple-400">{"//"}</code> comments and{" "}
+              <code className="text-purple-400">{"#"}</code> headings.
             </li>
             <li>
               📅 Deduction Tracking: Set a deduction day per expense; past-due lines auto-comment.
             </li>
             <li>
-              🔄 Cloud Sync: Log in to save your notebook to Firebase and pick up where you left off.
-            </li>
-            <li>
-              🌙 Dark Mode: Toggle between light and dark themes.
+              🔄 Cloud Sync: Log in to save your notebook to Firebase and pick up where you left
+              off.
             </li>
+            <li>🌙 Dark Mode: Toggle between light and dark themes.</li>
           </ul>
           <motion.div
             initial="hidden"
@@ -218,11 +222,27 @@ export default function About() {
           <ol className="list-decimal list-inside text-gray-300 space-y-2 mb-4">
             <li>Type your calculations in the rich-text editor (left panel).</li>
             <li>Each line is evaluated automatically — output appears on the right.</li>
-            <li>Use <code className="text-purple-400">name = value</code> or <code className="text-purple-400">name: value</code> to store a variable.</li>
-            <li>Use <code className="text-purple-400">//</code> to comment out a line, <code className="text-purple-400">#</code> for headings.</li>
-            <li>Reserved keywords: <code className="text-purple-400">prev</code> (last result), <code className="text-purple-400">sum</code> (running total), <code className="text-purple-400">monthlyPayDate</code> (pay-day countdown).</li>
-            <li>Click the calendar icon next to an expense to set its deduction day — it auto-comments when past due.</li>
-            <li>Toggle <strong>Due Next</strong> to uncomment all deduction lines for next-month planning.</li>
+            <li>
+              Use <code className="text-purple-400">name = value</code> or{" "}
+              <code className="text-purple-400">name: value</code> to store a variable.
+            </li>
+            <li>
+              Use <code className="text-purple-400">{"//"}</code> to comment out a line,{" "}
+              <code className="text-purple-400">{"#"}</code> for headings.
+            </li>
+            <li>
+              Reserved keywords: <code className="text-purple-400">prev</code> (last result),{" "}
+              <code className="text-purple-400">sum</code> (running total),{" "}
+              <code className="text-purple-400">monthlyPayDate</code> (pay-day countdown).
+            </li>
+            <li>
+              Click the calendar icon next to an expense to set its deduction day — it auto-comments
+              when past due.
+            </li>
+            <li>
+              Toggle <strong>Due Next</strong> to uncomment all deduction lines for next-month
+              planning.
+            </li>
             <li>Sign in to save your notebook automatically to the cloud.</li>
           </ol>
           <p className="text-gray-300 mb-4">
@@ -261,7 +281,9 @@ export default function About() {
             <li>📤 Export to CSV / PDF.</li>
             <li>📱 Progressive Web App — install on your phone.</li>
             <li>🌐 Real-time multi-user collaboration.</li>
-            <li>🧮 Currency conversion (<code className="text-purple-400">100 usd in gbp</code>).</li>
+            <li>
+              🧮 Currency conversion (<code className="text-purple-400">100 usd in gbp</code>).
+            </li>
           </ul>
           <p className="text-gray-300 mb-4">
             Stay tuned for these exciting updates that will make Instant Calc even more powerful and
diff --git a/pages/new-features.tsx b/pages/new-features.tsx
index 8954d0a5..24b81b76 100644
--- a/pages/new-features.tsx
+++ b/pages/new-features.tsx
@@ -3,26 +3,34 @@
 import { Header } from "@/components/Header";
 import { PopUpModal } from "@/components/PopUpModal";
 import { useDarkMode } from "@/contexts/DarkModeContext";
+import { database } from "@/pages/_document";
+import { push, ref, serverTimestamp } from "firebase/database";
 import Head from "next/head";
 import { useState } from "react";
 
+const EMPTY_FORM = { name: "", email: "", description: "" };
+
 export default function NewFeatures() {
   const { darkMode } = useDarkMode();
 
   const [singOutModal, toggleSingOutModal] = useState(false);
-  const [formData, setFormData] = useState({
-    name: "",
-    email: "",
-    description: "",
-  });
+  const [formData, setFormData] = useState(EMPTY_FORM);
+  const [submitted, setSubmitted] = useState(false);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     setFormData({ ...formData, [e.target.name]: e.target.value });
   };
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    // Submit the form data to your backend here
+    if (database) {
+      await push(ref(database, "featureRequests"), {
+        ...formData,
+        createdAt: serverTimestamp(),
+      });
+    }
+    setSubmitted(true);
+    setFormData(EMPTY_FORM);
   };
 
   return (
@@ -48,61 +56,76 @@ export default function NewFeatures() {
             We review every request and prioritize based on community interest.
           </p>
 
-          <form onSubmit={handleSubmit} className="space-y-6">
-            <div>
-              <label htmlFor="name" className="block text-sm font-medium">
-                Name
-              </label>
-              <input
-                type="text"
-                name="name"
-                id="name"
-                value={formData.name}
-                onChange={handleChange}
-                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-                required
-              />
-            </div>
-
-            <div>
-              <label htmlFor="email" className="block text-sm font-medium">
-                Email
-              </label>
-              <input
-                type="email"
-                name="email"
-                id="email"
-                value={formData.email}
-                onChange={handleChange}
-                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-                required
-              />
-            </div>
-
-            <div>
-              <label htmlFor="description" className="block text-sm font-medium ">
-                Feature Description
-              </label>
-              <textarea
-                name="description"
-                id="description"
-                rows={4}
-                value={formData.description}
-                onChange={handleChange}
-                className="mt-1 block w-full px-3 py-2 border dark:border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-                required
-              ></textarea>
-            </div>
-
-            <div className="text-center">
+          {submitted ? (
+            <div className="text-center py-16">
+              <p className="text-2xl font-semibold text-green-400 mb-2">Thank you!</p>
+              <p className="text-gray-400">
+                We review every request and keep the community posted.
+              </p>
               <button
-                type="submit"
-                className="w-full text-white bg-blue-500 px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                onClick={() => setSubmitted(false)}
+                className="mt-6 text-sm text-purple-400 hover:text-purple-300 underline"
               >
-                Submit Request
+                Submit another
               </button>
             </div>
-          </form>
+          ) : (
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium">
+                  Name
+                </label>
+                <input
+                  type="text"
+                  name="name"
+                  id="name"
+                  value={formData.name}
+                  onChange={handleChange}
+                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                  required
+                />
+              </div>
+
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium">
+                  Email
+                </label>
+                <input
+                  type="email"
+                  name="email"
+                  id="email"
+                  value={formData.email}
+                  onChange={handleChange}
+                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                  required
+                />
+              </div>
+
+              <div>
+                <label htmlFor="description" className="block text-sm font-medium ">
+                  Feature Description
+                </label>
+                <textarea
+                  name="description"
+                  id="description"
+                  rows={4}
+                  value={formData.description}
+                  onChange={handleChange}
+                  className="mt-1 block w-full px-3 py-2 border dark:border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                  required
+                ></textarea>
+              </div>
+
+              <div className="text-center">
+                <button
+                  type="submit"
+                  className="w-full text-white bg-blue-500 px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                >
+                  Submit Request
+                </button>
+              </div>
+            </form>
+          )}
         </div>
       </div>
     </>