Merge pull request #175 from pacholoamit/ui-navbar

ui navbar
pacholoamit · Jun 4, 2024 · a70b9f4 · a70b9f4
2 parents 56e80ef + 1cbff2f
commit a70b9f4
Show file tree

Hide file tree

Showing 14 changed files with 103 additions and 129 deletions.
diff --git a/...de-npm-20.12.13-2b5576f45f-9ec8971a76.zip → ...ode-npm-20.14.0-ca66317c0b-b62383ea00.zip b/...de-npm-20.12.13-2b5576f45f-9ec8971a76.zip → ...ode-npm-20.14.0-ca66317c0b-b62383ea00.zip
diff --git a/...-js-npm-1.136.1-9f3cdc39e9-ce6ff1e1cb.zip → ...-js-npm-1.136.4-12bdf39fda-8f2c0612ee.zip b/...-js-npm-1.136.1-9f3cdc39e9-ce6ff1e1cb.zip → ...-js-npm-1.136.4-12bdf39fda-8f2c0612ee.zip
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](https://semver.org/).
 
+## 0.9.7
+- Performance improvements for UI
+- Improve Navigation Header and Sidebar
+
 ## 0.9.6
 - Fix issue where linux users are not able to navigate into disk analytics page
 - Added icons to processes

diff --git a/TODO.md b/TODO.md
@@ -1,13 +1,11 @@
-# Things to do before v1.0.0:
+# Things to do before v1.0.0
 
 - Tauri V2
-- Topbar???
-- Use Zustand stores for most state
-- Check Disk Health in rust
+- Topbar??? - IN PROGRESS
+- Use Zustand stores for most state - IN PROGRESS
+- Check Disk Health in rust - DONE?
 - Add Persistence of metrics & clearing of persisted metrics
-- Ensure Disk cards don't overflow
-- Revamp Processes page
+- Ensure Disk cards don't overflow - DONE
+- Revamp Processes page - DONE
 - Improve Theming via manifests
-
-## For Consideration
-- Metrics clustering
+- Make Disks icon dynamic
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "highcharts-react-official": "^3.2.1",
     "immer": "^10.1.1",
     "non.geist": "^1.0.3",
-    "posthog-js": "^1.136.1",
+    "posthog-js": "^1.136.4",
     "react": "^18.3.1",
     "react-apexcharts": "^1.4.1",
     "react-arborist": "^3.4.0",
@@ -43,7 +43,7 @@
   "devDependencies": {
     "@tauri-apps/cli": "^1.5.14",
     "@types/lodash.sortby": "^4.7.9",
-    "@types/node": "^20.12.13",
+    "@types/node": "^20.14.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.0",

diff --git a/src/features/metrics/pages/dashboard.page.tsx b/src/features/metrics/pages/dashboard.page.tsx
@@ -15,16 +15,16 @@ import { Grid } from "@mantine/core";
 const StatsRings = () => {
   return (
     <>
-      <Grid.Col sm={6} md={6} lg={4} xl={3}>
+      <Grid.Col sm={6} md={6} lg={3} xl={3}>
         <GlobalCpuStatsRing />
       </Grid.Col>
-      <Grid.Col sm={6} md={6} lg={4} xl={3}>
+      <Grid.Col sm={6} md={6} lg={3} xl={3}>
         <MemoryStatsRing />
       </Grid.Col>
-      <Grid.Col sm={6} md={6} lg={4} xl={3}>
+      <Grid.Col sm={6} md={6} lg={3} xl={3}>
         <SwapStatsRing />
       </Grid.Col>
-      <Grid.Col sm={6} md={6} lg={12} xl={3}>
+      <Grid.Col sm={6} md={6} lg={3} xl={3}>
         <DiskStatsRing />
       </Grid.Col>
     </>

diff --git a/src/layout/components/header.tsx b/src/layout/components/header.tsx
@@ -1,14 +1,38 @@
-import { Grid, Title } from '@mantine/core';
+import logoOnly from "/logo-only.png";
+import React from "react";
+
+import {
+  Badge,
+  Center,
+  Code,
+  Grid,
+  Group,
+  Header as MantineHeader,
+  Image,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import { IconSearch } from "@tabler/icons-react";
+import { getVersion } from "@tauri-apps/api/app";
 
 const Header = () => {
+  const [version, setVersion] = React.useState<string>("");
+
+  React.useEffect(() => {
+    getVersion().then((v) => setVersion(v));
+  }, []);
   return (
-    <Grid gutter={"xl"} justify="space-between" style={{ height: "90px" }}>
-      <Grid.Col span={3}>
-        <Title order={2} color={"#dce1e8"}>
-          Dashboard
-        </Title>
-      </Grid.Col>
-    </Grid>
+    <MantineHeader height={48} style={{ backgroundColor: "transparent", backdropFilter: "blur(15px)" }}>
+      <Group position="apart" align="center" pl={8} pr={8} pt={8}>
+        <Badge color="teal" variant="dot">
+          Pachtop {version && `v${version}`}
+        </Badge>
+        <TextInput placeholder="Search..." size="xs" w={300} icon={<IconSearch size={14} />} disabled />
+        <div />
+      </Group>
+    </MantineHeader>
   );
 };
 

diff --git a/src/layout/components/navbar-footer.tsx b/src/layout/components/navbar-footer.tsx
diff --git a/src/layout/components/navbar-logo.tsx b/src/layout/components/navbar-logo.tsx
diff --git a/src/layout/components/navbar-options.tsx b/src/layout/components/navbar-options.tsx
@@ -1,19 +1,19 @@
-import { useNavigate } from 'react-router-dom';
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
 
-import useMediaQuery from '@/hooks/useMediaQuery';
-import { Group, MantineTheme, MediaQuery, Text, ThemeIcon, UnstyledButton } from '@mantine/core';
-import {
-    IconArticle, IconCpu, IconLayoutDashboard, IconServer, IconSettings
-} from '@tabler/icons-react';
+import useMediaQuery from "@/hooks/useMediaQuery";
+import { ActionIcon, Group, MantineTheme, Portal, Tooltip, UnstyledButton } from "@mantine/core";
+import { IconCpu, IconLayoutDashboard, IconServer, IconSettings } from "@tabler/icons-react";
 
 interface NavbarOptionProps {
   icon: React.ReactNode;
   label: string;
   onClick?: () => void;
+  active?: boolean;
 }
 
-const NavbarOption: React.FC<NavbarOptionProps> = (props) => {
-  const { icon, label, onClick } = props;
+export const NavbarOption: React.FC<NavbarOptionProps> = (props) => {
+  const { icon, label, onClick, active } = props;
   const { isSmallerThanMd } = useMediaQuery();
   const position = isSmallerThanMd ? "center" : "left";
 
@@ -26,50 +26,65 @@ const NavbarOption: React.FC<NavbarOptionProps> = (props) => {
     "&:hover": {
       backgroundColor: theme.colors.dark[6],
     },
+    "&[data-active]": {
+      backgroundColor: theme.colors.dark[6],
+    },
   });
 
   return (
-    <UnstyledButton sx={sx} onClick={onClick}>
-      <Group position={position}>
-        <ThemeIcon variant="outline">{icon}</ThemeIcon>
-        <MediaQuery smallerThan={"md"} styles={{ display: "none" }}>
-          <Text size={"sm"}>{label}</Text>
-        </MediaQuery>
-      </Group>
-    </UnstyledButton>
+    <Tooltip label={label} position="right" withArrow color="blue">
+      <UnstyledButton sx={sx} onClick={onClick} data-active={active || undefined}>
+        <Group position={position}>
+          <ActionIcon variant="transparent" size={"sm"}>
+            {icon}
+          </ActionIcon>
+        </Group>
+      </UnstyledButton>
+    </Tooltip>
   );
 };
 
 const NavbarOptions = () => {
+  const [active, setActive] = useState(0);
   const navigate = useNavigate();
   const options: NavbarOptionProps[] = [
     {
-      icon: <IconLayoutDashboard size={16} />,
+      icon: <IconLayoutDashboard size={24} />,
       label: "Dashboard",
       onClick: () => navigate("/"),
     },
     {
-      icon: <IconServer size={16} />,
+      icon: <IconServer size={24} />,
       label: "Disks",
       onClick: () => navigate("/disks"),
     },
     {
-      icon: <IconCpu size={16} />,
+      icon: <IconCpu size={24} />,
       label: "Processes",
       onClick: () => {
         navigate("/processes");
       },
     },
     {
-      icon: <IconSettings size={16} />,
+      icon: <IconSettings size={24} />,
       label: "Settings",
       onClick: () => {
         navigate("/settings");
       },
     },
   ];
 
-  const navbarOptions = options.map((option) => <NavbarOption {...option} key={option.label} />);
+  const navbarOptions = options.map((option, index) => (
+    <NavbarOption
+      {...option}
+      key={option.label}
+      active={index === active}
+      onClick={() => {
+        setActive(index);
+        option.onClick?.();
+      }}
+    />
+  ));
   return <>{navbarOptions}</>;
 };
 

diff --git a/src/layout/components/navbar.tsx b/src/layout/components/navbar.tsx
@@ -1,21 +1,12 @@
-import NavbarFooter from "@/layout/components/navbar-footer";
-import NavbarLogo from "@/layout/components/navbar-logo";
 import NavbarOptions from "@/layout/components/navbar-options";
 import { Navbar as MantineNavbar, ScrollArea, Space } from "@mantine/core";
 
 const AppNavbar = () => {
   return (
-    <MantineNavbar p="sm" width={{ md: 230, base: 73 }}>
-      <MantineNavbar.Section ml={"auto"} mr={"auto"}>
-        <NavbarLogo />
-      </MantineNavbar.Section>
-      <Space h={"md"} />
-      <MantineNavbar.Section grow component={ScrollArea} mx="-xs" px="xs">
+    <MantineNavbar p={0} width={{ base: 46 }}>
+      <MantineNavbar.Section mx="-xs" px="xs">
         <NavbarOptions />
       </MantineNavbar.Section>
-      <MantineNavbar.Section>
-        <NavbarFooter />
-      </MantineNavbar.Section>
     </MantineNavbar>
   );
 };

diff --git a/src/layout/index.tsx b/src/layout/index.tsx
@@ -1,9 +1,10 @@
 import { Outlet } from "react-router-dom";
 
 import Navbar from "@/layout/components/navbar";
-import { AppShell, Card, Space, Styles, useMantineTheme } from "@mantine/core";
+import { AppShell, Box, Styles, Tooltip, useMantineTheme } from "@mantine/core";
 
 import AppFooter from "./components/footer";
+import Header from "./components/header";
 
 const Layout: React.FC = () => {
   const theme = useMantineTheme();
@@ -14,11 +15,8 @@ const Layout: React.FC = () => {
   };
 
   return (
-    <AppShell styles={styles} navbar={<Navbar />} footer={<AppFooter />} padding={"xl"}>
-      <Space h={"sm"} />
-      <Card style={{ backgroundColor: theme.colors.dark[7] }} radius={"md"}>
-        <Outlet />
-      </Card>
+    <AppShell styles={styles} navbar={<Navbar />} footer={<AppFooter />} header={<Header />} padding={"xl"}>
+      <Outlet />
     </AppShell>
   );
 };

diff --git a/src/main.tsx b/src/main.tsx
@@ -1,5 +1,5 @@
-import ReactDOM from 'react-dom/client';
+import ReactDOM from "react-dom/client";
 
-import App from '@/App';
+import App from "@/App";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(<App />);
diff --git a/yarn.lock b/yarn.lock
@@ -1548,12 +1548,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:^20.12.13":
-  version: 20.12.13
-  resolution: "@types/node@npm:20.12.13"
+"@types/node@npm:^20.14.0":
+  version: 20.14.0
+  resolution: "@types/node@npm:20.14.0"
   dependencies:
     undici-types: ~5.26.4
-  checksum: 9ec8971a76b2435379c10689c639ba1bbf4451075709bdf4bf23b7972a63f7d966947914410f2d3711a315e1157d782b76cfadc32944e29db9dd444221aea699
+  checksum: b62383ea004deb1b40c0612f373eaf02247381b65a90f7957dc3034dda9b5622ab61b7afafa82f67909667a5cf9ea43a0643b2a78ea295dac8b77e75e11470d7
   languageName: node
   linkType: hard
 
@@ -2879,7 +2879,7 @@ __metadata:
     "@tauri-apps/api": ^1.5.6
     "@tauri-apps/cli": ^1.5.14
     "@types/lodash.sortby": ^4.7.9
-    "@types/node": ^20.12.13
+    "@types/node": ^20.14.0
     "@types/react": ^18.3.3
     "@types/react-dom": ^18.3.0
     "@vitejs/plugin-react": ^4.3.0
@@ -2891,7 +2891,7 @@ __metadata:
     highcharts-react-official: ^3.2.1
     immer: ^10.1.1
     non.geist: ^1.0.3
-    posthog-js: ^1.136.1
+    posthog-js: ^1.136.4
     react: ^18.3.1
     react-apexcharts: ^1.4.1
     react-arborist: ^3.4.0
@@ -2969,13 +2969,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"posthog-js@npm:^1.136.1":
-  version: 1.136.1
-  resolution: "posthog-js@npm:1.136.1"
+"posthog-js@npm:^1.136.4":
+  version: 1.136.4
+  resolution: "posthog-js@npm:1.136.4"
   dependencies:
     fflate: ^0.4.8
     preact: ^10.19.3
-  checksum: ce6ff1e1cb1c292270bfad3f83f835b6c3df93cc1b78385c3f66c63db8b01996f6d25679cedc28d6ec39b887b36a53ceb1d8bef3a9899e85ea8f3c4a1f0f8040
+  checksum: 8f2c0612ee964ba809925ddef6f1f2374465b6a38b4efcb84648b1e6a6773c3aba0ea6226634d014951231db56a8fccbaab62b48b4ddf4c89bf3381d9d11a02b
   languageName: node
   linkType: hard