Conversation
|
Resolves #435 |
WalkthroughThe pull request adds a new SubscriptionStatusWidget React component that displays billing and subscription state (trial progress, days remaining, usage against a 5,000-word starter cap) and includes action buttons that navigate to pricing/billing. The widget is conditionally hidden when the sidebar is collapsed or when the user has ACTIVE_PRO. HomeKit now imports and renders this widget in the sidebar. Additionally, a Bash permission pattern "Bash(bunx tsc:*)" was added to settings.local.json. Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Tip 📝 Customizable high-level summaries are now available in beta!You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.
Example instruction:
Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
.claude/settings.local.json (1)
22-23: Configuration change is valid and properly integrated.The new permission pattern
"Bash(bunx tsc:*)"is syntactically correct, properly formatted as the last array element, and consistent with the existing security model. The trailing comma on line 22 is necessary for valid JSON array continuation.Optional consideration: The wildcard pattern
tsc:*permits any arguments to be passed to the TypeScript compiler. If specific tsc commands are known ahead of time, narrowing this pattern (e.g.,"Bash(bunx tsc:--version)") would further restrict permissions. However, if the SubscriptionStatusWidget component or related build processes require flexible tsc invocation, the current pattern is appropriate.app/components/home/SubscriptionStatusWidget.tsx (1)
38-46: Move static style constants outside the component.These className strings are recreated on every render. Since they're static, define them outside the component body to avoid unnecessary allocations.
Apply this diff:
+// Style constants +const CARD_CLASS_NAME = + 'w-full bg-white rounded-2xl border-2 border-neutral-100 shadow-sm p-2 space-y-1.5' +const PROGRESS_BAR_CONTAINER_CLASS_NAME = + 'w-full h-1.5 bg-neutral-200 rounded-full overflow-hidden' +const PROGRESS_BAR_FILL_CLASS_NAME = + 'h-full transition-all duration-300 bg-gradient-to-r' +const BUTTON_BASE_CLASS_NAME = + 'w-full text-white px-4 py-2.5 rounded-md text-sm font-semibold hover:bg-gray-800 cursor-pointer transition-colors mt-4' + export function SubscriptionStatusWidget({ wordsUsed = 1000, navExpanded = true, }: SubscriptionStatusWidgetProps) { const billingState = useBillingState() const { setCurrentPage, setSettingsPage } = useMainStore() const handleUpgradeClick = () => { setCurrentPage('settings') setSettingsPage('pricing-billing') } - // Common styles - const cardClassName = - 'w-full bg-white rounded-2xl border-2 border-neutral-100 shadow-sm p-2 space-y-1.5' - const progressBarContainerClassName = - 'w-full h-1.5 bg-neutral-200 rounded-full overflow-hidden' - const progressBarFillClassName = - 'h-full transition-all duration-300 bg-gradient-to-r' - const buttonBaseClassName = - 'w-full text-white px-4 py-2.5 rounded-md text-sm font-semibold hover:bg-gray-800 cursor-pointer transition-colors mt-4'Then update references from camelCase to SCREAMING_SNAKE_CASE throughout the component.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
.claude/settings.local.json(1 hunks)app/components/home/HomeKit.tsx(2 hunks)app/components/home/SubscriptionStatusWidget.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (10)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Always prefer console commands over log commands. Use
console.loginstead oflog.info
Files:
app/components/home/HomeKit.tsxapp/components/home/SubscriptionStatusWidget.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/always.mdc)
Never use empty catch statements
Files:
app/components/home/HomeKit.tsxapp/components/home/SubscriptionStatusWidget.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/code-conventions.mdc)
**/*.{ts,tsx}: Follow standard, idiomatic TypeScript coding practices for structure, naming, and types
Avoid adding comments unless they explain complex logic or non-obvious decisions; well-written, self-explanatory code is preferred
Do not add comments that merely restate what the code does
Rely on comprehensive tests to document the behavior and usage of code rather than extensive comments within the code itself
Use kebab-case when naming directories, TypeScript, and other files
**/*.{ts,tsx}: Prefer interfaces over types for object definitions
Use type for unions, intersections, and mapped types
NEVER useanyoras anytypes or coercion
Leverage TypeScript's built-in utility types
Use generics for reusable type patterns
Use PascalCase for type names and interfaces
Use camelCase for variables and functions
Use UPPER_CASE for constants
Use descriptive names with auxiliary verbs (e.g., isLoading, hasError)
Prefix interfaces for React props with 'Props' (e.g., ButtonProps)
Keep type definitions close to where they're used
Export types and interfaces from dedicated type files when shared
Co-locate component props with their components
Use explicit return types for public functions
Use arrow functions for callbacks and methods
Implement proper error handling with custom error types
Use function overloads for complex type scenarios
Prefer async/await over Promises
Prefer function declarations over function expressions
Use readonly for immutable properties
Leverage discriminated unions for type safety
Use type guards for runtime type checking
Implement proper null checking
Avoid type assertions unless necessary
Handle Promise rejections properly
Files:
app/components/home/HomeKit.tsxapp/components/home/SubscriptionStatusWidget.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.tsx: Use kebab-case for files and directories
Do not use 'use client' or 'use server' statements in React components
Favor named exports for components
Ensure components are modular, reusable, and maintain a clear separation of concerns
Always split React components so there is only ever one per file
Keep logic as low as possible in React components
Implement responsive design with Tailwind CSS using a mobile-first approach
Files:
app/components/home/HomeKit.tsxapp/components/home/SubscriptionStatusWidget.tsx
app/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Electron renderer code should be organized in the
app/directory and use React + Tailwind
Files:
app/components/home/HomeKit.tsxapp/components/home/SubscriptionStatusWidget.tsx
{app,lib}/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use Prettier with 2-space indent for code formatting across TypeScript and React files
Files:
app/components/home/HomeKit.tsxapp/components/home/SubscriptionStatusWidget.tsx
{app,lib,server}/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
{app,lib,server}/**/*.{ts,tsx,js,jsx}: Use ESLint to enforce code style and runbun run lintbefore submitting code
Always useconsolecommands instead of log commands (e.g.,console.loginstead oflog.info)
Files:
app/components/home/HomeKit.tsxapp/components/home/SubscriptionStatusWidget.tsx
{app,lib}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
{app,lib}/**/*.{ts,tsx}: Components and classes usePascalCasenaming convention
Hooks and utility functions usecamelCasenaming convention
Files:
app/components/home/HomeKit.tsxapp/components/home/SubscriptionStatusWidget.tsx
{app,lib,server}/**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
Constants use
SCREAMING_SNAKE_CASEnaming convention
Files:
app/components/home/HomeKit.tsxapp/components/home/SubscriptionStatusWidget.tsx
app/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Co-locate Tailwind styles with React components and reuse tokens via
lib/constants
Files:
app/components/home/HomeKit.tsxapp/components/home/SubscriptionStatusWidget.tsx
🧬 Code graph analysis (2)
app/components/home/HomeKit.tsx (1)
app/components/home/SubscriptionStatusWidget.tsx (1)
SubscriptionStatusWidget(24-135)
app/components/home/SubscriptionStatusWidget.tsx (2)
app/hooks/useBillingState.ts (1)
BillingState(10-20)app/store/useMainStore.ts (1)
useMainStore(49-68)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: run-tests / test
- GitHub Check: Analyze (rust)
- GitHub Check: Analyze (swift)
🔇 Additional comments (5)
app/components/home/SubscriptionStatusWidget.tsx (3)
1-10: LGTM!The imports and interface definition follow TypeScript best practices. The
Propssuffix convention and optional properties are correctly implemented.
66-93: LGTM!The trial status UI implementation is clean and includes proper conditional pluralization for "day/days".
100-134: LGTM!The free tier UI is well-implemented with proper number formatting and a visually distinct PRO badge. The structure is consistent with the trial status section.
app/components/home/HomeKit.tsx (2)
20-20: LGTM!The import statement correctly uses a named import as per coding guidelines.
235-237: No issues found—this is intentional test/demo code using mock data.The
SubscriptionStatusWidgetcorrectly uses the defaultwordsUsedvalue because the entire component is set up for testing with a mock billing state (line 29:mockBillingState). No word usage tracking exists elsewhere in the codebase—there is nouseMainStoretracking, noTODO/FIXMEcomments, and no tracking implementations. This design is intentional for the current demo/test state.
app/components/home/HomeKit.tsx
Outdated
| </div> | ||
| </div> | ||
|
|
||
| {/* Subscription Status Widget */} |
There was a problem hiding this comment.
we could delete this comment
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
app/components/home/HomeKit.tsx(2 hunks)app/components/home/SubscriptionStatusWidget.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- app/components/home/SubscriptionStatusWidget.tsx
🧰 Additional context used
📓 Path-based instructions (10)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Always prefer console commands over log commands. Use
console.loginstead oflog.info
Files:
app/components/home/HomeKit.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/always.mdc)
Never use empty catch statements
Files:
app/components/home/HomeKit.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/code-conventions.mdc)
**/*.{ts,tsx}: Follow standard, idiomatic TypeScript coding practices for structure, naming, and types
Avoid adding comments unless they explain complex logic or non-obvious decisions; well-written, self-explanatory code is preferred
Do not add comments that merely restate what the code does
Rely on comprehensive tests to document the behavior and usage of code rather than extensive comments within the code itself
Use kebab-case when naming directories, TypeScript, and other files
**/*.{ts,tsx}: Prefer interfaces over types for object definitions
Use type for unions, intersections, and mapped types
NEVER useanyoras anytypes or coercion
Leverage TypeScript's built-in utility types
Use generics for reusable type patterns
Use PascalCase for type names and interfaces
Use camelCase for variables and functions
Use UPPER_CASE for constants
Use descriptive names with auxiliary verbs (e.g., isLoading, hasError)
Prefix interfaces for React props with 'Props' (e.g., ButtonProps)
Keep type definitions close to where they're used
Export types and interfaces from dedicated type files when shared
Co-locate component props with their components
Use explicit return types for public functions
Use arrow functions for callbacks and methods
Implement proper error handling with custom error types
Use function overloads for complex type scenarios
Prefer async/await over Promises
Prefer function declarations over function expressions
Use readonly for immutable properties
Leverage discriminated unions for type safety
Use type guards for runtime type checking
Implement proper null checking
Avoid type assertions unless necessary
Handle Promise rejections properly
Files:
app/components/home/HomeKit.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.tsx: Use kebab-case for files and directories
Do not use 'use client' or 'use server' statements in React components
Favor named exports for components
Ensure components are modular, reusable, and maintain a clear separation of concerns
Always split React components so there is only ever one per file
Keep logic as low as possible in React components
Implement responsive design with Tailwind CSS using a mobile-first approach
Files:
app/components/home/HomeKit.tsx
app/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Electron renderer code should be organized in the
app/directory and use React + Tailwind
Files:
app/components/home/HomeKit.tsx
{app,lib}/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use Prettier with 2-space indent for code formatting across TypeScript and React files
Files:
app/components/home/HomeKit.tsx
{app,lib,server}/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
{app,lib,server}/**/*.{ts,tsx,js,jsx}: Use ESLint to enforce code style and runbun run lintbefore submitting code
Always useconsolecommands instead of log commands (e.g.,console.loginstead oflog.info)
Files:
app/components/home/HomeKit.tsx
{app,lib}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
{app,lib}/**/*.{ts,tsx}: Components and classes usePascalCasenaming convention
Hooks and utility functions usecamelCasenaming convention
Files:
app/components/home/HomeKit.tsx
{app,lib,server}/**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
Constants use
SCREAMING_SNAKE_CASEnaming convention
Files:
app/components/home/HomeKit.tsx
app/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Co-locate Tailwind styles with React components and reuse tokens via
lib/constants
Files:
app/components/home/HomeKit.tsx
🧬 Code graph analysis (1)
app/components/home/HomeKit.tsx (1)
app/components/home/SubscriptionStatusWidget.tsx (1)
SubscriptionStatusWidget(14-121)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Analyze (swift)
- GitHub Check: Analyze (rust)
- GitHub Check: run-tests / test
- GitHub Check: native-build-check / build-check-mac
| import NotesContent from './contents/NotesContent' | ||
| import SettingsContent from './contents/SettingsContent' | ||
| import AboutContent from './contents/AboutContent' | ||
| import { SubscriptionStatusWidget } from './SubscriptionStatusWidget' |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Imported file violates kebab-case naming convention.
Based on coding guidelines, the imported component file should use kebab-case. The file SubscriptionStatusWidget.tsx should be renamed to subscription-status-widget.tsx to comply with the project's naming standards.
As per coding guidelines:
- "Use kebab-case when naming directories, TypeScript, and other files"
- "Use kebab-case for files and directories" (for tsx files)
Apply this diff to update the import path:
-import { SubscriptionStatusWidget } from './SubscriptionStatusWidget'
+import { SubscriptionStatusWidget } from './subscription-status-widget'And rename the file app/components/home/SubscriptionStatusWidget.tsx to app/components/home/subscription-status-widget.tsx.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { SubscriptionStatusWidget } from './SubscriptionStatusWidget' | |
| import { SubscriptionStatusWidget } from './subscription-status-widget' |
🤖 Prompt for AI Agents
In app/components/home/HomeKit.tsx around line 20, the import uses
SubscriptionStatusWidget.tsx which violates the project's kebab-case rule;
rename the file at app/components/home/SubscriptionStatusWidget.tsx to
app/components/home/subscription-status-widget.tsx and update the import in
HomeKit.tsx to import from './subscription-status-widget'; also search and
update any other imports throughout the codebase that reference the old
PascalCase filename to the new kebab-case path.
| </div> | ||
| </div> | ||
|
|
||
| <SubscriptionStatusWidget navExpanded={navExpanded} /> |
There was a problem hiding this comment.
🧩 Analysis chain
Verify if wordsUsed should be wired to real usage data.
The SubscriptionStatusWidget component accepts a wordsUsed prop (defaulting to 1000) that displays usage against the 5,000-word free tier limit. Currently, this prop is not being passed, so it's using the hardcoded default value.
Please confirm whether:
- The default value is intentional for this MVP/demo
- Real usage data should be fetched (e.g., from a hook, API, or store) and passed to the widget
Run the following script to check if there are existing patterns for tracking word usage in the codebase:
🏁 Script executed:
#!/bin/bash
# Description: Search for word usage tracking patterns in the codebase
# Search for wordsUsed, word_count, or similar usage tracking
rg -nP --type=ts --type=tsx -C3 '\b(wordsUsed|wordCount|word_count|usage.*word|track.*word)\b'
# Search for FREE_TIER_WORD_LIMIT usage to understand how limits are enforced
rg -nP --type=ts --type=tsx -C3 'FREE_TIER_WORD_LIMIT'
# Look for any API or hooks related to usage tracking
ast-grep --pattern 'use$_Usage'
ast-grep --pattern 'get$_Usage'Length of output: 55
🏁 Script executed:
#!/bin/bash
# Description: Search for word usage tracking patterns with corrected syntax
# Search for wordsUsed, wordCount, or similar patterns using glob
rg -nP -C3 '\b(wordsUsed|wordCount|word_count|usage.*word|track.*word)\b' --glob='*.ts' --glob='*.tsx'
# Search for FREE_TIER_WORD_LIMIT usage
rg -nP -C3 'FREE_TIER_WORD_LIMIT' --glob='*.ts' --glob='*.tsx'
# Search for usage-related hooks
rg -nP 'use.*Usage|useWords|useWordCount' --glob='*.ts' --glob='*.tsx'
# Search for SubscriptionStatusWidget definition and its usage
rg -nP 'SubscriptionStatusWidget' --glob='*.ts' --glob='*.tsx' -C2Length of output: 5009
🏁 Script executed:
#!/bin/bash
# Description: Inspect hooks that may contain word usage data
# Find useBillingState hook definition
rg -nP 'useBillingState|export.*billingState' --glob='*.ts' --glob='*.tsx' -A15
# Find useMainStore hook definition and its store contents
rg -nP 'useMainStore|export.*MainStore' --glob='*.ts' --glob='*.tsx' -A20
# Search for any word/usage metrics in store or state files
rg -nP 'word|usage|quota|limit' --glob='*store*' --glob='*.ts' --glob='*.tsx' -i -B2 -A2Length of output: 188002
Wire wordsUsed to real usage data from interactions instead of using hardcoded default.
The SubscriptionStatusWidget currently displays a hardcoded 1000 words regardless of actual user activity. Meanwhile, HomeContent already calculates real word usage from user interactions (calculateTotalWords), and the database schema supports tracking free_words_remaining.
Pass the calculated total words from HomeKit to the widget:
<SubscriptionStatusWidget navExpanded={navExpanded} wordsUsed={stats.totalWords} />
This requires extracting the word count calculation to be accessible to both HomeContent and SubscriptionStatusWidget, or lifting the stats calculation to HomeKit level.
🤖 Prompt for AI Agents
In app/components/home/HomeKit.tsx around line 236, SubscriptionStatusWidget is
rendered with a hardcoded word usage; lift or expose the real-word calculation
so the component receives actual usage: move or call the existing
calculateTotalWords/stats computation up into HomeKit (or extract it into a
shared helper) and pass the result into the widget via props (e.g.
wordsUsed={stats.totalWords}); also update SubscriptionStatusWidget to accept
and use the wordsUsed prop instead of the hardcoded 1000.
There was a problem hiding this comment.
this is a temporary placeholder until the next feature comes and uses it
There was a problem hiding this comment.
@julgmz, understood! Thanks for clarifying that the hardcoded wordsUsed value is intentional as a placeholder for now.
Would you like me to create a follow-up issue to track wiring the real usage data when the next feature is ready, or do you already have this tracked?
✏️ Learnings added
Learnt from: julgmz
Repo: heyito/ito PR: 446
File: app/components/home/HomeKit.tsx:236-236
Timestamp: 2025-11-24T21:51:44.018Z
Learning: In app/components/home/SubscriptionStatusWidget.tsx, the hardcoded default wordsUsed value (1000) is intentional as a temporary placeholder until a future feature implements real usage tracking.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
2 participants
No description provided.