NTP: Make omnibar always overflow (#1866)

* Refactor Omnibar to use SuggestionsProvider context

* Don't animate omnibar height when suggestions list changes

* Inline Container into Omnibar, since they're so tightly coupled

* Refactor so that view-related concerns are in SearchForm and
data-related concerns are in SearchFormProvider/useSuggestions

* Fix focus ring and use spacing vars

* DRY popup and field styling

* Rephrase comment

* Strip newlines closer to where it matters

* Update ResizingContainer props type to reflect that style prop won't
work

Author: noisysocks

special-pages/pages/new-tab/app/omnibar/components/Container.js

@@ -3,10 +3,12 @@ import { useContext, useState } from 'preact/hooks';
 import { LogoStacked } from '../../components/Icons';
 import { useTypedTranslationWith } from '../../types';
 import { AiChatForm } from './AiChatForm';
-import { Container } from './Container';
 import styles from './Omnibar.module.css';
 import { OmnibarContext } from './OmnibarProvider';
+import { ResizingContainer } from './ResizingContainer';
 import { SearchForm } from './SearchForm';
+import { SearchFormProvider } from './SearchFormProvider';
+import { SuggestionsList } from './SuggestionsList';
 import { TabSwitcher } from './TabSwitcher';
 
 /**
@@ -24,6 +26,7 @@ import { TabSwitcher } from './TabSwitcher';
  */
 export function Omnibar({ mode, setMode, enableAi }) {
     const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
+
     const [query, setQuery] = useState(/** @type {String} */ (''));
     const [resetKey, setResetKey] = useState(0);
     const [autoFocus, setAutoFocus] = useState(false);
@@ -62,33 +65,31 @@ export function Omnibar({ mode, setMode, enableAi }) {
     };
 
     return (
-        <div class={styles.root} data-mode={mode}>
+        <div key={resetKey} class={styles.root} data-mode={mode}>
             <LogoStacked class={styles.logo} aria-label={t('omnibar_logoAlt')} />
             {enableAi && <TabSwitcher mode={mode} onChange={handleChangeMode} />}
-            <Container overflow={mode === 'search'} focusRing={focusRing}>
-                {mode === 'search' ? (
-                    <SearchForm
-                        key={`search-${resetKey}`}
-                        // Remove any newlines that come from switching from chat to search
-                        term={query.replace(/\n/g, '')}
-                        autoFocus={autoFocus}
-                        onChangeTerm={setQuery}
-                        onOpenSuggestion={handleOpenSuggestion}
-                        onSubmitSearch={handleSubmitSearch}
-                    />
-                ) : (
-                    <AiChatForm
-                        key={`chat-${resetKey}`}
-                        chat={query}
-                        autoFocus={autoFocus}
-                        onFocus={() => setFocusRing(true)}
-                        onBlur={() => setFocusRing(false)}
-                        onInput={() => setFocusRing(false)}
-                        onChange={setQuery}
-                        onSubmit={handleSubmitChat}
-                    />
-                )}
-            </Container>
+            <SearchFormProvider term={query} setTerm={setQuery}>
+                <div class={styles.spacer}>
+                    <div class={styles.popup}>
+                        <ResizingContainer className={styles.field} data-focus-ring={focusRing}>
+                            {mode === 'search' ? (
+                                <SearchForm autoFocus={autoFocus} onOpenSuggestion={handleOpenSuggestion} onSubmit={handleSubmitSearch} />
+                            ) : (
+                                <AiChatForm
+                                    chat={query}
+                                    autoFocus={autoFocus}
+                                    onFocus={() => setFocusRing(true)}
+                                    onBlur={() => setFocusRing(false)}
+                                    onInput={() => setFocusRing(false)}
+                                    onChange={setQuery}
+                                    onSubmit={handleSubmitChat}
+                                />
+                            )}
+                        </ResizingContainer>
+                        {mode === 'search' && <SuggestionsList onOpenSuggestion={handleOpenSuggestion} />}
+                    </div>
+                </div>
+            </SearchFormProvider>
         </div>
     );
 }

special-pages/pages/new-tab/app/omnibar/components/Container.module.css

@@ -10,3 +10,68 @@
     margin-bottom: var(--sp-4);
     width: 164px;
 }
+
+/*
+ * There are three containers:
+ * 1) .spacer - Pushes other widgets away. Fixed height. Contents overflow. Height animates.
+ * 2) .popup - Has border when suggestions list open. Auto height. No animation.
+ * 3) .field - Has border when suggestions list closed. Fixed height set to scrollHeight of children. Height animates.
+ *
+ * The intention is that:
+ * - Other widgets are smoothly pushed away when switching to the Duck.ai tab.
+ * - Suggestions list and expanded Duck.ai textarea always overflows over other widgets.
+ * - Omnibar height expands smoothly when switching tab or entering mutiline text into Duck.ai textarea.
+ * - Omnibar height does NOT animate when suggestions list opens or changes.
+ */
+
+.spacer {
+    --box-shadow-rest: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
+    --box-shadow-focused: 0 0 0 1px var(--ntp-surface-tertiary), 0 0 0 3px var(--ntp-accent-primary), 0 0 0 5px var(--ntp-accent-glow);
+    --box-shadow-suggestions: 0 0 0 3px var(--ntp-surface-tertiary), 0px 4px 12px 3px rgba(0, 0, 0, 0.10), 0px 20px 40px 3px rgba(0, 0, 0, 0.08);
+
+    align-self: stretch;
+    transition: height 200ms ease;
+    z-index: 1;
+
+    @media (prefers-reduced-motion: reduce) {
+        transition: none;
+    }
+
+    [data-mode="search"] & {
+        height: var(--sp-10);
+    }
+
+    [data-mode="ai"] & {
+        height: var(--sp-20);
+    }
+}
+
+.field {
+    overflow: hidden;
+    position: relative;
+    transition: height 200ms ease;
+
+    @media (prefers-reduced-motion: reduce) {
+        transition: none;
+    }
+}
+
+.root:has([role="listbox"]) .popup,
+.root:not(:has([role="listbox"])) .field {
+    backdrop-filter: blur(48px);
+    background: var(--ntp-surface-tertiary);
+    border-radius: var(--border-radius-lg);
+}
+
+.root:not(:has([role="listbox"])) .field {
+    box-shadow: var(--box-shadow-rest);
+}
+
+.root:not(:has([role="listbox"])) .field[data-focus-ring="true"],
+.root:not(:has([role="listbox"])) .field:focus-within:not([data-focus-ring="false"]) {
+    box-shadow: var(--box-shadow-focused);
+}
+
+.root:has([role="listbox"]) .popup {
+    box-shadow: var(--box-shadow-suggestions);
+}

special-pages/pages/new-tab/app/omnibar/components/Omnibar.js

@@ -0,0 +1,27 @@
+import { h } from 'preact';
+import { useLayoutEffect, useRef, useState } from 'preact/hooks';
+
+/**
+ * @param {Omit<import('preact').JSX.HTMLAttributes<HTMLDivElement>, 'style'>} props
+ */
+export function ResizingContainer({ children, ...props }) {
+    const contentRef = useRef(/** @type {HTMLDivElement|null} */ (null));
+    const [currentHeight, setCurrentHeight] = useState(/** @type {number|null} */ (null));
+
+    useLayoutEffect(() => {
+        const content = contentRef.current;
+        if (!content) return;
+
+        setCurrentHeight(content.scrollHeight);
+
+        const resizeObserver = new ResizeObserver(() => setCurrentHeight(content.scrollHeight));
+        resizeObserver.observe(content);
+        return () => resizeObserver.disconnect();
+    }, []);
+
+    return (
+        <div {...props} style={{ height: currentHeight ?? 'auto' }}>
+            <div ref={contentRef}>{children}</div>
+        </div>
+    );
+}