From 8a15dfc26bb20bc81a47b575e51e509cbfced182 Mon Sep 17 00:00:00 2001
From: Aaron Boodman <aaron@aaronboodman.com>
Date: Thu, 26 Dec 2024 22:17:40 -1000
Subject: [PATCH] feat(zbugs): Put limits on textareas too for UI feedback.

---
 apps/zbugs/src/limits.ts                        | 8 ++++++++
 apps/zbugs/src/pages/issue/comment-composer.tsx | 3 +++
 apps/zbugs/src/pages/issue/issue-composer.tsx   | 6 ++++++
 apps/zbugs/src/pages/issue/issue-page.tsx       | 6 ++++++
 4 files changed, 23 insertions(+)
 create mode 100644 apps/zbugs/src/limits.ts

diff --git a/apps/zbugs/src/limits.ts b/apps/zbugs/src/limits.ts
new file mode 100644
index 000000000..c3631fab3
--- /dev/null
+++ b/apps/zbugs/src/limits.ts
@@ -0,0 +1,8 @@
+// NOTE: These limits are also in the postgres schema. These here are just for
+// UI feedback.
+export const MAX_ISSUE_TITLE_LENGTH = 128;
+export const MAX_ISSUE_DESCRIPTION_LENGTH = 10 * 1024;
+
+// The launch post has a special maxLength because trolls.
+export const maxCommentLength = (issueID: string) =>
+  issueID === 'duuW9Nyj5cTNLlimp9Qje' ? 1024 : 64 * 1024;
diff --git a/apps/zbugs/src/pages/issue/comment-composer.tsx b/apps/zbugs/src/pages/issue/comment-composer.tsx
index 939fb42eb..1de1d4c69 100644
--- a/apps/zbugs/src/pages/issue/comment-composer.tsx
+++ b/apps/zbugs/src/pages/issue/comment-composer.tsx
@@ -4,6 +4,7 @@ import {Button} from '../../components/button.js';
 import {useLogin} from '../../hooks/use-login.js';
 import {useZero} from '../../hooks/use-zero.js';
 import {isCtrlEnter} from './is-ctrl-enter.js';
+import {maxCommentLength} from '../../limits.js';
 
 export function CommentComposer({
   id,
@@ -83,6 +84,8 @@ export function CommentComposer({
         onChange={handleChange}
         onKeyDown={handleKeyDown}
         className="comment-input autoResize"
+        /* The launch post has a speical maxLength because trolls */
+        maxLength={maxCommentLength(issueID)}
       />
       <Button
         className="secondary-button"
diff --git a/apps/zbugs/src/pages/issue/issue-composer.tsx b/apps/zbugs/src/pages/issue/issue-composer.tsx
index 70e741031..ded1ae669 100644
--- a/apps/zbugs/src/pages/issue/issue-composer.tsx
+++ b/apps/zbugs/src/pages/issue/issue-composer.tsx
@@ -4,6 +4,10 @@ import {Button} from '../../components/button.js';
 import {Modal, ModalActions, ModalBody} from '../../components/modal.js';
 import {useZero} from '../../hooks/use-zero.js';
 import {isCtrlEnter} from './is-ctrl-enter.js';
+import {
+  MAX_ISSUE_DESCRIPTION_LENGTH,
+  MAX_ISSUE_TITLE_LENGTH,
+} from '../../limits.js';
 
 interface Props {
   /** If id is defined the issue created by the composer. */
@@ -103,6 +107,7 @@ export function IssueComposer({isOpen, onDismiss}: Props) {
             ref={focusInput} // Attach the inputRef to this input field
             onChange={e => setTitle(e.target.value)}
             onKeyDown={handleKeyDown}
+            maxLength={MAX_ISSUE_TITLE_LENGTH}
           />
         </div>
         <div className="w-full px-4">
@@ -112,6 +117,7 @@ export function IssueComposer({isOpen, onDismiss}: Props) {
             onChange={e => setDescription(e.target.value)}
             onKeyDown={handleKeyDown}
             placeholder="Add description..."
+            maxLength={MAX_ISSUE_DESCRIPTION_LENGTH}
           ></textarea>
         </div>
       </ModalBody>
diff --git a/apps/zbugs/src/pages/issue/issue-page.tsx b/apps/zbugs/src/pages/issue/issue-page.tsx
index cd81c1143..c3ceb7927 100644
--- a/apps/zbugs/src/pages/issue/issue-page.tsx
+++ b/apps/zbugs/src/pages/issue/issue-page.tsx
@@ -50,6 +50,10 @@ import {preload} from '../../zero-setup.js';
 import {CommentComposer} from './comment-composer.js';
 import {Comment} from './comment.js';
 import {isCtrlEnter} from './is-ctrl-enter.js';
+import {
+  MAX_ISSUE_DESCRIPTION_LENGTH,
+  MAX_ISSUE_TITLE_LENGTH,
+} from '../../limits.js';
 
 const emojiToastShowDuration = 3_000;
 
@@ -442,6 +446,7 @@ export function IssuePage({onReady}: {onReady: () => void}) {
                 autoFocus
                 onChange={e => setEdits({...edits, title: e.target.value})}
                 onKeyDown={e => isCtrlEnter(e) && save()}
+                maxLength={MAX_ISSUE_TITLE_LENGTH}
               />
             </div>
           )}
@@ -471,6 +476,7 @@ export function IssuePage({onReady}: {onReady: () => void}) {
                   setEdits({...edits, description: e.target.value})
                 }
                 onKeyDown={e => isCtrlEnter(e) && save()}
+                maxLength={MAX_ISSUE_DESCRIPTION_LENGTH}
               />
             </div>
           )}