Implement flight log creation

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

@@ -1,7 +1,7 @@
 import { client } from "@/util/api";
-import { Flight } from "@/util/types";
+import { FlightConciseSchema } from "@/util/types";
 import { NavLink, Text, Button, ScrollArea, Stack } from "@mantine/core";
-import { Link, useLocation } from "@remix-run/react";
+import { Link, useLocation, useNavigate } from "@remix-run/react";
 import { IconPlus } from "@tabler/icons-react";
 import { useQuery } from "@tanstack/react-query";
 
@@ -14,14 +14,21 @@ export function FlightsList() {
   const location = useLocation();
   const page = location.pathname.split("/")[3];
 
+  const navigate = useNavigate();
+
   return (
     <Stack p="0" m="0" gap="0">
-      <Button variant="outline" leftSection={<IconPlus />} mb="md">
+      <Button
+        variant="outline"
+        leftSection={<IconPlus />}
+        mb="md"
+        onClick={() => navigate("/logbook/flights/new")}
+      >
         Add
       </Button>
       <ScrollArea>
         {flights.data ? (
-          flights.data.map((flight: Flight, index: number) => (
+          flights.data.map((flight: FlightConciseSchema, index: number) => (
             <NavLink
               key={index}
               component={Link}
@@ -47,11 +54,13 @@ export function MobileFlightsList() {
   const location = useLocation();
   const page = location.pathname.split("/")[3];
 
+  const navigate = useNavigate();
+
   return (
     <Stack p="0" m="0" justify="space-between" h="calc(100vh - 95px)">
       <ScrollArea h="calc(100vh - 95px - 50px">
         {flights.data ? (
-          flights.data.map((flight: Flight, index: number) => (
+          flights.data.map((flight: FlightConciseSchema, index: number) => (
             <NavLink
               key={index}
               component={Link}
@@ -64,7 +73,12 @@ export function MobileFlightsList() {
           <Text p="sm">No Flights</Text>
         )}
       </ScrollArea>
-      <Button variant="outline" leftSection={<IconPlus />} mt="md">
+      <Button
+        variant="outline"
+        leftSection={<IconPlus />}
+        mt="md"
+        onClick={() => navigate("/logbook/flights/new")}
+      >
         Add
       </Button>
     </Stack>

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

@@ -1,4 +1,4 @@
-import { Divider, Grid, Container } from "@mantine/core";
+import { Divider, Grid, Container, ScrollAreaAutosize } from "@mantine/core";
 import { Outlet } from "@remix-run/react";
 import { FlightsList } from "./flights-list";
 
@@ -11,7 +11,9 @@ export default function FlightsLayout() {
         </Grid.Col>
         <Divider orientation="vertical" m="sm" />
         <Grid.Col span="auto">
-          <Outlet />
+          <ScrollAreaAutosize mah="calc(100vh - 95px)">
+            <Outlet />
+          </ScrollAreaAutosize>
         </Grid.Col>
       </Grid>
       <Container hiddenFrom="md">