Restructure routes, scroll selected flight into view on reload

web/app/routes/logbook/flights/$id.tsx

@@ -204,13 +204,17 @@ export default function Flight() {
                       <CollapsibleFieldset legend="Route" w="100%" mt="sm">
                         {log.waypoint_from || log.waypoint_to ? (
                           <Group grow>
-                            <VerticalLogItem
+                            <TextLogItem
                               label="From"
                               content={log.waypoint_from}
+                              id={params.id}
+                              field="waypoint_from"
                             />
-                            <VerticalLogItem
+                            <TextLogItem
                               label="To"
                               content={log.waypoint_to}
+                              id={params.id}
+                              field="waypoint_to"
                             />
                           </Group>
                         ) : null}

web/app/routes/logbook/flights/_index.tsx

@@ -1,5 +1,5 @@
 import { Center, Container, Stack } from "@mantine/core";
-import { MobileFlightsList } from "@/routes/logbook.flights/flights-list";
+import { MobileFlightsList } from "@/routes/logbook/flights/flights-list";
 import { IconFeather } from "@tabler/icons-react";
 
 export default function Flights() {

web/app/routes/logbook/flights/flights-list.tsx

@@ -16,7 +16,7 @@ import {
   Select,
 } from "@mantine/core";
 import { randomId } from "@mantine/hooks";
-import { Link, useLocation, useNavigate } from "@remix-run/react";
+import { Link, useLocation, useNavigate, useParams } from "@remix-run/react";
 import {
   IconArrowRightTail,
   IconPlaneTilt,
@@ -28,7 +28,7 @@ import {
   useQuery,
   useQueryClient,
 } from "@tanstack/react-query";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 function FlightsListDisplay({
   flights,
@@ -56,6 +56,17 @@ function FlightsListDisplay({
     "December",
   ];
 
+  const params = useParams();
+
+  useEffect(() => {
+    console.log(params);
+    if (params.id) {
+      const selectedFlight = document.getElementById(`${params.id} navlink`);
+      console.log(selectedFlight);
+      selectedFlight?.scrollIntoView({ block: "center", inline: "center" });
+    }
+  }, [flights.data]);
+
   return (
     <>
       {flights.data ? (
@@ -102,6 +113,7 @@ function FlightsListDisplay({
                                     <>
                                       <NavLink
                                         key={randomId()}
+                                        id={`${flight.id} navlink`}
                                         component={Link}
                                         to={`/logbook/flights/${flight.id}`}
                                         label={
@@ -296,9 +308,11 @@ export function MobileFlightsList() {
 
   const navigate = useNavigate();
 
+  const scrollAreaRef = useRef(null);
+
   return (
     <Stack p="0" m="0" justify="space-between" h="calc(100vh - 95px)">
-      <ScrollArea h="calc(100vh - 95px - 50px">
+      <ScrollArea h="calc(100vh - 95px - 50px" ref={scrollAreaRef}>
         <FlightsListDisplay flights={flights} page={page} />
       </ScrollArea>{" "}
       <Group grow preventGrowOverflow={false} wrap="nowrap">

web/package-lock.json

@@ -22,10 +22,12 @@
         "@tanstack/react-query": "^5.17.0",
         "@tanstack/react-query-devtools": "^5.17.0",
         "axios": "^1.6.3",
+        "clsx": "^2.1.0",
         "dayjs": "^1.11.10",
         "dayjs-plugin-utc": "^0.1.2",
         "embla-carousel-react": "^7.1.0",
         "isbot": "^3.6.8",
+        "mantine-datatable": "^7.4.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "use-dehydrated-state": "^0.1.0"
@@ -1461,6 +1463,14 @@
         "react-dom": "^18.2.0"
       }
     },
+    "node_modules/@mantine/core/node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@mantine/dates": {
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-7.4.1.tgz",
@@ -1476,6 +1486,14 @@
         "react-dom": "^18.2.0"
       }
     },
+    "node_modules/@mantine/dates/node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@mantine/dropzone": {
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-7.4.1.tgz",
@@ -4003,9 +4021,9 @@
       }
     },
     "node_modules/clsx": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
-      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
       "engines": {
         "node": ">=6"
       }
@@ -7187,6 +7205,21 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/mantine-datatable": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/mantine-datatable/-/mantine-datatable-7.4.4.tgz",
+      "integrity": "sha512-CNkMwPq4xBz78dlLP6mKMhMUOZj/dZkF5t0qyexAnrEKVF32NU3529Gdsds3q5UzWyrYjzqWjlNkxC9G13Je5Q==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/icflorescu"
+      },
+      "peerDependencies": {
+        "@mantine/core": ">=7",
+        "@mantine/hooks": ">=7",
+        "clsx": ">=2",
+        "react": ">=18.2"
+      }
+    },
     "node_modules/markdown-extensions": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-1.1.1.tgz",

web/package.json

@@ -27,10 +27,12 @@
     "@tanstack/react-query": "^5.17.0",
     "@tanstack/react-query-devtools": "^5.17.0",
     "axios": "^1.6.3",
+    "clsx": "^2.1.0",
     "dayjs": "^1.11.10",
     "dayjs-plugin-utc": "^0.1.2",
     "embla-carousel-react": "^7.1.0",
     "isbot": "^3.6.8",
+    "mantine-datatable": "^7.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "use-dehydrated-state": "^0.1.0"

web/remix.config.js

@@ -1,7 +1,27 @@
+import { defineRoutes } from "@remix-run/dev/dist/config/routes.js";
+
 /** @type {import('@remix-run/dev').AppConfig} */
 export default {
   postcss: true,
   ignoredRouteFiles: ["**/.*"],
+  routes(defineRoutes) {
+    return defineRoutes((route) => {
+      route("/", "routes/_index.tsx", { index: true });
+      route("logbook", "routes/logbook/route.tsx", () => {
+        route("dashboard", "routes/logbook/dashboard.tsx");
+        route("admin", "routes/logbook/admin.tsx");
+        route("me", "routes/logbook/me.tsx");
+        route("aircraft", "routes/logbook/aircraft.tsx");
+        route("flights", "routes/logbook/flights/route.tsx", () => {
+          route("", "routes/logbook/flights/_index.tsx", { index: true });
+          route(":id", "routes/logbook/flights/$id.tsx");
+          route("new", "routes/logbook/flights/new.tsx");
+          route("edit/:id", "routes/logbook/flights/edit/$id.tsx");
+        });
+      });
+      route("login", "routes/login.tsx");
+    });
+  },
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
   // publicPath: "/build/",