James Ritchie
0632e82a4b
commit09bed34946Author: James Ritchie <james@jamesritchie.co.uk> Date: Fri Apr 8 14:03:50 2022 +0100 Fixed the layout of a search list item commit90126d43adAuthor: Eric Allam <eallam@icloud.com> Date: Fri Apr 1 17:25:13 2022 +0100 Insanely complicated path search results highlighitng and truncating commita4bbd5521eAuthor: James Ritchie <james@jamesritchie.co.uk> Date: Fri Apr 1 14:05:01 2022 +0100 Improved the title editing in the header commit5814053968Author: James Ritchie <james@jamesritchie.co.uk> Date: Fri Apr 1 13:38:33 2022 +0100 Improved text highlight colour commit110de37242Author: James Ritchie <james@jamesritchie.co.uk> Date: Fri Apr 1 13:36:57 2022 +0100 Icon hover state now uses isHighlighted commitfb6da943d9Author: James Ritchie <james@jamesritchie.co.uk> Date: Fri Apr 1 13:31:11 2022 +0100 Light mode styling commit2c378d5158Author: James Ritchie <james@jamesritchie.co.uk> Date: Fri Apr 1 12:24:43 2022 +0100 Spacing between search items no longer a hack commit85d90bb0aeAuthor: Eric Allam <eallam@icloud.com> Date: Fri Apr 1 12:19:10 2022 +0100 Added ellipsis to search matches if they are windowed commit91f3e70676Author: Eric Allam <eallam@icloud.com> Date: Fri Apr 1 12:08:00 2022 +0100 Fixed search item icons commite384c87c6fAuthor: James Ritchie <james@jamesritchie.co.uk> Date: Fri Apr 1 11:52:58 2022 +0100 Improved hover state commitf4681edc07Author: James Ritchie <james@jamesritchie.co.uk> Date: Fri Apr 1 11:47:33 2022 +0100 Removed focus state on button commitfaa2d0663cAuthor: Eric Allam <eallam@icloud.com> Date: Fri Apr 1 11:26:42 2022 +0100 made the search palette a little bigger commitdf8bd521feAuthor: Eric Allam <eallam@icloud.com> Date: Fri Apr 1 11:26:14 2022 +0100 Remove onOverlayClick prop commitecd046b3b2Author: Eric Allam <eallam@icloud.com> Date: Fri Apr 1 11:18:46 2022 +0100 Close search when the overlay is clicked commitfba330b5d9Author: Eric Allam <eallam@icloud.com> Date: Fri Apr 1 11:10:35 2022 +0100 hitting esc when search input is focused and empty should close the search commitfc2fe8ae6fAuthor: Eric Allam <eallam@icloud.com> Date: Fri Apr 1 11:00:08 2022 +0100 Highlight the window of the best search match in the search results commit45193ec92cAuthor: James Ritchie <james@jamesritchie.co.uk> Date: Fri Apr 1 10:45:01 2022 +0100 Now you can arrow down to the last item in the list commit0de5fef7e9Author: James Ritchie <james@jamesritchie.co.uk> Date: Fri Apr 1 10:37:20 2022 +0100 Added a hacky margin between items and remove the transition to make it feel snappier commit167b548343Author: Eric Allam <eallam@icloud.com> Date: Fri Apr 1 09:30:33 2022 +0100 WIP implementing search commit5655631f12Author: James Ritchie <james@jamesritchie.co.uk> Date: Fri Mar 25 15:28:19 2022 +0000 Build and styled search modal commite368db81c8Author: Eric Allam <eallam@icloud.com> Date: Fri Mar 25 14:42:03 2022 +0000 Implement JSON search through fuse.js + web worker + react hook commit8caa11ba1cAuthor: Eric Allam <eallam@icloud.com> Date: Wed Mar 23 10:21:33 2022 +0000 Start of the Command Palette using radix-ui Dialog commit904b64d781Author: Eric Allam <eallam@icloud.com> Date: Wed Mar 23 09:58:52 2022 +0000 Uncommented out the search bar field
67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
import { SearchIcon } from "@heroicons/react/outline";
|
|
import { ShortcutIcon } from "./Icons/ShortcutIcon";
|
|
import { Body } from "./Primitives/Body";
|
|
import { Dialog, DialogTrigger, DialogContent } from "./UI/Dialog";
|
|
|
|
import classnames from "~/utilities/classnames";
|
|
import { SearchPalette } from "./SearchPalette";
|
|
import { useState } from "react";
|
|
import { useHotkeys } from "react-hotkeys-hook";
|
|
import { useJsonColumnViewAPI } from "~/hooks/useJsonColumnView";
|
|
|
|
export function SearchBar() {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const { goToNodeId } = useJsonColumnViewAPI();
|
|
|
|
useHotkeys(
|
|
"cmd+k",
|
|
(e) => {
|
|
e.preventDefault();
|
|
setIsOpen(true);
|
|
},
|
|
[setIsOpen]
|
|
);
|
|
|
|
return (
|
|
<Dialog open={isOpen}>
|
|
<DialogTrigger
|
|
className="focus:outline-none focus-visible:outline-none"
|
|
onClick={() => setIsOpen(true)}
|
|
>
|
|
<div className="flex justify-between items-center group w-44 py-[3px] rounded-sm bg-slate-300 transition hover:bg-slate-400 hover:bg-opacity-50 dark:bg-slate-800 dark:text-slate-400 hover:cursor-pointer hover:dark:bg-slate-700 hover:dark:bg-opacity-70">
|
|
<div className="flex items-center pl-1">
|
|
<SearchIcon className="w-4 h-4 mr-1" />
|
|
<Body>Search…</Body>
|
|
</div>
|
|
<div className="flex items-center gap-1 pr-1">
|
|
<ShortcutIcon className="w-4 h-4 text-sm bg-slate-200 transition group-hover:bg-slate-100 dark:bg-slate-700 dark:group-hover:bg-slate-600">
|
|
⌘
|
|
</ShortcutIcon>
|
|
<ShortcutIcon className="w-4 h-4 text-sm bg-slate-200 transition group-hover:bg-slate-100 dark:bg-slate-700 dark:group-hover:bg-slate-600">
|
|
K
|
|
</ShortcutIcon>
|
|
</div>
|
|
</div>
|
|
</DialogTrigger>
|
|
<DialogContent
|
|
onOverlayClick={() => setIsOpen(false)}
|
|
className={classnames(
|
|
"fixed z-50",
|
|
"w-[95vw] max-w-2xl rounded-lg",
|
|
"top-0 left-[50%] -translate-x-[50%]",
|
|
"mt-[60px]",
|
|
"bg-white border-[1px] border-slate-500 dark:border-slate-700 dark:bg-slate-800"
|
|
)}
|
|
>
|
|
<SearchPalette
|
|
onClose={() => setIsOpen(false)}
|
|
onSelect={(entry) => {
|
|
setIsOpen(false);
|
|
goToNodeId(entry.path, "search");
|
|
}}
|
|
/>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|