Add handlers to open command palette

src/renderer/features/sidebar/components/action-bar.tsx

@@ -1,10 +1,11 @@
-import { Grid, Group, TextInput } from '@mantine/core';
+import { Grid, Group } from '@mantine/core';
 import { RiSearchLine, RiMenuFill, RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
 import { useNavigate } from 'react-router';
 import styled from 'styled-components';
-import { Button, DropdownMenu } from '/@/renderer/components';
+import { Button, DropdownMenu, TextInput } from '/@/renderer/components';
 import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
 import { useContainerQuery } from '/@/renderer/hooks';
+import { useCommandPalette } from '/@/renderer/store';
 
 const ActionsContainer = styled(Grid)`
   display: flex;
@@ -21,6 +22,7 @@ const ActionsContainer = styled(Grid)`
 export const ActionBar = () => {
   const cq = useContainerQuery({ sm: 300 });
   const navigate = useNavigate();
+  const { open } = useCommandPalette();
 
   return (
     <ActionsContainer
@@ -29,11 +31,16 @@ export const ActionBar = () => {
     >
       <Grid.Col span={cq.isSm ? 7 : 6}>
         <TextInput
-          disabled
           readOnly
           icon={<RiSearchLine />}
           placeholder="Search"
           size="md"
+          onClick={open}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              open();
+            }
+          }}
         />
       </Grid.Col>
       <Grid.Col span={cq.isSm ? 5 : 6}>

src/renderer/features/sidebar/components/collapsed-sidebar.tsx

@@ -16,6 +16,8 @@ import {
   RiFlag2Fill,
   RiFolder3Fill,
   RiPlayListFill,
+  RiSearchLine,
+  RiSearchFill,
 } from 'react-icons/ri';
 import { useLocation } from 'react-router';
 import { Link } from 'react-router-dom';
@@ -24,7 +26,7 @@ import { DropdownMenu, ScrollArea } from '/@/renderer/components';
 import { CollapsedSidebarItem } from '/@/renderer/features/sidebar/components/collapsed-sidebar-item';
 import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
 import { AppRoute } from '/@/renderer/router/routes';
-import { useWindowSettings } from '/@/renderer/store';
+import { useCommandPalette, useWindowSettings } from '/@/renderer/store';
 import { Platform } from '/@/renderer/types';
 
 const SidebarContainer = styled(motion.div)<{ windowBarStyle: Platform }>`
@@ -41,6 +43,7 @@ const SidebarContainer = styled(motion.div)<{ windowBarStyle: Platform }>`
 export const CollapsedSidebar = () => {
   const location = useLocation();
   const { windowBarStyle } = useWindowSettings();
+  const { open } = useCommandPalette();
 
   return (
     <SidebarContainer windowBarStyle={windowBarStyle}>
@@ -61,6 +64,12 @@ export const CollapsedSidebar = () => {
             <AppMenu />
           </DropdownMenu.Dropdown>
         </DropdownMenu>
+        <CollapsedSidebarItem
+          activeIcon={<RiSearchFill size="25" />}
+          icon={<RiSearchLine size="25" />}
+          label="Search"
+          onClick={open}
+        />
         <CollapsedSidebarItem
           active={location.pathname === AppRoute.HOME}
           activeIcon={<RiHome6Fill size="25" />}

src/renderer/layouts/default-layout.tsx

@@ -1,10 +1,17 @@
 import { lazy } from 'react';
 import isElectron from 'is-electron';
 import styled from 'styled-components';
-import { useWindowSettings, useSettingsStore } from '/@/renderer/store/settings.store';
+import {
+  useWindowSettings,
+  useSettingsStore,
+  useHotkeySettings,
+} from '/@/renderer/store/settings.store';
 import { Platform, PlaybackType } from '/@/renderer/types';
 import { MainContent } from '/@/renderer/layouts/default-layout/main-content';
 import { PlayerBar } from '/@/renderer/layouts/default-layout/player-bar';
+import { useHotkeys } from '@mantine/hooks';
+import { CommandPalette } from '/@/renderer/features/search/components/command-palette';
+import { useCommandPalette } from '/@/renderer/store';
 
 if (!isElectron()) {
   useSettingsStore.getState().actions.setSettings({
@@ -42,6 +49,10 @@ interface DefaultLayoutProps {
 
 export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
   const { windowBarStyle } = useWindowSettings();
+  const { opened, ...handlers } = useCommandPalette();
+  const { bindings } = useHotkeySettings();
+
+  useHotkeys([[bindings.globalSearch.hotkey, () => handlers.open()]]);
 
   return (
     <>
@@ -53,6 +64,7 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
         <MainContent shell={shell} />
         <PlayerBar />
       </Layout>
+      <CommandPalette modalProps={{ handlers, opened }} />
     </>
   );
 };