talksik/nirvana-v3
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

shortcut for starting seach

Browse Source
This commit is contained in:
talksik
2022-03-20 17:58:09 -04:00
parent a394b5fc6c
commit dac49f779a
2 changed files with 43 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/desktop/src/pages/Home/conversations/index.tsx
+1 -13
View File
@@ -1,9 +1,4 @@
import {
Add,
CardGiftcardRounded,
ContactsRounded,
LinkRounded,
} from "@mui/icons-material";
import { Add, LinkRounded } from "@mui/icons-material";
import { FaVolumeUp } from "react-icons/fa";
@@ -21,17 +16,10 @@ export default function Conversations() {
<>
{/* actions navbar */}
<div className="flex justify-end mx-10 mt-5 space-x-3">
<span className="hover:bg-slate-500 p-1 rounded-full cursor-pointer flex justify-center items-center">
<ContactsRounded className="text-slate-100" fontSize="small" />
</span>
<span className="hover:bg-slate-500 p-1 rounded-full cursor-pointer flex justify-center items-center">
<LinkRounded className="text-slate-100" fontSize="small" />
</span>
<span className="hover:bg-slate-500 p-1 rounded-full cursor-pointer flex justify-center items-center">
<CardGiftcardRounded className="text-pink-100" fontSize="small" />
</span>
<span className="hover:bg-slate-500 p-1 rounded-full cursor-pointer flex justify-center items-center">
<Add className="text-slate-100" fontSize="small" />
</span>
packages/desktop/src/pages/Home/header/index.tsx
+42 -22
View File
@@ -3,13 +3,17 @@ import { Dropdown, Menu } from "antd";
import Logo, { LogoType } from "../../../components/Logo";
import { useRecoilState, useSetRecoilState } from "recoil";
import { GlobalHotKeys } from "react-hotkeys";
import { STORE_ITEMS } from "../../../electron/constants";
import { useGetUserDetails } from "../../../controller/index";
import { useRef } from "react";
export default function Header() {
const { data: user, isLoading } = useGetUserDetails();
const [searchQuery, setSearchQuery] = useRecoilState($searchQuery);
const inputRef = useRef(null);
const setAuthTokens = useSetRecoilState($authTokens);
if (isLoading) {
@@ -29,30 +33,46 @@ export default function Header() {
</Menu>
);
// hot keys for selecting search
const handleSearch = () => {
if (inputRef?.current) {
inputRef?.current?.focus();
setSearchQuery("");
}
};
const keyMap = { START_SEARCH: "/" };
const handlers = { START_SEARCH: handleSearch };
return (
<div className="flex flex-row items-center bg-slate-800 h-20">
<Logo type={LogoType.small} className="scale-[0.4]" />
<input
placeholder="type / to search"
className="placeholder:text-slate-400 bg-transparent outline-none text-slate-100"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
<>
<GlobalHotKeys handlers={handlers} keyMap={keyMap}></GlobalHotKeys>
<button className="ml-auto hover:scale-110 bg-slate-600 text-teal-500 py-1 px-2 rounded-lg text-sm">
flow state
</button>
<div className="flex flex-row items-center bg-slate-800 h-20">
<Logo type={LogoType.small} className="scale-[0.4]" />
<input
ref={inputRef}
placeholder="type / to search"
className="placeholder:text-slate-400 bg-transparent outline-none text-slate-100"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
<Dropdown overlay={ProfileMenu} trigger={["click"]}>
<span className="relative mx-5">
<img
src={user.picture}
className="rounded-lg h-8 hover:bg-slate-200 hover:cursor-pointer hover:scale-110"
alt="cannot find"
/>
<span className="absolute bottom-0 -right-1.5 rounded-full bg-emerald-600 h-3 w-3"></span>
</span>
</Dropdown>
</div>
<button className="ml-auto hover:scale-110 bg-slate-600 text-teal-500 py-1 px-2 rounded-lg text-sm">
flow state
</button>
<Dropdown overlay={ProfileMenu} trigger={["click"]}>
<span className="relative mx-5">
<img
src={user.picture}
className="rounded-lg h-8 hover:bg-slate-200 hover:cursor-pointer hover:scale-110"
alt="cannot find"
/>
<span className="absolute bottom-0 -right-1.5 rounded-full bg-emerald-600 h-3 w-3"></span>
</span>
</Dropdown>
</div>
</>
);
}