mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-29 16:30:55 +00:00
feat: add basic search dialog
This commit is contained in:
parent
67afeac198
commit
cb71786ac1
@ -11,20 +11,18 @@ import {
|
|||||||
ArrowLeftIcon,
|
ArrowLeftIcon,
|
||||||
ArrowRightIcon,
|
ArrowRightIcon,
|
||||||
NewColumnIcon,
|
NewColumnIcon,
|
||||||
PlusIcon,
|
|
||||||
PlusSquareIcon,
|
PlusSquareIcon,
|
||||||
} from "@lume/icons";
|
} from "@lume/icons";
|
||||||
import { IColumn } from "@lume/types";
|
import { IColumn } from "@lume/types";
|
||||||
import { TutorialModal } from "@lume/ui/src/tutorial/modal";
|
import { TutorialModal } from "@lume/ui/src/tutorial/modal";
|
||||||
import { COL_TYPES } from "@lume/utils";
|
import { COL_TYPES } from "@lume/utils";
|
||||||
import * as Tooltip from "@radix-ui/react-tooltip";
|
import * as Tooltip from "@radix-ui/react-tooltip";
|
||||||
import { useRef, useState } from "react";
|
import { useState } from "react";
|
||||||
import { VList, VListHandle } from "virtua";
|
import { VList } from "virtua";
|
||||||
|
|
||||||
export function HomeScreen() {
|
export function HomeScreen() {
|
||||||
const ref = useRef<VListHandle>(null);
|
const { columns, vlistRef, addColumn } = useColumnContext();
|
||||||
const [selectedIndex, setSelectedIndex] = useState(-1);
|
const [selectedIndex, setSelectedIndex] = useState(-1);
|
||||||
const { columns, addColumn } = useColumnContext();
|
|
||||||
|
|
||||||
const renderItem = (column: IColumn) => {
|
const renderItem = (column: IColumn) => {
|
||||||
switch (column.kind) {
|
switch (column.kind) {
|
||||||
@ -52,20 +50,20 @@ export function HomeScreen() {
|
|||||||
return (
|
return (
|
||||||
<div className="relative w-full h-full">
|
<div className="relative w-full h-full">
|
||||||
<VList
|
<VList
|
||||||
ref={ref}
|
ref={vlistRef}
|
||||||
className="h-full w-full flex-nowrap overflow-x-auto !overflow-y-hidden scrollbar-none focus:outline-none"
|
className="h-full w-full flex-nowrap overflow-x-auto !overflow-y-hidden scrollbar-none focus:outline-none"
|
||||||
itemSize={420}
|
itemSize={420}
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
horizontal
|
horizontal
|
||||||
onKeyDown={(e) => {
|
onKeyDown={(e) => {
|
||||||
if (!ref.current) return;
|
if (!vlistRef.current) return;
|
||||||
switch (e.code) {
|
switch (e.code) {
|
||||||
case "ArrowUp":
|
case "ArrowUp":
|
||||||
case "ArrowLeft": {
|
case "ArrowLeft": {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const prevIndex = Math.max(selectedIndex - 1, 0);
|
const prevIndex = Math.max(selectedIndex - 1, 0);
|
||||||
setSelectedIndex(prevIndex);
|
setSelectedIndex(prevIndex);
|
||||||
ref.current.scrollToIndex(prevIndex, {
|
vlistRef.current.scrollToIndex(prevIndex, {
|
||||||
align: "center",
|
align: "center",
|
||||||
smooth: true,
|
smooth: true,
|
||||||
});
|
});
|
||||||
@ -76,7 +74,7 @@ export function HomeScreen() {
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const nextIndex = Math.min(selectedIndex + 1, columns.length - 1);
|
const nextIndex = Math.min(selectedIndex + 1, columns.length - 1);
|
||||||
setSelectedIndex(nextIndex);
|
setSelectedIndex(nextIndex);
|
||||||
ref.current.scrollToIndex(nextIndex, {
|
vlistRef.current.scrollToIndex(nextIndex, {
|
||||||
align: "center",
|
align: "center",
|
||||||
smooth: true,
|
smooth: true,
|
||||||
});
|
});
|
||||||
@ -114,7 +112,7 @@ export function HomeScreen() {
|
|||||||
onClick={() => {
|
onClick={() => {
|
||||||
const prevIndex = Math.max(selectedIndex - 1, 0);
|
const prevIndex = Math.max(selectedIndex - 1, 0);
|
||||||
setSelectedIndex(prevIndex);
|
setSelectedIndex(prevIndex);
|
||||||
ref.current.scrollToIndex(prevIndex, {
|
vlistRef.current.scrollToIndex(prevIndex, {
|
||||||
align: "center",
|
align: "center",
|
||||||
smooth: true,
|
smooth: true,
|
||||||
});
|
});
|
||||||
@ -141,7 +139,7 @@ export function HomeScreen() {
|
|||||||
columns.length - 1,
|
columns.length - 1,
|
||||||
);
|
);
|
||||||
setSelectedIndex(nextIndex);
|
setSelectedIndex(nextIndex);
|
||||||
ref.current.scrollToIndex(nextIndex, {
|
vlistRef.current.scrollToIndex(nextIndex, {
|
||||||
align: "center",
|
align: "center",
|
||||||
smooth: true,
|
smooth: true,
|
||||||
});
|
});
|
||||||
|
@ -37,7 +37,8 @@
|
|||||||
"sonner": "^1.3.1",
|
"sonner": "^1.3.1",
|
||||||
"string-strip-html": "^13.4.5",
|
"string-strip-html": "^13.4.5",
|
||||||
"tippy.js": "^6.3.7",
|
"tippy.js": "^6.3.7",
|
||||||
"use-context-selector": "^1.4.1"
|
"use-context-selector": "^1.4.1",
|
||||||
|
"virtua": "^0.20.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@lume/tailwindcss": "workspace:^",
|
"@lume/tailwindcss": "workspace:^",
|
||||||
|
@ -266,6 +266,12 @@ export class Ark {
|
|||||||
return event;
|
return event;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public async getEvents(filter: NDKFilter) {
|
||||||
|
const events = await this.ndk.fetchEvents(filter);
|
||||||
|
if (!events) return [];
|
||||||
|
return [...events];
|
||||||
|
}
|
||||||
|
|
||||||
public getEventThread({
|
public getEventThread({
|
||||||
content,
|
content,
|
||||||
tags,
|
tags,
|
||||||
|
@ -2,17 +2,21 @@ import { useStorage } from "@lume/storage";
|
|||||||
import { IColumn } from "@lume/types";
|
import { IColumn } from "@lume/types";
|
||||||
import { COL_TYPES } from "@lume/utils";
|
import { COL_TYPES } from "@lume/utils";
|
||||||
import {
|
import {
|
||||||
ReactNode,
|
type MutableRefObject,
|
||||||
|
type ReactNode,
|
||||||
createContext,
|
createContext,
|
||||||
useCallback,
|
useCallback,
|
||||||
useContext,
|
useContext,
|
||||||
useEffect,
|
useEffect,
|
||||||
|
useRef,
|
||||||
useState,
|
useState,
|
||||||
} from "react";
|
} from "react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
|
import { type VListHandle } from "virtua";
|
||||||
|
|
||||||
type ColumnContext = {
|
type ColumnContext = {
|
||||||
columns: IColumn[];
|
columns: IColumn[];
|
||||||
|
vlistRef: MutableRefObject<VListHandle>;
|
||||||
addColumn: (column: IColumn) => Promise<void>;
|
addColumn: (column: IColumn) => Promise<void>;
|
||||||
removeColumn: (id: number) => Promise<void>;
|
removeColumn: (id: number) => Promise<void>;
|
||||||
moveColumn: (id: number, position: "left" | "right") => void;
|
moveColumn: (id: number, position: "left" | "right") => void;
|
||||||
@ -24,6 +28,8 @@ const ColumnContext = createContext<ColumnContext>(null);
|
|||||||
|
|
||||||
export function ColumnProvider({ children }: { children: ReactNode }) {
|
export function ColumnProvider({ children }: { children: ReactNode }) {
|
||||||
const storage = useStorage();
|
const storage = useStorage();
|
||||||
|
const vlistRef = useRef<VListHandle>(null);
|
||||||
|
|
||||||
const [columns, setColumns] = useState<IColumn[]>([
|
const [columns, setColumns] = useState<IColumn[]>([
|
||||||
{
|
{
|
||||||
id: 9999,
|
id: 9999,
|
||||||
@ -112,6 +118,7 @@ export function ColumnProvider({ children }: { children: ReactNode }) {
|
|||||||
<ColumnContext.Provider
|
<ColumnContext.Provider
|
||||||
value={{
|
value={{
|
||||||
columns,
|
columns,
|
||||||
|
vlistRef,
|
||||||
addColumn,
|
addColumn,
|
||||||
removeColumn,
|
removeColumn,
|
||||||
moveColumn,
|
moveColumn,
|
||||||
|
@ -109,7 +109,7 @@ export function NoteChild({
|
|||||||
<User.Root>
|
<User.Root>
|
||||||
<User.Avatar className="size-10 shrink-0 rounded-lg object-cover" />
|
<User.Avatar className="size-10 shrink-0 rounded-lg object-cover" />
|
||||||
<div className="absolute left-2 top-2 inline-flex items-center gap-1.5 font-semibold leading-tight">
|
<div className="absolute left-2 top-2 inline-flex items-center gap-1.5 font-semibold leading-tight">
|
||||||
<User.Name />
|
<User.Name className="max-w-[10rem] truncate" />
|
||||||
<div className="font-normal text-neutral-700 dark:text-neutral-300">
|
<div className="font-normal text-neutral-700 dark:text-neutral-300">
|
||||||
{isRoot ? "posted:" : "replied:"}
|
{isRoot ? "posted:" : "replied:"}
|
||||||
</div>
|
</div>
|
||||||
|
@ -38,10 +38,12 @@ export function UserNip05({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="inline-flex items-center gap-1">
|
<div className="inline-flex items-center gap-1">
|
||||||
<p className={cn("text-sm font-medium", className)}>
|
<p className={cn("text-sm", className)}>
|
||||||
{user?.nip05?.startsWith("_@")
|
{!user?.nip05
|
||||||
? user?.nip05?.replace("_@", "")
|
? displayNpub(pubkey, 16)
|
||||||
: displayNpub(pubkey, 16)}
|
: user?.nip05?.startsWith("_@")
|
||||||
|
? user?.nip05?.replace("_@", "")
|
||||||
|
: user?.nip05}
|
||||||
</p>
|
</p>
|
||||||
{!isLoading && verified ? (
|
{!isLoading && verified ? (
|
||||||
<VerifiedIcon className="size-4 text-teal-500" />
|
<VerifiedIcon className="size-4 text-teal-500" />
|
||||||
|
@ -8,16 +8,20 @@ const UserContext = createContext<NDKUserProfile>(null);
|
|||||||
export function UserProvider({
|
export function UserProvider({
|
||||||
pubkey,
|
pubkey,
|
||||||
children,
|
children,
|
||||||
}: { pubkey: string; children: ReactNode }) {
|
embed,
|
||||||
|
}: { pubkey: string; children: ReactNode; embed?: string }) {
|
||||||
const ark = useArk();
|
const ark = useArk();
|
||||||
const { data: user } = useQuery({
|
const { data: user } = useQuery({
|
||||||
queryKey: ["user", pubkey],
|
queryKey: ["user", pubkey],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
|
if (embed) return JSON.parse(embed) as NDKUserProfile;
|
||||||
|
|
||||||
const profile = await ark.getUserProfile(pubkey);
|
const profile = await ark.getUserProfile(pubkey);
|
||||||
if (!profile)
|
if (!profile)
|
||||||
throw new Error(
|
throw new Error(
|
||||||
`Cannot get metadata for ${pubkey}, will be retry after 10 seconds`,
|
`Cannot get metadata for ${pubkey}, will be retry after 10 seconds`,
|
||||||
);
|
);
|
||||||
|
|
||||||
return profile;
|
return profile;
|
||||||
},
|
},
|
||||||
refetchOnMount: false,
|
refetchOnMount: false,
|
||||||
|
@ -88,7 +88,6 @@ export const LumeProvider = ({ children }: PropsWithChildren<object>) => {
|
|||||||
async function initNDK() {
|
async function initNDK() {
|
||||||
const explicitRelayUrls = normalizeRelayUrlSet([
|
const explicitRelayUrls = normalizeRelayUrlSet([
|
||||||
"wss://bostr.nokotaro.com/",
|
"wss://bostr.nokotaro.com/",
|
||||||
"wss://nostr.mutinywallet.com/",
|
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// #TODO: user should config outbox relays
|
// #TODO: user should config outbox relays
|
||||||
@ -108,10 +107,10 @@ export const LumeProvider = ({ children }: PropsWithChildren<object>) => {
|
|||||||
explicitRelayUrls,
|
explicitRelayUrls,
|
||||||
outboxRelayUrls,
|
outboxRelayUrls,
|
||||||
blacklistRelayUrls,
|
blacklistRelayUrls,
|
||||||
enableOutboxModel: !storage.settings.lowPower,
|
enableOutboxModel: false,
|
||||||
autoConnectUserRelays: !storage.settings.lowPower,
|
autoConnectUserRelays: !storage.settings.lowPower,
|
||||||
autoFetchUserMutelist: !storage.settings.lowPower,
|
autoFetchUserMutelist: !storage.settings.lowPower,
|
||||||
clientName: "Lume",
|
// clientName: "Lume",
|
||||||
// clientNip89: '',
|
// clientNip89: '',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -110,3 +110,4 @@ export * from "./src/bellFilled";
|
|||||||
export * from "./src/foryou";
|
export * from "./src/foryou";
|
||||||
export * from "./src/editInterest";
|
export * from "./src/editInterest";
|
||||||
export * from "./src/newColumn";
|
export * from "./src/newColumn";
|
||||||
|
export * from "./src/searchFilled";
|
||||||
|
17
packages/icons/src/searchFilled.tsx
Normal file
17
packages/icons/src/searchFilled.tsx
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
export function SearchFilledIcon(props: JSX.IntrinsicElements["svg"]) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M11.5 2a9.5 9.5 0 105.973 16.887l2.82 2.82a1 1 0 001.414-1.414l-2.82-2.82A9.5 9.5 0 0011.5 2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
@ -442,14 +442,13 @@ export class LumeStorage {
|
|||||||
}
|
}
|
||||||
|
|
||||||
public async logout() {
|
public async logout() {
|
||||||
const res = await this.#db.execute(
|
await this.createSetting("nsecbunker", "0");
|
||||||
|
await this.#db.execute(
|
||||||
"UPDATE accounts SET is_active = '0' WHERE id = $1;",
|
"UPDATE accounts SET is_active = '0' WHERE id = $1;",
|
||||||
[this.currentUser.id],
|
[this.currentUser.id],
|
||||||
);
|
);
|
||||||
|
|
||||||
if (res) {
|
this.currentUser = null;
|
||||||
this.currentUser = null;
|
this.nwc = null;
|
||||||
this.nwc = null;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -31,6 +31,7 @@
|
|||||||
"slate-react": "^0.101.5",
|
"slate-react": "^0.101.5",
|
||||||
"sonner": "^1.3.1",
|
"sonner": "^1.3.1",
|
||||||
"uqr": "^0.1.2",
|
"uqr": "^0.1.2",
|
||||||
|
"use-debounce": "^10.0.0",
|
||||||
"virtua": "^0.20.5"
|
"virtua": "^0.20.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
176
packages/ui/src/cmdk/command-score.ts
Normal file
176
packages/ui/src/cmdk/command-score.ts
Normal 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
1132
packages/ui/src/cmdk/index.tsx
Normal file
File diff suppressed because it is too large
Load Diff
@ -3,6 +3,7 @@ import { type Platform } from "@tauri-apps/plugin-os";
|
|||||||
import { Outlet } from "react-router-dom";
|
import { Outlet } from "react-router-dom";
|
||||||
import { Editor } from "../editor/column";
|
import { Editor } from "../editor/column";
|
||||||
import { Navigation } from "../navigation";
|
import { Navigation } from "../navigation";
|
||||||
|
import { SearchDialog } from "../search/dialog";
|
||||||
import { WindowTitleBar } from "../titlebar";
|
import { WindowTitleBar } from "../titlebar";
|
||||||
|
|
||||||
export function AppLayout({ platform }: { platform: Platform }) {
|
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">
|
<div className="flex w-full h-full min-h-0">
|
||||||
<Navigation />
|
<Navigation />
|
||||||
<Editor />
|
<Editor />
|
||||||
|
<SearchDialog />
|
||||||
<div className="flex-1 h-full px-1 pb-1">
|
<div className="flex-1 h-full px-1 pb-1">
|
||||||
<Outlet />
|
<Outlet />
|
||||||
</div>
|
</div>
|
||||||
|
@ -7,10 +7,12 @@ import {
|
|||||||
DepotIcon,
|
DepotIcon,
|
||||||
HomeFilledIcon,
|
HomeFilledIcon,
|
||||||
HomeIcon,
|
HomeIcon,
|
||||||
|
SearchFilledIcon,
|
||||||
|
SearchIcon,
|
||||||
SettingsFilledIcon,
|
SettingsFilledIcon,
|
||||||
SettingsIcon,
|
SettingsIcon,
|
||||||
} from "@lume/icons";
|
} from "@lume/icons";
|
||||||
import { cn, editorAtom } from "@lume/utils";
|
import { cn, editorAtom, searchAtom } from "@lume/utils";
|
||||||
import { useAtom } from "jotai";
|
import { useAtom } from "jotai";
|
||||||
import { useHotkeys } from "react-hotkeys-hook";
|
import { useHotkeys } from "react-hotkeys-hook";
|
||||||
import { NavLink } from "react-router-dom";
|
import { NavLink } from "react-router-dom";
|
||||||
@ -19,6 +21,9 @@ import { UnreadActivity } from "./unread";
|
|||||||
|
|
||||||
export function Navigation() {
|
export function Navigation() {
|
||||||
const [isEditorOpen, setIsEditorOpen] = useAtom(editorAtom);
|
const [isEditorOpen, setIsEditorOpen] = useAtom(editorAtom);
|
||||||
|
const [search, setSearch] = useAtom(searchAtom);
|
||||||
|
|
||||||
|
// shortcut for editor
|
||||||
useHotkeys("meta+n", () => setIsEditorOpen((state) => !state), []);
|
useHotkeys("meta+n", () => setIsEditorOpen((state) => !state), []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -117,7 +122,27 @@ export function Navigation() {
|
|||||||
</NavLink>
|
</NavLink>
|
||||||
</div>
|
</div>
|
||||||
</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
|
<NavLink
|
||||||
to="/settings/"
|
to="/settings/"
|
||||||
preventScrollReset={true}
|
preventScrollReset={true}
|
||||||
|
162
packages/ui/src/search/dialog.tsx
Normal file
162
packages/ui/src/search/dialog.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
@ -22,3 +22,6 @@ export const activityUnreadAtom = atom(0);
|
|||||||
|
|
||||||
// Tutorial
|
// Tutorial
|
||||||
export const tutorialAtom = atomWithStorage("tutorial", true);
|
export const tutorialAtom = atomWithStorage("tutorial", true);
|
||||||
|
|
||||||
|
// Search
|
||||||
|
export const searchAtom = atom(false);
|
||||||
|
@ -374,6 +374,9 @@ importers:
|
|||||||
use-context-selector:
|
use-context-selector:
|
||||||
specifier: ^1.4.1
|
specifier: ^1.4.1
|
||||||
version: 1.4.1(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)
|
version: 1.4.1(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)
|
||||||
|
virtua:
|
||||||
|
specifier: ^0.20.5
|
||||||
|
version: 0.20.5(react-dom@18.2.0)(react@18.2.0)
|
||||||
devDependencies:
|
devDependencies:
|
||||||
'@lume/tailwindcss':
|
'@lume/tailwindcss':
|
||||||
specifier: workspace:^
|
specifier: workspace:^
|
||||||
@ -1051,6 +1054,9 @@ importers:
|
|||||||
uqr:
|
uqr:
|
||||||
specifier: ^0.1.2
|
specifier: ^0.1.2
|
||||||
version: 0.1.2
|
version: 0.1.2
|
||||||
|
use-debounce:
|
||||||
|
specifier: ^10.0.0
|
||||||
|
version: 10.0.0(react@18.2.0)
|
||||||
virtua:
|
virtua:
|
||||||
specifier: ^0.20.5
|
specifier: ^0.20.5
|
||||||
version: 0.20.5(react-dom@18.2.0)(react@18.2.0)
|
version: 0.20.5(react-dom@18.2.0)(react@18.2.0)
|
||||||
@ -8373,6 +8379,15 @@ packages:
|
|||||||
scheduler: 0.23.0
|
scheduler: 0.23.0
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
/use-debounce@10.0.0(react@18.2.0):
|
||||||
|
resolution: {integrity: sha512-XRjvlvCB46bah9IBXVnq/ACP2lxqXyZj0D9hj4K5OzNroMDpTEBg8Anuh1/UfRTRs7pLhQ+RiNxxwZu9+MVl1A==}
|
||||||
|
engines: {node: '>= 16.0.0'}
|
||||||
|
peerDependencies:
|
||||||
|
react: '>=16.8.0'
|
||||||
|
dependencies:
|
||||||
|
react: 18.2.0
|
||||||
|
dev: false
|
||||||
|
|
||||||
/use-sidecar@1.1.2(@types/react@18.2.48)(react@18.2.0):
|
/use-sidecar@1.1.2(@types/react@18.2.48)(react@18.2.0):
|
||||||
resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
|
resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
|
Loading…
Reference in New Issue
Block a user