From ca5cafb4db9e1677ec82eb66c9206e1e094d2208 Mon Sep 17 00:00:00 2001
From: Steven Vandevelde <steven@tokono.ma>
Date: Fri, 17 Jul 2026 23:22:44 +0200
Subject: [PATCH] fix: confusing pinning language

We had two different pinning concepts in the dashboard & catalogue. Dashboard pinning is now marking
a facet as a favourite.
---
 lexicons/output/facet.json    | 10 ++++----
 src/common/pages/crud.js      |  4 +--
 src/common/pages/dashboard.js | 47 ++++++++++++++++++-----------------
 3 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/lexicons/output/facet.json b/lexicons/output/facet.json
index f1907fba..4ad22802 100644
--- a/lexicons/output/facet.json
+++ b/lexicons/output/facet.json
@@ -23,6 +23,11 @@
             "default": true,
             "description": "Whether the facet is enabled or not"
           },
+          "favourite": {
+            "type": "boolean",
+            "default": false,
+            "description": "Whether the facet is favourited (shown at the top) or not. Some facets may be more important to the user than others."
+          },
           "html": {
             "type": "string",
             "description": "The UTF8 HTML string that makes up the facet"
@@ -34,11 +39,6 @@
             "description": "A facet is by default interactive, but headless 'prelude' facets may also be created, these run before any main interactive facet is loaded."
           },
           "name": { "type": "string" },
-          "pinned": {
-            "type": "boolean",
-            "default": false,
-            "description": "Whether the facet is pinned (at the top) or not. Some facets may be more important to the user than others."
-          },
           "tags": { "type": "array", "items": { "type": "string" } },
           "updatedAt": { "type": "string", "format": "datetime" },
           "uri": {
diff --git a/src/common/pages/crud.js b/src/common/pages/crud.js
index b67ce331..21c1db7c 100644
--- a/src/common/pages/crud.js
+++ b/src/common/pages/crud.js
@@ -39,7 +39,7 @@ export function toggleFacetEnabled({ id }) {
 /**
  * @param {{ id: string }} _
  */
-export function toggleFacetPinned({ id }) {
+export function toggleFacetFavourite({ id }) {
   return async () => {
     const out = await output();
     const col = await Output.data(out.facets);
@@ -47,7 +47,7 @@ export function toggleFacetPinned({ id }) {
     if (!facet) return;
     await out.facets.save([
       ...col.filter((c) => c.id !== id),
-      { ...facet, pinned: !(facet.pinned ?? false), updatedAt: new Date().toISOString() },
+      { ...facet, favourite: !(facet.favourite ?? false), updatedAt: new Date().toISOString() },
     ]);
   };
 }
diff --git a/src/common/pages/dashboard.js b/src/common/pages/dashboard.js
index b00d3f23..466941b9 100644
--- a/src/common/pages/dashboard.js
+++ b/src/common/pages/dashboard.js
@@ -9,7 +9,7 @@ import { batch, effect, signal } from "~/common/signal.js";
 
 import { nothing } from "~/common/element.js";
 
-import { deleteFacet, toggleFacetEnabled, toggleFacetPinned } from "./crud.js";
+import { deleteFacet, toggleFacetEnabled, toggleFacetFavourite } from "./crud.js";
 import { output } from "./output.js";
 import { openAddFromURIModal } from "./from-uri.js";
 
@@ -27,15 +27,15 @@ effect(() => {
   localStorage.setItem(FILTER_STORAGE_KEY, activeFilter.get());
 });
 
-const UNPINNED_COLLAPSED_KEY = "diffuse/dashboard/unpinned-collapsed";
-const unpinnedCollapsed = signal(
-  localStorage.getItem(UNPINNED_COLLAPSED_KEY) === "true",
+const UNFAVOURITE_COLLAPSED_KEY = "diffuse/dashboard/unfavourite-collapsed";
+const unfavouriteCollapsed = signal(
+  localStorage.getItem(UNFAVOURITE_COLLAPSED_KEY) === "true",
 );
 
 effect(() => {
   localStorage.setItem(
-    UNPINNED_COLLAPSED_KEY,
-    String(unpinnedCollapsed.get()),
+    UNFAVOURITE_COLLAPSED_KEY,
+    String(unfavouriteCollapsed.get()),
   );
 });
 
@@ -46,7 +46,7 @@ function setFilter(filter) {
   history.replaceState(null, "", url);
   batch(() => {
     activeFilter.set(filter);
-    unpinnedCollapsed.set(false);
+    unfavouriteCollapsed.set(false);
   });
 }
 
@@ -139,9 +139,9 @@ function _renderList(output, listEl) {
     )
     : [];
 
-  const pinnedCol = filtered.filter((c) => c.pinned).sort(sortByName);
-  const unpinnedCol = filtered.filter((c) => !c.pinned).sort(sortByName);
-  const col = pinnedCol.concat(unpinnedCol);
+  const favouriteCol = filtered.filter((c) => c.favourite).sort(sortByName);
+  const unfavouriteCol = filtered.filter((c) => !c.favourite).sort(sortByName);
+  const col = favouriteCol.concat(unfavouriteCol);
 
   const selected = output.selected();
   const outputLabel = selected?.label ?? selected?.getAttribute?.("label") ??
@@ -300,13 +300,14 @@ function _renderList(output, listEl) {
                   href="#"
                   @click="${(/** @type {MouseEvent} */ e) => {
                     e.preventDefault();
-                    toggleFacetPinned({ id: c.id })();
+                    if (!c.favourite) unfavouriteCollapsed.set(false);
+                    toggleFacetFavourite({ id: c.id })();
                   }}"
                 >
-                  <i class="${c.pinned
-                    ? "ph-fill ph-push-pin-slash"
-                    : "ph-fill ph-push-pin"}"></i>
-                  ${c.pinned ? "Unpin" : "Pin"}
+                  <i class="${c.favourite
+                    ? "ph-bold ph-star"
+                    : "ph-fill ph-star"}"></i>
+                  ${c.favourite ? "Unfavourite" : "Favourite"}
                 </a>
                 <a
                   class="with-icon"
@@ -333,20 +334,20 @@ function _renderList(output, listEl) {
       );
     });
 
-  const collapsed = unpinnedCollapsed.get() && pinnedCol.length > 0;
+  const collapsed = unfavouriteCollapsed.get() && favouriteCol.length > 0;
 
   const h = col.length || filter !== "all"
     ? html`
-      ${filterBar} ${pinnedCol.length
+      ${filterBar} ${favouriteCol.length
         ? html`
-          <ul class="grid" style="margin: 0">${renderItems(pinnedCol)}</ul>
+          <ul class="grid" style="margin: 0">${renderItems(favouriteCol)}</ul>
         `
-        : nothing} ${pinnedCol.length && unpinnedCol.length
+        : nothing} ${favouriteCol.length && unfavouriteCol.length
         ? html`
           <div class="grid-section-divider">
             <button
-              title="${collapsed ? "Show unpinned" : "Hide unpinned"}"
-              @click="${() => unpinnedCollapsed.set(!collapsed)}"
+              title="${collapsed ? "Show all" : "Only show favourites"}"
+              @click="${() => unfavouriteCollapsed.set(!collapsed)}"
             >
               <i class="ph-fill ${collapsed
                 ? "ph-caret-circle-down"
@@ -355,9 +356,9 @@ function _renderList(output, listEl) {
             <hr class="hr--dashes" />
           </div>
         `
-        : nothing} ${unpinnedCol.length && !collapsed
+        : nothing} ${unfavouriteCol.length && !collapsed
         ? html`
-          <ul class="grid" style="margin: 0">${renderItems(unpinnedCol)}</ul>
+          <ul class="grid" style="margin: 0">${renderItems(unfavouriteCol)}</ul>
         `
         : nothing}
     `
-- 
2.51.2