From 4d50cd9acaf190d9c22a09cfd6ac7136b26175c5 Mon Sep 17 00:00:00 2001
From: MrMelon54 <github@mrmelon54.com>
Date: Wed, 21 Jan 2026 18:14:15 +0900
Subject: [PATCH 1/3] Support editing zone record TTL field

Resolves #5
---
 src/components/TTLEditor.svelte               | 73 +++++++++++++++++++
 src/components/create-domains/ACreate.svelte  |  4 +
 .../create-domains/CaaCreate.svelte           |  3 +
 .../create-domains/CnameCreate.svelte         |  3 +
 src/components/create-domains/MxCreate.svelte |  3 +
 src/components/create-domains/NsCreate.svelte |  3 +
 .../create-domains/PtrCreate.svelte           |  3 +
 .../create-domains/SrvCreate.svelte           |  3 +
 .../create-domains/TxtCreate.svelte           |  3 +
 9 files changed, 98 insertions(+)
 create mode 100644 src/components/TTLEditor.svelte

diff --git a/src/components/TTLEditor.svelte b/src/components/TTLEditor.svelte
new file mode 100644
index 0000000..9e97e10
--- /dev/null
+++ b/src/components/TTLEditor.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+  export let value: number | null;
+
+  const fiveMinutes = 60 * 5; // 300 seconds
+  const oneHour = 60 * 60;
+  const twoHours = oneHour * 2;
+  const oneDay = 60 * 60 * 24;
+  const twoDays = oneDay * 2;
+  const oneWeek = oneDay * 7;
+  const twoWeeks = oneWeek * 2;
+
+  const ttlOptions = [
+    {value: "default", name: "Default"},
+    {value: "custom", name: "Custom"},
+    {value: fiveMinutes, name: "Five Minutes"},
+    {value: oneHour, name: "One Hour"},
+    {value: twoHours, name: "Two Hours"},
+    {value: oneDay, name: "One Day"},
+    {value: twoDays, name: "Two Days"},
+    {value: oneWeek, name: "One Week"},
+    {value: twoWeeks, name: "Two Weeks"},
+  ];
+
+  let currentPreset: string | number;
+  let newValue: number;
+
+  // Update currentPresent to match the state of value
+  $: {
+    newValue = value ?? 0;
+
+    currentPreset = "custom";
+    if (value === null) {
+      currentPreset = "default";
+    } else {
+      for (const option of ttlOptions) {
+        if (value === option.value) {
+          currentPreset = value;
+          break;
+        }
+      }
+    }
+  }
+
+  function updateOutput() {
+    // Follow the preset
+    if (currentPreset === "default") {
+      value = null;
+      newValue = 0;
+    }
+    if (typeof currentPreset === "number") {
+      value = currentPreset;
+      newValue = currentPreset;
+    }
+  }
+</script>
+
+<div>
+  <select bind:value={currentPreset} on:change={() => updateOutput()}>
+    {#each ttlOptions as option}
+      <option value={option.value}>{option.name}</option>
+    {/each}
+  </select>
+  <span class:hide-custom-input={currentPreset !== "custom"}>
+    <input type="text" class="code-font" bind:value={newValue} on:change={() => updateOutput()} />
+    seconds
+  </span>
+</div>
+
+<style>
+  .hide-custom-input {
+    display: none;
+  }
+</style>
diff --git a/src/components/create-domains/ACreate.svelte b/src/components/create-domains/ACreate.svelte
index da9b216..4524976 100644
--- a/src/components/create-domains/ACreate.svelte
+++ b/src/components/create-domains/ACreate.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import {DnsTypeA, DnsTypeAAAA, type AaaaValue, type ApiRecordFormat, type AValue} from "../../types/records";
   import {IPv4, IPv6, parse as parseAddr} from "ipaddr.js";
+  import TTLEditor from "../TTLEditor.svelte";
 
   export let editItem: ApiRecordFormat<AValue | AaaaValue>;
   export let editMode: boolean;
@@ -30,6 +31,9 @@
   <div><input type="text" class="code-font" bind:value={editItem.name} size={Math.max(20, editItem.name.length + 2)} /></div>
 {/if}
 
+<div>Time-To-Live</div>
+<TTLEditor bind:value={editItem.ttl} />
+
 <div>IP Address</div>
 <div><input type="text" class="code-font" bind:value size={Math.max(20, value.length + 2)} /></div>
 {#if editItem.type === DnsTypeA}
diff --git a/src/components/create-domains/CaaCreate.svelte b/src/components/create-domains/CaaCreate.svelte
index 67d5159..6c2bff0 100644
--- a/src/components/create-domains/CaaCreate.svelte
+++ b/src/components/create-domains/CaaCreate.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type {ApiRecordFormat, CaaValue} from "../../types/records";
+  import TTLEditor from "../TTLEditor.svelte";
 
   export let editItem: ApiRecordFormat<CaaValue>;
   export let editMode: boolean;
@@ -11,6 +12,8 @@
 {:else}
   <div><input type="text" class="code-font" bind:value={editItem.name} size={Math.max(20, editItem.name.length + 2)} /></div>
 {/if}
+<div>Time-To-Live</div>
+<TTLEditor bind:value={editItem.ttl} />
 <div>Tag</div>
 <div><input type="text" class="code-font" bind:value={editItem.value.tag} size={Math.max(20, editItem.value.tag.length + 2)} /></div>
 <div>Value</div>
diff --git a/src/components/create-domains/CnameCreate.svelte b/src/components/create-domains/CnameCreate.svelte
index a5d62c2..5e6bf7b 100644
--- a/src/components/create-domains/CnameCreate.svelte
+++ b/src/components/create-domains/CnameCreate.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type {ApiRecordFormat, CnameValue} from "../../types/records";
+  import TTLEditor from "../TTLEditor.svelte";
 
   export let editItem: ApiRecordFormat<CnameValue>;
   export let editMode: boolean;
@@ -11,5 +12,7 @@
 {:else}
   <div><input type="text" class="code-font" bind:value={editItem.name} size={Math.max(20, editItem.name.length + 2)} /></div>
 {/if}
+<div>Time-To-Live</div>
+<TTLEditor bind:value={editItem.ttl} />
 <div>Target</div>
 <div><input type="text" class="code-font" bind:value={editItem.value.target} size={Math.max(20, editItem.value.target.length + 2)} /></div>
diff --git a/src/components/create-domains/MxCreate.svelte b/src/components/create-domains/MxCreate.svelte
index 039e10a..a044388 100644
--- a/src/components/create-domains/MxCreate.svelte
+++ b/src/components/create-domains/MxCreate.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type {ApiRecordFormat, MxValue} from "../../types/records";
+  import TTLEditor from "../TTLEditor.svelte";
 
   export let editItem: ApiRecordFormat<MxValue>;
   export let editMode: boolean;
@@ -11,6 +12,8 @@
 {:else}
   <div><input type="text" class="code-font" bind:value={editItem.name} size={Math.max(20, editItem.name.length + 2)} /></div>
 {/if}
+<div>Time-To-Live</div>
+<TTLEditor bind:value={editItem.ttl} />
 <div>Mail Server</div>
 <div><input type="text" class="code-font" bind:value={editItem.value.target} size={Math.max(20, editItem.value.target.length + 2)} /></div>
 <div>Preference</div>
diff --git a/src/components/create-domains/NsCreate.svelte b/src/components/create-domains/NsCreate.svelte
index be07c35..98dce23 100644
--- a/src/components/create-domains/NsCreate.svelte
+++ b/src/components/create-domains/NsCreate.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type {ApiRecordFormat, NsValue} from "../../types/records";
+  import TTLEditor from "../TTLEditor.svelte";
 
   export let editItem: ApiRecordFormat<NsValue>;
   export let editMode: boolean;
@@ -11,5 +12,7 @@
 {:else}
   <div><input type="text" class="code-font" bind:value={editItem.name} size={Math.max(20, editItem.name.length + 2)} /></div>
 {/if}
+<div>Time-To-Live</div>
+<TTLEditor bind:value={editItem.ttl} />
 <div>Nameserver</div>
 <div><input type="text" class="code-font" bind:value={editItem.value.target} size={Math.max(20, editItem.value.target.length + 2)} /></div>
diff --git a/src/components/create-domains/PtrCreate.svelte b/src/components/create-domains/PtrCreate.svelte
index 751cfd7..7d80307 100644
--- a/src/components/create-domains/PtrCreate.svelte
+++ b/src/components/create-domains/PtrCreate.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type {ApiRecordFormat, PtrValue} from "../../types/records";
+  import TTLEditor from "../TTLEditor.svelte";
 
   export let editItem: ApiRecordFormat<PtrValue>;
   export let editMode: boolean;
@@ -11,5 +12,7 @@
 {:else}
   <div><input type="text" class="code-font" bind:value={editItem.name} size={Math.max(20, editItem.name.length + 2)} /></div>
 {/if}
+<div>Time-To-Live</div>
+<TTLEditor bind:value={editItem.ttl} />
 <div>Target</div>
 <div><input type="text" class="code-font" bind:value={editItem.value.target} size={Math.max(20, editItem.value.target.length + 2)} /></div>
diff --git a/src/components/create-domains/SrvCreate.svelte b/src/components/create-domains/SrvCreate.svelte
index 88a93d1..06ce180 100644
--- a/src/components/create-domains/SrvCreate.svelte
+++ b/src/components/create-domains/SrvCreate.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type {ApiRecordFormat, SrvValue} from "../../types/records";
+  import TTLEditor from "../TTLEditor.svelte";
 
   export let editItem: ApiRecordFormat<SrvValue>;
   export let editMode: boolean;
@@ -18,6 +19,8 @@
 {:else}
   <div><input type="text" class="code-font" bind:value={editItem.name} size={Math.max(20, editItem.name.length + 2)} /></div>
 {/if}
+<div>Time-To-Live</div>
+<TTLEditor bind:value={editItem.ttl} />
 <div>Priority</div>
 <div><input type="number" class="code-font" bind:value={editItem.value.priority} /></div>
 <div>Weight</div>
diff --git a/src/components/create-domains/TxtCreate.svelte b/src/components/create-domains/TxtCreate.svelte
index cdde97a..3f1ffba 100644
--- a/src/components/create-domains/TxtCreate.svelte
+++ b/src/components/create-domains/TxtCreate.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type {ApiRecordFormat, TxtValue} from "../../types/records";
+  import TTLEditor from "../TTLEditor.svelte";
 
   export let editItem: ApiRecordFormat<TxtValue>;
   export let editMode: boolean;
@@ -15,5 +16,7 @@
 {:else}
   <div><input type="text" class="code-font" bind:value={editItem.name} size={Math.max(20, editItem.name.length + 2)} /></div>
 {/if}
+<div>Time-To-Live</div>
+<TTLEditor bind:value={editItem.ttl} />
 <div>Value</div>
 <div><input type="text" class="code-font" bind:value={editItem.value.text} size={constrain(20, 100, editItem.value.text.length + 2)} /></div>

From ac3f25acb61e78ef8be4c264782ef4b9a7123384 Mon Sep 17 00:00:00 2001
From: MrMelon54 <github@mrmelon54.com>
Date: Fri, 23 Jan 2026 22:32:35 +0900
Subject: [PATCH 2/3] Change oneDay constant to use `oneHour * 24`

---
 src/components/TTLEditor.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TTLEditor.svelte b/src/components/TTLEditor.svelte
index 9e97e10..3fd63bc 100644
--- a/src/components/TTLEditor.svelte
+++ b/src/components/TTLEditor.svelte
@@ -4,7 +4,7 @@
   const fiveMinutes = 60 * 5; // 300 seconds
   const oneHour = 60 * 60;
   const twoHours = oneHour * 2;
-  const oneDay = 60 * 60 * 24;
+  const oneDay = oneHour * 24;
   const twoDays = oneDay * 2;
   const oneWeek = oneDay * 7;
   const twoWeeks = oneWeek * 2;

From 530b4782253d41efd1c2bc56e2f162accb8404da Mon Sep 17 00:00:00 2001
From: MrMelon54 <github@mrmelon54.com>
Date: Fri, 23 Jan 2026 22:33:26 +0900
Subject: [PATCH 3/3] Two weeks seems too long for a TTL, removing the two week
 preset

---
 src/components/TTLEditor.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/TTLEditor.svelte b/src/components/TTLEditor.svelte
index 3fd63bc..f3ac696 100644
--- a/src/components/TTLEditor.svelte
+++ b/src/components/TTLEditor.svelte
@@ -7,7 +7,6 @@
   const oneDay = oneHour * 24;
   const twoDays = oneDay * 2;
   const oneWeek = oneDay * 7;
-  const twoWeeks = oneWeek * 2;
 
   const ttlOptions = [
     {value: "default", name: "Default"},
@@ -18,7 +17,6 @@
     {value: oneDay, name: "One Day"},
     {value: twoDays, name: "Two Days"},
     {value: oneWeek, name: "One Week"},
-    {value: twoWeeks, name: "Two Weeks"},
   ];
 
   let currentPreset: string | number;