Warnings cleanup

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/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

@@ -279,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 = {

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

@@ -1,5 +1,4 @@
 import { Box, HStack, VStack, SpanBox } from '../../elements/LayoutPrimitives'
-import { StyledText } from '../../elements/StyledText'
 import { theme } from '../../tokens/stitches.config'
 import type { Highlight } from '../../../lib/networking/fragments/highlightFragment'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
@@ -17,7 +16,6 @@ import { TrashIcon } from '../../elements/icons/TrashIcon'
 import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
 import { ReadableItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
 import { SetHighlightLabelsModalPresenter } from './SetLabelsModalPresenter'
-import { Button } from '../../elements/Button'
 import { ArticleNotes } from '../../patterns/ArticleNotes'
 import { useGetArticleQuery } from '../../../lib/networking/queries/useGetArticleQuery'
 import { formattedShortTime } from '../../../lib/dateFormatting'
@@ -59,9 +57,8 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
   const [noteText, setNoteText] = useState<string>('')
   const [showConfirmDeleteHighlightId, setShowConfirmDeleteHighlightId] =
     useState<undefined | string>(undefined)
-  const [labelsTarget, setLabelsTarget] = useState<Highlight | undefined>(
-    undefined
-  )
+  const [labelsTarget, setLabelsTarget] =
+    useState<Highlight | undefined>(undefined)
   const noteState = useRef<NoteState>({
     isCreating: false,
     note: undefined,
@@ -87,34 +84,37 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
         }
       })()
     },
-    []
+    [props]
   )
 
-  const createNote = useCallback((text: string) => {
-    noteState.current.isCreating = true
-    noteState.current.createStarted = new Date()
-    ;(async () => {
-      try {
-        const success = await createHighlightMutation({
-          id: newNoteId,
-          shortId: nanoid(8),
-          type: 'NOTE',
-          articleId: props.item.id,
-          annotation: text,
-        })
-        if (success) {
-          noteState.current.note = success
+  const createNote = useCallback(
+    (text: string) => {
+      noteState.current.isCreating = true
+      noteState.current.createStarted = new Date()
+      ;(async () => {
+        try {
+          const success = await createHighlightMutation({
+            id: newNoteId,
+            shortId: nanoid(8),
+            type: 'NOTE',
+            articleId: props.item.id,
+            annotation: text,
+          })
+          if (success) {
+            noteState.current.note = success
+            noteState.current.isCreating = false
+          } else {
+            setErrorSaving('Error creating note')
+          }
+        } catch (error) {
+          console.error('error creating note: ', error)
           noteState.current.isCreating = false
-        } else {
           setErrorSaving('Error creating note')
         }
-      } catch (error) {
-        console.error('error creating note: ', error)
-        noteState.current.isCreating = false
-        setErrorSaving('Error creating note')
-      }
-    })()
-  }, [])
+      })()
+    },
+    [props, newNoteId]
+  )
 
   const highlights = useMemo(() => {
     const result = articleData?.article.article.highlights
@@ -133,7 +133,7 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
     if (highlights && props.onAnnotationsChanged) {
       props.onAnnotationsChanged(highlights)
     }
-  }, [highlights])
+  }, [props, highlights])
 
   const sortedHighlights = useMemo(() => {
     const sorted = (a: number, b: number) => {
@@ -188,7 +188,7 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
       }
       createNote(text)
     },
-    [noteText, noteState, createNote, updateNote, highlights]
+    [noteState, createNote, updateNote]
   )
 
   const deleteDocumentNote = useCallback(() => {
@@ -204,7 +204,7 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
       noteState.current.note = undefined
     })()
     setNoteText('')
-  }, [noteState, highlights])
+  }, [props, noteState, highlights])
 
   const [errorSaving, setErrorSaving] = useState<string | undefined>(undefined)
   const [lastChanged, setLastChanged] = useState<Date | undefined>(undefined)

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

@@ -4,7 +4,7 @@ import { Sidebar } from 'phosphor-react'
 import { theme } from '../../tokens/stitches.config'
 import { Button } from '../../elements/Button'
 import { ExportIcon } from '../../elements/icons/ExportIcon'
-import { useCallback, useMemo } from 'react'
+import { useCallback } from 'react'
 import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
 import { ReadableItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
 import { useGetArticleQuery } from '../../../lib/networking/queries/useGetArticleQuery'

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

@@ -9,7 +9,7 @@ import { StyledText } from '../../elements/StyledText'
 import { theme } from '../../tokens/stitches.config'
 import type { Highlight } from '../../../lib/networking/fragments/highlightFragment'
 import { useCallback, useState } from 'react'
-import { ArrowsIn, ArrowsOut, X } from 'phosphor-react'
+import { X } from 'phosphor-react'
 import { Dropdown, DropdownOption } from '../../elements/DropdownElements'
 import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
 import { diff_match_patch } from 'diff-match-patch'
@@ -37,17 +37,15 @@ export const getHighlightLocation = (patch: string): number | undefined => {
 
 export function NotebookModal(props: NotebookModalProps): JSX.Element {
   const [showConfirmDeleteNote, setShowConfirmDeleteNote] = useState(false)
-  const [allAnnotations, setAllAnnotations] = useState<Highlight[] | undefined>(
-    undefined
-  )
+  const [allAnnotations, setAllAnnotations] =
+    useState<Highlight[] | undefined>(undefined)
 
-  const [deletedHighlights, setDeletedAnnotations] = useState<
-    Highlight[] | undefined
-  >(undefined)
+  const [deletedHighlights, setDeletedAnnotations] =
+    useState<Highlight[] | undefined>(undefined)
 
   const handleClose = useCallback(() => {
     props.onClose(allAnnotations ?? [], deletedHighlights ?? [])
-  }, [props, allAnnotations])
+  }, [props, allAnnotations, deletedHighlights])
 
   const handleAnnotationsChange = useCallback((allAnnotations: Highlight[]) => {
     setAllAnnotations(allAnnotations)
@@ -161,11 +159,6 @@ export function NotebookModal(props: NotebookModalProps): JSX.Element {
   )
 }
 
-type SizeToggleProps = {
-  mode: 'normal' | 'maximized'
-  setMode: (mode: 'normal' | 'maximized') => void
-}
-
 function CloseButton(props: { close: () => void }): JSX.Element {
   return (
     <Button

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

@@ -13,15 +13,10 @@ import { TickedRangeSlider } from '../../elements/TickedRangeSlider'
 import { showSuccessToast } from '../../../lib/toastHelpers'
 import { ReaderSettings } from '../../../lib/hooks/useReaderSettings'
 import { useCallback, useState } from 'react'
-import {
-  getCurrentLocalTheme,
-  currentThemeName,
-  updateTheme,
-} from '../../../lib/themeUpdater'
+import { updateTheme } from '../../../lib/themeUpdater'
 import { LineHeightIncreaseIcon } from '../../elements/images/LineHeightIncreaseIconProps'
 import { LineHeightDecreaseIcon } from '../../elements/images/LineHeightDecreaseIcon'
 import * as Switch from '@radix-ui/react-switch'
-import { Checkbox } from '@radix-ui/react-checkbox'
 import { useCurrentTheme } from '../../../lib/hooks/useCurrentTheme'
 import { useDarkModeListener } from '../../../lib/hooks/useDarkModeListener'
 
@@ -571,7 +566,7 @@ function LayoutControls(props: LayoutControlsProps): JSX.Element {
 }
 
 function ThemeSelector(): JSX.Element {
-  const isDarkMode = useDarkModeListener()
+  useDarkModeListener()
   const { currentTheme, setCurrentTheme, resetSystemTheme } = useCurrentTheme()
 
   return (

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

@@ -241,7 +241,7 @@ function Footer(props: FooterProps): JSX.Element {
             alignment="center"
             distribution="start"
             css={{ gap: '8px', fontSize: '12px', pointer: 'cursor' }}
-            onClick={async (event) => {
+            onClick={async () => {
               switch (textMatch) {
                 case 'available':
                   await props.selectEnteredLabel()
@@ -414,7 +414,6 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element {
       filteredLabels,
       focusedIndex,
       createLabelFromFilterText,
-      router,
       toggleLabel,
     ]
   )
@@ -423,7 +422,7 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element {
     const _filterText = inputValue
     setInputValue('')
     return createLabelFromFilterText(_filterText)
-  }, [inputValue])
+  }, [inputValue, setInputValue, createLabelFromFilterText])
 
   const selectEnteredLabel = useCallback(() => {
     const label = labels.find(
@@ -433,7 +432,7 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element {
       return Promise.resolve()
     }
     return toggleLabel(label)
-  }, [labels, inputValue])
+  }, [labels, inputValue, toggleLabel])
 
   return (
     <VStack

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

@@ -1,8 +1,6 @@
-import { Tray } from 'phosphor-react'
 import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticleQuery'
 import { Button } from '../../elements/Button'
 import { HStack } from '../../elements/LayoutPrimitives'
-import { TooltipWrapped } from '../../elements/Tooltip'
 import { theme } from '../../tokens/stitches.config'
 import { ReaderDropdownMenu } from '../../patterns/ReaderDropdownMenu'
 import { ArchiveIcon } from '../../elements/icons/ArchiveIcon'

packages/web/components/templates/homeFeed/AddLinkModal.tsx

@@ -1,22 +1,17 @@
 import { useCallback, useRef, useState } from 'react'
 import * as Progress from '@radix-ui/react-progress'
 import { File, Info } from 'phosphor-react'
-import toast from 'react-hot-toast'
 import { locale, timeZone } from '../../../lib/dateFormatting'
-import { saveUrlMutation } from '../../../lib/networking/mutations/saveUrlMutation'
 import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
 import { Button } from '../../elements/Button'
 import { FormInput } from '../../elements/FormElements'
 import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
 import {
-  ModalButtonBar,
   ModalContent,
   ModalOverlay,
   ModalRoot,
-  ModalTitleBar,
 } from '../../elements/ModalPrimitives'
 import { CloseButton } from '../../elements/CloseButton'
-import { StyledText } from '../../elements/StyledText'
 import { styled } from '@stitches/react'
 import Dropzone, {
   Accept,
@@ -95,7 +90,7 @@ const AddLinkTab = (props: AddLinkModalProps): JSX.Element => {
       await props.handleLinkSubmission(link, timeZone, locale)
       props.onOpenChange(false)
     },
-    [errorMessage, setErrorMessage]
+    [props, errorMessage, setErrorMessage]
   )
 
   return (
@@ -144,7 +139,7 @@ const AddFeedTab = (props: AddLinkModalProps): JSX.Element => {
       showSuccessToast('New feed has been added.')
       props.onOpenChange(false)
     },
-    [errorMessage, setErrorMessage]
+    [props, errorMessage, setErrorMessage]
   )
 
   return (
@@ -167,20 +162,17 @@ type AddFromURLProps = {
 const AddFromURL = (props: AddFromURLProps): JSX.Element => {
   const [url, setURL] = useState('')
 
-  const validateURL = useCallback(
-    (link: string) => {
-      try {
-        const url = new URL(link)
-        if (url.protocol !== 'https:' && url.protocol !== 'http:') {
-          return false
-        }
-      } catch (e) {
+  const validateURL = useCallback((link: string) => {
+    try {
+      const url = new URL(link)
+      if (url.protocol !== 'https:' && url.protocol !== 'http:') {
         return false
       }
-      return true
-    },
-    [url]
-  )
+    } catch (e) {
+      return false
+    }
+    return true
+  }, [])
 
   return (
     <VStack css={{ width: '100%', height: '180px' }}>
@@ -258,7 +250,7 @@ const AddFromURL = (props: AddFromURLProps): JSX.Element => {
   )
 }
 
-const UploadOPMLTab = (props: AddLinkModalProps): JSX.Element => {
+const UploadOPMLTab = (): JSX.Element => {
   return (
     <VStack
       alignment="start"
@@ -278,7 +270,7 @@ const UploadOPMLTab = (props: AddLinkModalProps): JSX.Element => {
   )
 }
 
-const UploadPDFTab = (props: AddLinkModalProps): JSX.Element => {
+const UploadPDFTab = (): JSX.Element => {
   return (
     <VStack
       alignment="start"

packages/web/components/templates/homeFeed/HeaderSpacer.tsx

@@ -1,29 +1,8 @@
-import { usePersistedState } from '../../../lib/hooks/usePersistedState'
-import { PinnedSearch } from '../../../pages/settings/pinned-searches'
 import { Box } from '../../elements/LayoutPrimitives'
 
 export const DEFAULT_HEADER_HEIGHT = '85px'
 
-// export const useGetHeaderHeight = () => {
-//   const [hidePinnedSearches] = usePersistedState({
-//     key: '--library-hide-pinned-searches',
-//     initialValue: false,
-//     isSessionStorage: false,
-//   })
-//   const [pinnedSearches] = usePersistedState<PinnedSearch[] | null>({
-//     key: `--library-pinned-searches`,
-//     initialValue: [],
-//     isSessionStorage: false,
-//   })
-
-//   if (hidePinnedSearches || !pinnedSearches?.length) {
-//     return '90px'
-//   }
-//   return '90px'
-// }
-
 export function HeaderSpacer(): JSX.Element {
-  // const headerHeight = useGetHeaderHeight()
   return (
     <Box
       css={{

packages/web/components/templates/homeFeed/HomeFeedContainer.tsx

@@ -46,6 +46,7 @@ import { SetPageLabelsModalPresenter } from '../article/SetLabelsModalPresenter'
 import { NotebookPresenter } from '../article/NotebookPresenter'
 import { saveUrlMutation } from '../../../lib/networking/mutations/saveUrlMutation'
 import { articleQuery } from '../../../lib/networking/queries/useGetArticleQuery'
+import { PinnedButtons } from './PinnedButtons'
 
 export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT'
 export type LibraryMode = 'reads' | 'highlights'

packages/web/components/templates/homeFeed/LibraryHeader.tsx

@@ -17,10 +17,7 @@ import { Label } from '../../../lib/networking/fragments/labelFragment'
 import { ArchiveIcon } from '../../elements/icons/ArchiveIcon'
 import { TrashIcon } from '../../elements/icons/TrashIcon'
 import { LabelIcon } from '../../elements/icons/LabelIcon'
-import {
-  HeaderCheckboxCheckedIcon,
-  HeaderCheckboxIcon,
-} from '../../elements/icons/HeaderCheckboxIcon'
+import { HeaderCheckboxIcon } from '../../elements/icons/HeaderCheckboxIcon'
 import { HeaderSearchIcon } from '../../elements/icons/HeaderSearchIcon'
 import { HeaderToggleGridIcon } from '../../elements/icons/HeaderToggleGridIcon'
 import { HeaderToggleListIcon } from '../../elements/icons/HeaderToggleListIcon'
@@ -565,82 +562,5 @@ function MultiSelectControls(props: ControlButtonBoxProps): JSX.Element {
         </Button>
       </HStack>
     </Box>
-
-    // <HStack
-    //   alignment="center"
-    //   distribution="center"
-    //   css={{ gap: '20px', width: '100% ' }}
-    // >
-    //   <Button
-    //     style="outline"
-    //     onClick={(e) => {
-    //       props.performMultiSelectAction(BulkAction.ARCHIVE)
-    //       e.preventDefault()
-    //     }}
-    //   >
-    //     <ArchiveIcon
-    //       size={20}
-    //       color={theme.colors.thTextContrast2.toString()}
-    //     />
-    //     <SpanBox css={{ '@lgDown': { display: 'none' } }}>Archive</SpanBox>
-    //   </Button>
-    //   <Button
-    //     style="outline"
-    //     onClick={(e) => {
-    //       setShowLabelsModal(true)
-    //       e.preventDefault()
-    //     }}
-    //   >
-    //     <LabelIcon size={20} color={theme.colors.thTextContrast2.toString()} />
-    //     <SpanBox css={{ '@lgDown': { display: 'none' } }}>Add Labels</SpanBox>
-    //   </Button>
-    //   <Button
-    //     style="outline"
-    //     onClick={(e) => {
-    //       setShowConfirmDelete(true)
-    //       e.preventDefault()
-    //     }}
-    //   >
-    //     <TrashIcon size={20} color={theme.colors.thTextContrast2.toString()} />
-    //     <SpanBox css={{ '@lgDown': { display: 'none' } }}>Delete</SpanBox>
-    //   </Button>
-    //   <Button
-    //     style="cancel"
-    //     onClick={(e) => {
-    //       props.setMultiSelectMode('off')
-    //       e.preventDefault()
-    //     }}
-    //   >
-    //     <Prohibit
-    //       width={20}
-    //       height={20}
-    //       color={theme.colors.thTextContrast2.toString()}
-    //     />
-    //     <SpanBox css={{ '@lgDown': { display: 'none' } }}>Cancel</SpanBox>
-    //   </Button>
-    //   {showConfirmDelete && (
-    //     <ConfirmationModal
-    //       message={`You are about to delete ${props.numItemsSelected} items. All associated notes and highlights will be deleted.`}
-    //       acceptButtonLabel={'Delete'}
-    //       onAccept={() => {
-    //         props.performMultiSelectAction(BulkAction.DELETE)
-    //       }}
-    //       onOpenChange={(open: boolean) => {
-    //         setShowConfirmDelete(false)
-    //       }}
-    //     />
-    //   )}
-    //   {showLabelsModal && (
-    //     <AddBulkLabelsModal
-    //       bulkSetLabels={(labels: Label[]) => {
-    //         const labelIds = labels.map((l) => l.id)
-    //         props.performMultiSelectAction(BulkAction.ADD_LABELS, labelIds)
-    //       }}
-    //       onOpenChange={(open: boolean) => {
-    //         setShowLabelsModal(false)
-    //       }}
-    //     />
-    //   )}
-    // </HStack>
   )
 }

packages/web/components/templates/homeFeed/LibrarySearchBar.tsx

@@ -1,185 +0,0 @@
-import { ReactNode, useEffect, useRef, useState } from 'react'
-import { StyledText } from '../../elements/StyledText'
-import { Box, HStack, VStack } from '../../elements/LayoutPrimitives'
-import { SearchIcon } from '../../elements/images/SearchIcon'
-import { theme } from '../../tokens/stitches.config'
-import { Dropdown, DropdownOption } from '../../elements/DropdownElements'
-import { FormInput } from '../../elements/FormElements'
-import { searchBarCommands } from '../../../lib/keyboardShortcuts/navigationShortcuts'
-import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts'
-import { Button } from '../../elements/Button'
-import { X } from 'phosphor-react'
-
-type LibrarySearchBarProps = {
-  searchTerm?: string
-  applySearchQuery: (searchQuery: string) => void
-}
-
-type LibraryFilter =
-  | 'in:inbox'
-  | 'in:all'
-  | 'in:archive'
-  | 'type:file'
-  | 'type:highlights'
-  | `saved:${string}`
-  | `sort:read`
-
-// get last week's date
-const recentlySavedStartDate = new Date(
-  new Date().getTime() - 7 * 24 * 60 * 60 * 1000
-).toLocaleDateString('en-US')
-
-const FOCUSED_BOXSHADOW = '0px 0px 2px 2px rgba(255, 234, 159, 0.56)'
-
-export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element {
-  const [focused, setFocused] = useState(false)
-  const inputRef = useRef<HTMLInputElement>(null)
-  const [searchTerm, setSearchTerm] = useState(props.searchTerm || '')
-
-  useEffect(() => {
-    setSearchTerm(props.searchTerm || '')
-  }, [props.searchTerm])
-
-  return (
-    <VStack css={{ width: '100%' }}>
-      <HStack
-        alignment="center"
-        distribution="start"
-        css={{
-          bg: '$grayBg',
-          width: '100%',
-          borderRadius: '8px',
-          flex: 1,
-          border: '1px solid $grayBorder',
-          maxHeight: '40px',
-          boxShadow: focused ? FOCUSED_BOXSHADOW : 'unset',
-        }}
-      >
-        <DropdownFilterMenu
-          triggerElement={
-            <HStack
-              alignment="center"
-              distribution="between"
-              css={{
-                width: '5em',
-                height: '100%',
-                bg: '$grayBgActive',
-                px: '$3',
-                borderRadius: '8px 0px 0px 8px',
-                '&:hover:': { bg: '$grayBgHover' },
-              }}
-            >
-              <StyledText style="controlButton" css={{ m: '8px', ml: '0px' }}>
-                Filters
-              </StyledText>
-              <Box
-                css={{ width: '8px', color: '$grayText' }}
-                className="dropdown-arrow"
-              />
-            </HStack>
-          }
-          onFilterChange={(filter: LibraryFilter) => {
-            props.applySearchQuery(filter)
-          }}
-        />
-        <Box css={{ mx: '$2', pt: '$1' }}>
-          <span>
-            <SearchIcon strokeColor={theme.colors.graySolid.toString()} />
-          </span>
-        </Box>
-        <Box css={{ width: '100%' }}>
-          <form
-            onSubmit={(event) => {
-              event.preventDefault()
-              props.applySearchQuery(searchTerm || '')
-              inputRef.current?.blur()
-            }}
-          >
-            <FormInput
-              ref={inputRef}
-              type="text"
-              value={searchTerm}
-              placeholder="Search"
-              onFocus={(event) => {
-                event.target.select()
-                setFocused(true)
-              }}
-              onBlur={() => {
-                setFocused(false)
-              }}
-              onChange={(event) => {
-                setSearchTerm(event.target.value)
-              }}
-            />
-          </form>
-        </Box>
-        {searchTerm && (
-          <Button
-            style="plainIcon"
-            onClick={(event) => {
-              event.preventDefault()
-              setSearchTerm('')
-              props.applySearchQuery('')
-              inputRef.current?.blur()
-            }}
-            css={{
-              display: 'flex',
-              flexDirection: 'row',
-              mr: '8px',
-              height: '100%',
-              alignItems: 'center',
-            }}
-          >
-            <X
-              width={16}
-              height={16}
-              color={theme.colors.grayTextContrast.toString()}
-            />
-          </Button>
-        )}
-      </HStack>
-    </VStack>
-  )
-}
-
-type DropdownFilterMenuProps = {
-  triggerElement: ReactNode
-  onFilterChange: (filter: LibraryFilter) => void
-}
-
-export function DropdownFilterMenu(
-  props: DropdownFilterMenuProps
-): JSX.Element {
-  return (
-    <Dropdown triggerElement={props.triggerElement}>
-      <DropdownOption
-        onSelect={() => props.onFilterChange('in:inbox')}
-        title="Inbox"
-      />
-      <DropdownOption
-        onSelect={() => props.onFilterChange('in:all')}
-        title="All"
-      />
-      <DropdownOption
-        onSelect={() => props.onFilterChange('in:archive')}
-        title="Archived"
-      />
-      <DropdownOption
-        onSelect={() => props.onFilterChange('type:file')}
-        title="Files"
-      />
-      <DropdownOption
-        onSelect={() => props.onFilterChange('type:highlights')}
-        title="Highlights"
-      />
-      <DropdownOption
-        onSelect={() => props.onFilterChange(`saved:${recentlySavedStartDate}`)}
-        title="Recently Saved"
-      />
-      <DropdownOption
-        onSelect={() => props.onFilterChange(`sort:read`)}
-        title="Recently Read"
-      />
-    </Dropdown>
-  )
-}

packages/web/components/templates/homeFeed/PinnedButtons.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { HStack, SpanBox } from '../../elements/LayoutPrimitives'
 import { theme } from '../../tokens/stitches.config'
 import { Button } from '../../elements/Button'

packages/web/components/templates/navMenu/LibraryMenu.tsx

@@ -19,9 +19,6 @@ import { SavedSearch } from '../../../lib/networking/fragments/savedSearchFragme
 import { ToggleCaretDownIcon } from '../../elements/icons/ToggleCaretDownIcon'
 import Link from 'next/link'
 import { ToggleCaretRightIcon } from '../../elements/icons/ToggleCaretRightIcon'
-import { SplitButton } from '../../elements/SplitButton'
-import { AvatarDropdown } from '../../elements/AvatarDropdown'
-import { PrimaryDropdown } from '../PrimaryDropdown'
 import { NavMenuFooter } from './Footer'
 
 export const LIBRARY_LEFT_MENU_WIDTH = '275px'

packages/web/components/templates/settings/SettingsTable.tsx

@@ -8,7 +8,6 @@ import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
 import { StyledText } from '../../elements/StyledText'
 import { theme } from '../../tokens/stitches.config'
 import { SettingsLayout } from '../SettingsLayout'
-import { SuggestionBox } from '../../elements/SuggestionBox'
 import { usePersistedState } from '../../../lib/hooks/usePersistedState'
 import { FeatureHelpBox } from '../../elements/FeatureHelpBox'
 

packages/web/lib/hooks/useCopyLink.tsx

@@ -14,10 +14,10 @@ export const useCopyLink = (
     url || (typeof window !== 'undefined' ? window.location.toString() : '')
 
   const copyLink = useCallback(async (): Promise<void> => {
-    const res = await navigator.clipboard.writeText(link)
+    await navigator.clipboard.writeText(link)
     setIsLinkCopied(true)
     window.setTimeout(() => setIsLinkCopied(false), 5000)
-  }, [link, type])
+  }, [link])
 
   return { link, copyLink, isLinkCopied }
 }

packages/web/lib/hooks/useCurrentTheme.tsx

@@ -72,7 +72,12 @@ export function useCurrentTheme() {
       setCurrentThemeInternal(themeId)
       updateThemeLocally(themeId)
     },
-    [setCurrentThemeInternal]
+    [
+      currentThemeInternal,
+      setCurrentThemeInternal,
+      setPreferredDarkTheme,
+      setPreferredLightTheme,
+    ]
   )
 
   // This is used when the user disables "System" theme

packages/web/lib/hooks/useReaderSettings.tsx

@@ -39,8 +39,6 @@ export type ReaderSettings = {
 export const useReaderSettings = (): ReaderSettings => {
   applyStoredTheme()
 
-  const [, updateState] = useState({})
-
   const [fontSize, setFontSize] = usePersistedState({
     key: 'fontSize',
     initialValue: 20,

packages/web/lib/hooks/useSetPageLabels.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useReducer, useRef } from 'react'
+import { useCallback, useEffect, useReducer } from 'react'
 import { setLabelsMutation } from '../networking/mutations/setLabelsMutation'
 import { Label } from '../networking/fragments/labelFragment'
 import { showErrorToast } from '../toastHelpers'

packages/web/lib/networking/mutations/updateUserProfileMutation.ts

@@ -1,6 +1,5 @@
 import { gql } from 'graphql-request'
 import { gqlFetcher } from '../networkHelpers'
-import { State } from '../fragments/articleFragment'
 
 export type UpdateUserProfileInput = {
   userId: string

packages/web/package.json

@@ -32,7 +32,6 @@
     "@stitches/react": "^1.2.5",
     "antd": "4.24.3",
     "axios": "^1.2.0",
-    "color2k": "^2.0.0",
     "cookie": "^0.5.0",
     "csv-file-validator": "^2.1.0",
     "dayjs": "^1.11.7",

packages/web/pages/[username]/[slug]/debug.tsx

@@ -1,16 +1,7 @@
 import { useRouter } from 'next/router'
-import {
-  useGetArticleQuery,
-  ArticleAttributes,
-} from '../../../lib/networking/queries/useGetArticleQuery'
+import { useGetArticleQuery } from '../../../lib/networking/queries/useGetArticleQuery'
 import { applyStoredTheme } from '../../../lib/themeUpdater'
 import { useMemo } from 'react'
-import {
-  EmptySettingsRow,
-  SettingsTable,
-  SettingsTableRow,
-} from '../../../components/templates/settings/SettingsTable'
-import { StyledText } from '../../../components/elements/StyledText'
 import {
   Box,
   HStack,

packages/web/pages/app/[username]/[slug]/index.tsx

@@ -1,9 +1,8 @@
 import { useGetArticleQuery } from '../../../../lib/networking/queries/useGetArticleQuery'
 import { Box, VStack } from './../../../../components/elements/LayoutPrimitives'
 import { ArticleContainer } from './../../../../components/templates/article/ArticleContainer'
-import { useRef, useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 import { useRouter } from 'next/router'
-import { webBaseURL } from '../../../../lib/appConfig'
 import { LoadingView } from '../../../../components/patterns/LoadingView'
 import { cookieValue } from '../../../../lib/cookieHelpers'
 import { applyStoredTheme } from '../../../../lib/themeUpdater'

packages/web/pages/settings/delete-my-account.tsx

@@ -9,7 +9,7 @@ import { SettingsLayout } from '../../components/templates/SettingsLayout'
 
 import { ConfirmationModal } from '../../components/patterns/ConfirmationModal'
 import { Button } from '../../components/elements/Button'
-import { HStack, VStack } from '../../components/elements/LayoutPrimitives'
+import { VStack } from '../../components/elements/LayoutPrimitives'
 import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
 import { Loader } from '../../components/templates/SavingRequest'
 import { deleteAccountMutation } from '../../lib/networking/mutations/deleteAccountMutation'

packages/web/pages/settings/emails/index.tsx

@@ -22,7 +22,6 @@ import {
   SettingsTableRow,
 } from '../../../components/templates/settings/SettingsTable'
 import { ConfirmationModal } from '../../../components/patterns/ConfirmationModal'
-import { SuggestionBox } from '../../../components/elements/SuggestionBox'
 
 enum TextType {
   EmailAddress,

packages/web/pages/settings/labels.tsx

@@ -17,13 +17,7 @@ import { applyStoredTheme, isDarkTheme } from '../../lib/themeUpdater'
 import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
 import { Label, LabelColor } from '../../lib/networking/fragments/labelFragment'
 import { StyledText } from '../../components/elements/StyledText'
-import {
-  ArrowClockwise,
-  DotsThree,
-  PencilSimple,
-  Trash,
-  Plus,
-} from 'phosphor-react'
+import { ArrowClockwise, DotsThree, PencilSimple, Trash } from 'phosphor-react'
 import { GenericTableCardProps } from '../../utils/settings-page/labels/types'
 import { labelColorObjects } from '../../utils/settings-page/labels/labelColorObjects'
 import { TooltipWrapped } from '../../components/elements/Tooltip'
@@ -35,7 +29,6 @@ import {
 import { LabelChip } from '../../components/elements/LabelChip'
 import { ConfirmationModal } from '../../components/patterns/ConfirmationModal'
 import { InfoLink } from '../../components/elements/InfoLink'
-import { SuggestionBox } from '../../components/elements/SuggestionBox'
 import { usePersistedState } from '../../lib/hooks/usePersistedState'
 import { FeatureHelpBox } from '../../components/elements/FeatureHelpBox'
 

yarn.lock

@@ -11842,11 +11842,6 @@ color-support@^1.1.2, color-support@^1.1.3:
   resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
   integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
 
-color2k@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/color2k/-/color2k-2.0.2.tgz#ac2b4aea11c822a6bcb70c768b5a289f4fffcebb"
-  integrity sha512-kJhwH5nAwb34tmyuqq/lgjEKzlFXn1U99NlnB6Ws4qVaERcRUYeYP1cBw6BJ4vxaWStAUEef4WMr7WjOCnBt8w==
-
 color@3.0.x:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/color/-/color-3.0.0.tgz#d920b4328d534a3ac8295d68f7bd4ba6c427be9a"