Taskbar search pt8

components/system/Taskbar/Search/SearchButton.tsx

@@ -4,6 +4,7 @@ import { useTheme } from "styled-components";
 
 import { SEARCH_BUTTON_LABEL } from "components/system/Taskbar/functions";
 import useTaskbarContextMenu from "components/system/Taskbar/useTaskbarContextMenu";
+import { DIV_BUTTON_PROPS } from "utils/constants";
 import { label } from "utils/functions";
 
 type StartButtonProps = {
@@ -24,6 +25,7 @@ const SearchButton: FC<StartButtonProps> = ({
       $active={searchVisible}
       $left={taskbar.button.width}
       onClick={() => toggleSearch()}
+      {...DIV_BUTTON_PROPS}
       {...label(SEARCH_BUTTON_LABEL)}
       {...useTaskbarContextMenu()}
     >

components/system/Taskbar/Search/StyledFiles.ts

@@ -17,14 +17,14 @@ const StyledFiles = styled.figure`
       place-items: center;
 
       h2 {
-        font-size: 13px;
+        font-size: 12px;
         font-weight: 400;
       }
 
       picture,
       img {
         height: 16px;
-        margin-right: 4px;
+        margin-right: 5px;
         width: 16px;
       }
 

components/system/Taskbar/Search/StyledSearch.ts

@@ -1,11 +1,17 @@
+import { SINGLE_LINE_HEIGHT_ADDITION } from "components/system/Taskbar/Search";
 import TaskbarPanel from "components/system/Taskbar/TaskbarPanel";
 import { m as motion } from "framer-motion";
 import styled from "styled-components";
 
-const StyledSearch = styled(motion.nav)`
-  ${({ theme }) =>
+type StyledSearchProps = {
+  $singleLine: boolean;
+};
+
+const StyledSearch = styled(motion.nav)<StyledSearchProps>`
+  ${({ $singleLine, theme }) =>
     TaskbarPanel(
-      theme.sizes.search.maxHeight,
+      theme.sizes.search.maxHeight +
+        ($singleLine ? SINGLE_LINE_HEIGHT_ADDITION : 0),
       theme.sizes.search.size,
       theme.sizes.taskbar.button.width,
       true
@@ -39,6 +45,7 @@ const StyledSearch = styled(motion.nav)`
         inset: 0;
         left: 37px;
         opacity: 100%;
+        overflow: visible;
         position: absolute;
         top: 10px;
       }

components/system/Taskbar/Search/StyledSections.ts

@@ -1,7 +1,11 @@
 import styled from "styled-components";
 import ScrollBars from "styles/common/ScrollBars";
 
-const StyledSections = styled.div`
+type StyledSectionsProps = {
+  $singleLine: boolean;
+};
+
+const StyledSections = styled.div<StyledSectionsProps>`
   ${ScrollBars()};
   color: #fff;
   display: flex;
@@ -54,7 +58,6 @@ const StyledSections = styled.div`
 
   &.single-line {
     flex-direction: column;
-    gap: 20px;
     place-content: flex-start;
 
     figure.card {
@@ -83,9 +86,12 @@ const StyledSections = styled.div`
     display: flex;
     flex-direction: column;
     gap: 20px;
-    height: 100%;
     padding: 20px 24px;
     width: 100%;
+
+    &:first-child {
+      padding-bottom: ${({ $singleLine }) => ($singleLine ? 0 : undefined)};
+    }
   }
 `;
 

components/system/Taskbar/Search/StyledSuggestions.ts

@@ -2,7 +2,7 @@ import styled from "styled-components";
 
 const StyledSuggestions = styled.ol`
   display: grid;
-  padding: 9px 0 15px;
+  padding: 9px 0 0;
 
   li {
     border-radius: 5px;

components/system/Taskbar/Search/index.tsx

@@ -48,6 +48,8 @@ const TABS = ["All", "Documents", "Photos", "Videos"] as const;
 
 const MAX_SINGLE_LINE = 550;
 
+export const SINGLE_LINE_HEIGHT_ADDITION = 34;
+
 export type TabName = (typeof TABS)[number];
 
 type TabData = {
@@ -86,8 +88,9 @@ const Search: FC<SearchProps> = ({ toggleSearch }) => {
   const {
     sizes: { search },
   } = useTheme();
+  const [singleLineView, setSingleLineView] = useState(false);
   const searchTransition = useTaskbarItemTransition(
-    search.maxHeight,
+    search.maxHeight + (singleLineView ? SINGLE_LINE_HEIGHT_ADDITION : 0),
     true,
     0.1,
     0
@@ -146,7 +149,6 @@ const Search: FC<SearchProps> = ({ toggleSearch }) => {
         : Object.fromEntries(subResults)[activeTab]?.[0],
     [activeTab, results, subResults]
   );
-  const [singleLineView, setSingleLineView] = useState(false);
   const changeTab = useCallback(
     (tab: TabName) => {
       if (inputRef.current) {
@@ -194,6 +196,7 @@ const Search: FC<SearchProps> = ({ toggleSearch }) => {
   return (
     <StyledSearch
       ref={menuRef}
+      $singleLine={singleLineView}
       onBlurCapture={(event) =>
         maybeCloseTaskbarMenu(
           event,
@@ -240,6 +243,7 @@ const Search: FC<SearchProps> = ({ toggleSearch }) => {
           </nav>
           {!searchTerm && activeTab === "All" && (
             <StyledSections
+              $singleLine={singleLineView}
               className={singleLineView ? "single-line" : undefined}
             >
               <section>
@@ -375,6 +379,15 @@ const Search: FC<SearchProps> = ({ toggleSearch }) => {
 
               setSearchTerm(value ?? "");
             }}
+            onKeyDown={({ key }) => {
+              if (key === "Enter" && firstResult?.ref) {
+                const bestMatchElement = menuRef.current?.querySelector(
+                  ".list li:first-child figure"
+                );
+
+                (bestMatchElement as HTMLElement)?.click();
+              }
+            }}
             placeholder="Type here to search"
             style={{
               caretColor: showCaret ? undefined : "transparent",

components/system/Taskbar/StartButton/index.tsx

@@ -3,7 +3,7 @@ import StyledTaskbarButton from "components/system/Taskbar/StyledTaskbarButton";
 import { START_BUTTON_LABEL } from "components/system/Taskbar/functions";
 import useTaskbarContextMenu from "components/system/Taskbar/useTaskbarContextMenu";
 import { useCallback, useRef, useState } from "react";
-import { ICON_PATH, USER_ICON_PATH } from "utils/constants";
+import { DIV_BUTTON_PROPS, ICON_PATH, USER_ICON_PATH } from "utils/constants";
 import { getDpi, imageSrc, imageSrcs, isSafari, label } from "utils/functions";
 
 type StartButtonProps = {
@@ -85,6 +85,7 @@ const StartButton: FC<StartButtonProps> = ({
       onClick={onClick}
       onMouseOver={preloaded ? undefined : preloadIcons}
       $highlight
+      {...DIV_BUTTON_PROPS}
       {...label(START_BUTTON_LABEL)}
       {...useTaskbarContextMenu(true)}
     >

styles/defaultTheme/sizes.ts

@@ -29,7 +29,7 @@ const sizes = {
     rowGap: "28px",
   },
   search: {
-    maxHeight: 375,
+    maxHeight: 415,
     size: 600,
   },
   startMenu: {