<!--
Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md
-->
Updates all icons to Phosphor and removes lucide as dependency.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Unified and refreshed iconography across the dashboard (pages,
widgets, controls, dialogs, navigation, lists) for a more consistent,
modern visual experience — purely visual, no behavior changes.
* **Chores**
* Migrated to a single icon set across the project and removed the
previous icon library; updated documentation package to include the new
icon dependency.
<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<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>
<img width="719" alt="image"
src="https://github.com/user-attachments/assets/1a9d10a9-a571-4c61-9702-4cfb4d2efa1c"
/>
<!--
Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md
-->
<!-- ELLIPSIS_HIDDEN -->
----
> [!IMPORTANT]
> Enhances dashboard onboarding with a new setup page, refactors metrics
components, and improves UI components and code organization.
>
> - **Behavior**:
> - Introduces `SetupPage` in `setup-page.tsx` for onboarding, with
framework selection and key generation.
> - Replaces `OnboardingDialog` with `SetupPage` for a more interactive
onboarding experience.
> - `PageClient` in `page-client.tsx` now toggles between `SetupPage`
and `MetricsPage` based on user count.
> - **UI Components**:
> - Adds `CodeBlock` component in `code-block.tsx` for displaying code
snippets with syntax highlighting.
> - Enhances `EnvKeys` in `env-keys.tsx` to support downloading keys and
displaying them in tabs.
> - Introduces `InlineCode` component in `inline-code.tsx` for inline
code styling.
> - **Refactoring**:
> - Moves metrics-related components to `(overview)/(metrics)`
directory.
> - Renames and reorganizes files for better structure, e.g.,
`globe.tsx` and `line-chart.tsx`.
> - Updates `SidebarLayout` and `PageLayout` for improved layout
handling.
> - **Dependencies**:
> - Adds `react-syntax-highlighter` and its types to `package.json` for
code highlighting.
> - **Misc**:
> - Updates `theme.tsx` to improve theme watching logic.
> - Fixes minor issues and improves code readability across several
files.
>
> <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 194d1ef8da. You can
[customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this
summary. It will automatically update as commits are pushed.</sup>
<!-- ELLIPSIS_HIDDEN -->
---------
Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com>
