diff --git a/packages/web/components/templates/navMenu/LibraryLegacyMenu.tsx b/packages/web/components/templates/navMenu/LibraryLegacyMenu.tsx
index 7fa8dcf8a..20a31c0be 100644
--- a/packages/web/components/templates/navMenu/LibraryLegacyMenu.tsx
+++ b/packages/web/components/templates/navMenu/LibraryLegacyMenu.tsx
@@ -1,24 +1,25 @@
+import { useRegisterActions } from 'kbar'
+import Link from 'next/link'
+import { Circle, X } from 'phosphor-react'
import { ReactNode, useEffect, useMemo, useRef } from 'react'
-import { StyledText } from '../../elements/StyledText'
-import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
-import { Button } from '../../elements/Button'
-import { Circle, NewspaperClipping, X } from 'phosphor-react'
+import { usePersistedState } from '../../../lib/hooks/usePersistedState'
+import { Label } from '../../../lib/networking/fragments/labelFragment'
+import { SavedSearch } from '../../../lib/networking/fragments/savedSearchFragment'
+import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery'
+import { useGetSavedSearchQuery } from '../../../lib/networking/queries/useGetSavedSearchQuery'
import {
Subscription,
SubscriptionType,
useGetSubscriptionsQuery,
} from '../../../lib/networking/queries/useGetSubscriptionsQuery'
-import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery'
-import { Label } from '../../../lib/networking/fragments/labelFragment'
-import { theme } from '../../tokens/stitches.config'
-import { useRegisterActions } from 'kbar'
-import { LogoBox } from '../../elements/LogoBox'
-import { usePersistedState } from '../../../lib/hooks/usePersistedState'
-import { useGetSavedSearchQuery } from '../../../lib/networking/queries/useGetSavedSearchQuery'
-import { SavedSearch } from '../../../lib/networking/fragments/savedSearchFragment'
+import { escapeQuotes } from '../../../utils/helper'
+import { Button } from '../../elements/Button'
import { ToggleCaretDownIcon } from '../../elements/icons/ToggleCaretDownIcon'
-import Link from 'next/link'
import { ToggleCaretRightIcon } from '../../elements/icons/ToggleCaretRightIcon'
+import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
+import { LogoBox } from '../../elements/LogoBox'
+import { StyledText } from '../../elements/StyledText'
+import { theme } from '../../tokens/stitches.config'
import { NavMenuFooter } from './Footer'
export const LIBRARY_LEFT_MENU_WIDTH = '275px'
@@ -255,7 +256,7 @@ function Subscriptions(
name: name,
keywords: '*' + name,
perform: () => {
- props.applySearchQuery(`subscription:\"${name}\"`)
+ props.applySearchQuery(`subscription:\"${escapeQuotes(name)}\"`)
},
}
}),
@@ -291,7 +292,9 @@ function Subscriptions(
return (
diff --git a/packages/web/components/templates/navMenu/LibraryMenu.tsx b/packages/web/components/templates/navMenu/LibraryMenu.tsx
index 7a48e621b..0da615ab0 100644
--- a/packages/web/components/templates/navMenu/LibraryMenu.tsx
+++ b/packages/web/components/templates/navMenu/LibraryMenu.tsx
@@ -1,36 +1,37 @@
-import { ReactNode, useEffect, useMemo, useRef, useState } from "react"
-import { StyledText } from '../../elements/StyledText'
-import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
-import { Button } from '../../elements/Button'
+import { useRegisterActions } from 'kbar'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
import { Circle, DotsThree, MagnifyingGlass, X } from 'phosphor-react'
+import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
+import { usePersistedState } from '../../../lib/hooks/usePersistedState'
+import { Label } from '../../../lib/networking/fragments/labelFragment'
+import { SavedSearch } from '../../../lib/networking/fragments/savedSearchFragment'
+import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery'
+import { useGetSavedSearchQuery } from '../../../lib/networking/queries/useGetSavedSearchQuery'
import {
Subscription,
SubscriptionType,
useGetSubscriptionsQuery,
} from '../../../lib/networking/queries/useGetSubscriptionsQuery'
-import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery'
-import { Label } from '../../../lib/networking/fragments/labelFragment'
-import { theme } from '../../tokens/stitches.config'
-import { useRegisterActions } from 'kbar'
-import { LogoBox } from '../../elements/LogoBox'
-import { usePersistedState } from '../../../lib/hooks/usePersistedState'
-import { useGetSavedSearchQuery } from '../../../lib/networking/queries/useGetSavedSearchQuery'
-import { SavedSearch } from '../../../lib/networking/fragments/savedSearchFragment'
-import { ToggleCaretDownIcon } from '../../elements/icons/ToggleCaretDownIcon'
-import Link from 'next/link'
-import { ToggleCaretRightIcon } from '../../elements/icons/ToggleCaretRightIcon'
-import { NavMenuFooter } from './Footer'
+import { Shortcut } from '../../../pages/settings/shortcuts'
+import { escapeQuotes } from '../../../utils/helper'
+import { Button } from '../../elements/Button'
+import { CoverImage } from '../../elements/CoverImage'
+import { Dropdown, DropdownOption } from '../../elements/DropdownElements'
+import { DiscoverIcon } from '../../elements/icons/DiscoverIcon'
import { FollowingIcon } from '../../elements/icons/FollowingIcon'
+import { HighlightsIcon } from '../../elements/icons/HighlightsIcon'
import { HomeIcon } from '../../elements/icons/HomeIcon'
import { LibraryIcon } from '../../elements/icons/LibraryIcon'
-import { HighlightsIcon } from '../../elements/icons/HighlightsIcon'
-import { CoverImage } from '../../elements/CoverImage'
-import { Shortcut } from '../../../pages/settings/shortcuts'
-import { OutlinedLabelChip } from '../../elements/OutlinedLabelChip'
import { NewsletterIcon } from '../../elements/icons/NewsletterIcon'
-import { Dropdown, DropdownOption } from '../../elements/DropdownElements'
-import { useRouter } from 'next/router'
-import { DiscoverIcon } from "../../elements/icons/DiscoverIcon"
+import { ToggleCaretDownIcon } from '../../elements/icons/ToggleCaretDownIcon'
+import { ToggleCaretRightIcon } from '../../elements/icons/ToggleCaretRightIcon'
+import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
+import { LogoBox } from '../../elements/LogoBox'
+import { OutlinedLabelChip } from '../../elements/OutlinedLabelChip'
+import { StyledText } from '../../elements/StyledText'
+import { theme } from '../../tokens/stitches.config'
+import { NavMenuFooter } from './Footer'
export const LIBRARY_LEFT_MENU_WIDTH = '275px'
@@ -221,7 +222,7 @@ const LibraryNav = (props: LibraryFilterMenuProps): JSX.Element => {
}
/>
@@ -545,7 +546,7 @@ function Subscriptions(
name: name,
keywords: '*' + name,
perform: () => {
- props.applySearchQuery(`subscription:\"${name}\"`)
+ props.applySearchQuery(`subscription:\"${escapeQuotes(name)}\"`)
},
}
}),
@@ -581,7 +582,9 @@ function Subscriptions(
return (
@@ -735,7 +738,7 @@ type NavButtonRedirectProps = {
}
function NavRedirectButton(props: NavButtonRedirectProps): JSX.Element {
- const [selected, setSelected] = useState(false);
+ const [selected, setSelected] = useState(false)
const router = useRouter()
useEffect(() => {
diff --git a/packages/web/pages/settings/shortcuts.tsx b/packages/web/pages/settings/shortcuts.tsx
index 1ee7d39f0..7d1879156 100644
--- a/packages/web/pages/settings/shortcuts.tsx
+++ b/packages/web/pages/settings/shortcuts.tsx
@@ -1,40 +1,32 @@
-import {
- ReactNode,
- useCallback,
- useEffect,
- useMemo,
- useReducer,
- useState,
-} from 'react'
-import { applyStoredTheme } from '../../lib/themeUpdater'
-
-import { useGetLabelsQuery } from '../../lib/networking/queries/useGetLabelsQuery'
-import { useGetSavedSearchQuery } from '../../lib/networking/queries/useGetSavedSearchQuery'
-import { SettingsLayout } from '../../components/templates/SettingsLayout'
+import { styled } from '@stitches/react'
+import { CheckSquare, Square } from 'phosphor-react'
+import { ReactNode, useCallback, useEffect, useMemo, useReducer } from 'react'
import { Toaster } from 'react-hot-toast'
+import { Button } from '../../components/elements/Button'
+import { CoverImage } from '../../components/elements/CoverImage'
+import { DragIcon } from '../../components/elements/icons/DragIcon'
+import { LabelChip } from '../../components/elements/LabelChip'
import {
Box,
- VStack,
HStack,
- SpanBox,
Separator,
+ SpanBox,
+ VStack,
} from '../../components/elements/LayoutPrimitives'
-import { LabelChip } from '../../components/elements/LabelChip'
import { StyledText } from '../../components/elements/StyledText'
+import { SettingsLayout } from '../../components/templates/SettingsLayout'
+import { usePersistedState } from '../../lib/hooks/usePersistedState'
+import { Label } from '../../lib/networking/fragments/labelFragment'
+import { SavedSearch } from '../../lib/networking/fragments/savedSearchFragment'
+import { useGetLabelsQuery } from '../../lib/networking/queries/useGetLabelsQuery'
+import { useGetSavedSearchQuery } from '../../lib/networking/queries/useGetSavedSearchQuery'
import {
Subscription,
SubscriptionType,
useGetSubscriptionsQuery,
} from '../../lib/networking/queries/useGetSubscriptionsQuery'
-import { DragIcon } from '../../components/elements/icons/DragIcon'
-import { CoverImage } from '../../components/elements/CoverImage'
-import { Label } from '../../lib/networking/fragments/labelFragment'
-import { usePersistedState } from '../../lib/hooks/usePersistedState'
-import { CheckSquare, Square } from 'phosphor-react'
-import { Button } from '../../components/elements/Button'
-import { styled } from '@stitches/react'
-import { SavedSearch } from '../../lib/networking/fragments/savedSearchFragment'
-
+import { applyStoredTheme } from '../../lib/themeUpdater'
+import { escapeQuotes } from '../../utils/helper'
type ListAction = 'RESET' | 'ADD_ITEM' | 'REMOVE_ITEM'
const SHORTCUTS_KEY = 'library-shortcuts'
@@ -416,7 +408,7 @@ const AvailableItems = (props: ListProps): JSX.Element => {
: 'feed',
filter:
subscription.type == SubscriptionType.NEWSLETTER
- ? `subscription:\"${subscription.name}\"`
+ ? `subscription:\"${escapeQuotes(subscription.name)}\"`
: `rss:\"${subscription.url}\"`,
}
props.dispatchList({
diff --git a/packages/web/utils/helper.ts b/packages/web/utils/helper.ts
new file mode 100644
index 000000000..831148eed
--- /dev/null
+++ b/packages/web/utils/helper.ts
@@ -0,0 +1 @@
+export const escapeQuotes = (str: string) => str.replace(/"/g, '\\"')