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"