Davidasix/google review UI updates stack-02

[DavidASix]

This PR rewrites the UI for the google-reviews product, making it more "wizard" like.

Multiple ShadCN components added to support new UI

API Key management component updated to support better generation and invalidation

God I need to write smaller PR's. I came back to this after 3 weeks and had to re-read it to write this.

[Copilot]

Pull Request Overview

This PR introduces a revamped UI flow for the Google Reviews integration, including new shared UI components and a multi-step wizard on the product page.

• Added and standardized core UI primitives (Tabs, CodeBlock, AlertDialog, MockWindow).
• Reimplemented the API key creation UI (CreateNewApiKey) with subscription gating and mobile-friendly layouts.
• Refactored the Google Reviews page to a step-by-step wizard with skeletons, cards, and framework-specific integration tabs.

Reviewed Changes

Copilot reviewed 15 out of 16 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/components/common/api-keys/create-new-api-key.tsx	Overhauled API key creation UI; added subscription check and dialogs.
src/app/api/security/create-api-key/route.ts	Wrapped endpoint in subscription middleware and added manual check.
src/app/(product)/google-reviews/page.tsx	Converted to a 4-step wizard with new subcomponents for each step.
src/app/(product)/google-reviews/_components/**/*.tsx	Added new wizard-step, step-indicator, review-card, review-skeleton.
src/components/ui/{tabs.tsx, mock-window.tsx, code-block.tsx, alert-dialog.tsx}	New shared UI components for tabs, mock windows, code blocks, dialogs.
src/app/(product)/google-reviews/_components/framework-integration-tabs/**	New framework integration tabs with live code blocks.
CLAUDE.md	Updated style guide section on string escaping.

Comments suppressed due to low confidence (5)

CLAUDE.md:163

• The rule name is incorrect. It should be "react/no-unescaped-entities" (from eslint-plugin-react). Update the reference accordingly.

When writing site contents, respect eslintreact/no-unescaped-entities. This is a requirement. Escape chars like ' should be used instead of `'`.

src/components/common/api-keys/create-new-api-key.tsx:255

• generateApiKey is not defined in this scope. You should initialize a mutation (e.g., using useMutation) and derive both generateKeyMutation and generateApiKey from it.

              onConfirm={generateApiKey}

src/components/common/api-keys/create-new-api-key.tsx:256

• generateKeyMutation is not declared. Define generateKeyMutation via useMutation and replace isPending with the correct status flag (e.g., isLoading) from react-query.

              isLoading={generateKeyMutation.isPending}

src/components/common/api-keys/create-new-api-key.tsx:142

• currentApiKey is not defined. You likely intend to use apiKeyQuery.data?.apiKey; assign it to currentApiKey before using.

  const hasApiKey = !apiKeyQuery.isLoading && currentApiKey;

src/app/api/security/create-api-key/route.ts:17

• [nitpick] The manual subscription check duplicates what withActiveSubscription middleware already enforces. Consider removing this block to avoid redundant logic.

    if (!subscription.hasActiveSubscription) {