NTP: Style Omnibar to match specs (#1811)

* Search form and suggestions list styling

* Root container styling

* Search form and root container spacing tweaks

* AI chat form styling

* Remove unecessary .icon class

* Tab switcher styling

* Dark mode

* Make AI form same size as search form

* Animation

* Remove unused import

* Remove test for removed feature

* Use useLayoutEffect

* Support Shift+Enter for newlines in AI chat form

* Remove redundant padding-bottom from AiChatForm styles

* Refactor icon components to accept SVG props

* Remove input padding in search form

* Fix broken JSDoc comment

* Refactor AI chat form submission and keyboard tests

Author: noisysocks

special-pages/pages/history/app/components/SearchForm.js

@@ -1,9 +1,9 @@
-import styles from './Header.module.css';
-import { h } from 'preact';
-import { usePlatformName, useTypedTranslation } from '../types.js';
 import { useComputed, useSignalEffect } from '@preact/signals';
-import { SearchIcon } from '../icons/Search.js';
+import { h } from 'preact';
 import { useQueryDispatch } from '../global/Providers/QueryProvider.js';
+import { SearchIcon } from '../icons/Search.js';
+import { usePlatformName, useTypedTranslation } from '../types.js';
+import styles from './Header.module.css';
 
 const INPUT_FIELD_NAME = 'q';
 

special-pages/pages/new-tab/app/components/Icons.js

@@ -1,9 +1,10 @@
-import cn from 'classnames';
 import { h } from 'preact';
-import { useContext } from 'preact/hooks';
+import { useContext, useRef } from 'preact/hooks';
+import { eventToTarget } from '../../../../../shared/handlers';
 import { ArrowRightIcon } from '../../components/Icons';
+import { usePlatformName } from '../../settings.provider';
 import { useTypedTranslationWith } from '../../types';
-import styles from './Omnibar.module.css';
+import styles from './AiChatForm.module.css';
 import { OmnibarContext } from './OmnibarProvider';
 
 /**
@@ -18,41 +19,76 @@ import { OmnibarContext } from './OmnibarProvider';
 export function AiChatForm({ chat, setChat }) {
     const { submitChat } = useContext(OmnibarContext);
     const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
+    const platformName = usePlatformName();
+
+    const formRef = useRef(/** @type {HTMLFormElement|null} */ (null));
+    const textAreaRef = useRef(/** @type {HTMLTextAreaElement|null} */ (null));
+
+    const disabled = chat.length === 0;
 
     /** @type {(event: SubmitEvent) => void} */
     const onSubmit = (event) => {
         event.preventDefault();
+        if (disabled) return;
         submitChat({
             chat,
             target: 'same-tab',
         });
     };
 
+    /** @type {(event: KeyboardEvent) => void} */
+    const onKeyDown = (event) => {
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            if (disabled) return;
+            submitChat({
+                chat,
+                target: eventToTarget(event, platformName),
+            });
+        }
+    };
+
+    /** @type {(event: import('preact').JSX.TargetedEvent<HTMLTextAreaElement>) => void} */
+    const onChange = (event) => {
+        const form = formRef.current;
+        const textArea = event.currentTarget;
+
+        const { paddingTop, paddingBottom } = window.getComputedStyle(textArea);
+        textArea.style.height = 'auto'; // Reset height
+        textArea.style.height = `calc(${textArea.scrollHeight}px - ${paddingTop} - ${paddingBottom})`;
+
+        if (textArea.scrollHeight > textArea.clientHeight) {
+            form?.classList.add(styles.hasScroll);
+        } else {
+            form?.classList.remove(styles.hasScroll);
+        }
+
+        setChat(textArea.value);
+    };
+
     return (
-        <div class={styles.formWrap}>
-            <form onSubmit={onSubmit} class={styles.form}>
-                <div class={styles.inputRoot} style={{ viewTransitionName: 'omnibar-input-transition' }}>
-                    <div class={styles.inputContainer} style={{ viewTransitionName: 'omnibar-input-transition2' }}>
-                        <input
-                            type="text"
-                            class={styles.input}
-                            value={chat}
-                            placeholder={t('aiChatForm_placeholder')}
-                            aria-label={t('aiChatForm_placeholder')}
-                            autoComplete="off"
-                            onChange={(event) => setChat(event.currentTarget.value)}
-                        />
-                        <div class={styles.inputActions}>
-                            <button
-                                class={cn(styles.inputAction, styles.squareButton, styles.aiSubmitButton)}
-                                aria-label={t('aiChatForm_submitButtonLabel')}
-                            >
-                                <ArrowRightIcon />
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </form>
-        </div>
+        <form ref={formRef} class={styles.form} onClick={() => textAreaRef.current?.focus()} onSubmit={onSubmit}>
+            <textarea
+                ref={textAreaRef}
+                class={styles.textarea}
+                value={chat}
+                placeholder={t('aiChatForm_placeholder')}
+                aria-label={t('aiChatForm_placeholder')}
+                autoComplete="off"
+                rows={1}
+                onKeyDown={onKeyDown}
+                onChange={onChange}
+            />
+            <div class={styles.buttons}>
+                <button
+                    type="submit"
+                    class={styles.submitButton}
+                    aria-label={t('aiChatForm_submitButtonLabel')}
+                    disabled={chat.length === 0}
+                >
+                    <ArrowRightIcon />
+                </button>
+            </div>
+        </form>
     );
 }

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

@@ -0,0 +1,70 @@
+.form {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    padding-bottom: calc(14px + 9px + var(--sp-7)); /* Extra space to accomodate absolute positioned .buttons */
+}
+
+.textarea {
+    align-self: stretch;
+    background: none;
+    border: none;
+    box-sizing: content-box;
+    color: var(--ntp-text-normal);
+    max-height: 10lh;
+    padding: 11px 15px 0;
+    resize: none;
+
+    &:focus {
+        outline: none;
+    }
+
+    .hasScroll & {
+        border-bottom: 1px solid var(--ntp-surface-border-color);
+        padding-bottom: 11px;
+    }
+}
+
+.buttons {
+    align-self: stretch;
+    bottom: 0;
+    justify-content: space-between;
+    left: 0;
+    padding: 14px 9px 9px;
+    position: absolute; /* Fix .buttons to <Container /> so that it animates smoothly when container resizes */
+    right: 0;
+
+    .hasScroll & {
+        padding-top: 9px;
+    }
+}
+
+.submitButton {
+    align-items: center;
+    background: var(--color-blue-50);
+    border-radius: 100%;
+    border: none;
+    color: var(--color-white);
+    cursor: pointer;
+    display: flex;
+    height: var(--sp-7);
+    justify-content: center;
+    margin-left: auto;
+    padding: 0;
+    width: var(--sp-7);
+
+    svg {
+        height: var(--sp-4);
+        width: var(--sp-4);
+    }
+
+    &[disabled] {
+        background: none;
+        color: var(--color-black-at-30);
+        cursor: default;
+    }
+
+    &:focus-visible {
+        box-shadow: var(--focus-ring);
+    }
+}

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

@@ -0,0 +1,34 @@
+import { h } from 'preact';
+import styles from './Container.module.css';
+import { useRef, useLayoutEffect, useState } from 'preact/hooks';
+
+/**
+ * @param {object} props
+ * @param {boolean} props.overflow
+ * @param {import('preact').ComponentChildren} props.children
+ */
+export function Container({ overflow, children }) {
+    const contentRef = useRef(/** @type {HTMLDivElement|null} */ (null));
+    const initialHeight = useRef(/** @type {number|null} */ (null));
+    const [contentHeight, setContentHeight] = useState(/** @type {number|null} */ (null));
+
+    useLayoutEffect(() => {
+        const content = contentRef.current;
+        if (!content) return;
+
+        initialHeight.current = content.scrollHeight;
+        setContentHeight(content.scrollHeight);
+
+        const resizeObserver = new ResizeObserver(() => setContentHeight(content.scrollHeight));
+        resizeObserver.observe(content);
+        return () => resizeObserver.disconnect();
+    }, []);
+
+    return (
+        <div class={styles.outer} style={{ height: overflow && initialHeight.current ? initialHeight.current : 'auto' }}>
+            <div class={styles.inner} style={{ height: contentHeight ?? 'auto' }}>
+                <div ref={contentRef}>{children}</div>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,28 @@
+.outer {
+    align-self: stretch;
+    z-index: 1;
+}
+
+.inner {
+    background: var(--ntp-surface-tertiary);
+    border-radius: 11px;
+    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
+    margin: 0 calc(-1 * var(--sp-1));
+    overflow: hidden;
+    position: relative;
+    transition: height 200ms ease;
+
+    @media (prefers-reduced-motion: reduce) {
+        transition: none;
+    }
+
+    &:focus-within {
+        border-radius: 14px;
+        box-shadow: 0 0 0 2px var(--ntp-color-primary), 0 0 0 4px rgba(57, 105, 239, 0.2);
+    }
+
+    &:has([role="listbox"]) {
+        border-radius: 16px;
+        box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.16);
+    }
+}

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

@@ -1,11 +1,12 @@
 import { h } from 'preact';
 import { useState } from 'preact/hooks';
-import { AiChatIcon, SearchIcon } from '../../components/Icons.js';
+import { LogoStacked } from '../../components/Icons';
 import { useTypedTranslationWith } from '../../types';
-import { viewTransition } from '../../utils';
 import { AiChatForm } from './AiChatForm';
 import styles from './Omnibar.module.css';
 import { SearchForm } from './SearchForm';
+import { TabSwitcher } from './TabSwitcher';
+import { Container } from './Container';
 
 /**
  * @typedef {import('../strings.json')} Strings
@@ -23,46 +24,11 @@ export function Omnibar({ mode, setMode, enableAi }) {
     const [query, setQuery] = useState(/** @type {String} */ (''));
     return (
         <div class={styles.root} data-mode={mode}>
-            <div class={styles.logoWrap}>
-                <img src="./icons/Logo-Stacked.svg" alt={t('omnibar_logoAlt')} width={144} height={115.9} />
-            </div>
-            {enableAi && (
-                <div class={styles.tabListWrap}>
-                    <div class={styles.tabList} role="tablist" aria-label={t('omnibar_tabSwitcherLabel')}>
-                        <button
-                            class={styles.tab}
-                            role="tab"
-                            aria-selected={mode === 'search'}
-                            onClick={() => {
-                                viewTransition(() => {
-                                    setMode('search');
-                                });
-                            }}
-                        >
-                            <SearchIcon className={styles.searchIcon} />
-                            {t('omnibar_searchTabLabel')}
-                        </button>
-                        <button
-                            class={styles.tab}
-                            role="tab"
-                            aria-selected={mode === 'ai'}
-                            onClick={() => {
-                                viewTransition(() => {
-                                    setMode('ai');
-                                });
-                            }}
-                        >
-                            <AiChatIcon className={styles.aiChatIcon} />
-                            {t('omnibar_aiTabLabel')}
-                        </button>
-                    </div>
-                </div>
-            )}
-            {mode === 'search' ? (
-                <SearchForm enableAi={enableAi} term={query} setTerm={setQuery} />
-            ) : (
-                <AiChatForm chat={query} setChat={setQuery} />
-            )}
+            <LogoStacked class={styles.logo} aria-label={t('omnibar_logoAlt')} />
+            {enableAi && <TabSwitcher mode={mode} setMode={setMode} />}
+            <Container overflow={mode === 'search'}>
+                {mode === 'search' ? <SearchForm term={query} setTerm={setQuery} /> : <AiChatForm chat={query} setChat={setQuery} />}
+            </Container>
         </div>
     );
 }