Skip to content

Commit 5de9259

Browse files
ItzNotABugItzNotABug
authored
Merge pull request #1758 from appwrite/fix-dualtimstamp
Fix dualtimstamp
2 parents 8f85fc9 + eba9ce6 commit 5de9259

File tree

4 files changed

+89
-44
lines changed

4 files changed

+89
-44
lines changed

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"check": "svelte-check --tsconfig ./tsconfig.json --fail-on-warnings --threshold warning",
1212
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
1313
"lint": "prettier --check . && eslint .",
14-
"format": "prettier --write . && eslint --fix .",
14+
"format": "prettier --write .",
1515
"test": "TZ=EST vitest run",
1616
"test:ui": "TZ=EST vitest --ui",
1717
"test:watch": "TZ=EST vitest watch",
@@ -21,9 +21,9 @@
2121
"dependencies": {
2222
"@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@08b7400",
2323
"@appwrite.io/pink-icons": "0.25.0",
24-
"@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@64948b6 ",
24+
"@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@85d2b9b",
2525
"@appwrite.io/pink-legacy": "^1.0.3",
26-
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@11e0653",
26+
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@85d2b9b",
2727
"@popperjs/core": "^2.11.8",
2828
"@sentry/sveltekit": "^8.38.0",
2929
"@stripe/stripe-js": "^3.5.0",

‎pnpm-lock.yaml‎

Lines changed: 14 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/lib/components/dualTimeView.svelte‎

Lines changed: 70 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<script lang="ts">
2-
import { getUTCOffset, timeFromNow, toLocaleDateTime } from '$lib/helpers/date';
2+
import { type ComponentProps } from 'svelte';
33
import { capitalize } from '$lib/helpers/string';
4+
import { getUTCOffset, timeFromNow, toLocaleDateTime } from '$lib/helpers/date';
45
import { Badge, InteractiveText, Layout, Popover, Typography } from '@appwrite.io/pink-svelte';
5-
import type { ComponentProps } from 'svelte';
66
77
export let time: string = '';
8-
export let placement: ComponentProps<Popover>['placement'] = 'bottom-end';
8+
export let placement: ComponentProps<Popover>['placement'] = 'bottom';
99
1010
function timeDifference(dateString: string): string {
1111
const SECONDS_IN_MINUTE = 60;
@@ -24,48 +24,93 @@
2424
{ label: 'month', value: Math.floor(diffInSeconds / SECONDS_IN_MONTH) },
2525
{ label: 'day', value: Math.floor(diffInSeconds / SECONDS_IN_DAY) % 30 },
2626
{ label: 'hour', value: Math.floor(diffInSeconds / SECONDS_IN_HOUR) % 24 },
27-
{ label: 'minute', value: Math.floor(diffInSeconds / SECONDS_IN_MINUTE) % 60 }
27+
{ label: 'minute', value: Math.floor(diffInSeconds / SECONDS_IN_MINUTE) % 60 },
28+
{ label: 'second', value: diffInSeconds % 60 }
2829
];
2930
30-
const formattedTime = timeParts
31-
.filter((unit) => unit.value > 0)
32-
.slice(0, 3)
31+
const month = timeParts[0].value;
32+
const day = timeParts[1].value;
33+
const hour = timeParts[2].value;
34+
const second = timeParts[4].value;
35+
36+
let outputParts: { label: string; value: number }[];
37+
38+
if (month === 0 && day === 0 && hour === 0 && second > 0) {
39+
// Seconds exist but no months, days, hours — show minutes + seconds
40+
outputParts = timeParts.slice(3).filter((unit) => unit.value > 0);
41+
} else {
42+
// Normal logic — top 3 non-zero units, no seconds.
43+
outputParts = timeParts
44+
.filter((unit) => unit.label !== 'second' && unit.value > 0)
45+
.slice(0, 3);
46+
}
47+
48+
const formattedTime = outputParts
3349
.map((unit) => `${unit.value} ${unit.label}${unit.value > 1 ? 's' : ''}`)
3450
.join(', ');
3551
3652
return formattedTime ? `${formattedTime} ago` : 'Just now';
3753
}
3854
55+
let isMouseOverTooltip = false;
56+
function hidePopover(hideTooltip: () => void, timeout = true) {
57+
if (!timeout) {
58+
isMouseOverTooltip = false;
59+
return hideTooltip();
60+
}
61+
62+
setTimeout(() => {
63+
if (!isMouseOverTooltip) {
64+
hideTooltip();
65+
}
66+
}, 50);
67+
}
68+
3969
$: timeToString = time ? timeDifference(time) : 'Invalid time';
4070
</script>
4171

42-
<Popover let:toggle {placement} portal>
43-
<button on:mouseenter={(e) => toggle(e)}>
72+
<Popover let:show let:hide {placement} portal>
73+
<button on:mouseenter={() => setTimeout(show, 100)} on:mouseleave={() => hidePopover(hide)}>
4474
<slot>{capitalize(timeFromNow(time))}</slot>
4575
</button>
4676

47-
<Layout.Stack gap="m" alignContent="flex-start" slot="tooltip">
48-
<Typography.Text color="--fgcolor-neutral-tertiary" variant="m-400"
49-
>{timeToString}</Typography.Text>
77+
<div
78+
let:hide
79+
slot="tooltip"
80+
role="tooltip"
81+
style:padding-top="1rem"
82+
style:margin-top="-1rem"
83+
style:padding-bottom="1rem"
84+
style:margin-bottom="-1rem"
85+
on:mouseenter={() => (isMouseOverTooltip = true)}
86+
on:mouseleave={() => hidePopover(hide, false)}>
87+
<Layout.Stack gap="s" alignContent="flex-start">
88+
<!-- `Raw time` as per design -->
89+
<Typography.Caption color="--fgcolor-neutral-tertiary" variant="400">
90+
{timeToString}
91+
</Typography.Caption>
5092

51-
<Layout.Stack gap="xxs">
52-
<Layout.Stack direction="row" justifyContent="space-between">
53-
<Typography.Text variant="m-400">
93+
<!-- `Absolute time` as per design -->
94+
<Layout.Stack gap="xxs">
95+
<Layout.Stack direction="row" justifyContent="space-between">
5496
<InteractiveText
97+
isVisible
5598
variant="copy"
5699
text={toLocaleDateTime(time, 'UTC')}
57-
isVisible />
58-
</Typography.Text>
59-
<Badge variant="secondary" content="UTC" size="xs" />
60-
</Layout.Stack>
100+
value={new Date(toLocaleDateTime(time, 'UTC')).toISOString()} />
61101

62-
<Layout.Stack direction="row" justifyContent="space-between">
63-
<Typography.Text variant="m-400">
64-
<InteractiveText variant="copy" text={toLocaleDateTime(time)} isVisible />
65-
</Typography.Text>
102+
<Badge variant="secondary" content="UTC" size="xs" />
103+
</Layout.Stack>
66104

67-
<Badge variant="secondary" content="UTC{getUTCOffset()}" size="xs" />
105+
<Layout.Stack direction="row" justifyContent="space-between">
106+
<InteractiveText
107+
isVisible
108+
variant="copy"
109+
text={toLocaleDateTime(time)}
110+
value={new Date(toLocaleDateTime(time)).toISOString()} />
111+
<Badge variant="secondary" content="UTC{getUTCOffset()}" size="xs" />
112+
</Layout.Stack>
68113
</Layout.Stack>
69114
</Layout.Stack>
70-
</Layout.Stack>
115+
</div>
71116
</Popover>

‎src/lib/components/filters/setFilters.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ export function setFilters(localTags: TagValue[], filterCols: FilterData[], $col
2626
}
2727
});
2828

29-
// Reasinging the filters to trigger reactivity
30-
filterCols = filterCols;
29+
// Reassigning the filters to trigger reactivity
30+
filterCols = [...filterCols];
3131
}
3232
}
3333

0 commit comments

Comments
 (0)