Improve date format in last updated field (#168)

1. AM/PM indicator is now displayed on the same line as the time.
2. Year is now included for dates not in the current year.
3. Fixed the display of 24-hour time format to ensure proper representation.

src/assets/styles/components/list_document.scss

@@ -179,7 +179,7 @@
   .updated,
   .size {
     padding-left: 12px;
-    width: 120px;
+    max-width: 200px;
   }
 
   .connections {

src/features/documents/DocumentDetail.tsx

@@ -18,12 +18,14 @@ import React, { useEffect, useState } from 'react';
 import { fromUnixTime, format } from 'date-fns';
 import { Link, useParams, useNavigate } from 'react-router-dom';
 import { useAppDispatch, useAppSelector } from 'app/hooks';
+import { selectPreferences } from 'features/users/usersSlice';
 import { selectDocumentDetail, getDocumentAsync, removeDocumentByAdminAsync } from './documentsSlice';
 import { Icon, Button, CodeBlock, CopyButton, Popover, Dropdown } from 'components';
 
 export function DocumentDetail() {
   const navigate = useNavigate();
   const { document } = useAppSelector(selectDocumentDetail);
+  const { use24HourClock } = useAppSelector(selectPreferences);
   const dispatch = useAppDispatch();
   const params = useParams();
   const projectName = params.projectName || '';
@@ -55,7 +57,12 @@ export function DocumentDetail() {
           </Link>
           <div className="title_inner">
             <strong className="title">{document?.key}</strong>
-            <span className="date">{format(fromUnixTime(document?.updatedAt!), 'MMM d, h:mm')}</span>
+            <span className="date">
+              {format(
+                fromUnixTime(document?.updatedAt!),
+                `MMM d${new Date().getFullYear() === fromUnixTime(document?.updatedAt!).getFullYear() ? '' : ', yyyy'}, ${use24HourClock ? 'HH:mm' : 'h:mm a'}`,
+              )}
+            </span>
           </div>
 
           <Popover opened={opened} onChange={setOpened}>

src/features/documents/DocumentList.tsx

@@ -211,7 +211,10 @@ export function DocumentList({ isDetailOpen = false }: { isDetailOpen?: boolean
                     <span className="td id">{key}</span>
                     {!isDetailOpen && (
                       <span className="td updated">
-                        {format(fromUnixTime(updatedAt), `${use24HourClock ? 'MMM d, h:mm' : 'MMM d, h:mm aa'}`)}
+                        {format(
+                          fromUnixTime(updatedAt),
+                          `MMM d${new Date().getFullYear() === fromUnixTime(updatedAt).getFullYear() ? '' : ', yyyy'}, ${use24HourClock ? 'HH:mm' : 'h:mm a'}`,
+                        )}
                       </span>
                     )}
                   </Link>