publish the catalogue from the release clones, and make the cards look like cards

three small things.

marketplace-sync reads PLUGINS_DIR now instead of assuming the directory it sits
next to. platform/plugins/ is what a machine has INSTALLED — updated by
plugins:update, which is a git pull — while the release is made in the workspace
clones. publishing from the install directory means the catalogue advertises the
version this machine happens to be running: 21 plugins were tagged and the store
went on showing 1.0.0 until this changed.

the grid cards used bg-white/40. this app's surfaces are a DARKENING of the
panel behind them — every other card and section here is bg-duck-dark/5 — so a
translucent white read as a pale box floating on a dark theme. picking a colour
instead of a token, and it only looked right against a background this app does
not have. hover now moves the BORDER and nothing else: a background swap across
twenty-one cards makes the whole grid twitch as the pointer crosses it.

the tag pills were the same value as the card surface, so they rendered as text
with no chip at all.

and the marketplace todo said the UI was not started. it is.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Officer-Session: 656f5c85-e49a-4f1f-b9f3-042a04b4d043
This commit is contained in:
2026-08-27 08:43:46 +00:00
co-authored by Claude Opus 5
parent 8705dc3a7c
commit b4cf1c6427
3 changed files with 37 additions and 16 deletions
@@ -29,7 +29,14 @@ const Card = ({ entry, search }: { entry: Entry; search: string }) => {
return (
<Link
to={{ search: `?${next}` }}
className="group flex flex-col gap-2 rounded-xl border border-duck-dark/10 bg-white/40 p-3 transition-colors hover:border-duck-teal/40 hover:bg-duck-teal/5"
/* `bg-duck-dark/5`, NOT `bg-white/40`. This app's surfaces are a darkening of the panel behind them
— every other card and section here does the same — and a translucent WHITE reads as a pale box
floating on a dark theme rather than as a card. It looked fine against a light background and
nowhere else, which is what you get for picking a colour instead of a token.
Hover changes the BORDER and nothing else. A background swap on a grid of twenty-one makes the
whole thing twitch as the pointer crosses it; a border is enough to say which one you are on. */
className="group flex flex-col gap-2 rounded-xl border border-duck-dark/10 bg-duck-dark/5 p-3 transition-colors hover:border-duck-teal/60"
>
<div className="flex items-start gap-3">
{entry.image ? (
@@ -62,7 +69,7 @@ const Card = ({ entry, search }: { entry: Entry; search: string }) => {
{!!entry.tags?.length && (
<div className="mt-auto flex flex-wrap gap-1">
{entry.tags.map((tag) => (
<span key={tag} className="rounded-full bg-duck-dark/5 px-2 py-0.5 text-[10px] text-duck-dark/50">
<span key={tag} className="rounded-full bg-duck-dark/10 px-2 py-0.5 text-[10px] text-duck-dark/60">
{tag}
</span>
))}