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

src/pages/channels/index.tsx

@@ -0,0 +1,24 @@
+import BaseLayout from '@layouts/base';
+import WithSidebarLayout from '@layouts/withSidebar';
+
+import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
+
+export default function Page() {
+  return <></>;
+}
+
+Page.getLayout = function getLayout(
+  page:
+    | string
+    | number
+    | boolean
+    | ReactElement<unknown, string | JSXElementConstructor<unknown>>
+    | ReactFragment
+    | ReactPortal
+) {
+  return (
+    <BaseLayout>
+      <WithSidebarLayout>{page}</WithSidebarLayout>
+    </BaseLayout>
+  );
+};

src/utils/bindings.ts

@@ -44,6 +44,10 @@ export function getNoteById(data: GetNoteByIdData) {
   return invoke<Note | null>('get_note_by_id', { data });
 }
 
+export function createChannel(data: CreateChannelData) {
+  return invoke<Channel>('create_channel', { data });
+}
+
 export type CreateNoteData = {
   event_id: string;
   pubkey: string;
@@ -55,6 +59,7 @@ export type CreateNoteData = {
   created_at: number;
   account_id: number;
 };
+export type CreateChannelData = { event_id: string; content: string };
 export type CreatePlebData = { pleb_id: string; pubkey: string; kind: number; metadata: string; account_id: number };
 export type GetNoteByIdData = { event_id: string };
 export type Pleb = { id: number; plebId: string; pubkey: string; kind: number; metadata: string; accountId: number };
@@ -71,6 +76,7 @@ export type Note = {
   accountId: number;
 };
 export type Account = { id: number; pubkey: string; privkey: string; active: boolean; metadata: string };
+export type Channel = { id: number; eventId: string; content: string };
 export type GetPlebPubkeyData = { pubkey: string };
 export type GetPlebData = { account_id: number };
 export type CreateAccountData = { pubkey: string; privkey: string; metadata: string };