Add new ctrl/cmd - k search modal (#2467)

* add new search modal

* remove search modal from searchTab

* fix member avatar load for space with 2 member

* use media authentication when rendering avatar

* fix hotkey for macos

* add @ in username

* replace subspace minus separator with em dash

src/app/pages/Router.tsx

@@ -67,6 +67,7 @@ import { CreateRoomModalRenderer } from '../features/create-room';
 import { HomeCreateRoom } from './client/home/CreateRoom';
 import { Create } from './client/create';
 import { CreateSpaceModalRenderer } from '../features/create-space';
+import { SearchModalRenderer } from '../features/search';
 
 export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize) => {
   const { hashRouter } = clientConfig;
@@ -131,6 +132,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                       >
                         <Outlet />
                       </ClientLayout>
+                      <SearchModalRenderer />
                       <UserRoomProfileRenderer />
                       <CreateRoomModalRenderer />
                       <CreateSpaceModalRenderer />

src/app/pages/client/SidebarNav.tsx

@@ -1,14 +1,11 @@
 import React, { useRef } from 'react';
-import { Icon, Icons, Scroll } from 'folds';
+import { Scroll } from 'folds';
 
 import {
   Sidebar,
   SidebarContent,
   SidebarStackSeparator,
   SidebarStack,
-  SidebarAvatar,
-  SidebarItemTooltip,
-  SidebarItem,
 } from '../../components/sidebar';
 import {
   DirectTab,
@@ -18,8 +15,8 @@ import {
   ExploreTab,
   SettingsTab,
   UnverifiedTab,
+  SearchTab,
 } from './sidebar';
-import { openSearch } from '../../../client/action/navigation';
 import { CreateTab } from './sidebar/CreateTab';
 
 export function SidebarNav() {
@@ -46,23 +43,8 @@ export function SidebarNav() {
           <>
             <SidebarStackSeparator />
             <SidebarStack>
-              <SidebarItem>
-                <SidebarItemTooltip tooltip="Search">
-                  {(triggerRef) => (
-                    <SidebarAvatar
-                      as="button"
-                      ref={triggerRef}
-                      outlined
-                      onClick={() => openSearch()}
-                    >
-                      <Icon src={Icons.Search} />
-                    </SidebarAvatar>
-                  )}
-                </SidebarItemTooltip>
-              </SidebarItem>
-
+              <SearchTab />
               <UnverifiedTab />
-
               <InboxTab />
               <SettingsTab />
             </SidebarStack>

src/app/pages/client/sidebar/SearchTab.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Icon, Icons } from 'folds';
+import { useAtom } from 'jotai';
+import { SidebarAvatar, SidebarItem, SidebarItemTooltip } from '../../../components/sidebar';
+import { searchModalAtom } from '../../../state/searchModal';
+
+export function SearchTab() {
+  const [opened, setOpen] = useAtom(searchModalAtom);
+
+  const open = () => setOpen(true);
+
+  return (
+    <SidebarItem active={opened}>
+      <SidebarItemTooltip tooltip="Search">
+        {(triggerRef) => (
+          <SidebarAvatar as="button" ref={triggerRef} outlined onClick={open}>
+            <Icon src={Icons.Search} filled={opened} />
+          </SidebarAvatar>
+        )}
+      </SidebarItemTooltip>
+    </SidebarItem>
+  );
+}

src/app/pages/client/sidebar/index.ts

@@ -5,3 +5,4 @@ export * from './InboxTab';
 export * from './ExploreTab';
 export * from './SettingsTab';
 export * from './UnverifiedTab';
+export * from './SearchTab';