Feature/new-navigation

package.json

@@ -38,6 +38,7 @@
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-navigation-menu": "^1.2.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-separator": "^1.0.3",
@@ -54,6 +55,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.1",
     "react-router-dom": "^6.22.0",
+    "recharts": "^2.12.7",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.3.3",

src/const.ts

@@ -1,5 +1,5 @@
-import { LogLevelNumbers } from '@/managers/log';
 import * as Balloons from '@/balloons';
+import { LogLevelNumbers } from '@/managers/log';
 
 //
 // * Config types
@@ -41,6 +41,11 @@ export type User = {
   createdAt: string;
 };
 
+export type HistoryNode = {
+  date: Date;
+  pops: Record<BalloonName, number>;
+};
+
 export type RemoteConfig = {
   badge: {
     color: hexColor;
@@ -69,6 +74,12 @@ export type RemoteResponse = {
     rank: number | null;
     topUsers: User[];
   };
+  statistics: {
+    totalPopped: number;
+  };
+  popHistory: {
+    history: HistoryNode[];
+  };
 };
 
 export type Endpoint =
@@ -78,7 +89,9 @@ export type Endpoint =
   | '/user/:id'
   | '/user'
   | '/user/count/increment'
-  | '/leaderboard';
+  | '/leaderboard'
+  | '/statistics'
+  | '/statistics/history';
 
 //
 // * Storage types
@@ -169,6 +182,17 @@ export const devRemoteResponse: Record<Endpoint, any> = new Proxy(
         count: (10 - i) * 10,
       })),
     },
+    '/statistics': { totalPopped: 100 },
+    '/statistics/history': {
+      history: Array.from({ length: 30 }, (_, i) => ({
+        date: new Date(2021, 10, i + 1),
+        pops: {
+          default: Math.floor(Math.random() * 100),
+          confetti: Math.floor(Math.random() * 100),
+          gold: Math.floor(Math.random() * 100),
+        },
+      })),
+    },
   },
   {
     get: function (target, prop, receiver) {

src/popup/components/Header.tsx

@@ -1,13 +1,24 @@
-import React, { useState, useEffect } from 'react';
-import browser, { type Permissions } from 'webextension-polyfill';
-import { useLocation } from 'react-router-dom';
 import { ClassValue } from 'clsx';
 import { LucideIcon, RotateCcw } from 'lucide-react';
-import { Link } from 'react-router-dom';
 import { ArrowLeft, List, Settings } from 'lucide-react';
-import remote from '@/remote';
+import React, { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { Link } from 'react-router-dom';
+import browser, { type Permissions } from 'webextension-polyfill';
 import { Button } from './ui/button';
-import { askOriginPermissions } from '@/utils';
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+  NavigationMenuViewport,
+} from '@/components/ui/navigation-menu';
+import remote from '@/remote';
+import { askOriginPermissions, cn } from '@/utils';
 
 type iconProps = {
   to: string;
@@ -33,7 +44,7 @@ const HeaderIcon = (props: iconProps) => {
   return (
     <Link
       to={props.to}
-      className="p-3 text-primary-foreground opacity-80 hover:opacity-100"
+      className="flex justify-center items-center p-3 text-primary-foreground opacity-80 hover:opacity-100"
     >
       <props.icon size={20} />
     </Link>
@@ -99,6 +110,23 @@ const Banner = (props: BannerProps) => {
   return null;
 };
 
+const ListItem = (props: { href: string; title: string; children: any }) => {
+  return (
+    <NavigationMenuLink
+      className={cn(
+        navigationMenuTriggerStyle(),
+        'flex flex-col items-start h-auto px-3 py-1.5'
+      )}
+      asChild
+    >
+      <Link to={props.href}>
+        <h2 className="text-base font-semibold">{props.title}</h2>
+        <p className="text-xs text-muted-foreground">{props.children}</p>
+      </Link>
+    </NavigationMenuLink>
+  );
+};
+
 export default (props: HeaderProps) => {
   const [isAvailable, setIsAvailable] = useState<boolean>(true);
   const location = useLocation();
@@ -119,16 +147,42 @@ export default (props: HeaderProps) => {
 
   return (
     <>
-      <header className="flex select-none items-center justify-center bg-primary p-2 text-primary-foreground">
-        <div className="absolute left-1 flex items-center justify-center">
-          {location.pathname !== '/' && <HeaderIcon to="/" icon={ArrowLeft} />}
-        </div>
-        <h1 className="text-xl font-bold">{title}</h1>
-        <div className="absolute right-1 flex items-center justify-center">
-          {navIcons.map((Icon, index) => (
-            <HeaderIcon key={index} {...Icon} />
-          ))}
-        </div>
+      <header className="select-none bg-primary text-primary-foreground h-11">
+        <h1 className="absolute w-full flex justify-center items-center text-xl font-bold h-11">
+          {title}
+        </h1>
+        <NavigationMenu className="">
+          <NavigationMenuList className="h-11 px-1 space-x-0 w-dvw max-w-full justify-end">
+            {location.pathname !== '/' && (
+              <NavigationMenuItem>
+                <HeaderIcon to="/" icon={ArrowLeft} />
+              </NavigationMenuItem>
+            )}
+            <div className="flex-grow" />
+            <NavigationMenuItem>
+              <NavigationMenuTrigger
+                hideCheveron
+                className="bg-transparent hover:bg-transparent focus:bg-transparent p-0 h-11 max-h-11"
+              >
+                <HeaderIcon to="/general" icon={List} />
+              </NavigationMenuTrigger>
+              <NavigationMenuContent>
+                <NavigationMenuIndicator />
+                <ul className="flex p-2">
+                  <ListItem href="/general" title="Leaderboard">
+                    View the top players of all time.
+                  </ListItem>
+                  <ListItem href="/statistics" title="Statistics">
+                    View your statistics.
+                  </ListItem>
+                </ul>
+              </NavigationMenuContent>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+              <HeaderIcon to="/general" icon={Settings} />
+            </NavigationMenuItem>
+          </NavigationMenuList>
+        </NavigationMenu>
       </header>
       <Banner remoteAvailable={isAvailable} />
     </>

src/popup/components/graph.tsx

@@ -0,0 +1,105 @@
+import React, { useState, useEffect } from 'react';
+import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts';
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from '@/components/ui/chart';
+import { BalloonName, HistoryNode } from '@/const';
+import remote from '@/remote';
+
+export default () => {
+  const [data, setData] = useState({} as (HistoryNode & { total: number })[]);
+  const [poppedBalloonTypes, setPoppedBalloonTypes] = useState<BalloonName[]>(
+    []
+  );
+  const [chartConfig, setChartConfig] = useState<ChartConfig>({});
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const now = new Date();
+      const start = new Date();
+      start.setDate(now.getDate() - 7);
+      const response = await remote.getPopHistory(start, now);
+
+      const allBalloonNames = [
+        ...new Set(
+          response.history
+            .map((node) => Object.keys(node.pops) as BalloonName[])
+            .flat()
+        ),
+      ];
+
+      setPoppedBalloonTypes(allBalloonNames);
+
+      const newChartConfig: ChartConfig = {};
+      for (const type of allBalloonNames) {
+        newChartConfig[type] = {
+          color: 'var(--chart-1)',
+          label: type,
+        };
+      }
+      setChartConfig(newChartConfig);
+
+      const chartData = response.history.map((node) => {
+        return {
+          ...node,
+          pops: allBalloonNames.reduce(
+            (acc, key) => {
+              acc[key] = node.pops[key] || 0;
+              return acc;
+            },
+            {} as Record<BalloonName, number>
+          ),
+          total: Object.keys(node.pops).reduce((acc, key) => {
+            acc += node.pops[key as BalloonName];
+            return acc;
+          }, 0),
+        };
+      });
+      setData(chartData);
+    };
+
+    fetchData();
+  }, []);
+
+  return (
+    <>
+      <ChartContainer
+        config={chartConfig}
+        className="min-h-[200px] w-full select-none"
+      >
+        <BarChart accessibilityLayer data={data}>
+          <XAxis
+            dataKey="date"
+            axisLine={false}
+            tickLine={true}
+            tickMargin={8}
+            tickFormatter={(value: Date) =>
+              value.getDate().toString().padStart(2, '0') +
+              '-' +
+              (value.getMonth() + 1).toString().padStart(2, '0')
+            }
+          />
+          <ChartTooltip
+            content={
+              <ChartTooltipContent className="capitalize" hideIndicator />
+            }
+          />
+          <CartesianGrid vertical={false} />
+          {poppedBalloonTypes.length > 0 &&
+            poppedBalloonTypes.map((entry, index) => (
+              <Bar
+                key={`bar-${index}`}
+                dataKey={`pops.${entry}`}
+                name={entry}
+                fill="var(--chart-1)"
+                stackId="a"
+              />
+            ))}
+        </BarChart>
+      </ChartContainer>
+    </>
+  );
+};