From cb8218c64ef15af2cb15d20e6be73e08cc43e145 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Wed, 25 Mar 2026 07:54:41 +0000
Subject: [PATCH] [#516] Add 60-character limit and counter to storyline title

- Enforce max 60 chars on new storyline title input (maxLength + slice)
- Show character counter (e.g. "42 / 60") below title field
- Prevent submission when title exceeds limit
- Bump version to 0.1.1

Fixes #516

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 package.json            |  2 +-
 src/app/create/page.tsx | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index da5d0b98..1114e099 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "plotlink",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "workspaces": [
     "packages/*"
diff --git a/src/app/create/page.tsx b/src/app/create/page.tsx
index bb60f7a0..61ca7b94 100644
--- a/src/app/create/page.tsx
+++ b/src/app/create/page.tsx
@@ -109,7 +109,8 @@ function CreatePage() {
     attemptRetry: newAttemptRetry,
   } = usePublishIntent();
   const { valid: newValid, charCount: newCharCount } = validateContentLength(newContent);
-  const newTitleValid = newTitle.trim().length > 0;
+  const MAX_TITLE_LENGTH = 60;
+  const newTitleValid = newTitle.trim().length > 0 && newTitle.length <= MAX_TITLE_LENGTH;
   const newGenreValid = genre.length > 0;
   const newCanSubmit =
     newState === "idle" || newState === "error"
@@ -307,11 +308,20 @@ function CreatePage() {
               <input
                 type="text"
                 value={newTitle}
-                onChange={(e) => setNewTitle(e.target.value)}
+                onChange={(e) => setNewTitle(e.target.value.slice(0, MAX_TITLE_LENGTH))}
                 disabled={newBusy}
                 placeholder="Enter storyline title"
+                maxLength={MAX_TITLE_LENGTH}
                 className="border-border bg-surface text-foreground placeholder:text-muted w-full rounded border px-3 py-2 text-sm focus:border-accent focus:outline-none disabled:opacity-50"
               />
+              <div className="mt-1 flex justify-between text-xs">
+                {newTitle.length > 0 && !newTitleValid ? (
+                  <span className="text-error">Title is required</span>
+                ) : (
+                  <span />
+                )}
+                <span className="text-muted">{newTitle.length} / {MAX_TITLE_LENGTH}</span>
+              </div>
             </div>
 
             <div className="grid grid-cols-2 gap-4">