From f82b669fe2536dd1dbbed0d54a460cc866e5d185 Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Mon, 8 Jun 2026 03:39:06 -0400
Subject: [PATCH] feat(GeneralPage): implement timezone selection with dynamic
 loading and error handling

---
 src/app/components/GeneralPage.tsx | 51 ++++++++++++++++++++++++++----
 1 file changed, 44 insertions(+), 7 deletions(-)

diff --git a/src/app/components/GeneralPage.tsx b/src/app/components/GeneralPage.tsx
index d042565..498eab7 100644
--- a/src/app/components/GeneralPage.tsx
+++ b/src/app/components/GeneralPage.tsx
@@ -1,9 +1,30 @@
+import { useEffect, useState } from 'react';
+import { getFileContents } from '../webdav';
+
 interface GeneralPageProps {
   config: any;
   setConfig: (config: any) => void;
 }
 
 export default function GeneralPage({ config, setConfig }: GeneralPageProps) {
+  const [timezones, setTimezones] = useState<string[] | null>(null);
+  const [tzError, setTzError] = useState(false);
+
+  useEffect(() => {
+    getFileContents('/.sys/timezones.json')
+      .then(async (blob) => {
+        const parsed = JSON.parse(await blob.text());
+        if (Array.isArray(parsed)) {
+          setTimezones(parsed.map((e: any) => (typeof e === 'string' ? e : String(e.name ?? e.value ?? e))));
+        } else if (parsed && typeof parsed === 'object') {
+          setTimezones(Object.keys(parsed));
+        } else {
+          setTzError(true);
+        }
+      })
+      .catch(() => setTzError(true));
+  }, []);
+
   const updateSetting = (path: string[], value: any) => {
     const newConfig = JSON.parse(JSON.stringify(config));
     let current = newConfig;
@@ -51,13 +72,29 @@ export default function GeneralPage({ config, setConfig }: GeneralPageProps) {
 
         <div className="p-4">
           <label className="text-sm text-neutral-500 block mb-2">Timezone</label>
-          <input
-            type="text"
-            value={general.timezone || ''}
-            onChange={(e) => updateSetting(['general', 'timezone'], e.target.value)}
-            placeholder="America/Los_Angeles"
-            className="w-full px-3 py-2 border border-neutral-300 rounded-lg"
-          />
+          {!tzError && timezones ? (
+            <select
+              value={general.timezone || ''}
+              onChange={(e) => updateSetting(['general', 'timezone'], e.target.value)}
+              className="w-full px-3 py-2 border border-neutral-300 rounded-lg"
+            >
+              {general.timezone && !timezones.includes(general.timezone) && (
+                <option value={general.timezone}>{general.timezone}</option>
+              )}
+              {timezones.map((tz) => (
+                <option key={tz} value={tz}>{tz}</option>
+              ))}
+            </select>
+          ) : (
+            <input
+              type="text"
+              value={general.timezone || ''}
+              onChange={(e) => updateSetting(['general', 'timezone'], e.target.value)}
+              placeholder={timezones === null && !tzError ? 'Loading…' : 'America/Los_Angeles'}
+              disabled={timezones === null && !tzError}
+              className="w-full px-3 py-2 border border-neutral-300 rounded-lg disabled:opacity-50"
+            />
+          )}
         </div>
 
         <div className="p-4">