highperfocused/lume
1
0
Fork 0
mirror of https://github.com/lumehq/lume.git synced 2025-04-01 16:38:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add empty state to search dialog

Browse Source
This commit is contained in:
reya 2024-01-24 13:34:27 +07:00
parent cb71786ac1
commit 057c57b70f
2 changed files with 12 additions and 4 deletions
packages
ark/src
provider.tsx
ui/src/search
dialog.tsx

2
packages/ark/src/provider.tsx

@ -107,7 +107,7 @@ export const LumeProvider = ({ children }: PropsWithChildren<object>) => {
explicitRelayUrls,
outboxRelayUrls,
blacklistRelayUrls,
enableOutboxModel: false,
enableOutboxModel: !storage.settings.lowPower,
autoConnectUserRelays: !storage.settings.lowPower,
autoFetchUserMutelist: !storage.settings.lowPower,
// clientName: "Lume",

14
packages/ui/src/search/dialog.tsx

@ -1,5 +1,5 @@
import { Note, User, useArk, useColumnContext } from "@lume/ark";
import { LoaderIcon } from "@lume/icons";
import { LoaderIcon, SearchIcon } from "@lume/icons";
import { COL_TYPES, searchAtom } from "@lume/utils";
import { type NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
import { useAtom } from "jotai";
@ -96,11 +96,11 @@ export function SearchDialog() {
</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">
<Command.Loading className="flex items-center justify-center h-full">
<LoaderIcon className="size-5 animate-spin" />
</Command.Loading>
) : !events.length ? (
<Command.Empty className="flex items-center justify-center h-12 text-sm">
<Command.Empty className="flex items-center justify-center h-full text-sm">
No results found.
</Command.Empty>
) : (
@ -156,6 +156,14 @@ export function SearchDialog() {
</Command.Group>
</>
)}
{!loading ? (
<div className="h-full flex items-center justify-center flex-col gap-3">
<div className="size-16 bg-blue-100 dark:bg-blue-900 rounded-full inline-flex items-center justify-center text-blue-500">
<SearchIcon className="size-6" />
</div>
Try searching for people, notes, or keywords
</div>
) : null}
</Command.List>
</Command.Dialog>
);