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">