minor fixes

src/app/channel/components/blacklist.tsx

@@ -10,7 +10,7 @@ export default function ChannelBlackList({ blacklist }: { blacklist: any }) {
       {({ open }) => (
         <>
           <Popover.Button
-            className={`group inline-flex h-8 w-8 items-center justify-center rounded-md ring-2 ring-zinc-950 ${
+            className={`group inline-flex h-8 w-8 items-center justify-center rounded-md ring-2 ring-zinc-950 focus:outline-none ${
               open ? 'bg-zinc-800 hover:bg-zinc-700' : 'bg-zinc-900 hover:bg-zinc-800'
             }`}
           >

src/app/channel/components/createModal.tsx

@@ -10,10 +10,12 @@ import { RelayPool } from 'nostr-relaypool';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { Fragment, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
+import { useSWRConfig } from 'swr';
 import { navigate } from 'vite-plugin-ssr/client/router';
 
 export default function ChannelCreateModal() {
   const { account, isError, isLoading } = useActiveAccount();
+  const { mutate } = useSWRConfig();
 
   const [isOpen, setIsOpen] = useState(false);
   const [image, setImage] = useState(DEFAULT_AVATAR);
@@ -54,13 +56,15 @@ export default function ChannelCreateModal() {
       pool.publish(event, WRITEONLY_RELAYS);
       // insert to database
       createChannel(event.id, event.pubkey, event.content, event.created_at);
+      // update channe llist
+      mutate('channels');
       // reset form
       reset();
       setTimeout(() => {
         // close modal
         setIsOpen(false);
         // redirect to channel page
-        navigate(`/channel?id=${event.id}`);
+        navigate(`/app/channel?id=${event.id}`);
       }, 2000);
     } else {
       console.log('error');
@@ -204,7 +208,7 @@ export default function ChannelCreateModal() {
                       <button
                         type="submit"
                         disabled={!isDirty || !isValid}
-                        className="inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-white active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
+                        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

src/app/channel/components/updateModal.tsx

@@ -35,15 +35,11 @@ export default function ChannelUpdateModal({ id }: { id: string }) {
   } = useForm({
     defaultValues: async () => {
       const channel = await getChannel(id);
-      if (channel) {
-        const metadata = JSON.parse(channel.metadata);
-        // update image state
-        setImage(metadata.picture);
-        // set default values
-        return metadata;
-      } else {
-        return null;
-      }
+      const metadata = JSON.parse(channel.metadata);
+      // update image state
+      setImage(metadata.picture);
+      // set default values
+      return metadata;
     },
   });
 
@@ -70,6 +66,7 @@ export default function ChannelUpdateModal({ id }: { id: string }) {
       reset();
       // close modal
       setIsOpen(false);
+      setLoading(false);
     } else {
       console.log('error');
     }
@@ -84,7 +81,7 @@ export default function ChannelUpdateModal({ id }: { id: string }) {
       <button
         type="button"
         onClick={() => openModal()}
-        className="group inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-900 hover:bg-zinc-800"
+        className="group inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-900 hover:bg-zinc-800 focus:outline-none"
       >
         <EditPencil width={16} height={16} className="text-zinc-400 group-hover:text-zinc-200" />
       </button>
@@ -207,7 +204,7 @@ export default function ChannelUpdateModal({ id }: { id: string }) {
                       <button
                         type="submit"
                         disabled={!isDirty || !isValid}
-                        className="inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-white active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
+                        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
@@ -231,7 +228,7 @@ export default function ChannelUpdateModal({ id }: { id: string }) {
                             ></path>
                           </svg>
                         ) : (
-                          'Create channel'
+                          'Update channel'
                         )}
                       </button>
                     </div>

src/app/channel/pages/index.page.tsx

@@ -47,7 +47,7 @@ export function Page() {
   const hided = arrayObjToPureArr(activeHidedList);
   const muted = arrayObjToPureArr(activeMutedList);
 
-  useSWRSubscription(channelID ? channelID : null, (key: string, {}: any) => {
+  useSWRSubscription(channelID ? ['channel', channelID] : null, ([, key], {}: any) => {
     // subscribe to channel
     const pool = new RelayPool(FULL_RELAYS);
     const unsubscribe = pool.subscribe(
@@ -93,7 +93,7 @@ export function Page() {
           <ChannelMembers />
           <ChannelBlackList blacklist={mutedList} />
           {!isLoading && !isError && account ? (
-            account.pubkey === channelPubkey && <ChannelUpdateModal id={account.id} />
+            account.pubkey === channelPubkey && <ChannelUpdateModal id={channelID} />
           ) : (
             <></>
           )}