From 8b5b4cf053ab9d2d44a459ee006c5c043f898024 Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Mon, 16 May 2022 19:19:27 -0500
Subject: [PATCH] why do messenger style all of a sudden? I need omni search
 that glows up screen in modal

---
 .../src/tree/protected/terminal/Terminal.tsx  |  2 +
 .../tree/protected/terminal/navbar/Navbar.tsx | 68 ++++++++++---------
 .../protected/terminal/panels/SidePanel.tsx   | 45 +++---------
 3 files changed, 47 insertions(+), 68 deletions(-)

diff --git a/packages/desktop/src/tree/protected/terminal/Terminal.tsx b/packages/desktop/src/tree/protected/terminal/Terminal.tsx
index ffe3ee0..a66a09b 100644
--- a/packages/desktop/src/tree/protected/terminal/Terminal.tsx
+++ b/packages/desktop/src/tree/protected/terminal/Terminal.tsx
@@ -16,6 +16,8 @@ export default function Terminal() {
 
   return (
     <div className="flex flex-col flex-1">
+      <NavBar />
+
       <div className="flex flex-row flex-1">
         <SidePanel />
 
diff --git a/packages/desktop/src/tree/protected/terminal/navbar/Navbar.tsx b/packages/desktop/src/tree/protected/terminal/navbar/Navbar.tsx
index 52a33a0..bc8cea1 100644
--- a/packages/desktop/src/tree/protected/terminal/navbar/Navbar.tsx
+++ b/packages/desktop/src/tree/protected/terminal/navbar/Navbar.tsx
@@ -1,8 +1,8 @@
 import { Avatar, Dropdown, Menu } from 'antd';
-import { FiLogOut } from 'react-icons/fi';
+import { FiLogOut, FiSearch } from 'react-icons/fi';
 import React, { useMemo, useRef, useState } from 'react';
 
-import { FaSearch } from 'react-icons/fa';
+import { FaPlus, FaSearch } from 'react-icons/fa';
 import useAuth from '../../../../providers/AuthProvider';
 import useElectron from '../../../../providers/ElectronProvider';
 import useSockets from '../../../../providers/SocketProvider';
@@ -19,7 +19,7 @@ export default function NavBar() {
   const { handleFlowState } = useSockets();
 
   const inputRef = useRef<HTMLInputElement>(null);
-  const [searchInput, setSearchInput] = useState<string>('');
+  const [searchQuery, setSearchQuery] = useState<string>('');
 
   /** hide the search bar in the header so that it's cleaner for these two modes */
   const shouldHideSearch = useMemo(() => {
@@ -32,10 +32,6 @@ export default function NavBar() {
     inputRef.current?.focus();
   };
 
-  const onSearchChange = (e) => {
-    setSearchInput(e.target.value);
-  };
-
   // todo: do I need a mute mode? isn't that just flow state
   // might confuse user overall
   const profileMenu = (
@@ -100,14 +96,46 @@ export default function NavBar() {
   );
 
   return (
-    <div className="flex flex-row items-center bg-gray-100 p-4" id="titlebar">
+    <div
+      className="flex flex-row gap-3 items-center bg-gray-100 border-b border-b-200 p-4"
+      id="titlebar"
+    >
+      <div
+        onKeyDown={() => {
+          //
+        }}
+        onClick={() => {
+          console.log('opening main app');
+        }}
+        role="presentation"
+      >
+        <NoTextLogo type="small" />
+      </div>
+
+      <div className="mx-auto flex flex-row items-center space-x-2 bg-gray-200 p-2 rounded w-[400px]">
+        <FiSearch className="text-xs text-gray-300" />
+        <input
+          placeholder="Search for people, channels, clips..."
+          className="flex-1 bg-transparent placeholder-gray-300 placeholder:text-xs focus:outline-none"
+          onChange={(e) => setSearchQuery(e.target.value)}
+          value={searchQuery}
+        />
+      </div>
+
+      <button
+        onClick={handleFlowState}
+        className="text-gray-300 text-xs p-3 transition-all hover:bg-gray-200"
+      >
+        flow state
+      </button>
+
       <Dropdown overlay={profileMenu}>
         <div className={'cursor-pointer'}>
           {user.picture && (
             <Avatar
               key={`userHeaderProfilePicture`}
               className="shadow-md hover:scale-110 transition-all"
-              size={'default'}
+              size={'large'}
               alt={user.name}
               src={user.picture}
               shape="square"
@@ -116,28 +144,6 @@ export default function NavBar() {
         </div>
       </Dropdown>
 
-      <span className="text-gray-600 font-semibold mx-auto">Channels</span>
-
-      {/* {!shouldHideSearch && (
-        <div className="mx-auto flex flex-row items-center space-x-2">
-          <FaSearch className="text-xs text-gray-300" />
-          <input
-            placeholder="Type / to search"
-            className="bg-transparent placeholder-gray-300 placeholder:text-xs focus:outline-none"
-            ref={inputRef}
-            onChange={onSearchChange}
-            value={searchInput}
-          />
-        </div>
-      )} */}
-
-      <button
-        onClick={handleFlowState}
-        className="text-gray-300 text-xs p-3 transition-all hover:bg-gray-200"
-      >
-        flow
-      </button>
-
       {/* menu for the output options */}
       {/* <Menu
           open={menuOpen}
diff --git a/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx b/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx
index 7f542bf..4453618 100644
--- a/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx
+++ b/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx
@@ -16,8 +16,6 @@ export default function SidePanel() {
   // using merely for loading state...better to add to realtimeroom context?
   const { rooms: initialRoomsFetch } = useRooms();
 
-  const [searchQuery, setSearchQuery] = useState<string>('');
-
   const { roomsMap, handleSelectLine, selectedLineId } = useRealTimeRooms();
 
   const [toggleTunedLines, allLines] = useMemo(() => {
@@ -36,29 +34,8 @@ export default function SidePanel() {
 
   return (
     <div className="flex flex-col w-[400px] relative group shadow-xl bg-white">
-      <NavBar />
-
-      <div className="px-4 flex flex-row items-center gap-2 bg-gray-100">
-        <div className="flex flex-row items-center space-x-2 bg-gray-200 p-2 rounded flex-1">
-          <FiSearch className="text-xs text-gray-300" />
-          <input
-            placeholder="Search for people, channels, clips..."
-            className="flex-1 bg-transparent placeholder-gray-300 placeholder:text-xs focus:outline-none"
-            onChange={(e) => setSearchQuery(e.target.value)}
-            value={searchQuery}
-          />
-        </div>
-
-        <button
-          className="flex flex-row gap-2 items-center justify-evenly 
-      shadow-xl bg-gray-800 p-2 text-white text-xs"
-        >
-          <FaPlus />
-        </button>
-      </div>
-
       {/* tuned in lines block */}
-      <div className="flex flex-col border-b border-b-gray-100 pt-5 bg-gray-100 shadow-xl">
+      <div className="flex flex-col border-b border-b-gray-100 bg-gray-100 shadow-xl">
         {/* tuned in header + general controls */}
 
         <Tooltip placement="right" title={'These are your active rooms...'}>
@@ -72,6 +49,13 @@ export default function SidePanel() {
                 toggleTunedLines?.length || 0
               }/3`}</p>
             </span>
+
+            <button
+              className="ml-auto flex flex-row items-center justify-evenly 
+      shadow-xl bg-gray-800 p-2 text-white text-xs"
+            >
+              <FaPlus />
+            </button>
           </div>
         </Tooltip>
 
@@ -109,19 +93,6 @@ export default function SidePanel() {
           ))
         )}
       </div>
-
-      <div
-        onKeyDown={() => {
-          //
-        }}
-        onClick={() => {
-          console.log('opening main app');
-        }}
-        role="presentation"
-        className="absolute bottom-5 left-5"
-      >
-        <NoTextLogo type="small" />
-      </div>
     </div>
   );
 }