610e6dcb91
* live comments: stable navigator for new outlined comments * favicons: FaviconProvider, handle new comments favicon via navigator * navigator keyboard shortcuts: arrow right/escape key * enhance: responsive fixed positioning; cleanup enhance: - two types of padding for desktop and mobile via CSS cleanup: - use appropriate <aside> for navigator - reorder CSS * Comments Navigator Context, new comments dot UI, refs autosorting, auto-untrack children - Navigator Context for item pages UI/UX - WIP: compact comments dot UI on navbars - long press to clear tracked refs - auto-untrack node's children on scroll Logic - auto-sort comment refs via createdAt - remove outline on untrack if called by scroll * stable navigator dot UI positioning * cleanup: better naming, clear structure * re-instate favicon state updates on navigator * CSS visibility tweaks * scroll to start position of ref * fix undefined navigator on other comment calls * add explanation for early favicon clear --------- Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com>
49 lines
1.3 KiB
JavaScript
49 lines
1.3 KiB
JavaScript
import { createContext, useContext, useMemo, useState } from 'react'
|
|
import { useHasNewNotes } from './use-has-new-notes'
|
|
import Head from 'next/head'
|
|
|
|
const FAVICONS = {
|
|
default: '/favicon.png',
|
|
notify: '/favicon-notify.png',
|
|
comments: '/favicon-comments.png',
|
|
notifyWithComments: '/favicon-notify-with-comments.png'
|
|
}
|
|
|
|
const getFavicon = (hasNewNotes, hasNewComments) => {
|
|
if (hasNewNotes && hasNewComments) return FAVICONS.notifyWithComments
|
|
if (hasNewNotes) return FAVICONS.notify
|
|
if (hasNewComments) return FAVICONS.comments
|
|
return FAVICONS.default
|
|
}
|
|
|
|
export const FaviconContext = createContext()
|
|
|
|
export default function FaviconProvider ({ children }) {
|
|
const hasNewNotes = useHasNewNotes()
|
|
const [hasNewComments, setHasNewComments] = useState(false)
|
|
|
|
const favicon = useMemo(() =>
|
|
getFavicon(hasNewNotes, hasNewComments),
|
|
[hasNewNotes, hasNewComments])
|
|
|
|
const contextValue = useMemo(() => ({
|
|
favicon,
|
|
hasNewNotes,
|
|
hasNewComments,
|
|
setHasNewComments
|
|
}), [favicon, hasNewNotes, hasNewComments, setHasNewComments])
|
|
|
|
return (
|
|
<FaviconContext.Provider value={contextValue}>
|
|
<Head>
|
|
<link rel='shortcut icon' href={favicon} />
|
|
</Head>
|
|
{children}
|
|
</FaviconContext.Provider>
|
|
)
|
|
}
|
|
|
|
export function useFavicon () {
|
|
return useContext(FaviconContext)
|
|
}
|