feat: links expiry

web/bun.lock

@@ -8,6 +8,7 @@
         "@tailwindcss/vite": "^4.0.14",
         "@tanstack/svelte-query": "^5.69.0",
         "axios": "^1.8.4",
+        "date-fns": "^4.1.0",
         "jwt-decode": "^4.0.0",
         "tailwindcss": "^4.0.14",
       },
@@ -187,6 +188,8 @@
 
     "combined-stream": ["combined-stream@1.0.8", "", { "dependencies": { "delayed-stream": "~1.0.0" } }, "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg=="],
 
+    "date-fns": ["date-fns@4.1.0", "", {}, "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg=="],
+
     "debug": ["debug@4.4.0", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA=="],
 
     "deepmerge": ["deepmerge@4.3.1", "", {}, "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="],

web/package.json

@@ -23,6 +23,7 @@
     "@tailwindcss/vite": "^4.0.14",
     "@tanstack/svelte-query": "^5.69.0",
     "axios": "^1.8.4",
+    "date-fns": "^4.1.0",
     "jwt-decode": "^4.0.0",
     "tailwindcss": "^4.0.14"
   }

web/src/pages/Home/Home.svelte

@@ -23,7 +23,7 @@
           <tr>
             <th class="p-3">Shortform</th>
             <th class="p-3">Destination</th>
-            <th class="p-3">Expire date</th>
+            <th class="p-3">Expires at</th>
             <th class="p-3">Actions</th>
           </tr>
         </thead>

web/src/pages/Home/components/row.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { mutateDeleteUrl, type Url } from "@/api/url";
   import { Edit, Trash } from "@lucide/svelte";
+  import { formatRelative } from "date-fns";
 
   let { row }: { row: Url } = $props();
 
@@ -33,7 +34,10 @@
     ></td
   >
   <td class="p-3 truncate"
-    >{row.ttl ? new Date(row.ttl).toLocaleTimeString() : "Never"}</td
+    >{row.ttl
+      ? // Manually specifying Z at the end here since the date format saved in the database removes timezone info but we know it is saved as UTC+0
+        formatRelative(new Date(row.ttl + "Z"), new Date(), {})
+      : "Never"}</td
   >
   <td class="p-3 flex gap-3">
     <button