From 6bc8054ac430d65583435b34f432df63e703b4b5 Mon Sep 17 00:00:00 2001 From: BilalG1 Date: Fri, 10 Oct 2025 12:03:46 -0700 Subject: [PATCH] add codeblock tooltips and fix spacing (#934) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Screenshot 2025-10-07 at 4 15 53 PM ## 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
💡 Review Order Suggestion | 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` |
[![Need help? Join our Discord](https://img.shields.io/badge/Need%20help%3F%20Join%20our%20Discord-5865F2?style=plastic&logo=discord&logoColor=white)](https://discord.gg/n3SsVDAW6U) [![Analyze latest changes](https://img.shields.io/badge/Analyze%20latest%20changes-238636?style=plastic)](https://squash-322339097191.europe-west3.run.app/interactive/af2bef317bd442e19c20d27ed181693214f11dd9082b1f79c18732c4525ead5f/?repo_owner=stack-auth&repo_name=stack-auth&pr_number=934) ---- > [!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. > > This description was created by [Ellipsis](https://www.ellipsis.dev?ref=stack-auth%2Fstack-auth&utm_source=github&utm_medium=referral) for 5547ddb9c32731ea0ec70fbaf7178af07981c6b1. You can [customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this summary. It will automatically update as commits are pushed. ## 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. Co-authored-by: Konsti Wohlwend --- .../products/page-client-catalogs-view.tsx | 107 ++++++++++-------- apps/dashboard/src/components/code-block.tsx | 19 +++- 2 files changed, 71 insertions(+), 55 deletions(-) diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-catalogs-view.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-catalogs-view.tsx index b88dcca18..10e7b74bd 100644 --- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-catalogs-view.tsx +++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-catalogs-view.tsx @@ -497,12 +497,14 @@ function ProductItemRow({ if (isEditing) { return ( -
-
+
+
- {itemId} + + {itemDisplayName} +
@@ -554,16 +556,54 @@ function ProductItemRow({
- { - const v = e.target.value; - if (v === '' || /^\d*$/.test(v)) setQuantity(v); - if (!readOnly && (v === '' || /^\d*$/.test(v))) updateParent(v); - }} - /> +
+ { + const v = e.target.value; + if (v === '' || /^\d*$/.test(v)) setQuantity(v); + if (!readOnly && (v === '' || /^\d*$/.test(v))) updateParent(v); + }} + /> + {onRemove && ( + + )} +
+
+
+
+ + +
+ {item.expires === 'never' ? 'Never expires' : `${EXPIRES_OPTIONS.find(o => o.value === item.expires)?.label.toLowerCase()}`} + +
+ + +
+ {EXPIRES_OPTIONS.map((option) => ( + + + + ))} +
+ + +
- {onRemove && ( - - )} -
-
- Expires: - - -
- {item.expires === 'never' ? 'Never expires' : `${EXPIRES_OPTIONS.find(o => o.value === item.expires)?.label.toLowerCase()}`} - -
- - -
- {EXPIRES_OPTIONS.map((option) => ( - - - - ))} -
- -
); @@ -633,7 +638,7 @@ function ProductItemRow({ -
{itemId}
+
{itemDisplayName}
{prettyPrintWithMagnitudes(item.quantity)}
{shortRepeatText}
@@ -667,6 +672,7 @@ function ProductItemRow({ title="Example" icon="code" compact + tooltip="Retrieves this item for the active customer and reads the current quantity they hold." />
@@ -966,7 +972,7 @@ function ProductCard({ id, activeType, product, allProducts, existingItems, onSa
{itemsList.map(([itemId, item]) => { const itemMeta = existingItems.find(i => i.id === itemId); - const itemLabel = itemMeta ? (itemMeta.displayName || itemMeta.id) : 'Select item'; + const itemLabel = itemMeta ? itemMeta.id : 'Select item'; return (
)} diff --git a/apps/dashboard/src/components/code-block.tsx b/apps/dashboard/src/components/code-block.tsx index b5f13b2bd..6cd98e7e1 100644 --- a/apps/dashboard/src/components/code-block.tsx +++ b/apps/dashboard/src/components/code-block.tsx @@ -1,7 +1,7 @@ 'use client'; import { useThemeWatcher } from '@/lib/theme'; -import { CopyButton } from "@stackframe/stack-ui"; +import { CopyButton, SimpleTooltip } from "@stackframe/stack-ui"; import { Code, Terminal } from "lucide-react"; import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'; import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash'; @@ -9,21 +9,25 @@ import python from 'react-syntax-highlighter/dist/esm/languages/prism/python'; import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx'; import typescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript'; import { dark, prism } from 'react-syntax-highlighter/dist/esm/styles/prism'; +import type { ReactNode } from 'react'; import { cn } from '@/lib/utils'; Object.entries({ tsx, bash, typescript, python }).forEach(([key, value]) => { SyntaxHighlighter.registerLanguage(key, value); }); -export function CodeBlock(props: { +type CodeBlockProps = { language: string, content: string, - customRender?: React.ReactNode, + customRender?: ReactNode, title: string, icon: 'terminal' | 'code', maxHeight?: number, compact?: boolean, -}) { + tooltip?: ReactNode, +}; + +export function CodeBlock(props: CodeBlockProps) { const { theme, mounted } = useThemeWatcher(); let icon = null; @@ -45,7 +49,12 @@ export function CodeBlock(props: { {icon} {props.title} - +
+ {props.tooltip && ( + + )} + +
{props.customRender ??