feat: add badge indicating kit active status

src/Components/KitActiveBadge.module.css

@@ -0,0 +1,23 @@
+
+.active {
+  --color1: oklch(76% 0.12 151.19);
+  --color2: oklch(72% 0.12 151.19);
+}
+
+.recentlyActive {
+  --color1: oklch(76% 0.12 70.5);
+  --color2: oklch(72% 0.12 70.5);
+}
+
+.inactive,
+.neverSeen {
+  --color1: oklch(76% 0.0 70.5);
+  --color2: oklch(72% 0.0 70.5);
+}
+
+.badge {
+  border-radius: 100%;
+  width: 1rem;
+  height: 1rem;
+  background: linear-gradient(225deg, var(--color1), var(--color2));
+}

src/Components/KitActiveBadge.tsx

@@ -0,0 +1,45 @@
+import { DateTime, Duration } from "luxon";
+import { useMemo } from "react";
+
+import { schemas } from "~/api";
+import { useTime } from "~/hooks";
+
+import style from "./KitActiveBadge.module.css";
+import clsx from "clsx";
+
+export function KitActiveBadge({ kit }: { kit: schemas["Kit"] }) {
+  const now = useTime(Duration.fromMillis(10000));
+
+  const [activeClass, title] = useMemo(() => {
+    if (kit.lastSeen === undefined || kit.lastSeen === null) {
+      return ["neverSeen", "Never seen"];
+    } else {
+      const lastSeen = DateTime.fromISO(kit.lastSeen);
+      const ago = now.diff(lastSeen);
+
+      let activeClass;
+      if (ago.as("minutes") < 10) {
+        activeClass = "active";
+      } else if (ago.as("hours") < 4) {
+        activeClass = "recentlyActive";
+      } else {
+        activeClass = "inactive";
+      }
+
+      return [
+        activeClass,
+        `Last seen ${lastSeen.toLocaleString(DateTime.DATETIME_SHORT)}`,
+      ];
+    }
+  }, [now, kit]);
+
+  return (
+    <>
+      <span
+        role="status"
+        className={clsx(style.badge, style[activeClass])}
+        title={title}
+      ></span>
+    </>
+  );
+}

src/hooks.ts

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import type { TypedUseSelectorHook } from "react-redux";
+import { DateTime, Duration } from "luxon";
 
 import type { RootState, AppDispatch } from "./store";
 
@@ -27,3 +28,12 @@ export function useDebounce<T>(value: T, delayMs: number): T {
 
   return debounced;
 }
+
+/**
+ * Get the current time and keep it updated by the specified interval.
+ */
+export function useTime(updateInterval: Duration): DateTime {
+  const [time, setTime] = useState(DateTime.now());
+
+  return time;
+}

src/scenes/kit/index.tsx

@@ -41,6 +41,7 @@ import style from "./index.module.css";
 import { rtkApi } from "~/services/astroplant";
 import { skipToken } from "@reduxjs/toolkit/query";
 import { selectMe } from "~/modules/me/reducer";
+import { KitActiveBadge } from "~/Components/KitActiveBadge";
 
 type Params = { kitSerial: string };
 
@@ -62,6 +63,7 @@ function KitHeader({
         <div className={style.title}>
           <KitAvatar serial={kit.serial} />
           {kit.name || "Unnamed kit"} / {kit.serial}
+          <KitActiveBadge kit={kit} />
           {kit.privacyPublicDashboard && (
             <Badge variant="muted" size="small" text="Public" />
           )}

src/scenes/user/index.tsx

@@ -16,6 +16,7 @@ import { Badge } from "~/Components/Badge";
 
 import commonStyle from "~/Common.module.css";
 import style from "./index.module.css";
+import { KitActiveBadge } from "~/Components/KitActiveBadge";
 
 export default function User({ username }: { username: string }) {
   // This component is used to render both the user profile of the logged-in
@@ -160,6 +161,7 @@ export default function User({ username }: { username: string }) {
                             <Link to={`/kit/${kit.serial}`}>
                               <h3>{kit.name}</h3>
                             </Link>
+                            <KitActiveBadge kit={kit} />
                             {kit.privacyPublicDashboard && (
                               <Badge
                                 variant="muted"