Use devicePixelRatio for rive in app

[ItsEeleeya]

Since @aerofoil/rive-solid-canvas doesn't support Rive's useDevicePixelRatio, this PR adds a wrapper function to manually call the proper function which makes Rive use the dpr for higher quality drawing.

Summary by CodeRabbit

• Dependencies

  • Updated the Rive graphics library to the latest stable version (2.32.2) for improved animation support and performance.

• Refactor

  • Internal animation/graphics helpers reorganized into a local utility for clearer structure and maintainability; no user-facing behavior or public APIs changed.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Relocated Rive integration into a new local utility and updated the Rive canvas dependency version; imports in two route components now reference the local utility instead of the external package.

Changes

Cohort / File(s)	Change Summary
Dependency Version Update apps/desktop/package.json	Bumped @rive-app/canvas from ^2.26.7 to ^2.32.2.
New Rive utility apps/desktop/src/utils/rive.ts	Added createRive wrapper that integrates rive-solid-canvas with SolidJS, exposing canvas and rive accessors and a RiveComponent, plus reactive resize effect.
Imports updated to local util apps/desktop/src/routes/(window-chrome)/settings/license.tsx, apps/desktop/src/routes/(window-chrome)/upgrade.tsx	Replaced imports of createRive from external @aerofoil/rive-solid-canvas with the new local ~/utils/rive module; usage unchanged.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Inspect apps/desktop/src/utils/rive.ts for correct delegation to the underlying rive-solid-canvas API and SolidJS typing (Accessors, JSX typings).
• Verify reactive resize logic and cleanup behavior (effects/disposal).
• Confirm the two updated route files import/use the new createRive without runtime regressions.
• Check package bump for any API changes in @rive-app/canvas that could affect runtime.

🐰 I hopped in code with ears so bright,
Wrapped a rive canvas snug and tight,
Local home for dancing art,
Updated bits—small, clever start,
🥕✨

Pre-merge checks and finishing touches

❌ 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%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Use devicePixelRatio for rive in app' accurately reflects the main change: adding devicePixelRatio support to Rive by creating a wrapper function for higher-quality rendering.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 12b93f2 and fcf5353.

📒 Files selected for processing (1)

• apps/desktop/src/routes/(window-chrome)/upgrade.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (4)

**/*.tsx

📄 CodeRabbit inference engine (CLAUDE.md)

Use React Query hooks with Server Actions for mutations and perform precise cache updates using setQueryData/setQueriesData instead of broad invalidations

Files:

• apps/desktop/src/routes/(window-chrome)/upgrade.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx,js,jsx}: Use strict TypeScript; avoid any type; leverage shared types from @cap/* packages
Follow camelCase naming for variables and functions; PascalCase for components; hooks must start with 'use' prefix
Use Biome for linting and formatting; match existing formatting conventions in the codebase
Use Tailwind CSS for styling in web components; stay consistent with spacing and tokens
Use static skeletons for loading states that mirror content; avoid bouncing animations
Memoize expensive work, code-split naturally, and use Next/Image for remote assets

**/*.{ts,tsx,js,jsx}: Use 2-space indent for TypeScript files; format with Biome using pnpm format
Use Biome for code formatting and linting; run pnpm format regularly
Use kebab-case for file names (e.g., user-menu.tsx); use PascalCase for components

Files:

• apps/desktop/src/routes/(window-chrome)/upgrade.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx}: Never add any form of comments to code (single-line //, multi-line /* /, JSDoc /* */, or any other comment syntax); code must be self-explanatory through naming, types, and structure
Directory naming must use lowercase-dashed convention

Files:

• apps/desktop/src/routes/(window-chrome)/upgrade.tsx

**/*.{ts,tsx,js,jsx,rs}

📄 CodeRabbit inference engine (AGENTS.md)

Never add comments to code (//, /* */, ///, //!, #, etc.); code must be self-explanatory through naming, types, and structure

Files:

• apps/desktop/src/routes/(window-chrome)/upgrade.tsx

🧠 Learnings (2)

📚 Learning: 2025-12-07T14:29:40.721Z

Learnt from: CR
Repo: CapSoftware/Cap PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-07T14:29:40.721Z
Learning: Applies to **/tauri.ts|**/queries.ts|apps/desktop/src-tauri/gen/** : Never edit auto-generated files: `**/tauri.ts`, `**/queries.ts`, `apps/desktop/src-tauri/gen/**`

Applied to files:

• apps/desktop/src/routes/(window-chrome)/upgrade.tsx

📚 Learning: 2025-12-07T14:29:19.165Z

Learnt from: CR
Repo: CapSoftware/Cap PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-07T14:29:19.165Z
Learning: Applies to apps/desktop/**/*.ts : Use tanstack/solid-query for server state management in SolidJS components

Applied to files:

• apps/desktop/src/routes/(window-chrome)/upgrade.tsx

🔇 Additional comments (1)

apps/desktop/src/routes/(window-chrome)/upgrade.tsx (1)

8-8: createRive import relocation is consistent and safe

Switching createRive to the local ~/utils/rive helper keeps the existing call sites intact and aligns this route with the shared Rive utility; no additional changes needed here.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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