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

feat: space

Browse Source
This commit is contained in:
reya
2024-03-14 14:22:41 +07:00
parent 3005d27403
commit 16e6d234e5
34 changed files with 249 additions and 1837 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/desktop2/index.html
View File

@@ -6,7 +6,7 @@
<title>Lume Desktop</title> <title>Lume Desktop</title>
</head> </head>
<body <body
class="relative h-screen w-screen cursor-default select-none overflow-hidden bg-white font-sans text-black antialiased dark:bg-black dark:text-white" class="relative h-screen w-screen cursor-default select-none overflow-hidden font-sans text-black antialiased dark:text-white"
> >
<div id="root" class="h-full w-full"></div> <div id="root" class="h-full w-full"></div>
<script type="module" src="/src/app.tsx"></script> <script type="module" src="/src/app.tsx"></script>

48
apps/desktop2/src/app.css
View File

@@ -2,6 +2,32 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@layer utilities {
.content-break {
word-break: break-word;
word-wrap: break-word;
overflow-wrap: break-word;
}
.shadow-toolbar {
box-shadow:
0 0 #0000,
0 0 #0000,
0 8px 24px 0 rgba(0, 0, 0, 0.2),
0 2px 8px 0 rgba(0, 0, 0, 0.08),
inset 0 0 0 1px rgba(0, 0, 0, 0.2),
inset 0 0 0 2px hsla(0, 0%, 100%, 0.14);
}
.shadow-primary {
filter: drop-shadow(0px 0px 4px rgba(66, 65, 73, 0.14));
}
}
/*
Overide some default styles
*/
html { html {
font-size: 14px; font-size: 14px;
} }
@@ -22,25 +48,3 @@ input::-ms-clear {
::-webkit-input-placeholder { ::-webkit-input-placeholder {
line-height: normal; line-height: normal;
} }
media-controller {
@apply w-full overflow-hidden rounded-xl;
}
@layer utilities {
.content-break {
word-break: break-word;
word-wrap: break-word;
overflow-wrap: break-word;
}
.shadow-toolbar {
box-shadow:
0 0 #0000,
0 0 #0000,
0 8px 24px 0 rgba(0, 0, 0, 0.2),
0 2px 8px 0 rgba(0, 0, 0, 0.08),
inset 0 0 0 1px rgba(0, 0, 0, 0.2),
inset 0 0 0 2px hsla(0, 0%, 100%, 0.14);
}
}

5
apps/desktop2/src/components/accounts.tsx
View File

@@ -24,7 +24,7 @@ export function Accounts() {
}, []); }, []);
return ( return (
<div data-tauri-drag-region className="flex items-center gap-4"> <div data-tauri-drag-region className="flex items-center gap-3">
{accounts {accounts
? accounts.map((account) => ? accounts.map((account) =>
// @ts-ignore, useless // @ts-ignore, useless
@@ -45,8 +45,7 @@ function Inactive({ pubkey }: { pubkey: string }) {
const changeAccount = async (npub: string) => { const changeAccount = async (npub: string) => {
const select = await ark.load_selected_account(npub); const select = await ark.load_selected_account(npub);
if (select) if (select) navigate({ to: "/$account/home", params: { account: npub } });
navigate({ to: "/$account/home/local", params: { account: npub } });
}; };
return ( return (

10
apps/desktop2/src/components/balance.tsx
View File

@@ -2,16 +2,8 @@ import { useArk } from "@lume/ark";
import { User } from "@lume/ui"; import { User } from "@lume/ui";
import { getBitcoinDisplayValues } from "@lume/utils"; import { getBitcoinDisplayValues } from "@lume/utils";
import { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
export function Balance({ export function Balance({ account }: { account: string }) {
recipient,
account,
}: {
recipient: string;
account: string;
}) {
const [t] = useTranslation();
const [balance, setBalance] = useState(0); const [balance, setBalance] = useState(0);
const ark = useArk(); const ark = useArk();

24
apps/desktop2/src/routes/$account/home/local.lazy.tsx → apps/desktop2/src/components/newsfeed.tsx
View File

@@ -4,19 +4,16 @@ import { TextNote } from "@/components/text";
import { useArk } from "@lume/ark"; import { useArk } from "@lume/ark";
import { LoaderIcon, ArrowRightCircleIcon, InfoIcon } from "@lume/icons"; import { LoaderIcon, ArrowRightCircleIcon, InfoIcon } from "@lume/icons";
import { Event, Kind } from "@lume/types"; import { Event, Kind } from "@lume/types";
import { Column } from "@lume/ui";
import { FETCH_LIMIT } from "@lume/utils"; import { FETCH_LIMIT } from "@lume/utils";
import { useInfiniteQuery } from "@tanstack/react-query"; import { useInfiniteQuery } from "@tanstack/react-query";
import { Link } from "@tanstack/react-router"; import { Link, useParams } from "@tanstack/react-router";
import { createLazyFileRoute } from "@tanstack/react-router";
import { Virtualizer } from "virtua"; import { Virtualizer } from "virtua";
export const Route = createLazyFileRoute("/$account/home/local")({ export function Newsfeed() {
component: Screen,
});
function Screen() {
const ark = useArk(); const ark = useArk();
const { account } = Route.useParams(); // @ts-ignore, just work!!!
const { account } = useParams({ strict: false });
const { const {
data, data,
hasNextPage, hasNextPage,
@@ -56,8 +53,9 @@ function Screen() {
}; };
return ( return (
<div className="mx-auto flex w-full max-w-xl flex-1 flex-col"> <Column.Root>
<div className="flex-1"> <Column.Header title="Newsfeed" />
<Column.Content>
{isLoading || isRefetching ? ( {isLoading || isRefetching ? (
<div className="flex h-20 w-full flex-col items-center justify-center gap-1"> <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
<LoaderIcon className="size-5 animate-spin" /> <LoaderIcon className="size-5 animate-spin" />
@@ -69,7 +67,7 @@ function Screen() {
<p> <p>
Empty newsfeed. Or you view the{" "} Empty newsfeed. Or you view the{" "}
<Link <Link
to="/$account/home/global" to="/$account/home"
className="text-blue-500 hover:text-blue-600" className="text-blue-500 hover:text-blue-600"
> >
Global Newsfeed Global Newsfeed
@@ -102,7 +100,7 @@ function Screen() {
</button> </button>
) : null} ) : null}
</div> </div>
</div> </Column.Content>
</div> </Column.Root>
); );
} }

9
apps/desktop2/src/components/repost.tsx
View File

@@ -44,7 +44,12 @@ export function RepostNote({
if (isError || !repostEvent) { if (isError || !repostEvent) {
return ( return (
<Note.Root className={className}> <Note.Root
className={cn(
"flex flex-col gap-2 border-b border-neutral-100 px-3 py-5 dark:border-neutral-900",
className,
)}
>
<User.Provider pubkey={event.pubkey}> <User.Provider pubkey={event.pubkey}>
<User.Root className="flex h-14 gap-2 px-3"> <User.Root className="flex h-14 gap-2 px-3">
<div className="inline-flex w-10 shrink-0 items-center justify-center"> <div className="inline-flex w-10 shrink-0 items-center justify-center">
@@ -71,7 +76,7 @@ export function RepostNote({
return ( return (
<Note.Root <Note.Root
className={cn( className={cn(
"mb-5 flex flex-col gap-2 border-b border-neutral-100 pb-5 dark:border-neutral-900", "flex flex-col gap-2 border-b border-neutral-100 px-3 py-5 dark:border-neutral-900",
className, className,
)} )}
> >

2
apps/desktop2/src/components/text.tsx
View File

@@ -13,7 +13,7 @@ export function TextNote({
<Note.Provider event={event}> <Note.Provider event={event}>
<Note.Root <Note.Root
className={cn( className={cn(
"mb-5 flex flex-col gap-2 border-b border-neutral-100 pb-5 dark:border-neutral-900", "flex flex-col gap-2 border-b border-neutral-100 px-3 py-5 dark:border-neutral-900",
className, className,
)} )}
> >

111
apps/desktop2/src/routes/$account.tsx
View File

@@ -1,20 +1,8 @@
import { import { ComposeFilledIcon, PlusIcon } from "@lume/icons";
BellFilledIcon,
BellIcon,
ComposeFilledIcon,
HomeFilledIcon,
HomeIcon,
HorizontalDotsIcon,
SettingsIcon,
SpaceFilledIcon,
SpaceIcon,
} from "@lume/icons";
import { Link } from "@tanstack/react-router";
import { Outlet, createFileRoute } from "@tanstack/react-router"; import { Outlet, createFileRoute } from "@tanstack/react-router";
import { cn } from "@lume/utils"; import { cn } from "@lume/utils";
import { Accounts } from "@/components/accounts"; import { Accounts } from "@/components/accounts";
import { useArk } from "@lume/ark"; import { useArk } from "@lume/ark";
import { Box } from "@lume/ui";
export const Route = createFileRoute("/$account")({ export const Route = createFileRoute("/$account")({
component: App, component: App,
@@ -25,17 +13,25 @@ function App() {
const context = Route.useRouteContext(); const context = Route.useRouteContext();
return ( return (
<div className="flex h-screen w-screen flex-col bg-gradient-to-tr from-neutral-200 to-neutral-100 dark:from-neutral-950 dark:to-neutral-900"> <div className="flex h-screen w-screen flex-col">
<div <div
data-tauri-drag-region data-tauri-drag-region
className={cn( className={cn(
"flex h-11 shrink-0 items-center justify-between pr-4", "flex h-11 shrink-0 items-center justify-between pr-2",
context.platform === "macos" ? "pl-24" : "pl-4", context.platform === "macos" ? "ml-2 pl-20" : "pl-4",
)} )}
> >
<Navigation />
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Accounts /> <Accounts />
<button
type="button"
onClick={() => ark.open_settings()}
className="inline-flex size-8 items-center justify-center rounded-full bg-neutral-200 text-neutral-800 hover:bg-neutral-400 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-600"
>
<PlusIcon className="size-4" />
</button>
</div>
<div className="flex items-center gap-3">
<button <button
type="button" type="button"
onClick={() => ark.open_editor()} onClick={() => ark.open_editor()}
@@ -44,88 +40,11 @@ function App() {
<ComposeFilledIcon className="size-4" /> <ComposeFilledIcon className="size-4" />
New post New post
</button> </button>
<button
type="button"
onClick={() => ark.open_settings()}
className="inline-flex size-8 items-center justify-center rounded-full bg-neutral-200 text-neutral-800 hover:bg-neutral-400 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-600"
>
<HorizontalDotsIcon className="size-5" />
</button>
</div> </div>
</div> </div>
<Box> <div className="flex-1">
<Outlet /> <Outlet />
</Box> </div>
</div>
);
}
function Navigation() {
// @ts-ignore, useless
const { account } = Route.useParams();
return (
<div
data-tauri-drag-region
className="flex h-full flex-1 items-center gap-2"
>
<Link to="/$account/home/local" params={{ account }}>
{({ isActive }) => (
<div
className={cn(
"inline-flex h-8 w-max items-center justify-center gap-2 rounded-full px-3",
isActive
? "bg-neutral-300 hover:bg-neutral-400 dark:bg-neutral-800 dark:hover:bg-neutral-700"
: "hover:bg-black/10 dark:hover:bg-white/10",
)}
>
{isActive ? (
<HomeFilledIcon className="size-5" />
) : (
<HomeIcon className="size-5" />
)}
<span className="text-sm font-medium">Home</span>
</div>
)}
</Link>
<Link to="/$account/space" params={{ account }}>
{({ isActive }) => (
<div
className={cn(
"inline-flex h-8 w-max items-center justify-center gap-2 rounded-full px-3 hover:bg-black/10 dark:hover:bg-white/10",
isActive
? "bg-neutral-300 hover:bg-neutral-400 dark:bg-neutral-800 dark:hover:bg-neutral-700"
: "hover:bg-black/10 dark:hover:bg-white/10",
)}
>
{isActive ? (
<SpaceFilledIcon className="size-5" />
) : (
<SpaceIcon className="size-5" />
)}
<span className="text-sm font-medium">Space</span>
</div>
)}
</Link>
<Link to="/$account/activity" params={{ account }}>
{({ isActive }) => (
<div
className={cn(
"inline-flex h-8 w-max items-center justify-center gap-2 rounded-full px-3 hover:bg-black/10 dark:hover:bg-white/10",
isActive
? "bg-neutral-300 hover:bg-neutral-400 dark:bg-neutral-800 dark:hover:bg-neutral-700"
: "hover:bg-black/10 dark:hover:bg-white/10",
)}
>
{isActive ? (
<BellFilledIcon className="size-5" />
) : (
<BellIcon className="size-5" />
)}
<span className="text-sm font-medium">Activity</span>
</div>
)}
</Link>
</div> </div>
); );
} }

13
apps/desktop2/src/routes/$account/activity.lazy.tsx
View File

@@ -1,13 +0,0 @@
import { createLazyFileRoute } from "@tanstack/react-router";
export const Route = createLazyFileRoute("/$account/activity")({
component: Activity,
});
function Activity() {
return (
<div className="h-full w-full overflow-hidden rounded-xl bg-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-none dark:ring-1 dark:ring-white/5">
<p>Activity</p>
</div>
);
}

23
apps/desktop2/src/routes/$account/home.lazy.tsx Normal file
View File

@@ -0,0 +1,23 @@
import { Newsfeed } from "@/components/newsfeed";
import { createLazyFileRoute } from "@tanstack/react-router";
import { VList } from "virtua";
export const Route = createLazyFileRoute("/$account/home")({
component: Screen,
});
function Screen() {
return (
<div className="relative h-full w-full">
<VList
className="scrollbar-none h-full w-full overflow-x-auto pb-2 pt-1.5 focus:outline-none"
itemSize={420}
tabIndex={0}
horizontal
>
<Newsfeed />
<div className="mx-2 h-full w-[420px] rounded-xl bg-white">todo!</div>
</VList>
</div>
);
}

68
apps/desktop2/src/routes/$account/home.tsx
View File

@@ -1,68 +0,0 @@
import { GlobalIcon, LoaderIcon, LocalIcon, RefreshIcon } from "@lume/icons";
import { cn } from "@lume/utils";
import { useQueryClient } from "@tanstack/react-query";
import { Link } from "@tanstack/react-router";
import { Outlet, createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/$account/home")({
component: Screen,
});
function Screen() {
const queryClient = useQueryClient();
const { account } = Route.useParams();
const refresh = async () => {
const queryKey = `${window.location.pathname.split("/").at(-1)}_newsfeed`;
await queryClient.refetchQueries({ queryKey: [queryKey, account] });
};
return (
<div className="flex flex-col">
<div className="mx-auto mb-4 flex h-16 w-full max-w-xl shrink-0 items-center justify-between border-b border-neutral-100 dark:border-neutral-900">
<div className="flex items-center gap-2">
<Link to="/$account/home/local">
{({ isActive }) => (
<div
className={cn(
"inline-flex items-center justify-center gap-2 rounded-full px-4 py-2 text-sm leading-tight hover:bg-neutral-100 dark:hover:bg-neutral-900",
isActive
? "bg-neutral-100 font-semibold text-neutral-900 hover:bg-neutral-200 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:bg-neutral-800"
: "text-neutral-600 dark:text-neutral-400",
)}
>
<LocalIcon className="size-4" />
Local
</div>
)}
</Link>
<Link to="/$account/home/global">
{({ isActive }) => (
<div
className={cn(
"inline-flex items-center justify-center gap-2 rounded-full px-4 py-2 text-sm leading-tight hover:bg-neutral-100 dark:hover:bg-neutral-900",
isActive
? "bg-neutral-100 font-semibold text-neutral-900 hover:bg-neutral-200 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:bg-neutral-800"
: "text-neutral-600 dark:text-neutral-400",
)}
>
<GlobalIcon className="size-4" />
Global
</div>
)}
</Link>
</div>
<div className="flex items-center gap-3">
<button
type="button"
onClick={refresh}
className="text-neutral-700 hover:text-blue-500 dark:text-neutral-300"
>
<RefreshIcon className="size-4" />
</button>
</div>
</div>
<Outlet />
</div>
);
}

91
apps/desktop2/src/routes/$account/home/global.lazy.tsx
View File

@@ -1,91 +0,0 @@
import { RepostNote } from "@/components/repost";
import { Suggest } from "@/components/suggest";
import { TextNote } from "@/components/text";
import { useArk } from "@lume/ark";
import { LoaderIcon, ArrowRightCircleIcon, InfoIcon } from "@lume/icons";
import { Event, Kind } from "@lume/types";
import { FETCH_LIMIT } from "@lume/utils";
import { useInfiniteQuery } from "@tanstack/react-query";
import { createLazyFileRoute } from "@tanstack/react-router";
import { Virtualizer } from "virtua";
export const Route = createLazyFileRoute("/$account/home/global")({
component: Screen,
});
function Screen() {
const ark = useArk();
const { account } = Route.useParams();
const {
data,
hasNextPage,
isLoading,
isRefetching,
isFetchingNextPage,
fetchNextPage,
} = useInfiniteQuery({
queryKey: ["global_newsfeed", account],
initialPageParam: 0,
queryFn: async ({ pageParam }: { pageParam: number }) => {
const events = await ark.get_events(
"global",
FETCH_LIMIT,
pageParam,
true,
);
return events;
},
getNextPageParam: (lastPage) => {
const lastEvent = lastPage?.at(-1);
if (!lastEvent) return;
return lastEvent.created_at - 1;
},
select: (data) => data?.pages.flatMap((page) => page),
refetchOnWindowFocus: false,
});
const renderItem = (event: Event) => {
if (!event) return;
switch (event.kind) {
case Kind.Repost:
return <RepostNote key={event.id} event={event} />;
default:
return <TextNote key={event.id} event={event} />;
}
};
return (
<div className="mx-auto flex w-full max-w-xl flex-1 flex-col">
<div className="flex-1">
{isLoading || isRefetching ? (
<div className="flex h-20 w-full flex-col items-center justify-center gap-1">
<LoaderIcon className="size-5 animate-spin" />
</div>
) : (
<Virtualizer overscan={3}>
{data.map((item) => renderItem(item))}
</Virtualizer>
)}
<div className="flex h-20 items-center justify-center">
{hasNextPage ? (
<button
type="button"
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-12 w-36 items-center justify-center gap-2 rounded-full bg-neutral-100 px-3 font-medium hover:bg-neutral-200 focus:outline-none dark:bg-neutral-900 dark:hover:bg-neutral-800"
>
{isFetchingNextPage ? (
<LoaderIcon className="size-5 animate-spin" />
) : (
<>
<ArrowRightCircleIcon className="size-5" />
Load more
</>
)}
</button>
) : null}
</div>
</div>
</div>
);
}

13
apps/desktop2/src/routes/$account/space.lazy.tsx
View File

@@ -1,13 +0,0 @@
import { createLazyFileRoute } from "@tanstack/react-router";
export const Route = createLazyFileRoute("/$account/space")({
component: Space,
});
function Space() {
return (
<div className="h-full w-full overflow-hidden rounded-xl bg-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-none dark:ring-1 dark:ring-white/5">
<p>Space</p>
</div>
);
}

3
apps/desktop2/src/routes/editor/index.tsx
View File

@@ -149,11 +149,12 @@ function Screen() {
if (eventId) { if (eventId) {
await sendNativeNotification("You've publish new post successfully."); await sendNativeNotification("You've publish new post successfully.");
return reset();
} }
// stop loading // stop loading
setLoading(false); setLoading(false);
// reset form
reset();
} catch (e) { } catch (e) {
setLoading(false); setLoading(false);
await sendNativeNotification(String(e)); await sendNativeNotification(String(e));

6
apps/desktop2/src/routes/index.tsx
View File

@@ -15,7 +15,7 @@ export const Route = createFileRoute("/")({
case 0: case 0:
const guest = await ark.create_guest_account(); const guest = await ark.create_guest_account();
throw redirect({ throw redirect({
to: "/$account/home/local", to: "/$account/home",
params: { account: guest }, params: { account: guest },
search: { guest: true }, search: { guest: true },
replace: true, replace: true,
@@ -30,7 +30,7 @@ export const Route = createFileRoute("/")({
if (loadedAccount) { if (loadedAccount) {
throw redirect({ throw redirect({
to: "/$account/home/local", to: "/$account/home",
params: { account }, params: { account },
replace: true, replace: true,
}); });
@@ -54,7 +54,7 @@ function Screen() {
const loadAccount = await ark.load_selected_account(npub); const loadAccount = await ark.load_selected_account(npub);
if (loadAccount) { if (loadAccount) {
navigate({ navigate({
to: "/$account/home/local", to: "/$account/home",
params: { account: npub }, params: { account: npub },
replace: true, replace: true,
}); });

2
apps/desktop2/src/routes/zap.$id.lazy.tsx
View File

@@ -48,7 +48,7 @@ function Screen() {
return ( return (
<Container> <Container>
<Balance recipient={pubkey} account={account} /> <Balance account={account} />
<Box className="flex flex-col gap-3"> <Box className="flex flex-col gap-3">
<div className="flex h-full flex-col justify-between py-5"> <div className="flex h-full flex-col justify-between py-5">
<div className="flex h-11 shrink-0 items-center justify-center gap-2"> <div className="flex h-11 shrink-0 items-center justify-center gap-2">

1
packages/ark/package.json
View File

@@ -15,6 +15,7 @@
"@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-popover": "^1.0.7",
"@radix-ui/react-tooltip": "^1.0.7", "@radix-ui/react-tooltip": "^1.0.7",
"@tanstack/react-query": "^5.24.1", "@tanstack/react-query": "^5.24.1",
"@tanstack/react-router": "^1.18.1",
"get-urls": "^12.1.0", "get-urls": "^12.1.0",
"media-chrome": "^2.2.5", "media-chrome": "^2.2.5",
"minidenticons": "^4.2.1", "minidenticons": "^4.2.1",

4
packages/icons/src/settings.tsx
View File

@@ -7,14 +7,12 @@ export function SettingsIcon(
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}> <svg width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}>
<path <path
stroke="currentColor" stroke="currentColor"
strokeLinecap="square"
strokeLinejoin="round" strokeLinejoin="round"
strokeWidth="2" strokeWidth="2"
d="M11.02 3.552a2 2 0 0 1 1.96 0l6 3.374A2 2 0 0 1 20 8.67v6.66a2 2 0 0 1-1.02 1.743l-6 3.375a2 2 0 0 1-1.96 0l-6-3.374A2 2 0 0 1 4 15.33V8.67a2 2 0 0 1 1.02-1.744l6-3.374Z" d="m7.99 5.398-.685-.158A1.722 1.722 0 0 0 5.24 7.305l.158.684a1.946 1.946 0 0 1-.817 2.057l-.832.555a1.682 1.682 0 0 0 0 2.798l.832.555c.673.449.999 1.268.817 2.057l-.158.684a1.722 1.722 0 0 0 2.065 2.065l.684-.158a1.946 1.946 0 0 1 2.057.817l.555.832a1.682 1.682 0 0 0 2.798 0l.555-.832a1.946 1.946 0 0 1 2.057-.817l.684.158a1.722 1.722 0 0 0 2.065-2.065l-.158-.684a1.946 1.946 0 0 1 .817-2.057l.832-.555a1.682 1.682 0 0 0 0-2.798l-.832-.555a1.946 1.946 0 0 1-.817-2.057l.158-.684a1.722 1.722 0 0 0-2.065-2.065l-.684.158a1.946 1.946 0 0 1-2.057-.817l-.555-.832a1.682 1.682 0 0 0-2.798 0l-.555.832a1.946 1.946 0 0 1-2.057.817Z"
/> />
<path <path
stroke="currentColor" stroke="currentColor"
strokeLinecap="square"
strokeLinejoin="round" strokeLinejoin="round"
strokeWidth="2" strokeWidth="2"
d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"

2
packages/ui/src/box.tsx
View File

@@ -13,7 +13,7 @@ export function Box({
<div className="h-full w-full flex-1 px-2 pb-2"> <div className="h-full w-full flex-1 px-2 pb-2">
<div <div
className={cn( className={cn(
"h-full w-full overflow-y-auto rounded-xl bg-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-none dark:ring-1 dark:ring-white/5", "h-full w-full overflow-y-auto rounded-xl bg-white px-4 shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] sm:px-0 dark:bg-black dark:shadow-none dark:ring-1 dark:ring-white/5",
className, className,
)} )}
> >

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

@@ -1,176 +0,0 @@
// 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
View File

File diff suppressed because it is too large Load Diff

16
packages/ui/src/column/content.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { cn } from "@lume/utils";
import { ReactNode } from "react";
export function ColumnContent({
children,
className,
}: {
children: ReactNode;
className?: string;
}) {
return (
<div className={cn("flex-1 overflow-y-auto overflow-x-hidden", className)}>
{children}
</div>
);
}

82
packages/ui/src/column/header.tsx Normal file
View File

@@ -0,0 +1,82 @@
import {
ChevronDownIcon,
MoveLeftIcon,
MoveRightIcon,
RefreshIcon,
TrashIcon,
} from "@lume/icons";
import { cn } from "@lume/utils";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import { useTranslation } from "react-i18next";
export function ColumnHeader({
title,
className,
}: {
title: string;
className?: string;
}) {
const { t } = useTranslation();
return (
<DropdownMenu.Root>
<div
className={cn(
"flex h-11 w-full shrink-0 items-center justify-center gap-2 border-b border-neutral-100 dark:border-neutral-900",
className,
)}
>
<DropdownMenu.Trigger asChild>
<div className="inline-flex items-center gap-1.5">
<div className="text-[13px] font-medium">{title}</div>
<ChevronDownIcon className="size-5" />
</div>
</DropdownMenu.Trigger>
<DropdownMenu.Portal>
<DropdownMenu.Content
sideOffset={5}
className="flex w-[200px] flex-col overflow-hidden rounded-2xl bg-white/50 p-2 ring-1 ring-black/10 backdrop-blur-2xl focus:outline-none dark:bg-black/50 dark:ring-white/10"
>
<DropdownMenu.Item asChild>
<button
type="button"
className="inline-flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
>
<RefreshIcon className="size-4" />
{t("global.refresh")}
</button>
</DropdownMenu.Item>
<DropdownMenu.Item asChild>
<button
type="button"
className="inline-flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
>
<MoveLeftIcon className="size-4" />
{t("global.moveLeft")}
</button>
</DropdownMenu.Item>
<DropdownMenu.Item asChild>
<button
type="button"
className="inline-flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
>
<MoveRightIcon className="size-4" />
{t("global.moveRight")}
</button>
</DropdownMenu.Item>
<DropdownMenu.Separator className="my-1 h-px bg-black/10 dark:bg-white/10" />
<DropdownMenu.Item asChild>
<button
type="button"
className="inline-flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-red-500 hover:bg-red-500 hover:text-red-50 focus:outline-none"
>
<TrashIcon className="size-4" />
{t("global.delete")}
</button>
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Portal>
</div>
</DropdownMenu.Root>
);
}

9
packages/ui/src/column/index.ts Normal file
View File

@@ -0,0 +1,9 @@
import { ColumnContent } from "./content";
import { ColumnHeader } from "./header";
import { ColumnRoot } from "./root";
export const Column = {
Root: ColumnRoot,
Header: ColumnHeader,
Content: ColumnContent,
};

21
packages/ui/src/column/root.tsx Normal file
View File

@@ -0,0 +1,21 @@
import { cn } from "@lume/utils";
import { ReactNode } from "react";
export function ColumnRoot({
children,
className,
}: {
children: ReactNode;
className?: string;
}) {
return (
<div
className={cn(
"shadow-primary relative mx-2 flex h-full w-[420px] flex-col rounded-xl bg-white dark:bg-black",
className,
)}
>
{children}
</div>
);
}

1
packages/ui/src/index.ts
View File

@@ -1,5 +1,6 @@
export * from "./user"; export * from "./user";
export * from "./note"; export * from "./note";
export * from "./column";
// UI // UI
export * from "./container"; export * from "./container";

5
packages/ui/src/note/buttons/zap.tsx
View File

@@ -2,18 +2,21 @@ import { useArk } from "@lume/ark";
import { ZapIcon } from "@lume/icons"; import { ZapIcon } from "@lume/icons";
import { toast } from "sonner"; import { toast } from "sonner";
import { useNoteContext } from "../provider"; import { useNoteContext } from "../provider";
import { useSearch } from "@tanstack/react-router";
export function NoteZap() { export function NoteZap() {
const ark = useArk(); const ark = useArk();
const event = useNoteContext(); const event = useNoteContext();
const { account } = useSearch({ strict: false });
const zap = async () => { const zap = async () => {
try { try {
const nwc = await ark.load_nwc(); const nwc = await ark.load_nwc();
if (!nwc) { if (!nwc) {
ark.open_nwc(); ark.open_nwc();
} else { } else {
ark.open_zap(event.id, event.pubkey); ark.open_zap(event.id, event.pubkey, account);
} }
} catch (e) { } catch (e) {
toast.error(String(e)); toast.error(String(e));

172
packages/ui/src/search/dialog.tsx
View File

@@ -1,172 +0,0 @@
import { Note, User, useArk } from "@lume/ark";
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";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useDebounce } from "use-debounce";
import { Command } from "../cmdk";
export function SearchDialog() {
const ark = useArk();
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 { t } = useTranslation();
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={t("search.placeholder")}
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-full">
<LoaderIcon className="size-5 animate-spin" />
</Command.Loading>
) : !events.length ? (
<Command.Empty className="flex items-center justify-center h-full text-sm">
{t("global.noResult")}
</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>
</>
)}
{!loading && !events.length ? (
<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>
{t("search.empty")}
</div>
) : null}
</Command.List>
</Command.Dialog>
);
}

3
pnpm-lock.yaml generated
View File

@@ -248,6 +248,9 @@ importers:
'@tanstack/react-query': '@tanstack/react-query':
specifier: ^5.24.1 specifier: ^5.24.1
version: 5.24.1(react@18.2.0) version: 5.24.1(react@18.2.0)
'@tanstack/react-router':
specifier: ^1.18.1
version: 1.18.1(react-dom@18.2.0)(react@18.2.0)
get-urls: get-urls:
specifier: ^12.1.0 specifier: ^12.1.0
version: 12.1.0 version: 12.1.0

1
src-tauri/Cargo.toml
View File

@@ -16,6 +16,7 @@ tokio = { version = "1", features = ["full"] }
serde_json = "1.0" serde_json = "1.0"
serde = { version = "1.0", features = ["derive"] } serde = { version = "1.0", features = ["derive"] }
tauri = { version = "2.0.0-beta", features = [ tauri = { version = "2.0.0-beta", features = [
"unstable",
"tray-icon", "tray-icon",
"macos-private-api", "macos-private-api",
"native-tls-vendored", "native-tls-vendored",

6
src-tauri/src/nostr/metadata.rs
View File

@@ -294,7 +294,7 @@ pub async fn set_nwc(uri: &str, state: State<'_, Nostr>) -> Result<bool, String>
} }
#[tauri::command] #[tauri::command]
pub async fn load_nwc(state: State<'_, Nostr>) -> Result<bool, bool> { pub async fn load_nwc(state: State<'_, Nostr>) -> Result<bool, String> {
let client = &state.client; let client = &state.client;
let keyring = Entry::new("Lume Secret Storage", "NWC").unwrap(); let keyring = Entry::new("Lume Secret Storage", "NWC").unwrap();
@@ -305,10 +305,10 @@ pub async fn load_nwc(state: State<'_, Nostr>) -> Result<bool, bool> {
client.set_zapper(nwc).await; client.set_zapper(nwc).await;
Ok(true) Ok(true)
} else { } else {
Err(false) Err("Cannot connect to NWC".into())
} }
} }
Err(_) => Err(false), Err(_) => Ok(false),
} }
} }

7
src-tauri/tauri.linux.conf.json
View File

@@ -6,11 +6,10 @@
"title": "Lume", "title": "Lume",
"label": "main", "label": "main",
"titleBarStyle": "Overlay", "titleBarStyle": "Overlay",
"width": 1080, "width": 500,
"height": 800, "height": 800,
"minWidth": 1080, "minWidth": 500,
"minHeight": 800, "minHeight": 800
"center": true
} }
] ]
} }

11
src-tauri/tauri.macos.conf.json
View File

@@ -6,13 +6,16 @@
"title": "Lume", "title": "Lume",
"label": "main", "label": "main",
"titleBarStyle": "Overlay", "titleBarStyle": "Overlay",
"width": 1080, "width": 500,
"height": 800, "height": 800,
"minWidth": 1080, "minWidth": 500,
"minHeight": 800, "minHeight": 800,
"center": true,
"hiddenTitle": true, "hiddenTitle": true,
"decorations": true "decorations": true,
"transparent": true,
"windowEffects": {
"effects": ["windowBackground"]
}
} }
] ]
} }

7
src-tauri/tauri.windows.conf.json
View File

@@ -5,11 +5,10 @@
{ {
"title": "Lume", "title": "Lume",
"label": "main", "label": "main",
"width": 1080, "width": 500,
"height": 800, "height": 800,
"minWidth": 1080, "minWidth": 500,
"minHeight": 800, "minHeight": 800
"center": true
} }
] ]
} }