show last time item was refreshed

web/src/api/useItemsQuery.ts

@@ -4,6 +4,7 @@ export type ItemDetails = {
   id: number;
   query: string;
   createdAt: string;
+  refreshedAt: string | null;
 };
 
 export const useItemsQuery = () => {

web/src/components/Item.tsx

@@ -12,9 +12,12 @@ import { useDownloadTorrentMutation } from "../api/useDownloadTorrentMutation";
 import { useDeleteItemMutation } from "../api/useDeleteItemMutation";
 import { useQueryClient } from "@tanstack/react-query";
 import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
 import { humanFileSize } from "../utils/humanFileSize";
 import { useDeleteTorrentMutation } from "../api/useDeleteTorrentMutation";
 
+dayjs.extend(relativeTime);
+
 export type ItemProps = {
   item: ItemDetails;
 };
@@ -79,7 +82,16 @@ export const Item = ({ item }: ItemProps) => {
       </div>
       {open && (
         <div>
-          <div className="flex mb-2">
+          <div className="flex items-center gap-2 mb-2">
+            <div>
+              Last Refresh:{" "}
+              {item.refreshedAt
+                ? dayjs(item.refreshedAt).format("DD.MM.YYYY HH:mm")
+                : "never"}
+              {item.refreshedAt
+                ? " (" + dayjs(item.refreshedAt).from(dayjs()) + ")"
+                : null}
+            </div>
             <button
               className="cursor-pointer flex items-center gap-1 text-[#b00420]"
               onClick={handleDelete}