Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughA comprehensive feed editing system was introduced, including modular React components for editing feed configurations, images, and metadata, along with robust form handling using react-hook-form and Zod validation. Supporting hooks, utility modules, and UI primitives were added or updated. The main feed editing route was refactored to utilize these new abstractions, and minor tooling and formatting updates were made. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant EditFeedComponent
participant useEditFeed
participant EditFeedForm
participant EditFeedConfigSection
participant EditFeedActions
User->>EditFeedComponent: Navigates to feed edit page
EditFeedComponent->>useEditFeed: Initialize with feedId
useEditFeed->>useEditFeed: Fetch feed data, set config state
useEditFeed-->>EditFeedComponent: Return feed data, handlers, mutations
EditFeedComponent->>EditFeedHeader: Render with feed info
EditFeedComponent->>EditFeedImageSection: Render with config, image handler
EditFeedComponent->>EditFeedConfigSection: Render with config, JSON, change handlers
EditFeedComponent->>EditFeedActions: Render with save/delete handlers and mutation state
User->>EditFeedImageSection: Uploads new image
EditFeedImageSection->>useEditFeed: handleImageUploaded(ipfsHash, ipfsUrl)
User->>EditFeedConfigSection: Edits config (form or JSON)
EditFeedConfigSection->>EditFeedForm: Edit fields (form mode)
EditFeedForm-->>useEditFeed: onConfigChange(updatedConfig)
EditFeedConfigSection-->>useEditFeed: onJsonChange(newJsonString)
User->>EditFeedActions: Clicks "Save Changes"
EditFeedActions->>useEditFeed: handleSaveChanges()
useEditFeed->>useEditFeed: Run updateFeedMutation
User->>EditFeedActions: Clicks "Delete Feed"
EditFeedActions->>useEditFeed: handleDeleteFeed()
useEditFeed->>useEditFeed: Run deleteFeedMutation, navigate away
Poem
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 10
♻️ Duplicate comments (1)
apps/app/src/components/feed/form/SourcesSection.tsx (1)
43-43: Use consistent ID generation approach.Same as RecapsSection, consider using a more robust ID generation method to avoid potential duplicates.
🧹 Nitpick comments (13)
apps/app/src/components/feed/EditFeedActions.tsx (2)
5-15: Remove unused prop from interface.The
currentConfigprop is defined in the interface but never used in the component implementation.interface EditFeedActionsProps { - currentConfig: FeedConfig | null; onSaveChanges: () => Promise<void>; onDeleteFeed: () => Promise<void>; updateFeedMutation: { isPending: boolean; }; deleteFeedMutation: { isPending: boolean; }; }
17-22: Update component parameters to match interface change.Remove the unused
currentConfigparameter from the component.export function EditFeedActions({ - currentConfig, onSaveChanges, onDeleteFeed, updateFeedMutation, deleteFeedMutation, }: EditFeedActionsProps) {apps/app/src/components/feed/EditFeedImageSection.tsx (1)
5-9: Remove unusedfeedIdprop.The
feedIdprop is defined in the interface but never used in the component implementation.interface EditFeedImageSectionProps { currentConfig: FeedConfig | null; - feedId: string; onImageUploaded: (ipfsHash: string, ipfsUrl: string) => void; }And update the component signature:
export function EditFeedImageSection({ currentConfig, onImageUploaded, }: EditFeedImageSectionProps) {apps/app/src/components/feed/EditFeedLoadingState.tsx (2)
16-25: Consider the impact of fixed positioning overlay.The fixed positioning with
z-50creates a full-screen overlay that might interfere with navigation or other UI interactions. Consider whether this blocking behavior is intended, or if a more localized loading state would be better.If non-blocking loading is preferred:
- <div className="fixed inset-0 flex items-center justify-center z-50"> + <div className="flex items-center justify-center p-8">
5-9: Consider more specific typing forfeedData.The
feedDataprop is typed asunknownwhich provides limited type safety. Consider using a more specific type if the structure is known.apps/app/src/components/feed/form/ModerationSection.tsx (1)
17-59: Consider extracting common logic to reduce duplication.Both
TwitterApproversFieldandTwitterBlacklistFieldshare nearly identical logic for handling comma-separated values. Consider creating a reusable component or custom hook.Example approach with a custom hook:
function useCommaSeparatedField(name: string, control: Control<FormValues>) { const { field, fieldState: { error } } = useController({ name, control }); const [localValue, setLocalValue] = useState( field.value?.twitter?.join(", ") || "" ); useEffect(() => { const formValue = field.value?.twitter?.join(", ") || ""; setLocalValue(formValue); }, [field.value]); const handleBlur = () => { const values = { ...field.value }; values.twitter = localValue .split(",") .map((s) => s.trim()) .filter(Boolean); field.onChange(values); }; return { localValue, setLocalValue, handleBlur, error }; }apps/app/src/components/feed/form/RecapsSection.tsx (1)
39-39: Consider using a more robust ID generation method.Using
Date.now()for ID generation could theoretically create duplicates if multiple items are added in rapid succession. Consider using a UUID library or a counter-based approach.- id: `recap-${Date.now()}`, + id: `recap-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,apps/app/src/routes/_layout/edit/feed.$feedId.tsx (1)
32-40: Simplify loading state handling.The current pattern of creating a component and checking its truthiness is unconventional. Consider a more straightforward approach.
- // Show loading, error, or not found states - const loadingState = EditFeedLoadingState({ - isLoadingFeed, - feedError, - feedData, - }); - - if (loadingState) { - return loadingState; - } + if (isLoadingFeed || feedError || !feedData) { + return ( + <EditFeedLoadingState + isLoadingFeed={isLoadingFeed} + feedError={feedError} + feedData={feedData} + /> + ); + }apps/app/src/components/feed/EditFeedConfigSection.tsx (1)
33-36: Replace setTimeout with useEffect for form synchronization.Using
setTimeoutto defer form updates is a workaround. Consider usinguseEffectfor a more React-idiomatic approach.+ useEffect(() => { + if (!isJsonMode && formRef.current) { + formRef.current.updateFromConfig(); + } + }, [isJsonMode]); + const handleSwitchToFormMode = () => { setIsJsonMode(false); - // Trigger form update after switching to form mode - setTimeout(() => { - formRef.current?.updateFromConfig(); - }, 0); };apps/app/src/hooks/use-edit-feed.ts (3)
59-59: Remove or utilize the unused_ipfsHashparameter.The
_ipfsHashparameter is prefixed with underscore indicating it's unused, but it's still being passed to the function. Either remove it or implement its usage.- const handleImageUploaded = (_ipfsHash: string, ipfsUrl: string) => { + const handleImageUploaded = (ipfsHash: string, ipfsUrl: string) => { setCurrentConfig((prevConfig) => { const newConfig = { ...(prevConfig || { id: feedId, name: "", description: "" }), image: ipfsUrl, + // Consider storing ipfsHash if needed for future reference } as FeedConfig;
36-56: Extract default config values to improve maintainability.The config initialization contains many hardcoded defaults. Consider extracting these to a separate constant or function.
+const getDefaultFeedConfig = (partial: Partial<FeedConfig>): FeedConfig => ({ + id: partial.id || "", + name: partial.name || "", + description: partial.description || "", + image: partial.image || undefined, + enabled: partial.enabled || false, + moderation: partial.moderation || { approvers: { twitter: [] } }, + outputs: partial.outputs || { stream: { enabled: false } }, + pollingIntervalMs: partial.pollingIntervalMs || undefined, + sources: partial.sources || [], + ingestion: partial.ingestion || undefined, +}); useEffect(() => { if (feedData?.config) { - const configWithPotentiallyMissingFields: FeedConfig = { - // Ensure all fields from the schema are present, providing defaults if necessary - // This is important because feedData.config might be from the simpler API type - id: feedData.config.id, - name: feedData.config.name, - description: feedData.config.description, - image: feedData.config.image || undefined, - enabled: feedData.config.enabled || false, - moderation: feedData.config.moderation || { - approvers: { twitter: [] }, - }, // Default - outputs: feedData.config.outputs || { stream: { enabled: false } }, - pollingIntervalMs: feedData.config.pollingIntervalMs || undefined, - sources: feedData.config.sources || [], - ingestion: feedData.config.ingestion || undefined, - }; + const configWithPotentiallyMissingFields = getDefaultFeedConfig(feedData.config);
113-115: Replace window.confirm with a modern confirmation dialog.Using
window.confirmis inconsistent with the modern UI approach used throughout the application. Consider implementing a proper confirmation dialog component.Would you like me to implement a confirmation dialog component that matches your UI design system?
apps/app/src/components/feed/EditFeedForm.tsx (1)
134-134: Consider optimizing form watching for better performance.Watching all form values triggers the debounced update logic on every change, which could impact performance with complex forms.
Consider watching only specific fields that trigger config updates, or use form state subscriptions for more granular control:
-const watchedValues = form.watch(); +// Watch only fields that affect config updates +const watchedValues = form.watch([ + 'name', 'description', 'enabled', 'pollingIntervalMs', + 'ingestionEnabled', 'ingestionSchedule', 'sources', + 'streamEnabled', 'streamTransforms', 'streamDistributors', + 'recaps', 'moderationApprovers', 'moderationBlacklist' +]);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (18)
apps/app/src/components/feed/EditFeedActions.tsx(1 hunks)apps/app/src/components/feed/EditFeedConfigSection.tsx(1 hunks)apps/app/src/components/feed/EditFeedForm.tsx(1 hunks)apps/app/src/components/feed/EditFeedHeader.tsx(1 hunks)apps/app/src/components/feed/EditFeedImageSection.tsx(1 hunks)apps/app/src/components/feed/EditFeedLoadingState.tsx(1 hunks)apps/app/src/components/feed/form/BasicFieldsSection.tsx(1 hunks)apps/app/src/components/feed/form/IngestionSection.tsx(1 hunks)apps/app/src/components/feed/form/ModerationSection.tsx(1 hunks)apps/app/src/components/feed/form/RecapsSection.tsx(1 hunks)apps/app/src/components/feed/form/SourcesSection.tsx(1 hunks)apps/app/src/components/feed/form/StreamSettingsSection.tsx(1 hunks)apps/app/src/components/feed/form/index.ts(1 hunks)apps/app/src/components/feed/form/types.ts(1 hunks)apps/app/src/hooks/use-edit-feed.ts(1 hunks)apps/app/src/routeTree.gen.ts(4 hunks)apps/app/src/routes/_layout/edit/feed.$feedId.tsx(1 hunks)package.json(1 hunks)
🧰 Additional context used
🪛 GitHub Actions: CI
apps/app/src/routeTree.gen.ts
[warning] 1-1: Prettier formatting check failed. Run 'prettier --write' to fix code style issues.
🔇 Additional comments (15)
apps/app/src/components/feed/form/types.ts (2)
9-25: LGTM! Well-structured Zod schema with appropriate validation.The schema design is solid with:
- Required field validations for name and description
- Reasonable minimum polling interval (1000ms)
- Proper flattening for form handling
- Good use of optional fields for complex configurations
The structure will work well with react-hook-form integration.
27-27: Type inference implementation is correct.Using
z.inferto generate TypeScript types from the schema ensures type safety and consistency between validation and TypeScript types.package.json (1)
15-15: Useful addition for frontend-focused development.The new
dev:frontendscript provides a convenient way to run only the frontend app using Turbo's filtering capability, which aligns well with the modular approach of the codebase.apps/app/src/components/feed/EditFeedHeader.tsx (2)
3-6: Clean and well-typed interface.The props interface is clear and properly typed with appropriate nullability for
currentConfig.
12-14: Good fallback logic for displaying feed name.The fallback from
currentConfig?.nametofeedIdensures the header always displays meaningful information, even when the config is still loading or unavailable.apps/app/src/components/feed/form/index.ts (1)
1-7: Well-organized barrel exports for form components.The index file provides a clean API for importing form components and types, following the standard barrel export pattern. The organization makes it easy to import multiple related components.
apps/app/src/components/feed/EditFeedActions.tsx (2)
26-40: Excellent UX implementation for save button.The button properly handles loading states with visual feedback and disabling during mutations, providing clear user feedback.
41-56: Good implementation of destructive action button.The delete button uses appropriate styling variants and follows the same loading state pattern as the save button, maintaining consistency.
apps/app/src/components/feed/EditFeedImageSection.tsx (1)
11-36: LGTM! Clean implementation with good UX.The component properly handles image upload callbacks and provides user feedback through toast notifications. The conditional rendering of the initial image URL is handled correctly.
apps/app/src/components/feed/form/IngestionSection.tsx (1)
20-72: Excellent form implementation with good UX patterns.The component correctly:
- Uses
memofor performance optimization- Implements conditional disabling of the schedule input based on the enabled checkbox
- Provides clear labels and descriptions
- Follows react-hook-form best practices
The placeholder cron expression and description help users understand the expected format.
apps/app/src/components/feed/EditFeedLoadingState.tsx (1)
27-46: LGTM! Clear error and not-found state handling.The error and not-found states are handled appropriately with clear messaging and consistent UI patterns.
apps/app/src/routeTree.gen.ts (1)
1-672: Address Prettier formatting issue in auto-generated file.This file is auto-generated by TanStack Router and shouldn't be manually modified. The pipeline failure indicates a Prettier formatting conflict. Consider:
- Adding this file to
.prettierignoreto exclude it from formatting checks- Configuring the TanStack Router generator to match your project's formatting rules
- Running
prettier --writeon this file if it needs to be formatted#!/bin/bash # Check if the file is already in .prettierignore if [ -f .prettierignore ]; then echo "Current .prettierignore contents:" cat .prettierignore echo "" echo "Checking if routeTree.gen.ts is ignored:" grep -E "(routeTree\.gen\.ts|\.gen\.ts)" .prettierignore || echo "Not found in .prettierignore" else echo ".prettierignore file not found" fiapps/app/src/components/feed/form/ModerationSection.tsx (3)
26-34: Excellent state synchronization logic.The
useEffecthooks properly handle external form value changes (like form resets) while preventing infinite loops. The dependency arrays are correctly configured.Also applies to: 70-78
46-53: Robust comma-separated value parsing.The parsing logic correctly:
- Splits on commas
- Trims whitespace
- Filters out empty values
- Maintains the existing object structure
Also applies to: 90-97
105-121: Well-structured component with clear organization.The main component is properly memoized and provides clear section structure with helpful descriptions for users.
| name: "", | ||
| enabled: false, | ||
| schedule: "", | ||
| timezone: "UTC", |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Timezone is hardcoded without UI control.
The timezone is set to "UTC" but there's no form field to modify it. Users in different time zones might need to set their local timezone for accurate scheduling.
Would you like me to add a timezone selection field to the form?
🤖 Prompt for AI Agents
In apps/app/src/components/feed/form/RecapsSection.tsx at line 43, the timezone
is hardcoded to "UTC" without any UI control for users to change it. To fix
this, add a timezone selection field to the form that allows users to pick their
local timezone. Update the form state and submission logic to use the selected
timezone instead of the fixed "UTC" value.
| <FormLabel>Schedule (Cron)</FormLabel> | ||
| <FormControl> | ||
| <Input placeholder="0 0 * * 0" {...field} /> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add validation and helper text for cron expressions.
The cron expression field lacks validation and the placeholder might not be helpful for users unfamiliar with cron syntax. Consider adding validation and more descriptive help text.
<FormItem>
<FormLabel>Schedule (Cron)</FormLabel>
<FormControl>
- <Input placeholder="0 0 * * 0" {...field} />
+ <Input placeholder="0 0 * * 0 (Weekly on Sunday at midnight)" {...field} />
</FormControl>
+ <FormDescription>
+ Enter a cron expression for the recap schedule
+ </FormDescription>
<FormMessage />
</FormItem>🤖 Prompt for AI Agents
In apps/app/src/components/feed/form/RecapsSection.tsx around lines 86 to 88,
the cron expression input lacks validation and helpful guidance. Add validation
logic to ensure the entered value is a valid cron expression, and include
descriptive helper text below the input to explain the expected format and
provide examples. This will improve user experience and prevent invalid input.
| <FormControl> | ||
| <Textarea | ||
| placeholder='{"key": "value"}' | ||
| className="min-h-[100px] flex h-auto w-full rounded border border-neutral-400 bg-white px-2.5 py-2 text-base shadow-sm transition-colors placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:cursor-not-allowed disabled:opacity-50 md:text-base dark:border-neutral-800 dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-300" |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Extract the repeated textarea className to a shared constant or CSS module.
The same lengthy className string for textareas is repeated multiple times across components.
Consider creating a shared constant or utility class for consistent textarea styling across the application. This could be placed in a shared styles file or UI component library.
Also applies to: 139-139
🤖 Prompt for AI Agents
In apps/app/src/components/feed/form/StreamSettingsSection.tsx at lines 83 and
139, the textarea className string is repeated verbatim. Extract this long
className string into a shared constant or a CSS module in a common styles or UI
library file. Replace the repeated className strings with a reference to this
shared constant or CSS class to ensure consistent styling and easier
maintenance.
There was a problem hiding this comment.
Actionable comments posted: 3
🔭 Outside diff range comments (1)
apps/app/src/components/feed/form/SourcesSection.tsx (1)
1-175: Fix Prettier formatting issues before merging.The pipeline indicates formatting issues that need to be resolved.
Run the following command to fix the formatting:
prettier --write apps/app/src/components/feed/form/SourcesSection.tsx
♻️ Duplicate comments (1)
apps/app/src/components/feed/form/SourcesSection.tsx (1)
51-102: Excellent implementation of search entry management.The component properly handles dynamic addition/removal of search entries with good UX considerations (preventing removal of the last entry). This addresses the previous review feedback about missing search entry controls.
🧹 Nitpick comments (1)
apps/app/src/components/feed/form/SourcesSection.tsx (1)
38-44: Improve unique ID generation to prevent potential collisions.The current ID generation using
Date.now()andMath.random()may not be unique if multiple entries are added rapidly, potentially causing React key conflicts.Consider using a more robust approach:
- searchFieldArray.append({ - searchId: `search-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, - type: "", - query: "", - }) + searchFieldArray.append({ + searchId: crypto.randomUUID(), + type: "", + query: "", + })Alternatively, create a utility function to avoid code duplication:
const generateUniqueId = () => crypto.randomUUID();
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
apps/app/rsbuild.config.ts(1 hunks)apps/app/src/components/feed/EditFeedConfigSection.tsx(1 hunks)apps/app/src/components/feed/EditFeedForm.tsx(1 hunks)apps/app/src/components/feed/form/BasicFieldsSection.tsx(1 hunks)apps/app/src/components/feed/form/RecapsSection.tsx(1 hunks)apps/app/src/components/feed/form/SourcesSection.tsx(1 hunks)apps/app/src/components/feed/form/StreamSettingsSection.tsx(1 hunks)apps/app/src/components/ui/textarea.tsx(1 hunks)apps/app/src/hooks/use-edit-feed.ts(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- apps/app/src/components/feed/EditFeedForm.tsx
- apps/app/src/components/feed/form/StreamSettingsSection.tsx
🚧 Files skipped from review as they are similar to previous changes (4)
- apps/app/src/components/feed/form/RecapsSection.tsx
- apps/app/src/hooks/use-edit-feed.ts
- apps/app/src/components/feed/EditFeedConfigSection.tsx
- apps/app/src/components/feed/form/BasicFieldsSection.tsx
🧰 Additional context used
🪛 GitHub Actions: CI
apps/app/src/components/feed/form/SourcesSection.tsx
[error] 1-1: Prettier formatting check failed. Run 'prettier --write' to fix code style issues.
🔇 Additional comments (4)
apps/app/src/components/feed/form/SourcesSection.tsx (4)
1-13: LGTM - Clean import structure.The imports are well-organized and include all necessary dependencies for the component functionality.
15-28: LGTM - Proper component structure with performance optimization.The component interface is well-defined and the use of
memois appropriate for preventing unnecessary re-renders in form contexts.
105-117: Well-designed component interface with proper abstraction.The interface properly abstracts the field array operations and maintains good separation of concerns by only accepting the necessary methods.
141-171: Solid implementation of dynamic source management.The component properly handles source rendering with good visual hierarchy and integrates well with the nested SearchEntries component.
apps/app/rsbuild.config.ts
Outdated
| target: "https://staging.curate.press", | ||
| // target: "http://localhost:3000", |
There was a problem hiding this comment.
🛠️ Refactor suggestion
🧩 Verification correct
Consider the impact of switching development API target to staging.
This change redirects all local development API calls from localhost:3000 to the staging environment. While this might be necessary for testing the new feed editing features, it introduces several concerns:
- Network dependency: Developers now depend on staging availability for local development
- Data consistency: Different data between local and staging environments may cause confusion
- Team coordination: This affects all developers simultaneously
Consider these alternatives:
- Use environment variables to make this configurable per developer
- Create a separate configuration for feed editing development
- Ensure the local backend supports the new feed editing endpoints
Verify staging environment availability and consider making this configurable:
Consider this configuration improvement to make the target environment configurable:
server: {
port: 5173,
proxy: {
"/api": {
- target: "https://staging.curate.press",
- // target: "http://localhost:3000",
+ target: process.env.API_PROXY_TARGET || "http://localhost:3000",
secure: false,
changeOrigin: true,
ws: true,
},
},
},🏁 Script executed:
#!/bin/bash
# Description: Check staging environment availability and suggest configuration approach
# Test staging endpoint availability
echo "Testing staging environment availability..."
curl -s -o /dev/null -w "%{http_code}" "https://staging.curate.press/api/health" || echo "Staging environment check failed"
# Check if there are environment-specific configurations
echo "Checking for environment configuration patterns..."
rg -A 5 -B 5 "staging|localhost.*3000" --type ts --type jsLength of output: 3472
Consider the impact of switching development API target to staging.
This change redirects all local development API calls from localhost:3000 to the staging environment. While this might be necessary for testing the new feed editing features, it introduces several concerns:
- Network dependency: Developers now depend on staging availability for local development
- Data consistency: Different data between local and staging environments may cause confusion
- Team coordination: This affects all developers simultaneously
Consider these alternatives:
- Use environment variables to make this configurable per developer
- Create a separate configuration for feed editing development
- Ensure the local backend supports the new feed editing endpoints
Verify staging environment availability and consider making this configurable:
#!/bin/bash
# Description: Check staging environment availability and suggest configuration approach
# Test staging endpoint availability
echo "Testing staging environment availability..."
curl -s -o /dev/null -w "%{http_code}" "https://staging.curate.press/api/health" || echo "Staging environment check failed"
# Check if there are environment-specific configurations
echo "Checking for environment configuration patterns..."
rg -A 5 -B 5 "staging|localhost.*3000" --type ts --type jsConsider this configuration improvement to make the target environment configurable:
server: {
port: 5173,
proxy: {
"/api": {
- target: "https://staging.curate.press",
- // target: "http://localhost:3000",
+ target: process.env.API_PROXY_TARGET || "http://localhost:3000",
secure: false,
changeOrigin: true,
ws: true,
},
},
},🤖 Prompt for AI Agents
In apps/app/rsbuild.config.ts at lines 93-94, the API target is hardcoded to the
staging environment, which can cause network dependency and data consistency
issues for developers. Refactor the configuration to use environment variables
to select the API target dynamically, allowing each developer to configure their
preferred backend (localhost or staging). Implement a fallback to localhost if
no environment variable is set, and ensure the local backend supports the
necessary feed editing endpoints.
| "flex min-h-[60px] w-full rounded-md border border-neutral-200 bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:border-neutral-800 dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-300", | ||
| "min-h-[100px] flex h-auto w-full rounded border border-neutral-400 bg-white px-2.5 py-2 text-base shadow-sm transition-colors placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:cursor-not-allowed disabled:opacity-50 md:text-base dark:border-neutral-800 dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-300", |
There was a problem hiding this comment.
Remove conflicting CSS classes to prevent unpredictable styling behavior.
The code currently applies two sets of conflicting CSS classes to the textarea element. This creates conflicts for properties like min-h-[60px] vs min-h-[100px], bg-transparent vs bg-white, px-3 vs px-2.5, etc. While the last applied class typically wins, this approach is error-prone and can lead to unpredictable styling behavior.
Remove the old classes and keep only the updated styling:
className={cn(
- "flex min-h-[60px] w-full rounded-md border border-neutral-200 bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:border-neutral-800 dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-300",
"min-h-[100px] flex h-auto w-full rounded border border-neutral-400 bg-white px-2.5 py-2 text-base shadow-sm transition-colors placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:cursor-not-allowed disabled:opacity-50 md:text-base dark:border-neutral-800 dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-300",
className,
)}📝 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.
| "flex min-h-[60px] w-full rounded-md border border-neutral-200 bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:border-neutral-800 dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-300", | |
| "min-h-[100px] flex h-auto w-full rounded border border-neutral-400 bg-white px-2.5 py-2 text-base shadow-sm transition-colors placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:cursor-not-allowed disabled:opacity-50 md:text-base dark:border-neutral-800 dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-300", | |
| className={cn( | |
| "min-h-[100px] flex h-auto w-full rounded border border-neutral-400 bg-white px-2.5 py-2 text-base shadow-sm transition-colors placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:cursor-not-allowed disabled:opacity-50 md:text-base dark:border-neutral-800 dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-300", | |
| className, | |
| )} |
🤖 Prompt for AI Agents
In apps/app/src/components/ui/textarea.tsx around lines 12 to 13, there are two
conflicting sets of CSS classes applied to the textarea element causing
unpredictable styling. Remove the first set of classes including "flex
min-h-[60px] w-full rounded-md border border-neutral-200 bg-transparent px-3
py-2 text-base shadow-sm placeholder:text-neutral-500 focus-visible:outline-none
focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:cursor-not-allowed
disabled:opacity-50 md:text-sm dark:border-neutral-800
dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-300" and keep
only the second set of updated classes to ensure consistent styling.
| onClick={() => | ||
| appendSource({ | ||
| plugin: "", | ||
| config: {}, | ||
| search: [ | ||
| { searchId: `search-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, type: "", query: "" }, | ||
| ], | ||
| }) | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Extract duplicate ID generation logic to prevent code duplication.
This ID generation logic is duplicated from the SearchEntries component and has the same potential uniqueness issues.
Extract the ID generation to a utility function and use it consistently:
const generateUniqueId = () => crypto.randomUUID();
// Then use it here:
onClick={() =>
appendSource({
plugin: "",
config: {},
search: [
{ searchId: generateUniqueId(), type: "", query: "" },
],
})
}🤖 Prompt for AI Agents
In apps/app/src/components/feed/form/SourcesSection.tsx around lines 126 to 134,
the searchId generation logic is duplicated and may cause uniqueness issues.
Extract this ID generation into a shared utility function, for example
generateUniqueId using crypto.randomUUID(), and replace the inline ID creation
with a call to this function to ensure consistent and reliable unique IDs across
components.
…o feat/new-feed-edit
* add feed conflicts and lowercase id * Adds "my feeds" on profile (#204) * feat: update my feeds tab on profile page * feat: update tabs to be routes * fix: double scrollbar * comment unused files in overview tab * fix: revert rsbuild * fmt * fix: add routegen to prettier ignore * clean up, server side --------- Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * Resolve shot's comments (#205) * feat: add name and tag validation to create * feat: add no activity data in activity tab * add coming soon sections for profile page * feat: clicking on leaderboard feed hashtag will redirect to that feed * fix: keeps name on start when disable feed names collapse * fix: rsbuild * fix: add routegen to prettier ignore * fix: add ability to navigate to collapsed feeds in leaderboard * add ability to expand or collapse all * fix: rsbuild * adjustments * nitpicks --------- Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * feat: new feed edit (#198) * feat: update the feed editor * feat: improve performance, and fix bugs * feat: revert local development change * add routegen to pretttier ignore * fix: resolve code rabbit comments * fix some nitpick comments * fix prettier and build config * formats * merge --------- Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * debounce * nitpicks * adds processing step plan * fix auth * Feat: recent content (#208) * Feat: add recent feeds * feat: add recent content to the main feed page * fmt * Update apps/app/src/hooks/use-rss-feed.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * nitpicks --------- Co-authored-by: Elliot Braem <elliot@everything.dev> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * atuh flow * delete old requests --------- Co-authored-by: Zeeshan Ahmad <itexpert120@outlook.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
* add feed conflicts and lowercase id * Adds "my feeds" on profile (#204) * feat: update my feeds tab on profile page * feat: update tabs to be routes * fix: double scrollbar * comment unused files in overview tab * fix: revert rsbuild * fmt * fix: add routegen to prettier ignore * clean up, server side --------- Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * Resolve shot's comments (#205) * feat: add name and tag validation to create * feat: add no activity data in activity tab * add coming soon sections for profile page * feat: clicking on leaderboard feed hashtag will redirect to that feed * fix: keeps name on start when disable feed names collapse * fix: rsbuild * fix: add routegen to prettier ignore * fix: add ability to navigate to collapsed feeds in leaderboard * add ability to expand or collapse all * fix: rsbuild * adjustments * nitpicks --------- Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * feat: new feed edit (#198) * feat: update the feed editor * feat: improve performance, and fix bugs * feat: revert local development change * add routegen to pretttier ignore * fix: resolve code rabbit comments * fix some nitpick comments * fix prettier and build config * formats * merge --------- Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * debounce * nitpicks * adds processing step plan * fix auth * Feat: recent content (#208) * Feat: add recent feeds * feat: add recent content to the main feed page * fmt * Update apps/app/src/hooks/use-rss-feed.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * nitpicks --------- Co-authored-by: Elliot Braem <elliot@everything.dev> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * atuh flow * delete old requests * feat: Distributor badges link to relevant source (#210) * add _tabs * init with a rss feed * xml * fmt --------- Co-authored-by: Zeeshan Ahmad <itexpert120@outlook.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
* add feed conflicts and lowercase id * Adds "my feeds" on profile (#204) * feat: update my feeds tab on profile page * feat: update tabs to be routes * fix: double scrollbar * comment unused files in overview tab * fix: revert rsbuild * fmt * fix: add routegen to prettier ignore * clean up, server side --------- Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * Resolve shot's comments (#205) * feat: add name and tag validation to create * feat: add no activity data in activity tab * add coming soon sections for profile page * feat: clicking on leaderboard feed hashtag will redirect to that feed * fix: keeps name on start when disable feed names collapse * fix: rsbuild * fix: add routegen to prettier ignore * fix: add ability to navigate to collapsed feeds in leaderboard * add ability to expand or collapse all * fix: rsbuild * adjustments * nitpicks --------- Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * feat: new feed edit (#198) * feat: update the feed editor * feat: improve performance, and fix bugs * feat: revert local development change * add routegen to pretttier ignore * fix: resolve code rabbit comments * fix some nitpick comments * fix prettier and build config * formats * merge --------- Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * debounce * nitpicks * adds processing step plan * fix auth * Feat: recent content (#208) * Feat: add recent feeds * feat: add recent content to the main feed page * fmt * Update apps/app/src/hooks/use-rss-feed.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * nitpicks --------- Co-authored-by: Elliot Braem <elliot@everything.dev> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * atuh flow * delete old requests * feat: Distributor badges link to relevant source (#210) * add _tabs * init with a rss feed * xml * fmt * append --------- Co-authored-by: Zeeshan Ahmad <itexpert120@outlook.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
* add feed conflicts and lowercase id * Adds "my feeds" on profile (#204) * feat: update my feeds tab on profile page * feat: update tabs to be routes * fix: double scrollbar * comment unused files in overview tab * fix: revert rsbuild * fmt * fix: add routegen to prettier ignore * clean up, server side --------- Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * Resolve shot's comments (#205) * feat: add name and tag validation to create * feat: add no activity data in activity tab * add coming soon sections for profile page * feat: clicking on leaderboard feed hashtag will redirect to that feed * fix: keeps name on start when disable feed names collapse * fix: rsbuild * fix: add routegen to prettier ignore * fix: add ability to navigate to collapsed feeds in leaderboard * add ability to expand or collapse all * fix: rsbuild * adjustments * nitpicks --------- Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * feat: new feed edit (#198) * feat: update the feed editor * feat: improve performance, and fix bugs * feat: revert local development change * add routegen to pretttier ignore * fix: resolve code rabbit comments * fix some nitpick comments * fix prettier and build config * formats * merge --------- Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * debounce * nitpicks * adds processing step plan * fix auth * Feat: recent content (#208) * Feat: add recent feeds * feat: add recent content to the main feed page * fmt * Update apps/app/src/hooks/use-rss-feed.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * nitpicks --------- Co-authored-by: Elliot Braem <elliot@everything.dev> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * atuh flow * delete old requests * feat: Distributor badges link to relevant source (#210) * add _tabs * init with a rss feed * xml * fmt * append * add service url * adjustments * fix --------- Co-authored-by: Zeeshan Ahmad <itexpert120@outlook.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
2 participants
Updated the feed editor to be more user friendly
Screencast.From.2025-06-24.17-31-27.mp4
Summary by CodeRabbit
New Features
Improvements
Chores