fixup: time formatting

bun.lock

@@ -16,6 +16,7 @@
         "@vite-pwa/sveltekit": "^1.1.0",
         "bits-ui": "^2.16.3",
         "clsx": "^2.1.1",
+        "date-fns": "^4.4.0",
         "mode-watcher": "^1.1.0",
         "shadcn-svelte": "^1.2.7",
         "svelte": "^5.55.2",
@@ -537,6 +538,8 @@
 
     "data-view-byte-offset": ["[email protected]", "", { "dependencies": { "call-bound": "^1.0.2", "es-errors": "^1.3.0", "is-data-view": "^1.0.1" } }, "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ=="],
 
+    "date-fns": ["[email protected]", "", {}, "sha512-+1UMbeh68lH1SegH83CGWwpb6OHHbpSgr3+s5Eww5M4CAgswBpoWS0AjTOfEJ33HiYKz1hdj/KTFprzXHmq/6w=="],
+
     "debug": ["[email protected]", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
     "decimal.js": ["[email protected]", "", {}, "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg=="],

package.json

@@ -13,6 +13,7 @@
 		"@vite-pwa/sveltekit": "^1.1.0",
 		"bits-ui": "^2.16.3",
 		"clsx": "^2.1.1",
+		"date-fns": "^4.4.0",
 		"mode-watcher": "^1.1.0",
 		"shadcn-svelte": "^1.2.7",
 		"svelte": "^5.55.2",

src/routes/app/list/+page.svelte

@@ -1,12 +1,13 @@
 <script>
-  import Item from "./item.svelte";
+    import { addDays } from "date-fns";
+    import Item from "./item.svelte";
 </script>
 
 <div class="flex flex-col gap-2 p-2">
   {#each Array(20)}
     <Item
       name="ข้าวมันไก่"
-      expiry={new Date()}
+      expiry={addDays(new Date(), 5)}
       icon="list"
       category="อาหารจารเดียว"
     />

src/routes/app/list/item.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Image from "$lib/components/image.svelte";
   import Badge from "$lib/components/ui/badge/badge.svelte";
+  import { formatDistanceToNow } from "date-fns";
 
   const {
     icon,
@@ -31,10 +32,12 @@
     <div class="flex items-center gap-2">
       <span class="truncate font-medium">{name}</span>
     </div>
-    <span class="truncate text-xs text-muted-foreground">{expiry}</span>
+    <span class="truncate text-xs text-muted-foreground"
+      >{formatDistanceToNow(expiry, { addSuffix: true })}</span
+    >
     <div class="flex items-center gap-2 text-xs">
       <Badge variant="outline">{category}</Badge>
-      <span class="font-medium">123 ฿</span>
+      <span class="font-medium">67 ฿</span>
       <!-- {r.paid ? (
                     <span class="text-green-500">ชำระแล้ว</span>
                   ) : r.expires && new Date(r.expires) <= new Date() ? (