feat: scrobble feature facet + copy facet descriptions

src/_components/facets/grid.vto

···
     <li
       class="grid-item"
       data-active-color="{{color}}"
+      data-description="{{item.desc.trim()}}"
       data-name="{{item.title}}"
+      data-kind="{{item.kind ?? `interface`}}"
       data-uri="{{ item.url |> facetOrThemeURI }}"
     >
       <div class="grid-item__contents">

src/_data/facets.yaml

···
   featured: true
   desc: >
     Automatically put tracks into the queue.
+- url: "facets/scrobble/index.html"
+  title: "Scrobble"
+  kind: "prelude"
+  category: Misc
+  featured: true
+  desc: >
+    Enable scrobbling, keep track of what you're listening to.
 - url: "facets/scrobble/last.fm/index.html"
   title: "Scrobble / Last.fm"
   category: Misc

src/common/facets/foundation.js

···
 }
 
 async function playAudioFromQueue() {
-  const [a, q, ms, qa, sca] = await Promise.all([
+  const [a, q, ms, qa] = await Promise.all([
     // engine
     audio(),
     queue(),
···
     // orchestrator
     mediaSession(),
     queueAudio(),
-    scrobbleAudio(),
   ]);
 
   return {
···
     orchestrator: {
       mediaSession: ms,
       queueAudio: qa,
-      scrobbleAudio: sca,
     },
   };
 }

src/common/facets/utils.js

···
  */
 
 /**
- * @param {{ name: string; uri: string }} _args
+ * @param {{ description?: string; kind: string | undefined; name: string; uri: string }} _args
  * @param {{ fetchHTML: boolean }} options
  */
-export async function facetFromURI({ name, uri }, { fetchHTML }) {
+export async function facetFromURI(
+  { description, kind, name, uri },
+  { fetchHTML },
+) {
   const html = fetchHTML ? await loadURI(uri) : undefined;
   const cid = html
     ? await CID.create(0x55, new TextEncoder().encode(html))
···
     createdAt: timestamp,
     id: TID.now(),
     cid,
+    description,
     html,
     name,
+    kind: kind === "interactive" || kind === "prelude" ? kind : undefined,
     updatedAt: timestamp,
     uri,
   };

src/facets/common/build.js

···
   const cid = await CID.create(0x55, new TextEncoder().encode(html));
   const name = nameEl?.value ?? "nameless";
   const description = descriptionEl?.value ?? "";
-  const kind = /** @type {"interactive" | "prelude"} */ (kindEl?.value ?? "interactive");
+  const kind =
+    /** @type {"interactive" | "prelude"} */ (kindEl?.value ?? "interactive");
 
   /** @type {Facet} */
   const facet = $editingFacet.value
···
       const name = target.closest("li")?.getAttribute("data-name");
       if (!name) return;
 
+      const kind = target.closest("li")?.getAttribute("data-kind") ?? undefined;
+
       switch (rel) {
         case "edit": {
-          const facet = await facetFromURI({ name, uri }, { fetchHTML: true });
+          const facet = await facetFromURI({ kind, name, uri }, {
+            fetchHTML: true,
+          });
           editFacet(facet);
           document.querySelector("#build")?.scrollIntoView();
           break;

src/facets/common/grid.js

···
 
       const uri = li.getAttribute("data-uri");
       const name = li.getAttribute("data-name");
+      const kind = li.getAttribute("data-kind") ?? undefined;
+      const description = li.getAttribute("data-description") ?? undefined;
+
       if (!uri || !name) return;
 
       const out = await foundation.orchestrator.output();
···
       if (isActive) {
         out.facets.save(collection.filter((f) => f.uri !== uri));
       } else {
-        const facet = await facetFromURI({ name, uri }, { fetchHTML: false });
+        const facet = await facetFromURI({ description, kind, name, uri }, {
+          fetchHTML: false,
+        });
         out.facets.save([...collection, facet]);
       }
     });

src/facets/common/you.js

···
               />
             </div>
             <div>
+              <label>Kind</label>
+              <select id="add-uri-kind">
+                <option value="interactive">interface</option>
+                <option value="prelude">feature</option>
+              </select>
+            </div>
+            <div>
               <label>URI</label>
               <input
                 id="add-uri-uri"
···
       "submit",
       async (e) => {
         e.preventDefault();
+
         const nameEl = /** @type {HTMLInputElement} */ (
           dialog?.querySelector("#add-uri-name")
         );
+
+        const kindEl = /** @type {HTMLSelectElement} */ (
+          dialog?.querySelector("#add-uri-kind")
+        );
+
         const uriEl = /** @type {HTMLInputElement} */ (
           dialog?.querySelector("#add-uri-uri")
         );
+
         const name = nameEl?.value.trim() ?? "";
+        const kind = kindEl?.value ?? "interactive";
         const uri = uriEl?.value.trim() ?? "";
         if (!name || !uri) return;
-        const facet = await facetFromURI({ name, uri }, { fetchHTML: false });
+
+        const facet = await facetFromURI({ kind, name, uri }, { fetchHTML: false });
         await saveFacet(facet);
+
         /** @type {HTMLDialogElement} */ (dialog).close();
       },
     );
···
   const nameEl = /** @type {HTMLInputElement} */ (
     dialog.querySelector("#add-uri-name")
   );
+  const kindEl = /** @type {HTMLSelectElement} */ (
+    dialog.querySelector("#add-uri-kind")
+  );
   const uriEl = /** @type {HTMLInputElement} */ (
     dialog.querySelector("#add-uri-uri")
   );
   if (nameEl) nameEl.value = "";
+  if (kindEl) kindEl.value = "interactive";
   if (uriEl) uriEl.value = "";
 
   dialog.showModal();

src/facets/scrobble/index.html

···
+<script type="module" src="./index.inline.js"></script>

src/facets/scrobble/index.inline.js

···
+import foundation from "~/common/facets/foundation.js";
+await foundation.orchestrator.scrobbleAudio();

src/styles/diffuse/page.css

···
 select {
   appearance: none;
   background: transparent;
-  border: 2px solid var(--form-color);
-  border-radius: var(--radius-md);
+  border: 3px solid var(--form-color);
+  border-radius: var(--radius-sm);
   color: inherit;
   font-family: inherit;
   font-size: var(--fs-sm);
···
     border-radius: 9999px;
     display: inline-block;
     font-size: var(--fs-2xs);
-    font-weight: 500;
-    padding: 1px var(--space-3xs);
+    font-weight: 600;
+    padding: var(--space-3xs);
+    text-box: trim-both cap alphabetic;
     vertical-align: middle;
   }