reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add basic search dialog

Browse Source
This commit is contained in:
reya
2024-01-23 13:07:24 +07:00
parent 67afeac198
commit cb71786ac1
19 changed files with 1579 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/ui/package.json
View File

@@ -31,6 +31,7 @@
"slate-react": "^0.101.5",
"sonner": "^1.3.1",
"uqr": "^0.1.2",
"use-debounce": "^10.0.0",
"virtua": "^0.20.5"
},
"devDependencies": {

176
packages/ui/src/cmdk/command-score.ts Normal file
View File

@@ -0,0 +1,176 @@
// The scores are arranged so that a continuous match of characters will
// result in a total score of 1.
//
// The best case, this character is a match, and either this is the start
// of the string, or the previous character was also a match.
var SCORE_CONTINUE_MATCH = 1,
// A new match at the start of a word scores better than a new match
// elsewhere as it's more likely that the user will type the starts
// of fragments.
// NOTE: We score word jumps between spaces slightly higher than slashes, brackets
// hyphens, etc.
SCORE_SPACE_WORD_JUMP = 0.9,
SCORE_NON_SPACE_WORD_JUMP = 0.8,
// Any other match isn't ideal, but we include it for completeness.
SCORE_CHARACTER_JUMP = 0.17,
// If the user transposed two letters, it should be significantly penalized.
//
// i.e. "ouch" is more likely than "curtain" when "uc" is typed.
SCORE_TRANSPOSITION = 0.1,
// The goodness of a match should decay slightly with each missing
// character.
//
// i.e. "bad" is more likely than "bard" when "bd" is typed.
//
// This will not change the order of suggestions based on SCORE_* until
// 100 characters are inserted between matches.
PENALTY_SKIPPED = 0.999,
// The goodness of an exact-case match should be higher than a
// case-insensitive match by a small amount.
//
// i.e. "HTML" is more likely than "haml" when "HM" is typed.
//
// This will not change the order of suggestions based on SCORE_* until
// 1000 characters are inserted between matches.
PENALTY_CASE_MISMATCH = 0.9999,
// Match higher for letters closer to the beginning of the word
PENALTY_DISTANCE_FROM_START = 0.9,
// If the word has more characters than the user typed, it should
// be penalised slightly.
//
// i.e. "html" is more likely than "html5" if I type "html".
//
// However, it may well be the case that there's a sensible secondary
// ordering (like alphabetical) that it makes sense to rely on when
// there are many prefix matches, so we don't make the penalty increase
// with the number of tokens.
PENALTY_NOT_COMPLETE = 0.99;
var IS_GAP_REGEXP = /[\\\/_+.#"@\[\(\{&]/,
COUNT_GAPS_REGEXP = /[\\\/_+.#"@\[\(\{&]/g,
IS_SPACE_REGEXP = /[\s-]/,
COUNT_SPACE_REGEXP = /[\s-]/g;
function commandScoreInner(
string,
abbreviation,
lowerString,
lowerAbbreviation,
stringIndex,
abbreviationIndex,
memoizedResults,
) {
if (abbreviationIndex === abbreviation.length) {
if (stringIndex === string.length) {
return SCORE_CONTINUE_MATCH;
}
return PENALTY_NOT_COMPLETE;
}
var memoizeKey = `${stringIndex},${abbreviationIndex}`;
if (memoizedResults[memoizeKey] !== undefined) {
return memoizedResults[memoizeKey];
}
var abbreviationChar = lowerAbbreviation.charAt(abbreviationIndex);
var index = lowerString.indexOf(abbreviationChar, stringIndex);
var highScore = 0;
var score, transposedScore, wordBreaks, spaceBreaks;
while (index >= 0) {
score = commandScoreInner(
string,
abbreviation,
lowerString,
lowerAbbreviation,
index + 1,
abbreviationIndex + 1,
memoizedResults,
);
if (score > highScore) {
if (index === stringIndex) {
score *= SCORE_CONTINUE_MATCH;
} else if (IS_GAP_REGEXP.test(string.charAt(index - 1))) {
score *= SCORE_NON_SPACE_WORD_JUMP;
wordBreaks = string
.slice(stringIndex, index - 1)
.match(COUNT_GAPS_REGEXP);
if (wordBreaks && stringIndex > 0) {
score *= Math.pow(PENALTY_SKIPPED, wordBreaks.length);
}
} else if (IS_SPACE_REGEXP.test(string.charAt(index - 1))) {
score *= SCORE_SPACE_WORD_JUMP;
spaceBreaks = string
.slice(stringIndex, index - 1)
.match(COUNT_SPACE_REGEXP);
if (spaceBreaks && stringIndex > 0) {
score *= Math.pow(PENALTY_SKIPPED, spaceBreaks.length);
}
} else {
score *= SCORE_CHARACTER_JUMP;
if (stringIndex > 0) {
score *= Math.pow(PENALTY_SKIPPED, index - stringIndex);
}
}
if (string.charAt(index) !== abbreviation.charAt(abbreviationIndex)) {
score *= PENALTY_CASE_MISMATCH;
}
}
if (
(score < SCORE_TRANSPOSITION &&
lowerString.charAt(index - 1) ===
lowerAbbreviation.charAt(abbreviationIndex + 1)) ||
(lowerAbbreviation.charAt(abbreviationIndex + 1) ===
lowerAbbreviation.charAt(abbreviationIndex) && // allow duplicate letters. Ref #7428
lowerString.charAt(index - 1) !==
lowerAbbreviation.charAt(abbreviationIndex))
) {
transposedScore = commandScoreInner(
string,
abbreviation,
lowerString,
lowerAbbreviation,
index + 1,
abbreviationIndex + 2,
memoizedResults,
);
if (transposedScore * SCORE_TRANSPOSITION > score) {
score = transposedScore * SCORE_TRANSPOSITION;
}
}
if (score > highScore) {
highScore = score;
}
index = lowerString.indexOf(abbreviationChar, index + 1);
}
memoizedResults[memoizeKey] = highScore;
return highScore;
}
function formatInput(string) {
// convert all valid space characters to space so they match each other
return string.toLowerCase().replace(COUNT_SPACE_REGEXP, " ");
}
export function commandScore(string: string, abbreviation: string): number {
/* NOTE:
* in the original, we used to do the lower-casing on each recursive call, but this meant that toLowerCase()
* was the dominating cost in the algorithm, passing both is a little ugly, but considerably faster.
*/
return commandScoreInner(
string,
abbreviation,
formatInput(string),
formatInput(abbreviation),
0,
0,
{},
);
}

1132
packages/ui/src/cmdk/index.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

2
packages/ui/src/layouts/app.tsx
View File

@@ -3,6 +3,7 @@ import { type Platform } from "@tauri-apps/plugin-os";
import { Outlet } from "react-router-dom";
import { Editor } from "../editor/column";
import { Navigation } from "../navigation";
import { SearchDialog } from "../search/dialog";
import { WindowTitleBar } from "../titlebar";
export function AppLayout({ platform }: { platform: Platform }) {
@@ -21,6 +22,7 @@ export function AppLayout({ platform }: { platform: Platform }) {
<div className="flex w-full h-full min-h-0">
<Navigation />
<Editor />
<SearchDialog />
<div className="flex-1 h-full px-1 pb-1">
<Outlet />
</div>

29
packages/ui/src/navigation.tsx
View File

@@ -7,10 +7,12 @@ import {
DepotIcon,
HomeFilledIcon,
HomeIcon,
SearchFilledIcon,
SearchIcon,
SettingsFilledIcon,
SettingsIcon,
} from "@lume/icons";
import { cn, editorAtom } from "@lume/utils";
import { cn, editorAtom, searchAtom } from "@lume/utils";
import { useAtom } from "jotai";
import { useHotkeys } from "react-hotkeys-hook";
import { NavLink } from "react-router-dom";
@@ -19,6 +21,9 @@ import { UnreadActivity } from "./unread";
export function Navigation() {
const [isEditorOpen, setIsEditorOpen] = useAtom(editorAtom);
const [search, setSearch] = useAtom(searchAtom);
// shortcut for editor
useHotkeys("meta+n", () => setIsEditorOpen((state) => !state), []);
return (
@@ -117,7 +122,27 @@ export function Navigation() {
</NavLink>
</div>
</div>
<div className="flex flex-col">
<div className="flex flex-col gap-2">
<button
type="button"
onClick={() => setSearch((open) => !open)}
className="inline-flex flex-col items-center justify-center"
>
<div
className={cn(
"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
search
? "bg-black/10 text-black dark:bg-white/10 dark:text-white"
: "text-black/50 dark:text-neutral-400",
)}
>
{search ? (
<SearchFilledIcon className="size-6" />
) : (
<SearchIcon className="size-6" />
)}
</div>
</button>
<NavLink
to="/settings/"
preventScrollReset={true}

162
packages/ui/src/search/dialog.tsx Normal file
View File

@@ -0,0 +1,162 @@
import { Note, User, useArk, useColumnContext } from "@lume/ark";
import { LoaderIcon } from "@lume/icons";
import { COL_TYPES, searchAtom } from "@lume/utils";
import { type NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
import { useAtom } from "jotai";
import { useEffect, useState } from "react";
import { useDebounce } from "use-debounce";
import { Command } from "../cmdk";
export function SearchDialog() {
const [open, setOpen] = useAtom(searchAtom);
const [loading, setLoading] = useState(false);
const [events, setEvents] = useState<NDKEvent[]>([]);
const [search, setSearch] = useState("");
const [value] = useDebounce(search, 1200);
const ark = useArk();
const { vlistRef, columns, addColumn } = useColumnContext();
const searchEvents = async () => {
if (!value.length) return;
// start loading
setLoading(true);
// search events, require nostr.band relay
const events = await ark.getEvents({
kinds: [NDKKind.Text, NDKKind.Metadata],
search: value,
limit: 20,
});
// update state
setLoading(false);
setEvents(events);
};
const selectEvent = (kind: NDKKind, value: string) => {
if (!value.length) return;
if (kind === NDKKind.Metadata) {
// add new column
addColumn({
kind: COL_TYPES.user,
title: "User",
content: value,
});
} else {
// add new column
addColumn({
kind: COL_TYPES.thread,
title: "",
content: value,
});
}
// update state
setOpen(false);
vlistRef?.current.scrollToIndex(columns.length);
};
useEffect(() => {
searchEvents();
}, [value]);
// Toggle the menu when ⌘K is pressed
useEffect(() => {
const down = (e) => {
if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
e.preventDefault();
setOpen((open) => !open);
}
};
document.addEventListener("keydown", down);
return () => document.removeEventListener("keydown", down);
}, []);
return (
<Command.Dialog
open={open}
onOpenChange={setOpen}
shouldFilter={false}
label="Search"
overlayClassName="fixed inset-0 z-50 bg-black/10 backdrop-blur-sm dark:bg-white/10"
contentClassName="fixed inset-0 z-50 flex items-center justify-center min-h-full"
className="relative w-full max-w-xl bg-white h-min rounded-xl dark:bg-black"
>
<div className="px-3 pt-3">
<Command.Input
value={search}
onValueChange={setSearch}
placeholder="Type something to search..."
className="w-full h-12 bg-neutral-100 dark:bg-neutral-900 rounded-xl border-none focus:outline-none focus:ring-0 placeholder:text-neutral-500 dark:placeholder:text-neutral-600"
/>
</div>
<Command.List className="mt-4 h-[500px] px-3 overflow-y-auto w-full flex flex-col">
{loading ? (
<Command.Loading className="flex items-center justify-center h-12">
<LoaderIcon className="size-5 animate-spin" />
</Command.Loading>
) : !events.length ? (
<Command.Empty className="flex items-center justify-center h-12 text-sm">
No results found.
</Command.Empty>
) : (
<>
<Command.Group heading="Users">
{events
.filter((ev) => ev.kind === NDKKind.Metadata)
.map((event) => (
<Command.Item
key={event.id}
value={event.pubkey}
onSelect={(value) => selectEvent(event.kind, value)}
className="py-3 px-3 bg-neutral-50 dark:bg-neutral-950 rounded-xl my-3 focus:ring-1 focus:ring-blue-500"
>
<User.Provider pubkey={event.pubkey} embed={event.content}>
<User.Root className="flex items-center justify-between">
<div className="flex items-center gap-2">
<User.Avatar className="size-11 rounded-lg shrink-0 ring-1 ring-neutral-100 dark:ring-neutral-900" />
<div>
<User.Name className="font-semibold" />
<User.NIP05 pubkey={event.pubkey} />
</div>
</div>
<User.Button
target={event.pubkey}
className="inline-flex items-center justify-center w-20 font-medium text-sm border-t rounded-lg border-neutral-900 dark:border-neutral-800 h-9 bg-neutral-950 text-neutral-50 dark:bg-neutral-900 hover:bg-neutral-900 dark:hover:bg-neutral-800"
/>
</User.Root>
</User.Provider>
</Command.Item>
))}
</Command.Group>
<Command.Group heading="Notes">
{events
.filter((ev) => ev.kind === NDKKind.Text)
.map((event) => (
<Command.Item
key={event.id}
value={event.id}
onSelect={(value) => selectEvent(event.kind, value)}
className="py-3 px-3 bg-neutral-50 dark:bg-neutral-950 rounded-xl my-3"
>
<Note.Provider event={event}>
<Note.Root>
<Note.User />
<div className="select-text mt-2 leading-normal line-clamp-3 text-balance">
{event.content}
</div>
</Note.Root>
</Note.Provider>
</Command.Item>
))}
</Command.Group>
</>
)}
</Command.List>
</Command.Dialog>
);
}