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>
</head>
<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>
<script type="module" src="/src/app.tsx"></script>

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

@@ -2,6 +2,32 @@
@tailwind components;
@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 {
font-size: 14px;
}
@@ -22,25 +48,3 @@ input::-ms-clear {
::-webkit-input-placeholder {
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 (
<div data-tauri-drag-region className="flex items-center gap-4">
<div data-tauri-drag-region className="flex items-center gap-3">
{accounts
? accounts.map((account) =>
// @ts-ignore, useless
@@ -45,8 +45,7 @@ function Inactive({ pubkey }: { pubkey: string }) {
const changeAccount = async (npub: string) => {
const select = await ark.load_selected_account(npub);
if (select)
navigate({ to: "/$account/home/local", params: { account: npub } });
if (select) navigate({ to: "/$account/home", params: { account: npub } });
};
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 { getBitcoinDisplayValues } from "@lume/utils";
import { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
export function Balance({
recipient,
account,
}: {
recipient: string;
account: string;
}) {
const [t] = useTranslation();
export function Balance({ account }: { account: string }) {
const [balance, setBalance] = useState(0);
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 { LoaderIcon, ArrowRightCircleIcon, InfoIcon } from "@lume/icons";
import { Event, Kind } from "@lume/types";
import { Column } from "@lume/ui";
import { FETCH_LIMIT } from "@lume/utils";
import { useInfiniteQuery } from "@tanstack/react-query";
import { Link } from "@tanstack/react-router";
import { createLazyFileRoute } from "@tanstack/react-router";
import { Link, useParams } from "@tanstack/react-router";
import { Virtualizer } from "virtua";
export const Route = createLazyFileRoute("/$account/home/local")({
component: Screen,
});
function Screen() {
export function Newsfeed() {
const ark = useArk();
const { account } = Route.useParams();
// @ts-ignore, just work!!!
const { account } = useParams({ strict: false });
const {
data,
hasNextPage,
@@ -56,8 +53,9 @@ function Screen() {
};
return (
<div className="mx-auto flex w-full max-w-xl flex-1 flex-col">
<div className="flex-1">
<Column.Root>
<Column.Header title="Newsfeed" />
<Column.Content>
{isLoading || isRefetching ? (
<div className="flex h-20 w-full flex-col items-center justify-center gap-1">
<LoaderIcon className="size-5 animate-spin" />
@@ -69,7 +67,7 @@ function Screen() {
<p>
Empty newsfeed. Or you view the{" "}
<Link
to="/$account/home/global"
to="/$account/home"
className="text-blue-500 hover:text-blue-600"
>
Global Newsfeed
@@ -102,7 +100,7 @@ function Screen() {
</button>
) : null}
</div>
</div>
</div>
</Column.Content>
</Column.Root>
);
}

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

@@ -44,7 +44,12 @@ export function RepostNote({
if (isError || !repostEvent) {
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.Root className="flex h-14 gap-2 px-3">
<div className="inline-flex w-10 shrink-0 items-center justify-center">
@@ -71,7 +76,7 @@ export function RepostNote({
return (
<Note.Root
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,
)}
>

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

@@ -13,7 +13,7 @@ export function TextNote({
<Note.Provider event={event}>
<Note.Root
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,
)}
>

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

@@ -1,20 +1,8 @@
import {
BellFilledIcon,
BellIcon,
ComposeFilledIcon,
HomeFilledIcon,
HomeIcon,
HorizontalDotsIcon,
SettingsIcon,
SpaceFilledIcon,
SpaceIcon,
} from "@lume/icons";
import { Link } from "@tanstack/react-router";
import { ComposeFilledIcon, PlusIcon } from "@lume/icons";
import { Outlet, createFileRoute } from "@tanstack/react-router";
import { cn } from "@lume/utils";
import { Accounts } from "@/components/accounts";
import { useArk } from "@lume/ark";
import { Box } from "@lume/ui";
export const Route = createFileRoute("/$account")({
component: App,
@@ -25,17 +13,25 @@ function App() {
const context = Route.useRouteContext();
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
data-tauri-drag-region
className={cn(
"flex h-11 shrink-0 items-center justify-between pr-4",
context.platform === "macos" ? "pl-24" : "pl-4",
"flex h-11 shrink-0 items-center justify-between pr-2",
context.platform === "macos" ? "ml-2 pl-20" : "pl-4",
)}
>
<Navigation />
<div className="flex items-center gap-3">
<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
type="button"
onClick={() => ark.open_editor()}
@@ -44,88 +40,11 @@ function App() {
<ComposeFilledIcon className="size-4" />
New post
</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>
<Box>
<div className="flex-1">
<Outlet />
</Box>
</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) {
await sendNativeNotification("You've publish new post successfully.");
return reset();
}
// stop loading
setLoading(false);
// reset form
reset();
} catch (e) {
setLoading(false);
await sendNativeNotification(String(e));

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

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

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

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