ScuttleBot

ui: add 🕐 timestamp toggle to hide/show timestamps in chat

lmata 2026-04-04 05:31 trunk
Commit d60d7a6a8ef98d2028c6b26277296bef0f46633ab54d44b625ceea316a7c3461
Parent 54532dc75c078ba…
1 file changed +19
~ internal/api/ui/index.html
M internal/api/ui/index.html
+19
--- internal/api/ui/index.html
+++ internal/api/ui/index.html
@@ -142,10 +142,11 @@
142142
 .chat-ch-name { font-weight:600; color:#58a6ff; }
143143
 .stream-badge { font-size:11px; color:#8b949e; margin-left:auto; }
144144
 .chat-msgs { flex:1; overflow-y:auto; padding:4px 8px; display:flex; flex-direction:column; gap:0; }
145145
 .msg-row { font-size:13px; line-height:1.4; padding:1px 0; }
146146
 .msg-time { color:#8b949e; font-size:11px; margin-right:6px; }
147
+.chat-msgs.hide-timestamps .msg-time { display:none; }
147148
 .msg-nick { font-weight:600; margin-right:6px; }
148149
 .msg-grouped .msg-nick { display:none; }
149150
 .msg-grouped .msg-time { display:none; }
150151
 /* columnar layout mode */
151152
 .chat-msgs.columnar .msg-row { display:flex; gap:6px; }
@@ -510,10 +511,11 @@
510511
 <span style="font-size:11px;color:#8b949e;margin-right:6px">chatting as</span>
511512
 <select id="chat-identity" style="width:140px;padding:3px 6px;font-size:12px" onchange="saveChatIdentity()">
512513
 <option value="">— pick a user —</option>
513514
 </select>
514515
 <button class="sm" id="chat-layout-toggle" onclick="toggleChatLayout()" title="toggle compact/columnar" style="font-size:11px;padding:2px 6px">☰</button>
516
+ <button class="sm" id="chat-ts-toggle" onclick="toggleTimestamps()" title="toggle timestamps" style="font-size:11px;padding:2px 6px">🕐</button>
515517
 <button class="sm" id="chat-rich-toggle" onclick="toggleRichMode()" title="toggle rich/text mode" style="font-size:11px;padding:2px 6px">✨</button>
516518
 <button class="sm" onclick="promptHighlightWords()" title="configure highlight keywords" style="font-size:11px;padding:2px 6px">✦</button>
517519
 <span class="stream-badge" id="chat-stream-status" style="margin-left:8px"></span>
518520
 </div>
519521
 <div class="chat-msgs" id="chat-msgs">
@@ -2002,10 +2004,27 @@
20022004
 }
20032005
 // Restore layout preference on load.
20042006
 if (localStorage.getItem('sb_chat_columnar') === '1') {
20052007
 document.getElementById('chat-msgs').classList.add('columnar');
20062008
 }
2009
+
2010
+// --- timestamp toggle ---
2011
+function toggleTimestamps() {
2012
+ const el = document.getElementById('chat-msgs');
2013
+ const hidden = el.classList.toggle('hide-timestamps');
2014
+ localStorage.setItem('sb_hide_timestamps', hidden ? '1' : '0');
2015
+ const btn = document.getElementById('chat-ts-toggle');
2016
+ btn.style.color = hidden ? '#8b949e' : '';
2017
+ btn.title = hidden ? 'timestamps hidden — click to show' : 'timestamps shown — click to hide';
2018
+}
2019
+(function() {
2020
+ const hidden = localStorage.getItem('sb_hide_timestamps') === '1';
2021
+ if (hidden) document.getElementById('chat-msgs').classList.add('hide-timestamps');
2022
+ const btn = document.getElementById('chat-ts-toggle');
2023
+ if (hidden) { btn.style.color = '#8b949e'; btn.title = 'timestamps hidden — click to show'; }
2024
+ else { btn.title = 'timestamps shown — click to hide'; }
2025
+})();
20072026
20082027
 // --- rich mode toggle ---
20092028
 function isRichMode() { return localStorage.getItem('sb_rich_mode') === '1'; }
20102029
 function applyRichToggleStyle(btn, on) {
20112030
 if (on) {
20122031
--- internal/api/ui/index.html
+++ internal/api/ui/index.html
@@ -142,10 +142,11 @@
142 .chat-ch-name { font-weight:600; color:#58a6ff; }
143 .stream-badge { font-size:11px; color:#8b949e; margin-left:auto; }
144 .chat-msgs { flex:1; overflow-y:auto; padding:4px 8px; display:flex; flex-direction:column; gap:0; }
145 .msg-row { font-size:13px; line-height:1.4; padding:1px 0; }
146 .msg-time { color:#8b949e; font-size:11px; margin-right:6px; }
 
147 .msg-nick { font-weight:600; margin-right:6px; }
148 .msg-grouped .msg-nick { display:none; }
149 .msg-grouped .msg-time { display:none; }
150 /* columnar layout mode */
151 .chat-msgs.columnar .msg-row { display:flex; gap:6px; }
@@ -510,10 +511,11 @@
510 <span style="font-size:11px;color:#8b949e;margin-right:6px">chatting as</span>
511 <select id="chat-identity" style="width:140px;padding:3px 6px;font-size:12px" onchange="saveChatIdentity()">
512 <option value="">— pick a user —</option>
513 </select>
514 <button class="sm" id="chat-layout-toggle" onclick="toggleChatLayout()" title="toggle compact/columnar" style="font-size:11px;padding:2px 6px">☰</button>
 
515 <button class="sm" id="chat-rich-toggle" onclick="toggleRichMode()" title="toggle rich/text mode" style="font-size:11px;padding:2px 6px">✨</button>
516 <button class="sm" onclick="promptHighlightWords()" title="configure highlight keywords" style="font-size:11px;padding:2px 6px">✦</button>
517 <span class="stream-badge" id="chat-stream-status" style="margin-left:8px"></span>
518 </div>
519 <div class="chat-msgs" id="chat-msgs">
@@ -2002,10 +2004,27 @@
2002 }
2003 // Restore layout preference on load.
2004 if (localStorage.getItem('sb_chat_columnar') === '1') {
2005 document.getElementById('chat-msgs').classList.add('columnar');
2006 }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2007
2008 // --- rich mode toggle ---
2009 function isRichMode() { return localStorage.getItem('sb_rich_mode') === '1'; }
2010 function applyRichToggleStyle(btn, on) {
2011 if (on) {
2012
--- internal/api/ui/index.html
+++ internal/api/ui/index.html
@@ -142,10 +142,11 @@
142 .chat-ch-name { font-weight:600; color:#58a6ff; }
143 .stream-badge { font-size:11px; color:#8b949e; margin-left:auto; }
144 .chat-msgs { flex:1; overflow-y:auto; padding:4px 8px; display:flex; flex-direction:column; gap:0; }
145 .msg-row { font-size:13px; line-height:1.4; padding:1px 0; }
146 .msg-time { color:#8b949e; font-size:11px; margin-right:6px; }
147 .chat-msgs.hide-timestamps .msg-time { display:none; }
148 .msg-nick { font-weight:600; margin-right:6px; }
149 .msg-grouped .msg-nick { display:none; }
150 .msg-grouped .msg-time { display:none; }
151 /* columnar layout mode */
152 .chat-msgs.columnar .msg-row { display:flex; gap:6px; }
@@ -510,10 +511,11 @@
511 <span style="font-size:11px;color:#8b949e;margin-right:6px">chatting as</span>
512 <select id="chat-identity" style="width:140px;padding:3px 6px;font-size:12px" onchange="saveChatIdentity()">
513 <option value="">— pick a user —</option>
514 </select>
515 <button class="sm" id="chat-layout-toggle" onclick="toggleChatLayout()" title="toggle compact/columnar" style="font-size:11px;padding:2px 6px">☰</button>
516 <button class="sm" id="chat-ts-toggle" onclick="toggleTimestamps()" title="toggle timestamps" style="font-size:11px;padding:2px 6px">🕐</button>
517 <button class="sm" id="chat-rich-toggle" onclick="toggleRichMode()" title="toggle rich/text mode" style="font-size:11px;padding:2px 6px">✨</button>
518 <button class="sm" onclick="promptHighlightWords()" title="configure highlight keywords" style="font-size:11px;padding:2px 6px">✦</button>
519 <span class="stream-badge" id="chat-stream-status" style="margin-left:8px"></span>
520 </div>
521 <div class="chat-msgs" id="chat-msgs">
@@ -2002,10 +2004,27 @@
2004 }
2005 // Restore layout preference on load.
2006 if (localStorage.getItem('sb_chat_columnar') === '1') {
2007 document.getElementById('chat-msgs').classList.add('columnar');
2008 }
2009
2010 // --- timestamp toggle ---
2011 function toggleTimestamps() {
2012 const el = document.getElementById('chat-msgs');
2013 const hidden = el.classList.toggle('hide-timestamps');
2014 localStorage.setItem('sb_hide_timestamps', hidden ? '1' : '0');
2015 const btn = document.getElementById('chat-ts-toggle');
2016 btn.style.color = hidden ? '#8b949e' : '';
2017 btn.title = hidden ? 'timestamps hidden — click to show' : 'timestamps shown — click to hide';
2018 }
2019 (function() {
2020 const hidden = localStorage.getItem('sb_hide_timestamps') === '1';
2021 if (hidden) document.getElementById('chat-msgs').classList.add('hide-timestamps');
2022 const btn = document.getElementById('chat-ts-toggle');
2023 if (hidden) { btn.style.color = '#8b949e'; btn.title = 'timestamps hidden — click to show'; }
2024 else { btn.title = 'timestamps shown — click to hide'; }
2025 })();
2026
2027 // --- rich mode toggle ---
2028 function isRichMode() { return localStorage.getItem('sb_rich_mode') === '1'; }
2029 function applyRichToggleStyle(btn, on) {
2030 if (on) {
2031

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button