diff --git a/packages/userscript/src/page.ts b/packages/userscript/src/page.ts index 4044c60..fc85dbf 100644 --- a/packages/userscript/src/page.ts +++ b/packages/userscript/src/page.ts @@ -31,6 +31,10 @@ export function getPageAccessToken(): string | null { return unsafeWindow?.__NEXT_DATA__?.props?.pageProps?.accessToken ?? null } +export function getHistoryDisabled(): boolean { + return unsafeWindow?.__NEXT_DATA__?.props?.pageProps?.shouldDisableHistory ?? false +} + function getUserProfile() { const user = unsafeWindow?.__NEXT_DATA__?.props?.pageProps?.user if (!user) throw new Error('No user found.') diff --git a/packages/userscript/src/style.css b/packages/userscript/src/style.css index 07e45d8..4852d51 100644 --- a/packages/userscript/src/style.css +++ b/packages/userscript/src/style.css @@ -15,6 +15,15 @@ p > img[src*="https://images.unsplash.com/"] { user-select: all!important; } +.menu-item { + height: 46px; +} + +.menu-item[disabled] { + pointer-events: none; + filter: brightness(0.5); +} + .inputFieldSet { display: block; border-width: 2px; @@ -65,7 +74,11 @@ p > img[src*="https://images.unsplash.com/"] { height: 100%; } -#exporter-menu:hover::after { +#exporter-menu[disabled] { + cursor: not-allowed; +} + +#exporter-menu:not([disabled]):hover::after { content: ''; position: absolute; top: 1.2rem; @@ -79,13 +92,13 @@ p > img[src*="https://images.unsplash.com/"] { } @supports not selector(:has(.test:hover)) { - #exporter-menu:hover .dropdown-menu { + #exporter-menu:not([disabled]):hover .dropdown-menu { display: flex; } } @supports selector(:has(.test:hover)) { - #exporter-menu:not(:has(.dropdown-backdrop:hover)):hover .dropdown-menu { + #exporter-menu:not([disabled]):not(:has(.dropdown-backdrop:hover)):hover .dropdown-menu { display: flex; } } @@ -104,11 +117,11 @@ p > img[src*="https://images.unsplash.com/"] { } @supports selector(:has(.test:hover)) { - #exporter-menu:not(:has(.dropdown-backdrop:hover)):hover .dropdown-backdrop { + #exporter-menu:not([disabled]):not(:has(.dropdown-backdrop:hover)):hover .dropdown-backdrop { display: block; } - #exporter-menu:has(.dropdown-backdrop:hover):hover .dropdown-backdrop { + #exporter-menu:not([disabled]):has(.dropdown-backdrop:hover):hover .dropdown-backdrop { display: block; pointer-events: none; opacity: 0; diff --git a/packages/userscript/src/ui/MenuItem.tsx b/packages/userscript/src/ui/MenuItem.tsx index 0646cf3..e1c040c 100644 --- a/packages/userscript/src/ui/MenuItem.tsx +++ b/packages/userscript/src/ui/MenuItem.tsx @@ -8,10 +8,11 @@ export interface MenuItemProps { text: string icon?: FC successText?: string + disabled?: boolean onClick?: (() => boolean) | (() => Promise) } -export const MenuItem: FC = ({ text, successText, icon: Icon, onClick }) => { +export const MenuItem: FC = ({ text, successText, disabled = false, icon: Icon, onClick }) => { const [loading, setLoading] = useState(false) const [succeed, setSucceed] = useState(false) @@ -36,9 +37,9 @@ export const MenuItem: FC = ({ text, successText, icon: Icon, onC return (
{loading ? ( diff --git a/packages/userscript/src/ui/menu.tsx b/packages/userscript/src/ui/menu.tsx index dda7683..cde124f 100644 --- a/packages/userscript/src/ui/menu.tsx +++ b/packages/userscript/src/ui/menu.tsx @@ -11,6 +11,7 @@ import { exportToHtml } from '../exporter/html' import { useGMStorage } from '../useGMStorage' import { dateStr, timestamp } from '../utils/utils' import { getFileNameWithFormat } from '../utils/download' +import { getHistoryDisabled } from '../page' import { MenuItem } from './MenuItem' import { Divider } from './Divider' import { FileCode, IconArrowRightFromBracket, IconCamera, IconCopy, IconMarkdown, IconSetting } from './icons' @@ -77,6 +78,10 @@ const SettingDialog: FC<{ format: string; setFormat: (value: string) => void }> } export function Menu() { + const disabled = getHistoryDisabled() + const menuText = disabled ? 'Exporter unavailable' : 'Export' + const menuTitle = disabled ? 'Exporter is relying on the History API.\nBut History feature is disabled by OpenAI temporarily.\nWe all have to wait for them to bring it back.' : '' + const [format, setFormat] = useGMStorage(KEY, defaultFormat) const onClickText = useCallback(() => exportToText(), []) @@ -85,10 +90,11 @@ export function Menu() { const onClickHtml = useCallback(() => exportToHtml(format), [format]) return ( -
+