From 74a8c63730df082d6cd643dad232dc8296a17523 Mon Sep 17 00:00:00 2001
From: ydcjeff <n2ya@duck.com>
Date: Sat, 21 Dec 2024 21:29:09 +0800
Subject: [PATCH 1/3] feat: auto resize search bar

---
 components/SearchPageJumbotron.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/SearchPageJumbotron.js b/components/SearchPageJumbotron.js
index 78dc7d48..91919b5b 100644
--- a/components/SearchPageJumbotron.js
+++ b/components/SearchPageJumbotron.js
@@ -2,7 +2,7 @@ import { useRef, useEffect, memo } from 'react';
 import { useRouter } from 'next/router';
 import { t } from 'ttag';
 import { makeStyles, withStyles } from '@material-ui/core/styles';
-import { Tabs, Tab, Box, Container } from '@material-ui/core';
+import { Tabs, Tab, Box, Container, TextareaAutosize } from '@material-ui/core';
 import SearchIcon from '@material-ui/icons/Search';
 
 const useStyles = makeStyles(theme => ({
@@ -10,6 +10,7 @@ const useStyles = makeStyles(theme => ({
     background: '#202020',
   },
   search: {
+    alignSelf: 'flex-start',
     color: theme.palette.common.white,
     paddingRight: theme.spacing(3),
   },
@@ -53,6 +54,7 @@ const useStyles = makeStyles(theme => ({
     outline: 'none',
     color: theme.palette.common.white,
     background: 'transparent',
+    paddingRight: theme.spacing(4),
   },
   submit: {
     display: 'none',
@@ -109,11 +111,11 @@ function SearchPageJumbotron() {
         <form onSubmit={onSearch} className={classes.form}>
           <h2 className={classes.search}>{t`Searching`}</h2>
           <Box flex={1} className={classes.inputArea}>
-            <textarea
+            <TextareaAutosize
               ref={textareaRef}
               name="search"
               className={classes.input}
-              rows={1}
+              minRows={1}
             />
             <button type="submit" className={classes.submit}>
               <SearchIcon />

From a7e10e9586a1654198b8d010ee751fdc25d4ed1d Mon Sep 17 00:00:00 2001
From: ydcjeff <n2ya@duck.com>
Date: Sat, 21 Dec 2024 21:47:31 +0800
Subject: [PATCH 2/3] feat: key down enter to trigger search

---
 components/SearchPageJumbotron.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/components/SearchPageJumbotron.js b/components/SearchPageJumbotron.js
index 91919b5b..d4ccf6ab 100644
--- a/components/SearchPageJumbotron.js
+++ b/components/SearchPageJumbotron.js
@@ -97,7 +97,7 @@ function SearchPageJumbotron() {
     });
   };
 
-  const { q } = query;
+  const { q = '' } = query;
   useEffect(() => {
     textareaRef.current.value = q;
   }, [q]);
@@ -116,6 +116,13 @@ function SearchPageJumbotron() {
               name="search"
               className={classes.input}
               minRows={1}
+              onKeyDown={(e) => {
+                // enter to trigger search, so disable default line breaking
+                if (e.key == 'Enter') {
+                  e.preventDefault();
+                  e.target.form.requestSubmit();
+                }
+              }}
             />
             <button type="submit" className={classes.submit}>
               <SearchIcon />

From b94537866bd0e789eba24b634e8139e7407f89c8 Mon Sep 17 00:00:00 2001
From: ydcjeff <n2ya@duck.com>
Date: Sun, 22 Dec 2024 19:17:45 +0800
Subject: [PATCH 3/3] chore: lint

---
 components/SearchPageJumbotron.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/SearchPageJumbotron.js b/components/SearchPageJumbotron.js
index d4ccf6ab..c57df9ab 100644
--- a/components/SearchPageJumbotron.js
+++ b/components/SearchPageJumbotron.js
@@ -116,7 +116,7 @@ function SearchPageJumbotron() {
               name="search"
               className={classes.input}
               minRows={1}
-              onKeyDown={(e) => {
+              onKeyDown={e => {
                 // enter to trigger search, so disable default line breaking
                 if (e.key == 'Enter') {
                   e.preventDefault();