diff --git a/packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx b/packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx index 48c486a44..eb1724bba 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx @@ -4,7 +4,7 @@ import { LibraryItemNode } from '../../../lib/networking/queries/useGetLibraryIt import { LinkedItemCardAction } from './CardTypes' import { Button } from '../../elements/Button' import { theme } from '../../tokens/stitches.config' -import { DotsThree } from 'phosphor-react' +import { DotsThree, Share } from 'phosphor-react' import { CardMenu } from '../CardMenu' import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery' import { ArchiveIcon } from '../../elements/icons/ArchiveIcon' @@ -31,7 +31,7 @@ export const LibraryHoverActions = (props: LibraryHoverActionsProps) => { overflow: 'clip', height: '33px', - width: '162px', + width: '184px', bg: '$thBackground', display: 'flex', @@ -111,6 +111,17 @@ export const LibraryHoverActions = (props: LibraryHoverActionsProps) => { > + + + + {props.children} diff --git a/packages/web/components/templates/article/HighlightsLayer.tsx b/packages/web/components/templates/article/HighlightsLayer.tsx index dd1ed5bf1..c0066bc58 100644 --- a/packages/web/components/templates/article/HighlightsLayer.tsx +++ b/packages/web/components/templates/article/HighlightsLayer.tsx @@ -80,13 +80,15 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element { const focusedHighlightMousePos = useRef({ pageX: 0, pageY: 0 }) const [currentHighlightIdx, setCurrentHighlightIdx] = useState(0) - const [focusedHighlight, setFocusedHighlight] = - useState(undefined) + const [focusedHighlight, setFocusedHighlight] = useState< + Highlight | undefined + >(undefined) const [selectionData, setSelectionData] = useSelection(highlightLocations) - const [labelsTarget, setLabelsTarget] = - useState(undefined) + const [labelsTarget, setLabelsTarget] = useState( + undefined + ) const [ confirmDeleteHighlightWithNoteId, @@ -811,7 +813,10 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element { setLabelsTarget(undefined)} + onUpdate={updateHighlightsCallback} + onOpenChange={() => { + setLabelsTarget(undefined) + }} /> )} {confirmDeleteHighlightWithNoteId && ( diff --git a/packages/web/components/templates/article/Notebook.tsx b/packages/web/components/templates/article/Notebook.tsx index 90aaff720..a8f6e4504 100644 --- a/packages/web/components/templates/article/Notebook.tsx +++ b/packages/web/components/templates/article/Notebook.tsx @@ -57,8 +57,9 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element { const [noteText, setNoteText] = useState('') const [showConfirmDeleteHighlightId, setShowConfirmDeleteHighlightId] = useState(undefined) - const [labelsTarget, setLabelsTarget] = - useState(undefined) + const [labelsTarget, setLabelsTarget] = useState( + undefined + ) const noteState = useRef({ isCreating: false, note: undefined, @@ -359,6 +360,10 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element { { + // Don't actually need to do something here + console.log('update highlight: ', highlight) + }} onOpenChange={() => { mutate() setLabelsTarget(undefined) diff --git a/packages/web/components/templates/article/SetLabelsModalPresenter.tsx b/packages/web/components/templates/article/SetLabelsModalPresenter.tsx index 7bf7232b7..5fb68dd66 100644 --- a/packages/web/components/templates/article/SetLabelsModalPresenter.tsx +++ b/packages/web/components/templates/article/SetLabelsModalPresenter.tsx @@ -3,6 +3,7 @@ import { useSetPageLabels } from '../../../lib/hooks/useSetPageLabels' import { LabelsProvider } from './SetLabelsControl' import { SetLabelsModal } from './SetLabelsModal' import { useSetHighlightLabels } from '../../../lib/hooks/useSetHighlightLabels' +import { Highlight } from '../../../lib/networking/fragments/highlightFragment' type SetPageLabelsModalPresenterProps = { articleId: string @@ -15,13 +16,6 @@ export function SetPageLabelsModalPresenter( ): JSX.Element { const [labels, dispatchLabels] = useSetPageLabels(props.articleId) - useEffect(() => { - dispatchLabels({ - type: 'RESET', - labels: props.article.labels ?? [], - }) - }, [props.article, dispatchLabels]) - const onOpenChange = useCallback(() => { if (props.article) { props.article.labels = labels.labels @@ -29,6 +23,13 @@ export function SetPageLabelsModalPresenter( props.onOpenChange(true) }, [props, labels]) + useEffect(() => { + dispatchLabels({ + type: 'RESET', + labels: props.article.labels ?? [], + }) + }, [props.article, dispatchLabels]) + return ( void onOpenChange: (open: boolean) => void } @@ -57,12 +60,18 @@ export function SetHighlightLabelsModalPresenter( }) }, [props.highlight, dispatchLabels]) + const onOpenChange = useCallback(() => { + props.highlight.labels = labels.labels + props.onUpdate(props.highlight) + props.onOpenChange(true) + }, [props]) + return ( ) } diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index 403656aa0..2b9e5e96d 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -115,8 +115,6 @@ export function HomeFeedContainer(): JSX.Element { error: fetchItemsError, } = useGetLibraryItemsQuery(queryInputs) - console.log('fetchItemsError fetchItemsError: ', fetchItemsError) - useEffect(() => { const handleRevalidate = () => { ;(async () => { diff --git a/packages/web/components/templates/navMenu/SettingsDropdown.tsx b/packages/web/components/templates/navMenu/SettingsDropdown.tsx new file mode 100644 index 000000000..11e9dbf1a --- /dev/null +++ b/packages/web/components/templates/navMenu/SettingsDropdown.tsx @@ -0,0 +1,40 @@ +import { DropdownMenu } from '@radix-ui/react-dropdown-menu' +import { SETTINGS_SECTION_1, SETTINGS_SECTION_2 } from './SettingsMenu' +import { + Dropdown, + DropdownOption, + DropdownSeparator, +} from '../../elements/DropdownElements' +import { useRouter } from 'next/router' +import { List } from 'phosphor-react' + +export const SettingsDropdown = (): JSX.Element => { + const router = useRouter() + + return ( + }> + router.push('/home')} title="Home" /> + {SETTINGS_SECTION_1.map((item) => { + return ( + router.push(item.destination)} + title={item.name} + /> + ) + })} + + + + {SETTINGS_SECTION_2.map((item) => { + return ( + router.push(item.destination)} + title={item.name} + /> + ) + })} + + ) +} diff --git a/packages/web/components/templates/navMenu/SettingsMenu.tsx b/packages/web/components/templates/navMenu/SettingsMenu.tsx index c9b0bac7a..e0bd60c5e 100644 --- a/packages/web/components/templates/navMenu/SettingsMenu.tsx +++ b/packages/web/components/templates/navMenu/SettingsMenu.tsx @@ -9,6 +9,23 @@ import { ArrowSquareUpRight } from 'phosphor-react' import { useRouter } from 'next/router' import { NavMenuFooter } from './Footer' +export const SETTINGS_SECTION_1 = [ + { name: 'Account', destination: '/settings/account' }, + { name: 'API Keys', destination: '/settings/api' }, + { name: 'Emails', destination: '/settings/emails' }, + { name: 'Feeds', destination: '/settings/feeds' }, + { name: 'Subscriptions', destination: '/settings/subscriptions' }, + { name: 'Labels', destination: '/settings/labels' }, + { name: 'Shortcuts', destination: '/settings/shortcuts' }, + { name: 'Saved Searches', destination: '/settings/saved-searches' }, + { name: 'Pinned Searches', destination: '/settings/pinned-searches' }, +] + +export const SETTINGS_SECTION_2 = [ + { name: 'Integrations', destination: '/settings/integrations' }, + { name: 'Install', destination: '/settings/installation' }, +] + const HorizontalDivider = styled(SpanBox, { width: '100%', height: '1px', @@ -81,22 +98,6 @@ function ExternalLink(props: ExternalLinkProps): JSX.Element { } export function SettingsMenu(): JSX.Element { - const section1 = [ - { name: 'Account', destination: '/settings/account' }, - { name: 'API Keys', destination: '/settings/api' }, - { name: 'Emails', destination: '/settings/emails' }, - { name: 'Feeds', destination: '/settings/feeds' }, - { name: 'Subscriptions', destination: '/settings/subscriptions' }, - { name: 'Labels', destination: '/settings/labels' }, - { name: 'Shortcuts', destination: '/settings/shortcuts' }, - { name: 'Saved Searches', destination: '/settings/saved-searches' }, - { name: 'Pinned Searches', destination: '/settings/pinned-searches' }, - ] - - const section2 = [ - { name: 'Integrations', destination: '/settings/integrations' }, - { name: 'Install', destination: '/settings/installation' }, - ] return ( <> - {section1.map((item) => { + {SETTINGS_SECTION_1.map((item) => { return })} - {section2.map((item) => { + {SETTINGS_SECTION_2.map((item) => { return })} @@ -176,8 +179,8 @@ export function SettingsMenu(): JSX.Element { destination="https://docs.omnivore.app" title="Documentation" /> - + {/* This spacer pushes library content to the right of the fixed left side menu. */} diff --git a/packages/web/lib/highlights/deleteHighlight.ts b/packages/web/lib/highlights/deleteHighlight.ts index b09bdbcaa..5265d542f 100644 --- a/packages/web/lib/highlights/deleteHighlight.ts +++ b/packages/web/lib/highlights/deleteHighlight.ts @@ -1,6 +1,7 @@ import { HighlightLocation } from './highlightGenerator' import { getHighlightElements, + getHighlightLabelButton, getHighlightNoteButton, } from './highlightHelpers' @@ -11,11 +12,16 @@ export function removeHighlights( ids.forEach((id) => { const elements = getHighlightElements(id) const noteButtons = getHighlightNoteButton(id) + const labelButtons = getHighlightLabelButton(id) noteButtons.forEach((button) => { button.remove() }) + labelButtons.forEach((button) => { + button.remove() + }) + elements.forEach((t: Element) => { if (t.nodeName === 'IMG') { t.classList.remove('highlight-image') diff --git a/packages/web/lib/highlights/highlightGenerator.ts b/packages/web/lib/highlights/highlightGenerator.ts index a74b33185..9d9c96949 100644 --- a/packages/web/lib/highlights/highlightGenerator.ts +++ b/packages/web/lib/highlights/highlightGenerator.ts @@ -206,19 +206,19 @@ export function makeHighlightNodeAttributes( lastElement.appendChild(ctr) } - if (withLabels && lastElement) { - const svg = labelsImage(customColor) - svg.setAttribute(highlightLabelIdAttribute, id) + // if (withLabels && lastElement) { + // const svg = labelsImage(customColor) + // svg.setAttribute(highlightLabelIdAttribute, id) - const ctr = document.createElement('span') - ctr.className = 'highlight_label_button' - ctr.appendChild(svg) - ctr.setAttribute(highlightLabelIdAttribute, id) - ctr.setAttribute('width', '14px') - ctr.setAttribute('height', '14px') + // const ctr = document.createElement('span') + // ctr.className = 'highlight_label_button' + // ctr.appendChild(svg) + // ctr.setAttribute(highlightLabelIdAttribute, id) + // ctr.setAttribute('width', '14px') + // ctr.setAttribute('height', '14px') - lastElement.appendChild(ctr) - } + // lastElement.appendChild(ctr) + // } return { prefix, diff --git a/packages/web/lib/highlights/highlightHelpers.ts b/packages/web/lib/highlights/highlightHelpers.ts index adf39259d..3359cdfe7 100644 --- a/packages/web/lib/highlights/highlightHelpers.ts +++ b/packages/web/lib/highlights/highlightHelpers.ts @@ -28,6 +28,12 @@ export function getHighlightNoteButton(highlightId: string): Element[] { ) } +export function getHighlightLabelButton(highlightId: string): Element[] { + return Array.from( + document.querySelectorAll(`[${highlightLabelIdAttribute}='${highlightId}']`) + ) +} + export function noteImage(color: string | undefined): SVGSVGElement { const svgURI = 'http://www.w3.org/2000/svg' const svg = document.createElementNS(svgURI, 'svg') diff --git a/packages/web/lib/hooks/useSetHighlightLabels.tsx b/packages/web/lib/hooks/useSetHighlightLabels.tsx index 71d199437..2e1567d5e 100644 --- a/packages/web/lib/hooks/useSetHighlightLabels.tsx +++ b/packages/web/lib/hooks/useSetHighlightLabels.tsx @@ -3,6 +3,7 @@ import { Label } from '../networking/fragments/labelFragment' import { showErrorToast } from '../toastHelpers' import { setLabelsForHighlight } from '../networking/mutations/setLabelsForHighlight' import { LabelsDispatcher } from './useSetPageLabels' +import { Highlight } from '../networking/fragments/highlightFragment' export const useSetHighlightLabels = ( highlightId?: string