From 2a1832122582303d7aae8b0f71e3e9bf49cf6be3 Mon Sep 17 00:00:00 2001
From: karamvir <karamvir.singh98@gmail.com>
Date: Sat, 9 Sep 2023 04:14:28 -0700
Subject: [PATCH] redesign header slight

---
 frontend-v2/src/components/config/util.tsx |  2 +-
 frontend-v2/src/components/layouts.tsx     | 56 +++----------
 frontend-v2/src/components/util.tsx        | 96 +++++++++++++++++++++-
 frontend-v2/src/lib/socket.tsx             |  8 +-
 4 files changed, 111 insertions(+), 51 deletions(-)

diff --git a/frontend-v2/src/components/config/util.tsx b/frontend-v2/src/components/config/util.tsx
index ab8618914..b0ba45e18 100644
--- a/frontend-v2/src/components/config/util.tsx
+++ b/frontend-v2/src/components/config/util.tsx
@@ -156,7 +156,7 @@ export const ResourceSelector = ({
 }) => {
   const resources = useRead(`List${type}s`, {}).data;
   return (
-    <Select value={selected || undefined} onValueChange={onSelect}>
+    <Select value={selected ?? undefined} onValueChange={onSelect}>
       <SelectTrigger className="w-full lg:w-[300px]">
         <SelectValue placeholder={`Select ${type}`} />
       </SelectTrigger>
diff --git a/frontend-v2/src/components/layouts.tsx b/frontend-v2/src/components/layouts.tsx
index f70b909d4..32e29e5f8 100644
--- a/frontend-v2/src/components/layouts.tsx
+++ b/frontend-v2/src/components/layouts.tsx
@@ -1,15 +1,7 @@
 import { useResourceParamType } from "@lib/hooks";
-import { RESOURCE_TARGETS } from "@lib/utils";
 import { Button } from "@ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@ui/dropdown-menu";
 import { ThemeToggle } from "@ui/theme";
-import { ChevronDown, LogOut, PlusCircle } from "lucide-react";
+import { PlusCircle } from "lucide-react";
 import { ReactNode, useState } from "react";
 import { Link, Outlet } from "react-router-dom";
 import { Omnibar } from "./omnibar";
@@ -32,51 +24,27 @@ import {
   CardDescription,
   CardContent,
 } from "@ui/card";
+import { Logout, ResourceTypeDropdown, ResourcesDropdown } from "./util";
 
 export const Layout = () => {
   const type = useResourceParamType();
   return (
     <>
       <div className="fixed top-0 border-b bg-background z-50 w-full">
-        <div className="container flex items-center justify-between py-4">
-          <Link to={"/"} className="text-xl">
-            Monitor
+        <div className="container flex items-center justify-between py-4 gap-8">
+          <Link to={"/"} className="text-2xl tracking-widest">
+            MONITOR
           </Link>
-          <div className="flex gap-4">
-            <Omnibar />
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline" className="w-48 justify-between">
-                  {type ? type + "s" : "Dashboard"}
-                  <ChevronDown className="w-4 h-4" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent className="w-48" side="bottom">
-                <DropdownMenuGroup>
-                  <Link to="/">
-                    <DropdownMenuItem>Dashboard</DropdownMenuItem>
-                  </Link>
-                  {RESOURCE_TARGETS.map((rt) => (
-                    <Link key={rt} to={`/${rt.toLowerCase()}s`}>
-                      <DropdownMenuItem>{rt}s</DropdownMenuItem>
-                    </Link>
-                  ))}
-                </DropdownMenuGroup>
-              </DropdownMenuContent>
-            </DropdownMenu>
+          <div className="flex items-center justify-between w-full">
+            <div className="hidden md:flex md:gap-4">
+              <ResourceTypeDropdown />
+              {type && <ResourcesDropdown />}
+            </div>
             <div className="flex">
+              <Omnibar />
               <WsStatusIndicator />
               <ThemeToggle />
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => {
-                  localStorage.removeItem("monitor-auth-token");
-                  window.location.reload();
-                }}
-              >
-                <LogOut className="w-4 h-4" />
-              </Button>
+              <Logout />
             </div>
           </div>
         </div>
diff --git a/frontend-v2/src/components/util.tsx b/frontend-v2/src/components/util.tsx
index 7313261ef..eb47c3933 100644
--- a/frontend-v2/src/components/util.tsx
+++ b/frontend-v2/src/components/util.tsx
@@ -1,6 +1,14 @@
 import { ReactNode, forwardRef, useEffect, useState } from "react";
 import { Button } from "../ui/button";
-import { Check, Copy, Loader2, Moon, SunMedium } from "lucide-react";
+import {
+  Check,
+  ChevronDown,
+  Copy,
+  Loader2,
+  LogOut,
+  Moon,
+  SunMedium,
+} from "lucide-react";
 import { Input } from "../ui/input";
 import {
   Dialog,
@@ -12,9 +20,21 @@ import {
 } from "@ui/dialog";
 // import { useNavigate } from "react-router-dom";
 import { toast } from "@ui/use-toast";
-import { cn } from "@lib/utils";
-import { useInvalidate, useWrite } from "@lib/hooks";
-import { useNavigate } from "react-router-dom";
+import { RESOURCE_TARGETS, cn } from "@lib/utils";
+import {
+  useInvalidate,
+  useRead,
+  useResourceParamType,
+  useWrite,
+} from "@lib/hooks";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@ui/dropdown-menu";
 
 export const WithLoading = ({
   children,
@@ -254,3 +274,71 @@ export const ConfirmButton = ({
     </>
   );
 };
+
+export const ResourceTypeDropdown = () => {
+  const type = useResourceParamType();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className="w-48 justify-between">
+          {type ? type + "s" : "Dashboard"}
+          <ChevronDown className="w-4 h-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-48" side="bottom">
+        <DropdownMenuGroup>
+          <Link to="/">
+            <DropdownMenuItem>Dashboard</DropdownMenuItem>
+          </Link>
+          {RESOURCE_TARGETS.map((rt) => (
+            <Link key={rt} to={`/${rt.toLowerCase()}s`}>
+              <DropdownMenuItem>{rt}s</DropdownMenuItem>
+            </Link>
+          ))}
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export const ResourcesDropdown = () => {
+  const type = useResourceParamType();
+  const id = useParams().id as string;
+  const list = useRead(`List${type}s`, {}).data;
+
+  const selected = list?.find((i) => i.id === id);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className="w-72 justify-between">
+          {selected ? selected.name : `Select ${type}`}
+          <ChevronDown className="w-4 h-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-72" side="bottom">
+        <DropdownMenuGroup>
+          {list?.map(({ id, name }) => (
+            <Link key={id} to={`/${type.toLowerCase()}s/${id}`}>
+              <DropdownMenuItem>{name}</DropdownMenuItem>
+            </Link>
+          ))}
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export const Logout = () => (
+  <Button
+    variant="ghost"
+    size="icon"
+    onClick={() => {
+      localStorage.removeItem("monitor-auth-token");
+      window.location.reload();
+    }}
+  >
+    <LogOut className="w-4 h-4" />
+  </Button>
+);
diff --git a/frontend-v2/src/lib/socket.tsx b/frontend-v2/src/lib/socket.tsx
index d3a3008d4..70b3684f1 100644
--- a/frontend-v2/src/lib/socket.tsx
+++ b/frontend-v2/src/lib/socket.tsx
@@ -4,7 +4,7 @@ import { Button } from "@ui/button";
 import { toast } from "@ui/use-toast";
 import { atom, useAtom } from "jotai";
 import { Circle } from "lucide-react";
-import { ReactNode, useCallback, useEffect } from "react";
+import { ReactNode, useCallback, useEffect, useState } from "react";
 import rws from "reconnecting-websocket";
 import { cn } from "@lib/utils";
 // import { UPDATE_WS_URL } from "@main";
@@ -116,14 +116,18 @@ export const WebsocketProvider = ({
 
 export const WsStatusIndicator = () => {
   const [ws] = useWebsocket();
+  const [open, set] = useState(ws?.readyState === 1);
   const onclick = () =>
     toast({ title: "surprise", description: "motherfucker" });
+
+  useEffect(() => set(ws?.readyState === 1), [ws?.readyState]);
+
   return (
     <Button variant="ghost" onClick={onclick}>
       <Circle
         className={cn(
           "w-4 h-4 stroke-none",
-          ws ? "fill-green-500" : "fill-red-500"
+          open ? "fill-green-500" : "fill-red-500"
         )}
       />
     </Button>