From 16a248e06ea25b2202a9d78032f2d12b0f9ba53c Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Wed, 16 Apr 2025 10:52:16 -0400
Subject: [PATCH 1/7] Convert form widget to Vue and add a relative preset to
 the DateFormatter

---
 resources/js/bootstrap/components.js         |  4 +-
 resources/js/components/DateFormatter.js     | 83 ++++++++++++++++++--
 resources/js/components/forms/FormWidget.vue | 72 +++++++++++++++++
 resources/js/components/ui/Widget.vue        |  2 +-
 resources/views/forms/widget.blade.php       | 51 ++----------
 src/Forms/Widget.php                         |  1 +
 6 files changed, 161 insertions(+), 52 deletions(-)
 create mode 100644 resources/js/components/forms/FormWidget.vue

diff --git a/resources/js/bootstrap/components.js b/resources/js/bootstrap/components.js
index d5d7c3f77f3..56d5043f072 100644
--- a/resources/js/bootstrap/components.js
+++ b/resources/js/bootstrap/components.js
@@ -36,7 +36,8 @@ import TermListing from '../components/terms/Listing.vue';
 import AssetContainerList from '../components/AssetContainerList.vue';
 import AddonList from '../components/AddonList.vue';
 import AddonDetails from '../components/AddonDetails.vue';
-import CollectionWidget from '../components/entries/Widget.vue';
+import CollectionWidget from '../components/entries/CollectionWidget.vue';
+import FormWidget from '../components/forms/FormWidget.vue';
 import SvgIcon from '../components/SvgIcon.vue';
 import FileIcon from '../components/FileIcon.vue';
 import LoadingGraphic from '../components/LoadingGraphic.vue';
@@ -115,6 +116,7 @@ export default function registerGlobalComponents(app) {
 
     // Widgets
     app.component('collection-widget', CollectionWidget);
+    app.component('form-widget', FormWidget);
 
     // Reusable
     app.component('svg-icon', SvgIcon);
diff --git a/resources/js/components/DateFormatter.js b/resources/js/components/DateFormatter.js
index fc848de01c0..738f66ef2f0 100644
--- a/resources/js/components/DateFormatter.js
+++ b/resources/js/components/DateFormatter.js
@@ -2,13 +2,15 @@ export default class DateFormatter {
     #date;
     #options;
     #locale = navigator.language;
-    #presets = {
+    static presets = {
         datetime: {
             year: 'numeric',
             month: 'numeric',
             day: 'numeric',
-            hour: 'numeric',
-            minute: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: false,
+            formatMatcher: 'basic',
         },
         date: {
             year: 'numeric',
@@ -18,6 +20,11 @@ export default class DateFormatter {
         time: {
             timeStyle: 'short',
         },
+        relative: {
+            numeric: 'auto',
+            style: 'long',
+            specificity: 'day',
+        },
     };
 
     constructor(date, options) {
@@ -35,12 +42,78 @@ export default class DateFormatter {
 
     toString() {
         try {
+            if (this.#options === 'relative' || (this.#options.specificity && this.#options.numeric === 'auto')) {
+                return this.#formatRelative();
+            }
             return Intl.DateTimeFormat(this.locale, this.#options).format(this.#date);
         } catch (e) {
             return 'Invalid Date';
         }
     }
 
+    #formatRelative() {
+        const now = new Date();
+        const diff = now - this.#date;
+        const seconds = Math.abs(Math.floor(diff / 1000));
+        const minutes = Math.abs(Math.floor(seconds / 60));
+        const hours = Math.abs(Math.floor(minutes / 60));
+        const days = Math.abs(Math.floor(hours / 24));
+        const weeks = Math.abs(Math.floor(days / 7));
+        const months = Math.abs(Math.floor(days / 30));
+        const years = Math.abs(Math.floor(days / 365));
+
+        const specificity = this.#options.specificity || DateFormatter.presets.relative.specificity;
+        const rtf = new Intl.RelativeTimeFormat(this.locale, DateFormatter.presets.relative);
+
+        // Always show seconds if less than a minute
+        if (seconds < 60) return rtf.format(-Math.sign(diff), 'second');
+
+        // Show minutes if less than an hour and specificity allows
+        if (minutes < 60 && ['minute', 'hour', 'day', 'week', 'month', 'year'].includes(specificity)) {
+            return rtf.format(-Math.sign(diff) * minutes, 'minute');
+        }
+
+        // Show hours if less than a day and specificity allows
+        if (hours < 24 && ['hour', 'day', 'week', 'month', 'year'].includes(specificity)) {
+            return rtf.format(-Math.sign(diff) * hours, 'hour');
+        }
+
+        // Show days if less than a week and specificity allows
+        if (days < 7 && ['day', 'week', 'month', 'year'].includes(specificity)) {
+            return rtf.format(-Math.sign(diff) * days, 'day');
+        }
+
+        // Show weeks if less than a month and specificity allows
+        if (weeks < 4 && ['week', 'month', 'year'].includes(specificity)) {
+            return rtf.format(-Math.sign(diff) * weeks, 'week');
+        }
+
+        // Show months if less than a year and specificity allows
+        if (months < 12 && ['month', 'year'].includes(specificity)) {
+            return rtf.format(-Math.sign(diff) * months, 'month');
+        }
+
+        // Show years if specificity allows
+        if (specificity === 'year') {
+            return rtf.format(-Math.sign(diff) * years, 'year');
+        }
+
+        // Custom format for datetime without comma
+        const date = new Intl.DateTimeFormat(this.locale, {
+            year: 'numeric',
+            month: 'numeric',
+            day: 'numeric',
+        }).format(this.#date);
+
+        const time = new Intl.DateTimeFormat(this.locale, {
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: false,
+        }).format(this.#date);
+
+        return `${date} ${time}`;
+    }
+
     static format(date, options) {
         return new DateFormatter(date, options).toString();
     }
@@ -65,9 +138,9 @@ export default class DateFormatter {
         if (!options) options = 'datetime';
 
         if (typeof options === 'string') {
-            if (!this.#presets[options]) throw new Error(`Invalid date format: ${options}`);
+            if (!DateFormatter.presets[options]) throw new Error(`Invalid date format: ${options}`);
 
-            return this.#presets[options];
+            return DateFormatter.presets[options];
         }
 
         return options;
diff --git a/resources/js/components/forms/FormWidget.vue b/resources/js/components/forms/FormWidget.vue
new file mode 100644
index 00000000000..b9606e52b97
--- /dev/null
+++ b/resources/js/components/forms/FormWidget.vue
@@ -0,0 +1,72 @@
+<script>
+import Listing from '../Listing.vue'
+import DateFormatter from '@statamic/components/DateFormatter.js';
+
+export default {
+    mixins: [Listing],
+
+    props: {
+        form: { type: String, required: true },
+        fields: { type: Array, default: () => [] },
+        title: { type: String },
+    },
+
+    data() {
+        return {
+            cols: [
+                ...this.fields.map(field => ({ label: field, field, visible: true })),
+                { label: 'Date', field: 'date', visible: true }
+            ],
+            listingKey: 'submissions',
+            requestUrl: cp_url(`forms/${this.form}/submissions`),
+        }
+    },
+
+    methods: {
+        formatDate(value) {
+             return DateFormatter.format(value, { ...DateFormatter.presets.relative, specificity: 'hour' }).toString();
+        },
+    }
+}
+</script>
+
+<template>
+    <ui-widget :title="title" icon="forms">
+        <data-list
+            v-if="!initializing && items.length"
+            :rows="items"
+            :columns="cols"
+            :sort="false"
+            class="w-full"
+        >
+            <div v-if="initializing" class="loading">
+                <loading-graphic />
+            </div>
+
+            <data-list-table v-else :loading="loading" unstyled class="[&_td]:text-sm [&_td]:px-0.5 [&_td]:py-0.75 [&_thead]:hidden">
+                <template v-for="field in fields" #[`cell-${field}`]="{ row: submission }">
+                    <a :href="cp_url(`forms/${form}/submissions/${submission.id}`)" class="overflow-hidden text-ellipsis line-clamp-1">
+                        {{ submission[field] }}
+                    </a>
+                </template>
+                <template #cell-date="{ row: submission }">
+                    <div class="text-end font-mono whitespace-nowrap antialiased text-xs text-gray-500" v-html="formatDate(submission.datestamp)" />
+                </template>
+            </data-list-table>
+        </data-list>
+
+        <p v-if="!initializing && !items.length" class="p-3 text-center text-sm text-gray-600">
+            {{ __('This form is awaiting responses') }}
+        </p>
+
+        <template #actions>
+            <data-list-pagination
+                v-if="meta.last_page != 1"
+                :resource-meta="meta"
+                @page-selected="selectPage"
+                :scroll-to-top="false"
+                :show-page-links="false"
+            />
+        </template>
+    </ui-widget>
+</template>
diff --git a/resources/js/components/ui/Widget.vue b/resources/js/components/ui/Widget.vue
index 75ef231aa62..25a747fa5c2 100644
--- a/resources/js/components/ui/Widget.vue
+++ b/resources/js/components/ui/Widget.vue
@@ -10,7 +10,7 @@ defineProps({
 
 <template>
     <ui-card inset>
-        <div class="flex h-full flex-col justify-between">
+        <div class="flex h-full flex-col justify-between min-h-54">
             <div>
                 <header class="flex items-center justify-between px-4 py-2.5 border-b border-gray-200 dark:border-gray-700">
                     <div class="flex items-center gap-3">
diff --git a/resources/views/forms/widget.blade.php b/resources/views/forms/widget.blade.php
index df87af3a13b..48cedab6ee6 100644
--- a/resources/views/forms/widget.blade.php
+++ b/resources/views/forms/widget.blade.php
@@ -1,45 +1,6 @@
-@php
-    use function Statamic\trans as __;
-@endphp
-
-@php
-    use Statamic\Support\Arr;
-@endphp
-
-<div class="card overflow-hidden p-0">
-    <div class="flex items-center justify-between border-b p-4 dark:border-b dark:border-dark-900 dark:bg-dark-650">
-        <h2>
-            <a class="flex items-center" href="{{ $form->showUrl() }}">
-                <div class="h-6 w-6 text-gray-800 dark:text-dark-200 ltr:mr-2 rtl:ml-2">
-                    @cp_svg('icons/light/drawer-file')
-                </div>
-                <span v-pre>{{ $title }}</span>
-            </a>
-        </h2>
-    </div>
-    <div>
-        @if (! $submissions)
-            <p class="p-4 text-sm text-gray-600">{{ __('This form is awaiting responses') }}</p>
-        @else
-            <table class="data-table">
-                @foreach ($submissions as $submission)
-                    <tr>
-                        @foreach ($fields as $key => $field)
-                            <td>
-                                <a
-                                    href="{{ cp_route('forms.submissions.show', [$form->handle(), $submission['id']]) }}"
-                                >
-                                    {{ Arr::get($submission, $field) }}
-                                </a>
-                            </td>
-                        @endforeach
-
-                        <td class="ltr:text-right rtl:text-left">
-                            {{ $submission['date']->diffInDays() <= 14 ? $submission['date']->diffForHumans() : $submission['date']->asVueComponent() }}
-                        </td>
-                    </tr>
-                @endforeach
-            </table>
-        @endif
-    </div>
-</div>
+<form-widget
+    form="{{ $form->handle() }}"
+    title="{{ $title }}"
+    :fields='@json($fields)'
+    :initial-per-page="{{ $limit }}"
+></form-widget>
diff --git a/src/Forms/Widget.php b/src/Forms/Widget.php
index 604a7decedd..3d9c879ccf3 100644
--- a/src/Forms/Widget.php
+++ b/src/Forms/Widget.php
@@ -27,6 +27,7 @@ public function html()
             'fields' => $this->config('fields', []),
             'submissions' => collect($form->submissions())->reverse()->take((int) $this->config('limit', 5))->toArray(),
             'title' => $this->config('title', $form->title()),
+            'limit' => $this->config('limit', 5),
         ]);
     }
 }

From 26d046b5a1cbcd4102ae7a852367b4d56b96c297 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 16 Apr 2025 12:03:01 -0400
Subject: [PATCH 2/7] apply prettier

---
 resources/js/components/forms/FormWidget.vue | 39 +++++++++++---------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/resources/js/components/forms/FormWidget.vue b/resources/js/components/forms/FormWidget.vue
index b9606e52b97..d51533d8ecc 100644
--- a/resources/js/components/forms/FormWidget.vue
+++ b/resources/js/components/forms/FormWidget.vue
@@ -1,5 +1,5 @@
 <script>
-import Listing from '../Listing.vue'
+import Listing from '../Listing.vue';
 import DateFormatter from '@statamic/components/DateFormatter.js';
 
 export default {
@@ -14,43 +14,48 @@ export default {
     data() {
         return {
             cols: [
-                ...this.fields.map(field => ({ label: field, field, visible: true })),
-                { label: 'Date', field: 'date', visible: true }
+                ...this.fields.map((field) => ({ label: field, field, visible: true })),
+                { label: 'Date', field: 'date', visible: true },
             ],
             listingKey: 'submissions',
             requestUrl: cp_url(`forms/${this.form}/submissions`),
-        }
+        };
     },
 
     methods: {
         formatDate(value) {
-             return DateFormatter.format(value, { ...DateFormatter.presets.relative, specificity: 'hour' }).toString();
+            return DateFormatter.format(value, { ...DateFormatter.presets.relative, specificity: 'hour' }).toString();
         },
-    }
-}
+    },
+};
 </script>
 
 <template>
     <ui-widget :title="title" icon="forms">
-        <data-list
-            v-if="!initializing && items.length"
-            :rows="items"
-            :columns="cols"
-            :sort="false"
-            class="w-full"
-        >
+        <data-list v-if="!initializing && items.length" :rows="items" :columns="cols" :sort="false" class="w-full">
             <div v-if="initializing" class="loading">
                 <loading-graphic />
             </div>
 
-            <data-list-table v-else :loading="loading" unstyled class="[&_td]:text-sm [&_td]:px-0.5 [&_td]:py-0.75 [&_thead]:hidden">
+            <data-list-table
+                v-else
+                :loading="loading"
+                unstyled
+                class="[&_td]:px-0.5 [&_td]:py-0.75 [&_td]:text-sm [&_thead]:hidden"
+            >
                 <template v-for="field in fields" #[`cell-${field}`]="{ row: submission }">
-                    <a :href="cp_url(`forms/${form}/submissions/${submission.id}`)" class="overflow-hidden text-ellipsis line-clamp-1">
+                    <a
+                        :href="cp_url(`forms/${form}/submissions/${submission.id}`)"
+                        class="line-clamp-1 overflow-hidden text-ellipsis"
+                    >
                         {{ submission[field] }}
                     </a>
                 </template>
                 <template #cell-date="{ row: submission }">
-                    <div class="text-end font-mono whitespace-nowrap antialiased text-xs text-gray-500" v-html="formatDate(submission.datestamp)" />
+                    <div
+                        class="text-end font-mono text-xs whitespace-nowrap text-gray-500 antialiased"
+                        v-html="formatDate(submission.datestamp)"
+                    />
                 </template>
             </data-list-table>
         </data-list>

From 831030228799a726f435266f9bd8ea7b38debf6b Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 16 Apr 2025 12:03:48 -0400
Subject: [PATCH 3/7] Expose widget

---
 resources/js/components/ui/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/ui/index.js b/resources/js/components/ui/index.js
index 86fe6575db1..1d3c3ff2700 100644
--- a/resources/js/components/ui/index.js
+++ b/resources/js/components/ui/index.js
@@ -5,5 +5,6 @@ import { default as DatePicker } from './Datepicker/Index.vue';
 import { default as DateRangePicker } from './DateRangePicker/Index.vue';
 import { default as TimePicker } from './TimePicker/Index.vue';
 import { default as Button } from './Button/Index.vue';
+import { default as Widget } from './Widget.vue';
 
-export { WithField, Calendar, Card, DatePicker, DateRangePicker, TimePicker, Button };
+export { WithField, Calendar, Card, DatePicker, DateRangePicker, TimePicker, Button, Widget };

From 44d2d86d5a15a4be683b19b6853acbabe064bbf8 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 16 Apr 2025 12:03:40 -0400
Subject: [PATCH 4/7] Import component

---
 resources/js/components/forms/FormWidget.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/forms/FormWidget.vue b/resources/js/components/forms/FormWidget.vue
index d51533d8ecc..44751775846 100644
--- a/resources/js/components/forms/FormWidget.vue
+++ b/resources/js/components/forms/FormWidget.vue
@@ -1,10 +1,15 @@
 <script>
 import Listing from '../Listing.vue';
 import DateFormatter from '@statamic/components/DateFormatter.js';
+import { Widget } from '@statamic/ui';
 
 export default {
     mixins: [Listing],
 
+    components: {
+        Widget,
+    },
+
     props: {
         form: { type: String, required: true },
         fields: { type: Array, default: () => [] },
@@ -31,7 +36,7 @@ export default {
 </script>
 
 <template>
-    <ui-widget :title="title" icon="forms">
+    <Widget :title="title" icon="forms">
         <data-list v-if="!initializing && items.length" :rows="items" :columns="cols" :sort="false" class="w-full">
             <div v-if="initializing" class="loading">
                 <loading-graphic />
@@ -73,5 +78,5 @@ export default {
                 :show-page-links="false"
             />
         </template>
-    </ui-widget>
+    </Widget>
 </template>

From bca56ecd766888b52c7ead62faf5b1748c2c03e5 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 16 Apr 2025 12:39:43 -0400
Subject: [PATCH 5/7] Tweaks ...

- Put presets property back to protected
- Revert datetime preset back to what it was
- Relative can be used by providing `{ relative: true }` or `{ relative: 'hour' }`.
- The formatting for dates outside of the specificity can be provided as an option. `{ relative: true, fallback: 'datetime' }` or `{ relative: true, fallback { options } }`
- Get rid of the custom fallback format with no comma. The whole point of this is to format based on the locale. Some use a comma, some don't.
---
 resources/js/components/DateFormatter.js     | 43 ++++++--------------
 resources/js/components/forms/FormWidget.vue |  2 +-
 2 files changed, 13 insertions(+), 32 deletions(-)

diff --git a/resources/js/components/DateFormatter.js b/resources/js/components/DateFormatter.js
index 738f66ef2f0..aa68a997393 100644
--- a/resources/js/components/DateFormatter.js
+++ b/resources/js/components/DateFormatter.js
@@ -2,15 +2,13 @@ export default class DateFormatter {
     #date;
     #options;
     #locale = navigator.language;
-    static presets = {
+    #presets = {
         datetime: {
             year: 'numeric',
             month: 'numeric',
             day: 'numeric',
-            hour: '2-digit',
-            minute: '2-digit',
-            hour12: false,
-            formatMatcher: 'basic',
+            hour: 'numeric',
+            minute: 'numeric',
         },
         date: {
             year: 'numeric',
@@ -20,11 +18,6 @@ export default class DateFormatter {
         time: {
             timeStyle: 'short',
         },
-        relative: {
-            numeric: 'auto',
-            style: 'long',
-            specificity: 'day',
-        },
     };
 
     constructor(date, options) {
@@ -42,9 +35,8 @@ export default class DateFormatter {
 
     toString() {
         try {
-            if (this.#options === 'relative' || (this.#options.specificity && this.#options.numeric === 'auto')) {
-                return this.#formatRelative();
-            }
+            if (this.#options.relative) return this.#formatRelative();
+
             return Intl.DateTimeFormat(this.locale, this.#options).format(this.#date);
         } catch (e) {
             return 'Invalid Date';
@@ -52,6 +44,9 @@ export default class DateFormatter {
     }
 
     #formatRelative() {
+        let specificity = this.#options.relative;
+        specificity = !specificity || specificity === true ? 'year' : specificity;
+
         const now = new Date();
         const diff = now - this.#date;
         const seconds = Math.abs(Math.floor(diff / 1000));
@@ -62,8 +57,7 @@ export default class DateFormatter {
         const months = Math.abs(Math.floor(days / 30));
         const years = Math.abs(Math.floor(days / 365));
 
-        const specificity = this.#options.specificity || DateFormatter.presets.relative.specificity;
-        const rtf = new Intl.RelativeTimeFormat(this.locale, DateFormatter.presets.relative);
+        const rtf = new Intl.RelativeTimeFormat(this.locale, { numeric: 'auto' });
 
         // Always show seconds if less than a minute
         if (seconds < 60) return rtf.format(-Math.sign(diff), 'second');
@@ -98,20 +92,7 @@ export default class DateFormatter {
             return rtf.format(-Math.sign(diff) * years, 'year');
         }
 
-        // Custom format for datetime without comma
-        const date = new Intl.DateTimeFormat(this.locale, {
-            year: 'numeric',
-            month: 'numeric',
-            day: 'numeric',
-        }).format(this.#date);
-
-        const time = new Intl.DateTimeFormat(this.locale, {
-            hour: '2-digit',
-            minute: '2-digit',
-            hour12: false,
-        }).format(this.#date);
-
-        return `${date} ${time}`;
+        return new DateFormatter(this.#date, this.#options.fallback || 'datetime').toString();
     }
 
     static format(date, options) {
@@ -138,9 +119,9 @@ export default class DateFormatter {
         if (!options) options = 'datetime';
 
         if (typeof options === 'string') {
-            if (!DateFormatter.presets[options]) throw new Error(`Invalid date format: ${options}`);
+            if (!this.#presets[options]) throw new Error(`Invalid date format: ${options}`);
 
-            return DateFormatter.presets[options];
+            return this.#presets[options];
         }
 
         return options;
diff --git a/resources/js/components/forms/FormWidget.vue b/resources/js/components/forms/FormWidget.vue
index 44751775846..706cf2394ba 100644
--- a/resources/js/components/forms/FormWidget.vue
+++ b/resources/js/components/forms/FormWidget.vue
@@ -29,7 +29,7 @@ export default {
 
     methods: {
         formatDate(value) {
-            return DateFormatter.format(value, { ...DateFormatter.presets.relative, specificity: 'hour' }).toString();
+            return DateFormatter.format(value, { relative: 'hour' }).toString();
         },
     },
 };

From aebaa2703fbafeffceb89a06f4527a487cf2e5c5 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 16 Apr 2025 13:30:14 -0400
Subject: [PATCH 6/7] Add relative tests

---
 .../js/tests/components/DateFormatter.test.js | 103 ++++++++++++++++++
 1 file changed, 103 insertions(+)

diff --git a/resources/js/tests/components/DateFormatter.test.js b/resources/js/tests/components/DateFormatter.test.js
index 0bb73363493..77472d922a0 100644
--- a/resources/js/tests/components/DateFormatter.test.js
+++ b/resources/js/tests/components/DateFormatter.test.js
@@ -208,3 +208,106 @@ test.each([
 test('an invalid preset throws an error', () => {
     expect(() => new DateFormatter().options('foo')).toThrow('Invalid date format: foo');
 });
+
+test.each([
+    // All the different diffs of time. It defaults to 'year' specificity.
+    ['now', 'en', { relative: true }, '2021-12-25T12:13:14Z', 'now'],
+    ['seconds ago', 'en', { relative: true }, '2021-12-25T12:13:12Z', '2 seconds ago'],
+    ['minute ago', 'en', { relative: true }, '2021-12-25T12:12:14Z', '1 minute ago'],
+    ['minutes ago', 'en', { relative: true }, '2021-12-25T12:11:14Z', '2 minutes ago'],
+    ['hour ago', 'en', { relative: true }, '2021-12-25T11:13:14Z', '1 hour ago'],
+    ['hours ago', 'en', { relative: true }, '2021-12-25T10:13:14Z', '2 hours ago'],
+    ['day ago', 'en', { relative: true }, '2021-12-24T12:13:14Z', 'yesterday'],
+    ['days ago', 'en', { relative: true }, '2021-12-23T12:13:14Z', '2 days ago'],
+    ['week ago', 'en', { relative: true }, '2021-12-18T12:13:14Z', 'last week'],
+    ['weeks ago', 'en', { relative: true }, '2021-12-11T12:13:14Z', '2 weeks ago'],
+    ['month ago', 'en', { relative: true }, '2021-11-25T12:13:14Z', 'last month'],
+    ['months ago', 'en', { relative: true }, '2021-10-25T12:13:14Z', '2 months ago'],
+    ['year ago', 'en', { relative: true }, '2020-12-25T12:13:14Z', 'last year'],
+    ['years ago', 'en', { relative: true }, '2019-12-25T12:13:14Z', '2 years ago'],
+
+    // Same in another locale
+    ['de, now', 'de', { relative: true }, '2021-12-25T12:13:14Z', 'jetzt'],
+    ['de, seconds ago', 'de', { relative: true }, '2021-12-25T12:13:12Z', 'vor 2 Sekunden'],
+    ['de, minute ago', 'de', { relative: true }, '2021-12-25T12:12:14Z', 'vor 1 Minute'],
+    ['de, minutes ago', 'de', { relative: true }, '2021-12-25T12:11:14Z', 'vor 2 Minuten'],
+    ['de, hour ago', 'de', { relative: true }, '2021-12-25T11:13:14Z', 'vor 1 Stunde'],
+    ['de, hours ago', 'de', { relative: true }, '2021-12-25T10:13:14Z', 'vor 2 Stunden'],
+    ['de, day ago', 'de', { relative: true }, '2021-12-24T12:13:14Z', 'gestern'],
+    ['de, days ago', 'de', { relative: true }, '2021-12-23T12:13:14Z', 'vorgestern'],
+    ['de, week ago', 'de', { relative: true }, '2021-12-18T12:13:14Z', 'letzte Woche'],
+    ['de, weeks ago', 'de', { relative: true }, '2021-12-11T12:13:14Z', 'vor 2 Wochen'],
+    ['de, month ago', 'de', { relative: true }, '2021-11-25T12:13:14Z', 'letzten Monat'],
+    ['de, months ago', 'de', { relative: true }, '2021-10-25T12:13:14Z', 'vor 2 Monaten'],
+    ['de, year ago', 'de', { relative: true }, '2020-12-25T12:13:14Z', 'letztes Jahr'],
+    ['de, years ago', 'de', { relative: true }, '2019-12-25T12:13:14Z', 'vor 2 Jahren'],
+
+    // All different specificities
+    ['years ago, spec year', 'en', { relative: 'year' }, '2019-12-25T12:13:14Z', '2 years ago'],
+    ['years ago, spec month', 'en', { relative: 'month' }, '2019-12-25T12:13:14Z', '12/25/2019, 12:13 PM'],
+    ['years ago, spec week', 'en', { relative: 'week' }, '2019-12-25T12:13:14Z', '12/25/2019, 12:13 PM'],
+    ['years ago, spec day', 'en', { relative: 'day' }, '2019-12-25T12:13:14Z', '12/25/2019, 12:13 PM'],
+    ['years ago, spec hour', 'en', { relative: 'hour' }, '2019-12-25T12:13:14Z', '12/25/2019, 12:13 PM'],
+    ['years ago, spec minute', 'en', { relative: 'minute' }, '2019-12-25T12:13:14Z', '12/25/2019, 12:13 PM'],
+    ['years ago, spec second', 'en', { relative: 'second' }, '2019-12-25T12:13:14Z', '12/25/2019, 12:13 PM'],
+    ['months ago, spec year', 'en', { relative: 'year' }, '2021-10-25T12:13:14Z', '2 months ago'],
+    ['months ago, spec month', 'en', { relative: 'month' }, '2021-10-25T12:13:14Z', '2 months ago'],
+    ['months ago, spec week', 'en', { relative: 'week' }, '2021-10-25T12:13:14Z', '10/25/2021, 12:13 PM'],
+    ['months ago, spec day', 'en', { relative: 'day' }, '2021-10-25T12:13:14Z', '10/25/2021, 12:13 PM'],
+    ['months ago, spec hour', 'en', { relative: 'hour' }, '2021-10-25T12:13:14Z', '10/25/2021, 12:13 PM'],
+    ['months ago, spec minute', 'en', { relative: 'minute' }, '2021-10-25T12:13:14Z', '10/25/2021, 12:13 PM'],
+    ['months ago, spec second', 'en', { relative: 'second' }, '2021-10-25T12:13:14Z', '10/25/2021, 12:13 PM'],
+    ['weeks ago, spec year', 'en', { relative: 'year' }, '2021-12-11T12:13:14Z', '2 weeks ago'],
+    ['weeks ago, spec month', 'en', { relative: 'month' }, '2021-12-11T12:13:14Z', '2 weeks ago'],
+    ['weeks ago, spec week', 'en', { relative: 'week' }, '2021-12-11T12:13:14Z', '2 weeks ago'],
+    ['weeks ago, spec day', 'en', { relative: 'day' }, '2021-12-11T12:13:14Z', '12/11/2021, 12:13 PM'],
+    ['weeks ago, spec hour', 'en', { relative: 'hour' }, '2021-12-11T12:13:14Z', '12/11/2021, 12:13 PM'],
+    ['weeks ago, spec minute', 'en', { relative: 'minute' }, '2021-12-11T12:13:14Z', '12/11/2021, 12:13 PM'],
+    ['weeks ago, spec second', 'en', { relative: 'second' }, '2021-12-11T12:13:14Z', '12/11/2021, 12:13 PM'],
+    ['days ago, spec year', 'en', { relative: 'year' }, '2021-12-23T12:13:14Z', '2 days ago'],
+    ['days ago, spec month', 'en', { relative: 'month' }, '2021-12-23T12:13:14Z', '2 days ago'],
+    ['days ago, spec week', 'en', { relative: 'week' }, '2021-12-23T12:13:14Z', '2 days ago'],
+    ['days ago, spec day', 'en', { relative: 'day' }, '2021-12-23T12:13:14Z', '2 days ago'],
+    ['days ago, spec hour', 'en', { relative: 'hour' }, '2021-12-23T12:13:14Z', '12/23/2021, 12:13 PM'],
+    ['days ago, spec minute', 'en', { relative: 'minute' }, '2021-12-23T12:13:14Z', '12/23/2021, 12:13 PM'],
+    ['days ago, spec second', 'en', { relative: 'second' }, '2021-12-23T12:13:14Z', '12/23/2021, 12:13 PM'],
+    ['hours ago, spec year', 'en', { relative: 'year' }, '2021-12-25T10:13:14Z', '2 hours ago'],
+    ['hours ago, spec month', 'en', { relative: 'month' }, '2021-12-25T10:13:14Z', '2 hours ago'],
+    ['hours ago, spec week', 'en', { relative: 'week' }, '2021-12-25T10:13:14Z', '2 hours ago'],
+    ['hours ago, spec day', 'en', { relative: 'day' }, '2021-12-25T10:13:14Z', '2 hours ago'],
+    ['hours ago, spec hour', 'en', { relative: 'hour' }, '2021-12-25T10:13:14Z', '2 hours ago'],
+    ['hours ago, spec minute', 'en', { relative: 'minute' }, '2021-12-25T10:13:14Z', '12/25/2021, 10:13 AM'],
+    ['hours ago, spec second', 'en', { relative: 'second' }, '2021-12-25T10:13:14Z', '12/25/2021, 10:13 AM'],
+    ['minutes ago, spec year', 'en', { relative: 'year' }, '2021-12-25T12:11:14Z', '2 minutes ago'],
+    ['minutes ago, spec month', 'en', { relative: 'month' }, '2021-12-25T12:11:14Z', '2 minutes ago'],
+    ['minutes ago, spec week', 'en', { relative: 'week' }, '2021-12-25T12:11:14Z', '2 minutes ago'],
+    ['minutes ago, spec day', 'en', { relative: 'day' }, '2021-12-25T12:11:14Z', '2 minutes ago'],
+    ['minutes ago, spec hour', 'en', { relative: 'hour' }, '2021-12-25T12:11:14Z', '2 minutes ago'],
+    ['minutes ago, spec minute', 'en', { relative: 'minute' }, '2021-12-25T12:11:14Z', '2 minutes ago'],
+    ['minutes ago, spec second', 'en', { relative: 'second' }, '2021-12-25T12:11:14Z', '12/25/2021, 12:11 PM'],
+    ['seconds ago, spec year', 'en', { relative: 'year' }, '2021-12-25T12:13:12Z', '2 seconds ago'],
+    ['seconds ago, spec month', 'en', { relative: 'month' }, '2021-12-25T12:13:12Z', '2 seconds ago'],
+    ['seconds ago, spec week', 'en', { relative: 'week' }, '2021-12-25T12:13:12Z', '2 seconds ago'],
+    ['seconds ago, spec day', 'en', { relative: 'day' }, '2021-12-25T12:13:12Z', '2 seconds ago'],
+    ['seconds ago, spec hour', 'en', { relative: 'hour' }, '2021-12-25T12:13:12Z', '2 seconds ago'],
+    ['seconds ago, spec minute', 'en', { relative: 'minute' }, '2021-12-25T12:13:12Z', '2 seconds ago'],
+    ['seconds ago, spec second', 'en', { relative: 'second' }, '2021-12-25T12:13:12Z', '2 seconds ago'],
+    [
+        'fallback of datetime preset',
+        'en',
+        { relative: 'second', fallback: 'datetime' },
+        '2021-12-20T12:13:14Z',
+        '12/20/2021, 12:13 PM',
+    ],
+    ['fallback of time preset', 'en', { relative: 'second', fallback: 'time' }, '2021-12-20T12:13:14Z', '12:13 PM'],
+    [
+        'fallback of options',
+        'en',
+        { relative: 'second', fallback: { dateStyle: 'long', timeStyle: 'long' } },
+        '2021-12-20T12:13:14Z',
+        'December 20, 2021 at 12:13:14 PM UTC',
+    ],
+])('it can use relative format (%s)', (label, locale, options, date, expected) => {
+    setNavigatorLanguage(locale);
+    expect(new DateFormatter().format(date, options)).toBe(expected);
+});

From 82e2964e366e9bb62e48d0af26c975c2c3663eba Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 16 Apr 2025 13:33:31 -0400
Subject: [PATCH 7/7] Fix seconds always showing "1 second ago"

---
 resources/js/components/DateFormatter.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/DateFormatter.js b/resources/js/components/DateFormatter.js
index aa68a997393..e52e38848c2 100644
--- a/resources/js/components/DateFormatter.js
+++ b/resources/js/components/DateFormatter.js
@@ -60,7 +60,7 @@ export default class DateFormatter {
         const rtf = new Intl.RelativeTimeFormat(this.locale, { numeric: 'auto' });
 
         // Always show seconds if less than a minute
-        if (seconds < 60) return rtf.format(-Math.sign(diff), 'second');
+        if (seconds < 60) return rtf.format(-Math.sign(diff) * seconds, 'second');
 
         // Show minutes if less than an hour and specificity allows
         if (minutes < 60 && ['minute', 'hour', 'day', 'week', 'month', 'year'].includes(specificity)) {