feat: add Rated At field - #4653 (#4660)

* feat(model): add Rated At field - #4653

Signed-off-by: zacaj <zacaj@zacaj.com>

* fix(ui): ignore empty dates in rating/love tooltips - #4653

* refactor(ui): add isDateSet util function

Signed-off-by: zacaj <zacaj@zacaj.com>

* feat: add tests for isDateSet and rated_at sort mappings

Added comprehensive tests for isDateSet and urlValidate functions in
ui/src/utils/validations.test.js covering falsy values, Go zero date handling,
valid date strings, Date objects, and edge cases.

Added rated_at sort mapping to album, artist, and mediafile repositories,
following the same pattern as starred_at (sorting by rating first, then by
timestamp). This enables proper sorting by rating date in the UI.

---------

Signed-off-by: zacaj <zacaj@zacaj.com>
Co-authored-by: zacaj <zacaj@zacaj.com>
Co-authored-by: Deluan <deluan@navidrome.org>

ui/src/common/DateField.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
+import { isDateSet } from '../utils/validations'
 import { DateField as RADateField } from 'react-admin'
 
 export const DateField = (props) => {
   const { record, source } = props
   const value = record?.[source]
-  if (value === '0001-01-01T00:00:00Z' || value === null) return null
+  if (!isDateSet(value)) return null
   return <RADateField {...props} />
 }
 

ui/src/common/LoveButton.jsx

@@ -7,6 +7,7 @@ import { makeStyles } from '@material-ui/core/styles'
 import { useToggleLove } from './useToggleLove'
 import { useRecordContext } from 'react-admin'
 import config from '../config'
+import { isDateSet } from '../utils/validations'
 
 const useStyles = makeStyles({
   love: {
@@ -46,8 +47,13 @@ export const LoveButton = ({
     <Button
       onClick={handleToggleLove}
       size={'small'}
-      disabled={disabled || loading || record?.missing}
+      disabled={disabled || loading || record.missing}
       className={classes.love}
+      title={
+        isDateSet(record.starredAt)
+          ? new Date(record.starredAt).toLocaleString()
+          : undefined
+      }
       {...rest}
     >
       {record.starred ? (

ui/src/common/RatingField.jsx

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react'
 import PropTypes from 'prop-types'
 import Rating from '@material-ui/lab/Rating'
 import { makeStyles } from '@material-ui/core/styles'
+import { isDateSet } from '../utils/validations'
 import StarBorderIcon from '@material-ui/icons/StarBorder'
 import clsx from 'clsx'
 import { useRating } from './useRating'
@@ -45,7 +46,14 @@ export const RatingField = ({
   )
 
   return (
-    <span onClick={(e) => stopPropagation(e)}>
+    <span
+      onClick={(e) => stopPropagation(e)}
+      title={
+        isDateSet(record.ratedAt)
+          ? new Date(record.ratedAt).toLocaleString()
+          : undefined
+      }
+    >
       <Rating
         name={record.mediaFileId || record.id}
         className={clsx(