@jxsuite/studio 0.28.2 → 0.28.4

package/src/panels/elements-panel.ts

@@ -2,9 +2,9 @@
 /** Elements panel — block/component palette with categorized accordion and search filter. */
 
 import { html, nothing } from "lit-html";
-import { getNodeAtPath } from "../store";
+import { childList, getNodeAtPath } from "../store";
 import { activeTab } from "../workspace/workspace";
-import { transactDoc, mutateInsertNode } from "../tabs/transact";
+import { mutateInsertNode, transactDoc } from "../tabs/transact";
 import { view } from "../view";
 import { getEffectiveElements } from "../site-context";
 import { componentRegistry } from "../files/components";
@@ -32,16 +32,20 @@ export function renderElementsTemplate(ctx: {
       const filtered = view.elementsFilter
         ? elements.filter((/** @type {{ tag: string }} */ e) => e.tag.includes(view.elementsFilter))
         : elements;
-      if (filtered.length === 0) return nothing;
+      if (filtered.length === 0) {
+        return nothing;
+      }
 
       return html`
         <sp-accordion-item
           label=${category}
           ?open=${!view.elementsCollapsed.has(category)}
           @sp-accordion-item-toggle=${(e: Event) => {
-            if ((e.target as HTMLElement & { open: boolean }).open)
+            if ((e.target as HTMLElement & { open: boolean }).open) {
               view.elementsCollapsed.delete(category);
-            else view.elementsCollapsed.add(category);
+            } else {
+              view.elementsCollapsed.add(category);
+            }
           }}
         >
           ${filtered.map((/** @type {{ tag: string }} */ { tag }) => {
@@ -54,7 +58,7 @@ export function renderElementsTemplate(ctx: {
                   const t = activeTab.value;
                   const parentPath = t?.session.selection || [];
                   const parent = getNodeAtPath(t!.doc.document, parentPath);
-                  const idx = parent?.children ? parent.children.length : 0;
+                  const idx = childList(parent).length;
                   transactDoc(t!, (tr) =>
                     mutateInsertNode(tr, parentPath, idx, structuredClone(def)),
                   );
@@ -73,9 +77,11 @@ export function renderElementsTemplate(ctx: {
   const effectiveEls = getEffectiveElements(
     tab?.doc.document?.$elements as (string | JxElement)[] | undefined,
   );
-  const enabledTags: Set<string> = new Set();
+  const enabledTags = new Set<string>();
   for (const entry of effectiveEls) {
-    if (typeof entry !== "string") continue;
+    if (typeof entry !== "string") {
+      continue;
+    }
     const comp = componentRegistry.find(
       (c: ComponentEntry) =>
         c.source === "npm" && c.modulePath && entry === `${c.package}/${c.modulePath}`,
@@ -84,7 +90,9 @@ export function renderElementsTemplate(ctx: {
       enabledTags.add(comp.tagName);
     } else {
       for (const c of componentRegistry) {
-        if (c.source === "npm" && c.package === entry) enabledTags.add(c.tagName);
+        if (c.source === "npm" && c.package === entry) {
+          enabledTags.add(c.tagName);
+        }
       }
     }
   }
@@ -105,9 +113,11 @@ export function renderElementsTemplate(ctx: {
             label="Components"
             ?open=${!view.elementsCollapsed.has("Components")}
             @sp-accordion-item-toggle=${(e: Event) => {
-              if ((e.target as HTMLElement & { open: boolean }).open)
+              if ((e.target as HTMLElement & { open: boolean }).open) {
                 view.elementsCollapsed.delete("Components");
-              else view.elementsCollapsed.add("Components");
+              } else {
+                view.elementsCollapsed.add("Components");
+              }
             }}
           >
             <div class="components-section">
@@ -123,9 +133,8 @@ export function renderElementsTemplate(ctx: {
                       const t = activeTab.value;
                       const parentPath = t?.session.selection || [];
                       const parent = getNodeAtPath(t!.doc.document, parentPath);
-                      const idx = parent?.children ? parent.children.length : 0;
+                      const idx = childList(parent).length;
                       const instanceDef = {
-                        tagName: comp.tagName,
                         $props: Object.fromEntries(
                           (comp.props || []).map(
                             (/** @type {{ name: string; default?: unknown }} */ p) => [
@@ -134,6 +143,7 @@ export function renderElementsTemplate(ctx: {
                             ],
                           ),
                         ),
+                        tagName: comp.tagName,
                       };
                       transactDoc(t!, (tr) =>
                         mutateInsertNode(tr, parentPath, idx, structuredClone(instanceDef)),

package/src/panels/events-panel.ts

@@ -3,10 +3,18 @@ import { getNodeAtPath } from "../store";
 import { html, nothing } from "lit-html";
 import { live } from "lit-html/directives/live.js";
 import { activeTab } from "../workspace/workspace";
-import { transactDoc, mutateUpdateProperty } from "../tabs/transact";
+import { mutateUpdateProperty, transactDoc } from "../tabs/transact";
 import { renderExpressionEditor } from "../ui/expression-editor";
+import {
+  getEventBinding,
+  isExpressionDef,
+  isFunctionDef,
+  isJsonObject,
+  isRef,
+} from "@jxsuite/schema/guards";
 
-import type { JxPrototypeDef } from "@jxsuite/schema/types";
+import type { JsonValue } from "../types";
+import type { CemEvent, JxFunctionDef, JxPrototypeDef } from "@jxsuite/schema/types";
 
 export const EVENT_NAMES = [
   "onclick",
@@ -27,9 +35,13 @@ export function eventsSidebarTemplate(helpers: { isCustomElementDoc: () => boole
   const tab = activeTab.value;
   const selection = tab?.session.selection;
   const document = tab?.doc.document;
-  if (!selection) return html`<div class="empty-state">Select an element to edit events</div>`;
+  if (!selection) {
+    return html`<div class="empty-state">Select an element to edit events</div>`;
+  }
   const node = getNodeAtPath(document!, selection);
-  if (!node) return html`<div class="empty-state">Node not found</div>`;
+  if (!node) {
+    return html`<div class="empty-state">Node not found</div>`;
+  }
 
   const defs = document!.state || {};
   const functionDefs = Object.entries(defs).filter(
@@ -40,11 +52,12 @@ export function eventsSidebarTemplate(helpers: { isCustomElementDoc: () => boole
   // Declared CEM events (custom element docs)
   let declaredEventsT: unknown = nothing;
   if (isCustomElementDoc()) {
-    const allEmits: Record<string, unknown>[] = [];
+    const allEmits: (CemEvent & { _fn: string })[] = [];
     for (const [fnName, d] of Object.entries(defs)) {
-      if (Array.isArray((d as Record<string, unknown>).emits)) {
-        for (const ev of (d as Record<string, unknown>).emits as Record<string, unknown>[])
+      if (isFunctionDef(d) && Array.isArray(d.emits)) {
+        for (const ev of d.emits) {
           allEmits.push({ ...ev, _fn: fnName });
+        }
       }
     }
     if (allEmits.length > 0) {
@@ -56,10 +69,8 @@ export function eventsSidebarTemplate(helpers: { isCustomElementDoc: () => boole
               <div class="declared-event-row" title=${ev.description || ""}>
                 <code class="event-code">${ev.name || "(unnamed)"}</code>
                 <span class="event-source">← ${ev._fn}</span>
-                ${(ev.type as Record<string, unknown>)?.text
-                  ? html`<span class="event-type"
-                      >${(ev.type as Record<string, unknown>).text}</span
-                    >`
+                ${isJsonObject(ev.type) && typeof ev.type.text === "string"
+                  ? html`<span class="event-type">${ev.type.text}</span>`
                   : nothing}
               </div>
             `,
@@ -71,12 +82,9 @@ export function eventsSidebarTemplate(helpers: { isCustomElementDoc: () => boole
   }
 
   // Find existing event bindings
-  const eventKeys = Object.keys(node).filter((k) => {
-    if (!k.startsWith("on")) return false;
-    const v = node[k];
-    if (!v || typeof v !== "object") return false;
-    return v.$ref || v.$prototype === "Function" || v.$expression;
-  });
+  const eventKeys = Object.keys(node).filter(
+    (k) => k.startsWith("on") && getEventBinding(node, k) !== undefined,
+  );
 
   return html`
     <div class="events-panel">
@@ -86,10 +94,14 @@ export function eventsSidebarTemplate(helpers: { isCustomElementDoc: () => boole
           ? html` <sp-field-label size="s">Event Bindings</sp-field-label> `
           : nothing}
         ${eventKeys.map((evKey) => {
-          const evVal = node[evKey];
-          const isInline = evVal.$prototype === "Function";
-          const isExpression = evVal.$expression != null;
-          const currentMode = isInline ? "inline" : isExpression ? "$expression" : "ref";
+          const evVal = getEventBinding(node, evKey);
+          if (!evVal) {
+            return nothing;
+          }
+          const inlineFn: JxFunctionDef | null = isFunctionDef(evVal) ? evVal : null;
+          const expression = isExpressionDef(evVal) ? evVal.$expression : null;
+          const refValue = isRef(evVal) ? evVal.$ref : null;
+          const currentMode = inlineFn ? "inline" : expression ? "$expression" : "ref";
           return html`
             <div class="event-binding">
               <div class="event-row">
@@ -101,8 +113,8 @@ export function eventsSidebarTemplate(helpers: { isCustomElementDoc: () => boole
                     const newKey = (e.target as HTMLInputElement).value;
                     if (newKey && newKey !== evKey) {
                       transactDoc(activeTab.value, (t) => {
-                        mutateUpdateProperty(t, selection, evKey, undefined);
-                        mutateUpdateProperty(t, selection, newKey, node[evKey]);
+                        mutateUpdateProperty(t, selection, evKey);
+                        mutateUpdateProperty(t, selection, newKey, evVal as JsonValue);
                       });
                     }
                   }}
@@ -132,7 +144,7 @@ export function eventsSidebarTemplate(helpers: { isCustomElementDoc: () => boole
                         }),
                       );
                     } else {
-                      const firstFn = functionDefs[0];
+                      const [firstFn] = functionDefs;
                       transactDoc(activeTab.value, (t) =>
                         mutateUpdateProperty(
                           t,
@@ -152,14 +164,12 @@ export function eventsSidebarTemplate(helpers: { isCustomElementDoc: () => boole
                   size="xs"
                   quiet
                   @click=${() =>
-                    transactDoc(activeTab.value, (t) =>
-                      mutateUpdateProperty(t, selection, evKey, undefined),
-                    )}
+                    transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, selection, evKey))}
                 >
                   <sp-icon-delete slot="icon"></sp-icon-delete>
                 </sp-action-button>
               </div>
-              ${isInline
+              ${inlineFn
                 ? html`
                     <div class="event-body-row">
                       <sp-textfield
@@ -167,13 +177,13 @@ export function eventsSidebarTemplate(helpers: { isCustomElementDoc: () => boole
                         multiline
                         grows
                         placeholder="// handler body"
-                        .value=${live(evVal.body || "")}
+                        .value=${live(inlineFn?.body || "")}
                         @input=${(e: Event) => {
                           transactDoc(activeTab.value, (t) =>
                             mutateUpdateProperty(t, selection, evKey, {
                               $prototype: "Function",
                               body: (e.target as HTMLInputElement).value,
-                              parameters: evVal.parameters || [],
+                              parameters: inlineFn?.parameters || [],
                             }),
                           );
                         }}
@@ -185,9 +195,9 @@ export function eventsSidebarTemplate(helpers: { isCustomElementDoc: () => boole
                         title="Open in editor"
                         @click=${() => {
                           tab.session.ui.editingFunction = {
-                            type: "event",
-                            path: selection,
                             eventKey: evKey,
+                            path: selection,
+                            type: "event",
                           };
                         }}
                       >
@@ -195,18 +205,18 @@ export function eventsSidebarTemplate(helpers: { isCustomElementDoc: () => boole
                       </sp-action-button>
                     </div>
                   `
-                : isExpression
+                : expression
                   ? html`
                       <div class="event-body-row">
                         ${renderExpressionEditor(
-                          evVal.$expression,
-                          (newNode: any) =>
+                          expression,
+                          (newNode: unknown) =>
                             transactDoc(activeTab.value, (t) =>
                               mutateUpdateProperty(t, selection, evKey, {
                                 $expression: newNode,
                               }),
                             ),
-                          { stateDefs: Object.keys(defs), allowEventRef: true },
+                          { allowEventRef: true, stateDefs: Object.keys(defs) },
                         )}
                       </div>
                     `
@@ -214,7 +224,7 @@ export function eventsSidebarTemplate(helpers: { isCustomElementDoc: () => boole
                       <sp-picker
                         size="s"
                         class="event-handler"
-                        .value=${live(evVal.$ref || "__none__")}
+                        .value=${live(refValue || "__none__")}
                         @change=${(e: Event) => {
                           if (
                             (e.target as HTMLInputElement).value &&
@@ -227,7 +237,7 @@ export function eventsSidebarTemplate(helpers: { isCustomElementDoc: () => boole
                             );
                           } else {
                             transactDoc(activeTab.value, (t) =>
-                              mutateUpdateProperty(t, selection, evKey, undefined),
+                              mutateUpdateProperty(t, selection, evKey),
                             );
                           }
                         }}

package/src/panels/git-panel.ts

@@ -5,23 +5,24 @@
  */
 
 import { html, nothing } from "lit-html";
+import { errorMessage } from "@jxsuite/schema/parse";
+import type {
+  GitBranchesResult,
+  GitDiffState,
+  GitFileStatus,
+  GitStatusResult,
+  StudioPlatform,
+} from "../types";
 import { live } from "lit-html/directives/live.js";
 import { repeat } from "lit-html/directives/repeat.js";
 import { getPlatform } from "../platform";
 import { formatForPath } from "../format/format-host";
-import { updateUi, renderOnly, projectState } from "../store";
+import { projectState, renderOnly, updateUi } from "../store";
 import { activeTab } from "../workspace/workspace";
 import { view } from "../view";
-import { showDialog, showConfirmDialog } from "../ui/layers";
+import { showConfirmDialog, showDialog } from "../ui/layers";
 import { statusMessage } from "./statusbar";
 import { publishToGithub } from "../github/github-publish";
-import type { StudioPlatform } from "../types";
-
-interface GitFileEntry {
-  path: string;
-  status: string;
-  staged: boolean;
-}
 
 interface GitLogEntry {
   hash: string;
@@ -30,25 +31,21 @@ interface GitLogEntry {
   date: string;
 }
 
+type GitFileEntry = GitFileStatus;
+
 interface GitUiState {
-  gitStatus?: {
-    files?: GitFileEntry[];
-    branch?: string;
-    ahead?: number;
-    behind?: number;
-    isRepo?: boolean;
-    remotes?: string[];
-  } | null;
-  gitBranches?: { current?: string; branches?: string[] } | null;
+  gitStatus?: Partial<GitStatusResult> | null;
+  gitBranches?: Partial<GitBranchesResult> | null;
   gitLoading?: boolean;
   gitError?: string | null;
   gitCommitMessage?: string;
   gitLogEntries?: GitLogEntry[] | null;
-  [key: string]: unknown;
 }
 
 export async function refreshGitStatus() {
-  if (!projectState) return;
+  if (!projectState) {
+    return;
+  }
   const plat = getPlatform();
   updateUi("gitLoading", true);
   updateUi("gitError", null);
@@ -57,8 +54,8 @@ export async function refreshGitStatus() {
     updateUi("gitStatus", status);
     updateUi("gitBranches", branches);
     _lastUpdated = new Date();
-  } catch (e) {
-    updateUi("gitError", (e as Error).message);
+  } catch (error) {
+    updateUi("gitError", errorMessage(error));
   } finally {
     updateUi("gitLoading", false);
     renderOnly("leftPanel");
@@ -104,7 +101,9 @@ export async function cloneRepository(ctx: { openRecentProject: (root: string) =
     `,
   );
 
-  if (!url) return;
+  if (!url) {
+    return;
+  }
 
   try {
     statusMessage("Cloning repository...");
@@ -113,14 +112,14 @@ export async function cloneRepository(ctx: { openRecentProject: (root: string) =
       statusMessage("Clone complete");
       await ctx.openRecentProject(result.root);
     }
-  } catch (e) {
-    statusMessage(`Clone failed: ${(e as Error).message}`);
+  } catch (error) {
+    statusMessage(`Clone failed: ${errorMessage(error)}`);
   }
 }
 
 /** @returns {boolean} */
 export function platformSupportsClone() {
-  return !!getPlatform().gitClone;
+  return Boolean(getPlatform().gitClone);
 }
 
 /**
@@ -128,14 +127,15 @@ export function platformSupportsClone() {
  * @param {unknown} [body]
  */
 async function gitAction(action: string, body?: unknown) {
-  const plat = getPlatform() as Record<string, Function> & StudioPlatform;
+  const plat = getPlatform() as Record<string, (...args: unknown[]) => Promise<unknown>> &
+    StudioPlatform;
   updateUi("gitLoading", true);
   updateUi("gitError", null);
   try {
     await plat[action](body);
     await refreshGitStatus();
-  } catch (e) {
-    updateUi("gitError", (e as Error).message);
+  } catch (error) {
+    updateUi("gitError", errorMessage(error));
     updateUi("gitLoading", false);
     renderOnly("leftPanel");
   }
@@ -151,8 +151,8 @@ async function fetchGitLog() {
     const entries = await plat.gitLog(30);
     updateUi("gitLogEntries", entries);
     renderOnly("leftPanel");
-  } catch (e) {
-    updateUi("gitError", (e as Error).message);
+  } catch (error) {
+    updateUi("gitError", errorMessage(error));
     renderOnly("leftPanel");
   }
 }
@@ -161,7 +161,7 @@ async function fetchGitLog() {
  * @param {{ ui: GitUiState }} S
  * @param {{
  *   setCanvasMode?: (mode: string) => void;
- *   setGitDiffState?: (state: unknown) => void;
+ *   setGitDiffState?: (state: GitDiffState | null) => void;
  *   cloneRepository?: () => void;
  * }} ctx
  */
@@ -169,7 +169,7 @@ export function renderGitPanel(
   S: { ui: GitUiState },
   ctx: {
     setCanvasMode?: (mode: string) => void;
-    setGitDiffState?: (state: unknown) => void;
+    setGitDiffState?: (state: GitDiffState | null) => void;
     cloneRepository?: () => void;
   },
 ) {
@@ -231,8 +231,10 @@ export function renderGitPanel(
 
   if (!_pollTimer) {
     _pollTimer = setInterval(() => {
-      if (view.leftTab === "git" && !S.ui.gitLoading) refreshGitStatus();
-    }, 30000);
+      if (view.leftTab === "git" && !S.ui.gitLoading) {
+        refreshGitStatus();
+      }
+    }, 30_000);
   }
 
   const stagedFiles = status?.files?.filter((f: GitFileEntry) => f.staged) || [];
@@ -242,7 +244,9 @@ export function renderGitPanel(
   const doCommit = async () => {
     const tab = activeTab.value;
     const msg = tab?.session.ui.gitCommitMessage?.trim();
-    if (!msg) return;
+    if (!msg) {
+      return;
+    }
     updateUi("gitCommitMessage", "");
     await gitAction("gitCommit", msg);
   };
@@ -250,7 +254,9 @@ export function renderGitPanel(
   const doCommitAndSync = async () => {
     const tab = activeTab.value;
     const msg = tab?.session.ui.gitCommitMessage?.trim();
-    if (!msg) return;
+    if (!msg) {
+      return;
+    }
     updateUi("gitCommitMessage", "");
     updateUi("gitLoading", true);
     updateUi("gitError", null);
@@ -259,8 +265,8 @@ export function renderGitPanel(
       await plat.gitCommit(msg);
       await plat.gitPush();
       await refreshGitStatus();
-    } catch (e) {
-      updateUi("gitError", (e as Error).message);
+    } catch (error) {
+      updateUi("gitError", errorMessage(error));
       updateUi("gitLoading", false);
       renderOnly("leftPanel");
     }
@@ -386,11 +392,16 @@ export function renderGitPanel(
           const val = (e.target as HTMLInputElement).value;
           if (val === "__new__") {
             (e.target as HTMLInputElement).value = branches?.current || "";
+            // oxlint-disable-next-line no-alert -- native prompt is the intended quick-input UX here
             const name = prompt("New branch name:");
-            if (name?.trim()) await gitAction("gitCreateBranch", name.trim());
+            if (name?.trim()) {
+              await gitAction("gitCreateBranch", name.trim());
+            }
             return;
           }
-          if (val !== branches?.current) await gitAction("gitCheckout", val);
+          if (val !== branches?.current) {
+            await gitAction("gitCheckout", val);
+          }
         }}
       >
         ${(branches?.branches || []).map(
@@ -405,7 +416,9 @@ export function renderGitPanel(
   // ─── 3. Tabs: Local Changes / History ────────────────────────────────────
   const switchTab = (tab: string) => {
     _gitSubTab = tab;
-    if (tab === "history" && !S.ui.gitLogEntries) fetchGitLog();
+    if (tab === "history" && !S.ui.gitLogEntries) {
+      fetchGitLog();
+    }
     renderOnly("leftPanel");
   };
 
@@ -461,7 +474,9 @@ export function renderGitPanel(
               const menu = (
                 (e.currentTarget as HTMLElement).parentElement as HTMLElement
               ).querySelector(".git-split-menu");
-              if (menu) menu.toggleAttribute("hidden");
+              if (menu) {
+                menu.toggleAttribute("hidden");
+              }
             }}
           >
             <sp-icon-chevron-down slot="icon" size="xs"></sp-icon-chevron-down>
@@ -492,8 +507,12 @@ export function renderGitPanel(
     const dir = parts.join("/");
 
     const onFileClick = async () => {
-      if (file.status !== "M" && file.status !== "A") return;
-      if (!file.path.endsWith(".json") && !formatForPath(file.path)) return;
+      if (file.status !== "M" && file.status !== "A") {
+        return;
+      }
+      if (!file.path.endsWith(".json") && !formatForPath(file.path)) {
+        return;
+      }
 
       try {
         const plat = getPlatform();
@@ -507,20 +526,22 @@ export function renderGitPanel(
         ]);
 
         const diffState = {
-          filePath: file.path,
-          originalContent,
           currentContent,
+          filePath: file.path,
           fileStatus: file.status,
+          originalContent,
         };
 
         updateUi("gitDiffState", diffState);
 
         if (ctx?.setCanvasMode) {
-          if (ctx.setGitDiffState) ctx.setGitDiffState(diffState);
+          if (ctx.setGitDiffState) {
+            ctx.setGitDiffState(diffState);
+          }
           ctx.setCanvasMode("git-diff");
         }
-      } catch (e) {
-        updateUi("gitError", `Failed to load diff: ${(e as Error).message}`);
+      } catch (error) {
+        updateUi("gitError", `Failed to load diff: ${errorMessage(error)}`);
       } finally {
         updateUi("gitLoading", false);
       }
@@ -555,13 +576,17 @@ export function renderGitPanel(
                   quiet
                   title="Discard changes"
                   @click=${async () => {
-                    if (file.status === "U") return;
+                    if (file.status === "U") {
+                      return;
+                    }
                     const confirmed = await showConfirmDialog(
                       "Discard Changes",
                       `Discard changes to ${file.path}?`,
                       { confirmLabel: "Discard", destructive: true },
                     );
-                    if (!confirmed) return;
+                    if (!confirmed) {
+                      return;
+                    }
                     await gitAction("gitDiscard", [file.path]);
                   }}
                   ?disabled=${file.status === "U"}
@@ -585,16 +610,18 @@ export function renderGitPanel(
 
   /** Group files by component (parent directory for .json/.class.json, or "Other") */
   const groupFilesByComponent = (files: GitFileEntry[]) => {
-    const groups: Map<string, GitFileEntry[]> = new Map();
+    const groups = new Map<string, GitFileEntry[]>();
     for (const f of files) {
       const parts = f.path.split("/");
       let component;
       if (f.path.endsWith(".json") || f.path.endsWith(".class.json") || formatForPath(f.path)) {
-        component = parts.length > 1 ? `/${parts[parts.length - 2]}` : `/${parts[0]}`;
+        component = parts.length > 1 ? `/${parts.at(-2)}` : `/${parts[0]}`;
       } else {
         component = "Other";
       }
-      if (!groups.has(component)) groups.set(component, []);
+      if (!groups.has(component)) {
+        groups.set(component, []);
+      }
       (groups.get(component) as GitFileEntry[]).push(f);
     }
     return groups;
@@ -708,13 +735,21 @@ function _relativeDate(iso: string) {
   const d = new Date(iso);
   const now = Date.now();
   const diff = now - d.getTime();
-  const mins = Math.floor(diff / 60000);
-  if (mins < 1) return "just now";
-  if (mins < 60) return `${mins}m ago`;
+  const mins = Math.floor(diff / 60_000);
+  if (mins < 1) {
+    return "just now";
+  }
+  if (mins < 60) {
+    return `${mins}m ago`;
+  }
   const hours = Math.floor(mins / 60);
-  if (hours < 24) return `${hours}h ago`;
+  if (hours < 24) {
+    return `${hours}h ago`;
+  }
   const days = Math.floor(hours / 24);
-  if (days < 30) return `${days}d ago`;
+  if (days < 30) {
+    return `${days}d ago`;
+  }
   return d.toLocaleDateString();
 }