@@ -33,7 +39,7 @@ export function Settings() {
{SECTIONS.map((s) => (
+
+ );
+}
+
+// A compact colour picker showing circular swatches only (no text).
+function ColorSelect({ value, onChange }: { value: string; onChange: (hex: string) => void }) {
+ const [open, setOpen] = useState(false);
+ const palette: [string, string][] = CAL_COLORS.some(([, hex]) => hex === value)
+ ? CAL_COLORS
+ : [["Custom", value], ...CAL_COLORS];
+ return (
+
+
+ {open && (
+ <>
+
setOpen(false)} />
+
+ {palette.map(([name, hex]) => (
+
+
+ )}
+
+ );
+}
+
+function ConfirmDialog({
+ title,
+ message,
+ confirmLabel,
+ onConfirm,
+ onCancel,
+}: {
+ title: string;
+ message: string;
+ confirmLabel: string;
+ onConfirm: () => void;
+ onCancel: () => void;
+}) {
+ const t = useT();
+ return (
+
+
e.stopPropagation()}
+ >
+
{title}
+
{message}
+
+
+
+
+
+
+ );
+}
+
function SettingsToggle({
checked,
onChange,
@@ -699,9 +816,41 @@ const TZ_RAW: string[] = (() => {
return [];
}
})();
-const TZ_LIST = TZ_RAW.length
+const TZ_ZONES = TZ_RAW.length
? TZ_RAW
: ["UTC", "Europe/London", "Europe/Warsaw", "America/New_York", "Asia/Tokyo"];
+
+// The GMT offset code (e.g. "GMT+2") for a zone, as shown next to its name.
+function tzGmt(zone: string): string {
+ try {
+ const parts = new Intl.DateTimeFormat("en-US", {
+ timeZone: zone,
+ timeZoneName: "shortOffset",
+ }).formatToParts(new Date());
+ return parts.find((p) => p.type === "timeZoneName")?.value ?? "";
+ } catch {
+ return "";
+ }
+}
+
+function tzLongName(zone: string): string {
+ try {
+ const parts = new Intl.DateTimeFormat("en-US", {
+ timeZone: zone,
+ timeZoneName: "long",
+ }).formatToParts(new Date());
+ return parts.find((p) => p.type === "timeZoneName")?.value ?? zone;
+ } catch {
+ return zone;
+ }
+}
+
+// [zone, "Long Name (GMT+2)"] sorted by offset then label, computed once.
+const TZ_LIST: [string, string][] = TZ_ZONES.map((z): [string, string] => {
+ const gmt = tzGmt(z);
+ return [z, gmt ? `${tzLongName(z)} (${gmt})` : tzLongName(z)];
+}).sort((a, b) => a[1].localeCompare(b[1]));
+
const REMINDER_OPTS = [0, 5, 10, 15, 30, 60, 120, 1440, 2880];
function reminderText(m: number): string {
@@ -772,6 +921,11 @@ function CalendarList({
queryClient.invalidateQueries({ queryKey: ["calendars"] });
},
});
+ const [removeSub, setRemoveSub] = useState
(null);
+ const removeCal = useMutation({
+ mutationFn: (id: string) => api.deleteCalendar(id),
+ onSuccess: () => queryClient.invalidateQueries({ queryKey: ["calendars"] }),
+ });
const subscriptions = calendars.filter((c) => c.subscription_url !== null);
const accounts: [string, string][] = [
["Google", "google"],
@@ -856,11 +1010,7 @@ function CalendarList({