52 lines
1.9 KiB
TypeScript
52 lines
1.9 KiB
TypeScript
import { compareSemVersions } from '@standardnotes/snjs'
|
|
import { keyboardStringForShortcut, OPEN_PREFERENCES_COMMAND } from '@standardnotes/ui-services'
|
|
import { useCallback, useEffect, useMemo, useState } from 'react'
|
|
import { useApplication } from '../ApplicationProvider'
|
|
import { useCommandService } from '../CommandProvider'
|
|
import Icon from '../Icon/Icon'
|
|
import StyledTooltip from '../StyledTooltip/StyledTooltip'
|
|
|
|
type Props = {
|
|
openPreferences: (openWhatsNew: boolean) => void
|
|
}
|
|
|
|
const PreferencesButton = ({ openPreferences }: Props) => {
|
|
const application = useApplication()
|
|
|
|
const commandService = useCommandService()
|
|
const shortcut = useMemo(
|
|
() => keyboardStringForShortcut(commandService.keyboardShortcutForCommand(OPEN_PREFERENCES_COMMAND)),
|
|
[commandService],
|
|
)
|
|
|
|
const [changelogLastReadVersion, setChangelogLastReadVersion] = useState(() =>
|
|
application.changelogService.getLastReadVersion(),
|
|
)
|
|
const isChangelogUnread = useMemo(() => {
|
|
return changelogLastReadVersion && !application.isNativeMobileWeb()
|
|
? compareSemVersions(application.version, changelogLastReadVersion) > 0
|
|
: false
|
|
}, [application, changelogLastReadVersion])
|
|
useEffect(
|
|
() => application.changelogService.addLastReadChangeListener(setChangelogLastReadVersion),
|
|
[application.changelogService],
|
|
)
|
|
|
|
const onClick = useCallback(() => {
|
|
openPreferences(isChangelogUnread)
|
|
}, [isChangelogUnread, openPreferences])
|
|
|
|
return (
|
|
<StyledTooltip label={`Open preferences (${shortcut})`}>
|
|
<button onClick={onClick} className="relative flex h-full w-8 cursor-pointer items-center justify-center">
|
|
<div className="h-5">
|
|
<Icon type="tune" className="rounded hover:text-info" />
|
|
</div>
|
|
{isChangelogUnread && <div className="absolute right-0.5 top-0.5 h-2 w-2 rounded-full bg-info" />}
|
|
</button>
|
|
</StyledTooltip>
|
|
)
|
|
}
|
|
|
|
export default PreferencesButton
|