ScuttleBot
ui: make rich mode toggle visually obvious — blue highlight when active
Commit
54532dc75c078baa886df19d6dec6a1e13c44f9e1e74dfbc893d9a26c57157c2
Parent
87903ff1ce0ee7b…
1 file changed
+15
-5
+15
-5
| --- internal/api/ui/index.html | ||
| +++ internal/api/ui/index.html | ||
| @@ -2005,25 +2005,35 @@ | ||
| 2005 | 2005 | document.getElementById('chat-msgs').classList.add('columnar'); |
| 2006 | 2006 | } |
| 2007 | 2007 | |
| 2008 | 2008 | // --- rich mode toggle --- |
| 2009 | 2009 | function isRichMode() { return localStorage.getItem('sb_rich_mode') === '1'; } |
| 2010 | +function applyRichToggleStyle(btn, on) { | |
| 2011 | + if (on) { | |
| 2012 | + btn.style.background = '#1f6feb'; | |
| 2013 | + btn.style.borderColor = '#1f6feb'; | |
| 2014 | + btn.style.color = '#fff'; | |
| 2015 | + btn.title = 'rich mode ON — click for text only'; | |
| 2016 | + } else { | |
| 2017 | + btn.style.background = ''; | |
| 2018 | + btn.style.borderColor = ''; | |
| 2019 | + btn.style.color = '#8b949e'; | |
| 2020 | + btn.title = 'text only — click for rich mode'; | |
| 2021 | + } | |
| 2022 | +} | |
| 2010 | 2023 | function toggleRichMode() { |
| 2011 | 2024 | const on = !isRichMode(); |
| 2012 | 2025 | localStorage.setItem('sb_rich_mode', on ? '1' : '0'); |
| 2013 | 2026 | const btn = document.getElementById('chat-rich-toggle'); |
| 2014 | - btn.style.color = on ? '' : '#8b949e'; | |
| 2015 | - btn.title = on ? 'rich mode on — click for text only' : 'text only — click for rich mode'; | |
| 2027 | + applyRichToggleStyle(btn, on); | |
| 2016 | 2028 | // Toggle all existing meta blocks visibility. |
| 2017 | 2029 | document.querySelectorAll('.msg-meta-toggle').forEach(el => { el.style.display = on ? '' : 'none'; }); |
| 2018 | 2030 | if (!on) document.querySelectorAll('.msg-meta.open').forEach(el => el.classList.remove('open')); |
| 2019 | 2031 | } |
| 2020 | 2032 | // Initialize toggle button state on load. |
| 2021 | 2033 | (function() { |
| 2022 | - const btn = document.getElementById('chat-rich-toggle'); | |
| 2023 | - if (!isRichMode()) { btn.style.color = '#8b949e'; btn.title = 'text only — click for rich mode'; } | |
| 2024 | - else { btn.title = 'rich mode on — click for text only'; } | |
| 2034 | + applyRichToggleStyle(document.getElementById('chat-rich-toggle'), isRichMode()); | |
| 2025 | 2035 | })(); |
| 2026 | 2036 | |
| 2027 | 2037 | // --- meta renderers --- |
| 2028 | 2038 | function renderMeta(meta) { |
| 2029 | 2039 | if (!meta || !meta.type || !meta.data) return null; |
| 2030 | 2040 |
| --- internal/api/ui/index.html | |
| +++ internal/api/ui/index.html | |
| @@ -2005,25 +2005,35 @@ | |
| 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 toggleRichMode() { |
| 2011 | const on = !isRichMode(); |
| 2012 | localStorage.setItem('sb_rich_mode', on ? '1' : '0'); |
| 2013 | const btn = document.getElementById('chat-rich-toggle'); |
| 2014 | btn.style.color = on ? '' : '#8b949e'; |
| 2015 | btn.title = on ? 'rich mode on — click for text only' : 'text only — click for rich mode'; |
| 2016 | // Toggle all existing meta blocks visibility. |
| 2017 | document.querySelectorAll('.msg-meta-toggle').forEach(el => { el.style.display = on ? '' : 'none'; }); |
| 2018 | if (!on) document.querySelectorAll('.msg-meta.open').forEach(el => el.classList.remove('open')); |
| 2019 | } |
| 2020 | // Initialize toggle button state on load. |
| 2021 | (function() { |
| 2022 | const btn = document.getElementById('chat-rich-toggle'); |
| 2023 | if (!isRichMode()) { btn.style.color = '#8b949e'; btn.title = 'text only — click for rich mode'; } |
| 2024 | else { btn.title = 'rich mode on — click for text only'; } |
| 2025 | })(); |
| 2026 | |
| 2027 | // --- meta renderers --- |
| 2028 | function renderMeta(meta) { |
| 2029 | if (!meta || !meta.type || !meta.data) return null; |
| 2030 |
| --- internal/api/ui/index.html | |
| +++ internal/api/ui/index.html | |
| @@ -2005,25 +2005,35 @@ | |
| 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 | btn.style.background = '#1f6feb'; |
| 2013 | btn.style.borderColor = '#1f6feb'; |
| 2014 | btn.style.color = '#fff'; |
| 2015 | btn.title = 'rich mode ON — click for text only'; |
| 2016 | } else { |
| 2017 | btn.style.background = ''; |
| 2018 | btn.style.borderColor = ''; |
| 2019 | btn.style.color = '#8b949e'; |
| 2020 | btn.title = 'text only — click for rich mode'; |
| 2021 | } |
| 2022 | } |
| 2023 | function toggleRichMode() { |
| 2024 | const on = !isRichMode(); |
| 2025 | localStorage.setItem('sb_rich_mode', on ? '1' : '0'); |
| 2026 | const btn = document.getElementById('chat-rich-toggle'); |
| 2027 | applyRichToggleStyle(btn, on); |
| 2028 | // Toggle all existing meta blocks visibility. |
| 2029 | document.querySelectorAll('.msg-meta-toggle').forEach(el => { el.style.display = on ? '' : 'none'; }); |
| 2030 | if (!on) document.querySelectorAll('.msg-meta.open').forEach(el => el.classList.remove('open')); |
| 2031 | } |
| 2032 | // Initialize toggle button state on load. |
| 2033 | (function() { |
| 2034 | applyRichToggleStyle(document.getElementById('chat-rich-toggle'), isRichMode()); |
| 2035 | })(); |
| 2036 | |
| 2037 | // --- meta renderers --- |
| 2038 | function renderMeta(meta) { |
| 2039 | if (!meta || !meta.type || !meta.data) return null; |
| 2040 |