adding things with tailwind nicer!!

packages/desktop/src/components/Button/IconButton/index.tsx

@@ -0,0 +1,7 @@
+export default function IconButton({ children }) {
+  return (
+    <button className="bg-gray-800 shadow-md h-7 w-7 text-white text-xs flex items-center justify-center">
+      {children}
+    </button>
+  );
+}

packages/desktop/src/components/Logo/index.tsx

@@ -4,14 +4,14 @@ export default function Logo({
   className,
   type,
 }: {
-  className: string;
+  className?: string;
   type?: LogoType;
 }) {
   if (type === "small") {
     return (
       <svg
-        width="85"
+        width="25"
-        height="107"
+        height="31.75"
         viewBox="0 0 85 107"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"

packages/desktop/src/components/header/index.tsx

@@ -7,10 +7,12 @@ import {
   MenuItem,
   MenuList,
 } from "@mui/material";
+import { GlobalHotKeys, KeyMap } from "react-hotkeys";
 import { HeadsetMicSharp, VideocamSharp } from "@mui/icons-material";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { $selectedOutputMode } from "../../controller/recoil";
+import { FaSearch } from "react-icons/fa";
 import Logo from "../Logo";
 import { useGetUserDetails } from "../../controller/index";
 import { useRecoilState } from "recoil";
@@ -18,6 +20,9 @@ import { useRecoilState } from "recoil";
 export default function NirvanaHeader() {
   const { data: userDetailsRes, isLoading } = useGetUserDetails();
 
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [searchInput, setSearchInput] = useState<string>("");
+
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [outputMode, setOutputMode] = useRecoilState($selectedOutputMode);
 
@@ -48,57 +53,90 @@ export default function NirvanaHeader() {
     setAnchorEl(null);
   }, []);
 
+  const selectSearch = () => {
+    inputRef.current?.focus();
+  };
+
+  const onSearchChange = (e) => {
+    setSearchInput(e.target.value);
+  };
+
+  const keyMap: KeyMap = {
+    SELECT_SEARCH: {
+      name: "select search to start searching",
+      sequence: "/",
+      action: "keyup",
+    },
+  };
+  const handlers = {
+    SELECT_SEARCH: selectSearch,
+  };
+
   if (isLoading) return <>loading</>;
 
   return (
-    <div className="flex flex-row items-center h-12 bg-gray-100">
+    <>
-      <Logo type="small" className="scale-[0.2]" />
+      <GlobalHotKeys handlers={handlers} keyMap={keyMap} />
 
-      <div className="ml-auto">
+      <div className="flex flex-row items-center h-12 bg-gray-100 pl-2">
-        <Button color="info" size="small">
+        <Logo type="small" />
-          flow state
-        </Button>
-      </div>
 
-      <div onClick={handleOpenMenu} className={"cursor-pointer ml-2"}>
+        <div className="mx-auto flex flex-row items-center space-x-2">
-        {outputMode === "video" && (
+          <FaSearch className="text-sm text-gray-300" />
-          <video height={"50px"} width={"50px"} muted autoPlay />
+          <input
-        )}
+            placeholder="Type / to search"
-
+            className="bg-transparent placeholder-gray-300 focus:outline-none"
-        {userDetailsRes?.user?.picture && outputMode === "audio" && (
+            ref={inputRef}
-          <Avatar
+            onChange={onSearchChange}
-            className="mr-1"
+            value={searchInput}
-            alt={userDetailsRes?.user?.givenName}
-            src={userDetailsRes?.user?.picture}
-            variant="square"
           />
-        )}
+        </div>
+
+        {/* todo: move this ghost button to components */}
+        <button className="text-gray-300 text-xs px-2 py-1 transition-all hover:bg-gray-200">
+          flow state
+        </button>
+
+        <div onClick={handleOpenMenu} className={"cursor-pointer ml-2"}>
+          {outputMode === "video" && (
+            <video height={"50px"} width={"50px"} muted autoPlay />
+          )}
+
+          {userDetailsRes?.user?.picture && outputMode === "audio" && (
+            <Avatar
+              className="mr-1"
+              alt={userDetailsRes?.user?.givenName}
+              src={userDetailsRes?.user?.picture}
+              variant="square"
+            />
+          )}
+        </div>
+
+        {/* menu for the output options */}
+        <Menu
+          open={menuOpen}
+          id="user-output-selection-menu"
+          anchorEl={anchorEl}
+          onClose={handleCloseMenu}
+          MenuListProps={{
+            "aria-labelledby": "basic-button",
+          }}
+        >
+          <MenuItem onClick={() => setOutputMode("audio")}>
+            <ListItemIcon>
+              <HeadsetMicSharp fontSize="small" />
+            </ListItemIcon>
+            <ListItemText>Audio Only</ListItemText>
+          </MenuItem>
+
+          <MenuItem onClick={() => setOutputMode("video")}>
+            <ListItemIcon>
+              <VideocamSharp fontSize="small" />
+            </ListItemIcon>
+            <ListItemText>Video</ListItemText>
+          </MenuItem>
+        </Menu>
       </div>
-
+    </>
-      {/* menu for the output options */}
-      <Menu
-        open={menuOpen}
-        id="user-output-selection-menu"
-        anchorEl={anchorEl}
-        onClose={handleCloseMenu}
-        MenuListProps={{
-          "aria-labelledby": "basic-button",
-        }}
-      >
-        <MenuItem onClick={() => setOutputMode("audio")}>
-          <ListItemIcon>
-            <HeadsetMicSharp fontSize="small" />
-          </ListItemIcon>
-          <ListItemText>Audio Only</ListItemText>
-        </MenuItem>
-
-        <MenuItem onClick={() => setOutputMode("video")}>
-          <ListItemIcon>
-            <VideocamSharp fontSize="small" />
-          </ListItemIcon>
-          <ListItemText>Video</ListItemText>
-        </MenuItem>
-      </Menu>
-    </div>
   );
 }

packages/desktop/src/pages/nirvanaApp.tsx

@@ -39,6 +39,16 @@ const theme = createTheme({
         },
       },
     },
+    MuiFab: {
+      styleOverrides: {
+        root: {
+          borderRadius: 0,
+        },
+      },
+    },
+  },
+  shape: {
+    borderRadius: 0,
   },
 });
 

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

@@ -1,3 +1,9 @@
+import { AddSharp, SearchSharp } from "@mui/icons-material";
+import { Button, Fab, InputAdornment, TextField } from "@mui/material";
+import { FaPlus, FaSearch } from "react-icons/fa";
+import { useRef, useState } from "react";
+
+import IconButton from "../../components/Button/IconButton/index";
 import NirvanaHeader from "../../components/header";
 
 export default function NirvanaTerminal() {
@@ -5,7 +11,11 @@ export default function NirvanaTerminal() {
     <div className="flex flex-col flex-1">
       <NirvanaHeader />
 
-      <div className="flex flex-row m-2 gap-2"></div>
+      <div className="flex flex-row items-stretch m-2 gap-2">
+        <IconButton>
+          <FaPlus />
+        </IconButton>
+      </div>
     </div>
   );
 }

packages/desktop/src/styles/index.css

@@ -8,3 +8,7 @@
 @tailwind utilities;
 
 @import "~antd/dist/antd.css";
+
+button {
+  @apply transition-all;
+}