feat: tool registry with collapsible category sidebar

[rivodotlove]

Summary

Introduces the tool registry and renders the 10 planned tools as a grouped, collapsible sidebar list — the foundational piece every other UX feature (tabs, search, favourites, welcome dashboard) builds on.

Screenshot

What's in

• src/tools/registry.ts — typed TOOLS array (id, name, category, icon, description), CATEGORIES array, and getToolById / getToolsByCategory helpers. Icons sourced from lucide-react.
• Sidebar (app-shell.tsx) — tools rendered by category. Each row is a TanStack Router <Link> with an accent-tinted rounded icon tile, name text, and active-state highlight (accent left border + muted bg).
• Collapsible categories — chevron rotates 0deg ↔ -90deg, the tool list animates via the grid-template-rows: 1fr ↔ 0fr trick (200 ms ease-in-out, no JS height measurement).
• Active-tool-stays-visible — when a category is collapsed and contains the currently active tool, that tool stays visible above the collapsing region; siblings hide.
• Tool route (tool.$toolId.tsx) — looks up the tool in the registry and renders icon + name + category + description + "not implemented yet". Unknown ids get a friendly fallback with a link home.

Out of scope (planned next)

Tab open/close/switch, sidebar panel switching from the icon rail, keyboard shortcuts, search, favourites, welcome dashboard widgets, individual tool implementations, settings UI.

Test plan

• pnpm dev — sidebar renders 10 tools across 6 categories with accent-tinted icon tiles.
• Click any tool — navigates to /tool/<id>, sidebar row highlights with accent border.
• Click a category header — chevron rotates and tools animate open/closed smoothly.
• Open a tool, then collapse its category — active tool remains visible while siblings hide.
• Visit /tool/does-not-exist — friendly fallback with "Back to welcome" link.
• pnpm check — format + lint + type-check all pass.
• pnpm build — production build succeeds.

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

• New Features
  • Added 10 new utility tools including Base64 encoding, URL encoding, JWT decoding, hash generation, UUID generation, JSON formatting, markdown preview, timestamp conversion, color conversion, and Lorem Ipsum text generation
  • Introduced collapsible sidebar categories to organize tools
  • Tool pages now display detailed information with icons, categories, and descriptions

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 621a4218-0cf6-4318-913a-80784c84a8a9

📥 Commits

Reviewing files that changed from the base of the PR and between c703032 and 601b24d.

⛔ Files ignored due to path filters (1)

• docs/screenshots/sidebar-tools-list.png is excluded by !**/*.png

📒 Files selected for processing (3)

• src/components/shell/app-shell.tsx
• src/routes/tool.$toolId.tsx
• src/tools/registry.ts

---

📝 Walkthrough

Walkthrough

The PR introduces a tool registry system that defines tool metadata and categories, then integrates that registry into dynamic tool page routing and a refactored sidebar navigation UI with collapsible category-organized tool links.

Changes

Tool Registry and Navigation

Layer / File(s)	Summary
Tool Registry & Category Definitions src/tools/registry.ts	Exports category type (ToolCategoryId), category interface with labels, tool definition shape with icon/description, full CATEGORIES and TOOLS constants, and lookup helpers (getToolById, getToolsByCategory).
Tool Route Page Rendering src/routes/tool.$toolId.tsx	Route retrieves tool metadata from registry and renders tool detail view (icon, name, category, description) or shows unknown tool fallback with home navigation when lookup fails.
Sidebar Category Navigation src/components/shell/app-shell.tsx	Sidebar refactored to render category sections (open/collapsed) with tool links filtered by category and styled based on active route; uses useActiveToolId hook to extract current tool from pathname.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant Route as Route Handler
  participant Registry as Tool Registry
  participant UI as UI Components
  
  User->>Route: Navigate to /tool/$toolId
  Route->>Registry: getToolById(toolId)
  alt Tool Found
    Registry-->>Route: ToolDefinition
    Route->>UI: Render ToolRoute with details
    UI-->>User: Display tool icon, name, category, description
  else Tool Not Found
    Registry-->>User: Show "Unknown tool" message
  end

  User->>UI: View Sidebar
  UI->>Registry: getToolsByCategory(categoryId)
  Registry-->>UI: Tools in category
  UI->>UI: Highlight active tool from pathname
  UI-->>User: Render collapsible category sections

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A registry of tools so neat,
With categories making systems complete,
The sidebar now folds and unfolds with grace,
While routes find each tool in its rightful place!
✨📋

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and clearly describes the main changes: adding a tool registry and implementing a collapsible category-based sidebar, which are the primary objectives of this pull request.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/tool-registry

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}