add mobile count
Kim committed
Oct 22, 2025 at 14:05 UTC
0015a6ddfc61378b249af6c7ba26268a797b10ad
1 file changed
+27
-11
cmd/example_chat/view.go
+27
-11
@@ -275,6 +275,8 @@ var indexTmpl = template.Must(template.New("chat").Parse(`<!DOCTYPE html>
275
h1 { margin:0 0 12px 0; font-weight:700 }
276
.term { border:1px solid var(--border); border-radius:10px; background:var(--panel); overflow:hidden; position: relative }
277
.termbar { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border); font-family: 'D2Coding', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:14px }
278
+ .termbar-left { display:flex; align-items:center; gap:8px }
279
+ .termbar-center { flex:1 1 auto; display:flex; justify-content:center }
280
.term-actions { display:flex; align-items:center; gap:8px }
281
.dots { display:flex; gap:6px }
282
.dot { width:10px; height:10px; border-radius:50%; }
@@ -292,7 +294,7 @@ var indexTmpl = template.Must(template.New("chat").Parse(`<!DOCTYPE html>
294
.event .usr { color: var(--muted) }
295
.promptline { display:flex; align-items:center; gap:8px; padding:12px 14px; border-top:1px solid var(--border); font-family: 'D2Coding', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
296
#prompt { color:var(--accent) }
295
- #cmd { flex:1; background:transparent; border:none; outline:none; color:var(--fg); font-family: inherit; font-size:14px; caret-color: var(--cursor) }
297
+ #cmd { flex:1 1 auto; min-width:0; background:transparent; border:none; outline:none; color:var(--fg); font-family: inherit; font-size:14px; caret-color: var(--cursor) }
298
small{ color:var(--muted); display:block; margin-top:10px }
299
300
/* Scrollbar styling for log and users list */
@@ -309,11 +311,15 @@ var indexTmpl = template.Must(template.New("chat").Parse(`<!DOCTYPE html>
311
.wrap { max-width: 100%; }
312
h1 { font-size: 18px; }
313
.termbar { flex-wrap: wrap; gap: 8px; }
314
+ .termbar-center { order: 2; width: 100%; justify-content: center; }
315
+ .promptline { flex-direction: column; align-items: stretch; gap: 10px; }
316
+ #prompt { order: 1; }
317
+ #cmd { order: 2; font-size: 16px; }
318
+ .nick { order: 3; width: 100%; }
319
.nick input { width: 100%; font-size: 16px; }
320
.nick button { font-size: 16px; }
321
.screen { height: 50vh; font-size: 13px; }
315
- .promptline { flex-wrap: wrap; gap: 6px; }
316
- #cmd { font-size: 16px; }
322
+ .promptline { flex-wrap: nowrap; }
323
}
324
</style>
325
</head>
@@ -322,18 +328,22 @@ var indexTmpl = template.Must(template.New("chat").Parse(`<!DOCTYPE html>
328
<h1>🔐 Chatting — {{.Name}}</h1>
329
<div class="term">
330
<div class="termbar">
325
- <div class="dots"><span class="dot red"></span><span class="dot yellow"></span><span class="dot green"></span></div>
331
+ <div class="termbar-left">
332
+ <div class="dots"><span class="dot red"></span><span class="dot yellow"></span><span class="dot green"></span></div>
333
+ </div>
334
+ <div class="termbar-center">
335
+ <div class="nick">
336
+ <label for="user" style="color:var(--muted)">nickname</label>
337
+ <input id="user" type="text" placeholder="anon" />
338
+ <button id="roll" title="randomize nickname">🎲</button>
339
+ </div>
340
+ </div>
341
<div class="term-actions"><span class="userspill">Users <span id="users-count">0</span></span></div>
342
</div>
343
<div id="log" class="screen"></div>
344
<div class="promptline">
345
<span id="prompt"></span>
331
- <input id="cmd" type="text" autocomplete="off" spellcheck="false" placeholder="type a message and press Enter" />
332
- <div class="nick" style="margin-left:auto">
333
- <label for="user" style="color:var(--muted)">nick</label>
334
- <input id="user" type="text" placeholder="anon" />
335
- <button id="roll" title="randomize nickname">🎲</button>
336
- </div>
346
+ <input id="cmd" type="text" autocomplete="off" spellcheck="false" placeholder="type a message and press Enter" enterkeyhint="send" inputmode="text" />
347
</div>
348
</div>
349
<small>Tip: Enter to send • Nickname persists locally</small>
@@ -460,7 +470,13 @@ var indexTmpl = template.Must(template.New("chat").Parse(`<!DOCTYPE html>
470
// on Enter when using Korean/Japanese/Chinese input methods.
471
cmd.addEventListener('keydown', e => {
472
if (e.isComposing || e.keyCode === 229) { return; }
463
- if (e.key === 'Enter') { e.preventDefault(); send(); }
473
+ if (e.key === 'Enter') {
474
+ e.preventDefault();
475
+ e.stopPropagation();
476
+ send();
477
+ // Ensure focus stays on the message input on mobile
478
+ setTimeout(() => cmd.focus(), 0);
479
+ }
480
});
481
// Focus command line on load
482
setTimeout(()=>cmd.focus(), 0);