fix: don't show default date/time is value is null.

Author: ItzNotABug

src/lib/components/dualTimeView.svelte

@@ -10,7 +10,7 @@
     import { Badge, InteractiveText, Layout, Popover, Typography } from '@appwrite.io/pink-svelte';
     import { menuOpen } from '$lib/components/menu/store';
 
-    export let time: string = '';
+    export let time: string | null = null;
     export let placement: ComponentProps<Popover>['placement'] = 'bottom';
 
     function timeDifference(dateString: string): string {
@@ -75,64 +75,68 @@
     $: timeToString = time ? timeDifference(time) : 'Invalid time';
 </script>
 
-<Popover let:show let:hide {placement} portal>
-    <button
-        on:mouseenter={() => {
-            if (!$menuOpen) {
-                setTimeout(show, 150);
-            }
-        }}
-        on:mouseleave={() => hidePopover(hide)}>
-        <slot>{capitalize(timeFromNow(time))}</slot>
-    </button>
-
-    <div
-        let:hide
-        slot="tooltip"
-        role="tooltip"
-        style:padding="1rem"
-        style:margin="-1rem"
-        on:mouseenter={() => (isMouseOverTooltip = true)}
-        on:mouseleave={() => hidePopover(hide, false)}>
-        <Layout.Stack gap="s" alignContent="flex-start">
-            <!-- `Raw time` as per design -->
-            <Typography.Caption color="--fgcolor-neutral-tertiary" variant="400">
-                {#if $$slots.title}
-                    <slot name="title" />
-                {:else}
-                    {timeToString}
-                {/if}
-            </Typography.Caption>
-
-            <!-- `Absolute time` as per design -->
-            <Layout.Stack gap="xxs">
-                <Layout.Stack
-                    direction="row"
-                    alignItems="center"
-                    alignContent="center"
-                    justifyContent="space-between">
-                    <InteractiveText
-                        isVisible
-                        variant="copy"
-                        text={toLocaleDateTime(time, false, 'UTC')}
-                        value={toISOString(time)} />
-
-                    <Badge variant="secondary" content="UTC" size="xs" />
-                </Layout.Stack>
-
-                <Layout.Stack
-                    direction="row"
-                    alignItems="center"
-                    alignContent="center"
-                    justifyContent="space-between">
-                    <InteractiveText
-                        isVisible
-                        variant="copy"
-                        text={toLocaleDateTime(time)}
-                        value={toLocalDateTimeISO(time)} />
-                    <Badge variant="secondary" content="Local" size="xs" />
+{#if time}
+    <Popover let:show let:hide {placement} portal>
+        <button
+            on:mouseenter={() => {
+                if (!$menuOpen) {
+                    setTimeout(show, 150);
+                }
+            }}
+            on:mouseleave={() => hidePopover(hide)}>
+            <slot>{capitalize(timeFromNow(time))}</slot>
+        </button>
+
+        <div
+            let:hide
+            slot="tooltip"
+            role="tooltip"
+            style:padding="1rem"
+            style:margin="-1rem"
+            on:mouseenter={() => (isMouseOverTooltip = true)}
+            on:mouseleave={() => hidePopover(hide, false)}>
+            <Layout.Stack gap="s" alignContent="flex-start">
+                <!-- `Raw time` as per design -->
+                <Typography.Caption color="--fgcolor-neutral-tertiary" variant="400">
+                    {#if $$slots.title}
+                        <slot name="title" />
+                    {:else}
+                        {timeToString}
+                    {/if}
+                </Typography.Caption>
+
+                <!-- `Absolute time` as per design -->
+                <Layout.Stack gap="xxs">
+                    <Layout.Stack
+                        direction="row"
+                        alignItems="center"
+                        alignContent="center"
+                        justifyContent="space-between">
+                        <InteractiveText
+                            isVisible
+                            variant="copy"
+                            text={toLocaleDateTime(time, false, 'UTC')}
+                            value={toISOString(time)} />
+
+                        <Badge variant="secondary" content="UTC" size="xs" />
+                    </Layout.Stack>
+
+                    <Layout.Stack
+                        direction="row"
+                        alignItems="center"
+                        alignContent="center"
+                        justifyContent="space-between">
+                        <InteractiveText
+                            isVisible
+                            variant="copy"
+                            text={toLocaleDateTime(time)}
+                            value={toLocalDateTimeISO(time)} />
+                        <Badge variant="secondary" content="Local" size="xs" />
+                    </Layout.Stack>
                 </Layout.Stack>
             </Layout.Stack>
-        </Layout.Stack>
-    </div>
-</Popover>
+        </div>
+    </Popover>
+{:else}
+    <Typography.Text>{time === null || time === undefined ? 'null' : time}</Typography.Text>
+{/if}