From a47bc7421e9b07c33b77766787c74e99ed1cdf5e Mon Sep 17 00:00:00 2001
From: Johan Ohly <johanohly@gmail.com>
Date: Tue, 10 Sep 2024 22:51:40 +0200
Subject: [PATCH] feat: edit flights and attach airline

---
 .../components/dock/DockTooltipItem.svelte    |   2 +-
 .../form-fields/AircraftField.svelte          |  29 +++-
 .../form-fields/AirlineField.svelte           | 124 ++++++++++++++++
 src/lib/components/form-fields/index.ts       |   1 +
 .../add-flight/FlightInformation.svelte       | 132 +++++++++---------
 .../OptionalFlightInformation.svelte          |   7 +-
 .../modals/add-flight/SeatInformation.svelte  |  33 +++--
 .../modals/edit-flight/EditFlightModal.svelte |  19 +--
 .../list-flights/ListFlightsModal.svelte      |  25 ++--
 .../pages/users-page/AddUserModal.svelte      |   1 -
 src/lib/import/fr24.ts                        |   8 +-
 src/lib/utils/data/airlines.ts                |   7 +
 src/lib/utils/data/data.ts                    |  12 +-
 src/lib/utils/index.ts                        |   1 -
 src/routes/+page.server.ts                    |  68 ++++++---
 15 files changed, 325 insertions(+), 144 deletions(-)
 create mode 100644 src/lib/utils/data/airlines.ts

diff --git a/src/lib/components/dock/DockTooltipItem.svelte b/src/lib/components/dock/DockTooltipItem.svelte
index 5b8b7a6..3d72f78 100644
--- a/src/lib/components/dock/DockTooltipItem.svelte
+++ b/src/lib/components/dock/DockTooltipItem.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { DockItem } from '$lib/components/dock/index.js';
+  import { DockItem } from '$lib/components/dock';
   import * as Tooltip from '$lib/components/ui/tooltip';
 
   export let item: {
diff --git a/src/lib/components/form-fields/AircraftField.svelte b/src/lib/components/form-fields/AircraftField.svelte
index c4b8111..56b363c 100644
--- a/src/lib/components/form-fields/AircraftField.svelte
+++ b/src/lib/components/form-fields/AircraftField.svelte
@@ -3,12 +3,16 @@
   import type { SuperForm } from 'sveltekit-superforms';
   import { createCombobox, melt } from '@melt-ui/svelte';
   import { fly } from 'svelte/transition';
-  import { ChevronDown, ChevronUp } from '@o7/icon/lucide';
+  import { CircleX, ChevronDown, ChevronUp } from '@o7/icon/lucide';
   import { z } from 'zod';
   import type { flightSchema } from '$lib/zod/flight';
   import { writable } from 'svelte/store';
   import { AIRCRAFT } from '$lib/data/aircraft';
-  import { type Aircraft, aircraftFromICAO, WTC_TO_LABEL } from '$lib/utils/data/aircraft';
+  import {
+    type Aircraft,
+    aircraftFromICAO,
+    WTC_TO_LABEL,
+  } from '$lib/utils/data/aircraft';
 
   let {
     form,
@@ -34,9 +38,7 @@
     selected,
   });
   selected.subscribe((item) => {
-    if (item) {
-      $formData.aircraft = item.value;
-    }
+    $formData.aircraft = item?.value ?? null;
   });
 
   $effect(() => {
@@ -50,7 +52,7 @@
     if ($touchedInput && $inputValue !== '') {
       aircraft = AIRCRAFT.filter((a) =>
         a.name.toLowerCase().includes($inputValue.toLowerCase()),
-      );
+      ).slice(0, 20);
     } else {
       aircraft = [];
     }
@@ -63,9 +65,22 @@
     <div class="relative">
       <input
         use:melt={$input}
-        class="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 pr-12"
+        class="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 pr-16"
         placeholder="Select aircraft"
       />
+      {#if $open && $selected}
+        <button
+          type="button"
+          onclick={() => {
+            // @ts-expect-error - This is totally fine
+            $selected = undefined;
+            $inputValue = '';
+          }}
+          class="cursor-pointer absolute right-10 top-1/2 z-10 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+        >
+          <CircleX size="20" />
+        </button>
+      {/if}
       <div
         class="absolute right-2 top-1/2 z-10 -translate-y-1/2 text-muted-foreground"
       >
diff --git a/src/lib/components/form-fields/AirlineField.svelte b/src/lib/components/form-fields/AirlineField.svelte
index 3abc9bf..1dc7b89 100644
--- a/src/lib/components/form-fields/AirlineField.svelte
+++ b/src/lib/components/form-fields/AirlineField.svelte
@@ -1,11 +1,135 @@
 <script lang="ts">
+  import * as Form from '$lib/components/ui/form';
   import type { SuperForm } from 'sveltekit-superforms';
+  import { createCombobox, melt } from '@melt-ui/svelte';
+  import { fly } from 'svelte/transition';
+  import { CircleX, ChevronDown, ChevronUp } from '@o7/icon/lucide';
   import { z } from 'zod';
   import type { flightSchema } from '$lib/zod/flight';
+  import { writable } from 'svelte/store';
+  import { type Airline, airlineFromICAO } from '$lib/utils/data/airlines';
+  import { AIRLINES } from '$lib/data/airlines';
 
   let {
     form,
   }: {
     form: SuperForm<z.infer<typeof flightSchema>>;
   } = $props();
+  const { form: formData } = form;
+
+  const selected = writable(
+    $formData.airline
+      ? {
+          label: airlineFromICAO($formData.airline)?.name,
+          value: $formData.airline,
+        }
+      : undefined,
+  );
+
+  const {
+    elements: { menu, input, option },
+    states: { open, inputValue, touchedInput },
+  } = createCombobox<string>({
+    forceVisible: true,
+    selected,
+  });
+  selected.subscribe((item) => {
+    $formData.airline = item?.value ?? null;
+  });
+
+  $effect(() => {
+    if (!$open) {
+      $inputValue = $selected?.label ?? '';
+    }
+  });
+
+  let airlines: Airline[] = $state([]);
+  $effect(() => {
+    if ($touchedInput && $inputValue !== '') {
+      airlines = AIRLINES.filter((a) => {
+        const input = $inputValue.toLowerCase();
+        return (
+          a.icao.toLowerCase() === input || a.name.toLowerCase().includes(input)
+        );
+      }).slice(0, 20);
+    } else {
+      airlines = [];
+    }
+  });
 </script>
+
+<Form.Field {form} name="airline" class="flex flex-col">
+  <Form.Control let:attrs>
+    <Form.Label>Airline</Form.Label>
+    <div class="relative">
+      <input
+        use:melt={$input}
+        class="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 pr-12"
+        placeholder="Select airline"
+      />
+      {#if $open && $selected}
+        <button
+          type="button"
+          onclick={() => {
+            // @ts-expect-error - This is totally fine
+            $selected = undefined;
+            $inputValue = '';
+          }}
+          class="cursor-pointer absolute right-10 top-1/2 z-10 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+        >
+          <CircleX size="20" />
+        </button>
+      {/if}
+      <div
+        class="absolute right-2 top-1/2 z-10 -translate-y-1/2 text-muted-foreground"
+      >
+        {#if $open}
+          <ChevronUp class="size-4" />
+        {:else}
+          <ChevronDown class="size-4" />
+        {/if}
+      </div>
+    </div>
+    <input hidden bind:value={$formData.airline} name={attrs.name} />
+  </Form.Control>
+  {#if $open}
+    <ul
+      class="z-[5000] flex max-h-[300px] flex-col overflow-hidden rounded-lg border"
+      use:melt={$menu}
+      transition:fly={{ duration: 150, y: -5 }}
+    >
+      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+      <div
+        class="flex max-h-full flex-col gap-0 overflow-y-auto bg-card px-2 py-2 text-card-foreground dark:bg-dark-1"
+        tabindex="0"
+      >
+        {#each airlines as airline}
+          <li
+            use:melt={$option({
+              value: airline.icao,
+              label: airline.name,
+            })}
+            class="relative cursor-pointer scroll-my-2 rounded-md py-2 pl-4 pr-4
+        data-[highlighted]:bg-zinc-300 data-[highlighted]:dark:bg-dark-2"
+          >
+            <div class="flex flex-col">
+              <span class="text-lg truncate">{airline.name}</span>
+              <span class="text-sm opacity-75"
+                >{airline.icao}{airline.iata ? ` - ${airline.iata}` : ''}</span
+              >
+            </div>
+          </li>
+        {:else}
+          <li class="relative cursor-pointer rounded-md py-1 pl-8 pr-4">
+            {#if $inputValue}
+              No airlines found.
+            {:else}
+              Start typing to search...
+            {/if}
+          </li>
+        {/each}
+      </div>
+    </ul>
+  {/if}
+  <Form.FieldErrors />
+</Form.Field>
diff --git a/src/lib/components/form-fields/index.ts b/src/lib/components/form-fields/index.ts
index 44f5824..b008266 100644
--- a/src/lib/components/form-fields/index.ts
+++ b/src/lib/components/form-fields/index.ts
@@ -1,3 +1,4 @@
 export { default as AirportField } from './AirportField.svelte';
 export { default as AircraftField } from './AircraftField.svelte';
+export { default as AirlineField } from './AirlineField.svelte';
 export { default as DateTimeField } from './DateTimeField.svelte';
diff --git a/src/lib/components/modals/add-flight/FlightInformation.svelte b/src/lib/components/modals/add-flight/FlightInformation.svelte
index 040e5c6..59475d1 100644
--- a/src/lib/components/modals/add-flight/FlightInformation.svelte
+++ b/src/lib/components/modals/add-flight/FlightInformation.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import * as Accordion from '$lib/components/ui/accordion';
   import * as Form from '$lib/components/ui/form';
   import * as Select from '$lib/components/ui/select';
   import type { SuperForm } from 'sveltekit-superforms';
@@ -7,7 +6,8 @@
   import { Input, Textarea } from '$lib/components/ui/input';
   import { toTitleCase } from '$lib/utils';
   import type { flightSchema } from '$lib/zod/flight';
-  import { AircraftField } from '$lib/components/form-fields';
+  import { AircraftField, AirlineField } from '$lib/components/form-fields';
+  import { Separator } from '$lib/components/ui/separator';
 
   let {
     form,
@@ -17,72 +17,76 @@
   const { form: formData } = form;
 </script>
 
-<Accordion.Item value="flight">
-  <Accordion.Trigger>Flight Information</Accordion.Trigger>
-  <Accordion.Content>
-    <div class="grid gap-4">
-      <AircraftField {form} />
-      <div class="grid grid-cols-[1fr_1fr_1fr] gap-2">
-        <Form.Field {form} name="flightReason">
-          <Form.Control let:attrs>
-            <Form.Label>Flight Reason</Form.Label>
-            <Select.Root
-              selected={{
-                label: $formData.flightReason
-                  ? toTitleCase($formData.flightReason)
-                  : undefined,
-                value: $formData.flightReason,
-              }}
-              onSelectedChange={(value) => {
-                if (value) {
+<section>
+  <h3 class="font-medium">Flight Information</h3>
+  <Separator class="mt-2 mb-3" />
+  <div class="grid gap-4">
+    <AircraftField {form} />
+    <AirlineField {form} />
+    <div class="grid grid-cols-[1fr_1fr_1fr] gap-2">
+      <Form.Field {form} name="flightReason">
+        <Form.Control let:attrs>
+          <Form.Label>Flight Reason</Form.Label>
+          <Select.Root
+            selected={{
+              label: $formData.flightReason
+                ? toTitleCase($formData.flightReason)
+                : undefined,
+              value: $formData.flightReason,
+            }}
+            onSelectedChange={(value) => {
+              if (value) {
+                if (value.value === $formData.flightReason) {
+                  $formData.flightReason = null;
+                } else {
                   $formData.flightReason = value.value;
                 }
-              }}
-            >
-              <Select.Trigger {...attrs}>
-                <Select.Value placeholder="Select reason..." />
-              </Select.Trigger>
-              <Select.Content>
-                <Select.Item value="leisure" label="Leisure" />
-                <Select.Item value="business" label="Business" />
-                <Select.Item value="crew" label="Crew" />
-                <Select.Item value="other" label="Other" />
-              </Select.Content>
-            </Select.Root>
-            <input
-              type="hidden"
-              bind:value={$formData.flightReason}
-              name={attrs.name}
-            />
-          </Form.Control>
-          <Form.FieldErrors />
-        </Form.Field>
-        <Form.Field {form} name="flightNumber">
-          <Form.Control let:attrs>
-            <Form.Label>Flight Number</Form.Label>
-            <Input bind:value={$formData.flightNumber} {...attrs} />
-          </Form.Control>
-          <Form.FieldErrors />
-        </Form.Field>
-        <Form.Field {form} name="aircraftReg">
-          <Form.Control let:attrs>
-            <Form.Label>Aircraft Registration</Form.Label>
-            <Input bind:value={$formData.aircraftReg} {...attrs} />
-          </Form.Control>
-          <Form.FieldErrors />
-        </Form.Field>
-      </div>
-      <Form.Field {form} name="note">
-        <Form.Control let:attrs>
-          <Form.Label>Notes</Form.Label>
-          <Textarea
-            bind:value={$formData.note}
-            class="resize-y h-20 min-h-10 max-h-32"
-            {...attrs}
+              }
+            }}
+          >
+            <Select.Trigger {...attrs}>
+              <Select.Value placeholder="Select reason..." />
+            </Select.Trigger>
+            <Select.Content>
+              <Select.Item value="leisure" label="Leisure" />
+              <Select.Item value="business" label="Business" />
+              <Select.Item value="crew" label="Crew" />
+              <Select.Item value="other" label="Other" />
+            </Select.Content>
+          </Select.Root>
+          <input
+            type="hidden"
+            value={$formData.flightReason}
+            name={attrs.name}
           />
         </Form.Control>
         <Form.FieldErrors />
       </Form.Field>
+      <Form.Field {form} name="flightNumber">
+        <Form.Control let:attrs>
+          <Form.Label>Flight Number</Form.Label>
+          <Input bind:value={$formData.flightNumber} {...attrs} />
+        </Form.Control>
+        <Form.FieldErrors />
+      </Form.Field>
+      <Form.Field {form} name="aircraftReg">
+        <Form.Control let:attrs>
+          <Form.Label>Aircraft Registration</Form.Label>
+          <Input bind:value={$formData.aircraftReg} {...attrs} />
+        </Form.Control>
+        <Form.FieldErrors />
+      </Form.Field>
     </div>
-  </Accordion.Content>
-</Accordion.Item>
+    <Form.Field {form} name="note">
+      <Form.Control let:attrs>
+        <Form.Label>Notes</Form.Label>
+        <Textarea
+          bind:value={$formData.note}
+          class="resize-y h-20 min-h-10 max-h-32"
+          {...attrs}
+        />
+      </Form.Control>
+      <Form.FieldErrors />
+    </Form.Field>
+  </div>
+</section>
diff --git a/src/lib/components/modals/add-flight/OptionalFlightInformation.svelte b/src/lib/components/modals/add-flight/OptionalFlightInformation.svelte
index 0c19b39..9a8e9bb 100644
--- a/src/lib/components/modals/add-flight/OptionalFlightInformation.svelte
+++ b/src/lib/components/modals/add-flight/OptionalFlightInformation.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import * as Accordion from '$lib/components/ui/accordion';
   import SeatInformation from '$lib/components/modals/add-flight/SeatInformation.svelte';
   import type { SuperForm } from 'sveltekit-superforms';
   import { z } from 'zod';
@@ -13,7 +12,5 @@
   } = $props();
 </script>
 
-<Accordion.Root>
-  <SeatInformation {form} />
-  <FlightInformation {form} />
-</Accordion.Root>
+<SeatInformation {form} />
+<FlightInformation {form} />
diff --git a/src/lib/components/modals/add-flight/SeatInformation.svelte b/src/lib/components/modals/add-flight/SeatInformation.svelte
index fce25f1..2169a1c 100644
--- a/src/lib/components/modals/add-flight/SeatInformation.svelte
+++ b/src/lib/components/modals/add-flight/SeatInformation.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import * as Accordion from '$lib/components/ui/accordion';
   import * as Form from '$lib/components/ui/form';
   import * as Select from '$lib/components/ui/select';
   import type { SuperForm } from 'sveltekit-superforms';
@@ -7,6 +6,7 @@
   import { Input } from '$lib/components/ui/input';
   import { toTitleCase } from '$lib/utils';
   import type { flightSchema } from '$lib/zod/flight';
+  import { Separator } from '$lib/components/ui/separator';
 
   let {
     form,
@@ -16,9 +16,10 @@
   const { form: formData } = form;
 </script>
 
-<Accordion.Item value="seat">
-  <Accordion.Trigger>Seat Information</Accordion.Trigger>
-  <Accordion.Content>
+<section>
+  <h3 class="font-medium">Seat Information</h3>
+  <Separator class="my-2" />
+  <div class="grid gap-4">
     <div class="grid grid-cols-[1fr_1fr_1fr] gap-2">
       <Form.Field {form} name="seat">
         <Form.Control let:attrs>
@@ -30,7 +31,11 @@
             }}
             onSelectedChange={(value) => {
               if (value) {
-                $formData.seat = value.value;
+                if (value.value === $formData.seat) {
+                  $formData.seat = null;
+                } else {
+                  $formData.seat = value.value;
+                }
               }
             }}
           >
@@ -44,7 +49,7 @@
               <Select.Item value="other" label="Other" />
             </Select.Content>
           </Select.Root>
-          <input type="hidden" bind:value={$formData.seat} name={attrs.name} />
+          <input type="hidden" value={$formData.seat} name={attrs.name} />
         </Form.Control>
         <Form.FieldErrors />
       </Form.Field>
@@ -67,7 +72,11 @@
             }}
             onSelectedChange={(value) => {
               if (value) {
-                $formData.seatClass = value.value;
+                if (value.value === $formData.seatClass) {
+                  $formData.seatClass = null;
+                } else {
+                  $formData.seatClass = value.value;
+                }
               }
             }}
           >
@@ -82,14 +91,10 @@
               <Select.Item value="private" label="Private" />
             </Select.Content>
           </Select.Root>
-          <input
-            type="hidden"
-            bind:value={$formData.seatClass}
-            name={attrs.name}
-          />
+          <input type="hidden" value={$formData.seatClass} name={attrs.name} />
         </Form.Control>
         <Form.FieldErrors />
       </Form.Field>
     </div>
-  </Accordion.Content>
-</Accordion.Item>
+  </div>
+</section>
diff --git a/src/lib/components/modals/edit-flight/EditFlightModal.svelte b/src/lib/components/modals/edit-flight/EditFlightModal.svelte
index ceff11e..be70a55 100644
--- a/src/lib/components/modals/edit-flight/EditFlightModal.svelte
+++ b/src/lib/components/modals/edit-flight/EditFlightModal.svelte
@@ -2,11 +2,7 @@
   import type { FlightData } from '$lib/utils';
   import * as Dialog from '$lib/components/ui/dialog';
   import * as Form from '$lib/components/ui/form';
-  import SuperDebug, {
-    defaults,
-    type Infer,
-    superForm,
-  } from 'sveltekit-superforms';
+  import { defaults, type Infer, superForm } from 'sveltekit-superforms';
   import { zod } from 'sveltekit-superforms/adapters';
   import { flightSchema } from '$lib/zod/flight';
   import { buttonVariants } from '$lib/components/ui/button';
@@ -14,7 +10,7 @@
   import { AirportField, DateTimeField } from '$lib/components/form-fields';
   import OptionalFlightInformation from '$lib/components/modals/add-flight/OptionalFlightInformation.svelte';
   import { toast } from 'svelte-sonner';
-  import { page } from '$app/stores';
+  import { trpc } from '$lib/trpc';
 
   const timeFormatter = new Intl.DateTimeFormat(undefined, {
     timeZone: 'UTC',
@@ -43,14 +39,21 @@
       : null,
   };
 
+  let open = $state(false);
+
   const form = superForm(
     defaults<Infer<typeof flightSchema>>(schemaFlight, zod(flightSchema)),
     {
       id: String(flight.id),
       validators: zod(flightSchema),
+      onSubmit({ formData }) {
+        formData.set('id', String(flight.id));
+      },
       onUpdated({ form }) {
         if (form.message) {
           if (form.message.type === 'success') {
+            trpc.flight.list.utils.invalidate();
+            open = false;
             return void toast.success(form.message.text);
           }
           toast.error(form.message.text);
@@ -58,10 +61,10 @@
       },
     },
   );
-  const { form: formData, enhance, errors } = form;
+  const { enhance } = form;
 </script>
 
-<Dialog.Root>
+<Dialog.Root bind:open closeOnOutsideClick={false} preventScroll={false}>
   <Dialog.Trigger class={buttonVariants({ variant: 'outline', size: 'icon' })}>
     <SquarePen size="20" />
   </Dialog.Trigger>
diff --git a/src/lib/components/modals/list-flights/ListFlightsModal.svelte b/src/lib/components/modals/list-flights/ListFlightsModal.svelte
index 2f1c405..e79cbc0 100644
--- a/src/lib/components/modals/list-flights/ListFlightsModal.svelte
+++ b/src/lib/components/modals/list-flights/ListFlightsModal.svelte
@@ -6,7 +6,6 @@
     PlaneTakeoff,
     PlaneLanding,
     CircleFadingPlus,
-    SquarePen,
     X,
   } from '@o7/icon/lucide';
   import dayjs from 'dayjs';
@@ -14,16 +13,12 @@
   import { Separator } from '$lib/components/ui/separator';
   import { Button } from '$lib/components/ui/button';
   import { LabelledSeparator } from '$lib/components/ui/separator/index.js';
-  import {
-    airlineFromICAO,
-    cn,
-    type FlightData,
-    isUsingAmPm,
-  } from '$lib/utils';
+  import { cn, type FlightData, isUsingAmPm } from '$lib/utils';
   import * as Tooltip from '$lib/components/ui/tooltip';
   import { formatSeat } from '$lib/utils/data/data';
   import { Confirm } from '$lib/components/helpers';
   import { EditFlightModal } from '$lib/components/modals';
+  import { airlineFromICAO } from '$lib/utils/data/airlines';
 
   dayjs.extend(duration);
 
@@ -141,7 +136,7 @@
     const observer = new MutationObserver(() => {
       const headings = document.querySelectorAll('h2');
       editModalOpen = Array.from(headings).some(
-        (heading) => heading?.textContent?.trim() === 'Edit flight',
+        (heading) => heading?.textContent?.trim() === 'Edit Flight',
       );
     });
 
@@ -261,15 +256,15 @@
 {/snippet}
 
 {#snippet seatAndAirline(flight)}
-  {#if flight.seat}
-    <Tooltip.AutoTooltip text={flight.seat} classes="text-sm truncate" />
+  {#if flight.seat || flight.airline}
+    <Tooltip.AutoTooltip
+      text={flight.seat ?? flight.airline.name}
+      classes="text-sm truncate"
+    />
   {:else}
-    <Button class="justify-start px-1" variant="ghost" size="sm">
-      <CircleFadingPlus size="16" class="mr-1" />
-      Add seat
-    </Button>
+    <p class="text-sm text-transparent">.</p>
   {/if}
-  {#if flight.airline}
+  {#if flight.airline && flight.seat}
     <Tooltip.AutoTooltip
       text={flight.airline.name}
       classes="text-sm text-muted-foreground truncate"
diff --git a/src/lib/components/modals/settings/pages/users-page/AddUserModal.svelte b/src/lib/components/modals/settings/pages/users-page/AddUserModal.svelte
index 8da93e0..77ef135 100644
--- a/src/lib/components/modals/settings/pages/users-page/AddUserModal.svelte
+++ b/src/lib/components/modals/settings/pages/users-page/AddUserModal.svelte
@@ -37,7 +37,6 @@
   );
 
   const { form: formData, enhance, submitting } = form;
-  $inspect(formData);
 </script>
 
 <Modal bind:open>
diff --git a/src/lib/import/fr24.ts b/src/lib/import/fr24.ts
index a51c38c..543ca56 100644
--- a/src/lib/import/fr24.ts
+++ b/src/lib/import/fr24.ts
@@ -2,6 +2,7 @@ import { airportFromICAO, parseCsv, toISOString } from '$lib/utils';
 import { z } from 'zod';
 import dayjs from 'dayjs';
 import type { Flight } from '$lib/db';
+import { airlineFromICAO } from '$lib/utils/data/airlines';
 
 const FR24_AIRPORT_REGEX = /\((?<IATA>[a-zA-Z]{3})\/(?<ICAO>[a-zA-Z]{4})\)/;
 const FR24_SEAT_TYPE_MAP: Record<string, Flight['seat']> = {
@@ -142,7 +143,12 @@ export const processFR24File = async (content: string) => {
     const flightReason =
       FR24_FLIGHT_REASON_MAP?.[row.flight_reason ?? 'noop'] ?? null;
 
-    const airline = row.airline ? extractAirlineICAO(row.airline) : null;
+    let airline = row.airline ? extractAirlineICAO(row.airline) : null;
+    if (airline && !airlineFromICAO(airline)) {
+      console.warn(`Unknown airline ICAO code: ${airline}`);
+      airline = null;
+    }
+
     const aircraft = row.aircraft ? extractAircraftICAO(row.aircraft) : null;
 
     flights.push({
diff --git a/src/lib/utils/data/airlines.ts b/src/lib/utils/data/airlines.ts
new file mode 100644
index 0000000..fdda9db
--- /dev/null
+++ b/src/lib/utils/data/airlines.ts
@@ -0,0 +1,7 @@
+import { AIRLINES } from '$lib/data/airlines';
+
+export type Airline = (typeof AIRLINES)[number];
+
+export const airlineFromICAO = (icao: string): Airline | null => {
+  return AIRLINES.find((airline) => airline.icao === icao) ?? null;
+};
diff --git a/src/lib/utils/data/data.ts b/src/lib/utils/data/data.ts
index a157091..00aff8d 100644
--- a/src/lib/utils/data/data.ts
+++ b/src/lib/utils/data/data.ts
@@ -222,19 +222,17 @@ export const formatSeat = (f: FlightData) => {
       ? `${f.seat} ${f.seatNumber}`
       : f.seat && f.seatClass
         ? `${t(f.seatClass)} (${f.seat})`
-        : f.seat
-          ? f.seat
-          : null;
+        : f.seatClass
+          ? t(f.seatClass)
+          : f.seat
+            ? t(f.seat)
+            : null;
 };
 
 export const airportFromICAO = (icao: string): Airport | undefined => {
   return AIRPORTS.find((airport) => airport.ICAO === icao);
 };
 
-export const airlineFromICAO = (icao: string) => {
-  return AIRLINES.find((airline) => airline.icao === icao) ?? null;
-};
-
 const cacheOptions = {
   max: 100,
 };
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index cf6f877..9387dc0 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -7,7 +7,6 @@ export {
   prepareFlightArcData,
   prepareVisitedAirports,
   airportFromICAO,
-  airlineFromICAO,
 } from './data/data';
 export { distanceBetween, linearClamped } from './distance';
 export { toISOString, isUsingAmPm } from './datetime';
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index 3e62cd0..2f4ee0c 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -23,7 +23,8 @@ export const load: PageServerLoad = async (event) => {
 
 export const actions: Actions = {
   'save-flight': async ({ locals, request }) => {
-    const form = await superValidate(request, zod(flightSchema));
+    const formData = await request.formData();
+    const form = await superValidate(formData, zod(flightSchema));
     if (!form.valid) return fail(400, { form });
 
     const user = locals.user;
@@ -113,32 +114,59 @@ export const actions: Actions = {
       seatNumber,
       seatClass,
       flightNumber,
+      aircraft,
       aircraftReg,
+      airline,
       flightReason,
       note,
     } = form.data;
 
+    const values = {
+      userId: user.id,
+      from,
+      to,
+      duration,
+      departure: departure ? toISOString(departure) : null,
+      arrival: arrival ? toISOString(arrival) : null,
+      date: departureDate.format('YYYY-MM-DD'),
+      seat,
+      seatNumber,
+      seatClass,
+      flightNumber,
+      aircraft,
+      aircraftReg,
+      airline,
+      flightReason,
+      note,
+    };
+
+    const fId = formData.get('id');
+    if (fId && !isNaN(+fId)) {
+      const resp = await db
+        .updateTable('flight')
+        .set(values)
+        .where('id', '=', +fId)
+        .executeTakeFirst();
+
+      if (!resp) {
+        return message(form, {
+          type: 'error',
+          text: 'Failed to update flight',
+        });
+      }
+
+      return message(form, {
+        type: 'success',
+        text: 'Flight updated successfully',
+      });
+    }
+
     const resp = await db
       .insertInto('flight')
-      .values({
-        userId: user.id,
-        from,
-        to,
-        duration,
-        departure: departure ? toISOString(departure) : null,
-        arrival: arrival ? toISOString(arrival) : null,
-        date: departureDate.format('YYYY-MM-DD'),
-        seat,
-        seatNumber,
-        seatClass,
-        flightNumber,
-        aircraftReg,
-        flightReason,
-        note,
-      })
-      .execute();
-
-    if (resp.length === 0) {
+      .values(values)
+      .executeTakeFirst();
+
+    if (!resp) {
       return message(form, { type: 'error', text: 'Failed to add flight' });
     }