diff --git a/packages/web/components/elements/LabelColorDropdown.tsx b/packages/web/components/elements/LabelColorDropdown.tsx index 26e015bff..69d7a79e9 100644 --- a/packages/web/components/elements/LabelColorDropdown.tsx +++ b/packages/web/components/elements/LabelColorDropdown.tsx @@ -4,11 +4,8 @@ import { Box, HStack } from './LayoutPrimitives' import { StyledText } from './StyledText' import { LabelColorDropdownProps, - LabelColorObject, LabelOptionProps, } from '../../utils/settings-page/labels/types' -import { labelColorObjects } from '../../utils/settings-page/labels/labelColorObjects' -import { LabelColor } from '../../lib/networking/fragments/labelFragment' import { TwitterPicker } from 'react-color' import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu' diff --git a/packages/web/components/patterns/DropdownMenu.tsx b/packages/web/components/patterns/DropdownMenu.tsx deleted file mode 100644 index de09ce225..000000000 --- a/packages/web/components/patterns/DropdownMenu.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import { ReactNode, useMemo, useState } from 'react' -import { HStack, VStack } from './../elements/LayoutPrimitives' -import { Dropdown, DropdownOption } from '../elements/DropdownElements' -import { StyledText } from '../elements/StyledText' -import { Button } from '../elements/Button' -import { currentThemeName } from '../../lib/themeUpdater' -import { Check } from 'phosphor-react' - -export type HeaderDropdownAction = - | 'apply-dark-theme' - | 'apply-light-theme' - | 'navigate-to-install' - | 'navigate-to-emails' - | 'navigate-to-labels' - | 'navigate-to-profile' - | 'navigate-to-subscriptions' - | 'navigate-to-api' - | 'navigate-to-integrations' - | 'increaseFontSize' - | 'decreaseFontSize' - | 'logout' - -type DropdownMenuProps = { - username?: string - triggerElement: ReactNode - actionHandler: (action: HeaderDropdownAction) => void -} - -export function DropdownMenu(props: DropdownMenuProps): JSX.Element { - const [currentTheme, setCurrentTheme] = useState(currentThemeName()) - - const isDark = useMemo(() => { - return currentTheme === 'Dark' || currentTheme === 'Darker' - }, [currentTheme]) - - return ( - - - Theme - - - - - - props.actionHandler('navigate-to-install')} - title="Install" - /> - props.actionHandler('navigate-to-emails')} - title="Emails" - /> - props.actionHandler('navigate-to-labels')} - title="Labels" - /> - props.actionHandler('navigate-to-api')} - title="API Keys" - /> - props.actionHandler('navigate-to-integrations')} - title="Integrations" - /> - window.open('https://docs.omnivore.app', '_blank')} - title="Documentation" - /> - window.Intercom('show')} - title="Feedback" - /> - props.actionHandler('logout')} - title="Logout" - /> - - ) -} diff --git a/packages/web/components/templates/PrimaryDropdown.tsx b/packages/web/components/templates/PrimaryDropdown.tsx index 19e25d159..b24f1a832 100644 --- a/packages/web/components/templates/PrimaryDropdown.tsx +++ b/packages/web/components/templates/PrimaryDropdown.tsx @@ -26,19 +26,17 @@ type PrimaryDropdownProps = { updateLayout?: (layout: LayoutType) => void showAddLinkModal?: () => void - startSelectMultiple?: () => void } export type HeaderDropdownAction = | 'navigate-to-install' + | 'navigate-to-feeds' | 'navigate-to-emails' | 'navigate-to-labels' | 'navigate-to-profile' | 'navigate-to-subscriptions' | 'navigate-to-api' | 'navigate-to-integrations' - | 'increaseFontSize' - | 'decreaseFontSize' | 'logout' export function PrimaryDropdown(props: PrimaryDropdownProps): JSX.Element { @@ -51,6 +49,9 @@ export function PrimaryDropdown(props: PrimaryDropdownProps): JSX.Element { case 'navigate-to-install': router.push('/settings/installation') break + case 'navigate-to-feeds': + router.push('/settings/feeds') + break case 'navigate-to-emails': router.push('/settings/emails') break @@ -149,6 +150,10 @@ export function PrimaryDropdown(props: PrimaryDropdownProps): JSX.Element { onSelect={() => headerDropdownActionHandler('navigate-to-install')} title="Install" /> + headerDropdownActionHandler('navigate-to-feeds')} + title="Feeds" + /> headerDropdownActionHandler('navigate-to-emails')} title="Emails" @@ -167,17 +172,6 @@ export function PrimaryDropdown(props: PrimaryDropdownProps): JSX.Element { /> )} - {props.startSelectMultiple && ( - <> - - props.startSelectMultiple && props.startSelectMultiple() - } - title="Select Multiple" - /> - - - )} headerDropdownActionHandler('navigate-to-api')} title="API Keys" diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx index f33d0c9f1..2a32acee4 100644 --- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx +++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useRef, useState } from "react" +import { useCallback, useEffect, useRef, useState } from 'react' import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives' import { theme } from '../../tokens/stitches.config' import { FormInput } from '../../elements/FormElements' @@ -54,7 +54,11 @@ type LibraryHeaderProps = { performMultiSelectAction: (action: BulkAction, labelIds?: string[]) => void - handleLinkSubmission: (link: string, timezone: string, locale:string) => Promise, + handleLinkSubmission: ( + link: string, + timezone: string, + locale: string + ) => Promise } export function LibraryHeader(props: LibraryHeaderProps): JSX.Element { @@ -220,15 +224,20 @@ export type SearchBoxProps = { compact?: boolean onClose?: () => void - handleLinkSubmission: (link: string, timezone: string, locale:string) => Promise, + handleLinkSubmission: ( + link: string, + timezone: string, + locale: string + ) => Promise } export function SearchBox(props: SearchBoxProps): JSX.Element { const inputRef = useRef(null) const [focused, setFocused] = useState(false) const [searchTerm, setSearchTerm] = useState(props.searchTerm ?? '') - const [isAddAction, setIsAddAction] = useState(false); - const IS_URL_REGEX = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/; + const [isAddAction, setIsAddAction] = useState(false) + const IS_URL_REGEX = + /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/ useEffect(() => { setSearchTerm(props.searchTerm ?? '') @@ -284,22 +293,23 @@ export function SearchBox(props: SearchBoxProps): JSX.Element { e.preventDefault() }} > - { - (() => { - if (isAddAction) { - return { + if (isAddAction) { + return ( + + ) } - return - })() - } - + ) + })()}
{ @@ -308,9 +318,9 @@ export function SearchBox(props: SearchBoxProps): JSX.Element { if (!isAddAction) { props.applySearchQuery(searchTerm || '') } else { - await props.handleLinkSubmission(searchTerm, timeZone, locale) - setSearchTerm(props.searchTerm ?? "") - props.applySearchQuery(props.searchTerm ?? "") + await props.handleLinkSubmission(searchTerm, timeZone, locale) + setSearchTerm(props.searchTerm ?? '') + props.applySearchQuery(props.searchTerm ?? '') } inputRef.current?.blur() if (props.onClose) { @@ -408,7 +418,11 @@ type ControlButtonBoxProps = { searchTerm: string | undefined applySearchQuery: (searchQuery: string) => void - handleLinkSubmission: (link: string, timezone: string, locale:string) => Promise, + handleLinkSubmission: ( + link: string, + timezone: string, + locale: string + ) => Promise } function MultiSelectControls(props: ControlButtonBoxProps): JSX.Element { @@ -517,13 +531,6 @@ function SearchControlButtonBox( { - props.setMultiSelectMode('none') - } - : undefined - } showAddLinkModal={props.showAddLinkModal} /> @@ -702,9 +709,6 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element { layout={props.layout} updateLayout={props.updateLayout} showAddLinkModal={props.showAddLinkModal} - startSelectMultiple={() => { - props.setMultiSelectMode('none') - }} /> )}