Simplify Add channel dialogue

frontend/app/conversation/layout.tsx

@@ -1,4 +1,3 @@
-import { SearchCardProvider } from "@/components/search-card-provider";
 import Sidebar from "@/components/sidebar";
 import React from "react";
 
@@ -12,10 +11,7 @@ const DashboardLayout = async ({ children }: Props) => {
       <div className="h-full hidden md:w-[280px] md:flex flex-col flex-shrink-0 bg-zinc-900 min-h-[100dvh]">
         <Sidebar />
       </div>
-      <div className="w-full">
-        <SearchCardProvider />
-        {children}
-      </div>
+      <div className="w-full">{children}</div>
     </div>
   );
 };

frontend/components/search-card.tsx → frontend/components/add-channel-button.tsx

@@ -1,22 +1,36 @@
-import { useSearchCard } from "@/hooks/useSearchCard";
 import { useState } from "react";
 import {
   Dialog,
   DialogContent,
   DialogFooter,
   DialogHeader,
   DialogTitle,
+  DialogTrigger,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
+import { Plus } from "lucide-react";
 
 type Props = {};
 
-const SearchCard = (props: Props) => {
-  const searchCard = useSearchCard();
+const AddChannelButton = (props: Props) => {
   const [loading, setLoading] = useState(false);
   return (
     <>
-      <Dialog open={searchCard.isOpen} onOpenChange={searchCard.onClose}>
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button
+            className="flex w-full px-4 py-2 
+          flex-grow overflow-hidden items-center gap-3 h-11 
+          justify-start 
+          text-sm rounded-md border cursor-pointer border-white/20
+          bg-inherit text-inherit
+          hover:text-white hover:bg-white/10
+          transition-colors duration-200"
+          >
+            <Plus className="h-4 w-4" />
+            <div>Add a new channel</div>
+          </Button>
+        </DialogTrigger>
         <DialogContent>
           <DialogHeader>
             <DialogTitle className="flex justify-center items-center flex-col gap-y-4 pb-2">
@@ -36,4 +50,4 @@ const SearchCard = (props: Props) => {
   );
 };
 
-export default SearchCard;
+export default AddChannelButton;

frontend/components/sidebar.tsx

@@ -4,19 +4,19 @@ import { useEffect, useState } from "react";
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
 import Link from "next/link";
-import { Plus, Trash2 } from "lucide-react";
+import { Trash2 } from "lucide-react";
 
 import { ChannelStatusEnum, ChannelType } from "@/lib/types/yt";
 import { YtApiClient } from "@/lib/api/yt";
 import { Button } from "@/components/ui/button";
-import { useSearchCard } from "@/hooks/useSearchCard";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
+import AddChannelButton from "./add-channel-button";
 
 type Props = {};
 
@@ -32,7 +32,6 @@ const Sidebar = (props: Props) => {
       }
     })();
   }, []);
-  const searchCard = useSearchCard();
 
   const handleChannelRemoval = async (channelId: string) => {
     const response = await YtApiClient.removeUserChannel(channelId);
@@ -47,19 +46,7 @@ const Sidebar = (props: Props) => {
   return (
     <div className="flex flex-col h-full w-full">
       <div className="mx-2 my-2">
-        <Button
-          className="flex w-full px-4 py-2 
-          flex-grow overflow-hidden items-center gap-3 h-11 
-          justify-start 
-          text-sm rounded-md border cursor-pointer border-white/20
-          bg-inherit text-inherit
-          hover:text-white hover:bg-white/10
-          transition-colors duration-200"
-          onClick={() => searchCard.onOpen()}
-        >
-          <Plus className="h-4 w-4" />
-          <div>Add a new channel</div>
-        </Button>
+        <AddChannelButton />
       </div>
       <div className="flex-grow overflow-y-auto mx-2 pb-2 space-y-1">
         {channels.map((channel) => (