FEATURE (time): Format last backup time in a short way

Author: RostislavDugin

frontend/src/features/databases/ui/DatabaseCardComponent.tsx

@@ -3,7 +3,7 @@ import dayjs from 'dayjs';
 
 import { type Database, DatabaseType } from '../../../entity/databases';
 import { getStorageLogoFromType } from '../../../entity/storages';
-import { getUserTimeFormat } from '../../../shared/time';
+import { getUserShortTimeFormat } from '../../../shared/time/getUserTimeFormat';
 
 interface Props {
   database: Database;
@@ -51,9 +51,8 @@ export const DatabaseCardComponent = ({
         <div className="mt-3 mb-1 text-xs text-gray-500">
           <span className="font-bold">Last backup</span>
           <br />
-          {dayjs(database.lastBackupTime).format(getUserTimeFormat().format)}
-          <br />
-          {dayjs(database.lastBackupTime).fromNow()}
+          {dayjs(database.lastBackupTime).format(getUserShortTimeFormat().format)} (
+          {dayjs(database.lastBackupTime).fromNow()})
         </div>
       )}
 

frontend/src/shared/time/getUserTimeFormat.ts

@@ -9,3 +9,15 @@ export const getUserTimeFormat = () => {
     format: is12Hour ? 'DD.MM.YYYY h:mm:ss A' : 'DD.MM.YYYY HH:mm:ss',
   };
 };
+
+export const getUserShortTimeFormat = () => {
+  const locale = navigator.language || 'en-US';
+  const testDate = new Date(2023, 0, 1, 13, 0, 0); // 1 PM
+  const timeString = testDate.toLocaleTimeString(locale, { hour: 'numeric' });
+  const is12Hour = timeString.includes('PM') || timeString.includes('AM');
+
+  return {
+    use12Hours: is12Hour,
+    format: is12Hour ? 'DD.MM.YYYY h:mm A' : 'DD.MM.YYYY HH:mm',
+  };
+};