feat: Timezone tool addition

Author: smithg09

README.md

@@ -55,6 +55,7 @@ Devbox is a lightweight, cross-platform desktop application built with Tauri (Ru
 - [x] DNS Lookup Tool
 - [x] Certificate Decoder X.509
 - [x] JSON Formatter
+- [x] Timezone
 - [ ] Diff tools
 - [ ] CSS Playground
 - [ ] Color Testing
@@ -74,6 +75,5 @@ Devbox is a lightweight, cross-platform desktop application built with Tauri (Ru
 - [ ] JSON <> YAML
 - [ ] Hashing Text
 - [ ] Hasing Files
-- [ ] Timezone
 - [ ] WebSocket Client
 - [ ] Mock API Server / Webhook test

package.json

@@ -43,7 +43,9 @@
     "chart.js": "^4.5.0",
     "chartjs-chart-treemap": "^3.1.0",
     "chroma-js": "^2.4.2",
+    "city-timezones": "^1.3.1",
     "clsx": "^2.1.0",
+    "countries-and-timezones": "^3.6.0",
     "cron-parser": "^4.9.0",
     "cronstrue": "^2.48.0",
     "date-fns": "^3.6.0",

src/App.module.css

@@ -18,3 +18,20 @@
   width: 100%;
   overflow: hidden;
 }
+
+.buttonRoot {
+  &[data-variant='danger'] {
+    background-color: var(--mantine-color-red-8);
+    color: var(--mantine-color-white);
+    &:hover {
+      background-color: var(--mantine-color-red-9);
+    }
+  }
+  /* Override default disabled styles */
+  &[data-variant='danger']:disabled {
+    background-color: transparent;
+    color: var(--mantine-color-white);
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}

src/Components/AppRoutes.tsx

@@ -27,6 +27,7 @@ const componentMap = {
   "url-encoder": loadable(() => import("@/Features/url/UrlEncoder")) as React.ComponentType,
   "certificate-decoder": loadable(() => import("../Features/x509/X509")) as React.ComponentType,
   "json-formatter": loadable(() => import("../Features/json/JsonFormatter")) as React.ComponentType,
+  timezone: loadable(() => import("@/Features/timezone/Timezone")) as React.ComponentType,
 };
 // Dynamically create lazy-loaded components
 const routes = tools

src/Features/cron/utils/cronHelpers.ts

@@ -1,7 +1,7 @@
 import parser from "cron-parser";
 import cronstrue from "cronstrue";
-import { formatDistance, format } from "date-fns";
-import { CronValidation, CronExecution } from "../types/cron.types";
+import { format, formatDistance } from "date-fns";
+import { CronExecution, CronValidation } from "../types/cron.types";
 
 export const validateCronExpression = (expression: string): CronValidation => {
   try {
@@ -31,10 +31,6 @@ export const getNextExecutions = (expression: string, count: number = 3): CronEx
 
     for (let i = 0; i < count; i++) {
       const nextDate = interval.next().toDate();
-      console.log(
-        "Next execution date:",
-        formatDistance(new Date(), nextDate, { addSuffix: true })
-      );
       executions.push({
         date: nextDate,
         humanReadable: format(nextDate, "yyyy-MM-dd HH:mm:ss"),

src/Features/ssh/hooks/useKeyGeneration.ts

@@ -1,5 +1,5 @@
-import { useState, useCallback } from "react";
-import { KeyGenerationOptions, GeneratedKeyPair } from "../types/ssh";
+import { useCallback, useState } from "react";
+import { GeneratedKeyPair, KeyGenerationOptions } from "../types/ssh";
 import { generateKeyPair } from "../utils/crypto";
 
 export function useKeyGeneration() {
@@ -12,12 +12,9 @@ export function useKeyGeneration() {
     setError(null);
 
     try {
-      console.log("Generating keys with options:", options);
       const keyPair = await generateKeyPair(options);
-      console.log("Key generation successful");
       setGeneratedKeys(keyPair);
     } catch (err) {
-      console.error("Key generation failed:", err);
       setError(err instanceof Error ? err.message : "Failed to generate key pair");
     } finally {
       setIsGenerating(false);

src/Features/timezone/Timezone.tsx

@@ -0,0 +1,119 @@
+import { settingsStore } from "@/utils/store";
+import { Button, Group, SegmentedControl, Stack } from "@mantine/core";
+import { useEffect, useState } from "react";
+import TimezonesBoard from "./components/TimezonesBoard";
+import { TimeFormat, TIMEZONE_PREFERENCES_KEY, TimezonePreferencesV1, TimezoneRow } from "./types";
+
+const DEFAULT_PREFS: TimezonePreferencesV1 = {
+  version: 1,
+  rows: [{ id: crypto.randomUUID(), label: "India", timeZone: "Asia/Kolkata" }],
+  timeFormat: "h24",
+  lastReferenceIso: undefined,
+  sliderZoom: "hours",
+};
+
+export default function Timezone() {
+  const [preferences, setPreferences] = useState<TimezonePreferencesV1>(DEFAULT_PREFS);
+  const [reference, setReference] = useState<Date>(() =>
+    preferences.lastReferenceIso ? new Date(preferences.lastReferenceIso) : new Date()
+  );
+  const [live, setLive] = useState<boolean>(true);
+
+  // Keep reference ticking in live mode
+  useEffect(() => {
+    if (!live) return;
+    const interval = 30000;
+    const id = window.setInterval(() => setReference(new Date()), interval);
+    return () => window.clearInterval(id);
+  }, [live]);
+  useEffect(() => {
+    let mounted = true;
+    (async () => {
+      const saved = await settingsStore.get<TimezonePreferencesV1>(TIMEZONE_PREFERENCES_KEY);
+      if (mounted && saved && saved.version === 1) {
+        setPreferences(saved);
+        setReference(saved.lastReferenceIso ? new Date(saved.lastReferenceIso) : new Date());
+      }
+    })();
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    const toSave: TimezonePreferencesV1 = {
+      ...preferences,
+      lastReferenceIso: reference.toISOString(),
+    };
+    settingsStore.update(TIMEZONE_PREFERENCES_KEY, toSave);
+  }, [preferences, reference]);
+
+  const handleAdd = () => {
+    // Add a draft row that will render inline editor
+    const draft: TimezoneRow = {
+      id: crypto.randomUUID(),
+      label: "",
+      timeZone: "UTC",
+      isDraft: true,
+      isNew: true,
+    };
+    setPreferences(prev => ({ ...prev, rows: [...prev.rows, draft] }));
+  };
+
+  const handleRemove = (id: string) => {
+    setPreferences(prev => ({ ...prev, rows: prev.rows.filter(r => r.id !== id) }));
+  };
+
+  return (
+    <Stack className="overflow-padding overflow-auto" h="100%" gap="md" pt="xl">
+      <Group justify="space-between" wrap="nowrap">
+        <Group>
+          <SegmentedControl
+            data={[
+              { value: "h12", label: "12h" },
+              { value: "h24", label: "24h" },
+            ]}
+            value={preferences.timeFormat}
+            onChange={e => {
+              setPreferences(prev => ({
+                ...prev,
+                timeFormat: e as TimeFormat,
+              }));
+            }}
+            size="xs"
+          />
+          <Button
+            size="xs"
+            variant="danger"
+            disabled={live}
+            onClick={() => {
+              setLive(true);
+              setReference(new Date());
+            }}
+          >
+            Reset to now
+          </Button>
+        </Group>
+        <Button size="xs" variant="light" onClick={handleAdd}>
+          Add timezone
+        </Button>
+      </Group>
+
+      <TimezonesBoard
+        rows={preferences.rows}
+        reference={reference}
+        timeFormat={preferences.timeFormat}
+        onRemove={handleRemove}
+        onPauseLive={() => setLive(false)}
+        onSetReference={setReference}
+        isLive={live}
+        onRowChange={(row: TimezoneRow) =>
+          setPreferences(prev => ({
+            ...prev,
+            rows: prev.rows.map(r => (r.id === row.id ? row : r)),
+          }))
+        }
+      />
+    </Stack>
+  );
+}

src/Features/timezone/components/TimeSlider.tsx

@@ -0,0 +1,49 @@
+import { Group, SegmentedControl, Slider, Text } from "@mantine/core";
+import { useMemo } from "react";
+import { SliderZoom } from "../types";
+
+interface Props {
+  reference: Date;
+  onChange: (date: Date) => void;
+  zoom: SliderZoom;
+  onZoomChange: (zoom: SliderZoom) => void;
+}
+
+export default function TimeSlider({ reference, onChange, zoom, onZoomChange }: Props) {
+  const range = useMemo(() => {
+    if (zoom === "hours") {
+      return { min: -12, max: 12, step: 0.25, unitMs: 3600000 } as const; // 15 min
+    }
+    return { min: -14, max: 14, step: 1, unitMs: 86400000 } as const; // 1 day
+  }, [zoom]);
+
+  const value = 0; // centered at reference
+
+  return (
+    <Group align="center" justify="space-between">
+      <SegmentedControl
+        value={zoom}
+        onChange={v => onZoomChange(v as SliderZoom)}
+        data={[
+          { label: "Hours", value: "hours" },
+          { label: "Days", value: "days" },
+        ]}
+      />
+      <Slider
+        min={range.min}
+        max={range.max}
+        step={range.step}
+        value={value}
+        onChange={delta => {
+          const ms = delta * range.unitMs;
+          onChange(new Date(reference.getTime() + ms));
+        }}
+        style={{ flex: 1 }}
+        label={val => `${val} ${zoom === "hours" ? "h" : "d"}`}
+      />
+      <Text size="sm" c="dimmed">
+        {reference.toISOString()}
+      </Text>
+    </Group>
+  );
+}