Remove unused 500

rename MenuList to MenuItemGrid to represent the component better
Adjust 404 page

front/src/pages/404.svelte

@@ -4,7 +4,7 @@
 
 <div>
     <h1>You're lost!&nbsp;<SmileySad weight="fill" /></h1>
-    <p>Error 404</p>
+    <p>Error ForOhFor</p>
 </div>
 
 <style lang="scss">

front/src/pages/500.svelte

@@ -1,32 +0,0 @@
-<script lang="ts">
-    import { SmileySad } from "phosphor-svelte";
-</script>
-
-<div>
-    <h1>Server Fucking Died!&nbsp;<SmileySad weight="fill" /></h1>
-    <p>Error 500</p>
-</div>
-
-<style lang="scss">
-    @import "../styles/vars";
-
-    div {
-        height: 400px;
-
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-    }
-    h1 {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        font-size: $font-size-very-fucking-big;
-        text-align: center;
-    }
-    p {
-        text-align: center;
-    }
-</style>

front/src/pages/Cart.svelte

@@ -5,7 +5,7 @@
     import { type CartItem } from "../lib/types";
     import { getPopularToday } from "../lib/test-api";
     import Cart, { cartLoaded } from "../lib/cart";
-    import MenuList from "../components/MenuList.svelte";
+    import MenuItemGrid from "../components/MenuItemGrid.svelte";
     import BasketItem from "../components/BasketItem.svelte";
     import DropDown from "../components/DropDown.svelte";
 
@@ -53,7 +53,7 @@
 {#await popularToday}
     <p>Loading</p>
 {:then popularToday}
-    <MenuList items={popularToday} />
+    <MenuItemGrid items={popularToday} />
 {/await}
 
 <div class="spacer" />

front/src/pages/Index.svelte

@@ -7,16 +7,16 @@
     import { getPopularToday } from "../lib/test-api";
     import AnnouncementBanner from "../components/AnnouncementBanner.svelte";
     import LoadingBar from "../components/LoadingBar.svelte";
-    import MenuList from "../components/MenuList.svelte";
+    import MenuItemGrid from "../components/MenuItemGrid.svelte";
 
     let items = getPopularToday();
 
     onMount(() => {
-        let map = L.map('map').setView([50.82304922105467, -0.432780150496344], 13);
+        const maxZoom = 20;
-        L.tileLayer(
+        const attribution = "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a>";
-            'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+        const map = L.map('map').setView([50.82304922105467, -0.432780150496344], 13);
-            {maxZoom: 19, attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'}
+
-        ).addTo(map);
+        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom, attribution}).addTo(map);
         L.marker([50.82304922105467, -0.432780150496344]).addTo(map);
 
     });
@@ -63,7 +63,7 @@
     {#await items}
         <LoadingBar />
     {:then items}
-        <MenuList {items} />
+        <MenuItemGrid {items} />
     {:catch error}
         <p>{error}</p>
     {/await}

front/src/pages/Item.svelte

@@ -6,7 +6,7 @@
     import { Labels } from "../lib/types";
     import { getPopularToday, getItemByUUID } from "../lib/test-api";
     import Cart, { cartLoaded } from "../lib/cart";
-    import MenuList from "../components/MenuList.svelte";
+    import MenuItemGrid from "../components/MenuItemGrid.svelte";
     import LoadingBar from "../components/LoadingBar.svelte";
     import LoadingImage from "/assets/MenuItemLoading.svg";
 
@@ -164,7 +164,7 @@
         {#await popularToday}
             <LoadingBar />
         {:then items}
-            <MenuList {items} />
+            <MenuItemGrid {items} />
         {:catch error}
             <p>{error}</p>
         {/await}

front/src/pages/Menu.svelte

@@ -3,7 +3,7 @@
 
     import { getMenuItems } from "../lib/test-api";
     import LoadingBar from "../components/LoadingBar.svelte";
-    import MenuList from "../components/MenuList.svelte";
+    import MenuList from "../components/MenuItemGrid.svelte";
     import DropDown from "../components/DropDown.svelte";
 
     let items = getMenuItems();

front/src/routes.js

@@ -2,7 +2,6 @@ import { wrap } from "svelte-spa-router/wrap";
 
 import PageLoading from "./pages/Loading.svelte";
 import Page404 from "./pages/404.svelte";
-import Page500 from "./pages/500.svelte";
 
 const routes = {
     "/": wrap({
@@ -41,22 +40,17 @@ const routes = {
         conditions: [],
         userData: { showNavBar: true, fullWidth: false },
     }),
+    "/cart/checkout": wrap({
+        component: Page404,
+        conditions: [],
+        userData: { showNavBar: false, fullWidth: true },
+    }),
     "/booking": wrap({
         asyncComponent: () => import("./pages/Booking.svelte"),
         loadingComponent: PageLoading,
         conditions: [],
         userData: { showNavBar: true, fullWidth: true },
     }),
-    "/ForOhFor": wrap({
-        component: Page404,
-        conditions: [],
-        userData: { showNavBar: true, fullWidth: false },
-    }),
-    "/ServerError": wrap({
-        component: Page500,
-        conditions: [],
-        userData: { showNavBar: true, fullWidth: false },
-    }),
     "*": wrap({
         component: Page404,
         conditions: [],