206 lines
7.0 KiB
TypeScript
206 lines
7.0 KiB
TypeScript
import { commands } from "@/commands.gen";
|
|
import { Spinner } from "@/components";
|
|
import { User } from "@/components/user";
|
|
import { Plus, X } from "@phosphor-icons/react";
|
|
import * as ScrollArea from "@radix-ui/react-scroll-area";
|
|
import { createLazyFileRoute } from "@tanstack/react-router";
|
|
import { getCurrentWindow } from "@tauri-apps/api/window";
|
|
import { message } from "@tauri-apps/plugin-dialog";
|
|
import { useState, useTransition } from "react";
|
|
|
|
export const Route = createLazyFileRoute("/set-group")({
|
|
component: Screen,
|
|
});
|
|
|
|
function Screen() {
|
|
const contacts = Route.useLoaderData();
|
|
const { account } = Route.useSearch();
|
|
const { queryClient } = Route.useRouteContext();
|
|
|
|
const [title, setTitle] = useState("");
|
|
const [npub, setNpub] = useState("");
|
|
const [users, setUsers] = useState<string[]>([]);
|
|
const [isPending, startTransition] = useTransition();
|
|
|
|
const toggleUser = (pubkey: string) => {
|
|
setUsers((prev) =>
|
|
prev.includes(pubkey)
|
|
? prev.filter((i) => i !== pubkey)
|
|
: [...prev, pubkey],
|
|
);
|
|
};
|
|
|
|
const addUser = () => {
|
|
if (!npub.startsWith("npub1")) return;
|
|
if (users.includes(npub)) return;
|
|
|
|
setUsers((prev) => [...prev, npub]);
|
|
setNpub("");
|
|
};
|
|
|
|
const submit = () => {
|
|
startTransition(async () => {
|
|
const res = await commands.setGroup(title, null, null, users);
|
|
|
|
if (res.status === "ok") {
|
|
const window = getCurrentWindow();
|
|
|
|
// Invalidate cache
|
|
await queryClient.invalidateQueries({
|
|
queryKey: ["mygroups", account],
|
|
});
|
|
|
|
// Create column in the main window
|
|
await window.emitTo("main", "columns", {
|
|
type: "add",
|
|
column: {
|
|
label: res.data,
|
|
name: title,
|
|
url: `/columns/groups/${res.data}`,
|
|
},
|
|
});
|
|
|
|
// Close current popup
|
|
await window.close();
|
|
} else {
|
|
await message(res.error, { kind: "error" });
|
|
return;
|
|
}
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col size-full">
|
|
<div data-tauri-drag-region className="shrink-0 h-11" />
|
|
<div className="shrink-0 h-14 px-3 flex items-center gap-2 justify-between border-b border-black/5 dark:border-white/5">
|
|
<div className="flex items-center flex-1 rounded-lg h-9 shrink-0 bg-black/10 dark:bg-white/10">
|
|
<label
|
|
htmlFor="name"
|
|
className="w-16 text-sm font-semibold text-center border-r border-neutral-300 dark:border-neutral-700 shrink-0"
|
|
>
|
|
Name
|
|
</label>
|
|
<input
|
|
name="name"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
placeholder="family, bff, devs,..."
|
|
className="h-full px-3 text-sm bg-transparent border-none placeholder:text-neutral-600 focus:border-neutral-500 focus:ring-0 dark:placeholder:text-neutral-400"
|
|
/>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => submit()}
|
|
disabled={isPending || users.length < 1}
|
|
className="shrink-0 inline-flex items-center justify-center text-sm font-medium text-white bg-blue-500 rounded-lg w-20 h-9 hover:bg-blue-600 disabled:opacity-50"
|
|
>
|
|
{isPending ? <Spinner /> : "Create"}
|
|
</button>
|
|
</div>
|
|
<ScrollArea.Root
|
|
type={"scroll"}
|
|
scrollHideDelay={300}
|
|
className="flex-1 overflow-hidden"
|
|
>
|
|
<ScrollArea.Viewport className="bg-white dark:bg-black h-full p-3">
|
|
<div className="mb-3 flex flex-col gap-2">
|
|
<h3 className="text-sm font-semibold">Added</h3>
|
|
<div className="flex gap-2">
|
|
<input
|
|
name="npub"
|
|
value={npub}
|
|
onChange={(e) => setNpub(e.target.value)}
|
|
onKeyDown={(event) => {
|
|
if (event.key === "Enter") addUser();
|
|
}}
|
|
placeholder="npub1..."
|
|
className="w-full px-3 text-sm border-none rounded-lg h-9 bg-neutral-100 dark:bg-neutral-900 placeholder:text-neutral-600 focus:border-neutral-500 focus:ring-0 dark:placeholder:text-neutral-400"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => addUser()}
|
|
className="inline-flex items-center justify-center text-neutral-500 rounded-lg size-9 bg-neutral-200 dark:bg-neutral-800 shrink-0 hover:bg-blue-500 hover:text-white"
|
|
>
|
|
<Plus className="size-5" />
|
|
</button>
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
{users.length ? (
|
|
users.map((item: string) => (
|
|
<button
|
|
key={item}
|
|
type="button"
|
|
onClick={() => toggleUser(item)}
|
|
className="inline-flex items-center justify-between px-3 py-2 bg-white rounded-lg dark:bg-black/20 shadow-primary dark:ring-1 ring-neutral-800/50"
|
|
>
|
|
<User.Provider pubkey={item}>
|
|
<User.Root className="flex items-center gap-2.5">
|
|
<User.Avatar className="rounded-full size-8" />
|
|
<div className="flex items-center gap-1">
|
|
<User.Name className="text-sm font-medium" />
|
|
</div>
|
|
</User.Root>
|
|
</User.Provider>
|
|
<X className="size-4" />
|
|
</button>
|
|
))
|
|
) : (
|
|
<div className="flex items-center justify-center text-sm rounded-lg bg-neutral-100 dark:bg-neutral-900 h-14">
|
|
Please add some user to your group.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
<h3 className="text-sm font-semibold">Contacts</h3>
|
|
<div className="flex flex-col gap-2">
|
|
{contacts.length ? (
|
|
contacts
|
|
.filter((c) => !users.includes(c))
|
|
.map((item: string) => (
|
|
<button
|
|
key={item}
|
|
type="button"
|
|
onClick={() => toggleUser(item)}
|
|
className="inline-flex items-center justify-between px-3 py-2 rounded-lg border-[.5px] border-neutral-300 dark:border-neutral-700 hover:border-blue-500"
|
|
>
|
|
<User.Provider pubkey={item}>
|
|
<User.Root className="flex items-center gap-2.5">
|
|
<User.Avatar className="rounded-full size-8" />
|
|
<div className="flex items-center gap-1">
|
|
<User.Name className="text-sm font-medium" />
|
|
</div>
|
|
</User.Root>
|
|
</User.Provider>
|
|
</button>
|
|
))
|
|
) : (
|
|
<div className="flex items-center justify-center text-sm rounded-lg bg-black/5 dark:bg-white/5 h-14">
|
|
<p>
|
|
Find more user at{" "}
|
|
<a
|
|
href="https://www.nostr.directory/"
|
|
target="_blank"
|
|
className="text-blue-600 after:content-['_↗']"
|
|
rel="noreferrer"
|
|
>
|
|
Nostr Directory
|
|
</a>
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</ScrollArea.Viewport>
|
|
<ScrollArea.Scrollbar
|
|
className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
|
|
orientation="vertical"
|
|
>
|
|
<ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
|
|
</ScrollArea.Scrollbar>
|
|
<ScrollArea.Corner className="bg-transparent" />
|
|
</ScrollArea.Root>
|
|
</div>
|
|
);
|
|
}
|