Improve date formatting

src/aiChat.jsx

@@ -13,6 +13,7 @@ import {
 import { useState, useEffect } from "react";
 import { defaultProvider, getChatResponse, formatResponse, providers, processChunks } from "./api/gpt";
 import { LocalStorage, Clipboard } from "@raycast/api";
+import { formatDate } from "./api/helper";
 
 export default function Chat({ launchContext }) {
   let toast = async (style, title, message) => {
@@ -426,14 +427,6 @@ export default function Chat({ launchContext }) {
       </ActionPanel>
     );
   };
-  let formatDate = (dateToCheckISO) => {
-    const dateToCheck = new Date(dateToCheckISO);
-    if (dateToCheck.toDateString() === new Date().toDateString()) {
-      return `${new Date().getHours()}:${String(new Date().getMinutes()).padStart(2, "0")}`;
-    } else {
-      return `${new Date().toLocaleDateString("en-US", { month: "2-digit", day: "2-digit", year: "2-digit" })}`;
-    }
-  };
 
   let [chatData, setChatData] = useState(null);
 

src/api/helper.jsx

@@ -0,0 +1,33 @@
+export const formatDate = (dateToCheckISO) => {
+  // Calculate the date difference between the current date and the date to check
+  // and format it like: 2y, 3mo, 4d, 5h, 6m (no seconds because updates will be too frequent)
+
+  const d1 = new Date(),
+    t1 = d1.getTime();
+  const d2 = new Date(dateToCheckISO),
+    t2 = d2.getTime();
+  const diff = t1 - t2;
+  const seconds = Math.floor(diff / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  const months = Math.floor(days / 30);
+  const years = Math.floor(months / 12);
+
+  let formatted = "now";
+  // we only want one unit of time, and it should be the largest unit
+  for (const [unit, value] of [
+    ["y", years],
+    ["mo", months],
+    ["d", days],
+    ["h", hours],
+    ["m", minutes],
+  ]) {
+    if (value > 0) {
+      formatted = `${value}${unit}`;
+      break;
+    }
+  }
+
+  return formatted;
+};

src/genImage.jsx

@@ -15,6 +15,7 @@ import {
 import { useEffect, useState } from "react";
 import * as G4F from "g4f";
 import fs from "fs";
+import { formatDate } from "./api/helper";
 
 const g4f = new G4F.G4F();
 
@@ -413,14 +414,6 @@ export default function genImage() {
       </ActionPanel>
     );
   };
-  let formatDate = (dateToCheckISO) => {
-    const dateToCheck = new Date(dateToCheckISO);
-    if (dateToCheck.toDateString() === new Date().toDateString()) {
-      return `${new Date().getHours()}:${String(new Date().getMinutes()).padStart(2, "0")}`;
-    } else {
-      return `${new Date().toLocaleDateString("en-US", { month: "2-digit", day: "2-digit", year: "2-digit" })}`;
-    }
-  };
 
   let [chatData, setChatData] = useState(null);