fix: adapt to chatgpt new sidebar

closes #352

src/main.tsx

@@ -19,46 +19,34 @@ function main() {
         styleEl.id = 'sentinel-css'
         document.head.append(styleEl)
 
-        const injectionMap = new Map<HTMLElement, HTMLElement>()
+        const injectionMap = new Map<Element, Element>()
+
+        const injectNavMenu = (target: Element) => {
+            if (injectionMap.has(target)) return
 
-        const injectNavMenu = (nav: HTMLElement) => {
-            if (injectionMap.has(nav)) return
             // eslint-disable-next-line no-console
-            console.log('[Exporter] Injecting nav', nav)
+            console.log('[Exporter] Injecting nav', target)
 
             const container = getMenuContainer()
-            injectionMap.set(nav, container)
+            injectionMap.set(target, container)
-
+            target.before(container)
-            const chatList = nav.querySelector(':scope > div.sticky.bottom-0')
-            if (chatList) {
-                chatList.prepend(container)
-                // eslint-disable-next-line no-console
-                console.log('[Exporter] Prepended container to chat list', chatList)
-            }
-            else {
-                // fallback to the bottom of the nav
-                container.style.backgroundColor = '#171717'
-                container.style.position = 'sticky'
-                container.style.bottom = '72px'
-                nav.append(container)
-                // eslint-disable-next-line no-console
-                console.log('[Exporter] Fallback to appending container to nav', nav)
-            }
         }
 
-        sentinel.on('nav', injectNavMenu)
+        const selector = '[data-testid="accounts-profile-button"]'
+
+        sentinel.on('selector', injectNavMenu)
 
         setInterval(() => {
-            injectionMap.forEach((container, nav) => {
+            injectionMap.forEach((container, target) => {
-                if (!nav.isConnected) {
+                if (!target.isConnected) {
                     container.remove()
-                    injectionMap.delete(nav)
+                    injectionMap.delete(target)
                 }
             })
 
-            const navList = Array.from(document.querySelectorAll('nav')).filter(nav => !injectionMap.has(nav))
+            const targets = Array.from(document.querySelectorAll(selector)).filter(target => !injectionMap.has(target))
-            navList.forEach(injectNavMenu)
+            targets.forEach(injectNavMenu)
-        }, 300)
+        }, 1000)
 
         // Support for share page
         if (isSharePage()) {

src/style.css

@@ -36,14 +36,6 @@ html {
     --ce-menu-secondary: var(--sidebar-surface-secondary, #212121);
 }
 
-.text-menu {
-    color: var(--ce-text-primary);
-}
-
-.bg-menu {
-    background-color: var(--ce-menu-primary);
-}
-
 .border-menu {
     border-color: var(--ce-border-light);
 }

src/ui/Dialog.css

@@ -244,7 +244,7 @@
     color: #6b7280;
     font-weight: 600;
 }
-@media (prefers-color-scheme: dark) {
+.dark {
     .SelectItemMetaActive { color: #d1d5db; }
 }
 
@@ -258,9 +258,11 @@
     background: #f9fafb;
     user-select: none;
 }
-@media (prefers-color-scheme: dark) {
+
+.dark {
     .SelectListHeader { background: #1f2937; }
 }
+
 .SelectListHeaderCell {
     flex-shrink: 0;
     font-size: 0.68rem;
@@ -277,7 +279,7 @@
     text-align: right;
 }
 .SelectListHeaderCell:hover { color: #374151; }
-@media (prefers-color-scheme: dark) {
+.dark {
     .SelectListHeaderCell:hover { color: #e5e7eb; }
 }
 .SelectListHeaderCellTitle {
@@ -288,7 +290,7 @@
 .SelectListHeaderCellActive {
     color: #2563eb;
 }
-@media (prefers-color-scheme: dark) {
+.dark {
     .SelectListHeaderCellActive { color: #60a5fa; }
 }
 

src/ui/Menu.tsx

@@ -91,7 +91,7 @@ function MenuInner({ container }: { container: HTMLDivElement }) {
             >
                 <HoverCard.Trigger>
                     <MenuItem
-                        className="mt-1"
+                        className="border-0 ms-2 me-1.5"
                         text={t('ExportHelper')}
                         icon={IconArrowRightFromBracket}
                         onClick={() => {
@@ -213,7 +213,7 @@ function MenuInner({ container }: { container: HTMLDivElement }) {
                                 width="16"
                                 height="8"
                                 style={{
-                                    'fill': 'var(--ce-menu-primary)',
+                                    'fill': 'var(--ce-menu-secondary)',
                                     'stroke': 'var(--ce-border-light)',
                                     'stoke-width': '2px',
                                 }}

src/ui/MenuItem.tsx

@@ -44,10 +44,9 @@ export const MenuItem: FC<MenuItemProps> = ({ text, successText, disabled = fals
         <div
             className={`
             menu-item
-            flex flex-shrink-0 py-3 px-3 items-center gap-3 rounded-lg mb-2
+            __menu-item hoverable
-            bg-menu hover:bg-gray-500/10
+            flex flex-shrink-0 py-3 px-4 items-center gap-3 rounded-lg mb-2
             transition-colors duration-200
-            text-menu text-sm
             cursor-pointer
             border border-menu ${className}`}
             onClick={handleClick}