[client] Add RTL layout support to the desktop UI (#8076)

* [client] Add RTL layout support to the desktop UI

<html dir> follows the active language, Radix primitives get the
matching dir, physical spacing/positioning uses logical utilities, and
directional icons, animations, arrow-key navigation and tooltip sides
flip in RTL.

* [client] Address RTL review feedback

Force LTR with isolation for monospace values, let truncated names
take their direction from their content, and keep the profile name
field in the UI direction.

* [client] Keep translated monospace labels in their own direction

The forced-LTR rule for monospace values now skips elements with an
explicit dir, translated development labels use dir=auto, and
monospace values rendered through TruncatedText opt into LTR.

---------

Co-authored-by: Edward <43848523+thomashacker@users.noreply.github.com>

client/ui/frontend/src/layouts/AppRightPanel.tsx

@@ -1,6 +1,7 @@
 import { type ReactNode } from "react";
 import { motion } from "framer-motion";
 import { cn } from "@/lib/cn.ts";
+import { useDirection } from "@/hooks/useDirection";
 
 type Props = {
     children: ReactNode;
@@ -15,17 +16,19 @@ const PANEL_TRANSITION = {
 };
 
 export const AppRightPanel = ({ children, overlay, overlayOpen = false, className }: Props) => {
+    const dir = useDirection();
+    const parallaxX = dir === "rtl" ? 48 : -48;
     return (
         <div
             className={cn(
                 "wails-no-draggable relative m-5",
                 "border border-nb-gray-800 bg-nb-gray-940 dark:border-nb-gray-920",
-                "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-xl rounded-br-2xl",
+                "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-xl rounded-ee-2xl",
                 className,
             )}
         >
             <motion.div
-                animate={{ x: overlayOpen ? -48 : 0 }}
+                animate={{ x: overlayOpen ? parallaxX : 0 }}
                 transition={PANEL_TRANSITION}
                 className={"flex min-h-0 min-w-0 flex-1 flex-col"}
                 style={{ pointerEvents: overlayOpen ? "none" : "auto" }}