Merge branch 'search-form' into beta

FreeFeed · Oct 31, 2024 · 99a3d69 · 99a3d69
2 parents 81e104d + 8298087
commit 99a3d69
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 42 deletions.
diff --git a/src/components/advanced-search-form/advanced-search-form.jsx b/src/components/advanced-search-form/advanced-search-form.jsx
@@ -218,7 +218,10 @@ export function AdvancedSearchForm() {
         </Section>
         {resultingQuery ? (
           <p>
-            Search query: <code>{resultingQuery}</code>
+            Search query:{' '}
+            <ButtonLink tag="code" onClick={onSearch}>
+              {resultingQuery}
+            </ButtonLink>
           </p>
         ) : null}
         {showFullDocs ? (

diff --git a/src/components/advanced-search-form/helpers.js b/src/components/advanced-search-form/helpers.js
@@ -50,6 +50,8 @@ export const usernameFilters = new Set([
   'by:',
   'from:',
   'commented-by:',
+  'liked-by:',
+  'cliked-by:',
   'in:',
   '-in:',
   '-from:',

diff --git a/src/components/layout-header-search.jsx b/src/components/layout-header-search.jsx
@@ -15,21 +15,13 @@ const autocompleteAnchor = /(^|[^a-z\d])@|((from|to|author|by|in|commented-?by|l
 export const HeaderSearchForm = withRouter(function HeaderSearchForm({ router, closeSearchForm }) {
   const isWideScreen = useMediaQuery('(min-width: 700px)');
   const isNarrowScreen = useMediaQuery('(max-width: 549px)');
-  const onSearchPage = router.routes[router.routes.length - 1].name === 'search';
 
-  const [searchExpanded, setSearchExpanded] = useState(false);
   const [query, setQuery] = useState('');
   const onQueryChange = useEvent(({ target }) => setQuery(target.value));
 
   const fullSearchForm = isWideScreen;
   const compactSearchForm = !fullSearchForm;
-  const collapsibleSearchForm = isNarrowScreen && (!onSearchPage || searchExpanded);
-
-  useEffect(() => {
-    if (!collapsibleSearchForm) {
-      setSearchExpanded(false);
-    }
-  }, [collapsibleSearchForm]);
+  const collapsibleSearchForm = isNarrowScreen;
 
   const initialQuery = useInitialQuery(router);
   const input = useRef(null);
@@ -49,13 +41,14 @@ export const HeaderSearchForm = withRouter(function HeaderSearchForm({ router, c
     input.current.blur();
   });
 
-  const onFocus = useEvent(() => isNarrowScreen && onSearchPage && setSearchExpanded(true));
   const onKeyDown = useEvent((e) => e.keyCode === KEY_ESCAPE && input.current.blur());
   const clearSearchForm = useEvent(() => (setQuery(''), input.current.focus()));
 
-  const focusHandlers = useDebouncedFocus({
-    onFocus,
-    onBlur: closeSearchForm,
+  const onBlur = useEvent((e) => {
+    // When the new focus is outside the search form
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      closeSearchForm();
+    }
   });
 
   useEffect(() => {
@@ -82,7 +75,7 @@ export const HeaderSearchForm = withRouter(function HeaderSearchForm({ router, c
 
   return (
     <form className={styles.searchForm} action="/search" onSubmit={onSubmit}>
-      <span className={styles.searchInputContainer} {...focusHandlers} tabIndex={0}>
+      <span className={styles.searchInputContainer} onBlur={onBlur} tabIndex={0}>
         <span className={styles.searchInputBox}>
           <input
             className={styles.searchInput}
@@ -149,25 +142,3 @@ function useInitialQuery(router) {
     }
   }, [router.routes, router.params, router.location]);
 }
-
-function useDebouncedFocus({ onFocus: onFocusOrig, onBlur: onBlurOrig }, interval = 100) {
-  const focusTimer = useRef(0);
-  const blurTimer = useRef(0);
-
-  const cleanup = useEvent(() => {
-    window.clearTimeout(blurTimer.current);
-    window.clearTimeout(focusTimer.current);
-  });
-  useEffect(() => () => cleanup(), [cleanup]);
-
-  const onFocus = useEvent(() => {
-    cleanup();
-    focusTimer.current = window.setTimeout(onFocusOrig, interval);
-  });
-  const onBlur = useEvent(() => {
-    cleanup();
-    blurTimer.current = window.setTimeout(onBlurOrig, interval);
-  });
-
-  return { onFocus, onBlur };
-}
diff --git a/src/components/layout-header.jsx b/src/components/layout-header.jsx
@@ -1,5 +1,5 @@
 /* global CONFIG */
-import { IndexLink, Link, withRouter } from 'react-router';
+import { IndexLink, Link } from 'react-router';
 import { faBars, faSearch, faSignInAlt } from '@fortawesome/free-solid-svg-icons';
 import { useCallback, useState } from 'react';
 import cn from 'classnames';
@@ -12,9 +12,8 @@ import styles from './layout-header.module.scss';
 import { SignInLink } from './sign-in-link';
 import { HeaderSearchForm } from './layout-header-search';
 
-export const LayoutHeader = withRouter(function LayoutHeader({ router }) {
+export function LayoutHeader() {
   const dispatch = useDispatch();
-  const onSearchPage = router.routes[router.routes.length - 1].name === 'search';
   const isLayoutWithSidebar = useMediaQuery('(min-width: 992px)');
   const isWideScreen = useMediaQuery('(min-width: 700px)');
   const isNarrowScreen = useMediaQuery('(max-width: 549px)');
@@ -25,7 +24,7 @@ export const LayoutHeader = withRouter(function LayoutHeader({ router }) {
 
   const fullSearchForm = isWideScreen;
   const compactSearchForm = !fullSearchForm;
-  const collapsibleSearchForm = isNarrowScreen && (!onSearchPage || searchExpanded);
+  const collapsibleSearchForm = isNarrowScreen;
 
   const openSearchForm = useCallback(() => setSearchExpanded(true), []);
   const closeSearchForm = useCallback(() => setSearchExpanded(false), []);
@@ -106,4 +105,4 @@ export const LayoutHeader = withRouter(function LayoutHeader({ router }) {
       )}
     </header>
   );
-});
+}
diff --git a/styles/helvetica/dark-theme.scss b/styles/helvetica/dark-theme.scss
@@ -57,6 +57,7 @@ body,
   }
 
   body,
+  legend,
   .post .post-body .post-text,
   .post .post-body,
   .box-header,
-Original file line number
+Diff line change
@@ Expand Up / @@ -57,6 +57,7 @@ body, @@
       }
       body,
+      legend,
       .post .post-body .post-text,
       .post .post-body,
       .box-header,
@@ Expand Down @@