added create channel to sql and browse channels page

src/components/channels/channelList.tsx

@@ -1,9 +1,23 @@
-import { ChannelModal } from '@components/channels/channelModal';
+import { CreateChannelModal } from '@components/channels/createChannelModal';
+
+import { GlobeIcon } from '@radix-ui/react-icons';
+import Link from 'next/link';
 
 export default function ChannelList() {
   return (
     <div className="flex flex-col gap-px">
-      <ChannelModal />
+      <Link
+        href="/channels"
+        className="group inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-950"
+      >
+        <div className="inline-flex h-5 w-5 shrink items-center justify-center rounded bg-zinc-900">
+          <GlobeIcon className="h-3 w-3 text-zinc-500" />
+        </div>
+        <div>
+          <h5 className="text-sm font-medium text-zinc-500 group-hover:text-zinc-400">Browse channels</h5>
+        </div>
+      </Link>
+      <CreateChannelModal />
     </div>
   );
 }

src/components/channels/createChannelModal.tsx

@@ -5,10 +5,10 @@ import { dateToUnix } from '@utils/getDate';
 import * as Dialog from '@radix-ui/react-dialog';
 import { Cross1Icon, PlusIcon } from '@radix-ui/react-icons';
 import { getEventHash, signEvent } from 'nostr-tools';
-import { useContext, useState } from 'react';
+import { useCallback, useContext, useState } from 'react';
 import { useForm } from 'react-hook-form';
 
-export const ChannelModal = () => {
+export const CreateChannelModal = () => {
   const [pool, relays]: any = useContext(RelayContext);
   const [open, setOpen] = useState(false);
 
@@ -19,6 +19,11 @@ export const ChannelModal = () => {
     formState: { isDirty, isValid },
   } = useForm();
 
+  const insertChannelToDB = useCallback(async (id, data) => {
+    const { createChannel } = await import('@utils/bindings');
+    return await createChannel({ event_id: id, content: data });
+  }, []);
+
   const onSubmit = (data) => {
     const activeAccount = JSON.parse(localStorage.getItem('activeAccount'));
 
@@ -34,6 +39,8 @@ export const ChannelModal = () => {
 
     // publish channel
     pool.publish(event, relays);
+    // save to database
+    insertChannelToDB(event.id, data);
     // close modal
     setOpen(false);
     // reset form