@grimoire-rs/indexer 0.3.3 → 0.4.1

package/dist/renderer/astro/components/Catalog.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
 // Lucide (ISC) draws the UI; brand marks come from `@mdi/js`, which Lucide
 // deliberately does not carry. No SVG on this site is hand-written.
-import { Check, FolderRoot, Globe, Image, ImageOff } from "lucide-preact";
+import { ArrowBigUp, Check, FolderRoot, Globe, Image, ImageOff } from "lucide-preact";
 import { mdiMicrosoftVisualStudioCode } from "@mdi/js";
 import { BrandMark } from "./BrandMark.js";
 import { withBase } from "../lib/base.js";
-import { timeAgo, vscodeUrl, type CatalogPackage } from "../lib/catalog.js";
+import { lastUpdated, timeAgo, vscodeUrl, type CatalogPackage } from "../lib/catalog.js";
 
 // Known kinds get stable chip ordering + badge colors; unknown kinds
 // (future schema growth) still render with a neutral badge.
@@ -16,16 +16,70 @@ function kindOrder(kind: string): number {
   return i === -1 ? KNOWN_KINDS.length : i;
 }
 
-type Sort = "name" | "updated";
+export type Sort = "name" | "updated" | "rating";
 
-// Deprecated packages sink to the bottom regardless of sort mode; the
-// chosen sort only orders within the two groups.
-function compare(a: CatalogPackage, b: CatalogPackage, sort: Sort): number {
-  const dep = Number(!!a.deprecated) - Number(!!b.deprecated);
-  if (dep !== 0) return dep;
-  if (sort === "name") return a.name.localeCompare(b.name);
-  if (!a.created || !b.created) return (a.created ? 0 : 1) - (b.created ? 0 : 1);
-  return new Date(b.created).getTime() - new Date(a.created).getTime();
+type Key = (a: CatalogPackage, b: CatalogPackage) => number;
+
+/**
+ * Bigger first, with `null` as its own bucket underneath every number.
+ *
+ * The shared shape of the two ranked keys, and the reason both are written
+ * this way: "missing" is not a low value, it is the absence of one. Folding
+ * it into a number — 0 upvotes, epoch 0 — orders those rows against real
+ * data by accident, and ties them all with each other.
+ */
+function descending(a: number | null, b: number | null): number {
+  if (a === null || b === null) return Number(a === null) - Number(b === null);
+  return b - a;
+}
+
+/** `updated` as epoch ms; null when absent, empty or not a date at all. */
+function updatedAt(p: CatalogPackage): number | null {
+  const at = lastUpdated(p);
+  const ms = at ? new Date(at).getTime() : NaN;
+  return Number.isFinite(ms) ? ms : null;
+}
+
+/**
+ * Ascending, case-insensitive. The full ref breaks the last tie in every
+ * mode, and it is unique, so no two rows ever compare equal — a browse order
+ * that is not total is a browse order that reshuffles on rebuild.
+ */
+const byName: Key = (a, b) =>
+  a.name.localeCompare(b.name, undefined, { sensitivity: "accent" }) || a.ref.localeCompare(b.ref);
+
+/**
+ * Newest first. No usable date is *unknown*, not epoch 0: dating an undated
+ * package to 1970 sorts it below real packages by accident rather than by
+ * rule, so it goes into a bucket of its own at the bottom.
+ */
+const byUpdated: Key = (a, b) => descending(updatedAt(a), updatedAt(b));
+
+/**
+ * Most upvotes first. Unrated is its own bucket at the bottom, never a zero:
+ * a fresh index is all-unrated, and zeroes would leave every one of those
+ * rows comparing equal with nothing left to break the tie.
+ */
+const byRating: Key = (a, b) => descending(a.rating?.up ?? null, b.rating?.up ?? null);
+
+/** Each mode as a chain of keys, most significant first. */
+const CHAINS: Record<Sort, Key[]> = {
+  name: [byName],
+  updated: [byUpdated, byName],
+  rating: [byRating, byUpdated, byName],
+};
+
+// Deprecated packages get no special ordering here — they are filtered out
+// of the default browse entirely (see `shown` below) and interleave like
+// any other row when the toggle brings them back. grim's own browse order
+// (`browse_sort.rs`) has no deprecated key either; keeping this comparator
+// silent on deprecation is what keeps the two in sync.
+export function compare(a: CatalogPackage, b: CatalogPackage, sort: Sort): number {
+  for (const key of CHAINS[sort]) {
+    const d = key(a, b);
+    if (d !== 0) return d;
+  }
+  return 0;
 }
 
 // The two install scopes previously wore the VS Code extension's own
@@ -106,7 +160,7 @@ function CardLogo({ pkg }: { pkg: CatalogPackage }) {
       <span
         class="card-logo card-logo-fallback"
         aria-hidden="true"
-        style={{ background: `var(--kind-${pkg.kind}, var(--muted))` }}
+        style={{ background: `var(--grim-color-kind-${pkg.kind}, var(--grim-color-muted))` }}
       >
         {pkg.name[0]?.toUpperCase()}
       </span>
@@ -449,16 +503,18 @@ export default function Catalog({
   );
 
   // A catalog with nothing deprecated gets no toggle — a control that can
-  // only ever be a no-op is worse than its absence.
+  // only ever be a no-op is worse than its absence. An index that publishes
+  // no ratings gets no rating chip for the same reason.
   const hasDeprecated = packages.some((p) => p.deprecated);
+  const hasRatings = packages.some((p) => p.rating);
 
   // Chips leave the Tab order only while there is a grid to arrow up from.
   const chipTabIndex = shown.length === 0 ? 0 : -1;
 
   return (
-    <section class="catalog">
-      <div class="controls" ref={controlsRef}>
-        <div class="search-field">
+    <section class="catalog" data-slot="catalog">
+      <div class="controls" data-slot="catalog-toolbar" ref={controlsRef}>
+        <div class="search-field" data-slot="catalog-search">
           <input
             ref={searchRef}
             type="search"
@@ -478,6 +534,7 @@ export default function Catalog({
           <button
             type="button"
             class={sort === "name" ? "chip active" : "chip"}
+            data-slot="filter-chip"
             tabIndex={chipTabIndex}
             onKeyDown={onChipKeyDown}
             onClick={() => setSort("name")}
@@ -487,12 +544,25 @@ export default function Catalog({
           <button
             type="button"
             class={sort === "updated" ? "chip active" : "chip"}
+            data-slot="filter-chip"
             tabIndex={chipTabIndex}
             onKeyDown={onChipKeyDown}
             onClick={() => setSort("updated")}
           >
             updated
           </button>
+          {hasRatings && (
+            <button
+              type="button"
+              class={sort === "rating" ? "chip active" : "chip"}
+              data-slot="filter-chip"
+              tabIndex={chipTabIndex}
+              onKeyDown={onChipKeyDown}
+              onClick={() => setSort("rating")}
+            >
+              rating
+            </button>
+          )}
         </div>
         {/* Divides sort from filter — two different questions sharing a row.
             Decorative only: each group already carries its own aria-label,
@@ -502,6 +572,7 @@ export default function Catalog({
           <button
             type="button"
             class={kind === null ? "chip active" : "chip"}
+            data-slot="filter-chip"
             tabIndex={chipTabIndex}
             onKeyDown={onChipKeyDown}
             onClick={() => setKind(null)}
@@ -513,6 +584,7 @@ export default function Catalog({
               key={k}
               type="button"
               class={kind === k ? `chip active kind-${k}` : `chip kind-${k}`}
+              data-slot="filter-chip"
               tabIndex={chipTabIndex}
               onKeyDown={onChipKeyDown}
               onClick={() => setKind(kind === k ? null : k)}
@@ -557,32 +629,53 @@ export default function Catalog({
             <li
               key={`${p.namespace}/${p.name}`}
               class="card"
+              data-slot="package-card"
               tabIndex={0}
               onKeyDown={onCardKeyDown}
             >
               <div class="card-head">
                 <CardLogo pkg={p} />
-                <h2>
+                <h2 data-slot="package-name">
                   <a href={withBase(`/p/${p.namespace}/${p.name}/`)} tabIndex={-1}>
                     {p.name}
                   </a>
                 </h2>
                 {p.deprecated ? (
-                  <span class="badge deprecated">deprecated</span>
+                  <span class="badge deprecated" data-slot="package-kind">deprecated</span>
                 ) : (
-                  <span class={`badge kind-${p.kind}`}>{p.kind}</span>
+                  <span class={`badge kind-${p.kind}`} data-slot="package-kind">{p.kind}</span>
                 )}
               </div>
               <p class="namespace">{p.namespace}</p>
-              {(p.version || p.license || p.created) && (
-                <div class="meta-row">
+              {(p.version || p.license || lastUpdated(p) || p.rating) && (
+                <div class="meta-row" data-slot="package-meta">
                   {p.version && <span class="pill version">v{p.version}</span>}
                   {p.license && <span class="pill license">{p.license}</span>}
-                  {p.created && timeAgo(p.created) && (
-                    <time class="updated" datetime={p.created} title={p.created}>
-                      updated {timeAgo(p.created)}
-                    </time>
+                  {/* A count and nothing more. The page is prerendered once
+                      for everyone, so it cannot know whether *you* voted —
+                      showing "not voted" to someone who has would be worse
+                      than showing nothing. */}
+                  {p.rating && (
+                    <span
+                      class="pill rating"
+                      title={`${p.rating.up} upvote${p.rating.up === 1 ? "" : "s"}`}
+                    >
+                      <ArrowBigUp size={13} aria-hidden="true" />
+                      {p.rating.up}
+                    </span>
                   )}
+                  {/* The date the sidecar derived, not the artifact's own
+                      `created`: a package republished from the same commit
+                      keeps its date, and one with no commit date at all gets
+                      the day this index first saw its current digest. */}
+                  {(() => {
+                    const at = lastUpdated(p);
+                    return at && timeAgo(at) ? (
+                      <time class="updated" datetime={at} title={at}>
+                        updated {timeAgo(at)}
+                      </time>
+                    ) : null;
+                  })()}
                 </div>
               )}
               {p.deprecated && (
@@ -593,7 +686,7 @@ export default function Catalog({
               )}
               {p.description && <p class="description">{p.description}</p>}
               {p.keywords && p.keywords.length > 0 && (
-                <div class="keywords">
+                <div class="keywords" data-slot="package-keywords">
                   {p.keywords.slice(0, 5).map((kw) => (
                     <button
                       key={kw}

package/dist/renderer/astro/components/CommandField.astro

@@ -25,6 +25,7 @@ const { value, label, name } = Astro.props;
 <button
   type="button"
   class="cmd-field"
+  data-slot="install-command"
   data-copy={value}
   data-copy-name={name}
   aria-label={label}

package/dist/renderer/astro/components/VersionMenu.astro

@@ -28,6 +28,7 @@ const commands: [string, string][] = [
 <button
   type="button"
   class:list={["version", { current }]}
+  data-slot="version-pill"
   data-copy={pinned}
   data-copy-name={tag === "latest" ? "reference" : `pinned ${tag}`}
   data-menu={menuId}
@@ -46,33 +47,39 @@ const commands: [string, string][] = [
 </div>
 
 <style>
+@layer grimoire {
+  /* Layered so a user CSS file (unlayered) outranks these rules. Astro
+     scopes a component style to `.foo[data-astro-cid-…]` — specificity
+     (0,2,0) — which beats a consumer's `.foo` in EITHER source order, so
+     source order alone does not make this overridable. Not reindented:
+     the wrapper stays a two-line diff. */
   /* No `span` inside: the shared copy script only swaps a label when it
      finds one, so the tag keeps its text and flashes the class instead. */
   .version {
-    border: 1px solid var(--border);
-    border-radius: 999px;
+    border: var(--grim-border-width) solid var(--grim-color-border);
+    border-radius: var(--grim-radius-pill);
     background: transparent;
-    padding: 0.15rem 0.6rem;
+    padding: var(--grim-space-1) var(--grim-space-4);
     font-family: ui-monospace, "SFMono-Regular", monospace;
-    font-size: 0.85rem;
-    color: var(--muted);
+    font-size: var(--grim-text-sm);
+    color: var(--grim-color-muted);
     white-space: nowrap;
     cursor: pointer;
   }
   .version:hover,
   .version:focus-visible {
-    color: var(--accent);
-    border-color: var(--accent);
-    background: var(--accent-soft);
+    color: var(--grim-color-accent);
+    border-color: var(--grim-color-accent);
+    background: var(--grim-color-accent-soft);
   }
   .version.current {
-    color: var(--fg);
+    color: var(--grim-color-fg);
     font-weight: 600;
-    border-color: var(--accent);
+    border-color: var(--grim-color-accent);
   }
   .version.copied {
-    color: var(--accent);
-    background: var(--accent-soft);
+    color: var(--grim-color-accent);
+    background: var(--grim-color-accent-soft);
   }
 
   .version-menu {
@@ -82,28 +89,29 @@ const commands: [string, string][] = [
     inset: auto;
     margin: 0;
     min-width: 11rem;
-    padding: 0.3rem;
-    background: var(--card);
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    box-shadow: 0 6px 20px rgb(0 0 0 / 0.15);
+    padding: var(--grim-space-2);
+    background: var(--grim-color-card);
+    border: var(--grim-border-width) solid var(--grim-color-border);
+    border-radius: var(--grim-radius-lg);
+    box-shadow: var(--grim-shadow-raised);
   }
   .cmd {
     display: block;
     width: 100%;
     border: 0;
-    border-radius: 5px;
+    border-radius: var(--grim-radius-md);
     background: transparent;
-    color: var(--muted);
+    color: var(--grim-color-muted);
     font: inherit;
-    font-size: 0.82rem;
+    font-size: var(--grim-text-sm);
     text-align: left;
-    padding: 0.3rem 0.5rem;
+    padding: var(--grim-space-2) var(--grim-space-4);
     cursor: pointer;
   }
   .cmd:hover,
   .cmd:focus-visible {
-    background: var(--chip-bg);
-    color: var(--fg);
+    background: var(--grim-color-chip-bg);
+    color: var(--grim-color-fg);
   }
+}
 </style>