adding eslint and stuff that miht break other things but will test

packages/web/.eslintrc.json

@@ -1,3 +1,16 @@
 {
-  "extends": "next/core-web-vitals"
+  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "eslint:recommended"
+  ],
+  "rules": {
+    // I suggest you add those two rules:
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-explicit-any": "error",
+    "prefer-const": "error"
+  },
+  "parser": "@typescript-eslint/parser"
 }

packages/web/.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": false,
+  "tabWidth": 2,
+  "useTabs": false
+}

packages/web/.vscode.settings.json

@@ -0,0 +1,5 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}

packages/web/components/UserStatusBubble.tsx

@@ -9,19 +9,19 @@ export default function UserStatusBubble(props: UserStatusPropsInterface) {
   switch (props.status) {
     case UserStatus.online:
       return (
-        <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
+        <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full z-20 border border-white"></span>
       );
     case UserStatus.busy:
       return (
-        <span className="absolute top-0 right-0 w-3 h-3 bg-orange-400 rounded-full"></span>
+        <span className="absolute top-0 right-0 w-3 h-3 bg-orange-400 rounded-full  z-20 border border-white"></span>
       );
     case UserStatus.offline:
       return (
-        <span className="absolute top-0 right-0 w-3 h-3 bg-gray-400 rounded-full"></span>
+        <span className="absolute top-0 right-0 w-3 h-3 bg-gray-400 rounded-full  z-20 border border-white"></span>
       );
     default:
       return (
-        <span className="absolute top-0 right-0 w-3 h-3 bg-gray-400 rounded-full"></span>
+        <span className="absolute top-0 right-0 w-3 h-3 bg-gray-400 rounded-full  z-20 border border-white"></span>
       );
   }
 }

packages/web/package.json

@@ -31,10 +31,13 @@
   },
   "devDependencies": {
     "@types/react": "^17.0.38",
+    "@typescript-eslint/eslint-plugin": "^5.10.1",
     "autoprefixer": "^10.4.2",
     "eslint": "8.4.0",
     "eslint-config-next": "12.0.7",
+    "eslint-config-prettier": "^8.3.0",
     "postcss": "^8.4.5",
+    "prettier": "^2.5.1",
     "tailwindcss": "^3.0.12",
     "typescript": "^4.5.5"
   }

packages/web/pages/me.tsx

@@ -0,0 +1,96 @@
+import { Avatar, Dropdown, Menu } from "antd";
+import { useRouter } from "next/router";
+import { useRef } from "react";
+import { GlobalHotKeys, KeyMap } from "react-hotkeys";
+import { FaLayerGroup, FaSearch, FaUser } from "react-icons/fa";
+import MainLogo from "../components/MainLogo";
+import UserStatusBubble from "../components/UserStatusBubble";
+import { UserStatus } from "../models/user";
+
+export default function Me() {
+  return (
+    <div className="">
+      <Header />
+    </div>
+  );
+}
+
+function Header() {
+  const router = useRouter();
+
+  const UserMenu = (
+    <Menu title="user menu">
+      <Menu.Item
+        key={2}
+        onClick={() => router.push("/teams/profile")}
+        icon={<FaUser />}
+      >
+        <button>Profile</button>
+      </Menu.Item>
+
+      <Menu.Item
+        onClick={() => window.open("/teams", "_self")}
+        key={"team hub"}
+        icon={<FaLayerGroup />}
+      >
+        <button>Team Hub</button>
+      </Menu.Item>
+
+      <Menu.Divider />
+
+      <Menu.Item danger key={3} onClick={() => console.log("sign out")}>
+        <button>Sign Out</button>
+      </Menu.Item>
+    </Menu>
+  );
+
+  const inputRef = useRef<HTMLInputElement>();
+  const selectSearch = () => {
+    inputRef.current.focus();
+  };
+
+  const keyMap: KeyMap = {
+    SELECT_SEARCH: {
+      name: "select search to start searching",
+      sequence: "/",
+      action: "keyup",
+    },
+  };
+  const handlers = {
+    SELECT_SEARCH: selectSearch,
+  };
+
+  return (
+    <div className="flex flex-row justify-start items-center py-5 px-10">
+      <GlobalHotKeys handlers={handlers} keyMap={keyMap} />
+
+      <MainLogo className="text-3xl" />
+
+      {/* search bar */}
+      <div className="mx-auto flex flex-row items-center space-x-2">
+        <FaSearch className="text-lg text-slate-300" />
+        <input
+          placeholder="Type / to search"
+          className="bg-transparent placeholder-slate-300"
+          ref={inputRef}
+        />
+      </div>
+
+      {/* controls & profile section */}
+      <Dropdown
+        overlay={UserMenu}
+        trigger={["click"]}
+        className="ml-2 shrink-0"
+      >
+        <span className="relative flex hover:cursor-pointer">
+          <span className="bg-gray-200 bg-opacity-30 rounded-full shadow-md absolute w-full h-full"></span>
+          <UserStatusBubble status={UserStatus.online} />
+          <Avatar
+            src={"https://avatars.githubusercontent.com/u/19339529?s=40&v=4"}
+            size={"large"}
+          />
+        </span>
+      </Dropdown>
+    </div>
+  );
+}