Revision 3 (#4)

* fix: improve ttl relative time formatting

* fix: make refresh button refresh the items list too

* make refresh button invalidate dbsize

Author: ytkimirti

src/components/databrowser/components/sidebar/index.tsx

@@ -1,11 +1,13 @@
 import { IconRefresh } from "@tabler/icons-react"
 
+import { queryClient } from "@/lib/clients"
 import { Button } from "@/components/ui/button"
 import { Spinner } from "@/components/ui/spinner"
 
+import { FETCH_LIST_ITEMS_QUERY_KEY } from "../../hooks"
 import { useKeys } from "../../hooks/use-keys"
 import { AddKeyModal } from "../add-key-modal"
-import { DisplayDbSize } from "./db-size"
+import { DisplayDbSize, FETCH_DB_SIZE_QUERY_KEY } from "./db-size"
 import { Empty } from "./empty"
 import { InfiniteScroll } from "./infinite-scroll"
 import { KeysList } from "./keys-list"
@@ -23,7 +25,18 @@ export function Sidebar() {
         <div className="flex h-10 items-center justify-between pl-1">
           <DisplayDbSize />
           <div className="flex gap-1">
-            <Button className="h-7 w-7 px-0" onClick={refetch}>
+            <Button
+              className="h-7 w-7 px-0"
+              onClick={() => {
+                refetch()
+                queryClient.invalidateQueries({
+                  queryKey: [FETCH_LIST_ITEMS_QUERY_KEY],
+                })
+                queryClient.invalidateQueries({
+                  queryKey: [FETCH_DB_SIZE_QUERY_KEY],
+                })
+              }}
+            >
               <Spinner isLoading={query.isFetching}>
                 <IconRefresh size={16} />
               </Spinner>

src/lib/utils.ts

@@ -24,15 +24,26 @@ const units = {
   second: 1000,
 } as const
 
-// 130 -> 2 minutes
-// 7800 -> 2 hours
-/** 130 is "2 minutes", 5 is "5 seconds" */
+// 2h 10m, 1d 2h, 1 year 2 months, 3 years 4 months etc.
 export function formatTime(seconds: number) {
+  let milliseconds = seconds * 1000
+  const parts = []
+
   for (const [unit, value] of Object.entries(units)) {
-    const interval = (seconds * 1000) / value
-    if (interval >= 1) {
-      return `${Math.floor(interval)} ${unit}${interval > 1 && unit !== "min" ? "s" : ""}`
+    if (milliseconds >= value) {
+      const amount = Math.floor(milliseconds / value)
+      const plural = amount > 1 ? "s" : ""
+      const label =
+        unit === "month" ? ` month${plural}` : unit === "year" ? ` year${plural}` : unit[0]
+      parts.push(`${amount}${label}`)
+      milliseconds %= value
     }
   }
-  return "just now"
+
+  // If no parts (e.g., 0ms), default to "0s"
+  if (parts.length === 0) {
+    parts.push("0s")
+  }
+
+  return parts.slice(0, 2).join(" ")
 }