Replace tabs with a dropdown (#88)

* Use a menu dropdown instead of tabs as we have too many projects * Remove unused imports * Format since removing unused * Add alpha to shovel icon
loathers · Jun 18, 2024 · a843de8 · a843de8
1 parent 8be1fc6
commit a843de8
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 67 deletions.
diff --git a/packages/excavator-web/app/components/Frequency.tsx b/packages/excavator-web/app/components/Frequency.tsx
@@ -1,10 +1,4 @@
-export default function Frequency({
-  count,
-  total,
-}: {
-  count: number;
-  total: number;
-}) {
+export function Frequency({ count, total }: { count: number; total: number }) {
   const full = (count / total) * 100;
   return (
     <span title={`${count} times out of ${total}`}>

diff --git a/packages/excavator-web/app/components/ProjectHeader.tsx b/packages/excavator-web/app/components/ProjectHeader.tsx
@@ -0,0 +1,52 @@
+import { ChevronDownIcon } from "@chakra-ui/icons";
+import {
+  HStack,
+  Text,
+  Box,
+  Button,
+  Menu,
+  MenuItem,
+  MenuButton,
+  MenuList,
+} from "@chakra-ui/react";
+import { Link as RemixLink, useNavigate } from "@remix-run/react";
+import { ExcavatorProject } from "excavator-projects";
+
+import { toSlug } from "../utils/utils.js";
+
+type Props = {
+  project: ExcavatorProject;
+  projects: string[];
+};
+
+export function ProjectHeader({ project, projects }: Props) {
+  const navigate = useNavigate();
+
+  return (
+    <HStack>
+      <Menu>
+        <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
+          {project.name}
+        </MenuButton>
+        <MenuList>
+          {projects.map((p) => (
+            <MenuItem key={p} onClick={() => navigate(`../${toSlug(p)}`)}>
+              {p}
+            </MenuItem>
+          ))}
+        </MenuList>
+      </Menu>
+      <Text>{project.description}</Text>
+      <Box flex={1} />
+      <Button
+        as={RemixLink}
+        size="xs"
+        rightIcon={<>⬇</>}
+        to={`../${toSlug(project.name)}.csv`}
+        reloadDocument
+      >
+        <Text display={["none", null, "block"]}>Download Data</Text>
+      </Button>
+    </HStack>
+  );
+}
diff --git a/packages/excavator-web/app/favicon.png b/packages/excavator-web/app/favicon.png
diff --git a/packages/excavator-web/app/routes/projects.$project.tsx b/packages/excavator-web/app/routes/projects.$project.tsx
@@ -1,26 +1,22 @@
 import {
   Alert,
-  Badge,
-  Box,
-  Button,
-  HStack,
   Stack,
   Table,
   TableContainer,
   Tbody,
   Td,
-  Text,
   Th,
   Thead,
   Tr,
 } from "@chakra-ui/react";
 import { LoaderFunctionArgs, MetaFunction, json } from "@remix-run/node";
-import { Link as RemixLink, useLoaderData, useParams } from "@remix-run/react";
+import { useLoaderData } from "@remix-run/react";
 import { projects } from "excavator-projects";
 
-import Frequency from "../components/Frequency.js";
+import { Frequency } from "../components/Frequency.js";
+import { ProjectHeader } from "../components/ProjectHeader.js";
 import { db } from "../db.server.js";
-import { fromSlug, getValuesInKeyOrder, toSlug } from "../utils/utils.js";
+import { fromSlug, getValuesInKeyOrder } from "../utils/utils.js";
 import { loadProjectData } from "../utils/utils.server.js";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
@@ -41,32 +37,21 @@ export async function loader({ params }: LoaderFunctionArgs) {
   const data = await loadProjectData(projectName);
 
   return json({
+    projectNames: projects.map((p) => p.name).sort(),
     project,
     data: data.map(({ count, ...rest }) => ({ count: Number(count), ...rest })),
     total,
   });
 }
 
 export default function Project() {
-  const { data, total, project } = useLoaderData<typeof loader>();
+  const { data, total, project, projectNames } = useLoaderData<typeof loader>();
 
   const headers = Object.keys(data.at(0)?.data ?? {});
 
   return (
     <Stack spacing={8} mt={8}>
-      <HStack>
-        <Text>{project.description}</Text>
-        <Box flex={1} />
-        <Button
-          as={RemixLink}
-          size="xs"
-          rightIcon={<>⬇</>}
-          to={`../${toSlug(project.name)}.csv`}
-          reloadDocument
-        >
-          <Text display={["none", null, "block"]}>Download Data</Text>
-        </Button>
-      </HStack>
+      <ProjectHeader project={project} projects={projectNames} />
       {data.length === 0 ? (
         <Alert>No data for this project yet - you better get excavating!</Alert>
       ) : (

diff --git a/packages/excavator-web/app/routes/projects.tsx b/packages/excavator-web/app/routes/projects.tsx
@@ -1,12 +1,4 @@
-import {
-  Alert,
-  Spinner,
-  Tab,
-  TabIndicator,
-  TabList,
-  TabPanels,
-  Tabs,
-} from "@chakra-ui/react";
+import { Alert, Spinner } from "@chakra-ui/react";
 import { MetaFunction } from "@remix-run/node";
 import {
   Outlet,
@@ -37,32 +29,5 @@ export default function Projects() {
 
   if (projects.length === 0) return <Alert>No projects found</Alert>;
 
-  const projectIndex = projects.findIndex((p) => toSlug(p.name) === project);
-
-  return (
-    <Tabs
-      defaultIndex={projectIndex}
-      maxWidth="100%"
-      onChange={(i) => navigate(`./${toSlug(projects[i].name)}`)}
-    >
-      <TabList
-        overflowX="scroll"
-        sx={{
-          scrollbarWidth: "none",
-          "::-webkit-scrollbar": {
-            display: "none",
-          },
-        }}
-        pb={1}
-      >
-        {projects.map((p) => (
-          <Tab key={p.name} sx={{ textWrap: "nowrap" }}>
-            {p.name}
-          </Tab>
-        ))}
-      </TabList>
-      <TabIndicator />
-      <TabPanels>{showSpinner ? <Spinner /> : <Outlet />}</TabPanels>
-    </Tabs>
-  );
+  return showSpinner ? <Spinner /> : <Outlet />;
 }
diff --git a/packages/excavator-web/package.json b/packages/excavator-web/package.json
@@ -13,7 +13,9 @@
     "lint": "prettier --check ."
   },
   "dependencies": {
+    "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.2",
+    "@chakra-ui/system": "^2.6.2",
     "@emotion/react": "^11.11.4",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.5",

diff --git a/yarn.lock b/yarn.lock
@@ -2159,6 +2159,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@chakra-ui/icons@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "@chakra-ui/icons@npm:2.1.1"
+  dependencies:
+    "@chakra-ui/icon": "npm:3.2.0"
+  peerDependencies:
+    "@chakra-ui/system": ">=2.0.0"
+    react: ">=18"
+  checksum: 10c0/36c94df62216f7445e49dfec98363f4c836e154ba118e6c446e774cade6f9e0e04c33a62fbe2ff9de26eb87f6a3ee805f8c7fd2ddc82c8ef2744994443a83b33
+  languageName: node
+  linkType: hard
+
 "@chakra-ui/image@npm:2.1.0":
   version: 2.1.0
   resolution: "@chakra-ui/image@npm:2.1.0"
@@ -2862,7 +2874,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@chakra-ui/system@npm:2.6.2":
+"@chakra-ui/system@npm:2.6.2, @chakra-ui/system@npm:^2.6.2":
   version: 2.6.2
   resolution: "@chakra-ui/system@npm:2.6.2"
   dependencies:
@@ -7015,7 +7027,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "excavator-web@workspace:packages/excavator-web"
   dependencies:
+    "@chakra-ui/icons": "npm:^2.1.1"
     "@chakra-ui/react": "npm:^2.8.2"
+    "@chakra-ui/system": "npm:^2.6.2"
     "@emotion/react": "npm:^11.11.4"
     "@emotion/server": "npm:^11.11.0"
     "@emotion/styled": "npm:^11.11.5"