mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-29 16:30:55 +00:00
feat: add suggest screen
This commit is contained in:
parent
b726ae3c7c
commit
9fcdac4edb
@ -9,6 +9,7 @@ import {
|
||||
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { ReactNode } from "react";
|
||||
import { InterestModal } from "./interestModal";
|
||||
import { useColumnContext } from "./provider";
|
||||
|
||||
export function ColumnHeader({
|
||||
@ -71,6 +72,11 @@ export function ColumnHeader({
|
||||
Refresh
|
||||
</button>
|
||||
</DropdownMenu.Item>
|
||||
{queryKey[0] === "foryou-9998" ? (
|
||||
<DropdownMenu.Item asChild>
|
||||
<InterestModal queryKey={queryKey} />
|
||||
</DropdownMenu.Item>
|
||||
) : null}
|
||||
<DropdownMenu.Item asChild>
|
||||
<button
|
||||
type="button"
|
||||
|
157
packages/ark/src/components/column/interestModal.tsx
Normal file
157
packages/ark/src/components/column/interestModal.tsx
Normal file
@ -0,0 +1,157 @@
|
||||
import { ArrowLeftIcon, EditInterestIcon, LoaderIcon } from "@lume/icons";
|
||||
import { useStorage } from "@lume/storage";
|
||||
import { TOPICS, cn } from "@lume/utils";
|
||||
import * as Dialog from "@radix-ui/react-dialog";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { ReactNode, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export function InterestModal({
|
||||
queryKey,
|
||||
className,
|
||||
children,
|
||||
}: { queryKey: string[]; className?: string; children?: ReactNode }) {
|
||||
const storage = useStorage();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [hashtags, setHashtags] = useState(storage.interests?.hashtags || []);
|
||||
|
||||
const toggleHashtag = (item: string) => {
|
||||
const arr = hashtags.includes(item)
|
||||
? hashtags.filter((i) => i !== item)
|
||||
: [...hashtags, item];
|
||||
setHashtags(arr);
|
||||
};
|
||||
|
||||
const toggleAll = (item: string[]) => {
|
||||
const sets = new Set([...hashtags, ...item]);
|
||||
setHashtags([...sets]);
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
const save = await storage.createSetting(
|
||||
"interests",
|
||||
JSON.stringify({ hashtags }),
|
||||
);
|
||||
|
||||
if (save) {
|
||||
storage.interests.hashtags = hashtags;
|
||||
await queryClient.refetchQueries({ queryKey });
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
setOpen(false);
|
||||
} catch (e) {
|
||||
setLoading(false);
|
||||
toast.error(String(e));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog.Root open={open} onOpenChange={setOpen}>
|
||||
<Dialog.Trigger
|
||||
className={cn(
|
||||
"inline-flex items-center gap-2 px-3 text-sm font-medium rounded-lg h-9 text-white/50 hover:bg-black/10 hover:text-white focus:outline-none dark:text-white/50 dark:hover:bg-white/10 dark:hover:text-white",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{children ? (
|
||||
children
|
||||
) : (
|
||||
<>
|
||||
<EditInterestIcon className="size-5" />
|
||||
Edit interest
|
||||
</>
|
||||
)}
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="fixed inset-0 z-50 bg-black/10 backdrop-blur-sm dark:bg-white/10" />
|
||||
<Dialog.Content className="fixed inset-0 z-50 flex items-center justify-center min-h-full">
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
className="h-20 absolute top-0 left-0 w-full"
|
||||
/>
|
||||
<div className="relative w-full max-w-xl xl:max-w-2xl bg-white h-[600px] xl:h-[700px] rounded-xl dark:bg-black overflow-hidden">
|
||||
<div className="w-full h-full flex flex-col">
|
||||
<div className="h-16 shrink-0 px-8 border-b border-neutral-100 dark:border-neutral-900 flex w-full items-center justify-between">
|
||||
<div className="flex flex-col">
|
||||
<h3 className="font-semibold">Edit Interest</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex-1 min-h-0 flex flex-col justify-between">
|
||||
<div className="flex-1 min-h-0 overflow-y-auto px-8 py-8">
|
||||
<div className="flex flex-col gap-8">
|
||||
{TOPICS.map((topic, index) => (
|
||||
<div
|
||||
key={topic.title + index}
|
||||
className="flex flex-col gap-4"
|
||||
>
|
||||
<div className="w-full flex items-center justify-between">
|
||||
<div className="inline-flex items-center gap-2.5">
|
||||
<img
|
||||
src={topic.icon}
|
||||
alt={topic.title}
|
||||
className="size-8 object-cover rounded-lg"
|
||||
/>
|
||||
<h3 className="text-lg font-semibold">
|
||||
{topic.title}
|
||||
</h3>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleAll(topic.content)}
|
||||
className="text-sm font-medium text-blue-500"
|
||||
>
|
||||
Follow All
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
{topic.content.map((hashtag) => (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleHashtag(hashtag)}
|
||||
className={cn(
|
||||
"inline-flex items-center rounded-full bg-neutral-100 dark:bg-neutral-900 border border-transparent px-2 py-1 text-sm font-medium",
|
||||
hashtags.includes(hashtag)
|
||||
? "border-blue-500 text-blue-500"
|
||||
: "",
|
||||
)}
|
||||
>
|
||||
{hashtag}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-16 shrink-0 w-full flex items-center px-8 justify-center gap-2 border-t border-neutral-100 dark:border-neutral-900 bg-neutral-50 dark:bg-neutral-950">
|
||||
<Dialog.Close className="inline-flex h-9 flex-1 gap-2 shrink-0 items-center justify-center rounded-lg bg-neutral-100 font-medium dark:bg-neutral-900 dark:hover:bg-neutral-800 hover:bg-blue-200">
|
||||
<ArrowLeftIcon className="size-4" />
|
||||
Cancel
|
||||
</Dialog.Close>
|
||||
<button
|
||||
type="button"
|
||||
onClick={submit}
|
||||
className="inline-flex h-9 flex-1 shrink-0 items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600 disabled:opacity-50"
|
||||
>
|
||||
{loading ? (
|
||||
<LoaderIcon className="size-4 animate-spin" />
|
||||
) : (
|
||||
"Save"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
@ -31,7 +31,7 @@ export function UserAbout({ className }: { className?: string }) {
|
||||
|
||||
return (
|
||||
<div className={cn("select-text break-p", className)}>
|
||||
{user.about || user.bio}
|
||||
{user.about?.trim() || user.bio?.trim() || "No bio"}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -108,3 +108,4 @@ export * from "./src/composeFilled";
|
||||
export * from "./src/settingsFilled";
|
||||
export * from "./src/bellFilled";
|
||||
export * from "./src/foryou";
|
||||
export * from "./src/editInterest";
|
||||
|
24
packages/icons/src/editInterest.tsx
Normal file
24
packages/icons/src/editInterest.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import { SVGProps } from "react";
|
||||
|
||||
export function EditInterestIcon(
|
||||
props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
|
||||
) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M15 22h.001M3 20.995L5.727 21c.39 0 .584 0 .767-.043.163-.04.318-.104.46-.191.161-.1.299-.237.574-.514l12.973-13.03c.53-.533.662-1.356.258-2.006a6.321 6.321 0 00-1.932-1.965 1.569 1.569 0 00-1.964.212L3.81 16.573c-.266.267-.398.4-.495.555-.085.138-.149.288-.19.445-.045.177-.05.365-.059.742L3 20.995zM19 15c-.637 1.616-1.34 2.345-3 3 1.66.655 2.363 1.384 3 3 .637-1.616 1.34-2.345 3-3-1.66-.655-2.363-1.384-3-3z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
@ -1,6 +1,8 @@
|
||||
import { TextNote, useArk } from "@lume/ark";
|
||||
import { ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
|
||||
import { InterestModal } from "@lume/ark/src/components/column/interestModal";
|
||||
import { ArrowRightCircleIcon, ForyouIcon, LoaderIcon } from "@lume/icons";
|
||||
import { useStorage } from "@lume/storage";
|
||||
import { EmptyFeed } from "@lume/ui";
|
||||
import { FETCH_LIMIT } from "@lume/utils";
|
||||
import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
|
||||
import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
|
||||
@ -31,10 +33,14 @@ export function HomeRoute({ colKey }: { colKey: string }) {
|
||||
signal: AbortSignal;
|
||||
pageParam: number;
|
||||
}) => {
|
||||
if (!storage.interests?.hashtags) return [];
|
||||
|
||||
const events = await ark.getInfiniteEvents({
|
||||
filter: {
|
||||
kinds: [NDKKind.Text],
|
||||
"#t": storage.interests.hashtags,
|
||||
"#t": storage.interests.hashtags.map((item: string) =>
|
||||
item.replace("#", "").toLowerCase(),
|
||||
),
|
||||
},
|
||||
limit: FETCH_LIMIT,
|
||||
pageParam,
|
||||
@ -81,6 +87,21 @@ export function HomeRoute({ colKey }: { colKey: string }) {
|
||||
};
|
||||
}, []);
|
||||
|
||||
if (!storage.interests?.hashtags?.length) {
|
||||
return (
|
||||
<div className="px-3 mt-3">
|
||||
<EmptyFeed subtext="You can more interests to build up your timeline" />
|
||||
<InterestModal
|
||||
queryKey={[colKey]}
|
||||
className="mt-3 w-full inline-flex items-center justify-center rounded-lg h-9 bg-blue-500 hover:bg-blue-600 text-white"
|
||||
>
|
||||
<ForyouIcon className="size-5" />
|
||||
Add interest
|
||||
</InterestModal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full h-full">
|
||||
<VList ref={ref} cache={cache} overscan={2} className="flex-1 px-3">
|
||||
|
@ -33,14 +33,18 @@ export function ForYou({ column }: { column: IColumn }) {
|
||||
title="For You"
|
||||
icon={<ForyouIcon className="size-4" />}
|
||||
/>
|
||||
<Column.Live
|
||||
filter={{
|
||||
kinds: [NDKKind.Text],
|
||||
"#t": storage.interests.hashtags,
|
||||
since: since.current,
|
||||
}}
|
||||
onClick={refresh}
|
||||
/>
|
||||
{storage.interests?.hashtags ? (
|
||||
<Column.Live
|
||||
filter={{
|
||||
kinds: [NDKKind.Text],
|
||||
"#t": storage.interests.hashtags.map((item: string) =>
|
||||
item.replace("#", "").toLowerCase(),
|
||||
),
|
||||
since: since.current,
|
||||
}}
|
||||
onClick={refresh}
|
||||
/>
|
||||
) : null}
|
||||
<Column.Content>
|
||||
<Column.Route path="/" element={<HomeRoute colKey={colKey} />} />
|
||||
<Column.Route path="/events/:id" element={<EventRoute />} />
|
||||
|
@ -1,10 +1,11 @@
|
||||
import { RepostNote, TextNote, useArk } from "@lume/ark";
|
||||
import { ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
|
||||
import { ArrowRightCircleIcon, LoaderIcon, SearchIcon } from "@lume/icons";
|
||||
import { EmptyFeed } from "@lume/ui";
|
||||
import { FETCH_LIMIT } from "@lume/utils";
|
||||
import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
|
||||
import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { useEffect, useMemo, useRef } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { CacheSnapshot, VList, VListHandle } from "virtua";
|
||||
|
||||
export function HomeRoute({ colKey }: { colKey: string }) {
|
||||
@ -30,6 +31,8 @@ export function HomeRoute({ colKey }: { colKey: string }) {
|
||||
signal: AbortSignal;
|
||||
pageParam: number;
|
||||
}) => {
|
||||
if (!ark.account.contacts.length) return [];
|
||||
|
||||
const events = await ark.getInfiniteEvents({
|
||||
filter: {
|
||||
kinds: [NDKKind.Text, NDKKind.Repost],
|
||||
@ -94,6 +97,13 @@ export function HomeRoute({ colKey }: { colKey: string }) {
|
||||
return (
|
||||
<div className="px-3 mt-3">
|
||||
<EmptyFeed />
|
||||
<Link
|
||||
to="/suggest"
|
||||
className="mt-3 w-full inline-flex items-center justify-center rounded-lg h-9 bg-blue-500 hover:bg-blue-600 text-white"
|
||||
>
|
||||
<SearchIcon className="size-5" />
|
||||
Find accounts to follow
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { Column, useArk } from "@lume/ark";
|
||||
import { TimelineIcon } from "@lume/icons";
|
||||
import { IColumn } from "@lume/types";
|
||||
import { EventRoute, UserRoute } from "@lume/ui";
|
||||
import { EventRoute, SuggestRoute, UserRoute } from "@lume/ui";
|
||||
import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { useRef } from "react";
|
||||
@ -32,20 +32,24 @@ export function Timeline({ column }: { column: IColumn }) {
|
||||
title="Timeline"
|
||||
icon={<TimelineIcon className="size-4" />}
|
||||
/>
|
||||
<Column.Live
|
||||
filter={{
|
||||
kinds: [NDKKind.Text, NDKKind.Repost],
|
||||
authors: !ark.account.contacts.length
|
||||
? [ark.account.pubkey]
|
||||
: ark.account.contacts,
|
||||
since: since.current,
|
||||
}}
|
||||
onClick={refresh}
|
||||
/>
|
||||
{ark.account.contacts.length ? (
|
||||
<Column.Live
|
||||
filter={{
|
||||
kinds: [NDKKind.Text, NDKKind.Repost],
|
||||
authors: ark.account.contacts,
|
||||
since: since.current,
|
||||
}}
|
||||
onClick={refresh}
|
||||
/>
|
||||
) : null}
|
||||
<Column.Content>
|
||||
<Column.Route path="/" element={<HomeRoute colKey={colKey} />} />
|
||||
<Column.Route path="/events/:id" element={<EventRoute />} />
|
||||
<Column.Route path="/users/:id" element={<UserRoute />} />
|
||||
<Column.Route
|
||||
path="/suggest"
|
||||
element={<SuggestRoute queryKey={[colKey]} />}
|
||||
/>
|
||||
</Column.Content>
|
||||
</Column.Root>
|
||||
);
|
||||
|
@ -57,6 +57,12 @@ export class LumeStorage {
|
||||
|
||||
public async init() {
|
||||
const settings = await this.getAllSettings();
|
||||
const account = await this.getActiveAccount();
|
||||
|
||||
if (account) {
|
||||
this.currentUser = account;
|
||||
this.interests = await this.getInterests();
|
||||
}
|
||||
|
||||
for (const item of settings) {
|
||||
if (item.value.length > 10) {
|
||||
@ -65,20 +71,6 @@ export class LumeStorage {
|
||||
this.settings[item.key] = !!parseInt(item.value);
|
||||
}
|
||||
}
|
||||
|
||||
const account = await this.getActiveAccount();
|
||||
|
||||
if (account) {
|
||||
this.currentUser = account;
|
||||
|
||||
const interests = await this.getInterests();
|
||||
if (interests) {
|
||||
interests.hashtags = interests.hashtags.map((item: string) =>
|
||||
item.replace("#", "").toLowerCase(),
|
||||
);
|
||||
this.interests = interests;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async #keyring_save(key: string, value: string) {
|
||||
@ -430,7 +422,10 @@ export class LumeStorage {
|
||||
const results: { key: string; value: string }[] = await this.#db.select(
|
||||
"SELECT * FROM settings WHERE key = 'interests' ORDER BY id DESC LIMIT 1;",
|
||||
);
|
||||
|
||||
if (!results.length) return null;
|
||||
if (!results[0].value.length) return null;
|
||||
|
||||
return JSON.parse(results[0].value) as Interests;
|
||||
}
|
||||
|
||||
|
@ -15,7 +15,9 @@ export function EmptyFeed({
|
||||
>
|
||||
<InfoIcon className="size-8 text-blue-500" />
|
||||
<div className="text-center">
|
||||
<p className="font-semibold text-lg">{text ? text : "No events yet"}</p>
|
||||
<p className="font-semibold text-lg">
|
||||
{text ? text : "This feed is empty"}
|
||||
</p>
|
||||
<p className="leading-tight text-sm">
|
||||
{subtext
|
||||
? subtext
|
||||
|
@ -11,5 +11,6 @@ export * from "./replyList";
|
||||
export * from "./emptyFeed";
|
||||
export * from "./routes/event";
|
||||
export * from "./routes/user";
|
||||
export * from "./routes/suggest";
|
||||
export * from "./translateRegisterModal";
|
||||
export * from "./user";
|
||||
|
@ -18,7 +18,7 @@ export function OnboardingFinishScreen() {
|
||||
await queryClient.refetchQueries({ queryKey: ["timeline-9999"] });
|
||||
|
||||
setLoading(false);
|
||||
setOnboarding(false);
|
||||
setOnboarding({ open: false, newUser: false });
|
||||
};
|
||||
|
||||
return (
|
||||
|
183
packages/ui/src/routes/suggest.tsx
Normal file
183
packages/ui/src/routes/suggest.tsx
Normal file
@ -0,0 +1,183 @@
|
||||
import { User, useArk } from "@lume/ark";
|
||||
import {
|
||||
ArrowLeftIcon,
|
||||
ArrowRightIcon,
|
||||
CancelIcon,
|
||||
LoaderIcon,
|
||||
PlusIcon,
|
||||
} from "@lume/icons";
|
||||
import { cn } from "@lume/utils";
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { nip19 } from "nostr-tools";
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
import { WindowVirtualizer } from "virtua";
|
||||
|
||||
const POPULAR_USERS = [
|
||||
"npub180cvv07tjdrrgpa0j7j7tmnyl2yr6yr7l8j4s3evf6u64th6gkwsyjh6w6",
|
||||
"npub1sg6plzptd64u62a878hep2kev88swjh3tw00gjsfl8f237lmu63q0uf63m",
|
||||
"npub1xtscya34g58tk0z605fvr788k263gsu6cy9x0mhnm87echrgufzsevkk5s",
|
||||
"npub1gcxzte5zlkncx26j68ez60fzkvtkm9e0vrwdcvsjakxf9mu9qewqlfnj5z",
|
||||
"npub1az9xj85cmxv8e9j9y80lvqp97crsqdu2fpu3srwthd99qfu9qsgstam8y8",
|
||||
"npub1a2cww4kn9wqte4ry70vyfwqyqvpswksna27rtxd8vty6c74era8sdcw83a",
|
||||
"npub168ghgug469n4r2tuyw05dmqhqv5jcwm7nxytn67afmz8qkc4a4zqsu2dlc",
|
||||
"npub133vj8ycevdle0cq8mtgddq0xtn34kxkwxvak983dx0u5vhqnycyqj6tcza",
|
||||
"npub18ams6ewn5aj2n3wt2qawzglx9mr4nzksxhvrdc4gzrecw7n5tvjqctp424",
|
||||
"npub1r0rs5q2gk0e3dk3nlc7gnu378ec6cnlenqp8a3cjhyzu6f8k5sgs4sq9ac",
|
||||
"npub1prya33fnqerq0fljwjtp77ehtu7jlsjt5ydhwveuwmqdsdm6k8esk42xcv",
|
||||
"npub19mduaf5569jx9xz555jcx3v06mvktvtpu0zgk47n4lcpjsz43zzqhj6vzk",
|
||||
];
|
||||
|
||||
const LUME_USERS = [
|
||||
"npub1zfss807aer0j26mwp2la0ume0jqde3823rmu97ra6sgyyg956e0s6xw445",
|
||||
];
|
||||
|
||||
export function SuggestRoute({ queryKey }: { queryKey: string[] }) {
|
||||
const ark = useArk();
|
||||
const queryClient = useQueryClient();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { isLoading, isError, data } = useQuery({
|
||||
queryKey: ["trending-users"],
|
||||
queryFn: async ({ signal }: { signal: AbortSignal }) => {
|
||||
const res = await fetch("https://api.nostr.band/v0/trending/profiles", {
|
||||
signal,
|
||||
});
|
||||
if (!res.ok) {
|
||||
throw new Error("Failed to fetch trending users from nostr.band API.");
|
||||
}
|
||||
return res.json();
|
||||
},
|
||||
});
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [follows, setFollows] = useState<string[]>([]);
|
||||
|
||||
// toggle follow state
|
||||
const toggleFollow = (pubkey: string) => {
|
||||
const arr = follows.includes(pubkey)
|
||||
? follows.filter((i) => i !== pubkey)
|
||||
: [...follows, pubkey];
|
||||
setFollows(arr);
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
if (!follows.length) return navigate("/");
|
||||
|
||||
const publish = await ark.newContactList({
|
||||
tags: follows.map((item) => {
|
||||
if (item.startsWith("npub1"))
|
||||
return ["p", nip19.decode(item).data as string];
|
||||
return ["p", item];
|
||||
}),
|
||||
});
|
||||
|
||||
if (publish) {
|
||||
await queryClient.refetchQueries({ queryKey: ["timeline-9999"] });
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
|
||||
return navigate("/");
|
||||
} catch (e) {
|
||||
setLoading(false);
|
||||
toast.error(String(e));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="pb-5 overflow-y-auto">
|
||||
<WindowVirtualizer>
|
||||
<div className="h-11 bg-neutral-50 dark:bg-neutral-950 border-b flex items-center justify-start gap-2 px-3 border-neutral-100 dark:border-neutral-900 mb-3">
|
||||
<button
|
||||
type="button"
|
||||
className="size-9 hover:bg-neutral-100 hover:text-blue-500 dark:hover:bg-neutral-900 rounded-lg inline-flex items-center justify-center"
|
||||
onClick={() => navigate(-1)}
|
||||
>
|
||||
<ArrowLeftIcon className="size-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="size-9 hover:bg-neutral-100 hover:text-blue-500 dark:hover:bg-neutral-900 rounded-lg inline-flex items-center justify-center"
|
||||
onClick={() => navigate(1)}
|
||||
>
|
||||
<ArrowRightIcon className="size-5" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="relative px-3">
|
||||
<div className="flex items-center h-16">
|
||||
<h3 className="font-semibold text-xl">Suggested Follows</h3>
|
||||
</div>
|
||||
<div className="flex flex-col divide-y divide-neutral-100 dark:divide-neutral-900">
|
||||
{isLoading ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<LoaderIcon className="size-4 animate-spin" />
|
||||
</div>
|
||||
) : isError ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
Error. Cannot get trending users
|
||||
</div>
|
||||
) : (
|
||||
data?.profiles.map((item: { pubkey: string }) => (
|
||||
<div
|
||||
key={item.pubkey}
|
||||
className="py-5 h-max w-full overflow-hidden"
|
||||
>
|
||||
<User.Provider pubkey={item.pubkey}>
|
||||
<User.Root>
|
||||
<div className="flex h-full w-full flex-col gap-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<User.Avatar className="size-10 shrink-0 rounded-lg" />
|
||||
<User.Name className="max-w-[15rem] truncate font-semibold leadning-tight" />
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleFollow(item.pubkey)}
|
||||
className={cn(
|
||||
"inline-flex h-8 shrink-0 pl-2 pr-2.5 items-center justify-center gap-1 rounded-lg text-sm font-medium",
|
||||
follows.includes(item.pubkey)
|
||||
? "text-red-500 bg-red-100 hover:text-white hover:bg-red-500"
|
||||
: "text-blue-500 bg-blue-100 hover:text-white hover:bg-blue-500",
|
||||
)}
|
||||
>
|
||||
{follows.includes(item.pubkey) ? (
|
||||
<>
|
||||
<CancelIcon className="size-4" />
|
||||
Unfollow
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<PlusIcon className="size-4" />
|
||||
Follow
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<User.About className="break-p text-neutral-800 dark:text-neutral-400 max-w-none select-text whitespace-pre-line" />
|
||||
</div>
|
||||
</User.Root>
|
||||
</User.Provider>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<div className="sticky z-10 flex items-center justify-center w-full bottom-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={submit}
|
||||
disabled={loading}
|
||||
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"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</WindowVirtualizer>
|
||||
</div>
|
||||
);
|
||||
}
|
Loading…
Reference in New Issue
Block a user