feat: add Persian language support (#6786) #6791
Conversation
* Added Persian (فارسی) to the list of supported languages. * Updated the TranslationStore to include Persian translations. * Extended TLanguage type to include "fa".
|
|
WalkthroughThis pull request expands internationalization support by adding Persian ("fa") language to the system. The updates include adding a new entry in the supported language array, new locale JSON files that provide Persian translations for UI components, and updates to the language type definitions and the translation import method. No existing language configurations or public API declarations have been modified. Changes
Sequence Diagram(s)sequenceDiagram
participant User as U
participant UI as UserInterface
participant TS as TranslationStore
participant FS as FileSystem
U->>UI: Selects Persian language ("fa")
UI->>TS: Calls importLanguageFile("fa")
TS->>FS: Loads "fa/translations.json"
FS-->>TS: Returns translation data
TS-->>UI: Supplies translations to update UI
Possibly related PRs
Suggested labels
Poem
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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: 0
🧹 Nitpick comments (3)
packages/i18n/src/locales/fa/core.json (3)
76-82: Unique Code Field: Placeholder Localization CheckThe unique code block provides a clear label and supporting text. However, the placeholder value "gets-sets-flys" is not localized. Please confirm if this is intentional or if it should be updated to a Persian equivalent.
83-91: General Auth Strings: Consistency and Contextual AccuracyThe remaining common authentication strings (e.g., account prompts and login actions) are clear. Note the use of "Plane" in the "new_to_plane" key; if "Plane" is a proper noun or brand name it can remain as is, otherwise consider localizing for full language consistency.
171-172: File Termination: Verify Trailing ContentThe JSON file correctly closes with the "}" on line 171; however, an extra line marker ("172") appears immediately after. Please ensure that no unintended text is included in the final JSON file.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
packages/i18n/src/constants/language.ts(1 hunks)packages/i18n/src/locales/fa/core.json(1 hunks)packages/i18n/src/locales/fa/translations.json(1 hunks)packages/i18n/src/store/index.ts(1 hunks)packages/i18n/src/types/language.ts(1 hunks)
🔇 Additional comments (13)
packages/i18n/src/constants/language.ts (1)
7-7: LGTM: Persian language addition is properly implementedThe Persian language entry is added correctly with appropriate native language label "فارسی" and ISO 639-1 language code "fa".
packages/i18n/src/types/language.ts (1)
1-1: LGTM: Type definition updated correctlyThe TLanguage type definition has been properly extended to include the "fa" language code for Persian.
packages/i18n/src/store/index.ts (1)
166-169: LGTM: TranslationStore updated correctly for Persian languageThe case for Persian language has been properly added to the importLanguageFile method, and the indentation for the Korean language case has been adjusted for consistency.
packages/i18n/src/locales/fa/translations.json (1)
1-334: LGTM: Comprehensive Persian translations providedThe Persian translations file is well-structured and contains a comprehensive set of key-value pairs for UI elements. The translations appear to be professionally done in Persian with proper character encoding.
I notice the file includes pluralization support (line 333) which follows the correct format for internationalization.
packages/i18n/src/locales/fa/core.json (9)
1-20: Sidebar Translations: Clear and Well-StructuredThe "sidebar" section is organized and the translation keys accurately describe the corresponding menu items. Ensure that these terms stay aligned with any future UI adjustments.
24-31: Email Field Translations: Accurate and ConsistentThe email field’s label, placeholder, and error messages are clearly defined and appropriately localized. No issues noted in this segment.
32-75: Password Translations: Comprehensive and ConsistentThe translations for the password section—including labels, placeholders, nested keys (such as for confirming, current, and new passwords), error messages, and toast notifications—are detailed and well-structured. Please verify that these messages align with the UI validation logic and user expectations for password complexity requirements.
92-115: Sign-Up Section: Clear Instructions & Verification of Empty SubheaderThe sign-up block—with its header text, step-by-step instructions, and error messaging—is well-organized. The empty sub_header for the "email" step may be intentional; please double-check if additional guidance should be provided.
116-134: Sign-In Section: Adequate and Consistent LocalizationThe sign-in section mirrors the sign-up structure effectively and offers clear messaging for various authentication methods. The application of empty sub_headers (where applicable) appears consistent.
135-153: Forgot Password Section: Detailed and User-FriendlyThis segment provides thorough instructions and feedback for recovering an account. The error messages and descriptive texts should contribute to a solid user experience during the password recovery process.
154-157: Reset Password: Direct and Focused MessagingThe reset password block offers concise instructions to prompt users towards securing their account. Confirm that this text integrates seamlessly into the recovery flow.
158-161: Set Password Section: Clear Security CommunicationThe set password messages clearly communicate the importance of account security. Ensure that the tone and terminology remain consistent with other areas addressing password management.
162-170: Sign-Out Feedback: Simple and Effective Error MessagingThe error message for unsuccessful sign-out attempts is straightforward and aligns with the style of other feedback messages.
* Improved several Persian translation phrases for better clarity and consistency, including descriptions for account deactivation and error messages. * Added new translation keys for project views and toast notifications to enhance user experience in the Persian language.
* Added new translation keys for sidebar items including projects, pages, and workspace to improve user experience in the Persian language. * Updated existing translations for better clarity and consistency.
* Improved Persian translations for sidebar navigation, project views, and user notifications to enhance clarity and user experience. * Added new translation keys and updated existing ones for consistency across the application.
There was a problem hiding this comment.
Actionable comments posted: 21
🔭 Outside diff range comments (2)
web/core/components/analytics/custom-analytics/custom-analytics.tsx (1)
32-94: 🛠️ Refactor suggestionImplement a proper RTL context to support Persian language.
The current changes attempt to support Persian (RTL) language by hardcoding sidebar position, but this approach will break the layout for LTR languages. To properly support both RTL and LTR languages, you should implement a direction context.
Consider implementing an RTL context approach:
- Create a hook to detect the current language direction:
// useLanguageDirection.ts import { useTranslation } from 'react-i18next'; // or your i18n library export const useLanguageDirection = () => { const { i18n } = useTranslation(); const isRTL = i18n.language === 'fa' || i18n.dir() === 'rtl'; return { isRTL, direction: isRTL ? 'rtl' : 'ltr' }; };
- Use this hook in your component to apply conditional styling:
const { isRTL } = useLanguageDirection(); // Then use isRTL in your className and style conditionsThis way, the UI will adapt correctly based on the user's selected language.
🧰 Tools
🪛 Biome (1.9.4)
[error] 54-54: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
web/app/profile/sidebar.tsx (1)
3-74: 🛠️ Refactor suggestionAdd language direction detection for RTL support
To properly implement RTL support for Persian while maintaining LTR layout for other languages, you need to detect the current language direction. Consider adding a directional context or hook:
import { useEffect, useRef, useState } from "react"; import { observer } from "mobx-react"; import Link from "next/link"; import { usePathname } from "next/navigation"; // icons import { ChevronRight, + ChevronLeft, LogOut, MoveLeft, Plus, UserPlus, Activity, Bell, CircleUser, KeyRound, Settings2, } from "lucide-react"; // plane imports import { PROFILE_ACTION_LINKS } from "@plane/constants"; import { useOutsideClickDetector } from "@plane/hooks"; import { useTranslation } from "@plane/i18n"; import { TOAST_TYPE, Tooltip, setToast } from "@plane/ui"; // components import { SidebarNavItem } from "@/components/sidebar"; // constants // helpers import { cn } from "@/helpers/common.helper"; import { getFileURL } from "@/helpers/file.helper"; // hooks import { useAppTheme, useUser, useUserSettings, useWorkspace } from "@/hooks/store"; import { usePlatformOS } from "@/hooks/use-platform-os";Then, in your component:
// Add this line in your component to detect RTL languages const { i18n, t } = useTranslation(); const isRTL = i18n.language === 'fa' || i18n.language === 'ar'; // Add any other RTL languages
♻️ Duplicate comments (2)
web/core/components/account/auth-forms/email.tsx (1)
56-56:⚠️ Potential issueCheck if "border-led-500" is a valid CSS class.
The error state border has been changed from
border-red-500toborder-led-500. This appears to be either a typo or a reference to a custom color that might not be defined in the system.web/core/components/account/auth-forms/password.tsx (1)
131-131:⚠️ Potential issueCheck if "border-led-500" is a valid CSS class and margins adjusted for RTL.
The error state border has been changed from
border-red-500/50toborder-led-500/50, and margin positioning has been flipped fromml-autotomr-autofor RTL support.Also applies to: 137-137
🧹 Nitpick comments (28)
web/core/components/integration/github/single-user-select.tsx (1)
79-79: This change supports RTL layout for Persian language.Changing the avatar positioning from
left-0toright-0aligns with right-to-left (RTL) layout requirements for Persian language support. This adjustment helps maintain proper visual hierarchy in RTL reading contexts.For more comprehensive RTL support, consider implementing a directional framework or using CSS logical properties (like
inset-inline-startinstead ofleft/right) to automatically handle direction changes based on the current language setting rather than hardcoding directional values.web/core/components/page-views/workspace-dashboard.tsx (1)
76-76: Consider dynamic RTL/LTR positioning for language support.Changing the tour overlay positioning from
left-0toright-0aligns with supporting right-to-left (RTL) languages like Persian. However, this fixed positioning will affect all users regardless of their language preference.Consider implementing a dynamic approach that adjusts positioning based on the current language direction:
-<div className="fixed right-0 top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity"> +<div className={`fixed ${t('common.direction') === 'rtl' ? 'right-0' : 'left-0'} top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity`}>This ensures proper positioning for both LTR and RTL languages without affecting existing user experiences.
web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx (1)
73-73: Consider using RTL-aware positioning for better internationalization.The indicator position has been changed from right to left, which may be related to supporting right-to-left languages like Persian. However, this change will affect all users regardless of language direction.
For better internationalization support, consider using a direction-aware approach:
- <span className="absolute h-2 w-2 -left-0.5 -top-0.5 bg-custom-primary-100 rounded-full" /> + <span className={`absolute h-2 w-2 ${isRTL ? '-right-0.5' : '-left-0.5'} -top-0.5 bg-custom-primary-100 rounded-full`} />Where
isRTLcould be determined from the current language context or direction.Is this change part of RTL support for Persian language? If so, let's ensure it only affects RTL language users.
web/core/components/cycles/archived-cycles/header.tsx (1)
88-88: Adjusted margin class for RTL language support.The class has been changed from
"ml-auto"to"mr-auto"which is appropriate for supporting right-to-left languages like Persian. This change ensures proper alignment of the search component in RTL layouts.For more robust RTL support, consider using a conditional approach based on current language direction:
- "mr-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0", + "flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0 ${isRTL ? 'mr-auto' : 'ml-auto'}",This would make the direction logic explicit and maintainable as you add more RTL language support.
web/core/components/labels/create-update-label-inline.tsx (2)
154-154: Consider using a dynamic approach for RTL language supportThe change from
left-0toright-0for the Popover.Panel positioning supports RTL languages like Persian, which is good. However, this approach hardcodes the positioning regardless of the current language direction.Consider using a dynamic approach that adapts based on the current language direction:
- <Popover.Panel className="absolute right-0 top-full z-20 mt-3 w-screen max-w-xs px-2 sm:px-0"> + <Popover.Panel className={`absolute ${isRTL ? 'right-0' : 'left-0'} top-full z-20 mt-3 w-screen max-w-xs px-2 sm:px-0`}>You would need to add a utility or hook to determine if the current language is RTL:
// Example utility const isRTL = ['ar', 'fa', 'he', 'ur'].includes(currentLanguage);
206-206: Apply consistent RTL-friendly paddingChanging from
pl-8topr-8supports RTL languages like Persian, but similar to the Popover positioning, this hardcodes the padding direction regardless of the current language.Consider a dynamic approach for padding as well:
- {errors.name?.message && <p className="p-0.5 pr-8 text-sm text-red-500">{errors.name?.message}</p>} + {errors.name?.message && <p className={`p-0.5 ${isRTL ? 'pr-8' : 'pl-8'} text-sm text-red-500`}>{errors.name?.message}</p>}This ensures that your UI will respond correctly to both LTR and RTL languages without requiring separate style changes for each language addition.
web/core/components/pages/loaders/page-loader.tsx (1)
6-35: Consider using CSS logical properties for RTL support.While the current changes correctly implement RTL support for Persian, consider using CSS logical properties (e.g.,
margin-inline-start: autoinstead ofmr-auto) for more maintainable RTL support across the application.By using logical properties, you wouldn't need to explicitly change margin classes for RTL languages. The browser would automatically adjust based on the document's text direction.
- <div className="relative flex items-center gap-2 mr-auto"> + <div className="relative flex items-center gap-2" style={{ marginInlineStart: 'auto' }}>Or using Tailwind plugins that support logical properties:
- <div className="relative flex items-center gap-2 mr-auto"> + <div className="relative flex items-center gap-2 ms-auto">🧰 Tools
🪛 Biome (1.9.4)
[error] 7-7: Unexpected empty object pattern.
(lint/correctness/noEmptyPattern)
web/core/components/inbox/content/inbox-issue-mobile-header.tsx (1)
105-105: These margin adjustments support RTL layout for Persian language.The changes from
mr-2toml-2andml-autotomr-autoproperly adjust the component's layout to support right-to-left languages like Persian. This is appropriate for internationalization support.For future maintainability, consider using CSS logical properties like
margin-inline-startandmargin-inline-endwhich automatically adjust based on the text direction, rather than hardcodingml-andmr-classes. This would make the code more resilient to language direction changes without requiring manual updates.-<MoveRight className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200 ml-2" /> +<MoveRight className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200 ms-2" />-"w-4 h-4 flex-shrink-0 ml-2 my-auto", +"w-4 h-4 flex-shrink-0 ms-2 my-auto",-<div className="mr-auto"> +<div className="me-auto">Note: If you're using Tailwind CSS, you would need to ensure the logical property plugins are enabled or use appropriate RTL-aware utility classes.
Also applies to: 111-111, 138-138
web/app/invitations/page.tsx (1)
133-227: Consider using a conditional layout based on language directionWhile the current implementation works for supporting Persian, consider implementing a more dynamic approach that conditionally applies RTL or LTR styles based on the current language direction. This would make the codebase more maintainable as you add more languages in the future.
- <div className="absolute right-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-custom-border-200 sm:right-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-l-[0.5px] md:right-1/3" /> + <div className={`absolute ${isRTL ? 'right-0' : 'left-0'} top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-custom-border-200 sm:${isRTL ? 'right-1/2' : 'left-1/2'} sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:${isRTL ? 'border-l-[0.5px]' : 'border-r-[0.5px]'} md:${isRTL ? 'right-1/3' : 'left-1/3'}`} />You can determine the direction with:
// Add near the top of the component const { t, i18n } = useTranslation(); const isRTL = i18n.language === "fa" || i18n.language === "ar"; // Add other RTL languages as neededweb/core/components/issues/peek-overview/view.tsx (1)
253-253: Border direction change to support RTL layoutChanging from
border-ltoborder-raligns with RTL layout requirements for Persian language support.For better maintainability, consider extracting these directional CSS properties into utility functions or CSS variables that can adapt based on the current language direction. This would make the RTL/LTR support more explicit and easier to maintain across the application.
- className={`h-full !w-[400px] flex-shrink-0 border-r border-custom-border-200 p-4 py-5 overflow-hidden vertical-scrollbar scrollbar-sm ${ + className={`h-full !w-[400px] flex-shrink-0 border-${isRTL ? 'r' : 'l'} border-custom-border-200 p-4 py-5 overflow-hidden vertical-scrollbar scrollbar-sm ${web/core/components/core/theme/color-picker-input.tsx (3)
84-84: Consider using CSS logical properties for RTL language support.Changing the position from
right-4toleft-4supports RTL languages like Persian, but this hard-coded approach might not be optimal. For better internationalization, consider using CSS logical properties instead.-<div className="absolute left-4 top-2.5"> +<div className={`absolute ${isRTL ? 'left-4' : 'right-4'} top-2.5`}>This approach would require adding a context or prop to determine if the current language is RTL.
116-118: Invert the panel positioning logic for RTL support.The panel positioning logic has been flipped to support RTL layouts, but similar to the previous comment, this hard-coded approach might not handle language switching gracefully.
<Popover.Panel className={`absolute bottom-8 z-20 mt-1 max-w-xs px-2 sm:px-0 ${ - position === "right" ? "right-0" : "left-0" + (position === "right") !== isRTL ? "right-0" : "left-0" }`} >This would adapt the positioning based on both the position prop and the current language direction.
25-27: Consider adding an RTL indicator to improve internationalization support.The component could benefit from explicit RTL awareness to properly handle bidirectional text interfaces.
type Props = { name: keyof IUserTheme; position?: "left" | "right"; + isRTL?: boolean; watch: UseFormWatch<any>; setValue: UseFormSetValue<any>; control: Control<IUserTheme, any>; error: FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined; register: UseFormRegister<any>; };Then destructure this property with a default value in the component:
- const { name, position = "left", watch, setValue, error, control } = props; + const { name, position = "left", isRTL = false, watch, setValue, error, control } = props;web/convert-margin-padding.js (6)
4-11: Misleading function name and commentThe function name
convertClassesand comment "Convert margin/padding classes" don't match the actual implementation. The function is swapping chevron directions (likely for RTL language support), not modifying margin or padding classes.-// Function to convert margin/padding classes -function convertClasses(content) { +// Function to swap chevron directions for RTL support +function swapChevronDirections(content) { return content - // Convert margin classes\ + // Swap ChevronLeft and ChevronRight using temporary placeholder .replace(/ChevronLeft/g, 'ChevronRigh2t') .replace(/ChevronRight/g, 'ChevronLeft') .replace(/ChevronRigh2t/g, 'ChevronRight') }
8-10: Use a safer temporary placeholderUsing 'ChevronRigh2t' as a temporary placeholder is risky as it's very similar to the actual string and could potentially exist in the codebase already.
- .replace(/ChevronLeft/g, 'ChevronRigh2t') - .replace(/ChevronRight/g, 'ChevronLeft') - .replace(/ChevronRigh2t/g, 'ChevronRight') + .replace(/ChevronLeft/g, '__TEMP_CHEVRON_LEFT__') + .replace(/ChevronRight/g, 'ChevronLeft') + .replace(/__TEMP_CHEVRON_LEFT__/g, 'ChevronRight')
19-19: Update function call if name is changedIf you rename the
convertClassesfunction as suggested above, don't forget to update this function call.- content = convertClasses(content); + content = swapChevronDirections(content);
31-44: Add filtering for excluded directoriesThe current implementation will process all directories including potentially unwanted ones like
node_modules,dist, etc.function walkDir(dir) { const files = fs.readdirSync(dir); + + // Skip directories that shouldn't be processed + const excludeDirs = ['node_modules', 'dist', 'build', '.git']; + if (excludeDirs.includes(path.basename(dir))) { + return; + } files.forEach(file => { const filePath = path.join(dir, file); const stat = fs.statSync(filePath); if (stat.isDirectory()) { walkDir(filePath); } else if (file.endsWith('.tsx') || file.endsWith('.jsx')) { processFile(filePath); } }); }
46-47: Add script configuration optionsConsider adding command-line arguments to make the script more flexible (e.g., specify directories, dry run mode).
-// Start processing from the current directory -walkDir('.'); +// Parse command line arguments +const args = process.argv.slice(2); +const startDir = args[0] || '.'; +const dryRun = args.includes('--dry-run'); + +if (dryRun) { + console.log('Running in dry-run mode - no files will be modified'); + // Modify processFile to not write changes in dry-run mode +} + +console.log(`Starting to process files from: ${startDir}`); +walkDir(startDir); +console.log('Done processing files');
1-47: Consider async file operations for better performanceThe script uses synchronous file operations which can be slow for large codebases. Consider using async versions for better performance.
Here's a partial example of how this could be implemented:
const fs = require('fs').promises; const path = require('path'); // Async function to process a file async function processFile(filePath) { try { let content = await fs.readFile(filePath, 'utf8'); const originalContent = content; content = swapChevronDirections(content); if (content !== originalContent) { await fs.writeFile(filePath, content); console.log(`Converted classes in: ${filePath}`); } } catch (error) { console.error(`Error processing ${filePath}:`, error); } } // And so on for walkDir...web/core/components/issues/issue-layouts/list/block.tsx (6)
8-8: Consider using conditional icon imports for RTL languagesYou've changed the import from
ChevronRighttoChevronLeftto support Persian language (RTL). While this works, it might affect the UX for LTR languages where users expect right-pointing chevrons for expansion.Consider conditionally importing the appropriate icon based on the current language direction:
-import { ChevronLeft } from "lucide-react"; +import { ChevronLeft, ChevronRight } from "lucide-react"; +import { useLanguageDirection } from "@/hooks/use-language-direction"; // Create this hookThen use the appropriate icon based on the language direction:
const { isRTL } = useLanguageDirection(); // ... {isRTL ? <ChevronLeft /> : <ChevronRight />}
212-212: Consider using dynamic positioning based on language directionYou've changed the positioning from
left-1toright-1to support RTL languages like Persian. This works for RTL but might create inconsistency for LTR languages.Consider using a dynamic approach that adjusts based on the current language direction:
-<div className="flex-shrink-0 grid place-items-center w-3.5 absolute right-1"> +<div className={`flex-shrink-0 grid place-items-center w-3.5 absolute ${isRTL ? 'right-1' : 'left-1'}`}>This ensures the UI remains consistent for both RTL and LTR language users.
249-255: Update chevron usage to support both LTR and RTL layoutsYou've changed the chevron from right to left for RTL support. While this works, it would be better to dynamically select the appropriate chevron and adjust rotation logic based on language direction.
-<ChevronLeft - className={cn("size-4", { - "rotate-90": isExpanded, - })} - strokeWidth={2.5} -/> +{isRTL ? ( + <ChevronLeft + className={cn("size-4", { + "rotate-90": isExpanded, + })} + strokeWidth={2.5} + /> +) : ( + <ChevronRight + className={cn("size-4", { + "-rotate-90": isExpanded, + })} + strokeWidth={2.5} + /> +)}This ensures proper visual cues for both RTL and LTR language users.
259-260: Use dynamic positioning for animation pulse based on language directionThe position of the animation pulse has been changed from
left-0toright-0for RTL languages. This should be dynamically determined based on the current language direction.-<div className="absolute right-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" /> +<div className={`absolute ${isRTL ? 'right-0' : 'left-0'} top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20`} />
279-279: Set margins dynamically based on language directionThe margin has been changed from
ml-2tomr-2for RTL support. This should also be determined dynamically based on language direction.-<IssueStats issueId={issue.id} className="mr-2 font-medium text-custom-text-350" /> +<IssueStats issueId={issue.id} className={`${isRTL ? 'mr-2' : 'ml-2'} font-medium text-custom-text-350`} />
1-334: Consider implementing a comprehensive RTL support strategyWhile your changes support Persian (RTL) language by adjusting UI element positioning, a more robust approach would be to implement a systematic RTL support strategy.
I recommend:
- Create a hook or context for managing language direction:
// hooks/use-language-direction.ts import { useContext } from 'react'; import { LanguageContext } from '@/contexts/language-context'; export const useLanguageDirection = () => { const { language } = useContext(LanguageContext); const rtlLanguages = ['fa', 'ar', 'he']; // Persian, Arabic, Hebrew const isRTL = rtlLanguages.includes(language); return { isRTL }; };
- Consider using CSS logical properties where possible:
- margin-left: 8px; + margin-inline-start: 8px; - left: 0; + inset-inline-start: 0;
- For complex layouts, use the
dirattribute to set the text direction:<div dir={isRTL ? 'rtl' : 'ltr'}>...</div>This approach will make your codebase more maintainable when supporting multiple languages with different text directions.
web/core/components/common/new-empty-state.tsx (1)
14-15: Consider renaming "direction" property in future refactorsWhile the implementation is correct, for maintainability the property name
directionmight be slightly confusing when supporting RTL languages. In a future refactor, consider renaming topositionto better reflect that it indicates whether the comic box should appear on the left or right side of the button.web/core/components/issues/issue-layouts/quick-add/root.tsx (1)
162-162: Consider using optional chaining for nested property accessThe current code uses multiple checks (
errors && errors?.name && errors?.name?.message). For better readability and consistency, consider using optional chaining throughout.- errors && errors?.name && errors?.name?.message ? `border-led-500 bg-red-500/10` : `` + errors?.name?.message ? `border-red-500 bg-red-500/10` : ``🧰 Tools
🪛 Biome (1.9.4)
[error] 162-162: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
web/app/profile/sidebar.tsx (1)
1-290: Consider using RTL context provider for language direction consistencyRather than adding RTL detection logic in each component, consider implementing a global RTL context provider that makes the current language direction available throughout the application.
This would simplify the conditional styling and make RTL/LTR handling more consistent:
// Create a direction context (in a separate file) const DirectionContext = createContext({ isRTL: false }); export const DirectionProvider = ({ children }) => { const { i18n } = useTranslation(); const isRTL = ['fa', 'ar', 'he'].includes(i18n.language); return ( <DirectionContext.Provider value={{ isRTL }}> {children} </DirectionContext.Provider> ); }; export const useDirection = () => useContext(DirectionContext);Then in your components:
const { isRTL } = useDirection();This also allows you to apply global RTL styles like
dir="rtl"at the root level.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (207)
packages/ui/src/button/toggle-switch.tsx(1 hunks)web/.gitignore(1 hunks)web/app/[workspaceSlug]/(projects)/analytics/page.tsx(1 hunks)web/app/[workspaceSlug]/(projects)/extended-project-sidebar.tsx(2 hunks)web/app/[workspaceSlug]/(projects)/extended-sidebar.tsx(1 hunks)web/app/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx(3 hunks)web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx(1 hunks)web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx(2 hunks)web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx(3 hunks)web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/header.tsx(1 hunks)web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx(4 hunks)web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx(1 hunks)web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx(2 hunks)web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx(3 hunks)web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/(with-sidebar)/layout.tsx(1 hunks)web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx(1 hunks)web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx(3 hunks)web/app/[workspaceSlug]/(projects)/settings/(with-sidebar)/layout.tsx(1 hunks)web/app/[workspaceSlug]/(projects)/settings/(with-sidebar)/members/page.tsx(1 hunks)web/app/[workspaceSlug]/(projects)/sidebar.tsx(1 hunks)web/app/accounts/forgot-password/page.tsx(1 hunks)web/app/accounts/reset-password/page.tsx(4 hunks)web/app/accounts/set-password/page.tsx(4 hunks)web/app/create-workspace/page.tsx(1 hunks)web/app/installations/[provider]/page.tsx(1 hunks)web/app/invitations/page.tsx(2 hunks)web/app/layout.tsx(1 hunks)web/app/profile/security/page.tsx(3 hunks)web/app/profile/sidebar.tsx(8 hunks)web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx(2 hunks)web/ce/components/pages/editor/ai/ask-pi-menu.tsx(1 hunks)web/ce/components/pages/editor/ai/menu.tsx(4 hunks)web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx(1 hunks)web/ce/components/projects/mobile-header.tsx(1 hunks)web/ce/components/workspace/sidebar/extended-sidebar-item.tsx(1 hunks)web/ce/components/workspace/sidebar/sidebar-item.tsx(1 hunks)web/ce/components/workspace/upgrade/one-plan-upgrade.tsx(1 hunks)web/ce/components/workspace/upgrade/paid-plans-upgrade-modal.tsx(2 hunks)web/ce/components/workspace/upgrade/pro-plan-upgrade.tsx(2 hunks)web/convert-margin-padding.js(1 hunks)web/core/components/account/auth-forms/auth-banner.tsx(1 hunks)web/core/components/account/auth-forms/email.tsx(1 hunks)web/core/components/account/auth-forms/forgot-password-popover.tsx(2 hunks)web/core/components/account/auth-forms/password.tsx(4 hunks)web/core/components/account/auth-forms/unique-code.tsx(2 hunks)web/core/components/account/deactivate-account-modal.tsx(1 hunks)web/core/components/analytics/custom-analytics/custom-analytics.tsx(1 hunks)web/core/components/analytics/custom-analytics/sidebar/projects-list.tsx(1 hunks)web/core/components/analytics/custom-analytics/table.tsx(2 hunks)web/core/components/analytics/project-modal/main-content.tsx(1 hunks)web/core/components/analytics/project-modal/modal.tsx(1 hunks)web/core/components/analytics/scope-and-demand/demand.tsx(1 hunks)web/core/components/analytics/scope-and-demand/leaderboard.tsx(1 hunks)web/core/components/api-token/modal/generated-token-details.tsx(1 hunks)web/core/components/api-token/token-list-item.tsx(2 hunks)web/core/components/automation/select-month-modal.tsx(2 hunks)web/core/components/common/filters/created-by.tsx(1 hunks)web/core/components/common/latest-feature-block.tsx(2 hunks)web/core/components/common/logo-spinner.tsx(1 hunks)web/core/components/common/new-empty-state.tsx(3 hunks)web/core/components/core/content-overflow-HOC.tsx(1 hunks)web/core/components/core/filters/date-filter-modal.tsx(1 hunks)web/core/components/core/image-picker-popover.tsx(4 hunks)web/core/components/core/modals/bulk-delete-issues-modal.tsx(1 hunks)web/core/components/core/modals/existing-issues-list-modal.tsx(2 hunks)web/core/components/core/modals/user-image-upload-modal.tsx(1 hunks)web/core/components/core/modals/workspace-image-upload-modal.tsx(1 hunks)web/core/components/core/theme/color-picker-input.tsx(2 hunks)web/core/components/core/theme/theme-switch.tsx(2 hunks)web/core/components/cycles/analytics-sidebar/issue-progress.tsx(1 hunks)web/core/components/cycles/analytics-sidebar/sidebar-header.tsx(2 hunks)web/core/components/cycles/archived-cycles/header.tsx(1 hunks)web/core/components/cycles/cycle-peek-overview.tsx(1 hunks)web/core/components/cycles/cycles-view-header.tsx(1 hunks)web/core/components/cycles/list/cycle-list-group-header.tsx(1 hunks)web/core/components/cycles/list/cycle-list-project-group-header.tsx(3 hunks)web/core/components/dashboard/widgets/issue-panels/issues-list.tsx(1 hunks)web/core/components/dashboard/widgets/issue-panels/tabs-list.tsx(1 hunks)web/core/components/dashboard/widgets/loaders/issues-by-state-group.tsx(1 hunks)web/core/components/dashboard/widgets/overview-stats.tsx(2 hunks)web/core/components/dropdowns/priority.tsx(7 hunks)web/core/components/editor/embeds/mentions/user.tsx(1 hunks)web/core/components/editor/lite-text-editor/toolbar.tsx(2 hunks)web/core/components/editor/rich-text-editor/rich-text-editor.tsx(1 hunks)web/core/components/editor/rich-text-editor/rich-text-read-only-editor.tsx(1 hunks)web/core/components/editor/sticky-editor/color-palette.tsx(1 hunks)web/core/components/empty-state/comic-box-button.tsx(3 hunks)web/core/components/estimates/create/modal.tsx(2 hunks)web/core/components/estimates/points/create.tsx(2 hunks)web/core/components/estimates/points/update.tsx(2 hunks)web/core/components/exporter/guide.tsx(2 hunks)web/core/components/gantt-chart/blocks/block-row-list.tsx(1 hunks)web/core/components/gantt-chart/blocks/block-row.tsx(1 hunks)web/core/components/gantt-chart/chart/header.tsx(1 hunks)web/core/components/gantt-chart/chart/views/month.tsx(2 hunks)web/core/components/gantt-chart/chart/views/quarter.tsx(2 hunks)web/core/components/gantt-chart/chart/views/week.tsx(1 hunks)web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx(2 hunks)web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx(2 hunks)web/core/components/gantt-chart/helpers/draggable.tsx(1 hunks)web/core/components/gantt-chart/sidebar/issues/block.tsx(2 hunks)web/core/components/gantt-chart/sidebar/issues/sidebar.tsx(1 hunks)web/core/components/gantt-chart/sidebar/modules/block.tsx(1 hunks)web/core/components/gantt-chart/sidebar/modules/sidebar.tsx(1 hunks)web/core/components/gantt-chart/sidebar/root.tsx(1 hunks)web/core/components/global/timezone-select.tsx(1 hunks)web/core/components/home/root.tsx(1 hunks)web/core/components/home/widgets/empty-states/no-projects.tsx(1 hunks)web/core/components/home/widgets/manage/widget-item-drag-handle.tsx(1 hunks)web/core/components/home/widgets/manage/widget-item.tsx(1 hunks)web/core/components/inbox/content/inbox-issue-header.tsx(1 hunks)web/core/components/inbox/content/inbox-issue-mobile-header.tsx(2 hunks)web/core/components/inbox/inbox-filter/filters/labels.tsx(1 hunks)web/core/components/inbox/inbox-filter/filters/members.tsx(1 hunks)web/core/components/inbox/inbox-filter/filters/state.tsx(1 hunks)web/core/components/inbox/modals/select-duplicate.tsx(1 hunks)web/core/components/inbox/sidebar/inbox-list-item.tsx(1 hunks)web/core/components/inbox/sidebar/root.tsx(2 hunks)web/core/components/integration/github/single-user-select.tsx(1 hunks)web/core/components/issues/attachment/attachment-item-list.tsx(1 hunks)web/core/components/issues/attachment/attachment-list-item.tsx(1 hunks)web/core/components/issues/attachment/attachment-list-upload-item.tsx(1 hunks)web/core/components/issues/bulk-operations/upgrade-banner.tsx(1 hunks)web/core/components/issues/issue-detail-widgets/relations/content.tsx(1 hunks)web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx(1 hunks)web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx(1 hunks)web/core/components/issues/issue-detail/issue-activity/comments/comment-block.tsx(2 hunks)web/core/components/issues/issue-detail/issue-activity/comments/comment-card.tsx(2 hunks)web/core/components/issues/issue-detail/label/label-list-item.tsx(1 hunks)web/core/components/issues/issue-detail/label/select/label-select.tsx(1 hunks)web/core/components/issues/issue-detail/root.tsx(1 hunks)web/core/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx(3 hunks)web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx(1 hunks)web/core/components/issues/issue-layouts/calendar/header.tsx(2 hunks)web/core/components/issues/issue-layouts/calendar/issue-block.tsx(1 hunks)web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx(1 hunks)web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx(1 hunks)web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx(1 hunks)web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx(1 hunks)web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx(1 hunks)web/core/components/issues/issue-layouts/filters/header/filters/module.tsx(1 hunks)web/core/components/issues/issue-layouts/filters/header/filters/project.tsx(1 hunks)web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx(1 hunks)web/core/components/issues/issue-layouts/filters/header/filters/state.tsx(1 hunks)web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx(1 hunks)web/core/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx(1 hunks)web/core/components/issues/issue-layouts/gantt/blocks.tsx(1 hunks)web/core/components/issues/issue-layouts/group-drag-overlay.tsx(1 hunks)web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx(1 hunks)web/core/components/issues/issue-layouts/kanban/block.tsx(1 hunks)web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx(1 hunks)web/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx(1 hunks)web/core/components/issues/issue-layouts/kanban/swimlanes.tsx(1 hunks)web/core/components/issues/issue-layouts/list/block.tsx(5 hunks)web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx(2 hunks)web/core/components/issues/issue-layouts/list/list-group.tsx(2 hunks)web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx(1 hunks)web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx(1 hunks)web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx(1 hunks)web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx(1 hunks)web/core/components/issues/issue-layouts/quick-add/root.tsx(1 hunks)web/core/components/issues/issue-layouts/roots/project-layout-root.tsx(1 hunks)web/core/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx(1 hunks)web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx(1 hunks)web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx(5 hunks)web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx(1 hunks)web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx(1 hunks)web/core/components/issues/issue-modal/components/description-editor.tsx(1 hunks)web/core/components/issues/parent-issues-list-modal.tsx(1 hunks)web/core/components/issues/peek-overview/view.tsx(2 hunks)web/core/components/issues/sub-issues/issue-list-item.tsx(3 hunks)web/core/components/issues/sub-issues/root.tsx(2 hunks)web/core/components/issues/title-input.tsx(1 hunks)web/core/components/issues/workspace-draft/root.tsx(1 hunks)web/core/components/labels/create-label-modal.tsx(2 hunks)web/core/components/labels/create-update-label-inline.tsx(2 hunks)web/core/components/labels/label-block/label-item-block.tsx(1 hunks)web/core/components/labels/label-block/label-name.tsx(1 hunks)web/core/components/labels/label-drag-n-drop-HOC.tsx(1 hunks)web/core/components/labels/project-setting-label-group.tsx(2 hunks)web/core/components/modules/analytics-sidebar/issue-progress.tsx(1 hunks)web/core/components/modules/analytics-sidebar/root.tsx(2 hunks)web/core/components/modules/archived-modules/header.tsx(1 hunks)web/core/components/modules/dropdowns/filters/lead.tsx(1 hunks)web/core/components/modules/dropdowns/filters/members.tsx(1 hunks)web/core/components/modules/gantt-chart/blocks.tsx(1 hunks)web/core/components/modules/module-card-item.tsx(1 hunks)web/core/components/modules/module-peek-overview.tsx(1 hunks)web/core/components/modules/module-view-header.tsx(1 hunks)web/core/components/onboarding/create-workspace.tsx(4 hunks)web/core/components/onboarding/header.tsx(1 hunks)web/core/components/onboarding/invite-members.tsx(3 hunks)web/core/components/onboarding/profile-setup.tsx(8 hunks)web/core/components/onboarding/switch-account-dropdown.tsx(2 hunks)web/core/components/onboarding/tour/root.tsx(1 hunks)web/core/components/onboarding/tour/sidebar.tsx(1 hunks)web/core/components/page-views/workspace-dashboard.tsx(1 hunks)web/core/components/pages/editor/editor-body.tsx(1 hunks)web/core/components/pages/editor/header/toolbar.tsx(2 hunks)web/core/components/pages/editor/summary/heading-components.tsx(2 hunks)web/core/components/pages/editor/title.tsx(2 hunks)web/core/components/pages/loaders/page-content-loader.tsx(2 hunks)web/core/components/pages/loaders/page-loader.tsx(2 hunks)web/core/components/pages/version/editor.tsx(1 hunks)web/core/components/pages/version/sidebar-root.tsx(1 hunks)web/core/components/profile/form.tsx(8 hunks)web/core/components/profile/notification/email-notification-form.tsx(1 hunks)
⛔ Files not processed due to max files limit (68)
- web/core/components/profile/sidebar.tsx
- web/core/components/project-states/state-item-title.tsx
- web/core/components/project/card.tsx
- web/core/components/project/confirm-project-member-remove.tsx
- web/core/components/project/create/common-attributes.tsx
- web/core/components/project/create/header.tsx
- web/core/components/project/dropdowns/filters/lead.tsx
- web/core/components/project/dropdowns/filters/members.tsx
- web/core/components/project/form.tsx
- web/core/components/project/member-list.tsx
- web/core/components/project/publish-project/modal.tsx
- web/core/components/project/search-projects.tsx
- web/core/components/project/send-project-invitation-modal.tsx
- web/core/components/project/settings/archive-project/selection.tsx
- web/core/components/project/settings/delete-project-section.tsx
- web/core/components/project/settings/features-list.tsx
- web/core/components/project/settings/member-columns.tsx
- web/core/components/stickies/action-bar.tsx
- web/core/components/stickies/modal/search.tsx
- web/core/components/stickies/modal/stickies.tsx
- web/core/components/stickies/sticky/sticky-item-drag-handle.tsx
- web/core/components/ui/empty-space.tsx
- web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
- web/core/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx
- web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
- web/core/components/ui/loader/settings/api-token.tsx
- web/core/components/ui/loader/settings/web-hook.tsx
- web/core/components/ui/markdown-to-component.tsx
- web/core/components/views/view-list-header.tsx
- web/core/components/web-hooks/form/individual-event-options.tsx
- web/core/components/web-hooks/form/secret-key.tsx
- web/core/components/workspace-notifications/notification-app-sidebar-option.tsx
- web/core/components/workspace-notifications/root.tsx
- web/core/components/workspace-notifications/sidebar/header/options/menu-option/menu-item.tsx
- web/core/components/workspace-notifications/sidebar/notification-card/item.tsx
- web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx
- web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/root.tsx
- web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
- web/core/components/workspace/confirm-workspace-member-remove.tsx
- web/core/components/workspace/create-workspace-form.tsx
- web/core/components/workspace/invite-modal/actions.tsx
- web/core/components/workspace/invite-modal/fields.tsx
- web/core/components/workspace/logo.tsx
- web/core/components/workspace/settings/member-columns.tsx
- web/core/components/workspace/settings/members-list.tsx
- web/core/components/workspace/settings/workspace-details.tsx
- web/core/components/workspace/sidebar/dropdown-item.tsx
- web/core/components/workspace/sidebar/dropdown.tsx
- web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
- web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-drag-handle.tsx
- web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx
- web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
- web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
- web/core/components/workspace/sidebar/help-section.tsx
- web/core/components/workspace/sidebar/project-navigation.tsx
- web/core/components/workspace/sidebar/projects-list-item.tsx
- web/core/components/workspace/sidebar/projects-list.tsx
- web/core/components/workspace/sidebar/user-menu-item.tsx
- web/core/components/workspace/sidebar/workspace-menu-header.tsx
- web/core/components/workspace/sidebar/workspace-menu-item.tsx
- web/core/components/workspace/sidebar/workspace-menu.tsx
- web/core/components/workspace/views/header.tsx
- web/core/components/workspace/views/quick-action.tsx
- web/core/components/workspace/views/view-list-item.tsx
- web/core/layouts/auth-layout/workspace-wrapper.tsx
- web/core/lib/n-progress/AppProgressBar.tsx
- web/package.json
- web/styles/globals.css
✅ Files skipped from review due to trivial changes (144)
- web/core/components/editor/rich-text-editor/rich-text-read-only-editor.tsx
- web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
- web/core/components/gantt-chart/blocks/block-row-list.tsx
- web/core/components/editor/sticky-editor/color-palette.tsx
- web/core/components/issues/attachment/attachment-item-list.tsx
- web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/(with-sidebar)/layout.tsx
- web/core/components/common/logo-spinner.tsx
- web/core/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
- web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
- web/core/components/account/deactivate-account-modal.tsx
- web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx
- web/core/components/home/widgets/manage/widget-item.tsx
- web/core/components/inbox/sidebar/inbox-list-item.tsx
- web/core/components/analytics/scope-and-demand/leaderboard.tsx
- web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx
- web/core/components/issues/attachment/attachment-list-upload-item.tsx
- web/ce/components/workspace/sidebar/sidebar-item.tsx
- web/core/components/issues/title-input.tsx
- web/core/components/issues/issue-layouts/calendar/issue-block.tsx
- web/core/components/issues/issue-layouts/filters/header/filters/module.tsx
- web/app/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
- web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx
- web/core/components/onboarding/header.tsx
- web/core/components/home/widgets/empty-states/no-projects.tsx
- web/core/components/modules/dropdowns/filters/members.tsx
- web/ce/components/projects/mobile-header.tsx
- web/core/components/core/content-overflow-HOC.tsx
- web/core/components/pages/version/sidebar-root.tsx
- web/core/components/core/modals/user-image-upload-modal.tsx
- web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx
- web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx
- web/core/components/analytics/custom-analytics/sidebar/projects-list.tsx
- web/core/components/labels/label-block/label-name.tsx
- web/core/components/issues/issue-detail/issue-activity/comments/comment-block.tsx
- web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/header.tsx
- web/core/components/analytics/project-modal/main-content.tsx
- web/core/components/issues/bulk-operations/upgrade-banner.tsx
- web/core/components/api-token/modal/generated-token-details.tsx
- web/core/components/onboarding/tour/sidebar.tsx
- web/app/installations/[provider]/page.tsx
- web/core/components/pages/editor/summary/heading-components.tsx
- web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx
- web/core/components/labels/create-label-modal.tsx
- web/core/components/gantt-chart/sidebar/modules/block.tsx
- web/core/components/dashboard/widgets/issue-panels/issues-list.tsx
- web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx
- web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx
- web/core/components/issues/issue-layouts/kanban/swimlanes.tsx
- web/core/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
- web/core/components/modules/analytics-sidebar/issue-progress.tsx
- web/ce/components/workspace/upgrade/one-plan-upgrade.tsx
- web/core/components/inbox/inbox-filter/filters/state.tsx
- web/core/components/cycles/list/cycle-list-group-header.tsx
- web/core/components/issues/issue-layouts/filters/header/filters/project.tsx
- web/core/components/issues/issue-layouts/filters/header/filters/state.tsx
- web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
- web/core/components/issues/issue-layouts/group-drag-overlay.tsx
- web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx
- web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
- web/app/accounts/reset-password/page.tsx
- web/app/[workspaceSlug]/(projects)/settings/(with-sidebar)/members/page.tsx
- web/core/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
- web/core/components/modules/module-card-item.tsx
- web/core/components/inbox/inbox-filter/filters/labels.tsx
- web/core/components/core/filters/date-filter-modal.tsx
- web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
- web/core/components/issues/issue-detail/issue-activity/comments/comment-card.tsx
- web/core/components/pages/version/editor.tsx
- web/core/components/gantt-chart/chart/header.tsx
- web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx
- web/core/components/core/modals/existing-issues-list-modal.tsx
- web/core/components/issues/issue-layouts/calendar/header.tsx
- web/core/components/modules/dropdowns/filters/lead.tsx
- web/app/layout.tsx
- web/core/components/issues/issue-detail/label/select/label-select.tsx
- web/core/components/issues/issue-modal/components/description-editor.tsx
- web/core/components/core/image-picker-popover.tsx
- web/core/components/labels/label-drag-n-drop-HOC.tsx
- web/core/components/api-token/token-list-item.tsx
- web/core/components/common/latest-feature-block.tsx
- web/core/components/estimates/create/modal.tsx
- web/ce/components/pages/editor/ai/ask-pi-menu.tsx
- web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
- web/core/components/automation/select-month-modal.tsx
- web/core/components/profile/notification/email-notification-form.tsx
- web/core/components/cycles/analytics-sidebar/issue-progress.tsx
- web/core/components/cycles/cycles-view-header.tsx
- web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
- web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx
- web/core/components/gantt-chart/helpers/draggable.tsx
- web/core/components/inbox/inbox-filter/filters/members.tsx
- web/core/components/gantt-chart/sidebar/modules/sidebar.tsx
- web/core/components/issues/sub-issues/root.tsx
- web/core/components/exporter/guide.tsx
- web/app/profile/security/page.tsx
- web/core/components/modules/analytics-sidebar/root.tsx
- web/core/components/onboarding/switch-account-dropdown.tsx
- web/ce/components/workspace/upgrade/pro-plan-upgrade.tsx
- web/app/accounts/forgot-password/page.tsx
- web/core/components/issues/issue-layouts/roots/project-layout-root.tsx
- web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
- web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx
- web/core/components/core/modals/bulk-delete-issues-modal.tsx
- web/core/components/core/theme/theme-switch.tsx
- web/core/components/inbox/content/inbox-issue-header.tsx
- web/core/components/editor/lite-text-editor/toolbar.tsx
- web/core/components/gantt-chart/chart/views/month.tsx
- web/core/components/inbox/sidebar/root.tsx
- web/core/components/account/auth-forms/unique-code.tsx
- web/core/components/onboarding/invite-members.tsx
- web/core/components/pages/editor/header/toolbar.tsx
- web/core/components/dropdowns/priority.tsx
- web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
- web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
- web/app/accounts/set-password/page.tsx
- web/ce/components/workspace/upgrade/paid-plans-upgrade-modal.tsx
- web/core/components/onboarding/create-workspace.tsx
- web/core/components/common/filters/created-by.tsx
- web/core/components/pages/loaders/page-content-loader.tsx
- web/core/components/issues/attachment/attachment-list-item.tsx
- web/core/components/inbox/modals/select-duplicate.tsx
- web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx
- web/core/components/core/modals/workspace-image-upload-modal.tsx
- web/core/components/issues/issue-detail-widgets/relations/content.tsx
- web/core/components/home/root.tsx
- web/core/components/issues/parent-issues-list-modal.tsx
- web/core/components/issues/issue-detail/root.tsx
- web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx
- web/core/components/labels/project-setting-label-group.tsx
- web/core/components/modules/archived-modules/header.tsx
- web/core/components/editor/rich-text-editor/rich-text-editor.tsx
- web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
- web/core/components/issues/sub-issues/issue-list-item.tsx
- web/core/components/issues/issue-layouts/list/list-group.tsx
- web/core/components/issues/workspace-draft/root.tsx
- web/core/components/estimates/points/create.tsx
- web/core/components/analytics/custom-analytics/table.tsx
- web/app/[workspaceSlug]/(projects)/analytics/page.tsx
- web/core/components/pages/editor/editor-body.tsx
- web/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
- web/core/components/home/widgets/manage/widget-item-drag-handle.tsx
- web/core/components/estimates/points/update.tsx
- web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx
- web/core/components/issues/issue-layouts/gantt/blocks.tsx
🧰 Additional context used
🧬 Code Definitions (4)
web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx (1)
packages/utils/src/common.ts (1)
cn(7-7)
web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx (1)
packages/utils/src/common.ts (1)
cn(7-7)
web/core/components/issues/issue-layouts/list/block.tsx (1)
web/ce/components/issues/issue-layouts/issue-stats.tsx (1)
IssueStats(13-13)
web/core/components/gantt-chart/chart/views/quarter.tsx (1)
packages/utils/src/common.ts (1)
cn(7-7)
🪛 Biome (1.9.4)
web/core/components/issues/issue-layouts/quick-add/root.tsx
[error] 162-162: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🔇 Additional comments (88)
web/.gitignore (2)
4-4: Good addition: Ignoring the build directory (.next).
Adding.nextensures that Next.js build artifacts are not tracked in version control, which helps keep the repository clean and lean.
5-5: Proper inclusion of node_modules.
Includingnode_modulesin the ignore list is a standard best practice for Node.js projects, as it avoids tracking bulky dependency files.web/core/components/dashboard/widgets/issue-panels/tabs-list.tsx (1)
31-31: Great RTL support adjustment!The change from
left-[1px]toright-[1px]appears to be part of the Persian language support implementation, adjusting the positioning to accommodate right-to-left text direction. This change ensures the tab indicator is properly positioned in RTL layouts.web/core/components/analytics/scope-and-demand/demand.tsx (2)
37-37: LGTM: Properly supporting RTL for Persian languageChanging from
ml-1tomr-1ensures correct margin placement when the UI is displayed in right-to-left languages like Persian (فارسی).
45-45: LGTM: Ensuring correct progress bar direction for RTL languagesChanging the positioning from
left-0toright-0ensures the progress bar animation starts from the correct side when displayed in right-to-left languages like Persian.web/core/components/dashboard/widgets/loaders/issues-by-state-group.tsx (2)
10-10: Changed padding from left to right to support RTL languages.The padding class has been changed from
pl-6topr-6, which shifts the padding from the left side to the right side. This change supports right-to-left (RTL) layout for Persian language, which is the purpose of this PR.
14-14: Adjusted positioning to support RTL layout.The positioning has been changed from
left-1/2toright-1/2, which modifies the horizontal alignment of this element to support right-to-left (RTL) layout for Persian. This is consistent with the PR's goal of adding Persian language support.web/core/components/dashboard/widgets/overview-stats.tsx (3)
70-70: Changed border orientation for RTL language support.The CSS selector has been updated to use
border-linstead ofborder-r, changing the border from the right side to the left side of elements. This modification correctly supports right-to-left (RTL) layout for Persian language.
74-74: Updated border styling for larger screens to support RTL.The large screen border class has been modified from
lg:border-rtolg:border-lto maintain consistent RTL layout support across different screen sizes for Persian language.
89-89: Switched padding from left to right for RTL support.The padding classes have been changed from
pl-10 sm:pl-20 md:pl-20 lg:pl-20topr-10 sm:pr-20 md:pr-20 lg:pr-20, which shifts padding from the left side to the right side across all screen sizes. This change properly supports right-to-left (RTL) layout for Persian language.web/core/components/gantt-chart/chart/views/week.tsx (1)
16-16: CSS class changed for RTL supportThe change from
left-0toright-0properly aligns the chart container for right-to-left languages like Persian. This modification ensures that the Gantt chart displays correctly when the application language is set to Persian.web/core/components/gantt-chart/chart/views/quarter.tsx (2)
18-18: CSS class changed for RTL supportThe change from
left-0toright-0correctly aligns the chart container for right-to-left languages like Persian. This modification ensures that the Gantt chart displays properly when the application language is set to Persian.
42-42: Margin adjusted for RTL displayThe margin class change from
ml-2tomr-2correctly adjusts the spacing of the "Current" indicator for right-to-left text flow. This ensures proper visual presentation in Persian language mode.web/core/components/onboarding/tour/root.tsx (1)
140-140: RTL layout support added for close button positioningThe positioning of the close button has been adjusted from right to left alignment, supporting right-to-left (RTL) language layouts which aligns with adding Persian language support to the application.
web/core/components/onboarding/profile-setup.tsx (5)
322-324: RTL layout support added for user avatar placeholderThe positioning of the avatar placeholder has been adjusted from left to right alignment, supporting right-to-left (RTL) language layouts.
331-335: RTL layout support added for user avatar imageThe margin and positioning of the user avatar image have been updated to support right-to-left (RTL) language layouts.
345-345: RTL layout support added for form labelsThe positioning of the required field asterisk has been adjusted to appear on the right side of labels, which is more natural for RTL languages like Persian.
Also applies to: 380-380, 510-510, 541-541
437-437: RTL layout support added for password input fieldsThe padding in password input fields has been adjusted from right to left to accommodate the icon positioning change for RTL support.
Also applies to: 480-480
444-445: RTL layout support added for password visibility togglesThe eye icons for toggling password visibility have been repositioned from the right side to the left side of the input fields, maintaining proper alignment for RTL languages.
Also applies to: 449-450, 484-485, 489-490
web/core/components/account/auth-forms/auth-banner.tsx (1)
22-22: RTL direction support for Persian language.The class change from
ml-autotomr-autoflips the alignment of the close button, which is necessary for right-to-left (RTL) languages like Persian. This ensures proper layout when the application is used in Persian.web/core/components/pages/loaders/page-loader.tsx (2)
14-14: RTL direction support for Persian language.Changing from
ml-autotomr-autocorrectly adjusts the layout for right-to-left (RTL) languages like Persian, ensuring that loader components are properly aligned.
24-24: RTL direction support for Persian language.Similar to the previous change, this modification from
ml-autotomr-autoensures proper alignment in RTL languages like Persian for the mapped loader items.web/app/invitations/page.tsx (5)
137-137: Proper RTL support implemented for vertical borderThe change from
left-0toright-0andsm:border-r-[0.5px]tosm:border-l-[0.5px]correctly updates the border positioning to support right-to-left layout for Persian language.
139-141: RTL layout support for logo positioningThe positioning adjustment from
left-5toright-5andsm:left-1/2tosm:right-1/2properly aligns the logo for right-to-left languages.
146-146: Email display positioning corrected for RTLChanging from
right-4toleft-4andsm:right-16tosm:left-16appropriately repositions the user email display for right-to-left layout.
152-152: Invitation container padding adjusted for RTLThe padding adjustment from
sm:pr-[8.33%]tosm:pl-[8.33%]correctly maintains the layout spacing for right-to-left text flow.
212-212: Empty state container aligned for RTLThe positioning change from
left-0toright-0properly aligns the empty state container for right-to-left language display.web/core/components/issues/peek-overview/view.tsx (1)
115-116: UI layout adjustments for RTL language supportThe changes to positioning and borders (from right to left, and left to right) appear to be part of the Persian language support implementation, as Persian is a right-to-left (RTL) language. These modifications flip the UI layout direction appropriately.
Consider if these styles should be conditionally applied based on the current language direction rather than hardcoded, to ensure proper display for both LTR and RTL languages. This could be implemented using a context or hook that checks the current language direction.
web/core/components/editor/embeds/mentions/user.tsx (1)
74-74: Positioning change enhances RTL language supportThe change from
left-0toright-0properly aligns the user mention popup for right-to-left languages like Persian. This adjustment ensures that the popup appears on the right side, which feels more natural in RTL contexts.web/core/components/cycles/cycle-peek-overview.tsx (1)
48-48: Layout adjustment for RTL supportChanging the position from
right-0toleft-0correctly repositions the cycle peek sidebar for right-to-left language support. This ensures the component appears on the correct side of the screen when using Persian or other RTL languages.web/app/[workspaceSlug]/(projects)/sidebar.tsx (1)
57-57: Border and margin adjustments for RTL layoutThe changes from
border-rtoborder-landmd:ml-0tomd:mr-0correctly modify the sidebar's border and margin positioning to support right-to-left languages. This ensures proper visual hierarchy when the application is used in Persian.web/app/[workspaceSlug]/(projects)/settings/(with-sidebar)/layout.tsx (1)
38-38: Padding adjustment for RTL layoutChanging from
!pr-0to!pl-0correctly adjusts the padding direction to support right-to-left text flow in Persian. This ensures consistent spacing in the workspace settings layout when using RTL languages.web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx (1)
72-72: RTL layout adjustment for Persian language supportThe change from
border-rtoborder-landright-0toleft-0properly adjusts the sidebar positioning for right-to-left (RTL) languages like Persian. This ensures correct layout directionality when the application is displayed in Persian.web/core/components/modules/module-peek-overview.tsx (1)
44-44: RTL layout adjustment for Persian language supportThe changes to border and positioning classes (
border-ltoborder-randright-0toleft-0) provide proper RTL support for Persian language users. This ensures UI elements maintain proper positioning and borders in right-to-left reading contexts.web/core/components/modules/module-view-header.tsx (1)
112-112: RTL layout adjustment for Persian language supportChanging
ml-autotomr-autocorrectly adjusts the margin alignment for RTL languages. This ensures proper text alignment when displaying Persian content, which flows from right to left.web/core/components/gantt-chart/blocks/block-row.tsx (1)
87-87: RTL layout adjustment for Persian language supportThe changes from
border-r-0toborder-l-0appropriately adjust border styling for RTL language support. When displaying content in Persian, this ensures border styling appears correctly relative to the reading direction.Also applies to: 91-91
web/core/components/empty-state/comic-box-button.tsx (3)
34-34: Good RTL adaptation for Persian language support.Changing the placement from "right-end" to "left-end" is appropriate for supporting right-to-left languages like Persian. This ensures the popper element will be correctly positioned for RTL layouts.
56-58: Proper adjustment of positioning for RTL support.The changes from right-aligned to left-aligned classes for these elements properly accommodate Persian language support by ensuring the UI components are correctly positioned in RTL layouts.
71-71: Correct RTL adaptation for comic box pointer.The adjustments to the border and positioning properties ensure the pointer element will display correctly in RTL mode when used with Persian language.
web/core/components/gantt-chart/sidebar/root.tsx (3)
53-53: Good RTL adaptation for Gantt chart sidebar.Changing the sidebar positioning from left to right and adjusting the border from right to left properly supports RTL layouts for Persian language.
60-60: Well implemented padding adjustment for RTL.Changing padding from right to left (
pr-4topl-4) ensures proper text alignment in RTL mode when displaying Persian content.
67-67: Appropriate positioning change for selection component.Repositioning the MultipleSelectGroupAction from left to right side ensures proper alignment in RTL layouts for Persian language support.
web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx (3)
35-35: Good RTL adaptation for date display.Correctly repositioning the date indicator from right to left side supports proper RTL layout when displaying Persian dates.
47-47: Proper RTL adjustment for resize handle.Moving the resize handle from right to left ensures the resizing functionality works correctly in RTL mode for Persian language users.
51-54: Correct adaptation of visual indicators for RTL.The changes to the positioning classes and conditional styling ensure visual elements display properly in RTL layout when supporting Persian language.
web/app/[workspaceSlug]/(projects)/extended-sidebar.tsx (3)
107-107: Appropriate border adjustment for RTL support.Changing the border from right to left properly supports RTL layout for Persian language users.
111-113: Correct sidebar positioning for RTL layout.Adjusting the positioning from left-based to right-based ensures the sidebar appears on the correct side of the screen when using RTL languages like Persian.
106-114: Verify RTL transition direction.The transition directional property (
translate-x) was not updated despite the sidebar position changing from left to right. For RTL layouts, you should consider updating:- "translate-x-0 opacity-100 pointer-events-auto": extendedSidebarCollapsed, - "-translate-x-full opacity-0 pointer-events-none": !extendedSidebarCollapsed, + "translate-x-0 opacity-100 pointer-events-auto": extendedSidebarCollapsed, + "translate-x-full opacity-0 pointer-events-none": !extendedSidebarCollapsed,This ensures the sidebar slides in from the right direction in RTL mode.
web/app/[workspaceSlug]/(projects)/extended-project-sidebar.tsx (3)
111-111: Border adjustment for RTL support.The border has been changed from right to left to properly support right-to-left text direction for Persian language.
115-116: Positioning adjustment for RTL orientation.Correctly updated positioning attributes from
lefttorightto accommodate right-to-left (RTL) layout direction needed for Persian language support.
137-137: Margin alignment changed for RTL support.The margin has been changed from
ml-autotomr-autoto maintain proper alignment in right-to-left text direction.web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx (3)
35-35: Date string positioning updated for RTL support.The positioning of the date string div has been changed from
-left-36to-right-36to maintain proper alignment in RTL layout.
49-49: Resize handle positioning changed for RTL layout.The resize handle's positioning has been updated from
-left-1.5to-right-1.5to ensure proper interaction in right-to-left orientation.
53-56: Resizing indicator adjusted for RTL direction.The resizing indicator element's positioning and its conditional styling have been updated to work correctly in RTL layout.
web/core/components/gantt-chart/sidebar/issues/block.tsx (3)
44-45: Border adjustment for RTL layout support.The border classes have been updated from
border-r-0toborder-l-0to properly handle right-to-left layout direction.
51-51: Padding direction flipped for RTL support.Changed padding from right (
pr-4) to left (pl-4) to maintain proper spacing in right-to-left text direction.
61-61: Selection action positioning updated for RTL layout.The positioning of the multiple select entity action has been changed from
left-1toright-1to ensure proper alignment in RTL layout.web/app/create-workspace/page.tsx (4)
65-65: Divider orientation and positioning updated for RTL support.The border and positioning of the divider element have been adjusted to properly align in right-to-left layout direction.
67-67: Logo link positioning adjusted for RTL orientation.The logo link position has been changed from left to right alignment for proper display in right-to-left layout.
74-74: User email positioning changed for RTL layout.The user email display has been repositioned from the right side to the left side to maintain proper layout in RTL context.
78-78: Content padding direction flipped for RTL support.The main content padding has been changed from right-padding to left-padding to properly render content in right-to-left direction.
web/core/components/issues/issue-layouts/kanban/block.tsx (1)
86-86: Layout change for RTL language supportThe positioning of the quick actions menu has been moved from the right side to the left side of the container. This change is aligned with adding Persian language support, as Persian is a right-to-left (RTL) language that requires UI mirroring.
web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx (2)
99-99: Updated positioning for RTL language supportThe position of the
MultipleSelectGroupActioncomponent has been moved from left to right, which is consistent with the overall changes for supporting Persian as a right-to-left language.
122-122: Adjusted padding for RTL text layoutThe count element's padding has been changed from left padding to right padding, which properly aligns the count text when the application is displayed in right-to-left mode for Persian language support.
web/core/components/cycles/list/cycle-list-project-group-header.tsx (2)
5-5: Changed directional icon for RTL supportChanging from
ChevronRighttoChevronLeftis appropriate for Persian language support, as directional UI elements need to be mirrored in right-to-left languages.
40-40: Adjusted padding for RTL text layoutThe padding has been changed from left to right to ensure proper text spacing when displaying content in a right-to-left language like Persian.
web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx (3)
46-46: Updated positioning for RTL language supportThe sticky positioning has been changed from left to right, which is necessary for proper layout when displaying content in right-to-left languages like Persian.
49-49: Adjusted table header alignment for RTL supportThis class modification ensures that the table header is properly aligned when the application is displayed in right-to-left mode for Persian language support.
54-54: Repositioned selection controls for RTL layoutThe MultipleSelectGroupAction component's positioning and margin have been adjusted to align correctly in right-to-left layout required for Persian language support.
web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx (1)
255-257: Adjust positioning for RTL language support.The change from
left-1/2toright-1/2helps with RTL (right-to-left) language support for Persian, ensuring proper alignment of the delete area.web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx (1)
137-138: Adjust padding for RTL language support.The change from
pl-2(padding-left) topr-2(padding-right) properly adjusts the layout for RTL languages like Persian, ensuring correct spacing in the group-by card.web/ce/components/pages/editor/ai/menu.tsx (3)
4-4: Update icon import for RTL language support.Changing the import from
ChevronRighttoChevronLeftis appropriate for RTL language support.
176-181: Update chevron direction for RTL language support.Using
ChevronLeftinstead ofChevronRightprovides the correct visual indicator for RTL languages.
265-265: Adjust padding for RTL language support.Changing from
pl-[54.8px]topr-[54.8px]correctly adjusts the spacing for RTL languages.web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx (6)
6-6: Update icon import for RTL language support.Changing the import from
ChevronRighttoChevronLeftis appropriate for RTL language support.
259-260: Adjust positioning for RTL language support.Changing from
left-0toright-0correctly positions the element for RTL languages.
264-266: Update border styling for RTL language support.Switching from
border-r-[0.5px]toborder-l-[0.5px]correctly adjusts the border position for RTL layout.
289-303: Adjust checkbox positioning and margins for RTL language support.The changes to position (
right-1toleft-1) and margin (mr-1toml-1) properly align the selection checkbox for RTL languages.
332-338: Update chevron direction for RTL language support.Using
ChevronLeftinstead ofChevronRightprovides the correct visual indicator for RTL languages when expanding sub-issues.
348-349: Adjust text padding for RTL language support.Changing from
pr-4topl-4correctly adjusts the text padding for RTL languages.web/core/components/common/new-empty-state.tsx (3)
68-69: CSS adjustments for RTL support look goodThese changes correctly position the decorative dots based on comic box direction, supporting right-to-left languages like Persian. The code now uses right-side positioning when direction is "left" and vice versa.
Also applies to: 73-74
82-84: Comic box positioning properly flipped for RTLThe positioning of the comic box and its connecting triangle has been correctly updated to support right-to-left layout. The change from left-1/2 to right-1/2 and ml to mr classes ensures proper alignment in RTL languages.
Also applies to: 86-87
97-99: Left direction comic box correctly positionedThe comic box positioning for the left direction case has been properly updated to support RTL languages, with appropriate margin and flex direction adjustments.
web/core/components/labels/label-block/label-item-block.tsx (1)
68-68:❓ Verification inconclusive
Adjust positioning based on language direction rather than hardcoding.
The change from
right-2.5toleft-2.5appears to be part of adding support for Persian, which is a right-to-left (RTL) language. However, hardcoding the position toleft-2.5might affect the UI for left-to-right languages.Consider using conditional styling based on the current language direction:
- className={`absolute left-2.5 flex items-start gap-3.5 px-4 ${ + className={`absolute ${isRTL ? 'left-2.5' : 'right-2.5'} flex items-start gap-3.5 px-4 ${This would ensure correct positioning for both RTL and LTR languages.
🏁 Script executed:
#!/bin/bash # Search for RTL handling in the codebase echo "Searching for RTL handling mechanisms in the codebase..." rg -i "rtl|direction|right.to.left" --type ts --type tsx # Search for language detection/setting echo "Searching for language detection mechanisms..." rg -i "language|locale|direction" --type ts --type tsxLength of output: 397
#!/bin/bash # Re-run the search by explicitly adding the TSX file type to capture all relevant files echo "Searching for RTL handling keywords using explicit TSX file type..." rg --type-add 'tsx:*.tsx' -i "isRTL|rtl|direction" . echo "Searching for language detection patterns using explicit TSX file type..." rg --type-add 'tsx:*.tsx' -i "locale|language|direction" .Please run the above script to further verify if a conditional language direction mechanism (e.g., an
isRTLflag or similar) already exists in the codebase. If the output still returns no relevant matches, manually verify whether there is a centralized RTL handling solution; otherwise, consider integrating one.
Use Conditional RTL Positioning in Label Item Block
Instead of hardcoding
left-2.5, update the class to conditionally apply positioning based on the current language direction. For example:- className={`absolute left-2.5 flex items-start gap-3.5 px-4 ${ + className={`absolute ${isRTL ? 'left-2.5' : 'right-2.5'} flex items-start gap-3.5 px-4 ${Ensure that a robust RTL detection mechanism is in place. If one isn’t present, please consider adding it to support multiple languages and avoid UI issues for left-to-right layouts.
</details> <details> <summary>web/core/components/profile/form.tsx (1)</summary> `174-174`: **Element positioning flipped to support RTL layout.** The positioning of UI elements has been changed to better support right-to-left (RTL) languages like Persian (فارسی). The profile picture container is now positioned to the right, and the cover image picker is positioned to the left. Also applies to: 186-186, 197-197 </details> <details> <summary>web/core/components/account/auth-forms/forgot-password-popover.tsx (1)</summary> `14-14`: **Popover position adjusted for RTL layout.** The popover placement has been changed from "right-start" to "left-start" and margin adjusted from "ml-3" to "mr-3" to better support right-to-left languages like Persian. Also applies to: 41-41 </details> <details> <summary>web/core/components/account/auth-forms/password.tsx (1)</summary> `188-188`: **Icons and padding adjusted for RTL layout.** The positioning of icons and padding has been changed to support right-to-left languages: 1. Icons (eye, eye-off, x-circle) are now positioned on the left instead of right 2. Padding has been changed from right padding to left padding These changes improve the user experience for Persian language users. Also applies to: 206-206, 214-214, 219-219, 239-239, 245-245, 250-250 </details> <details> <summary>web/core/components/modules/gantt-chart/blocks.tsx (1)</summary> `59-59`: <details> <summary>❓ Verification inconclusive</summary> **Verify RTL layout consistency** Changing this div's position from `left-0` to `right-0` seems to be part of supporting right-to-left (RTL) layout for Persian language. However, the div at lines 60-65 still uses left-based positioning with `left: ${SIDEBAR_WIDTH}px`. For comprehensive RTL support, consider whether this element's positioning also needs adjustment. --- 🏁 Script executed: ```shell #!/bin/bash # Check how RTL direction is handled elsewhere in the codebase # Look for RTL direction implementations echo "Searching for RTL direction implementations..." rg -A 2 "direction.*rtl|dir=.rtl" --type tsx --type ts # Look for other instances of right-0 positioning that might be part of this RTL effort echo "Searching for right-0 positioning in similar components..." rg -A 2 "className=.*right-0.*top-0" --type tsxLength of output: 392
Action Required: Verify and Align RTL Layout Positioning
The change to using
right-0in line 59 appears intended to enable RTL support. However, the subsequent element (lines 60–65) still employs left-based positioning (usingleft: ${SIDEBAR_WIDTH}px), which could lead to inconsistent layouts for RTL languages like Persian. Since our initial automated search didn’t yield clear results (due to file type recognition issues), please perform a manual verification to confirm that the left-based styling is either appropriately adjusted in an RTL context or revised so all elements consistently support RTL layouts.
| @@ -41,7 +41,7 @@ export const TimezoneSelect: FC<TTimezoneSelect> = observer((props) => { | |||
| options={isDisabled || disabled ? [] : timezones} | |||
| onChange={onChange} | |||
| buttonClassName={cn(buttonClassName, { | |||
| "border-red-500": error, | |||
| "border-led-500": error, | |||
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Possible typo in error border class name.
The border class has been changed from what appears to be border-red-500 (standard error color) to border-led-500. This seems like a typo as "led" is not a standard color name in most CSS frameworks. If this is related to Persian language support, the connection isn't clear.
If led is a custom color variable that has been defined elsewhere for internationalization purposes, please clarify. Otherwise, consider reverting to border-red-500 or the correct color name.
🏁 Script executed:
#!/bin/bash
# Search for other instances of "border-led-500" to see if it's used elsewhere
echo "Searching for border-led-500 in the codebase..."
rg "border-led-500" --type ts --type tsx --type js --type jsx
echo -e "\nSearching for custom color definitions that might include 'led'..."
rg "led.*?:" --type ts --type tsx --type css --type scssLength of output: 436
Attention: Confirm the intended border color in timezone-select.tsx
- The file at
web/core/components/global/timezone-select.tsx(line 44) currently uses"border-led-500", which is non-standard. - A search for any other occurrence or custom definition of a color class containing
"led"yielded no results, suggesting it may be a typo. - If this was meant to be a custom value for internationalization or another purpose, please document its usage. Otherwise, consider reverting to the common
"border-red-500"for error states.
| @@ -32,7 +32,7 @@ export const PageEditorTitle: React.FC<Props> = observer((props) => { | |||
| }); | |||
|
|
|||
| return ( | |||
| <div className="relative w-full flex-shrink-0 md:pl-5 px-4"> | |||
| <div className="relative w-full flex-shrink-0 md:pr-5 px-4"> | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider dynamic RTL/LTR padding adjustment
The padding direction has been changed from md:pl-5 to md:pr-5 to support Persian (RTL) language. This works for RTL languages but might create inconsistencies for LTR languages.
Consider using dynamic padding based on the current language direction:
-<div className="relative w-full flex-shrink-0 md:pr-5 px-4">
+<div className={cn("relative w-full flex-shrink-0 px-4", {
+ "md:pr-5": isRTL, // for RTL languages like Persian
+ "md:pl-5": !isRTL // for LTR languages
+})}>This would require adding a context or hook to determine the current language direction (isRTL).
📝 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.
| <div className="relative w-full flex-shrink-0 md:pr-5 px-4"> | |
| <div className={cn("relative w-full flex-shrink-0 px-4", { | |
| "md:pr-5": isRTL, // for RTL languages like Persian | |
| "md:pl-5": !isRTL // for LTR languages | |
| })}> |
| @@ -65,7 +65,7 @@ export const PageEditorTitle: React.FC<Props> = observer((props) => { | |||
| /> | |||
| <div | |||
| className={cn( | |||
| "pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200 opacity-0 transition-opacity", | |||
| "pointer-events-none absolute bottom-1 left-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200 opacity-0 transition-opacity", | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider dynamic RTL/LTR positioning
The character counter positioning has been changed from right-1 to left-1 to accommodate Persian language's RTL layout. While this works for RTL languages, it creates inconsistency for LTR languages.
Consider dynamically setting the position based on the current language direction:
-"pointer-events-none absolute bottom-1 left-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200 opacity-0 transition-opacity",
+"pointer-events-none absolute bottom-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200 opacity-0 transition-opacity",
+isRTL ? "left-1" : "right-1",This would ensure the character counter appears in the correct position regardless of language direction.
📝 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.
| "pointer-events-none absolute bottom-1 left-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200 opacity-0 transition-opacity", | |
| "pointer-events-none absolute bottom-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200 opacity-0 transition-opacity", | |
| isRTL ? "left-1" : "right-1", |
| } flex w-full items-center justify-center rounded border-2 border-led-500/20 bg-custom-background-100 px-3 py-5 text-xs font-medium italic text-red-500 ${ | ||
| isDragOverDelete ? "bg-red-500 opacity-70 blur-2xl" : "" | ||
| } transition duration-300`} |
There was a problem hiding this comment.
Fix incorrect CSS class name.
There appears to be a typo in the border color class. You've changed it from border-red-500/20 to border-led-500/20. The color "led" doesn't exist in standard Tailwind CSS.
- } flex w-full items-center justify-center rounded border-2 border-led-500/20 bg-custom-background-100 px-3 py-5 text-xs font-medium italic text-red-500 ${
+ } flex w-full items-center justify-center rounded border-2 border-red-500/20 bg-custom-background-100 px-3 py-5 text-xs font-medium italic text-red-500 ${📝 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 w-full items-center justify-center rounded border-2 border-led-500/20 bg-custom-background-100 px-3 py-5 text-xs font-medium italic text-red-500 ${ | |
| isDragOverDelete ? "bg-red-500 opacity-70 blur-2xl" : "" | |
| } transition duration-300`} | |
| } flex w-full items-center justify-center rounded border-2 border-red-500/20 bg-custom-background-100 px-3 py-5 text-xs font-medium italic text-red-500 ${ | |
| isDragOverDelete ? "bg-red-500 opacity-70 blur-2xl" : "" | |
| } transition duration-300`} |
| !isProjectLevel | ||
| ? "absolute bottom-0 right-0 top-0 h-full max-w-[250px] flex-shrink-0 sm:max-w-full md:relative" | ||
| ? "absolute bottom-0 left-0 top-0 h-full max-w-[250px] flex-shrink-0 sm:max-w-full md:relative" | ||
| : "" | ||
| )} | ||
| style={workspaceAnalyticsSidebarCollapsed ? { right: `-${window?.innerWidth || 0}px` } : {}} |
There was a problem hiding this comment.
Fix sidebar collapse animation for RTL layouts.
The sidebar has been moved to the left side, but the collapse animation still uses right positioning, which will cause incorrect animation behavior for RTL layouts.
Update the collapse animation to use the appropriate side based on layout direction:
- style={workspaceAnalyticsSidebarCollapsed ? { right: `-${window?.innerWidth || 0}px` } : {}}
+ style={workspaceAnalyticsSidebarCollapsed
+ ? (isRTL
+ ? { left: `-${window?.innerWidth || 0}px` }
+ : { right: `-${window?.innerWidth || 0}px` })
+ : {}}📝 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.
| style={workspaceAnalyticsSidebarCollapsed ? { right: `-${window?.innerWidth || 0}px` } : {}} | |
| style={workspaceAnalyticsSidebarCollapsed | |
| ? (isRTL | |
| ? { left: `-${window?.innerWidth || 0}px` } | |
| : { right: `-${window?.innerWidth || 0}px` }) | |
| : {}} |
| @@ -213,7 +213,7 @@ export const ProfileLayoutSidebar = observer(() => { | |||
| {workspace?.logo_url && workspace.logo_url !== "" ? ( | |||
| <img | |||
| src={getFileURL(workspace.logo_url)} | |||
| className="absolute left-0 top-0 h-full w-full rounded object-cover" | |||
| className="absolute right-0 top-0 h-full w-full rounded object-cover" | |||
There was a problem hiding this comment.
Logo positioning should adapt to language direction
Workspace logo positioning has been changed from left-0 to right-0. This should be conditional for proper multilingual support:
- className="absolute right-0 top-0 h-full w-full rounded object-cover"
+ className={`absolute ${isRTL ? 'right-0' : 'left-0'} top-0 h-full w-full rounded object-cover`}📝 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.
| className="absolute right-0 top-0 h-full w-full rounded object-cover" | |
| className={`absolute ${isRTL ? 'right-0' : 'left-0'} top-0 h-full w-full rounded object-cover`} |
| @@ -188,7 +188,7 @@ export const ProfileLayoutSidebar = observer(() => { | |||
| <div | |||
| className={cn("vertical-scrollbar scrollbar-xs mt-2 px-4 h-full space-y-1.5 overflow-y-auto", { | |||
| "scrollbar-sm": !sidebarCollapsed, | |||
| "ml-2.5 px-1": sidebarCollapsed, | |||
| "mr-2.5 px-1": sidebarCollapsed, | |||
There was a problem hiding this comment.
Scrollbar margins should adapt to language direction
The scrollbar margin has been changed from ml-2.5 px-1 to mr-2.5 px-1. For proper RTL support, this should be conditional:
- "mr-2.5 px-1": sidebarCollapsed,
+ [isRTL ? "mr-2.5" : "ml-2.5", "px-1"].join(" "): sidebarCollapsed,📝 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.
| "mr-2.5 px-1": sidebarCollapsed, | |
| [isRTL ? "mr-2.5" : "ml-2.5", "px-1"].join(" "): sidebarCollapsed, |
| className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-l border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300 md:relative | ||
| ${sidebarCollapsed ? "-ml-[250px]" : ""} | ||
| sm:${sidebarCollapsed ? "-ml-[250px]" : ""} | ||
| md:ml-0 ${sidebarCollapsed ? "w-[70px]" : "w-[250px]"} | ||
| md:mr-0 ${sidebarCollapsed ? "w-[70px]" : "w-[250px]"} |
There was a problem hiding this comment.
Directional styles should adapt to the current language
The sidebar border and positioning have been unconditionally changed from border-r to border-l and margins from ml- to mr- to support RTL layout for Persian. This will affect all users regardless of their language preference.
Consider using a conditional approach to apply directional styles:
- className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-l border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300 md:relative
+ className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col ${isRTL ? 'border-l' : 'border-r'} border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300 md:relative
${sidebarCollapsed ? "-ml-[250px]" : ""}
sm:${sidebarCollapsed ? "-ml-[250px]" : ""}
- md:mr-0 ${sidebarCollapsed ? "w-[70px]" : "w-[250px]"}
+ md:${isRTL ? 'mr-0' : 'ml-0'} ${sidebarCollapsed ? "w-[70px]" : "w-[250px]"}📝 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.
| className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-l border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300 md:relative | |
| ${sidebarCollapsed ? "-ml-[250px]" : ""} | |
| sm:${sidebarCollapsed ? "-ml-[250px]" : ""} | |
| md:ml-0 ${sidebarCollapsed ? "w-[70px]" : "w-[250px]"} | |
| md:mr-0 ${sidebarCollapsed ? "w-[70px]" : "w-[250px]"} | |
| className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col ${isRTL ? 'border-l' : 'border-r'} border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300 md:relative | |
| ${sidebarCollapsed ? "-ml-[250px]" : ""} | |
| sm:${sidebarCollapsed ? "-ml-[250px]" : ""} | |
| md:${isRTL ? 'mr-0' : 'ml-0'} ${sidebarCollapsed ? "w-[70px]" : "w-[250px]"} |
| @@ -6,7 +6,7 @@ import Link from "next/link"; | |||
| import { usePathname } from "next/navigation"; | |||
| // icons | |||
| import { | |||
| ChevronLeft, | |||
| ChevronRight, | |||
There was a problem hiding this comment.
Ensure RTL-specific changes are conditionally applied
You've changed ChevronLeft to ChevronRight for the sidebar navigation, which appears to be for RTL language support (Persian). However, this change is applied unconditionally, which would affect the UI for all languages, not just RTL languages.
Consider making this conditional based on the current language direction:
- <ChevronRight className="h-5 w-5" strokeWidth={1} />
+ {isRTL ? <ChevronRight className="h-5 w-5" strokeWidth={1} /> : <ChevronLeft className="h-5 w-5" strokeWidth={1} />}You'll need to add a variable to detect if the current language is RTL.
Committable suggestion skipped: line range outside the PR's diff.
| @@ -139,7 +139,7 @@ export const ProfileLayoutSidebar = observer(() => { | |||
| }`} | |||
| > | |||
| <span className="grid h-5 w-5 flex-shrink-0 place-items-center"> | |||
| <ChevronLeft className="h-5 w-5" strokeWidth={1} /> | |||
| <ChevronRight className="h-5 w-5" strokeWidth={1} /> | |||
There was a problem hiding this comment.
Chevron direction should change based on language direction
The chevron icon should point in different directions based on whether the current language is LTR or RTL. This change unconditionally uses ChevronRight which would be incorrect for LTR languages.
- <ChevronRight className="h-5 w-5" strokeWidth={1} />
+ {isRTL ? <ChevronRight className="h-5 w-5" strokeWidth={1} /> : <ChevronLeft className="h-5 w-5" strokeWidth={1} />}📝 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.
| <ChevronRight className="h-5 w-5" strokeWidth={1} /> | |
| {isRTL ? <ChevronRight className="h-5 w-5" strokeWidth={1} /> : <ChevronLeft className="h-5 w-5" strokeWidth={1} />} |
|
Hey @mmkhakdaman Our plane component currently does not support Right-to-Left (RTL) language rendering. We are in the process of implementing comprehensive RTL support. Once our component changes are fully implemented, manual modifications to individual components will not be necessary. Additionally, the changes you have proposed affect multiple components that could impact other language implementations. Therefore, we cannot merge your pull request at this time. We kindly request that you allow us some time to resolve these technical considerations on our end. |
|
Closing this PR as the changes will effect other languages, You changes will transform UI from LTR to RTL. |
Description
Type of Change
Screenshots and Media (if applicable)
Test Scenarios
References
Summary by CodeRabbit