Unify date/time dependencies (#2891)

Remove all date/time-related dependencies from the ui except `dayjs` and
use `dayjs` for all tasks.

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

web/.gitignore

@@ -3,4 +3,4 @@ node_modules
 dist
 dist-ssr
 *.local
-src/assets/timeAgoLocales
+src/assets/dayjsLocales

web/package.json

@@ -23,8 +23,6 @@
  "ansi_up": "^6.0.0",
  "dayjs": "^1.11.9",
  "fuse.js": "^7.0.0",
- "humanize-duration": "^3.28.0",
- "javascript-time-ago": "^2.5.9",
  "lodash": "^4.17.21",
  "node-emoji": "^2.0.0",
  "pinia": "^2.1.4",
@@ -35,8 +33,6 @@
  },
  "devDependencies": {
  "@iconify/json": "^2.2.131",
- "@types/humanize-duration": "^3.27.1",
- "@types/javascript-time-ago": "^2.0.3",
  "@types/lodash": "^4.14.195",
  "@types/node": "^20.0.0",
  "@types/node-emoji": "^1.8.2",
@@ -56,6 +52,7 @@
  "eslint-plugin-vue": "^9.17.0",
  "eslint-plugin-vue-scoped-css": "^2.5.0",
  "prettier": "^3.0.0",
+ "replace-in-file": "^7.0.2",
  "tinycolor2": "^1.6.0",
  "typescript": "5.3.2",
  "unplugin-icons": "^0.18.0",

web/src/components/admin/settings/AdminAgentsTab.vue

@@ -24,7 +24,7 @@
  <Badge v-if="agent.capacity" :label="$t('admin.settings.agents.capacity.badge')" :value="agent.capacity" />
  </span>
  <span class="ml-2">{{
- agent.last_contact ? timeAgo.format(agent.last_contact * 1000) : $t('admin.settings.agents.never')
+ agent.last_contact ? date.timeAgo(agent.last_contact * 1000) : $t('admin.settings.agents.never')
  }}</span>
  </span>
  <IconButton
@@ -98,7 +98,7 @@
  <TextField
  :model-value="
  selectedAgent.last_contact
- ? timeAgo.format(selectedAgent.last_contact * 1000)
+ ? date.timeAgo(selectedAgent.last_contact * 1000)
  : $t('admin.settings.agents.never')
  "
  disabled
@@ -135,14 +135,14 @@ import TextField from '~/components/form/TextField.vue';
 import Settings from '~/components/layout/Settings.vue';
 import useApiClient from '~/compositions/useApiClient';
 import { useAsyncAction } from '~/compositions/useAsyncAction';
+import { useDate } from '~/compositions/useDate';
 import useNotifications from '~/compositions/useNotifications';
 import { usePagination } from '~/compositions/usePaginate';
-import useTimeAgo from '~/compositions/useTimeAgo';
 import { Agent } from '~/lib/api/types';
 
 const apiClient = useApiClient();
 const notifications = useNotifications();
-const timeAgo = useTimeAgo();
+const date = useDate();
 const { t } = useI18n();
 
 const selectedAgent = ref<Partial<Agent>>();

web/src/components/repo/pipeline/PipelineStepDuration.vue

@@ -5,9 +5,9 @@
 <script lang="ts" setup>
 import { computed, toRef } from 'vue';
 
+import { useDate } from '~/compositions/useDate';
 import { useElapsedTime } from '~/compositions/useElapsedTime';
 import { PipelineStep, PipelineWorkflow } from '~/lib/api/types';
-import { durationAsNumber } from '~/utils/duration';
 
 const props = defineProps<{
  step?: PipelineStep;
@@ -16,6 +16,7 @@ const props = defineProps<{
 
 const step = toRef(props, 'step');
 const workflow = toRef(props, 'workflow');
+const { durationAsNumber } = useDate();
 
 const durationRaw = computed(() => {
  const start = (step.value ? step.value?.start_time : workflow.value?.start_time) || 0;

web/src/components/user/UserGeneralTab.vue

@@ -18,8 +18,6 @@
 
 <script lang="ts" setup>
 import { useLocalStorage } from '@vueuse/core';
-import dayjs from 'dayjs';
-import TimeAgo from 'javascript-time-ago';
 import { SUPPORTED_LOCALES } from 'virtual:vue-i18n-supported-locales';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -44,8 +42,6 @@ const selectedLocale = computed<string>({
  async set(_selectedLocale) {
  await setI18nLanguage(_selectedLocale);
  storedLocale.value = _selectedLocale;
- dayjs.locale(_selectedLocale);
- TimeAgo.setDefaultLocale(_selectedLocale);
  },
  get() {
  return storedLocale.value;