From b6340275252514b74451f05ff33de5a32bfcce41 Mon Sep 17 00:00:00 2001
From: Ahmadreza Fatemikia
 <83141114+ahmadrezafatemikia@users.noreply.github.com>
Date: Thu, 9 Apr 2026 19:55:28 +0800
Subject: [PATCH] feat: add RTL support for subscription page

- Implemented a function to detect RTL languages and updated the Vue component to apply the appropriate class based on the language.
- Enhanced the subscription page styles to support RTL layout, ensuring proper text alignment and direction for Arabic and Persian languages.
---
 web/assets/js/subscription.js                 |  8 +++++++
 .../settings/panel/subscription/subpage.html  | 21 ++++++++++++++++++-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/web/assets/js/subscription.js b/web/assets/js/subscription.js
index 228dcfa0..127ced6b 100644
--- a/web/assets/js/subscription.js
+++ b/web/assets/js/subscription.js
@@ -49,6 +49,11 @@
     window.location.href = url;
   }
 
+  function isRtlLanguage(lang) {
+    if (!lang) return false;
+    return ['fa', 'ar'].some(prefix => lang.toLowerCase().startsWith(prefix));
+  }
+
   function drawQR(value) {
     try {
       new QRious({ element: document.getElementById('qrcode'), value, size: 220 });
@@ -113,6 +118,9 @@
       if (this._onResize) window.removeEventListener('resize', this._onResize);
     },
     computed: {
+      isRtl() {
+        return isRtlLanguage(this.lang || LanguageManager.getLanguage());
+      },
       isMobile() {
         return this.viewportWidth < 576;
       },
diff --git a/web/html/settings/panel/subscription/subpage.html b/web/html/settings/panel/subscription/subpage.html
index 794c67c3..820a5161 100644
--- a/web/html/settings/panel/subscription/subpage.html
+++ b/web/html/settings/panel/subscription/subpage.html
@@ -6,6 +6,24 @@
 <script src="{{ .base_path }}assets/js/util/index.js?{{ .cur_ver }}"></script>
 <script src="{{ .base_path }}assets/qrcode/qrious2.min.js?{{ .cur_ver }}"></script>
 <style>
+    .subscription-page.rtl {
+        direction: rtl;
+    }
+
+    .subscription-page.rtl .ant-descriptions-item-label {
+        text-align: right;
+    }
+
+    .subscription-page.rtl .ant-form-item-label > label {
+        float: right;
+    }
+
+    /* Keep technical URLs readable regardless of page direction */
+    .subscription-page.rtl .subscription-link-box {
+        direction: ltr;
+        text-align: left;
+    }
+
     .subscription-page .subscription-link-box {
         cursor: pointer;
         border-radius: 12px;
@@ -45,7 +63,8 @@
 {{ template "page/head_end" .}}
 
 {{ template "page/body_start" .}}
-<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme + ' subscription-page'">
+<a-layout id="app" v-cloak :class="[themeSwitcher.currentTheme, 'subscription-page', isRtl ? 'rtl' : 'ltr']"
+    :dir="isRtl ? 'rtl' : 'ltr'">
     <a-layout-content class="p-2">
         <a-row type="flex" justify="center" class="mt-2">
             <a-col :xs="24" :sm="22" :md="18" :lg="14" :xl="12">