add create block

src/app/space/components/create.tsx

@@ -1,12 +1,25 @@
 import { Dialog, Transition } from "@headlessui/react";
 import CancelIcon from "@icons/cancel";
 import PlusIcon from "@icons/plus";
+import { useActiveAccount } from "@utils/hooks/useActiveAccount";
+import { createBlock } from "@utils/storage";
 import { Fragment, useState } from "react";
+import { useForm } from "react-hook-form";
 
 export function CreateBlockModal() {
+	const {
+		register,
+		handleSubmit,
+		reset,
+		setValue,
+		formState: { isDirty, isValid },
+	} = useForm();
+
 	const [isOpen, setIsOpen] = useState(false);
 	const [loading, setLoading] = useState(false);
 
+	const { account } = useActiveAccount();
+
 	const closeModal = () => {
 		setIsOpen(false);
 	};
@@ -15,12 +28,25 @@ export function CreateBlockModal() {
 		setIsOpen(true);
 	};
 
+	const onSubmit = (data: any) => {
+		setLoading(true);
+
+		createBlock(account.id, data.kind, data.title, data.content).then(() => {
+			// reset form
+			reset();
+			// close modal
+			setIsOpen(false);
+			// stop loading
+			setLoading(false);
+		});
+	};
+
 	return (
 		<>
 			<button
 				type="button"
 				onClick={() => openModal()}
-				className="group inline-flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:bg-zinc-900"
+				className="group inline-flex flex-col items-center gap-2.5 p-4 rounded-md hover:bg-zinc-900"
 			>
 				<div className="inline-flex h-5 w-5 shrink items-center justify-center rounded bg-zinc-900 group-hover:bg-zinc-800">
 					<PlusIcon width={12} height={12} className="text-zinc-500" />
@@ -77,12 +103,94 @@ export function CreateBlockModal() {
 											</button>
 										</div>
 										<Dialog.Description className="leading-tight text-zinc-300">
-											Channels are freedom square, everyone can speech freely,
+											Personalize your space by adding a new block.
-											no one can stop you or deceive what to speech
 										</Dialog.Description>
 									</div>
 								</div>
-								<div className="flex h-full w-full flex-col overflow-y-auto px-5 pb-5 pt-3" />
+								<div className="flex h-full w-full flex-col overflow-y-auto px-5 pb-5 pt-3">
+									<form
+										onSubmit={handleSubmit(onSubmit)}
+										className="flex h-full w-full flex-col gap-4"
+									>
+										<div className="flex flex-col gap-1">
+											<label className="text-base font-semibold uppercase tracking-wider text-zinc-400">
+												Type *
+											</label>
+											<div className="relative w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
+												<input
+													type={"text"}
+													{...register("kind", {
+														required: true,
+													})}
+													spellCheck={false}
+													className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
+												/>
+											</div>
+										</div>
+										<div className="flex flex-col gap-1">
+											<label className="text-base font-semibold uppercase tracking-wider text-zinc-400">
+												Block Title *
+											</label>
+											<div className="relative w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
+												<input
+													type={"text"}
+													{...register("title", {
+														required: true,
+														minLength: 4,
+													})}
+													spellCheck={false}
+													className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
+												/>
+											</div>
+										</div>
+										<div className="flex flex-col gap-1">
+											<label className="text-base font-semibold uppercase tracking-wider text-zinc-400">
+												Content *
+											</label>
+											<div className="relative h-20 w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
+												<textarea
+													{...register("content", {
+														required: true,
+													})}
+													spellCheck={false}
+													className="relative h-20 w-full resize-none rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
+												/>
+											</div>
+										</div>
+										<div>
+											<button
+												type="submit"
+												className="inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-white shadow-button active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
+											>
+												{loading ? (
+													<svg
+														className="h-4 w-4 animate-spin text-black dark:text-white"
+														xmlns="http://www.w3.org/2000/svg"
+														fill="none"
+														viewBox="0 0 24 24"
+													>
+														<title id="loading">Loading</title>
+														<circle
+															className="opacity-25"
+															cx="12"
+															cy="12"
+															r="10"
+															stroke="currentColor"
+															strokeWidth="4"
+														/>
+														<path
+															className="opacity-75"
+															fill="currentColor"
+															d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+														/>
+													</svg>
+												) : (
+													"Create block"
+												)}
+											</button>
+										</div>
+									</form>
+								</div>
 							</Dialog.Panel>
 						</Transition.Child>
 					</div>

src/stores/constants.tsx

@@ -12,14 +12,12 @@ export const METADATA_SERVICE = "https://rbr.bio";
 export const READONLY_RELAYS = [
 	"wss://welcome.nostr.wine",
 	"wss://relay.nostr.band/all",
-	"wss://relay.damus.io",
 ];
 
 // write-only relay list
 export const WRITEONLY_RELAYS = [
 	"wss://nostr.mutinywallet.com",
 	"wss://relay.nostr.band",
-	"wss://relay.damus.io",
 ];
 
 // full-relay list
@@ -27,5 +25,4 @@ export const FULL_RELAYS = [
 	"wss://welcome.nostr.wine",
 	"wss://relay.nostr.band/all",
 	"wss://nostr.mutinywallet.com",
-	"wss://relay.damus.io",
 ];

src/utils/storage.tsx

@@ -328,3 +328,17 @@ export async function getBlocks(account_id: number) {
 		`SELECT * FROM blocks WHERE account_id <= "${account_id}";`,
 	);
 }
+
+// create block
+export async function createBlock(
+	account_id: number,
+	kind: number,
+	title: string,
+	content: any,
+) {
+	const db = await connect();
+	return await db.execute(
+		"INSERT OR IGNORE INTO blocks (account_id, kind, title, content) VALUES (?, ?, ?, ?);",
+		[account_id, kind, title, content],
+	);
+}