feat(i18n): add Persian (fa-IR) locale with RTL support

apps/web/index.html

@@ -34,6 +34,37 @@
   <link rel="canonical" href="https://kaneo.app">
 
   <script>
+    // Set the initial direction from the persisted locale (preferred) or
+    // browser language before the app mounts, so right-to-left locales don't
+    // flash left-to-right.
+    (function () {
+      var dir = "ltr";
+      try {
+        var persistedLocale = localStorage.getItem("kaneo:locale");
+        if (persistedLocale) {
+          // Common RTL language prefixes: Persian, Arabic, Hebrew, Urdu
+          dir = ["fa", "ar", "he", "ur"].some(function (prefix) {
+            return persistedLocale.startsWith(prefix);
+          }) ? "rtl" : "ltr";
+        } else {
+          var lang = (navigator.language || "en").toLowerCase();
+          // Common RTL language prefixes: Persian, Arabic, Hebrew, Urdu
+          dir = ["fa", "ar", "he", "ur"].some(function (prefix) {
+            return lang.startsWith(prefix);
+          }) ? "rtl" : "ltr";
+        }
+      } catch (e) {
+        // Private browsing; fall back to navigator.language.
+        var lang = (navigator.language || "en").toLowerCase();
+        dir = ["fa", "ar", "he", "ur"].some(function (prefix) {
+          return lang.startsWith(prefix);
+        }) ? "rtl" : "ltr";
+      }
+      if (dir === "rtl") {
+        document.documentElement.setAttribute("dir", "rtl");
+      }
+    })();
+
     if (window.location.hostname === 'demo.kaneo.app') {
       const script = document.createElement('script');
       script.defer = true;

apps/web/src/components/app-sidebar.tsx

@@ -1,4 +1,5 @@
 import type * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { NavMain } from "@/components/nav-main";
 import { NavProjects } from "@/components/nav-projects";
@@ -15,10 +16,18 @@ import { VersionDisplay } from "@/components/version-display";
 import { WorkspaceSwitcher } from "@/components/workspace-switcher";
 import { shortcuts } from "@/constants/shortcuts";
 import { useRegisterShortcuts } from "@/hooks/use-keyboard-shortcuts";
+import { getLocaleDirection, resolveLocale } from "@/lib/i18n";
 import Search from "./search";
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   const { toggleSidebar } = useSidebar();
+  const { i18n } = useTranslation();
+
+  const side: "left" | "right" =
+    getLocaleDirection(resolveLocale(i18n.resolvedLanguage ?? null, null)) ===
+    "rtl"
+      ? "right"
+      : "left";
 
   useRegisterShortcuts({
     modifierShortcuts: {
@@ -32,8 +41,9 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
     <Sidebar
       collapsible="offcanvas"
       variant="inset"
-      className="border-none pt-1.5"
       {...props}
+      side={side}
+      className="border-none pt-1.5"
     >
       <SidebarHeader className="pt-1 pb-1.5">
         <WorkspaceSwitcher />

apps/web/src/components/common/header/mobile-project-nav.tsx

@@ -60,7 +60,7 @@ export default function MobileProjectNav({
         <div className="space-y-3">
           <div className="space-y-1">
             <p className="px-1 text-[11px] font-medium tracking-wide text-muted-foreground uppercase">
-              View
+              {t("tasks:view.section")}
             </p>
             <div className="grid grid-cols-4 gap-1">
               <button
@@ -73,7 +73,7 @@ export default function MobileProjectNav({
                     : "border-transparent text-muted-foreground hover:bg-accent",
                 )}
               >
-                Backlog
+                {t("tasks:view.backlog")}
               </button>
               <button
                 type="button"
@@ -86,7 +86,7 @@ export default function MobileProjectNav({
                 )}
               >
                 <SquareKanban className="size-3.5" />
-                Board
+                {t("tasks:view.board")}
               </button>
               <button
                 type="button"
@@ -112,14 +112,14 @@ export default function MobileProjectNav({
                 )}
               >
                 <CalendarDays className="size-3.5" />
-                Gantt
+                {t("tasks:view.gantt")}
               </button>
             </div>
           </div>
 
           <div className="space-y-1">
             <p className="px-1 text-[11px] font-medium tracking-wide text-muted-foreground uppercase">
-              Projects
+              {t("navigation:sidebar.projects")}
             </p>
             <div className="max-h-56 space-y-0.5 overflow-y-auto">
               {(projects ?? []).map((project) => {
@@ -154,7 +154,7 @@ export default function MobileProjectNav({
             className="flex w-full items-center gap-2 rounded-md border border-border px-2 py-1.5 text-left text-sm text-foreground transition-colors hover:bg-accent"
           >
             <Plus className="size-3.5" />
-            Add project
+            {t("navigation:projectList.addProject")}
           </button>
         </div>
       </PopoverContent>

apps/web/src/components/common/project-layout.tsx

@@ -171,7 +171,7 @@ export default function ProjectLayout({
                   )}
                 >
                   <SquircleDashed className="size-3.5" />
-                  Backlog
+                  {t("tasks:view.backlog")}
                 </Button>
                 <Button
                   variant={resolvedView === "board" ? "secondary" : "ghost"}
@@ -183,7 +183,7 @@ export default function ProjectLayout({
                   )}
                 >
                   <SquareKanban className="size-3.5" />
-                  Tasks
+                  {t("tasks:view.tasks")}
                 </Button>
                 <Button
                   variant={resolvedView === "calendar" ? "secondary" : "ghost"}
@@ -207,7 +207,7 @@ export default function ProjectLayout({
                   )}
                 >
                   <CalendarDays className="size-3.5" />
-                  Gantt
+                  {t("tasks:view.gantt")}
                 </Button>
               </div>
             )}

apps/web/src/components/kanban-board/task-card.tsx

@@ -211,7 +211,7 @@ function TaskCard({ task, disableDragDrop = false }: TaskCardProps) {
             )}
 
             {showAssignees && (
-              <div className="absolute top-3 right-3">
+              <div className="absolute top-3 end-3">
                 {task.userId ? (
                   <Avatar className="h-5 w-5">
                     <AvatarImage
@@ -235,7 +235,7 @@ function TaskCard({ task, disableDragDrop = false }: TaskCardProps) {
               </div>
             )}
 
-            <div className="mb-2.5 pr-6">
+            <div className="mb-2.5 pe-6">
               <div
                 className="overflow-hidden break-words leading-5 font-medium text-foreground/95 text-[15px]"
                 style={{

apps/web/src/components/nav-main.tsx

@@ -77,7 +77,7 @@ export function NavMain() {
                   >
                     <span>{item.title}</span>
                     {item.badge !== null && (
-                      <span className="ml-auto flex h-5 min-w-5 items-center justify-center rounded-sm border border-sidebar-border/60 px-1 text-[11px] font-medium text-sidebar-foreground/80">
+                      <span className="ms-auto flex h-5 min-w-5 items-center justify-center rounded-sm border border-sidebar-border/60 px-1 text-[11px] font-medium text-sidebar-foreground/80">
                         {item.badge}
                       </span>
                     )}

apps/web/src/components/nav-projects.tsx

@@ -268,7 +268,7 @@ export function NavProjects() {
                                   onPointerDown={(event) =>
                                     event.stopPropagation()
                                   }
-                                  className="absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground after:-inset-2 after:absolute md:after:hidden peer-data-[size=sm]/menu-button:top-1 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 group-data-[collapsible=icon]:hidden group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0"
+                                  className="absolute top-1.5 end-1 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground after:-inset-2 after:absolute md:after:hidden peer-data-[size=sm]/menu-button:top-1 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 group-data-[collapsible=icon]:hidden group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0"
                                 />
                               }
                             >

apps/web/src/components/task/task-properties-sidebar.tsx

@@ -146,7 +146,7 @@ export default function TaskPropertiesSidebar({
                 <TaskMovePopover
                   task={task}
                   workspaceId={workspaceId}
-                  triggerClassName="rounded-l-md rounded-r-none border-r-0"
+                  triggerClassName="rounded-s-md rounded-e-none border-e-0"
                 />
               )}
               <TooltipProvider>
@@ -156,8 +156,8 @@ export default function TaskPropertiesSidebar({
                       variant="outline"
                       size="sm"
                       className={cn(
-                        "text-foreground border-r-0",
-                        canMoveTask ? "rounded-none" : "rounded-r-none",
+                        "text-foreground border-e-0",
+                        canMoveTask ? "rounded-none" : "rounded-e-none",
                       )}
                       onClick={() => handleCopyTaskLink()}
                     >
@@ -177,7 +177,7 @@ export default function TaskPropertiesSidebar({
                     <Button
                       variant="outline"
                       size="sm"
-                      className="text-foreground rounded-l-none"
+                      className="text-foreground rounded-s-none"
                       onClick={() => handleCopyTaskBranch()}
                     >
                       <GitBranch className="size-4" />
@@ -337,7 +337,7 @@ export default function TaskPropertiesSidebar({
                   <TaskMovePopover
                     task={task}
                     workspaceId={workspaceId}
-                    triggerClassName="rounded-l-md rounded-r-none border-r-0"
+                    triggerClassName="rounded-s-md rounded-e-none border-e-0"
                   />
                 )}
                 <TooltipProvider>
@@ -347,8 +347,8 @@ export default function TaskPropertiesSidebar({
                         variant="outline"
                         size="sm"
                         className={cn(
-                          "text-foreground border-r-0",
-                          canMoveTask ? "rounded-none" : "rounded-r-none",
+                          "text-foreground border-e-0",
+                          canMoveTask ? "rounded-none" : "rounded-e-none",
                         )}
                         onClick={() => handleCopyTaskLink()}
                       >
@@ -368,7 +368,7 @@ export default function TaskPropertiesSidebar({
                       <Button
                         variant="outline"
                         size="sm"
-                        className="text-foreground rounded-l-none"
+                        className="text-foreground rounded-s-none"
                         onClick={() => handleCopyTaskBranch()}
                       >
                         <GitBranch className="size-4" />
@@ -529,7 +529,7 @@ export default function TaskPropertiesSidebar({
                     <TaskMovePopover
                       task={task}
                       workspaceId={workspaceId}
-                      triggerClassName="rounded-l-md rounded-r-none border-r-0"
+                      triggerClassName="rounded-s-md rounded-e-none border-e-0"
                     />
                   )}
                   <TooltipProvider>
@@ -539,8 +539,8 @@ export default function TaskPropertiesSidebar({
                           variant="outline"
                           size="sm"
                           className={cn(
-                            "text-foreground border-r-0",
-                            canMoveTask ? "rounded-none" : "rounded-r-none",
+                            "text-foreground border-e-0",
+                            canMoveTask ? "rounded-none" : "rounded-e-none",
                           )}
                           onClick={() => handleCopyTaskLink()}
                         >
@@ -560,7 +560,7 @@ export default function TaskPropertiesSidebar({
                         <Button
                           variant="outline"
                           size="sm"
-                          className="text-foreground rounded-l-none"
+                          className="text-foreground rounded-s-none"
                           onClick={() => handleCopyTaskBranch()}
                         >
                           <GitBranch className="size-4" />