Merge pull request #3538 from omnivore-app/feat/web-multiselect-header

Improvements to the web multiselect header

packages/web/components/elements/LabelChip.tsx

@@ -1,10 +1,6 @@
-import { getLuminance } from 'color2k'
-import { useRouter } from 'next/router'
-import { Button } from './Button'
 import { SpanBox, HStack } from './LayoutPrimitives'
 import { Circle, X } from 'phosphor-react'
 import { isDarkTheme } from '../../lib/themeUpdater'
-import { theme } from '../tokens/stitches.config'
 
 type LabelChipProps = {
   text: string

packages/web/components/elements/MobileInstallHelp.tsx

@@ -7,7 +7,6 @@ import {
 import { Box, HStack } from '../elements/LayoutPrimitives'
 import { StyledText, StyledAnchor } from '../elements/StyledText'
 import { TooltipWrapped } from './Tooltip'
-import Link from 'next/link'
 
 const TooltipStyle = {
   backgroundColor: '#F9D354',

packages/web/components/elements/SplitButton.tsx

@@ -1,8 +1,5 @@
-import { ReactNode, useEffect, useMemo, useRef } from 'react'
-import { styled } from '../tokens/stitches.config'
-import { Box, HStack, VStack } from './LayoutPrimitives'
+import { HStack, VStack } from './LayoutPrimitives'
 import { Button } from './Button'
-import { Dropdown, DropdownOption } from './DropdownElements'
 import { CaretDownIcon } from './icons/CaretDownIcon'
 
 type ShowLinkMode = 'none' | 'link' | 'pdf'

packages/web/components/elements/icons/HeaderCheckboxIcon.tsx

@@ -4,8 +4,28 @@ import { IconProps } from './IconProps'
 import { SpanBox } from '../LayoutPrimitives'
 
 import React from 'react'
+import { MultiSelectMode } from '../../templates/homeFeed/LibraryHeader'
 
-export class HeaderCheckboxIcon extends React.Component<IconProps> {
+type HeaderCheckboxIconProps = {
+  multiSelectMode: MultiSelectMode
+}
+
+export const HeaderCheckboxIcon = (
+  props: HeaderCheckboxIconProps
+): JSX.Element => {
+  switch (props.multiSelectMode) {
+    case 'search':
+    case 'visible':
+      return <HeaderCheckboxCheckedIcon />
+    case 'none':
+    case 'off':
+      return <HeaderCheckboxUncheckedIcon />
+    case 'some':
+      return <HeaderCheckboxHalfCheckedIcon />
+  }
+}
+
+export class HeaderCheckboxUncheckedIcon extends React.Component<IconProps> {
   render() {
     return (
       <SpanBox
@@ -54,3 +74,89 @@ export class HeaderCheckboxIcon extends React.Component<IconProps> {
     )
   }
 }
+
+export class HeaderCheckboxCheckedIcon extends React.Component<IconProps> {
+  render() {
+    return (
+      <SpanBox
+        css={{
+          display: 'flex',
+          '--inner-color': 'var(--colors-thHeaderIconInner)',
+          '--ring-color': 'var(--colors-thHeaderIconRing)',
+          '&:hover': {
+            '--ring-fill': '#007AFF10',
+          },
+        }}
+      >
+        <svg
+          width="41"
+          height="40"
+          viewBox="0 0 40 40"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect
+            x="0.5"
+            y="0.5"
+            width="39"
+            height="39"
+            rx="19.5"
+            style={{
+              fill: 'var(--ring-fill)',
+              stroke: 'var(--ring-color)',
+            }}
+          />
+          <g>
+            <path
+              d="M25.9341 11.6667C27.5674 11.6667 28.9007 12.9476 28.9857 14.5601L28.9899 14.7226V25.2776C28.9899 26.9109 27.7091 28.2442 26.0966 28.3292L25.9341 28.3334H15.3791C14.5967 28.3335 13.8442 28.0334 13.2764 27.4951C12.7087 26.9569 12.369 26.2213 12.3274 25.4401L12.3232 25.2776V14.7226C12.3232 13.0892 13.6041 11.7559 15.2166 11.6709L15.3791 11.6667H25.9341ZM23.7457 17.7442C23.5895 17.588 23.3775 17.5003 23.1566 17.5003C22.9356 17.5003 22.7237 17.588 22.5674 17.7442L19.8232 20.4876L18.7457 19.4109L18.6674 19.3417C18.4999 19.2122 18.2894 19.1513 18.0786 19.1714C17.8679 19.1915 17.6726 19.291 17.5326 19.4498C17.3926 19.6087 17.3183 19.8148 17.3247 20.0264C17.3312 20.2381 17.418 20.4393 17.5674 20.5892L19.2341 22.2559L19.3124 22.3251C19.4727 22.4495 19.673 22.5111 19.8755 22.4983C20.078 22.4856 20.2689 22.3994 20.4124 22.2559L23.7457 18.9226L23.8149 18.8442C23.9393 18.6839 24.0009 18.4837 23.9881 18.2812C23.9754 18.0787 23.8892 17.8877 23.7457 17.7442Z"
+              fill="#007AFF"
+            />
+          </g>
+        </svg>
+      </SpanBox>
+    )
+  }
+}
+
+export class HeaderCheckboxHalfCheckedIcon extends React.Component<IconProps> {
+  render() {
+    return (
+      <SpanBox
+        css={{
+          display: 'flex',
+          '--inner-color': '#007AFF',
+          '--ring-color': 'var(--colors-thHeaderIconRing)',
+          '&:hover': {
+            '--ring-fill': '#007AFF10',
+          },
+        }}
+      >
+        <svg
+          width="41"
+          height="40"
+          viewBox="0 0 40 40"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect
+            x="0.5"
+            y="0.5"
+            width="39"
+            height="39"
+            rx="19.5"
+            style={{
+              fill: 'var(--ring-fill)',
+              stroke: 'var(--ring-color)',
+            }}
+          />
+          <g>
+            <path
+              d="M25.8332 11.7496C26.4962 11.7496 27.1321 12.013 27.6009 12.4819C28.0698 12.9507 28.3332 13.5866 28.3332 14.2496V25.9163C28.3332 26.5793 28.0698 27.2152 27.6009 27.6841C27.1321 28.1529 26.4962 28.4163 25.8332 28.4163H14.1665C13.5035 28.4163 12.8676 28.1529 12.3987 27.6841C11.9299 27.2152 11.6665 26.5793 11.6665 25.9163V14.2496C11.6665 13.5866 11.9299 12.9507 12.3987 12.4819C12.8676 12.013 13.5035 11.7496 14.1665 11.7496H25.8332ZM22.4998 19.2496H17.4998L17.4023 19.2555C17.1914 19.2806 16.998 19.3852 16.8617 19.5481C16.7254 19.711 16.6564 19.9198 16.6689 20.1318C16.6813 20.3438 16.7743 20.5431 16.9287 20.6889C17.0831 20.8347 17.2874 20.9161 17.4998 20.9163H22.4998L22.5973 20.9105C22.8082 20.8854 23.0016 20.7807 23.1379 20.6178C23.2743 20.4549 23.3433 20.2462 23.3308 20.0341C23.3184 19.8221 23.2254 19.6228 23.071 19.477C22.9165 19.3312 22.7122 19.2499 22.4998 19.2496Z"
+              fill="#007AFF"
+            />
+          </g>
+        </svg>
+      </SpanBox>
+    )
+  }
+}

packages/web/components/elements/images/OmnivoreFestiveLogo.tsx

@@ -14,22 +14,21 @@ export function OmnivoreFestiveLogo(
   const href = props.href || '/home'
 
   return (
-    (<Link
+    <Link
       passHref
       href={href}
       style={{
         textDecoration: 'none',
         display: 'flex',
         alignItems: 'center',
-      }}>
-
+      }}
+    >
       <Image
         src="/static/images/omnivore-logo-santa.png"
         width="27"
         height="27"
         alt=""
       />
-
-    </Link>)
-  );
+    </Link>
+  )
 }

packages/web/components/elements/images/OmnivoreFullLogo.tsx

@@ -1,6 +1,3 @@
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
 import { config } from '../../tokens/stitches.config'
 import { OmnivoreLogoBase } from './OmnivoreLogoBase'
 

packages/web/components/patterns/HighlightBar.tsx

@@ -1,21 +1,8 @@
 import { isAndroid } from '../../lib/deviceType'
-
 import { styled, theme } from '../tokens/stitches.config'
-
-import { StyledText } from '../elements/StyledText'
 import { Button } from '../elements/Button'
 import { HStack, Box } from '../elements/LayoutPrimitives'
-import { PenWithColorIcon } from '../elements/images/PenWithColorIcon'
-import {
-  Note,
-  Tag,
-  Trash,
-  Copy,
-  Circle,
-  CopySimple,
-  CheckCircle,
-} from 'phosphor-react'
-import { TrashIcon } from '../elements/icons/TrashIcon'
+import { Circle, CheckCircle } from 'phosphor-react'
 import { LabelIcon } from '../elements/icons/LabelIcon'
 import { NotebookIcon } from '../elements/icons/NotebookIcon'
 import { highlightColor, highlightColors } from '../../lib/themeUpdater'

packages/web/components/patterns/HighlightHoverActions.tsx

@@ -1,20 +1,8 @@
 import { useState } from 'react'
-import { Box, SpanBox } from '../elements/LayoutPrimitives'
-import { LibraryItemNode } from '../../lib/networking/queries/useGetLibraryItemsQuery'
+import { Box } from '../elements/LayoutPrimitives'
 import { Button } from '../elements/Button'
 import { theme } from '../tokens/stitches.config'
-import {
-  ArchiveBox,
-  Book,
-  BookOpen,
-  Copy,
-  DotsThree,
-  Notebook,
-  Tag,
-  Trash,
-  Tray,
-} from 'phosphor-react'
-//import { CardMenu } from '../CardMenu'
+import { BookOpen, Copy } from 'phosphor-react'
 import { UserBasicData } from '../../lib/networking/queries/useGetViewerQuery'
 import { Highlight } from '../../lib/networking/fragments/highlightFragment'
 import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'

packages/web/components/patterns/HighlightView.tsx

@@ -9,15 +9,11 @@ import {
   SpanBox,
   HStack,
 } from '../elements/LayoutPrimitives'
-import { styled, theme } from '../tokens/stitches.config'
+import { styled } from '../tokens/stitches.config'
 import { HighlightViewNote } from './HighlightNotes'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
-import {
-  highlightColor,
-  highlightColorVar,
-  isDarkTheme,
-} from '../../lib/themeUpdater'
+import { highlightColorVar } from '../../lib/themeUpdater'
 import { ReadableItem } from '../../lib/networking/queries/useGetLibraryItemsQuery'
 import { UserBasicData } from '../../lib/networking/queries/useGetViewerQuery'
 import {
@@ -54,7 +50,6 @@ const StyledQuote = styled(Blockquote, {
 })
 
 export function HighlightView(props: HighlightViewProps): JSX.Element {
-  const isDark = isDarkTheme()
   const [noteMode, setNoteMode] = useState<'preview' | 'edit'>('preview')
   const [isOpen, setIsOpen] = useState(false)
 

packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx

@@ -1,8 +1,8 @@
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
-import { ChangeEvent, useMemo } from 'react'
+import { useMemo } from 'react'
 import { LibraryItemNode } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
-import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
+import { HStack, SpanBox } from '../../elements/LayoutPrimitives'
 import { RecommendedFlairIcon } from '../../elements/icons/RecommendedFlairIcon'
 import { PinnedFlairIcon } from '../../elements/icons/PinnedFlairIcon'
 import { FavoriteFlairIcon } from '../../elements/icons/FavoriteFlairIcon'

packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx

@@ -195,7 +195,7 @@ const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => {
   const handleCheckChanged = useCallback(() => {
     const newValue = !isChecked
     setIsChecked(item.id, newValue)
-  }, [setIsChecked, isChecked, props])
+  }, [item, setIsChecked, isChecked, props])
 
   return (
     <VStack css={{ p: '0px', m: '0px', width: '100%' }}>

packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx

@@ -4,14 +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 {
-  ArchiveBox,
-  DotsThree,
-  Notebook,
-  Tag,
-  Trash,
-  Tray,
-} from 'phosphor-react'
+import { DotsThree } from 'phosphor-react'
 import { CardMenu } from '../CardMenu'
 import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
 import { ArchiveIcon } from '../../elements/icons/ArchiveIcon'

packages/web/components/patterns/SettingsHeader.tsx

@@ -1,7 +1,5 @@
-import { Box, HStack } from '../elements/LayoutPrimitives'
-import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo'
+import { HStack } from '../elements/LayoutPrimitives'
 import { UserBasicData } from '../../lib/networking/queries/useGetViewerQuery'
-import { PrimaryDropdown } from '../templates/PrimaryDropdown'
 import { DEFAULT_HEADER_HEIGHT } from '../templates/homeFeed/HeaderSpacer'
 import { LogoBox } from '../elements/LogoBox'
 

packages/web/components/templates/PrimaryDropdown.tsx

@@ -131,10 +131,11 @@ export function PrimaryDropdown(props: PrimaryDropdownProps): JSX.Element {
 
   return (
     <Dropdown
+      side="top"
       triggerElement={
         props.children ?? <TriggerButton name={viewerData?.me?.name ?? 'O'} />
       }
-      css={{ width: '240px' }}
+      css={{ width: '240px', ml: '15px' }}
     >
       <HStack
         alignment="center"
@@ -278,7 +279,7 @@ function ThemeSection(props: PrimaryDropdownProps): JSX.Element {
       updateTheme(newTheme)
       setDisplayTheme(newTheme)
     },
-    [displayTheme, setDisplayTheme]
+    [setDisplayTheme]
   )
 
   return (

packages/web/components/templates/PrimaryLayout.tsx

@@ -7,10 +7,8 @@ import { useKeyboardShortcuts } from '../../lib/keyboardShortcuts/useKeyboardSho
 import { useRouter } from 'next/router'
 import { ConfirmationModal } from '../patterns/ConfirmationModal'
 import { KeyboardShortcutListModal } from './KeyboardShortcutListModal'
-import { logoutMutation } from '../../lib/networking/mutations/logoutMutation'
-import { deinitAnalytics, setupAnalytics } from '../../lib/analytics'
+import { setupAnalytics } from '../../lib/analytics'
 import { primaryCommands } from '../../lib/keyboardShortcuts/navigationShortcuts'
-import { applyStoredTheme } from '../../lib/themeUpdater'
 import { logout } from '../../lib/logout'
 import { useApplyLocalTheme } from '../../lib/hooks/useApplyLocalTheme'
 

packages/web/components/templates/article/AddBulkLabelsModal.tsx

@@ -28,9 +28,8 @@ export function AddBulkLabelsModal(
   const [tabCount, setTabCount] = useState(-1)
   const [inputValue, setInputValue] = useState('')
   const [tabStartValue, setTabStartValue] = useState('')
-  const [errorMessage, setErrorMessage] = useState<string | undefined>(
-    undefined
-  )
+  const [errorMessage, setErrorMessage] =
+    useState<string | undefined>(undefined)
   const errorTimeoutRef = useRef<NodeJS.Timeout | undefined>()
   const [highlightLastLabel, setHighlightLastLabel] = useState(false)
   const [isSaving, setIsSaving] = useState(false)

packages/web/components/templates/article/HighlightViewItem.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { Highlight } from '../../../lib/networking/fragments/highlightFragment'
 import { ReadableItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
 import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
-import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
+import { HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
 import { HighlightView } from '../../patterns/HighlightView'
 
 type HighlightViewItemProps = {