From 49eb964ed8ac928d1256a27e22890ab5ddffd3e7 Mon Sep 17 00:00:00 2001
From: sam <sam@sleepycat.moe>
Date: Mon, 14 Aug 2023 02:32:58 +0200
Subject: [PATCH] feat: allow user to pick timezone manually

---
 .../routes/@[username]/edit/other/+page.svelte    | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/src/routes/@[username]/edit/other/+page.svelte b/frontend/src/routes/@[username]/edit/other/+page.svelte
index b653010..fe659c4 100644
--- a/frontend/src/routes/@[username]/edit/other/+page.svelte
+++ b/frontend/src/routes/@[username]/edit/other/+page.svelte
@@ -42,6 +42,8 @@
   let displayTimezone = "";
   $: setTime($user.timezone);
 
+  const validTimezones = Intl.supportedValuesOf("timeZone");
+
   const detectTimezone = () => {
     $user.timezone = DateTime.local().zoneName;
   };
@@ -147,14 +149,21 @@
       </p>
       <InputGroup>
         <Button on:click={detectTimezone}>Detect timezone</Button>
-        <Input disabled value={$user.timezone !== null ? $user.timezone : "Unset"} />
+        <Input list="timezones" bind:value={$user.timezone} />
+        <datalist id="timezones">
+          {#each validTimezones as timezone}<option value={timezone} />{/each}
+        </datalist>
         <Button on:click={() => ($user.timezone = null)}>Reset</Button>
       </InputGroup>
       <p class="mt-2">
         {#if $user.timezone}
           This will show up on your profile like this:
-          <Icon name="clock" aria-hidden />
-          {currentTime} <span class="text-body-secondary">(UTC{displayTimezone})</span>
+          {#if validTimezones.some((zone) => zone === $user.timezone)}
+            <Icon name="clock" aria-hidden />
+            {currentTime} <span class="text-body-secondary">(UTC{displayTimezone})</span>
+          {:else}
+            <i>not a valid timezone</i>
+          {/if}
           <br />
         {/if}
         <span class="text-muted">