feat: integrate direction-based styling in ConnectionLinks and QRModal components for better text alignment

Author: x0sina

src/components/connection-links.tsx

@@ -10,13 +10,16 @@ import {
   prepareSubscriptionContentForCopy,
 } from '@/lib/subscriptionConfig';
 import { QRModal } from '@/components/qr-modal';
+import { useDir } from '@/hooks/useDir';
+import { cn } from '@/lib/utils';
 
 interface ConnectionLinksProps {
   links: string[];
 }
 
 export const ConnectionLinks = memo(({ links }: ConnectionLinksProps) => {
   const { t } = useTranslation();
+  const dir = useDir();
   const { copyToClipboard, isCopied } = useCopyToClipboard();
   const [selectedLink, setSelectedLink] = useState<ParsedLink | null>(null);
   const [qrModalOpen, setQrModalOpen] = useState(false);
@@ -187,7 +190,7 @@ export const ConnectionLinks = memo(({ links }: ConnectionLinksProps) => {
                   )}
 
                   {/* Name */}
-                  <div className="page-item-title flex-1 min-w-0 truncate">
+                  <div dir="ltr" className={cn("page-item-title flex-1 min-w-0 truncate", dir === 'rtl' ? 'text-right' : 'text-left')}>
                     {link.name}
                   </div>
 

src/components/qr-modal.tsx

@@ -12,6 +12,7 @@ import {
 import { Button } from '@/components/ui/button';
 import { useCopyToClipboard } from '@/hooks/useCopyToClipboard';
 import { useDir } from '@/hooks/useDir';
+import { cn } from '@/lib/utils';
 import type { ParsedLink } from '@/lib/linkParser';
 import {
   downloadTextFile,
@@ -163,7 +164,7 @@ export const QRModal = memo(({ link, open, onOpenChange }: QRModalProps) => {
             {link.emoji && (
               <span className="text-sm sm:text-base">{link.emoji}</span>
             )}
-            <span className="page-item-title flex-1 truncate">
+            <span dir="ltr" className={cn("page-item-title flex-1 truncate", dir === 'rtl' ? 'text-right' : 'text-left')}>
               {link.name}
             </span>
           </div>