Implement pinned charms

bfollington · bfollington · commit cb2ba2cf1a78 · 2025-03-04T17:10:35.000+10:00
diff --git a/typescript/packages/common-charm/src/charm.ts b/typescript/packages/common-charm/src/charm.ts
@@ -1,11 +1,4 @@
-import {
-  JSONSchema,
-  Module,
-  NAME,
-  Recipe,
-  TYPE,
-  UI,
-} from "@commontools/builder";
+import { JSONSchema, Module, NAME, Recipe, TYPE, UI } from "@commontools/builder";
 import {
   type Cell,
   createRef,
@@ -55,12 +48,17 @@ export const processSchema = {
 export class CharmManager {
   private space: Space;
   private charmsDoc: DocImpl<DocLink[]>;
+  private pinned: DocImpl<DocLink[]>;
+
   private charms: Cell<Cell<Charm>[]>;
+  private pinnedCharms: Cell<Cell<Charm>[]>;
 
   constructor(private spaceId: string) {
     this.space = getSpace(this.spaceId);
     this.charmsDoc = getDoc<DocLink[]>([], "charms", this.space);
+    this.pinned = getDoc<DocLink[]>([], "pinned-charms", this.space);
     this.charms = this.charmsDoc.asCell([], undefined, charmListSchema);
+    this.pinnedCharms = this.pinned.asCell([], undefined, charmListSchema);
   }
 
   getReplica(): string | undefined {
@@ -71,6 +69,24 @@ export class CharmManager {
     return await storage.synced();
   }
 
+  async pin(charm: Cell<Charm>) {
+    await storage.syncCell(this.pinned);
+    this.pinnedCharms.push(charm);
+    await idle();
+  }
+
+  async unpin(charm: Cell<Charm>) {
+    // probably wrong, should compare ids
+    await storage.syncCell(this.pinned);
+    this.pinnedCharms.set(this.pinnedCharms.get().filter((c) => c != charm));
+    await idle();
+  }
+
+  getPinned(): Cell<Cell<Charm>[]> {
+    storage.syncCell(this.pinned);
+    return this.pinnedCharms;
+  }
+
   getCharms(): Cell<Cell<Charm>[]> {
     // Start syncing if not already syncing. Will trigger a change to the list
     // once loaded.
@@ -150,11 +166,7 @@ export class CharmManager {
     path: string[] = [],
     schema?: JSONSchema,
   ): Promise<Cell<T>> {
-    return (await storage.syncCellById(this.space, id)).asCell(
-      path,
-      undefined,
-      schema,
-    );
+    return (await storage.syncCellById(this.space, id)).asCell(path, undefined, schema);
   }
 
   // Return Cell with argument content according to the schema of the charm.
@@ -163,9 +175,7 @@ export class CharmManager {
     const recipeId = source?.get()?.[TYPE];
     const recipe = getRecipe(recipeId);
     const argumentSchema = recipe?.argumentSchema;
-    return source?.key("argument").asSchema(argumentSchema!) as
-      | Cell<T>
-      | undefined;
+    return source?.key("argument").asSchema(argumentSchema!) as Cell<T> | undefined;
   }
 
   // note: removing a charm doesn't clean up the charm's cells
@@ -175,9 +185,7 @@ export class CharmManager {
     const id = getEntityId(idOrCharm);
     if (!id) return false;
 
-    const newCharms = this.charms.get().filter((charm) =>
-      getEntityId(charm)?.["/"] !== id?.["/"]
-    );
+    const newCharms = this.charms.get().filter((charm) => getEntityId(charm)?.["/"] !== id?.["/"]);
     if (newCharms.length !== this.charms.get().length) {
       this.charms.set(newCharms);
       await idle();
@@ -187,11 +195,7 @@ export class CharmManager {
     return false;
   }
 
-  async runPersistent(
-    recipe: Recipe | Module,
-    inputs?: any,
-    cause?: any,
-  ): Promise<Cell<Charm>> {
+  async runPersistent(recipe: Recipe | Module, inputs?: any, cause?: any): Promise<Cell<Charm>> {
     await idle();
 
     // Fill in missing parameters from other charms. It's a simple match on
@@ -247,10 +251,7 @@ export class CharmManager {
 
     await syncAllMentionedCells(inputs);
 
-    const doc = await storage.syncCellById(
-      this.space,
-      createRef({ recipe, inputs }, cause),
-    );
+    const doc = await storage.syncCellById(this.space, createRef({ recipe, inputs }, cause));
     const resultDoc = run(recipe, inputs, doc);
 
     // FIXME(ja): should we add / sync explicitly here?
@@ -264,10 +265,7 @@ export class CharmManager {
     const recipeId = charm.getSourceCell()?.get()?.[TYPE];
     if (!recipeId) return Promise.resolve(undefined);
 
-    return Promise.all([
-      this.syncRecipeCells(recipeId),
-      this.syncRecipeBlobby(recipeId),
-    ]).then(
+    return Promise.all([this.syncRecipeCells(recipeId), this.syncRecipeBlobby(recipeId)]).then(
       () => recipeId,
     );
   }
diff --git a/typescript/packages/jumble/src/components/commands.ts b/typescript/packages/jumble/src/components/commands.ts
@@ -683,6 +683,28 @@ export function getCommands(deps: CommandContext): CommandItem[] {
       message: "Are you sure you want to delete this charm?",
       handler: () => handleDeleteCharm(deps),
     },
+    {
+      id: "pin-charm",
+      type: "action",
+      title: "Pin Charm",
+      group: "View",
+      predicate: !!deps.focusedCharmId,
+      handler: async () => {
+        if (!deps.focusedCharmId || !deps.focusedReplicaId) {
+          deps.setOpen(false);
+          return;
+        }
+
+        const charm = await deps.charmManager.get(deps.focusedCharmId);
+        if (!charm) {
+          console.error("Failed to load charm", deps.focusedCharmId);
+          return;
+        }
+
+        await deps.charmManager.pin(charm);
+        deps.setOpen(false);
+      },
+    },
     {
       id: "view-detail",
       type: "action",
diff --git a/typescript/packages/jumble/src/views/CharmList.tsx b/typescript/packages/jumble/src/views/CharmList.tsx
@@ -12,6 +12,7 @@ import { Cell } from "@commontools/runner";
 import ShapeLogo from "@/assets/ShapeLogo.tsx";
 import { MdOutlineStar } from "react-icons/md";
 import { useSyncedStatus } from "@/hooks/use-synced-status.ts";
+import { CharmRenderer } from "@/components/CharmRunner.tsx";
 
 export interface CommonDataEvent extends CustomEvent {
   detail: {
@@ -96,9 +97,163 @@ function CharmPreview(
   );
 }
 
+interface HoverPreviewProps {
+  hoveredCharm: string | null;
+  charms: Cell<Charm>[];
+  position: { x: number; y: number };
+  replicaName: string;
+}
+const HoverPreview = (
+  { hoveredCharm, charms, position, replicaName }: HoverPreviewProps,
+) => {
+  // Find the charm that matches the hoveredCharm ID
+  const charm = hoveredCharm
+    ? charms.find((c) => charmId(c) === hoveredCharm)
+    : null;
+
+  if (!charm || !hoveredCharm) return null;
+
+  const id = charmId(charm);
+  const name = charm.get()[NAME] || "Unnamed Charm";
+
+  return (
+    <div
+      className="fixed z-50 w-128 shadow-xl pointer-events-none"
+      style={{
+        left: `${position.x}px`,
+        top: `${position.y}px`,
+        transform: "translate(25%, 25%)",
+      }}
+    >
+      <CommonCard className="p-2 shadow-xl bg-white">
+        <h3 className="text-xl font-semibold text-gray-800 mb-4">
+          {name + ` (#${id!.slice(-4)})`}
+        </h3>
+        <div className="w-full bg-gray-50 rounded border border-gray-100 min-h-[256px] pointer-events-none select-none">
+          <CharmRenderer className="h-full" charm={charm} />
+        </div>
+      </CommonCard>
+    </div>
+  );
+};
+
+interface CharmTableProps {
+  charms: Cell<Charm>[];
+  replicaName: string;
+  charmManager: any;
+}
+
+const CharmTable = (
+  { charms, replicaName, charmManager }: CharmTableProps,
+) => {
+  const [hoveredCharm, setHoveredCharm] = useState<string | null>(null);
+  const [previewPosition, setPreviewPosition] = useState({ x: 0, y: 0 });
+  // Use a ref to cache the last hovered charm to prevent thrashing
+  const hoveredCharmRef = useRef<string | null>(null);
+
+  const handleMouseMove = (e: React.MouseEvent, id: string) => {
+    // Only update state if the hovered charm has changed
+    if (hoveredCharmRef.current !== id) {
+      hoveredCharmRef.current = id;
+      setHoveredCharm(id);
+    }
+
+    // Position the preview card relative to the cursor
+    setPreviewPosition({
+      x: e.clientX + 20, // offset to the right of cursor
+      y: e.clientY - 100, // offset above the cursor
+    });
+  };
+
+  const handleMouseLeave = () => {
+    hoveredCharmRef.current = null;
+    setHoveredCharm(null);
+  };
+
+  return (
+    <div className="relative">
+      <div className="overflow-x-auto shadow-md sm:rounded-lg">
+        <table className="w-full text-sm text-left text-gray-500">
+          <thead className="text-xs text-gray-700 uppercase bg-gray-50">
+            <tr>
+              <th scope="col" className="px-6 py-3">Name</th>
+              <th scope="col" className="px-6 py-3">ID</th>
+              <th scope="col" className="px-6 py-3">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {charms.map((charm) => {
+              const id = charmId(charm);
+              const name = charm.get()[NAME] || "Unnamed Charm";
+
+              return (
+                <tr
+                  key={id}
+                  className="bg-white border-b hover:bg-gray-50 relative"
+                  onMouseMove={(e) => handleMouseMove(e, id!)}
+                  onMouseLeave={handleMouseLeave}
+                >
+                  <td className="px-6 py-4 font-medium text-gray-900">
+                    <NavLink to={`/${replicaName}/${id}`}>
+                      {name}
+                    </NavLink>
+                  </td>
+                  <td className="px-6 py-4">
+                    <NavLink to={`/${replicaName}/${id}`}>
+                      #{id?.slice(-4)}
+                    </NavLink>
+                  </td>
+                  <td className="px-6 py-4">
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        if (
+                          globalThis.confirm(
+                            "Are you sure you want to remove this charm?",
+                          )
+                        ) {
+                          charmManager.remove({ "/": id! });
+                        }
+                      }}
+                      className="text-gray-400 hover:text-red-500 transition-colors"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="20"
+                        height="20"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                      >
+                        <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2" />
+                      </svg>
+                    </button>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      {hoveredCharm && (
+        <HoverPreview
+          hoveredCharm={hoveredCharm}
+          charms={charms}
+          position={previewPosition}
+          replicaName={replicaName}
+        />
+      )}
+    </div>
+  );
+};
+
 export default function CharmList() {
   const { replicaName } = useParams<{ replicaName: string }>();
   const { charmManager } = useCharmManager();
+  const [pinned] = useCell(charmManager.getPinned());
   const [charms] = useCell(charmManager.getCharms());
   const { isSyncing } = useSyncedStatus(charmManager);
 
@@ -131,15 +286,28 @@ export default function CharmList() {
   }
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-8">
-      {replicaName &&
-        charms.map((charm) => (
-          <CharmPreview
-            key={charmId(charm)}
-            charm={charm}
+    <div className="p-2">
+      <h1>Pinned</h1>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-8">
+        {replicaName &&
+          pinned.map((charm) => (
+            <CharmPreview
+              key={charmId(charm)}
+              charm={charm}
+              replicaName={replicaName}
+            />
+          ))}
+      </div>
+      <h1>All Charms</h1>
+      <div className="p-8">
+        {replicaName && (
+          <CharmTable
+            charms={charms}
             replicaName={replicaName}
+            charmManager={charmManager}
           />
-        ))}
+        )}
+      </div>
     </div>
   );
 }
