feat(tools): design pass on the tools directory and tool pages

[tsahimatsliah]

Design pass over /tools and /tools/[slug], based on review feedback. Based on claude/docker-design-review-pi3eyd (the in-progress design-review branch this iterates on) so the diff shows only this work — intentional stack order; that branch gets its own PR when it stabilises.

What changed

Directory search. One field in the hero, mirroring the tags directory — live client-side filtering by title, category and website domain, no results page. The catalogue is under a hundred tools, so getStaticProps fetches each category whole and the same data powers the sections and the search index. A charm empty state with a "Clear search" action covers the no-match case, a debounced search tools event records usage, and result clicks carry searched: true so they are distinguishable from browsed clicks.

Single-copy payload. Sections and rails reference the catalogue by id instead of embedding full tool objects, so each tool ships once in __NEXT_DATA__. getStaticProps warns when a category hits the fetch limit, so search truncation cannot happen silently as the catalogue grows.

Squad cards. Squads on a tool page use the Squad directory's card layout (avatar, name, description, @handle · N members). Added description to the squad query.

Inline "add to my stack". Tool cards carry the tags directory's affordance — a persistent check when the tool is already in your stack, a + otherwise. Hover-revealed on pointer devices, always visible below the tablet breakpoint so touch users never face an invisible-but-tappable control. The whole add flow (auth gate, log event, modal, toasts) is one useAddToolToStack hook shared by the directory and the tool page.

Sections, panels, surfaces. Section rules run out of the heading; stat tiles and the adoption chart share one panel; card surfaces are outlined, matching the tag pages.

Logo contrast

23 of the 88 logos in the catalogue are near-black Simple Icons assets — Angular #0F0F11, Express/Cursor/Vercel/Next.js/Rust #000000, GitHub #181717 — and were invisible, not merely low-contrast, on dark surfaces.

Recolouring isn't available: the fill sits on the root <svg> of an <img>-loaded asset, so CSS can't reach it, and a Cloudinary e_colorize would flatten the multi-colour and raster logos too. What makes the plate safe is that no logo in the catalogue is white — the six "light" ones are saturated yellows and cyans (JS #F7DF1E, React #61DAFB) that stay legible on white. bg-white on logos is already the established pattern for sponsored creatives in UserStackItem.

Discussion section

A tool with no discussion yet shows the charm empty state (with a loading state while the post is created) instead of a bare input-looking button. The gates read isLoggedIn instead of !!user — equivalent in behaviour, since AuthContext already exposes a null user for anonymous visitors; it just states the intent directly. An earlier revision of this PR claimed the !!user gate caused a never-resolving skeleton for visitors; review correctly traced AuthContext and showed that state is unreachable. The test fixtures now mirror the provider honestly: anonymous = no user, logged-in = the loggedUser fixture with isLoggedIn derived from it.

Review resolutions

• ToolDiscussion root cause — narrative retracted (see above); isLoggedIn refactor kept, misleading comments removed.
• Test fixture — impossible user + isLoggedIn: false pairing removed; two honest fixtures, anonymous default, plus a logged-in test covering the verification gate.
• Touch — stack button is opacity-100 below tablet, hover-revealed above it.
• Duplication — useAddToolToStack(origin) extracted; both pages consume it.
• Analytics — dead origin param gone; searched: true on result clicks; debounced LogEvent.SearchTools with query + result count.
• Payload — id references + single catalogue; limit-hit warning instead of silent truncation.
• Tooltip on disabled button — button stays enabled with aria-disabled + no-op guard, so "In your stack" can actually show; aria-pressed dropped.
• Search empty state / match fields — charm empty state with clear action; matching extended to category + domain.
• as PublicProfile casts — consolidated into the hook as (user ?? null) as PublicProfile | null, keeping the null path visible.
• Card link a11y — stack count folded into the anchor's accessible name. Text stays unselectable in favour of whole-card clickability.
• Comment pass — narrative comments stripped throughout; only behavioural notes remain.

Verification

• 11/11 tests pass across both specs (4 new: search filtering, category/domain matching, clear-search flow, logged-in verification gate)
• Lint clean on every changed file; typecheck unchanged at the branch's 17 pre-existing errors, none in tools code
• Mobile at 375px: stack control visible (opacity: 1), no horizontal overflow; card anchors expose "title, N in stacks"
• Local dev-server hydration is flaky in this worktree (Turbopack workspace-root quirk, affects untouched pages like /tags equally) — interactive search flows are covered by the jest specs and worth a click-through on the Vercel preview

🤖 Generated with Claude Code

Preview domain

https://claude-tools-pages-design-pass.preview.app.daily.dev

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
daily-webapp	Ready	Preview	Aug 23, 2026 1:45pm
storybook	Building	Preview	Aug 23, 2026 1:45pm

[tsahimatsliah]

Summary

Solid design pass — the outlined surfaces, merged adoption panel and the shared squad card all read as consistency wins, and the section-rule treatment matches the tags directory. Two things I'd resolve before merge: the stated root cause of the discussion bug doesn't match what AuthContext actually exposes (and the new default test fixture encodes a state the provider cannot produce), and the inline stack button is invisible-but-tappable on touch. Rest is non-blocking.

Also worth confirming: this targets claude/docker-design-review-pi3eyd, which has no open PR of its own — so merging this lands in an unreviewed branch. Intentional stack order?

Needs resolution

1. ToolDiscussion — the anonymous-visitor bug narrative and the regression test's premise.
2. ToolCard — hover-only + on touch devices.

Non-blocking

Duplicated add-to-stack flow, search analytics + dead origin param, searchIndex payload duplication, tooltip on a disabled button, search empty state and match fields, as PublicProfile casts, link-name/selectability on the new card.

Verification

• CI green, including typecheck_strict_changed and both test packages
• Traced AuthContext to check the claimed anonymous user behaviour
• Checked useUserStack / useProfileShowcase gating for anonymous visitors (enabled: !!userId — no stray request, since context user is null when logged out)
• Not verified by me: preview at 375px, and the discussion section as a real logged-out visitor

Reviewed by AI.