mirror of
https://github.com/luminous-devs/lume.git
synced 2024-10-01 01:10:48 +00:00
feat(columns): add group column
This commit is contained in:
parent
499765c10a
commit
a52fb3c437
@ -8,6 +8,7 @@
|
|||||||
"build": "vite build"
|
"build": "vite build"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@columns/group": "workspace:^",
|
||||||
"@columns/hashtag": "workspace:^",
|
"@columns/hashtag": "workspace:^",
|
||||||
"@columns/notification": "workspace:^",
|
"@columns/notification": "workspace:^",
|
||||||
"@columns/thread": "workspace:^",
|
"@columns/thread": "workspace:^",
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import { Group } from "@columns/group";
|
||||||
import { Hashtag } from "@columns/hashtag";
|
import { Hashtag } from "@columns/hashtag";
|
||||||
import { Thread } from "@columns/thread";
|
import { Thread } from "@columns/thread";
|
||||||
import { Timeline } from "@columns/timeline";
|
import { Timeline } from "@columns/timeline";
|
||||||
@ -23,6 +24,8 @@ export function HomeScreen() {
|
|||||||
return <User key={column.id} column={column} />;
|
return <User key={column.id} column={column} />;
|
||||||
case COL_TYPES.hashtag:
|
case COL_TYPES.hashtag:
|
||||||
return <Hashtag key={column.id} column={column} />;
|
return <Hashtag key={column.id} column={column} />;
|
||||||
|
case COL_TYPES.group:
|
||||||
|
return <Group key={column.id} column={column} />;
|
||||||
default:
|
default:
|
||||||
return <Timeline key={column.id} column={column} />;
|
return <Timeline key={column.id} column={column} />;
|
||||||
}
|
}
|
||||||
|
26
packages/@columns/group/package.json
Normal file
26
packages/@columns/group/package.json
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"name": "@columns/group",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"main": "./src/index.tsx",
|
||||||
|
"dependencies": {
|
||||||
|
"@lume/ark": "workspace:^",
|
||||||
|
"@lume/icons": "workspace:^",
|
||||||
|
"@lume/ui": "workspace:^",
|
||||||
|
"@lume/utils": "workspace:^",
|
||||||
|
"@nostr-dev-kit/ndk": "^2.3.2",
|
||||||
|
"@tanstack/react-query": "^5.17.0",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-router-dom": "^6.21.1",
|
||||||
|
"sonner": "^1.3.1",
|
||||||
|
"virtua": "^0.18.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@lume/tailwindcss": "workspace:^",
|
||||||
|
"@lume/tsconfig": "workspace:^",
|
||||||
|
"@lume/types": "workspace:^",
|
||||||
|
"@types/react": "^18.2.46",
|
||||||
|
"tailwind": "^4.0.0",
|
||||||
|
"typescript": "^5.3.3"
|
||||||
|
}
|
||||||
|
}
|
92
packages/@columns/group/src/components/form.tsx
Normal file
92
packages/@columns/group/src/components/form.tsx
Normal file
@ -0,0 +1,92 @@
|
|||||||
|
import { useColumnContext, useStorage } from "@lume/ark";
|
||||||
|
import { CancelIcon, CheckCircleIcon } from "@lume/icons";
|
||||||
|
import { User } from "@lume/ui";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
export function GroupForm({ id }: { id: number }) {
|
||||||
|
const storage = useStorage();
|
||||||
|
const { updateColumn, removeColumn } = useColumnContext();
|
||||||
|
|
||||||
|
const [title, setTitle] = useState<string>(`Group-${id}`);
|
||||||
|
const [users, setUsers] = useState<Array<string>>([]);
|
||||||
|
|
||||||
|
// toggle follow state
|
||||||
|
const toggleUser = (pubkey: string) => {
|
||||||
|
const arr = users.includes(pubkey)
|
||||||
|
? users.filter((i) => i !== pubkey)
|
||||||
|
: [...users, pubkey];
|
||||||
|
setUsers(arr);
|
||||||
|
};
|
||||||
|
|
||||||
|
const submit = async () => {
|
||||||
|
await updateColumn(id, title, JSON.stringify(users));
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col justify-between h-full">
|
||||||
|
<div className="flex flex-col flex-1 min-h-0">
|
||||||
|
<div className="flex items-center justify-between w-full px-3 border-b h-11 shrink-0 border-neutral-100 dark:border-neutral-900">
|
||||||
|
<h1 className="text-sm font-semibold">Create a new Group</h1>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={async () => await removeColumn(id)}
|
||||||
|
className="inline-flex items-center justify-center rounded size-6 hover:bg-neutral-100 dark:hover:bg-neutral-900"
|
||||||
|
>
|
||||||
|
<CancelIcon className="size-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-5 px-3 pt-2 overflow-y-auto">
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<label
|
||||||
|
htmlFor="name"
|
||||||
|
className="font-medium text-neutral-700 dark:text-neutral-300"
|
||||||
|
>
|
||||||
|
Group Name
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
name="name"
|
||||||
|
value={title}
|
||||||
|
onChange={(e) => setTitle(e.target.value)}
|
||||||
|
placeholder="Nostrichs..."
|
||||||
|
className="px-3 rounded-xl border-neutral-200 dark:border-neutral-900 h-11 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<div className="inline-flex items-center justify-between">
|
||||||
|
<span className="font-medium text-neutral-700 dark:text-neutral-300">
|
||||||
|
Pick user
|
||||||
|
</span>
|
||||||
|
<span className="text-sm font-medium text-neutral-600 dark:text-neutral-400">{`${users.length} / ∞`}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
{storage.account?.contacts?.map((item: string) => (
|
||||||
|
<button
|
||||||
|
key={item}
|
||||||
|
type="button"
|
||||||
|
onClick={() => toggleUser(item)}
|
||||||
|
className="inline-flex items-center justify-between px-3 py-2 rounded-xl bg-neutral-50 dark:bg-neutral-950 hover:bg-neutral-100 dark:hover:bg-neutral-900"
|
||||||
|
>
|
||||||
|
<User pubkey={item} variant="simple" />
|
||||||
|
{users.includes(item) ? (
|
||||||
|
<CheckCircleIcon className="w-5 h-5 text-teal-500" />
|
||||||
|
) : null}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
<div className="h-20" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="absolute z-10 flex items-center justify-center w-full bottom-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={submit}
|
||||||
|
disabled={users.length < 1}
|
||||||
|
className="inline-flex items-center justify-center gap-2 px-6 font-medium text-white transform bg-blue-500 rounded-full active:translate-y-1 w-36 h-11 hover:bg-blue-600 focus:outline-none disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
Create
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
119
packages/@columns/group/src/home.tsx
Normal file
119
packages/@columns/group/src/home.tsx
Normal file
@ -0,0 +1,119 @@
|
|||||||
|
import { RepostNote, TextNote, useArk, useStorage } from "@lume/ark";
|
||||||
|
import { ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
|
||||||
|
import { FETCH_LIMIT } from "@lume/utils";
|
||||||
|
import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
|
||||||
|
import { useInfiniteQuery } from "@tanstack/react-query";
|
||||||
|
import { useEffect, useMemo, useRef } from "react";
|
||||||
|
import { CacheSnapshot, VList, VListHandle } from "virtua";
|
||||||
|
|
||||||
|
export function HomeRoute({
|
||||||
|
colKey,
|
||||||
|
content,
|
||||||
|
}: { colKey: string; content: string }) {
|
||||||
|
const ark = useArk();
|
||||||
|
const ref = useRef<VListHandle>();
|
||||||
|
const cacheKey = `${colKey}-vlist`;
|
||||||
|
|
||||||
|
const [offset, cache] = useMemo(() => {
|
||||||
|
const serialized = sessionStorage.getItem(cacheKey);
|
||||||
|
if (!serialized) return [];
|
||||||
|
return JSON.parse(serialized) as [number, CacheSnapshot];
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const { data, hasNextPage, isLoading, isFetchingNextPage, fetchNextPage } =
|
||||||
|
useInfiniteQuery({
|
||||||
|
queryKey: [colKey],
|
||||||
|
initialPageParam: 0,
|
||||||
|
queryFn: async ({
|
||||||
|
signal,
|
||||||
|
pageParam,
|
||||||
|
}: {
|
||||||
|
signal: AbortSignal;
|
||||||
|
pageParam: number;
|
||||||
|
}) => {
|
||||||
|
const authors = JSON.parse(content);
|
||||||
|
const events = await ark.getInfiniteEvents({
|
||||||
|
filter: {
|
||||||
|
kinds: [NDKKind.Text, NDKKind.Repost],
|
||||||
|
authors: authors,
|
||||||
|
},
|
||||||
|
limit: FETCH_LIMIT,
|
||||||
|
pageParam,
|
||||||
|
signal,
|
||||||
|
});
|
||||||
|
|
||||||
|
return events;
|
||||||
|
},
|
||||||
|
getNextPageParam: (lastPage) => {
|
||||||
|
const lastEvent = lastPage.at(-1);
|
||||||
|
if (!lastEvent) return;
|
||||||
|
return lastEvent.created_at - 1;
|
||||||
|
},
|
||||||
|
refetchOnWindowFocus: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
const allEvents = useMemo(
|
||||||
|
() => (data ? data.pages.flatMap((page) => page) : []),
|
||||||
|
[data],
|
||||||
|
);
|
||||||
|
|
||||||
|
const renderItem = (event: NDKEvent) => {
|
||||||
|
switch (event.kind) {
|
||||||
|
case NDKKind.Text:
|
||||||
|
return <TextNote key={event.id} event={event} className="mt-3" />;
|
||||||
|
case NDKKind.Repost:
|
||||||
|
return <RepostNote key={event.id} event={event} className="mt-3" />;
|
||||||
|
default:
|
||||||
|
return <TextNote key={event.id} event={event} className="mt-3" />;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!ref.current) return;
|
||||||
|
const handle = ref.current;
|
||||||
|
|
||||||
|
if (offset) {
|
||||||
|
handle.scrollTo(offset);
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
sessionStorage.setItem(
|
||||||
|
cacheKey,
|
||||||
|
JSON.stringify([handle.scrollOffset, handle.cache]),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full h-full">
|
||||||
|
<VList ref={ref} cache={cache} overscan={2} className="flex-1 px-3">
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="w-full flex h-16 items-center justify-center gap-2 px-3 py-1.5">
|
||||||
|
<LoaderIcon className="size-5 animate-spin" />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
allEvents.map((item) => renderItem(item))
|
||||||
|
)}
|
||||||
|
<div className="flex items-center justify-center h-16">
|
||||||
|
{hasNextPage ? (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => fetchNextPage()}
|
||||||
|
disabled={!hasNextPage || isFetchingNextPage}
|
||||||
|
className="inline-flex items-center justify-center w-40 h-10 gap-2 font-medium text-white bg-blue-500 rounded-full hover:bg-blue-600 focus:outline-none"
|
||||||
|
>
|
||||||
|
{isFetchingNextPage ? (
|
||||||
|
<LoaderIcon className="w-5 h-5 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<ArrowRightCircleIcon className="w-5 h-5" />
|
||||||
|
Load more
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</VList>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
32
packages/@columns/group/src/index.tsx
Normal file
32
packages/@columns/group/src/index.tsx
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import { Column } from "@lume/ark";
|
||||||
|
import { GroupFeedsIcon } from "@lume/icons";
|
||||||
|
import { IColumn } from "@lume/types";
|
||||||
|
import { GroupForm } from "./components/form";
|
||||||
|
import { HomeRoute } from "./home";
|
||||||
|
|
||||||
|
export function Group({ column }: { column: IColumn }) {
|
||||||
|
const colKey = `group-${column.id}`;
|
||||||
|
const created = !!column.content?.length;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Column.Root>
|
||||||
|
{created ? (
|
||||||
|
<>
|
||||||
|
<Column.Header
|
||||||
|
id={column.id}
|
||||||
|
title={column.title}
|
||||||
|
icon={<GroupFeedsIcon className="size-4" />}
|
||||||
|
/>
|
||||||
|
<Column.Content>
|
||||||
|
<Column.Route
|
||||||
|
path="/"
|
||||||
|
element={<HomeRoute colKey={colKey} content={column.content} />}
|
||||||
|
/>
|
||||||
|
</Column.Content>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<GroupForm id={column.id} />
|
||||||
|
)}
|
||||||
|
</Column.Root>
|
||||||
|
);
|
||||||
|
}
|
8
packages/@columns/group/tailwind.config.js
Normal file
8
packages/@columns/group/tailwind.config.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import sharedConfig from "@lume/tailwindcss";
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
content: ["./src/**/*.{js,ts,jsx,tsx}"],
|
||||||
|
presets: [sharedConfig],
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
8
packages/@columns/group/tsconfig.json
Normal file
8
packages/@columns/group/tsconfig.json
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"extends": "@lume/tsconfig/base.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "dist"
|
||||||
|
},
|
||||||
|
"include": ["src"],
|
||||||
|
"exclude": ["node_modules", "dist"]
|
||||||
|
}
|
@ -12,7 +12,7 @@ export function HomeRoute({
|
|||||||
}: { colKey: string; hashtag: string }) {
|
}: { colKey: string; hashtag: string }) {
|
||||||
const ark = useArk();
|
const ark = useArk();
|
||||||
const ref = useRef<VListHandle>();
|
const ref = useRef<VListHandle>();
|
||||||
const cacheKey = "hashtag-vlist";
|
const cacheKey = `${colKey}-vlist`;
|
||||||
|
|
||||||
const [offset, cache] = useMemo(() => {
|
const [offset, cache] = useMemo(() => {
|
||||||
const serialized = sessionStorage.getItem(cacheKey);
|
const serialized = sessionStorage.getItem(cacheKey);
|
||||||
@ -84,19 +84,19 @@ export function HomeRoute({
|
|||||||
<TextNote key={item.id} event={item} className="mt-3" />
|
<TextNote key={item.id} event={item} className="mt-3" />
|
||||||
))
|
))
|
||||||
)}
|
)}
|
||||||
<div className="flex h-16 items-center justify-center">
|
<div className="flex items-center justify-center h-16">
|
||||||
{hasNextPage ? (
|
{hasNextPage ? (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => fetchNextPage()}
|
onClick={() => fetchNextPage()}
|
||||||
disabled={!hasNextPage || isFetchingNextPage}
|
disabled={!hasNextPage || isFetchingNextPage}
|
||||||
className="inline-flex h-10 w-40 items-center justify-center gap-2 rounded-full bg-blue-500 font-medium text-white hover:bg-blue-600 focus:outline-none"
|
className="inline-flex items-center justify-center w-40 h-10 gap-2 font-medium text-white bg-blue-500 rounded-full hover:bg-blue-600 focus:outline-none"
|
||||||
>
|
>
|
||||||
{isFetchingNextPage ? (
|
{isFetchingNextPage ? (
|
||||||
<LoaderIcon className="h-5 w-5 animate-spin" />
|
<LoaderIcon className="w-5 h-5 animate-spin" />
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<ArrowRightCircleIcon className="h-5 w-5" />
|
<ArrowRightCircleIcon className="w-5 h-5" />
|
||||||
Load more
|
Load more
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
@ -1,12 +1,12 @@
|
|||||||
import { Column } from "@lume/ark";
|
import { Column } from "@lume/ark";
|
||||||
import { HashtagIcon, TimelineIcon } from "@lume/icons";
|
import { HashtagIcon } from "@lume/icons";
|
||||||
import { IColumn } from "@lume/types";
|
import { IColumn } from "@lume/types";
|
||||||
import { EventRoute } from "./event";
|
import { EventRoute } from "./event";
|
||||||
import { HomeRoute } from "./home";
|
import { HomeRoute } from "./home";
|
||||||
import { UserRoute } from "./user";
|
import { UserRoute } from "./user";
|
||||||
|
|
||||||
export function Hashtag({ column }: { column: IColumn }) {
|
export function Hashtag({ column }: { column: IColumn }) {
|
||||||
const colKey = "hashtag";
|
const colKey = `hashtag-${column.id}`;
|
||||||
const hashtag = column.content.replace("#", "");
|
const hashtag = column.content.replace("#", "");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -10,7 +10,7 @@ export function HomeRoute({ colKey }: { colKey: string }) {
|
|||||||
const ark = useArk();
|
const ark = useArk();
|
||||||
const storage = useStorage();
|
const storage = useStorage();
|
||||||
const ref = useRef<VListHandle>();
|
const ref = useRef<VListHandle>();
|
||||||
const cacheKey = "newsfeed-vlist";
|
const cacheKey = `${colKey}-vlist`;
|
||||||
|
|
||||||
const [offset, cache] = useMemo(() => {
|
const [offset, cache] = useMemo(() => {
|
||||||
const serialized = sessionStorage.getItem(cacheKey);
|
const serialized = sessionStorage.getItem(cacheKey);
|
||||||
@ -91,19 +91,19 @@ export function HomeRoute({ colKey }: { colKey: string }) {
|
|||||||
) : (
|
) : (
|
||||||
allEvents.map((item) => renderItem(item))
|
allEvents.map((item) => renderItem(item))
|
||||||
)}
|
)}
|
||||||
<div className="flex h-16 items-center justify-center">
|
<div className="flex items-center justify-center h-16">
|
||||||
{hasNextPage ? (
|
{hasNextPage ? (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => fetchNextPage()}
|
onClick={() => fetchNextPage()}
|
||||||
disabled={!hasNextPage || isFetchingNextPage}
|
disabled={!hasNextPage || isFetchingNextPage}
|
||||||
className="inline-flex h-10 w-40 items-center justify-center gap-2 rounded-full bg-blue-500 font-medium text-white hover:bg-blue-600 focus:outline-none"
|
className="inline-flex items-center justify-center w-40 h-10 gap-2 font-medium text-white bg-blue-500 rounded-full hover:bg-blue-600 focus:outline-none"
|
||||||
>
|
>
|
||||||
{isFetchingNextPage ? (
|
{isFetchingNextPage ? (
|
||||||
<LoaderIcon className="h-5 w-5 animate-spin" />
|
<LoaderIcon className="w-5 h-5 animate-spin" />
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<ArrowRightCircleIcon className="h-5 w-5" />
|
<ArrowRightCircleIcon className="w-5 h-5" />
|
||||||
Load more
|
Load more
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
@ -1,15 +1,15 @@
|
|||||||
import { Column, useStorage } from "@lume/ark";
|
import { Column, useStorage } from "@lume/ark";
|
||||||
import { TimelineIcon } from "@lume/icons";
|
import { TimelineIcon } from "@lume/icons";
|
||||||
|
import { IColumn } from "@lume/types";
|
||||||
import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
|
import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
|
||||||
import { useQueryClient } from "@tanstack/react-query";
|
import { useQueryClient } from "@tanstack/react-query";
|
||||||
import { useRef } from "react";
|
import { useRef } from "react";
|
||||||
import { IColumn } from "../../../types";
|
|
||||||
import { EventRoute } from "./event";
|
import { EventRoute } from "./event";
|
||||||
import { HomeRoute } from "./home";
|
import { HomeRoute } from "./home";
|
||||||
import { UserRoute } from "./user";
|
import { UserRoute } from "./user";
|
||||||
|
|
||||||
export function Timeline({ column }: { column: IColumn }) {
|
export function Timeline({ column }: { column: IColumn }) {
|
||||||
const colKey = "newsfeed";
|
const colKey = `timeline-${column.id}`;
|
||||||
const storage = useStorage();
|
const storage = useStorage();
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
const since = useRef(Math.floor(Date.now() / 1000));
|
const since = useRef(Math.floor(Date.now() / 1000));
|
||||||
|
@ -5,20 +5,19 @@ import {
|
|||||||
useProfile,
|
useProfile,
|
||||||
useStorage,
|
useStorage,
|
||||||
} from "@lume/ark";
|
} from "@lume/ark";
|
||||||
import { ArrowLeftIcon, ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
|
import { ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
|
||||||
import { NIP05 } from "@lume/ui";
|
import { NIP05 } from "@lume/ui";
|
||||||
import { FETCH_LIMIT, displayNpub } from "@lume/utils";
|
import { FETCH_LIMIT, displayNpub } from "@lume/utils";
|
||||||
import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
|
import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
|
||||||
import { useInfiniteQuery } from "@tanstack/react-query";
|
import { useInfiniteQuery } from "@tanstack/react-query";
|
||||||
import { useEffect, useMemo, useState } from "react";
|
import { useEffect, useMemo, useState } from "react";
|
||||||
import { Link, useNavigate } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import { WVList } from "virtua";
|
import { WVList } from "virtua";
|
||||||
|
|
||||||
export function HomeRoute({ id }: { id: string }) {
|
export function HomeRoute({ id }: { id: string }) {
|
||||||
const ark = useArk();
|
const ark = useArk();
|
||||||
const storage = useStorage();
|
const storage = useStorage();
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const { user } = useProfile(id);
|
const { user } = useProfile(id);
|
||||||
const { data, hasNextPage, isLoading, isFetchingNextPage, fetchNextPage } =
|
const { data, hasNextPage, isLoading, isFetchingNextPage, fetchNextPage } =
|
||||||
@ -108,7 +107,7 @@ export function HomeRoute({ id }: { id: string }) {
|
|||||||
<img
|
<img
|
||||||
src={user?.picture || user?.image}
|
src={user?.picture || user?.image}
|
||||||
alt={id}
|
alt={id}
|
||||||
className="h-12 w-12 shrink-0 rounded-lg object-cover"
|
className="object-cover w-12 h-12 rounded-lg shrink-0"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
decoding="async"
|
decoding="async"
|
||||||
/>
|
/>
|
||||||
@ -117,7 +116,7 @@ export function HomeRoute({ id }: { id: string }) {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => unfollow(id)}
|
onClick={() => unfollow(id)}
|
||||||
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
|
className="inline-flex items-center justify-center text-sm font-medium rounded-lg h-9 w-28 bg-neutral-200 hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
|
||||||
>
|
>
|
||||||
Unfollow
|
Unfollow
|
||||||
</button>
|
</button>
|
||||||
@ -125,14 +124,14 @@ export function HomeRoute({ id }: { id: string }) {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => follow(id)}
|
onClick={() => follow(id)}
|
||||||
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
|
className="inline-flex items-center justify-center text-sm font-medium rounded-lg h-9 w-28 bg-neutral-200 hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
|
||||||
>
|
>
|
||||||
Follow
|
Follow
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
<Link
|
<Link
|
||||||
to={`/chats/${id}`}
|
to={`/chats/${id}`}
|
||||||
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
|
className="inline-flex items-center justify-center text-sm font-medium rounded-lg h-9 w-28 bg-neutral-200 hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
|
||||||
>
|
>
|
||||||
Message
|
Message
|
||||||
</Link>
|
</Link>
|
||||||
@ -170,24 +169,24 @@ export function HomeRoute({ id }: { id: string }) {
|
|||||||
<div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
|
<div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<div className="flex items-center justify-center">
|
<div className="flex items-center justify-center">
|
||||||
<LoaderIcon className="h-4 w-4 animate-spin" />
|
<LoaderIcon className="w-4 h-4 animate-spin" />
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
allEvents.map((item) => renderItem(item))
|
allEvents.map((item) => renderItem(item))
|
||||||
)}
|
)}
|
||||||
<div className="flex h-16 items-center justify-center px-3 pb-3">
|
<div className="flex items-center justify-center h-16 px-3 pb-3">
|
||||||
{hasNextPage ? (
|
{hasNextPage ? (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => fetchNextPage()}
|
onClick={() => fetchNextPage()}
|
||||||
disabled={!hasNextPage || isFetchingNextPage}
|
disabled={!hasNextPage || isFetchingNextPage}
|
||||||
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
|
className="inline-flex items-center justify-center h-10 gap-2 px-6 font-medium text-white bg-blue-500 rounded-full w-max hover:bg-blue-600 focus:outline-none"
|
||||||
>
|
>
|
||||||
{isFetchingNextPage ? (
|
{isFetchingNextPage ? (
|
||||||
<LoaderIcon className="h-4 w-4 animate-spin" />
|
<LoaderIcon className="w-4 h-4 animate-spin" />
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<ArrowRightCircleIcon className="h-5 w-5" />
|
<ArrowRightCircleIcon className="w-5 h-5" />
|
||||||
Load more
|
Load more
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
@ -15,6 +15,7 @@ type ColumnContext = {
|
|||||||
addColumn: (column: IColumn) => Promise<void>;
|
addColumn: (column: IColumn) => Promise<void>;
|
||||||
removeColumn: (id: number) => Promise<void>;
|
removeColumn: (id: number) => Promise<void>;
|
||||||
moveColumn: (id: number, position: "left" | "right") => void;
|
moveColumn: (id: number, position: "left" | "right") => void;
|
||||||
|
updateColumn: (id: number, title: string, content: string) => Promise<void>;
|
||||||
loadAllColumns: () => Promise<IColumn[]>;
|
loadAllColumns: () => Promise<IColumn[]>;
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -32,11 +33,11 @@ export function ColumnProvider({ children }: { children: ReactNode }) {
|
|||||||
]);
|
]);
|
||||||
|
|
||||||
const loadAllColumns = useCallback(async () => {
|
const loadAllColumns = useCallback(async () => {
|
||||||
return await storage.getWidgets();
|
return await storage.getColumns();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const addColumn = useCallback(async (column: IColumn) => {
|
const addColumn = useCallback(async (column: IColumn) => {
|
||||||
const result = await storage.createWidget(
|
const result = await storage.createColumn(
|
||||||
column.kind,
|
column.kind,
|
||||||
column.title,
|
column.title,
|
||||||
column.content,
|
column.content,
|
||||||
@ -45,10 +46,27 @@ export function ColumnProvider({ children }: { children: ReactNode }) {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const removeColumn = useCallback(async (id: number) => {
|
const removeColumn = useCallback(async (id: number) => {
|
||||||
await storage.removeWidget(id);
|
await storage.removeColumn(id);
|
||||||
setColumns((prev) => prev.filter((t) => t.id !== id));
|
setColumns((prev) => prev.filter((t) => t.id !== id));
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
const updateColumn = useCallback(
|
||||||
|
async (id: number, title: string, content: string) => {
|
||||||
|
const res = await storage.updateColumn(id, title, content);
|
||||||
|
if (res) {
|
||||||
|
const newCols = columns.map((col) => {
|
||||||
|
if (col.id === id) {
|
||||||
|
return { ...col, title, content };
|
||||||
|
}
|
||||||
|
return col;
|
||||||
|
});
|
||||||
|
|
||||||
|
setColumns(newCols);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[columns],
|
||||||
|
);
|
||||||
|
|
||||||
const moveColumn = useCallback(
|
const moveColumn = useCallback(
|
||||||
(id: number, position: "left" | "right") => {
|
(id: number, position: "left" | "right") => {
|
||||||
const newCols = [...columns];
|
const newCols = [...columns];
|
||||||
@ -80,7 +98,14 @@ export function ColumnProvider({ children }: { children: ReactNode }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<ColumnContext.Provider
|
<ColumnContext.Provider
|
||||||
value={{ columns, addColumn, removeColumn, moveColumn, loadAllColumns }}
|
value={{
|
||||||
|
columns,
|
||||||
|
addColumn,
|
||||||
|
removeColumn,
|
||||||
|
moveColumn,
|
||||||
|
updateColumn,
|
||||||
|
loadAllColumns,
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</ColumnContext.Provider>
|
</ColumnContext.Provider>
|
||||||
|
@ -1,22 +1,24 @@
|
|||||||
import { SVGProps } from 'react';
|
import { SVGProps } from "react";
|
||||||
|
|
||||||
export function GroupFeedsIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
|
export function GroupFeedsIcon(
|
||||||
return (
|
props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
|
||||||
<svg
|
) {
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
return (
|
||||||
width="24"
|
<svg
|
||||||
height="24"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
fill="none"
|
width="24"
|
||||||
viewBox="0 0 24 24"
|
height="24"
|
||||||
{...props}
|
fill="none"
|
||||||
>
|
viewBox="0 0 24 24"
|
||||||
<path
|
{...props}
|
||||||
stroke="currentColor"
|
>
|
||||||
strokeLinecap="round"
|
<path
|
||||||
strokeLinejoin="round"
|
stroke="currentColor"
|
||||||
strokeWidth="1.5"
|
strokeLinecap="round"
|
||||||
d="M14.425 13.18c3.361-1.396 7.598.605 8.454 6.003.09.573-.372 1.067-.952 1.067H16.75M10.75 7a3.25 3.25 0 11-6.5 0 3.25 3.25 0 016.5 0zm9 0a3.25 3.25 0 11-6.5 0 3.25 3.25 0 016.5 0zm-6.966 13.25H2.072c-.58 0-1.042-.497-.951-1.07 1.362-8.573 11.252-8.573 12.614 0 .091.573-.371 1.07-.951 1.07z"
|
strokeLinejoin="round"
|
||||||
></path>
|
strokeWidth="2"
|
||||||
</svg>
|
d="M7.328 8.191a2.596 2.596 0 110-5.191 2.596 2.596 0 010 5.191zm0 0c1.932 0 3.639.959 4.673 2.426a5.704 5.704 0 014.672-2.426m-9.345 0a5.704 5.704 0 00-4.672 2.426m14.017-2.426a2.596 2.596 0 110-5.191 2.596 2.596 0 010 5.191zm0 0c1.93 0 3.638.959 4.672 2.426M7.328 18.575a2.596 2.596 0 110-5.192 2.596 2.596 0 010 5.192zm0 0c1.932 0 3.639.958 4.673 2.426a5.704 5.704 0 014.672-2.426m-9.345 0A5.704 5.704 0 002.656 21m14.017-2.426a2.596 2.596 0 110-5.192 2.596 2.596 0 010 5.192zm0 0c1.93 0 3.638.958 4.672 2.426"
|
||||||
);
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
@ -322,7 +322,7 @@ export class LumeStorage {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public async getWidgets() {
|
public async getColumns() {
|
||||||
const widgets: Array<IColumn> = await this.#db.select(
|
const widgets: Array<IColumn> = await this.#db.select(
|
||||||
"SELECT * FROM widgets WHERE account_id = $1 ORDER BY created_at DESC;",
|
"SELECT * FROM widgets WHERE account_id = $1 ORDER BY created_at DESC;",
|
||||||
[this.account.id],
|
[this.account.id],
|
||||||
@ -330,7 +330,7 @@ export class LumeStorage {
|
|||||||
return widgets;
|
return widgets;
|
||||||
}
|
}
|
||||||
|
|
||||||
public async createWidget(
|
public async createColumn(
|
||||||
kind: number,
|
kind: number,
|
||||||
title: string,
|
title: string,
|
||||||
content: string | string[],
|
content: string | string[],
|
||||||
@ -351,7 +351,14 @@ export class LumeStorage {
|
|||||||
console.error("create widget failed");
|
console.error("create widget failed");
|
||||||
}
|
}
|
||||||
|
|
||||||
public async removeWidget(id: number) {
|
public async updateColumn(id: number, title: string, content: string) {
|
||||||
|
return await this.#db.execute(
|
||||||
|
"UPDATE widgets SET title = $1, content = $2 WHERE id = $3;",
|
||||||
|
[title, content, id],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
public async removeColumn(id: number) {
|
||||||
const res = await this.#db.execute("DELETE FROM widgets WHERE id = $1;", [
|
const res = await this.#db.execute("DELETE FROM widgets WHERE id = $1;", [
|
||||||
id,
|
id,
|
||||||
]);
|
]);
|
||||||
|
@ -20,6 +20,9 @@ importers:
|
|||||||
|
|
||||||
apps/desktop:
|
apps/desktop:
|
||||||
dependencies:
|
dependencies:
|
||||||
|
'@columns/group':
|
||||||
|
specifier: workspace:^
|
||||||
|
version: link:../../packages/@columns/group
|
||||||
'@columns/hashtag':
|
'@columns/hashtag':
|
||||||
specifier: workspace:^
|
specifier: workspace:^
|
||||||
version: link:../../packages/@columns/hashtag
|
version: link:../../packages/@columns/hashtag
|
||||||
@ -289,6 +292,58 @@ importers:
|
|||||||
specifier: ^4.2.3
|
specifier: ^4.2.3
|
||||||
version: 4.2.3(typescript@5.3.3)(vite@4.5.1)
|
version: 4.2.3(typescript@5.3.3)(vite@4.5.1)
|
||||||
|
|
||||||
|
packages/@columns/group:
|
||||||
|
dependencies:
|
||||||
|
'@lume/ark':
|
||||||
|
specifier: workspace:^
|
||||||
|
version: link:../../ark
|
||||||
|
'@lume/icons':
|
||||||
|
specifier: workspace:^
|
||||||
|
version: link:../../icons
|
||||||
|
'@lume/ui':
|
||||||
|
specifier: workspace:^
|
||||||
|
version: link:../../ui
|
||||||
|
'@lume/utils':
|
||||||
|
specifier: workspace:^
|
||||||
|
version: link:../../utils
|
||||||
|
'@nostr-dev-kit/ndk':
|
||||||
|
specifier: ^2.3.2
|
||||||
|
version: 2.3.2(typescript@5.3.3)
|
||||||
|
'@tanstack/react-query':
|
||||||
|
specifier: ^5.17.0
|
||||||
|
version: 5.17.0(react@18.2.0)
|
||||||
|
react:
|
||||||
|
specifier: ^18.2.0
|
||||||
|
version: 18.2.0
|
||||||
|
react-router-dom:
|
||||||
|
specifier: ^6.21.1
|
||||||
|
version: 6.21.1(react-dom@18.2.0)(react@18.2.0)
|
||||||
|
sonner:
|
||||||
|
specifier: ^1.3.1
|
||||||
|
version: 1.3.1(react-dom@18.2.0)(react@18.2.0)
|
||||||
|
virtua:
|
||||||
|
specifier: ^0.18.0
|
||||||
|
version: 0.18.0(react-dom@18.2.0)(react@18.2.0)
|
||||||
|
devDependencies:
|
||||||
|
'@lume/tailwindcss':
|
||||||
|
specifier: workspace:^
|
||||||
|
version: link:../../tailwindcss
|
||||||
|
'@lume/tsconfig':
|
||||||
|
specifier: workspace:^
|
||||||
|
version: link:../../tsconfig
|
||||||
|
'@lume/types':
|
||||||
|
specifier: workspace:^
|
||||||
|
version: link:../../types
|
||||||
|
'@types/react':
|
||||||
|
specifier: ^18.2.46
|
||||||
|
version: 18.2.46
|
||||||
|
tailwind:
|
||||||
|
specifier: ^4.0.0
|
||||||
|
version: 4.0.0
|
||||||
|
typescript:
|
||||||
|
specifier: ^5.3.3
|
||||||
|
version: 5.3.3
|
||||||
|
|
||||||
packages/@columns/hashtag:
|
packages/@columns/hashtag:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@lume/ark':
|
'@lume/ark':
|
||||||
|
Loading…
Reference in New Issue
Block a user