From 83ac1a8e5a5a07d6487a5dcc7ca6e82b9f84dfee Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sun, 1 Jun 2025 14:39:13 +0530
Subject: [PATCH] use: timestamps for `datetime` attribute.

---
 src/lib/components/dualTimeView.svelte        |  6 +++-
 .../collection-[collection]/table.svelte      | 29 ++++++++++++-------
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/dualTimeView.svelte b/src/lib/components/dualTimeView.svelte
index 2c3271b02..810e8e50f 100644
--- a/src/lib/components/dualTimeView.svelte
+++ b/src/lib/components/dualTimeView.svelte
@@ -97,7 +97,11 @@
         <Layout.Stack gap="s" alignContent="flex-start">
             <!-- `Raw time` as per design -->
             <Typography.Caption color="--fgcolor-neutral-tertiary" variant="400">
-                {timeToString}
+                {#if $$slots.title}
+                    <slot name="title" />
+                {:else}
+                    {timeToString}
+                {/if}
             </Typography.Caption>
 
             <!-- `Absolute time` as per design -->
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
index dbdb5ec41..6b9c32b08 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
@@ -25,6 +25,7 @@
         FloatingActionBar,
         Typography
     } from '@appwrite.io/pink-svelte';
+    import { toLocaleDateTime } from '$lib/helpers/date';
     import DualTimeView from '$lib/components/dualTimeView.svelte';
 
     export let data: PageData;
@@ -244,17 +245,23 @@
                         {/if}
                     {:else}
                         {@const formatted = formatColumn(document[id])}
-                        <Tooltip disabled={!formatted.truncated} placement="bottom">
-                            <Typography.Text truncate>
-                                {formatted.value}
-                            </Typography.Text>
-                            <span
-                                style:white-space="pre-wrap"
-                                style:word-break="break-all"
-                                slot="tooltip">
-                                {formatted.whole}
-                            </span>
-                        </Tooltip>
+                        {@const isDatetimeAttribute = attr.type === 'datetime'}
+                        {#if isDatetimeAttribute}
+                            <DualTimeView time={formatted.whole}>
+                                <span slot="title">Timestamp</span>
+                                {toLocaleDateTime(formatted.whole, true, 'UTC')}
+                            </DualTimeView>
+                        {:else}
+                            <Tooltip placement="bottom" disabled={!formatted.truncated}>
+                                <Typography.Text truncate>{formatted.value}</Typography.Text>
+                                <span
+                                    slot="tooltip"
+                                    style:white-space="pre-wrap"
+                                    style:word-break="break-all">
+                                    {formatted.whole}
+                                </span>
+                            </Tooltip>
+                        {/if}
                     {/if}
                 </Table.Cell>
             {/each}