add global search link to article searchbox

src/components/Searchbar/Search.module.css

@@ -9,3 +9,7 @@
 .searchBox{
     border: none !important;
 }
+
+.globalSearchTrigger{
+    text-decoration: underline;
+}

src/components/Searchbar/Searchbar.tsx

@@ -3,6 +3,7 @@ import {
   IconButton,
   SearchIcon,
   CloseIcon,
+  Typography,
 } from '@acid-info/lsd-react'
 import styles from './Search.module.css'
 import { SearchbarContainer } from '@/components/Searchbar/SearchbarContainer'
@@ -17,9 +18,11 @@ import {
   addQueryToQuery,
   addTopicsToQuery,
   createMinimizedSearchText,
+  createSearchLink,
   extractQueryFromQuery,
   extractTopicsFromQuery,
 } from '@/utils/search.utils'
+import Link from 'next/link'
 
 export type SearchbarProps = {
   searchScope?: ESearchScope
@@ -27,7 +30,9 @@ export type SearchbarProps = {
 }
 
 export default function Searchbar(props: SearchbarProps) {
-  const { searchScope = ESearchScope.GLOBAL } = props
+  const [searchScope, setSearchScope] = useState<ESearchScope>(
+    props.searchScope || ESearchScope.GLOBAL,
+  )
   const [active, setActive] = useState(false)
   const router = useRouter()
 
@@ -61,6 +66,11 @@ export default function Searchbar(props: SearchbarProps) {
   useEffect(() => {
     setQuery(extractQueryFromQuery(router.query))
     setFilterTags(extractTopicsFromQuery(router.query))
+    if (router.pathname === '/article/[remoteId]') {
+      setSearchScope(ESearchScope.ARTICLE)
+    } else {
+      setSearchScope(ESearchScope.GLOBAL)
+    }
   }, [router.query.query, router.query.topics])
 
   const performClear = useCallback(() => {
@@ -103,6 +113,16 @@ export default function Searchbar(props: SearchbarProps) {
             setQuery(e.target.value)
           }}
         />
+        {searchScope === ESearchScope.ARTICLE && (
+          <GlobalSearchTrigger
+            href={createSearchLink(query, filterTags)}
+            className={!active ? '' : 'hide'}
+          >
+            <Typography variant="body2" className={styles.globalSearchTrigger}>
+              global search
+            </Typography>
+          </GlobalSearchTrigger>
+        )}
         <div>
           <IconButton
             className={styles.searchButton}
@@ -180,3 +200,15 @@ const SearchBox = styled.div`
   width: 100%;
   height: 100%;
 `
+
+const GlobalSearchTrigger = styled(Link)`
+  position: absolute;
+  left: 256px;
+  top: 7px;
+
+  transition: opacity 250ms ease-in-out;
+
+  &.hide {
+    opacity: 0;
+  }
+`

src/configs/copy.configs.ts

@@ -2,7 +2,7 @@ export const copyConfigs = {
   search: {
     searchbarPlaceholders: {
       global: () => 'Search through the LPE posts...',
-      article: () => `Search through the article`,
+      article: () => `Search through the article or switch to `,
     },
     filterTags: [
       'Privacy',

src/pages/search.tsx

@@ -40,6 +40,8 @@ export default function SearchPage({
 }: SearchPageProps) {
   const router = useRouter()
   const hasUpdated = useRef(false)
+  const [mounted, setMounted] = useState(false)
+
   const {
     query: { query = '', topics = [] },
   } = router
@@ -54,11 +56,6 @@ export default function SearchPage({
     PostTypes.Block,
   )
 
-  // console.log('articles', articles)
-  // console.log('blocks', blocks)
-
-  const [mounted, setMounted] = useState(false)
-
   useEffect(() => {
     setMounted(true)
     return () => {

src/utils/search.utils.ts

@@ -35,3 +35,19 @@ export const createMinimizedSearchText = (
   }
   return txt
 }
+
+export const createSearchLink = (query: string, filterTags: string[]) => {
+  let link = '/search'
+  if (query.length > 0 || filterTags.length > 0) {
+    link += '?'
+  }
+  if (query.length > 0 && filterTags.length > 0) {
+    link += `query=${query}&topics=${filterTags.join(',')}`
+  } else if (query.length > 0) {
+    link += `query=${query}`
+  } else if (filterTags.length > 0) {
+    link += `topics=${filterTags.join(',')}`
+  }
+
+  return link
+}