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

update

Browse Source
This commit is contained in:
reya
2024-10-26 09:08:50 +07:00
parent 5ab2b1ae31
commit 42b780ce6a
26 changed files with 458 additions and 493 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/app.tsx
View File

@@ -1,31 +1,24 @@
import { experimental_createPersister } from "@tanstack/query-persist-client-core";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { RouterProvider, createRouter } from "@tanstack/react-router";
import { type } from "@tauri-apps/plugin-os";
import { createStore } from "@tauri-apps/plugin-store";
import { StrictMode } from "react";
import ReactDOM from "react-dom/client";
import { newQueryStorage } from "./commons";
import type { LumeEvent } from "./system";
import { routeTree } from "./routes.gen"; // auto generated file
import "./app.css"; // global styles
const platform = type();
// @ts-expect-error, required: https://github.com/tauri-apps/plugins-workspace/pull/1860
const store = await createStore(".cache", { autoSave: 250 });
const queryClient = new QueryClient({
defaultOptions: {
queries: {
gcTime: 1000 * 30,
persister: experimental_createPersister({
storage: newQueryStorage(store),
maxAge: 1000 * 60 * 60 * 12,
}),
},
},
});
declare module "@tanstack/react-router" {
interface Register {
router: typeof router;
}
interface HistoryState {
events?: LumeEvent[];
}
}
const platform = type();
const queryClient = new QueryClient();
const router = createRouter({
routeTree,
context: { queryClient, platform },
@@ -36,28 +29,11 @@ const router = createRouter({
},
});
// Register things for typesafety
declare module "@tanstack/react-router" {
interface Register {
router: typeof router;
}
interface HistoryState {
events?: LumeEvent[];
}
}
const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement as unknown as HTMLElement);
function App() {
return <RouterProvider router={router} />;
}
// biome-ignore lint/style/noNonNullAssertion: idk
const rootElement = document.getElementById("root")!;
if (!rootElement.innerHTML) {
const root = ReactDOM.createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>,
);
}
root.render(
<StrictMode>
<RouterProvider router={router} />
</StrictMode>,
);

6
src/commands.gen.ts
View File

@@ -495,12 +495,6 @@ async openWindow(window: Window) : Promise<Result<string, string>> {
if(e instanceof Error) throw e;
else return { status: "error", error: e as any };
}
},
async reopenLume() : Promise<void> {
await TAURI_INVOKE("reopen_lume");
},
async quit() : Promise<void> {
await TAURI_INVOKE("quit");
}
}

23
src/components/column.tsx
View File

@@ -4,14 +4,20 @@ import type { LumeColumn } from "@/types";
import { CaretDown, Check } from "@phosphor-icons/react";
import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
import { getCurrentWindow } from "@tauri-apps/api/window";
import { useCallback, useEffect, useMemo, useState } from "react";
import {
useCallback,
useEffect,
useLayoutEffect,
useMemo,
useState,
} from "react";
import { User } from "./user";
export function Column({ column }: { column: LumeColumn }) {
const webviewLabel = useMemo(() => `column-${column.label}`, [column.label]);
const [rect, ref] = useRect();
const [_error, setError] = useState<string>(null);
const [_error, setError] = useState<string>("");
useEffect(() => {
(async () => {
@@ -33,10 +39,8 @@ export function Column({ column }: { column: LumeColumn }) {
})();
}, [rect]);
useEffect(() => {
const isCreated = window.sessionStorage.getItem(webviewLabel);
if (!isCreated) {
useLayoutEffect(() => {
if (ref.current) {
const initialRect = ref.current.getBoundingClientRect();
commands
@@ -51,7 +55,6 @@ export function Column({ column }: { column: LumeColumn }) {
.then((res) => {
if (res.status === "ok") {
console.log("webview is created: ", webviewLabel);
window.sessionStorage.setItem(webviewLabel, "");
} else {
setError(res.error);
}
@@ -172,7 +175,11 @@ function Header({
<div
contentEditable
suppressContentEditableWarning={true}
onBlur={(e) => setTitle(e.currentTarget.textContent)}
onBlur={(e) => {
if (e.currentTarget.textContent) {
setTitle(e.currentTarget.textContent);
}
}}
className="text-[12px] font-semibold focus:outline-none"
>
{name}

2
src/components/note/mentions/hashtag.tsx
View File

@@ -1,7 +1,7 @@
export function Hashtag({ tag }: { tag: string }) {
return (
<span className="leading-normal cursor-default text-blue-500 hover:text-blue-600 font-normal">
{tag}
{tag.includes("#") ? tag : `#${tag}`}
</span>
);
}

20
src/routes/columns/_layout/events.$id.lazy.tsx
View File

@@ -6,7 +6,7 @@ import * as ScrollArea from "@radix-ui/react-scroll-area";
import { useQuery } from "@tanstack/react-query";
import { createLazyFileRoute } from "@tanstack/react-router";
import { getCurrentWindow } from "@tauri-apps/api/window";
import { useEffect, useRef } from "react";
import { type RefObject, useEffect, useRef } from "react";
import { Virtualizer } from "virtua";
export const Route = createLazyFileRoute("/columns/_layout/events/$id")({
@@ -35,7 +35,7 @@ function Screen() {
ref={ref}
className="relative h-full bg-white dark:bg-black rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
>
<Virtualizer scrollRef={ref}>
<Virtualizer scrollRef={ref as unknown as RefObject<HTMLElement>}>
<RootEvent />
<ReplyList />
</Virtualizer>
@@ -64,10 +64,10 @@ function RootEvent() {
);
}
if (isError) {
if (isError || !event) {
return (
<div className="flex items-center gap-2 text-sm text-red-500">
{error.message}
{error?.message || "Event not found within your current relay set"}
</div>
);
}
@@ -181,15 +181,21 @@ function ReplyList() {
useEffect(() => {
events.subscription
.emit({ label, kind: "Subscribe", event_id: id })
.emit({
label: label || id,
kind: "Subscribe",
event_id: id,
contacts: null,
})
.then(() => console.log("Subscribe: ", label));
return () => {
events.subscription
.emit({
label,
label: label || id,
kind: "Unsubscribe",
event_id: id,
contacts: null,
})
.then(() => console.log("Unsubscribe: ", label));
};
@@ -229,7 +235,7 @@ function ReplyList() {
</div>
) : (
<div className="flex flex-col gap-3">
{!data.length ? (
{!data?.length ? (
<div className="flex items-center justify-center w-full">
<div className="flex flex-col items-center justify-center gap-2 py-4">
<h3 className="text-3xl">👋</h3>

25
src/routes/columns/_layout/global.tsx
View File

@@ -7,7 +7,7 @@ import { ArrowDown } from "@phosphor-icons/react";
import * as ScrollArea from "@radix-ui/react-scroll-area";
import { useInfiniteQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
import { useCallback, useRef } from "react";
import { type RefObject, useCallback, useRef } from "react";
import { Virtualizer } from "virtua";
export const Route = createFileRoute("/columns/_layout/global")({
@@ -27,7 +27,7 @@ export function Screen() {
queryKey: ["events", "global", label],
initialPageParam: 0,
queryFn: async ({ pageParam }: { pageParam: number }) => {
const until = pageParam > 0 ? pageParam.toString() : undefined;
const until = pageParam > 0 ? pageParam.toString() : null;
const res = await commands.getGlobalEvents(until);
if (res.status === "error") {
@@ -36,7 +36,13 @@ export function Screen() {
return toLumeEvents(res.data);
},
getNextPageParam: (lastPage) => lastPage?.at(-1)?.created_at - 1,
getNextPageParam: (lastPage) => {
const lastEvent = lastPage.at(-1);
if (lastEvent) {
return lastEvent.created_at - 1;
}
},
select: (data) => data?.pages.flat(),
refetchOnWindowFocus: false,
});
@@ -47,14 +53,17 @@ export function Screen() {
(event: LumeEvent) => {
if (!event) return;
switch (event.kind) {
case Kind.Repost:
case Kind.Repost: {
const repostId = event.repostId;
return (
<RepostNote
key={event.id}
key={repostId + event.id}
event={event}
className="border-b-[.5px] border-neutral-300 dark:border-neutral-700"
/>
);
}
default:
return (
<TextNote
@@ -76,9 +85,9 @@ export function Screen() {
>
<ScrollArea.Viewport
ref={ref}
className="relative h-full bg-white dark:bg-black rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
className="relative h-full bg-white dark:bg-neutral-800 rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
>
<Virtualizer scrollRef={ref}>
<Virtualizer scrollRef={ref as unknown as RefObject<HTMLElement>}>
{isFetching && !isLoading && !isFetchingNextPage ? (
<div className="z-50 fixed top-0 left-0 w-full h-14 flex items-center justify-center px-3">
<div className="w-max h-8 pl-2 pr-3 inline-flex items-center justify-center gap-1.5 rounded-full shadow-lg text-sm font-medium text-white bg-black dark:text-black dark:bg-white">
@@ -92,7 +101,7 @@ export function Screen() {
<Spinner className="size-4" />
<span className="text-sm font-medium">Loading...</span>
</div>
) : !data.length ? (
) : !data?.length ? (
<div className="mb-3 flex items-center justify-center h-20 text-sm">
🎉 Yo. You're catching up on all latest notes.
</div>

23
src/routes/columns/_layout/groups.$id.lazy.tsx
View File

@@ -7,7 +7,7 @@ import { ArrowDown } from "@phosphor-icons/react";
import * as ScrollArea from "@radix-ui/react-scroll-area";
import { useInfiniteQuery } from "@tanstack/react-query";
import { createLazyFileRoute } from "@tanstack/react-router";
import { useCallback, useRef } from "react";
import { type RefObject, useCallback, useRef } from "react";
import { Virtualizer } from "virtua";
export const Route = createLazyFileRoute("/columns/_layout/groups/$id")({
@@ -29,7 +29,7 @@ export function Screen() {
queryKey: ["events", "groups", params.id],
initialPageParam: 0,
queryFn: async ({ pageParam }: { pageParam: number }) => {
const until = pageParam > 0 ? pageParam.toString() : undefined;
const until = pageParam > 0 ? pageParam.toString() : null;
const res = await commands.getAllEventsByAuthors(group, until);
if (res.status === "error") {
@@ -38,7 +38,13 @@ export function Screen() {
return toLumeEvents(res.data);
},
getNextPageParam: (lastPage) => lastPage?.at(-1)?.created_at - 1,
getNextPageParam: (lastPage) => {
const lastEvent = lastPage.at(-1);
if (lastEvent) {
return lastEvent.created_at - 1;
}
},
select: (data) => data?.pages.flat(),
enabled: group?.length > 0,
refetchOnWindowFocus: false,
@@ -50,14 +56,17 @@ export function Screen() {
(event: LumeEvent) => {
if (!event) return;
switch (event.kind) {
case Kind.Repost:
case Kind.Repost: {
const repostId = event.repostId;
return (
<RepostNote
key={event.id}
key={repostId + event.id}
event={event}
className="border-b-[.5px] border-neutral-300 dark:border-neutral-700"
/>
);
}
default:
return (
<TextNote
@@ -81,7 +90,7 @@ export function Screen() {
ref={ref}
className="relative h-full bg-white dark:bg-black rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
>
<Virtualizer scrollRef={ref}>
<Virtualizer scrollRef={ref as unknown as RefObject<HTMLElement>}>
{isFetching && !isLoading && !isFetchingNextPage ? (
<div className="z-50 fixed top-0 left-0 w-full h-14 flex items-center justify-center px-3">
<div className="w-max h-8 pl-2 pr-3 inline-flex items-center justify-center gap-1.5 rounded-full shadow-lg text-sm font-medium text-white bg-black dark:text-black dark:bg-white">
@@ -95,7 +104,7 @@ export function Screen() {
<Spinner className="size-4" />
<span className="text-sm font-medium">Loading...</span>
</div>
) : !data.length ? (
) : !data?.length ? (
<div className="mb-3 flex items-center justify-center h-20 text-sm">
🎉 Yo. You're catching up on all latest notes.
</div>

25
src/routes/columns/_layout/interests.$id.lazy.tsx
View File

@@ -7,7 +7,7 @@ import { ArrowDown } from "@phosphor-icons/react";
import * as ScrollArea from "@radix-ui/react-scroll-area";
import { useInfiniteQuery } from "@tanstack/react-query";
import { createLazyFileRoute } from "@tanstack/react-router";
import { useCallback, useRef } from "react";
import { type RefObject, useCallback, useRef } from "react";
import { Virtualizer } from "virtua";
export const Route = createLazyFileRoute("/columns/_layout/interests/$id")({
@@ -30,7 +30,7 @@ export function Screen() {
initialPageParam: 0,
queryFn: async ({ pageParam }: { pageParam: number }) => {
const tags = hashtags.map((tag) => tag.toLowerCase().replace("#", ""));
const until = pageParam > 0 ? pageParam.toString() : undefined;
const until = pageParam > 0 ? pageParam.toString() : null;
const res = await commands.getAllEventsByHashtags(tags, until);
if (res.status === "error") {
@@ -39,7 +39,13 @@ export function Screen() {
return toLumeEvents(res.data);
},
getNextPageParam: (lastPage) => lastPage?.at(-1)?.created_at - 1,
getNextPageParam: (lastPage) => {
const lastEvent = lastPage.at(-1);
if (lastEvent) {
return lastEvent.created_at - 1;
}
},
select: (data) => data?.pages.flat(),
refetchOnWindowFocus: false,
});
@@ -50,14 +56,17 @@ export function Screen() {
(event: LumeEvent) => {
if (!event) return;
switch (event.kind) {
case Kind.Repost:
case Kind.Repost: {
const repostId = event.repostId;
return (
<RepostNote
key={event.id}
key={repostId + event.id}
event={event}
className="border-b-[.5px] border-neutral-300 dark:border-neutral-700"
/>
);
}
default:
return (
<TextNote
@@ -79,9 +88,9 @@ export function Screen() {
>
<ScrollArea.Viewport
ref={ref}
className="relative h-full bg-white dark:bg-black rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
className="relative h-full bg-white dark:bg-neutral-800 rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
>
<Virtualizer scrollRef={ref}>
<Virtualizer scrollRef={ref as unknown as RefObject<HTMLElement>}>
{isFetching && !isLoading && !isFetchingNextPage ? (
<div className="z-50 fixed top-0 left-0 w-full h-14 flex items-center justify-center px-3">
<div className="w-max h-8 pl-2 pr-3 inline-flex items-center justify-center gap-1.5 rounded-full shadow-lg text-sm font-medium text-white bg-black dark:text-black dark:bg-white">
@@ -95,7 +104,7 @@ export function Screen() {
<Spinner className="size-4" />
<span className="text-sm font-medium">Loading...</span>
</div>
) : !data.length ? (
) : !data?.length ? (
<div className="mb-3 flex items-center justify-center h-20 text-sm">
🎉 Yo. You're catching up on all latest notes.
</div>

6
src/routes/columns/_layout/launchpad.$id.lazy.tsx
View File

@@ -20,7 +20,7 @@ export const Route = createLazyFileRoute("/columns/_layout/launchpad/$id")({
function Screen() {
const { id } = Route.useParams();
const { data: isSync } = useQuery({
const { isLoading, data: isSync } = useQuery({
queryKey: ["is-sync", id],
queryFn: async () => {
const res = await commands.isAccountSync(id);
@@ -40,7 +40,9 @@ function Screen() {
className="overflow-hidden size-full"
>
<ScrollArea.Viewport className="relative h-full px-3 pb-3">
{!isSync ? (
{isLoading ? (
<Spinner className="size-4" />
) : !isSync ? (
<SyncProgress />
) : (
<>

38
src/routes/columns/_layout/newsfeed.$id.lazy.tsx
View File

@@ -7,7 +7,8 @@ import { ArrowDown } from "@phosphor-icons/react";
import * as ScrollArea from "@radix-ui/react-scroll-area";
import { useInfiniteQuery } from "@tanstack/react-query";
import { createLazyFileRoute } from "@tanstack/react-router";
import { useCallback, useEffect, useRef } from "react";
import { listen } from "@tauri-apps/api/event";
import { type RefObject, useCallback, useEffect, useRef } from "react";
import { Virtualizer } from "virtua";
export const Route = createLazyFileRoute("/columns/_layout/newsfeed/$id")({
@@ -17,7 +18,7 @@ export const Route = createLazyFileRoute("/columns/_layout/newsfeed/$id")({
export function Screen() {
const contacts = Route.useLoaderData();
const search = Route.useSearch();
const { queryClient } = Route.useRouteContext();
const {
data,
isLoading,
@@ -38,7 +39,13 @@ export function Screen() {
return toLumeEvents(res.data);
},
getNextPageParam: (lastPage) => lastPage?.at?.(-1)?.created_at - 1,
getNextPageParam: (lastPage) => {
const lastEvent = lastPage.at(-1);
if (lastEvent) {
return lastEvent.created_at - 1;
}
},
select: (data) => data?.pages.flat(),
enabled: contacts?.length > 0,
});
@@ -52,14 +59,17 @@ export function Screen() {
}
switch (event.kind) {
case Kind.Repost:
case Kind.Repost: {
const repostId = event.repostId;
return (
<RepostNote
key={event.id}
key={repostId + event.id}
event={event}
className="border-b-[.5px] border-neutral-300 dark:border-neutral-700"
/>
);
}
default:
return (
<TextNote
@@ -95,6 +105,18 @@ export function Screen() {
};
}, []);
useEffect(() => {
const unlisten = listen("synchronized", async () => {
await queryClient.refetchQueries({
queryKey: ["events", "newsfeed", search.label],
});
});
return () => {
unlisten.then((f) => f());
};
}, []);
return (
<ScrollArea.Root
type={"scroll"}
@@ -103,9 +125,9 @@ export function Screen() {
>
<ScrollArea.Viewport
ref={ref}
className="relative h-full bg-white dark:bg-black rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
className="relative h-full bg-white dark:bg-neutral-800 rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
>
<Virtualizer scrollRef={ref}>
<Virtualizer scrollRef={ref as unknown as RefObject<HTMLElement>}>
{isFetching && !isLoading && !isFetchingNextPage ? (
<div className="z-50 fixed top-0 left-0 w-full h-14 flex items-center justify-center px-3">
<div className="w-max h-8 pl-2 pr-3 inline-flex items-center justify-center gap-1.5 rounded-full shadow-lg text-sm font-medium text-white bg-black dark:text-black dark:bg-white">
@@ -119,7 +141,7 @@ export function Screen() {
<Spinner className="size-4" />
<span className="text-sm font-medium">Loading...</span>
</div>
) : !data.length ? (
) : !data?.length ? (
<div className="mb-3 flex items-center justify-center h-20 text-sm">
🎉 Yo. You're catching up on all latest notes.
</div>

136
src/routes/columns/_layout/notification.$id.lazy.tsx
View File

@@ -10,7 +10,13 @@ import { useQuery } from "@tanstack/react-query";
import { createLazyFileRoute } from "@tanstack/react-router";
import { getCurrentWindow } from "@tauri-apps/api/window";
import { nip19 } from "nostr-tools";
import { type ReactNode, useEffect, useMemo, useRef } from "react";
import {
type ReactNode,
type RefObject,
useEffect,
useMemo,
useRef,
} from "react";
import { Virtualizer } from "virtua";
export const Route = createLazyFileRoute("/columns/_layout/notification/$id")({
@@ -110,7 +116,7 @@ function Screen() {
<div className="px-3 h-full overflow-y-auto">
<Tabs.Root
defaultValue="replies"
className="flex flex-col h-full bg-white dark:bg-black rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
className="flex flex-col h-full bg-white dark:bg-neutral-800 rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
>
<Tabs.List className="h-11 shrink-0 flex items-center">
<Tabs.Trigger
@@ -138,62 +144,74 @@ function Screen() {
className="min-h-0 flex-1 overflow-x-hidden"
>
<Tab value="replies">
{data.texts.map((event) => (
<TextNote key={event.id} event={event} />
))}
{!data?.texts ? (
<div>Empty</div>
) : (
data.texts.map((event) => (
<TextNote key={event.id} event={event} />
))
)}
</Tab>
<Tab value="reactions">
{[...data.reactions.entries()].map(([root, events]) => (
<div
key={root}
className="p-3 w-full border-b-[.5px] border-neutral-300 dark:border-neutral-700 hover:border-blue-500"
>
<div className="flex flex-col flex-1 min-w-0 gap-2">
<div className="flex items-center gap-2 pb-2">
<RootNote id={root} />
</div>
<div className="flex flex-wrap items-center gap-3">
{events.map((event) => (
<User.Provider key={event.id} pubkey={event.pubkey}>
<User.Root className="shrink-0 flex rounded-full h-7 bg-neutral-100 dark:bg-neutral-900 p-[2px]">
<User.Avatar className="flex-1 rounded-full size-6" />
<div className="inline-flex items-center justify-center flex-1 text-xs truncate rounded-full size-6">
{event.kind === Kind.Reaction ? (
event.content === "+" ? (
"👍"
{!data?.reactions ? (
<div>Empty</div>
) : (
[...data.reactions.entries()].map(([root, events]) => (
<div
key={root}
className="p-3 w-full border-b-[.5px] border-neutral-300 dark:border-neutral-700 hover:border-blue-500"
>
<div className="flex flex-col flex-1 min-w-0 gap-2">
<div className="flex items-center gap-2 pb-2">
<RootNote id={root} />
</div>
<div className="flex flex-wrap items-center gap-3">
{events.map((event) => (
<User.Provider key={event.id} pubkey={event.pubkey}>
<User.Root className="shrink-0 flex rounded-full h-7 bg-neutral-100 dark:bg-neutral-900 p-[2px]">
<User.Avatar className="flex-1 rounded-full size-6" />
<div className="inline-flex items-center justify-center flex-1 text-xs truncate rounded-full size-6">
{event.kind === Kind.Reaction ? (
event.content === "+" ? (
"👍"
) : (
event.content
)
) : (
event.content
)
) : (
<RepostIcon className="text-teal-400 size-4 dark:text-teal-600" />
)}
</div>
</User.Root>
</User.Provider>
))}
<RepostIcon className="text-teal-400 size-4 dark:text-teal-600" />
)}
</div>
</User.Root>
</User.Provider>
))}
</div>
</div>
</div>
</div>
))}
))
)}
</Tab>
<Tab value="zaps">
{[...data.zaps.entries()].map(([root, events]) => (
<div
key={root}
className="p-3 w-full border-b-[.5px] border-neutral-300 dark:border-neutral-700 hover:border-blue-500"
>
<div className="flex flex-col flex-1 min-w-0 gap-2">
<div className="flex items-center gap-2 pb-2">
<RootNote id={root} />
</div>
<div className="flex flex-wrap items-center gap-3">
{events.map((event) => (
<ZapReceipt key={event.id} event={event} />
))}
{!data?.zaps ? (
<div>Empty</div>
) : (
[...data.zaps.entries()].map(([root, events]) => (
<div
key={root}
className="p-3 w-full border-b-[.5px] border-neutral-300 dark:border-neutral-700 hover:border-blue-500"
>
<div className="flex flex-col flex-1 min-w-0 gap-2">
<div className="flex items-center gap-2 pb-2">
<RootNote id={root} />
</div>
<div className="flex flex-wrap items-center gap-3">
{events.map((event) => (
<ZapReceipt key={event.id} event={event} />
))}
</div>
</div>
</div>
</div>
))}
))
)}
</Tab>
<ScrollArea.Scrollbar
className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
@@ -208,13 +226,15 @@ function Screen() {
);
}
function Tab({ value, children }: { value: string; children: ReactNode[] }) {
function Tab({ value, children }: { value: string; children: ReactNode }) {
const ref = useRef<HTMLDivElement>(null);
return (
<Tabs.Content value={value} className="size-full">
<ScrollArea.Viewport ref={ref} className="h-full">
<Virtualizer scrollRef={ref}>{children}</Virtualizer>
<Virtualizer scrollRef={ref as unknown as RefObject<HTMLElement>}>
{children}
</Virtualizer>
</ScrollArea.Viewport>
</Tabs.Content>
);
@@ -311,10 +331,16 @@ function TextNote({ event }: { event: LumeEvent }) {
}
function ZapReceipt({ event }: { event: LumeEvent }) {
const amount = useMemo(
() => decodeZapInvoice(event.tags).bitcoinFormatted ?? "0",
[event.id],
);
const amount = useMemo(() => {
const decoded = decodeZapInvoice(event.tags);
if (decoded) {
return decoded.bitcoinFormatted;
} else {
return "0";
}
}, [event.id]);
const sender = useMemo(
() => event.tags.find((tag) => tag[0] === "P")?.[1],
[event.id],

16
src/routes/columns/_layout/replies.$id.lazy.tsx
View File

@@ -6,7 +6,7 @@ import {
useRouter,
useRouterState,
} from "@tanstack/react-router";
import { useRef } from "react";
import { type RefObject, useRef } from "react";
import { Virtualizer } from "virtua";
export const Route = createLazyFileRoute("/columns/_layout/replies/$id")({
@@ -20,7 +20,7 @@ function Screen() {
return (
<div className="px-3 h-full">
<div className="size-full bg-white dark:bg-black rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700">
<div className="size-full bg-white dark:bg-neutral-800 rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700">
<div className="h-full flex flex-col">
<div className="h-10 shrink-0 border-b border-black/5 dark:border-white/5 flex items-center justify-between px-2">
<button
@@ -38,10 +38,14 @@ function Screen() {
className="overflow-hidden size-full flex-1"
>
<ScrollArea.Viewport ref={ref} className="h-full p-3">
<Virtualizer scrollRef={ref}>
{events.map((event) => (
<ReplyNote key={event.id} event={event} />
))}
<Virtualizer scrollRef={ref as unknown as RefObject<HTMLElement>}>
{!events ? (
<div>Empty</div>
) : (
events.map((event) => (
<ReplyNote key={event.id} event={event} />
))
)}
</Virtualizer>
</ScrollArea.Viewport>
<ScrollArea.Scrollbar

12
src/routes/columns/_layout/search.lazy.tsx
View File

@@ -7,7 +7,13 @@ import { MagnifyingGlass } from "@phosphor-icons/react";
import * as ScrollArea from "@radix-ui/react-scroll-area";
import { createLazyFileRoute } from "@tanstack/react-router";
import { message } from "@tauri-apps/plugin-dialog";
import { useCallback, useRef, useState, useTransition } from "react";
import {
type RefObject,
useCallback,
useRef,
useState,
useTransition,
} from "react";
import { Virtualizer } from "virtua";
export const Route = createLazyFileRoute("/columns/_layout/search")({
@@ -97,7 +103,7 @@ function Screen() {
return (
<div className="px-3 h-full">
<div className="flex flex-col gap-3 size-full bg-white dark:bg-black rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700">
<div className="flex flex-col gap-3 size-full bg-white dark:bg-neutral-800 rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700">
<div className="h-9 shrink-0 pt-6 px-3 flex items-center gap-2">
<input
name="search"
@@ -127,7 +133,7 @@ function Screen() {
className="overflow-hidden size-full flex-1"
>
<ScrollArea.Viewport ref={ref} className="relative h-full">
<Virtualizer scrollRef={ref}>
<Virtualizer scrollRef={ref as unknown as RefObject<HTMLElement>}>
{isPending ? (
<div className="w-full h-[200px] flex gap-2 items-center justify-center">
<Spinner />

16
src/routes/columns/_layout/stories.$id.lazy.tsx
View File

@@ -10,7 +10,7 @@ import * as ScrollArea from "@radix-ui/react-scroll-area";
import { useQuery } from "@tanstack/react-query";
import { createLazyFileRoute } from "@tanstack/react-router";
import { nip19 } from "nostr-tools";
import { type ReactNode, memo, useMemo, useRef } from "react";
import { type ReactNode, type RefObject, memo, useMemo, useRef } from "react";
import reactStringReplace from "react-string-replace";
import { Virtualizer } from "virtua";
@@ -29,7 +29,10 @@ function Screen() {
className="overflow-hidden size-full"
>
<ScrollArea.Viewport ref={ref} className="relative h-full px-3 pb-3">
<Virtualizer scrollRef={ref} overscan={0}>
<Virtualizer
scrollRef={ref as unknown as RefObject<HTMLElement>}
overscan={0}
>
{!contacts ? (
<div className="w-full h-24 flex items-center justify-center">
<Spinner className="size-4" />
@@ -77,7 +80,7 @@ function StoryItem({ contact }: { contact: string }) {
const ref = useRef<HTMLDivElement>(null);
return (
<div className="mb-3 flex flex-col w-full h-[300px] bg-white dark:bg-black rounded-xl border-[.5px] border-neutral-300 dark:border-neutral-700">
<div className="mb-3 flex flex-col w-full h-[300px] bg-white dark:bg-neutral-800 rounded-xl border-[.5px] border-neutral-300 dark:border-neutral-700">
<div className="h-12 shrink-0 px-2 flex items-center justify-between border-b border-neutral-100 dark:border-white/5">
<User.Provider pubkey={contact}>
<User.Root className="inline-flex items-center gap-2">
@@ -102,7 +105,10 @@ function StoryItem({ contact }: { contact: string }) {
className="flex-1 min-h-0 overflow-hidden size-full"
>
<ScrollArea.Viewport ref={ref} className="relative h-full px-2 pt-2">
<Virtualizer scrollRef={ref} overscan={0}>
<Virtualizer
scrollRef={ref as unknown as RefObject<HTMLElement>}
overscan={0}
>
{isLoading ? (
<div className="w-full h-[calc(300px-48px)] flex items-center justify-center text-sm">
<Spinner className="size-4" />
@@ -111,7 +117,7 @@ function StoryItem({ contact }: { contact: string }) {
<div className="w-full h-[calc(300px-48px)] flex items-center justify-center text-sm">
{error.message}
</div>
) : !events.length ? (
) : !events?.length ? (
<div className="w-full h-[calc(300px-48px)] flex items-center justify-center text-sm">
This user didn't have any new notes in the last few days.
</div>

11
src/routes/columns/_layout/trending.lazy.tsx
View File

@@ -4,7 +4,7 @@ import { Kind, type NostrEvent } from "@/types";
import * as ScrollArea from "@radix-ui/react-scroll-area";
import { useQuery } from "@tanstack/react-query";
import { createLazyFileRoute } from "@tanstack/react-router";
import { useCallback, useRef } from "react";
import { type RefObject, useCallback, useRef } from "react";
import { Virtualizer } from "virtua";
export const Route = createLazyFileRoute("/columns/_layout/trending")({
@@ -71,15 +71,18 @@ function Screen() {
>
<ScrollArea.Viewport
ref={ref}
className="relative h-full bg-white dark:bg-black rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
className="relative h-full bg-white dark:bg-neutral-800 rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
>
<Virtualizer scrollRef={ref} overscan={1}>
<Virtualizer
scrollRef={ref as unknown as RefObject<HTMLElement>}
overscan={1}
>
{isLoading ? (
<div className="flex items-center justify-center w-full h-16 gap-2">
<Spinner className="size-4" />
<span className="text-sm font-medium">Loading...</span>
</div>
) : !data.length ? (
) : !data?.length ? (
<div className="mb-3 flex items-center justify-center h-20 text-sm">
🎉 Yo. You're catching up on all latest notes.
</div>

18
src/routes/columns/_layout/users.$id.lazy.tsx
View File

@@ -6,7 +6,7 @@ import { Kind } from "@/types";
import * as ScrollArea from "@radix-ui/react-scroll-area";
import { useQuery } from "@tanstack/react-query";
import { createLazyFileRoute } from "@tanstack/react-router";
import { useCallback, useRef } from "react";
import { type RefObject, useCallback, useRef } from "react";
import { Virtualizer } from "virtua";
export const Route = createLazyFileRoute("/columns/_layout/users/$id")({
@@ -36,14 +36,17 @@ function Screen() {
(event: LumeEvent) => {
if (!event) return;
switch (event.kind) {
case Kind.Repost:
case Kind.Repost: {
const repostId = event.repostId;
return (
<RepostNote
key={event.id}
key={repostId + event.id}
event={event}
className="border-b-[.5px] border-neutral-300 dark:border-neutral-700"
/>
);
}
default:
return (
<TextNote
@@ -65,9 +68,12 @@ function Screen() {
>
<ScrollArea.Viewport
ref={ref}
className="relative h-full bg-white dark:bg-black rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
className="relative h-full bg-white dark:bg-neutral-800 rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
>
<Virtualizer scrollRef={ref} overscan={0}>
<Virtualizer
scrollRef={ref as unknown as RefObject<HTMLElement>}
overscan={0}
>
<User.Provider pubkey={id}>
<User.Root className="relative">
<User.Cover className="object-cover w-full h-44 rounded-t-lg gradient-mask-b-0" />
@@ -88,7 +94,7 @@ function Screen() {
<Spinner className="size-5" />
<span className="text-sm font-medium">Loading...</span>
</div>
) : !events.length ? (
) : !events?.length ? (
<div className="flex items-center justify-center">
Yo. You're catching up on all the things happening around you.
</div>

2
src/system/event.ts
View File

@@ -167,7 +167,7 @@ export class LumeEvent {
}
}
static from(raw: string, parsed?: Meta) {
static from(raw: string, parsed?: Meta | null) {
const nostrEvent: NostrEvent = JSON.parse(raw);
if (parsed) {

2
src/types.ts
View File

@@ -26,7 +26,7 @@ export interface NostrEvent {
tags: string[][];
content: string;
sig: string;
meta: Meta;
meta: Meta | null;
}
export interface EventWithReplies extends NostrEvent {