Skip to content

Commit 8355de6

Browse files
adamluiadamlui
committed
Updated sidebar toggle logic/styles to work w/ UI update + mobile again
1 parent 613d36a commit 8355de6

File tree

7 files changed

+108
-102
lines changed

7 files changed

+108
-102
lines changed

‎autoclear-chatgpt-history/greasemonkey/autoclear-chatgpt-history.user.js‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -225,7 +225,7 @@
225225
// @description:zu Ziba itshala lokucabanga okuzoshintshwa ngokuzenzakalelayo uma ukubuka chatgpt.com
226226
// @author Adam Lui
227227
// @namespace https://github.com/adamlui
228-
// @version 2025.4.28.1
228+
// @version 2025.4.28.2
229229
// @license MIT
230230
// @icon https://assets.autoclearchatgpt.com/images/icons/openai/black/icon48.png?v=f461c06
231231
// @icon64 https://assets.autoclearchatgpt.com/images/icons/openai/black/icon64.png?v=f461c06
@@ -793,6 +793,7 @@
793793
class: `${app.slug}-sidebar-toggle`,
794794

795795
create() {
796+
const firstLink = chatgpt.getNewChatLink()
796797

797798
// Init toggle elems
798799
this.div = dom.create.elem('div', { class: this.class })
@@ -808,11 +809,11 @@
808809

809810
// Stylize elems
810811
this.stylize() // create/append stylesheet
811-
if (env.ui.firstLink) { // borrow/assign classes from sidebar elems
812-
const firstIcon = env.ui.firstLink.querySelector('div:first-child'),
813-
firstLabel = env.ui.firstLink.querySelector('div:nth-child(2)')
812+
if (firstLink) { // borrow/assign classes from sidebar elems
813+
const firstIcon = firstLink.querySelector('div:first-child'),
814+
firstLabel = firstLink.querySelector('div:nth-child(2)')
814815
this.div.classList.add(
815-
...env.ui.firstLink.classList, ...(firstLabel?.classList || []))
816+
...firstLink.classList, ...(firstLabel?.classList || []))
816817
this.div.querySelector('img')?.classList.add(...(firstIcon?.classList || []))
817818
}
818819

@@ -830,13 +831,14 @@
830831
},
831832

832833
insert() {
833-
if (this.status?.startsWith('insert') || document.querySelector(`.${this.class}`)) return
834-
const sidebar = document.querySelectorAll('nav')[+env.browser.isMobile] ; if (!sidebar) return
834+
const sidebar = document.querySelector(chatgpt.selectors.sidebar)
835+
if (!sidebar || this.status?.startsWith('insert') || document.querySelector(`.${this.class}`)) return
835836
this.status = 'inserting' ; if (!this.div) this.create()
836-
sidebar.children[1].before(this.div) ; this.status = 'inserted'
837+
sidebar.querySelector('div#sidebar-header').after(this.div) ; this.status = 'inserted'
837838
},
838839

839840
stylize() {
841+
const firstLink = chatgpt.getNewChatLink()
840842
document.head.append(this.styles = dom.create.style(
841843
`:root { /* vars */
842844
--switch-enabled-bg-color: #ad68ff ; --switch-disabled-bg-color: #ccc ;
@@ -849,15 +851,16 @@
849851
+ `.${this.class} { /* parent div */
850852
max-height: 37px ; margin: 2px 0 ; user-select: none ; cursor: pointer ;
851853
opacity: 1 !important ; /* overcome OpenAI click-dim */
854+
justify-content: unset ; /* overcome OpenAI .justify-center */
852855
flex-grow: unset } /* overcome OpenAI .grow */
853856
.${this.class} > img { /* navicon */
854857
width: 1.25rem ; height: 1.25rem ; margin-left: 2px ; margin-right: 4px }
855858
.${this.class} > input { display: none } /* hide checkbox */
856859
.${this.class} > span { /* switch span */
857860
position: relative ; width: 30px ; height: 15px ; border-radius: 28px ;
858861
background-color: var(--switch-disabled-bg-color) ;
859-
bottom: ${ env.ui.firstLink ? 0 : -0.15 }em ;
860-
left: ${ env.browser.isMobile ? 169 : env.ui.firstLink ? 154 : 160 }px ;
862+
bottom: ${ firstLink ? '0.5px' : '-0.15em' } ;
863+
left: ${ env.browser.isMobile || firstLink ? 169 : 160 }px ;
861864
transition: 0.4s ; -webkit-transition: 0.4s ; -moz-transition: 0.4s ;
862865
-o-transition: 0.4s ; -ms-transition: 0.4s }
863866
.${this.class} > span.enabled { /* switch on */
@@ -881,10 +884,9 @@
881884
transition: 0.4s ; -webkit-transition: 0.4s ; -moz-transition: 0.4s ;
882885
-o-transition: 0.4s ; -ms-transition: 0.4s }
883886
.${this.class} > label { /* toggle label */
884-
cursor: pointer ; overflow: hidden ; text-overflow: ellipsis ;
885-
width: ${ env.browser.isMobile ? 201 : 148 }px ;
886-
margin-left: -${ env.ui.firstLink ? 41 : 23 }px ; /* left-shift to navicon */
887-
${ env.ui.firstLink ? '' : 'font-size: 0.875rem ; font-weight: 600' }}`
887+
cursor: pointer ; overflow: hidden ; text-overflow: ellipsis ; white-space: nowrap ;
888+
color: black ; width: 153px ; margin-left: -22px ;
889+
${ firstLink ? 'font-size: var(--text-sm)' : 'font-size: 0.875rem ; font-weight: 600' }}`
888890

889891
// Dark scheme mods
890892
+ `.${this.class}.dark > span.enabled { /* switch on */
@@ -899,7 +901,8 @@
899901
.${this.class}.dark > span > span { /* knob span */
900902
box-shadow: var(--knob-box-shadow-dark) ; /* make 3D-er */
901903
-webkit-box-shadow: var(--knob-box-shadow-dark) ;
902-
-moz-box-shadow: var(--knob-box-shadow-dark) }`
904+
-moz-box-shadow: var(--knob-box-shadow-dark) }
905+
.${this.class}.dark > label { color: white } /* toggle label */`
903906
))
904907
},
905908

@@ -944,9 +947,7 @@
944947
toggles.sidebar.update.navicon({ preload: true }) // preload sidebar NAVICON variants
945948

946949
// Init UI props
947-
await Promise.race([chatgpt.isLoaded(), new Promise(resolve => setTimeout(resolve, 5000))]) // initial UI loaded
948-
await chatgpt.sidebar.isLoaded()
949-
env.ui.firstLink = chatgpt.getNewChatLink();
950+
await Promise.race([chatgpt.isLoaded(), new Promise(resolve => setTimeout(resolve, 5000))]); // initial UI loaded
950951

951952
// Add RISING PARTICLES styles
952953
['rpg', 'rpw'].forEach(cssType => document.head.append(dom.create.style(GM_getResourceText(`${cssType}CSS`))))
@@ -958,9 +959,10 @@
958959

959960
// Monitor NODE CHANGES to maintain sidebar toggle visibility
960961
new MutationObserver(() => {
961-
if (!config.toggleHidden && !document.querySelector(`.${toggles.sidebar.class}`)
962-
&& toggles.sidebar.status != 'inserting') {
963-
toggles.sidebar.status = 'missing' ; toggles.sidebar.insert() }
962+
if (!config.toggleHidden && document.querySelector(chatgpt.selectors.sidebar)
963+
&& !document.querySelector(`.${toggles.sidebar.class}`)
964+
&& toggles.sidebar.status != 'inserting'
965+
) { toggles.sidebar.status = 'missing' ; toggles.sidebar.insert() }
964966
}).observe(document.body, { attributes: true, subtree: true })
965967

966968
// Monitor SCHEME PREF changes to update sidebar toggle + modal colors

‎chatgpt-auto-refresh/greasemonkey/chatgpt-auto-refresh.user.js‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -220,7 +220,7 @@
220220
// @description:zu *NGOKUPHEPHA* susa ukusetha kabusha ingxoxo yemizuzu eyi-10 + amaphutha enethiwekhi ahlala njalo + Ukuhlolwa kwe-Cloudflare ku-ChatGPT.
221221
// @author Adam Lui
222222
// @namespace https://github.com/adamlui
223-
// @version 2025.4.28.1
223+
// @version 2025.4.28.2
224224
// @license MIT
225225
// @icon https://assets.chatgptautorefresh.com/images/icons/openai/black/icon48.png?v=f11a0a8
226226
// @icon64 https://assets.chatgptautorefresh.com/images/icons/openai/black/icon64.png?v=f11a0a8
@@ -791,6 +791,7 @@
791791
class: `${app.slug}-sidebar-toggle`,
792792

793793
create() {
794+
const firstLink = chatgpt.getNewChatLink()
794795

795796
// Init toggle elems
796797
this.div = dom.create.elem('div', { class: this.class })
@@ -806,11 +807,11 @@
806807

807808
// Stylize elems
808809
this.stylize() // create/append stylesheet
809-
if (env.ui.firstLink) { // borrow/assign classes from sidebar elems
810-
const firstIcon = env.ui.firstLink.querySelector('div:first-child'),
811-
firstLabel = env.ui.firstLink.querySelector('div:nth-child(2)')
810+
if (firstLink) { // borrow/assign classes from sidebar elems
811+
const firstIcon = firstLink.querySelector('div:first-child'),
812+
firstLabel = firstLink.querySelector('div:nth-child(2)')
812813
this.div.classList.add(
813-
...env.ui.firstLink.classList, ...(firstLabel?.classList || []))
814+
...firstLink.classList, ...(firstLabel?.classList || []))
814815
this.div.querySelector('img')?.classList.add(...(firstIcon?.classList || []))
815816
}
816817

@@ -828,6 +829,7 @@
828829
},
829830

830831
stylize() {
832+
const firstLink = chatgpt.getNewChatLink()
831833
document.head.append(this.styles = dom.create.style(
832834
`:root { /* vars */
833835
--switch-enabled-bg-color: #ad68ff ; --switch-disabled-bg-color: #ccc ;
@@ -840,15 +842,16 @@
840842
+ `.${this.class} { /* parent div */
841843
max-height: 37px ; margin: 2px 0 ; user-select: none ; cursor: pointer ;
842844
opacity: 1 !important ; /* overcome OpenAI click-dim */
845+
justify-content: unset ; /* overcome OpenAI .justify-center */
843846
flex-grow: unset } /* overcome OpenAI .grow */
844847
.${this.class} > img { /* navicon */
845848
width: 1.25rem ; height: 1.25rem ; margin-left: 2px ; margin-right: 4px }
846849
.${this.class} > input { display: none } /* hide checkbox */
847850
.${this.class} > span { /* switch span */
848851
position: relative ; width: 30px ; height: 15px ; border-radius: 28px ;
849852
background-color: var(--switch-disabled-bg-color) ;
850-
bottom: ${ env.ui.firstLink ? 0 : -0.15 }em ;
851-
left: ${ env.browser.isMobile ? 169 : env.ui.firstLink ? 154 : 160 }px ;
853+
bottom: ${ firstLink ? '0.5px' : '-0.15em' } ;
854+
left: ${ env.browser.isMobile || firstLink ? 169 : 160 }px ;
852855
transition: 0.4s ; -webkit-transition: 0.4s ; -moz-transition: 0.4s ;
853856
-o-transition: 0.4s ; -ms-transition: 0.4s }
854857
.${this.class} > span.enabled { /* switch on */
@@ -872,10 +875,9 @@
872875
transition: 0.4s ; -webkit-transition: 0.4s ; -moz-transition: 0.4s ;
873876
-o-transition: 0.4s ; -ms-transition: 0.4s }
874877
.${this.class} > label { /* toggle label */
875-
cursor: pointer ; overflow: hidden ; text-overflow: ellipsis ;
876-
width: ${ env.browser.isMobile ? 201 : 148 }px ;
877-
margin-left: -${ env.ui.firstLink ? 41 : 23 }px ; /* left-shift to navicon */
878-
${ env.ui.firstLink ? '' : 'font-size: 0.875rem ; font-weight: 600' }}`
878+
cursor: pointer ; overflow: hidden ; text-overflow: ellipsis ; white-space: nowrap ;
879+
color: black ; width: 153px ; margin-left: -22px ;
880+
${ firstLink ? 'font-size: var(--text-sm)' : 'font-size: 0.875rem ; font-weight: 600' }}`
879881

880882
// Dark scheme mods
881883
+ `.${this.class}.dark > span.enabled { /* switch on */
@@ -890,15 +892,16 @@
890892
.${this.class}.dark > span > span { /* knob span */
891893
box-shadow: var(--knob-box-shadow-dark) ; /* make 3D-er */
892894
-webkit-box-shadow: var(--knob-box-shadow-dark) ;
893-
-moz-box-shadow: var(--knob-box-shadow-dark) }`
895+
-moz-box-shadow: var(--knob-box-shadow-dark) }
896+
.${this.class}.dark > label { color: white } /* toggle label */`
894897
))
895898
},
896899

897900
insert() {
898-
if (this.status?.startsWith('insert') || document.querySelector(`.${this.class}`)) return
899-
const sidebar = document.querySelectorAll('nav')[+env.browser.isMobile] ; if (!sidebar) return
901+
const sidebar = document.querySelector(chatgpt.selectors.sidebar)
902+
if (!sidebar || this.status?.startsWith('insert') || document.querySelector(`.${this.class}`)) return
900903
this.status = 'inserting' ; if (!this.div) this.create()
901-
sidebar.children[1].before(this.div) ; this.status = 'inserted'
904+
sidebar.querySelector('div#sidebar-header').after(this.div) ; this.status = 'inserted'
902905
},
903906

904907
update: {
@@ -951,9 +954,7 @@
951954
toggles.sidebar.update.navicon({ preload: true }) // preload sidebar NAVICON variants
952955

953956
// Init UI props
954-
await Promise.race([chatgpt.isLoaded(), new Promise(resolve => setTimeout(resolve, 5000))]) // initial UI loaded
955-
await chatgpt.sidebar.isLoaded()
956-
env.ui.firstLink = chatgpt.getNewChatLink();
957+
await Promise.race([chatgpt.isLoaded(), new Promise(resolve => setTimeout(resolve, 5000))]); // initial UI loaded
957958

958959
// Add RISING PARTICLES styles
959960
['rpg', 'rpw'].forEach(cssType => document.head.append(dom.create.style(GM_getResourceText(`${cssType}CSS`))))
@@ -984,9 +985,10 @@
984985

985986
// Monitor NODE CHANGES to maintain sidebar toggle visibility
986987
new MutationObserver(() => {
987-
if (!config.toggleHidden && !document.querySelector(`.${toggles.sidebar.class}`)
988-
&& toggles.sidebar.status != 'inserting') {
989-
toggles.sidebar.status = 'missing' ; toggles.sidebar.insert() }
988+
if (!config.toggleHidden && document.querySelector(chatgpt.selectors.sidebar)
989+
&& !document.querySelector(`.${toggles.sidebar.class}`)
990+
&& toggles.sidebar.status != 'inserting'
991+
) { toggles.sidebar.status = 'missing' ; toggles.sidebar.insert() }
990992
}).observe(document.body, { attributes: true, subtree: true })
991993

992994
// Monitor SCHEME PREF changes to update sidebar toggle + modal colors

0 commit comments

Comments
 (0)