added join channel function

src-tauri/src/main.rs

@@ -111,6 +111,12 @@ struct GetActiveChannelData {
   active: bool,
 }
 
+#[derive(Deserialize, Type)]
+struct UpdateChannelData {
+  event_id: String,
+  active: bool,
+}
+
 #[tauri::command]
 #[specta::specta]
 async fn get_accounts(db: DbState<'_>) -> Result<Vec<account::Data>, ()> {
@@ -264,6 +270,19 @@ async fn create_channel(db: DbState<'_>, data: CreateChannelData) -> Result<chan
     .map_err(|_| ())
 }
 
+#[tauri::command]
+#[specta::specta]
+async fn update_channel(db: DbState<'_>, data: UpdateChannelData) -> Result<channel::Data, ()> {
+  db.channel()
+    .update(
+      channel::event_id::equals(data.event_id), // Unique filter
+      vec![channel::active::set(data.active)],  // Vec of updates
+    )
+    .exec()
+    .await
+    .map_err(|_| ())
+}
+
 #[tauri::command]
 #[specta::specta]
 async fn get_channels(db: DbState<'_>, data: GetChannelData) -> Result<Vec<channel::Data>, ()> {
@@ -335,6 +354,7 @@ async fn main() {
       get_latest_notes,
       get_note_by_id,
       create_channel,
+      update_channel,
       get_channels,
       get_active_channels,
       create_chat,
@@ -382,6 +402,7 @@ async fn main() {
       get_note_by_id,
       count_total_notes,
       create_channel,
+      update_channel,
       get_channels,
       get_active_channels,
       create_chat,

src/components/channels/browseChannelItem.tsx

@@ -3,20 +3,37 @@ import { ImageWithFallback } from '@components/imageWithFallback';
 import { DEFAULT_AVATAR } from '@stores/constants';
 
 import { useRouter } from 'next/router';
+import { useCallback } from 'react';
 
 export const BrowseChannelItem = ({ data }: { data: any }) => {
   const router = useRouter();
   const channel = JSON.parse(data.content);
 
-  const openChannel = (id) => {
-    router.push({
-      pathname: '/channels/[id]',
-      query: { id: id },
-    });
-  };
+  const openChannel = useCallback(
+    (id: string) => {
+      router.push({
+        pathname: '/channels/[id]',
+        query: { id: id },
+      });
+    },
+    [router]
+  );
+
+  const joinChannel = useCallback(
+    async (id: string) => {
+      const { updateChannel } = await import('@utils/bindings');
+      updateChannel({ event_id: id, active: true })
+        .then(() => openChannel(id))
+        .catch(console.error);
+    },
+    [openChannel]
+  );
 
   return (
-    <div onClick={() => openChannel(data.eventId)} className="flex items-center gap-2 px-3 py-2 hover:bg-zinc-950">
+    <div
+      onClick={() => openChannel(data.eventId)}
+      className="group relative flex items-center gap-2 border-b border-zinc-800 px-3 py-2.5 hover:bg-black/20"
+    >
       <div className="relative h-11 w-11 shrink overflow-hidden rounded-md border border-white/10">
         <ImageWithFallback
           src={channel.picture || DEFAULT_AVATAR}
@@ -29,6 +46,14 @@ export const BrowseChannelItem = ({ data }: { data: any }) => {
         <span className="truncate font-medium leading-tight text-zinc-200">{channel.name}</span>
         <span className="text-sm leading-tight text-zinc-400">{channel.about}</span>
       </div>
+      <div className="absolute right-2 top-1/2 hidden -translate-y-1/2 transform group-hover:inline-flex">
+        <button
+          onClick={() => joinChannel(data.eventId)}
+          className="inline-flex h-8 w-16 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-sm font-medium shadow-button hover:bg-fuchsia-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          Join
+        </button>
+      </div>
     </div>
   );
 };

src/components/channels/channelList.tsx

@@ -1,9 +1,24 @@
+import { ChannelListItem } from '@components/channels/channelListItem';
 import { CreateChannelModal } from '@components/channels/createChannelModal';
 
 import { GlobeIcon } from '@radix-ui/react-icons';
 import Link from 'next/link';
+import { useEffect, useState } from 'react';
 
 export default function ChannelList() {
+  const [list, setList] = useState([]);
+
+  useEffect(() => {
+    const fetchChannels = async () => {
+      const { getActiveChannels } = await import('@utils/bindings');
+      return await getActiveChannels({ active: true });
+    };
+
+    fetchChannels()
+      .then((res) => setList(res))
+      .catch(console.error);
+  }, []);
+
   return (
     <div className="flex flex-col gap-px">
       <Link
@@ -17,6 +32,9 @@ export default function ChannelList() {
           <h5 className="text-sm font-medium text-zinc-500 group-hover:text-zinc-400">Browse channels</h5>
         </div>
       </Link>
+      {list.map((item) => (
+        <ChannelListItem key={item.id} data={item} />
+      ))}
       <CreateChannelModal />
     </div>
   );

src/components/channels/channelListItem.tsx

@@ -0,0 +1,36 @@
+import { ImageWithFallback } from '@components/imageWithFallback';
+
+import { DEFAULT_AVATAR } from '@stores/constants';
+
+import { useRouter } from 'next/router';
+
+export const ChannelListItem = ({ data }: { data: any }) => {
+  const router = useRouter();
+  const channel = JSON.parse(data.content);
+
+  const openChannel = (id: string) => {
+    router.push({
+      pathname: '/channels/[id]',
+      query: { id: id },
+    });
+  };
+
+  return (
+    <div
+      onClick={() => openChannel(data.eventId)}
+      className="inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900"
+    >
+      <div className="relative h-5 w-5 shrink-0 overflow-hidden rounded">
+        <ImageWithFallback
+          src={channel?.picture || DEFAULT_AVATAR}
+          alt={data.eventId}
+          fill={true}
+          className="rounded object-cover"
+        />
+      </div>
+      <div>
+        <h5 className="truncate text-sm font-medium text-zinc-400">{channel.name}</h5>
+      </div>
+    </div>
+  );
+};

src/utils/bindings.ts

@@ -48,6 +48,10 @@ export function createChannel(data: CreateChannelData) {
   return invoke<Channel>('create_channel', { data });
 }
 
+export function updateChannel(data: UpdateChannelData) {
+  return invoke<Channel>('update_channel', { data });
+}
+
 export function getChannels(data: GetChannelData) {
   return invoke<Channel[]>('get_channels', { data });
 }
@@ -96,6 +100,7 @@ export type GetChatData = { account_id: number };
 export type GetChannelData = { limit: number; offset: number };
 export type CreateChannelData = { event_id: string; content: string; account_id: number };
 export type GetPlebPubkeyData = { pubkey: string };
+export type UpdateChannelData = { event_id: string; active: boolean };
 export type GetActiveChannelData = { active: boolean };
 export type GetPlebData = { account_id: number };
 export type CreateAccountData = { pubkey: string; privkey: string; metadata: string };