Added new regions

src/routes/log/+page.svelte

@@ -158,7 +158,7 @@
   }
 </script>
 
-<div class="fixed bottom-4 right-4">
+<div class="fixed bottom-4 right-4 z-[999]">
   <div class="flex flex-row items-center justify-center gap-4">
     <div class="dropdown dropdown-top dropdown-end">
       <div tabindex="0" role="button" class="btn m-1 size-16 btn-primary">

src/routes/planner/+page.svelte

@@ -189,7 +189,7 @@
   <SucessToast action={toastAction} />
 {/if}
 
-<div class="fixed bottom-4 right-4">
+<div class="fixed bottom-4 right-4 z-[999]">
   <div class="flex flex-row items-center justify-center gap-4">
     <div class="dropdown dropdown-top dropdown-end">
       <div tabindex="0" role="button" class="btn m-1 size-16 btn-primary">

src/routes/worldtravel/[countrycode]/+page.server.ts

@@ -1,20 +1,29 @@
-import { db } from '$lib/db/db.server.js';
-import { userVisitedWorldTravel, worldTravelCountryRegions } from '$lib/db/schema.js';
-import { and, eq } from 'drizzle-orm';
-import type { PageServerLoad } from './$types';
-
-export const load: PageServerLoad  = async ({ params, locals })  => {
+import { db } from "$lib/db/db.server.js";
+import {
+  userVisitedWorldTravel,
+  worldTravelCountries,
+  worldTravelCountryRegions,
+} from "$lib/db/schema.js";
+import { and, eq } from "drizzle-orm";
+import type { PageServerLoad } from "./$types";
 
+export const load: PageServerLoad = async ({ params, locals }) => {
   const { countrycode } = params;
-    let data = await db
+  let data = await db
     .select()
     .from(worldTravelCountryRegions)
-    .where(eq(worldTravelCountryRegions.country_code, countrycode))
+    .where(eq(worldTravelCountryRegions.country_code, countrycode));
 
-    let visitedRegions: { id: number; userId: string; region_id: string; }[] = [];
-    if (locals.user) {
-      let countryCode = params.countrycode
-      visitedRegions = await db
+  let countryName = await db
+    .select()
+    .from(worldTravelCountries)
+    .where(eq(worldTravelCountries.country_code, countrycode))
+    .execute();
+
+  let visitedRegions: { id: number; userId: string; region_id: string }[] = [];
+  if (locals.user) {
+    let countryCode = params.countrycode;
+    visitedRegions = await db
       .select()
       .from(userVisitedWorldTravel)
       .where(
@@ -24,11 +33,12 @@ export const load: PageServerLoad  = async ({ params, locals })  => {
         )
       )
       .execute();
-    }
+  }
 
   return {
-      regions : data,
-      countrycode: countrycode,
-      visitedRegions: visitedRegions,
+    regions: data,
+    countrycode: countrycode,
+    visitedRegions: visitedRegions,
+    countryName: countryName[0].name,
   };
-}
+};

src/routes/worldtravel/[countrycode]/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   export let data;
   import AdventureCard from "$lib/components/AdventureCard.svelte";
-  import { countryCodeToName } from "$lib";
   import { getFlag } from "$lib";
   import { goto } from "$app/navigation";
   import { onMount } from "svelte";
@@ -57,7 +56,7 @@
 </script>
 
 <h1 class="text-center text-4xl font-bold">
-  Regions in {countryCodeToName(data.countrycode)}
+  Regions in {data.countryName}
   <img
     src={getFlag(40, data.countrycode)}
     class="inline-block -mt-1 mr-1"
@@ -109,11 +108,9 @@
 {/if}
 
 <svelte:head>
-  <title>{countryCodeToName(data.countrycode)} Regions | AdventureLog</title>
+  <title>{data.countryName} Regions | AdventureLog</title>
   <meta
     name="description"
-    content="Explore the regions in {countryCodeToName(
-      data.countrycode
-    )} and add them to your visited list!"
+    content="Explore the regions in {data.countryName} and add them to your visited list!"
   />
 </svelte:head>