BilalG1 6bc8054ac4 add codeblock tooltips and fix spacing (#934) ... <img width="549" height="576" alt="Screenshot 2025-10-07 at 4 15 53 PM" src="https://github.com/user-attachments/assets/7dd63333-691d-42f2-996f-80a22e9effca" /> <!-- Make sure you've read the CONTRIBUTING.md guidelines: https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md --> <!-- RECURSEML_SUMMARY:START --> ## High-level PR Summary This PR adds an optional tooltip feature to code blocks and improves the UI layout and spacing in the product catalog view. The `CodeBlock` component now accepts a `tooltip` prop that displays an info tooltip next to the copy button. The product catalog view receives several layout improvements including better spacing, reorganized form controls, and the addition of tooltips to code blocks that explain their purpose. The changes also swap item ID display for item display names in some places for better readability. ⏱️ Estimated Review Time: 15-30 minutes <details> <summary>💡 Review Order Suggestion</summary> | Order | File Path | |-------|-----------| | 1 | `apps/dashboard/src/components/code-block.tsx` | | 2 | `apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-catalogs-view.tsx` | </details> [](https://discord.gg/n3SsVDAW6U) [ <!-- RECURSEML_SUMMARY:END --> <!-- ELLIPSIS_HIDDEN --> ---- > [!IMPORTANT] > Add tooltips to code blocks and adjust spacing in `ProductItemRow` for improved UI and readability. > > - **Code Block Enhancements**: > - Add `tooltip` prop to `CodeBlock` in `code-block.tsx` for displaying tooltips with additional information. > - Use `SimpleTooltip` to show tooltips next to the copy button. > - **UI Adjustments**: > - Adjust spacing in `ProductItemRow` in `page-client-catalogs-view.tsx` for better layout. > - Replace `itemId` with `itemDisplayName` for better readability. > - Add tooltips to buttons in `ProductCard` for checkout and item retrieval. > > <sup>This description was created by </sup>[<img alt="Ellipsis" src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=stack-auth%2Fstack-auth&utm_source=github&utm_medium=referral)<sup> for 5547ddb9c3. You can [customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this summary. It will automatically update as commits are pushed.</sup> <!-- ELLIPSIS_HIDDEN --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - New Features - Inline tooltips on code blocks and checkout actions. - Per-item expiration editing via a dropdown, including a “Never expires” option. - Remove item action integrated directly into the editing row. - UI Improvements - Redesigned product item editing layout with clearer headers, spacing, and grouped controls. - Consistent use of item display names across views and cards. - Enhanced checkout code block in product cards with explanatory tooltip. <!-- end of auto-generated comment: release notes by coderabbit.ai --> Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com>		2025-10-10 12:03:46 -07:00
..
backend	improve payment error messages (#931)	2025-10-10 19:00:17 +00:00
dashboard	add codeblock tooltips and fix spacing (#934)	2025-10-10 12:03:46 -07:00
dev-launchpad	Convex README	2025-10-10 04:27:05 -07:00
e2e	improve payment error messages (#931)	2025-10-10 19:00:17 +00:00
mock-oauth-server	chore: update package versions	2025-09-26 23:16:39 -05:00
oauth-mock-server	In-source unit tests (#429)	2025-02-14 11:47:52 -08:00