cleaning things up and exploring remount problem

packages/desktop/src/components/lines/lineRow.tsx/index.tsx

@@ -35,6 +35,12 @@ export default function LineRow({
   const [selectedLineId, setSelectedLineId] = useRecoilState($selectedLineId);
   const { data: userData } = useGetUserDetails();
 
+  useEffect(() => {
+    console.warn("mounting linerow");
+
+    return () => console.warn("UNMOUNTING line row");
+  }, []);
+
   // take the source of truth list of memeberIds tuned in, and see if I'm in it
   const isUserTunedIn = useMemo(
     () =>
@@ -194,6 +200,7 @@ function StreamRoom({
   // ws listen to events of user disconnecting and such or rely on tunedin members prop
   const { $ws } = useLineDataProvider();
 
+  // todo: get the right constraints based on user settings...audio, video, or none? header selections? make a decision
   useEffect(() => {
     if (userDetails) {
       navigator.mediaDevices
@@ -331,6 +338,11 @@ function StreamRoom({
               });
             }
           );
+
+          $ws.on(
+            `${ServerResponseChannels.SOMEONE_UNTUNED_FROM_LINE}:${lineId}`,
+            (res: SomeoneUntunedFromLineResponse) => {}
+          );
         })
         .catch((error) => {
           console.error(error);
@@ -369,6 +381,9 @@ function StreamRoom({
     console.log("change in tuned in users in the streaming room!!!");
   }, [tunedInUsers]);
 
+  // todo: when user isUserBroadcasting is false, disable localUserStream in this component
+  // and also emit, which should already have been done
+
   // we only loop through peers that are associated to user Ids which exist in the currentBroadcasters array
   return (
     <>

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

@@ -36,7 +36,10 @@ export default function LineDetailsTerminal({
 
   return (
     <>
-      <div className="flex flex-col flex-1 bg-gray-100 items-stretch justify-start relative border-l border-l-gray-100">
+      <div
+        className="flex flex-col flex-1 bg-gray-100 items-stretch justify-start relative 
+      border-l border-l-gray-200"
+      >
         {/* line overview header */}
         <div className="flex flex-row p-3 items-center gap-1">
           {/* <LineIcon sourceImages={selectedLine.profilePictures} />