Improved the Right to Left Direction implementation for relevant languages. (#2583)

* Added support for right to left direction of bullet points in the page render and text editor

* Added right to left direction support by adding a toggle button in the layout and enhancing the css element of the page render to support it without affecting the default left to right direction

* Moved the Right to Life Direction Toggle feature to be integrated with the Languages section using locale

* change all occurrances of pl, pr, ml, mr, left, right to start/end equivalents

---------

Co-authored-by: Amruth Pillai <im.amruth@gmail.com>
This commit is contained in:
Ibrahim
2026-01-25 22:18:20 +05:00
committed by GitHub
parent 0c65612368
commit 3f55c24e36
125 changed files with 484 additions and 264 deletions
+1 -1
View File
@@ -11,7 +11,7 @@ type Props = {
export function DashboardHeader({ title, icon: IconComponent, className }: Props) {
return (
<div className={cn("relative flex items-center justify-center gap-x-2.5 md:justify-start", className)}>
<SidebarTrigger className="absolute left-0 md:hidden" />
<SidebarTrigger className="absolute start-0 md:hidden" />
<IconComponent weight="light" className="size-5" />
<h1 className="font-medium text-xl tracking-tight">{title}</h1>
</div>
+2 -2
View File
@@ -95,7 +95,7 @@ function SidebarItemList({ items }: SidebarItemListProps) {
<SidebarMenuButton asChild title={i18n.t(item.label)}>
<Link to={item.href} activeProps={{ className: "bg-sidebar-accent" }}>
{item.icon}
<span className="shrink-0 transition-[margin,opacity] duration-200 ease-in-out group-data-[collapsible=icon]:-ml-8 group-data-[collapsible=icon]:opacity-0">
<span className="shrink-0 transition-[margin,opacity] duration-200 ease-in-out group-data-[collapsible=icon]:-ms-8 group-data-[collapsible=icon]:opacity-0">
{i18n.t(item.label)}
</span>
</Link>
@@ -161,7 +161,7 @@ export function DashboardSidebar() {
</AvatarFallback>
</Avatar>
<div className="transition-[margin,opacity] duration-200 ease-in-out group-data-[collapsible=icon]:-ml-8 group-data-[collapsible=icon]:opacity-0">
<div className="transition-[margin,opacity] duration-200 ease-in-out group-data-[collapsible=icon]:-ms-8 group-data-[collapsible=icon]:opacity-0">
<p className="font-medium">{session.user.name}</p>
<p className="text-muted-foreground text-xs">{session.user.email}</p>
</div>
+2 -2
View File
@@ -73,7 +73,7 @@ function RouteComponent() {
<Separator />
<div className="flex items-center">
<div className="flex items-center gap-x-4">
<Combobox
value={sort}
options={sortOptions}
@@ -116,7 +116,7 @@ function RouteComponent() {
}}
/>
<Tabs className="ml-auto" value={view} onValueChange={onViewChange}>
<Tabs className="ltr:ms-auto rtl:me-auto" value={view} onValueChange={onViewChange}>
<TabsList>
<TabsTrigger value="grid" className="rounded-r-none">
<GridFourIcon />
+1 -1
View File
@@ -29,7 +29,7 @@ function RouteComponent() {
<SidebarProvider open={sidebarState} onOpenChange={handleSidebarOpenChange}>
<DashboardSidebar />
<main className="@container flex-1 p-4 md:pl-2">
<main className="@container flex-1 p-4 md:ps-2">
<Outlet />
</main>
</SidebarProvider>
@@ -104,7 +104,7 @@ function PasskeyItem({ passkey }: PasskeyItemProps) {
<TrashSimpleIcon />
</Button>
<span className="mx-2 truncate text-nowrap border-r pr-2 font-medium">{passkey.name ?? "1Password"}</span>
<span className="mx-2 truncate text-nowrap border-r pe-2 font-medium">{passkey.name ?? "1Password"}</span>
<span className="flex-1 truncate text-nowrap text-muted-foreground text-xs">
<Trans>Added on {passkey.createdAt.toLocaleDateString()}</Trans>