Move nickname UI above the chat input, trigger on input focus

- "昵称 X ✎" button (next to the "聊天" title) replaced with a row directly above the chat input: hidden until a nickname is set, then shows "<nickname> change name" — matches infiniteslop.ai's own placement/label - Nickname prompt now triggers on focusing the chat input itself, not just on hitting send — so a first-time visitor sees it the moment they click in Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Move nickname UI above the chat input, trigger on input focus
- "昵称 X ✎" button (next to the "聊天" title) replaced with a row directly above the chat input: hidden until a nickname is set, then shows "<nickname> change name" — matches infiniteslop.ai's own placement/label - Nickname prompt now triggers on focusing the chat input itself, not just on hitting send — so a first-time visitor sees it the moment they click in Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
yibo
1 parent c9834ccb
Showing 3 changed files with 81 additions and 56 deletions
library.json
live.css
live.html
 [
   {
+    "id": "8024972d6019",
+    "source": "h3console",
+    "prompt": "蛤蟆文太跳出来了打架",
+    "fullPrompt": "蛤蟆文太跳出来了打架",
+    "edited": false,
+    "width": 832,
+    "height": 480,
+    "duration": 5,
+    "partition": "text",
+    "likes": 0,
+    "createdAt": 1788249485816
+  },
+  {
     "id": "0ade3648412f",
     "source": "h3console",
     "prompt": "来一只猫在草地上玩耍",
@@ -53,7 +66,7 @@
     "likes": 0,
     "createdAt": 1788192915845,
     "promptEn": "scholar watches the room warily",
-    "lastPlayedAt": 1788246004885
+    "lastPlayedAt": 1788249895446
   },
   {
     "id": "e8cbb73560ef",
@@ -307,7 +320,7 @@
     "partition": "ref2va",
     "likes": 0,
     "createdAt": 1788187365789,
-    "lastPlayedAt": 1788247402036,
+    "lastPlayedAt": 1788249805778,
     "promptEn": "woman in white being gentle and comforting"
   },
   {
@@ -488,7 +501,7 @@
     "likes": 0,
     "createdAt": 1788138492364,
     "promptEn": "astronaut on a Martian canyon, helmet reflecting an alien ruined city",
-    "lastPlayedAt": 1788247866434
+    "lastPlayedAt": 1788250133927
   },
   {
     "id": "f84b8f044ec5",
@@ -503,7 +516,7 @@
     "likes": 0,
     "createdAt": 1788120171725,
     "promptEn": "constable bursts in and blocks the door, talks to a pale woman behind the screen",
-    "lastPlayedAt": 1788248607084
+    "lastPlayedAt": 1788249899449
   },
   {
     "id": "5c364152e54c",
@@ -563,7 +576,7 @@
     "likes": 0,
     "createdAt": 1788071067702,
     "promptEn": "constable stands still, quietly says he won't make a sound, woman stays silent behind the screen",
-    "lastPlayedAt": 1788247289944
+    "lastPlayedAt": 1788249939841
   },
   {
     "id": "2e09fcd3d42c",
@@ -638,7 +651,7 @@
     "likes": 0,
     "createdAt": 1788026877547,
     "promptEn": "a deity in gold crown and red veil, quietly judging you in a moonlit bridal chamber",
-    "lastPlayedAt": 1788248094627
+    "lastPlayedAt": 1788249765707
   },
   {
     "id": "d5f811737e95",
@@ -683,7 +696,7 @@
     "likes": 0,
     "createdAt": 1788026569123,
     "promptEn": "pale dream demon in a suit, reaching out a hand inside a dream train car",
-    "lastPlayedAt": 1788248166697
+    "lastPlayedAt": 1788250129929
   },
   {
     "id": "bd6e2b264243",
@@ -743,7 +756,7 @@
     "likes": 0,
     "createdAt": 1788026068497,
     "promptEn": "black-haired prince in a red cloak, pressing down an execution order in the trial hall",
-    "lastPlayedAt": 1788247147812
+    "lastPlayedAt": 1788249833797
   },
   {
     "id": "0a5e37bb328c",
@@ -758,7 +771,7 @@
     "likes": 0,
     "createdAt": 1788025642732,
     "promptEn": "Vecna reaching out a claw in his lair in the Upside Down, red lightning",
-    "lastPlayedAt": 1788246201053
+    "lastPlayedAt": 1788249929837
   },
   {
     "id": "00862f966c3f",
@@ -1133,7 +1146,7 @@
     "likes": 0,
     "createdAt": 1788014099497,
     "promptEn": "glass bridge game, exploiting a flaw to push back player 101",
-    "lastPlayedAt": 1788248180707
+    "lastPlayedAt": 1788249885816
   },
   {
     "id": "24576c264a25",
@@ -1148,7 +1161,7 @@
     "likes": 0,
     "createdAt": 1788013870849,
     "promptEn": "glass bridge game, exploiting a flaw to push back player 101",
-    "lastPlayedAt": 1788244557694
+    "lastPlayedAt": 1788249963847
   },
   {
     "id": "dd12bbb55060",
@@ -1178,7 +1191,7 @@
     "likes": 0,
     "createdAt": 1788013632065,
     "promptEn": "glass bridge game, held the goal but paid a price",
-    "lastPlayedAt": 1788247840412
+    "lastPlayedAt": 1788249933837
   },
   {
     "id": "892b923eed29",
@@ -1193,7 +1206,7 @@
     "likes": 0,
     "createdAt": 1788013393463,
     "promptEn": "guessed wrong in a survival game, got countered",
-    "lastPlayedAt": 1788248362870
+    "lastPlayedAt": 1788250071902
   },
   {
     "id": "7880a91928c6",
@@ -1253,7 +1266,7 @@
     "likes": 0,
     "createdAt": 1788012679740,
     "promptEn": "in the mental lair, exploiting a flaw to counter Vecna",
-    "lastPlayedAt": 1788245658603
+    "lastPlayedAt": 1788250124975
   },
   {
     "id": "3913752bbe3a",
@@ -1403,7 +1416,7 @@
     "likes": 0,
     "createdAt": 1788010775613,
     "promptEn": "facing Voldemort, stayed passive and got cornered",
-    "lastPlayedAt": 1788241054655
+    "lastPlayedAt": 1788249909833
   },
   {
     "id": "795842efa4a1",
@@ -1583,7 +1596,7 @@
     "likes": 0,
     "createdAt": 1788007915610,
     "promptEn": "in the ruined city, exploiting a flaw to counter Tomura",
-    "lastPlayedAt": 1788244427575
+    "lastPlayedAt": 1788249919450
   },
   {
     "id": "f67685cd6862",
@@ -1628,7 +1641,7 @@
     "likes": 0,
     "createdAt": 1788007201908,
     "promptEn": "breaking into the palace, Neferpitou stalling to protect the king",
-    "lastPlayedAt": 1788248014560
+    "lastPlayedAt": 1788249889814
   },
   {
     "id": "628026375795",
@@ -1718,7 +1731,7 @@
     "likes": 0,
     "createdAt": 1788005778588,
     "promptEn": "facing Frieza, held the goal but paid a price",
-    "lastPlayedAt": 1788247462098
+    "lastPlayedAt": 1788249925828
   },
   {
     "id": "b96cc9762cf6",
@@ -1808,7 +1821,7 @@
     "likes": 0,
     "createdAt": 1788004353928,
     "promptEn": "facing Mahito, went in head-on and got seen through",
-    "lastPlayedAt": 1788244924008
+    "lastPlayedAt": 1788250119920
   },
   {
     "id": "971d80ec087c",
@@ -1928,7 +1941,7 @@
     "likes": 0,
     "createdAt": 1788002691822,
     "promptEn": "facing Reiner, held the goal but paid a price",
-    "lastPlayedAt": 1788244299472
+    "lastPlayedAt": 1788249915447
   },
   {
     "id": "f65b15d67966",
@@ -2258,7 +2271,7 @@
     "likes": 0,
     "createdAt": 1787762342686,
     "promptEn": "woman tells him from behind the screen to go check outside, he steps out warily",
-    "lastPlayedAt": 1788248000548
+    "lastPlayedAt": 1788250091902
   },
   {
     "id": "47a6de809c61",
@@ -2288,7 +2301,7 @@
     "likes": 0,
     "createdAt": 1787762311804,
     "promptEn": "constable sits with a cup of water, slowly looking up at the woman behind the screen",
-    "lastPlayedAt": 1788246833570
+    "lastPlayedAt": 1788250038963
   },
   {
     "id": "850f13881576",
@@ -2393,7 +2406,7 @@
     "likes": 0,
     "createdAt": 1787724313620,
     "promptEn": "first-person view bursting into the room, glancing back in fear, the woman startled",
-    "lastPlayedAt": 1788247658274
+    "lastPlayedAt": 1788249869811
   },
   {
     "id": "81b6c3789111",
@@ -2498,7 +2511,7 @@
     "likes": 0,
     "createdAt": 1787708653181,
     "promptEn": "constable holds her gaze, quietly says \"go on\", then waits in silence",
-    "lastPlayedAt": 1788244341508
+    "lastPlayedAt": 1788249737695
   },
   {
     "id": "55f98ceec9e4",
@@ -2663,7 +2676,7 @@
     "likes": 0,
     "createdAt": 1787674737743,
     "promptEn": "constable slowly looks around the room, discovers her watching him motionlessly through the screen",
-    "lastPlayedAt": 1788248444942
+    "lastPlayedAt": 1788249837798
   },
   {
     "id": "c74118d0413f",
@@ -2708,7 +2721,7 @@
     "likes": 0,
     "createdAt": 1787674695703,
     "promptEn": "constable stops, faces the screen, quietly promises to keep his voice down",
-    "lastPlayedAt": 1788247540173
+    "lastPlayedAt": 1788250023879
   },
   {
     "id": "94dc455e26bf",
@@ -2753,7 +2766,7 @@
     "likes": 0,
     "createdAt": 1787674642139,
     "promptEn": "constable forms hand seals and summons a giant toad out of smoke",
-    "lastPlayedAt": 1788247129805
+    "lastPlayedAt": 1788250076972
   },
   {
     "id": "e9a6320e18a9",
@@ -2783,7 +2796,7 @@
     "likes": 0,
     "createdAt": 1787674639055,
     "promptEn": "constable checks his reflection in the mirror, sees her behind his shoulder in it, turns around to find the screen empty",
-    "lastPlayedAt": 1788246273115
+    "lastPlayedAt": 1788249777714
   },
   {
     "id": "ebaf0dde3d9f",
@@ -3023,7 +3036,7 @@
     "likes": 0,
     "createdAt": 1787615243753,
     "promptEn": "robot arm picks up a red block and puts it down",
-    "lastPlayedAt": 1788246909631
+    "lastPlayedAt": 1788249857808
   },
   {
     "id": "d040eec16a88",
@@ -3038,7 +3051,7 @@
     "likes": 0,
     "createdAt": 1787615242602,
     "promptEn": "otome game male lead showcase PV",
-    "lastPlayedAt": 1788247347993
+    "lastPlayedAt": 1788249753702
   },
   {
     "id": "423a20afba5a",
@@ -3068,7 +3081,7 @@
     "likes": 0,
     "createdAt": 1787615240988,
     "promptEn": "clay fox sprints off a cliff, slow-mo leap over the canyon",
-    "lastPlayedAt": 1788247880445
+    "lastPlayedAt": 1788249951846
   },
   {
     "id": "db125dc6a831",
@@ -3128,7 +3141,7 @@
     "likes": 0,
     "createdAt": 1787588545243,
     "promptEn": "ergonomic office chair 360 showcase ad",
-    "lastPlayedAt": 1788248711178
+    "lastPlayedAt": 1788250058966
   },
   {
     "id": "b0d258352c3c",
@@ -3218,7 +3231,7 @@
     "likes": 0,
     "createdAt": 1787588541726,
     "promptEn": "woman opens the trunk on a desert road, takes out a bag",
-    "lastPlayedAt": 1788245330307
+    "lastPlayedAt": 1788250107920
   },
   {
     "id": "97846542ab09",
@@ -3397,7 +3410,7 @@
     "partition": "text",
     "likes": 0,
     "createdAt": 1787576506447,
-    "lastPlayedAt": 1788247534166,
+    "lastPlayedAt": 1788250053889,
     "promptEn": "man does as she says but stays on guard"
   },
   {
@@ -3548,7 +3561,7 @@
     "likes": 0,
     "createdAt": 1787542770522,
     "promptEn": "clip cut to match a reference video's editing rhythm",
-    "lastPlayedAt": 1788248438939
+    "lastPlayedAt": 1788249969849
   },
   {
     "id": "f9286d694bad",
@@ -3608,7 +3621,7 @@
     "likes": 0,
     "createdAt": 1787470101960,
     "promptEn": "cute hand-drawn beagle dog making faces, game screen",
-    "lastPlayedAt": 1788248134665
+    "lastPlayedAt": 1788249793727
   },
   {
     "id": "4067993ff824",
@@ -3833,7 +3846,7 @@
     "likes": 0,
     "createdAt": 1787450754171,
     "promptEn": "protagonist leaps across rooftops fleeing pursuers",
-    "lastPlayedAt": 1788246511317
+    "lastPlayedAt": 1788249973852
   },
   {
     "id": "fd0183c54763",
@@ -3878,7 +3891,7 @@
     "likes": 0,
     "createdAt": 1787442174982,
     "promptEn": "protagonist leaps across rooftops fleeing pursuers",
-    "lastPlayedAt": 1788248334845
+    "lastPlayedAt": 1788249819782
   },
   {
     "id": "18105bc2900b",
@@ -4058,7 +4071,7 @@
     "likes": 0,
     "createdAt": 1787412606465,
     "promptEn": "protagonist leaps across rooftops fleeing pursuers",
-    "lastPlayedAt": 1788246453270
+    "lastPlayedAt": 1788249769708
   },
   {
     "id": "29a99dc412b2",
@@ -4358,7 +4371,7 @@
     "likes": 0,
     "createdAt": 1787326019290,
     "promptEn": "misty Jiangnan old town at dawn, woman walking with an oil-paper umbrella",
-    "lastPlayedAt": 1788247508139
+    "lastPlayedAt": 1788249851805
   },
   {
     "id": "fd8534ce588c",
@@ -176,21 +176,26 @@ body {
   color: var(--muted);
   padding: 12px 14px 6px;
 }
-.chat-title-row { display: flex; align-items: center; justify-content: space-between; }
-.nickname-edit-btn {
+.chat-identity-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 14px 6px;
+  font-size: 11.5px;
+  font-weight: 700;
+}
+.chat-identity-row #currentNickname { color: var(--accent); }
+.chat-identity-row #changeNameBtn {
   background: transparent;
-  border: 1px solid var(--border);
+  border: none;
   color: var(--muted);
   font-size: 11px;
   font-weight: 700;
-  text-transform: none;
-  letter-spacing: normal;
-  border-radius: 999px;
-  padding: 3px 10px;
+  text-decoration: underline;
   cursor: pointer;
+  padding: 0;
 }
-.nickname-edit-btn:hover { color: #fff; border-color: var(--muted); }
-.nickname-edit-btn #currentNickname { color: var(--accent); }
+.chat-identity-row #changeNameBtn:hover { color: #fff; }
 .chat-list {
   flex: 1;
   overflow-y: auto;
@@ -40,11 +40,12 @@
     </div>
     <aside class="right-col" id="rightCol" hidden>
-      <div class="section-title chat-title-row">
-        <span>聊天</span>
-        <button class="nickname-edit-btn" id="nicknameEditBtn">昵称 <span id="currentNickname">未设置</span> ✎</button>
-      </div>
+      <div class="section-title">聊天</div>
       <div class="chat-list" id="chatList"></div>
+      <div class="chat-identity-row" id="chatIdentityRow" hidden>
+        <span id="currentNickname"></span>
+        <button id="changeNameBtn">change name</button>
+      </div>
       <div class="chat-input-row">
         <input type="text" id="chatInput" placeholder="说点什么，或者想看什么…" maxlength="300" />
         <button id="chatSendBtn">发送</button>
@@ -97,7 +98,8 @@ const muteBtn = document.getElementById(&quot;muteBtn&quot;);
 const nicknameModal = document.getElementById("nicknameModal");
 const nicknameInput = document.getElementById("nicknameInput");
 const nicknameConfirmBtn = document.getElementById("nicknameConfirmBtn");
-const nicknameEditBtn = document.getElementById("nicknameEditBtn");
+const chatIdentityRow = document.getElementById("chatIdentityRow");
+const changeNameBtn = document.getElementById("changeNameBtn");
 const currentNickname = document.getElementById("currentNickname");
 const clientId = Math.random().toString(36).slice(2);
@@ -130,7 +132,8 @@ function getIdentity() {
 }
 function updateNicknameLabel() {
   const existing = getIdentity();
-  currentNickname.textContent = existing ? existing.nickname : "未设置";
+  chatIdentityRow.hidden = !existing;
+  if (existing) currentNickname.textContent = existing.nickname;
 }
 // Shared by first-time setup and the always-visible "昵称 ✎" edit button.
@@ -167,7 +170,7 @@ function ensureIdentity() {
   });
 }
-nicknameEditBtn.addEventListener("click", async () => {
+changeNameBtn.addEventListener("click", async () => {
   const existing = getIdentity();
   const nickname = await openNicknameModal(existing ? existing.nickname : "");
   const uid = existing ? existing.uid : crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
@@ -176,6 +179,10 @@ nicknameEditBtn.addEventListener(&quot;click&quot;, async () =&gt; {
   updateNicknameLabel();
 });
+// First click into the chat box is what prompts for a nickname — not just
+// hitting send — so the identity row above the input appears right away.
+chatInput.addEventListener("focus", () => ensureIdentity());
+
 updateNicknameLabel();
 function renderBrowseList() {