limiting client side toggle tuning although not scalable with more lines

packages/desktop/src/pages/nirvanaApp.tsx

@@ -46,7 +46,16 @@ function NirvanaApp() {
           <ReactQueryDevtools initialIsOpen={true} position={"bottom-left"} />
         </RecoilRoot>
 
-        <Toaster />
+        <Toaster
+          position={"bottom-center"}
+          toastOptions={{
+            style: {
+              borderRadius: "10px",
+              background: "#333",
+              color: "#fff",
+            },
+          }}
+        />
       </QueryClientProvider>
     </>
   );

packages/desktop/src/pages/terminal/details/index.tsx

@@ -13,10 +13,11 @@ import { useRecoilState } from "recoil";
 
 export default function LineDetailsTerminal({
   selectedLine,
+  handleToggleTuneToLine,
 }: {
   selectedLine?: MasterLineData;
+  handleToggleTuneToLine: (lineId: string, turnToggleOn: boolean) => void;
 }) {
-  const { handleTuneToLine } = useLineDataProvider();
   const { data: userDetails } = useGetUserDetails();
 
   console.log("selected line", selectedLine);
@@ -75,11 +76,11 @@ export default function LineDetailsTerminal({
           }`}
                   onClick={() =>
                     isUserToggleTuned
-                      ? handleTuneToLine(
+                      ? handleToggleTuneToLine(
                           selectedLine.lineDetails._id.toString(),
                           false
                         )
-                      : handleTuneToLine(
+                      : handleToggleTuneToLine(
                           selectedLine.lineDetails._id.toString(),
                           true
                         )

packages/desktop/src/pages/terminal/index.tsx

@@ -13,6 +13,7 @@ import { LineMemberState } from "@nirvana/core/models/line.model";
 import LineRow from "../../components/lines/lineRow.tsx/index";
 import MasterLineData from "@nirvana/core/models/masterLineData.model";
 import NewLineModal from "./newLine";
+import toast from "react-hot-toast";
 import { useLineDataProvider } from "../../controller/lineDataProvider";
 
 export default function NirvanaTerminal() {
@@ -116,6 +117,19 @@ export default function NirvanaTerminal() {
     [setSelectedLineId, selectedLine]
   );
 
+  const handleToggleTuneToLine = useCallback(
+    (lineId: string, turnToggleOn: boolean) => {
+      if (toggleTunedLines?.length >= 3) {
+        toast.error("You cannot toggle more than 3 lines!");
+
+        return;
+      }
+
+      handleTuneToLine(lineId, turnToggleOn);
+    },
+    [toggleTunedLines, handleTuneToLine]
+  );
+
   const handleStartBroadcast = useCallback(
     (lineId: string) => () => {
       console.log(`starting broadcast for ${lineId}!!!`);
@@ -238,7 +252,10 @@ export default function NirvanaTerminal() {
           </div>
         </div>
 
-        <LineDetailsTerminal selectedLine={selectedLine} />
+        <LineDetailsTerminal
+          handleToggleTuneToLine={handleToggleTuneToLine}
+          selectedLine={selectedLine}
+        />
       </div>
     </>
   );