diff --git a/packages/web/components/elements/ModalPrimitives.tsx b/packages/web/components/elements/ModalPrimitives.tsx index 2790897e9..a9c0975c3 100644 --- a/packages/web/components/elements/ModalPrimitives.tsx +++ b/packages/web/components/elements/ModalPrimitives.tsx @@ -29,7 +29,7 @@ const Modal = styled(Content, { boxShadow: theme.shadows.cardBoxShadow.toString(), position: 'fixed', '&:focus': { outline: 'none' }, - zIndex:'1', + zIndex: '1', }) export const ModalContent = styled(Modal, { @@ -43,6 +43,7 @@ export const ModalContent = styled(Modal, { maxWidth: '95%', width: '95%', }, + zIndex: '10', }) export type ModalTitleBarProps = { @@ -57,9 +58,7 @@ export const ModalTitleBar = (props: ModalTitleBarProps) => { alignment="center" css={{ height: '68px', width: '100%' }} > - - {props.title} - + {props.title} ) @@ -98,7 +94,10 @@ export const ModalButtonBar = (props: ModalButtonBarProps) => { }, }} > - ) -} \ No newline at end of file +} diff --git a/packages/web/components/patterns/HighlightView.tsx b/packages/web/components/patterns/HighlightView.tsx index 459da76a3..bd8650781 100644 --- a/packages/web/components/patterns/HighlightView.tsx +++ b/packages/web/components/patterns/HighlightView.tsx @@ -1,5 +1,6 @@ import { Fragment, useMemo } from 'react' import type { Highlight } from '../../lib/networking/fragments/highlightFragment' +import { LabelChip } from '../elements/LabelChip' import { Box, VStack, Blockquote, SpanBox } from '../elements/LayoutPrimitives' import { StyledText } from '../elements/StyledText' import { styled } from '../tokens/stitches.config' @@ -48,6 +49,11 @@ export function HighlightView(props: HighlightViewProps): JSX.Element { ))} + + {props.highlight.labels?.map(({ name, color }, index) => ( + + ))} + ) diff --git a/packages/web/components/templates/article/ArticleActionsMenu.tsx b/packages/web/components/templates/article/ArticleActionsMenu.tsx index c90cb6262..2469f5798 100644 --- a/packages/web/components/templates/article/ArticleActionsMenu.tsx +++ b/packages/web/components/templates/article/ArticleActionsMenu.tsx @@ -1,15 +1,25 @@ -import { Separator } from "@radix-ui/react-separator" -import { ArchiveBox, DotsThree, HighlighterCircle, TagSimple, TextAa, Trash, Tray } from "phosphor-react" -import { ArticleAttributes } from "../../../lib/networking/queries/useGetArticleQuery" -import { Button } from "../../elements/Button" -import { Dropdown } from "../../elements/DropdownElements" -import { Box, SpanBox } from "../../elements/LayoutPrimitives" -import { TooltipWrapped } from "../../elements/Tooltip" -import { styled, theme } from "../../tokens/stitches.config" -import { SetLabelsControl } from "./SetLabelsControl" -import { DisplaySettingsModal } from "./DisplaySettingsModal" -import { useReaderSettings } from "../../../lib/hooks/useReaderSettings" -import { useRef } from "react" +import { Separator } from '@radix-ui/react-separator' +import { + ArchiveBox, + DotsThree, + HighlighterCircle, + TagSimple, + TextAa, + Trash, + Tray, +} from 'phosphor-react' +import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticleQuery' +import { Button } from '../../elements/Button' +import { Dropdown } from '../../elements/DropdownElements' +import { Box, SpanBox } from '../../elements/LayoutPrimitives' +import { TooltipWrapped } from '../../elements/Tooltip' +import { styled, theme } from '../../tokens/stitches.config' +import { SetLabelsControl } from './SetLabelsControl' +import { DisplaySettingsModal } from './DisplaySettingsModal' +import { useReaderSettings } from '../../../lib/hooks/useReaderSettings' +import { useRef } from 'react' +import { setLabelsMutation } from '../../../lib/networking/mutations/setLabelsMutation' +import { Label } from '../../../lib/networking/fragments/labelFragment' export type ArticleActionsMenuLayout = 'top' | 'side' @@ -31,7 +41,7 @@ const MenuSeparator = (props: MenuSeparatorProps): JSX.Element => { borderBottom: `1px solid ${theme.colors.grayLine.toString()}`, my: '8px', }) - return (props.layout == 'side' ? : <>) + return props.layout == 'side' ? : <> } type ActionDropdownProps = { @@ -41,126 +51,166 @@ type ActionDropdownProps = { } const ActionDropdown = (props: ActionDropdownProps): JSX.Element => { - return - {props.children} - + return ( + + {props.children} + + ) } -export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element { +export function ArticleActionsMenu( + props: ArticleActionsMenuProps +): JSX.Element { const readerSettings = useReaderSettings() const displaySettingsButtonRef = useRef(null) return ( <> - - {props.showReaderDisplaySettings && ( - <> - - - - )} - - {props.article ? ( - + + + + )} + + {props.article ? ( + + + + } + > + { + if (props.article?.id) { + return setLabelsMutation( + props.article?.id, + labels.map((label) => label.id) + ) + } + return Promise.resolve(undefined) + }} + onSave={(labels) => { + props.articleActionHandler('refreshLabels', labels) + }} + /> + + ) : ( + - )} - - - + - + + + + - + - + + + + - {!props.article?.isArchived ? ( + {!props.article?.isArchived ? ( )} - {/* + {/* */} - - {readerSettings.showEditDisplaySettingsModal && ( - readerSettings.setShowEditDisplaySettingsModal(false)} - /> - )} + + {readerSettings.showEditDisplaySettingsModal && ( + + readerSettings.setShowEditDisplaySettingsModal(false) + } + /> + )} ) } diff --git a/packages/web/components/templates/article/HighlightsModal.tsx b/packages/web/components/templates/article/HighlightsModal.tsx index 8e5fa0607..c59e080da 100644 --- a/packages/web/components/templates/article/HighlightsModal.tsx +++ b/packages/web/components/templates/article/HighlightsModal.tsx @@ -22,6 +22,9 @@ import { StyledTextArea } from '../../elements/StyledTextArea' import { ConfirmationModal } from '../../patterns/ConfirmationModal' import { DotsThree } from 'phosphor-react' import { Dropdown, DropdownOption } from '../../elements/DropdownElements' +import { SetLabelsModal } from './SetLabelsModal' +import { Label } from '../../../lib/networking/fragments/labelFragment' +import { setLabelsForHighlight } from '../../../lib/networking/mutations/setLabelsForHighlight' type HighlightsModalProps = { highlights: Highlight[] @@ -33,6 +36,10 @@ type HighlightsModalProps = { export function HighlightsModal(props: HighlightsModalProps): JSX.Element { const [showConfirmDeleteHighlightId, setShowConfirmDeleteHighlightId] = useState(undefined) + const [labelsTarget, setLabelsTarget] = useState( + undefined + ) + const [, updateState] = useState({}) return ( @@ -42,7 +49,7 @@ export function HighlightsModal(props: HighlightsModalProps): JSX.Element { event.preventDefault() props.onOpenChange(false) }} - css={{ overflow: 'auto', px: '24px', zIndex: '10' }} + css={{ overflow: 'auto', px: '24px' }} > @@ -53,6 +60,7 @@ export function HighlightsModal(props: HighlightsModalProps): JSX.Element { highlight={highlight} showDelete={!!props.deleteHighlightAction} scrollToHighlight={props.scrollToHighlight} + setSetLabelsTarget={setLabelsTarget} setShowConfirmDeleteHighlightId={ setShowConfirmDeleteHighlightId } @@ -73,7 +81,7 @@ export function HighlightsModal(props: HighlightsModalProps): JSX.Element { - {showConfirmDeleteHighlightId ? ( + {showConfirmDeleteHighlightId && ( { @@ -90,7 +98,25 @@ export function HighlightsModal(props: HighlightsModalProps): JSX.Element { /> } /> - ) : null} + )} + {labelsTarget && ( + { + const result = setLabelsForHighlight( + labelsTarget.id, + labels.map((label) => label.id) + ) + return result + }} + /> + )} ) } @@ -100,6 +126,8 @@ type ModalHighlightViewProps = { showDelete: boolean scrollToHighlight?: (arg: string) => void deleteHighlightAction: () => void + + setSetLabelsTarget: (highlight: Highlight) => void setShowConfirmDeleteHighlightId: (id: string | undefined) => void } @@ -125,7 +153,12 @@ function ModalHighlightView(props: ModalHighlightViewProps): JSX.Element { }} title="Copy" /> - {/* {}} title="Labels" /> */} + { + props.setSetLabelsTarget(props.highlight) + }} + title="Labels" + /> { props.setShowConfirmDeleteHighlightId(props.highlight.id) diff --git a/packages/web/components/templates/article/SetLabelsControl.tsx b/packages/web/components/templates/article/SetLabelsControl.tsx index 2afb1e06e..b4a23f0f7 100644 --- a/packages/web/components/templates/article/SetLabelsControl.tsx +++ b/packages/web/components/templates/article/SetLabelsControl.tsx @@ -9,18 +9,19 @@ import { Label } from '../../../lib/networking/fragments/labelFragment' import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery' import { Check, Circle, PencilSimple, Plus } from 'phosphor-react' import { isTouchScreenDevice } from '../../../lib/deviceType' -import { setLabelsMutation } from '../../../lib/networking/mutations/setLabelsMutation' import { createLabelMutation } from '../../../lib/networking/mutations/createLabelMutation' import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers' import { randomLabelColorHex } from '../../../utils/settings-page/labels/labelColorObjects' import { useRouter } from 'next/router' -import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticleQuery' + +export interface LabelsProvider { + labels?: Label[] +} type SetLabelsControlProps = { - linkId: string - labels: Label[] | undefined - article?: ArticleAttributes - articleActionHandler: (action: string, arg?: unknown) => void + provider: LabelsProvider + onSave: (labels: Label[] | undefined) => void + save: (labels: Label[]) => Promise } type HeaderProps = { @@ -57,12 +58,16 @@ function Header(props: HeaderProps): JSX.Element { }, [props.focused]) return ( - - + + - - ) + + + ) } type LabelListItemProps = { @@ -128,21 +134,61 @@ function LabelListItem(props: LabelListItemProps): JSX.Element { ref.current?.blur() }} > - - - {selected && } + + + {selected && ( + + )} - - + + - + {label.name} - - {selected && } + + {selected && ( + + )} ) @@ -164,9 +210,11 @@ function Footer(props: FooterProps): JSX.Element { return ( - - - Edit labels - - + > + + + Edit labels + + ) } @@ -189,41 +239,45 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element { const router = useRouter() const [filterText, setFilterText] = useState('') const { labels, revalidate } = useGetLabelsQuery() - const [selectedLabels, setSelectedLabels] = useState(props.labels || []) + const [selectedLabels, setSelectedLabels] = useState( + props.provider.labels ?? [] + ) useEffect(() => { setFocusedIndex(undefined) }, [filterText]) - const isSelected = useCallback((label: Label): boolean => { - return selectedLabels.some((other) => { - return other.id === label.id - }) - }, [selectedLabels]) - - const toggleLabel = useCallback(async (label: Label) => { - let newSelectedLabels = [...selectedLabels] - if (isSelected(label)) { - newSelectedLabels = selectedLabels.filter((other) => { - return other.id !== label.id + const isSelected = useCallback( + (label: Label): boolean => { + return selectedLabels.some((other) => { + return other.id === label.id }) - } else { - newSelectedLabels = [...selectedLabels, label] - } - setSelectedLabels(newSelectedLabels) + }, + [selectedLabels] + ) - const result = await setLabelsMutation( - props.linkId, - newSelectedLabels.map((label) => label.id) - ) + const toggleLabel = useCallback( + async (label: Label) => { + let newSelectedLabels = [...selectedLabels] + if (isSelected(label)) { + newSelectedLabels = selectedLabels.filter((other) => { + return other.id !== label.id + }) + } else { + newSelectedLabels = [...selectedLabels, label] + } + setSelectedLabels(newSelectedLabels) - if (props.article) { - props.article.labels = result - } - props.articleActionHandler('refreshLabels', result) + const result = await props.save(newSelectedLabels) + props.provider.labels = result + if (props.onSave) { + props.onSave(result) + } - revalidate() - }, [isSelected, selectedLabels, setSelectedLabels]) + revalidate() + }, + [isSelected, selectedLabels, setSelectedLabels] + ) const filteredLabels = useMemo(() => { if (!labels) { @@ -235,62 +289,80 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element { }, [labels, filterText]) // Move focus through the labels list on tab or arrow up/down keys - const [focusedIndex, setFocusedIndex] = useState(undefined) - const handleKeyDown = useCallback(async (event: React.KeyboardEvent) => { - const maxIndex = filteredLabels.length + 1 - if (event.key === 'ArrowUp') { - event.preventDefault() - let newIndex = focusedIndex - if (focusedIndex) { - newIndex = Math.max(0, focusedIndex - 1) - } else { - newIndex = undefined + const [focusedIndex, setFocusedIndex] = useState( + undefined + ) + const handleKeyDown = useCallback( + async (event: React.KeyboardEvent) => { + const maxIndex = filteredLabels.length + 1 + if (event.key === 'ArrowUp') { + event.preventDefault() + let newIndex = focusedIndex + if (focusedIndex) { + newIndex = Math.max(0, focusedIndex - 1) + } else { + newIndex = undefined + } + // If the `Create New label` button isn't visible we skip it + // when navigating with the arrow keys + if (focusedIndex === maxIndex && !filterText) { + newIndex = maxIndex - 2 + } + setFocusedIndex(newIndex) } - // If the `Create New label` button isn't visible we skip it - // when navigating with the arrow keys - if (focusedIndex === maxIndex && !filterText) { - newIndex = maxIndex - 2 + if (event.key === 'ArrowDown' || event.key === 'Tab') { + event.preventDefault() + let newIndex = focusedIndex + if (focusedIndex === undefined) { + newIndex = 0 + } else { + newIndex = Math.min(maxIndex, focusedIndex + 1) + } + // If the `Create New label` button isn't visible we skip it + // when navigating with the arrow keys + if (focusedIndex === maxIndex - 2 && !filterText) { + newIndex = maxIndex + } + setFocusedIndex(newIndex) } - setFocusedIndex(newIndex) - } - if (event.key === 'ArrowDown' || event.key === 'Tab') { - event.preventDefault() - let newIndex = focusedIndex - if (focusedIndex === undefined) { - newIndex = 0 - } else { - newIndex = Math.min(maxIndex, focusedIndex + 1) - } - // If the `Create New label` button isn't visible we skip it - // when navigating with the arrow keys - if (focusedIndex === maxIndex - 2 && !filterText) { - newIndex = maxIndex - } - setFocusedIndex(newIndex) - } - if (event.key === 'Enter') { - event.preventDefault() - if (focusedIndex === maxIndex) { - router.push('/settings/labels') - return - } - if (focusedIndex === maxIndex - 1) { - await createLabelFromFilterText() - return - } - if (focusedIndex !== undefined) { - const label = filteredLabels[focusedIndex] - if (label) { - toggleLabel(label) + if (event.key === 'Enter') { + event.preventDefault() + if (focusedIndex === maxIndex) { + router.push('/settings/labels') + return + } + if (focusedIndex === maxIndex - 1) { + await createLabelFromFilterText() + return + } + if (focusedIndex !== undefined) { + const label = filteredLabels[focusedIndex] + if (label) { + toggleLabel(label) + } } } - } - }, [filterText, filteredLabels, focusedIndex, isSelected, selectedLabels, setSelectedLabels]) + }, + [ + filterText, + filteredLabels, + focusedIndex, + isSelected, + selectedLabels, + setSelectedLabels, + ] + ) const createLabelFromFilterText = useCallback(async () => { - const label = await createLabelMutation(filterText, randomLabelColorHex(), '') + const label = await createLabelMutation( + filterText, + randomLabelColorHex(), + '' + ) if (label) { - showSuccessToast(`Created label ${label.name}`, { position: 'bottom-right' }) + showSuccessToast(`Created label ${label.name}`, { + position: 'bottom-right', + }) toggleLabel(label) } else { showErrorToast('Failed to create label', { position: 'bottom-right' }) @@ -301,20 +373,28 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element { + }} + >
setFocusedIndex(undefined)} - setFilterText={setFilterText} filterText={filterText} + setFilterText={setFilterText} + filterText={filterText} /> + css={{ + flexGrow: '1', + overflow: 'scroll', + width: '100%', + height: '100%', + maxHeight: '294px', + }} + > {filteredLabels && filteredLabels.map((label, idx) => ( {filterText && ( - )} -