feat: add RTL support to OperationsQueue (#330)

Author: userquin

app/components/OperationsQueue.vue

@@ -88,17 +88,17 @@ function getStatusColor(status: string): string {
 function getStatusIcon(status: string): string {
   switch (status) {
     case 'pending':
-      return 'i-carbon-time'
+      return 'i-carbon:time'
     case 'approved':
-      return 'i-carbon-checkmark'
+      return 'i-carbon:checkmark'
     case 'running':
-      return 'i-carbon-rotate-180'
+      return 'i-carbon:rotate-180'
     case 'completed':
-      return 'i-carbon-checkmark-filled'
+      return 'i-carbon:checkmark-filled'
     case 'failed':
-      return 'i-carbon-close-filled'
+      return 'i-carbon:close-filled'
     default:
-      return 'i-carbon-help'
+      return 'i-carbon:help'
   }
 }
 
@@ -141,7 +141,7 @@ watch(isExecuting, executing => {
           :aria-label="$t('operations.queue.refresh')"
           @click="refreshState"
         >
-          <span class="i-carbon-renew block w-4 h-4" aria-hidden="true" />
+          <span class="i-carbon:renew block w-4 h-4" aria-hidden="true" />
         </button>
       </div>
     </div>
@@ -213,7 +213,7 @@ watch(isExecuting, executing => {
             :aria-label="$t('operations.queue.approve_operation')"
             @click="approveOperation(op.id)"
           >
-            <span class="i-carbon-checkmark block w-4 h-4" aria-hidden="true" />
+            <span class="i-carbon:checkmark block w-4 h-4" aria-hidden="true" />
           </button>
           <button
             v-if="op.status !== 'running'"
@@ -235,7 +235,7 @@ watch(isExecuting, executing => {
       role="alert"
     >
       <div class="flex items-center gap-2 mb-2">
-        <span class="i-carbon-locked block w-4 h-4 text-amber-400 shrink-0" aria-hidden="true" />
+        <span class="i-carbon:locked block w-4 h-4 text-amber-400 shrink-0" aria-hidden="true" />
         <span class="font-mono text-sm text-amber-400">
           {{ $t('operations.queue.otp_prompt') }}
         </span>
@@ -295,7 +295,7 @@ watch(isExecuting, executing => {
         class="flex items-center gap-2 font-mono text-xs text-fg-muted cursor-pointer hover:text-fg transition-colors duration-200 select-none"
       >
         <span
-          class="i-carbon-chevron-right block w-3 h-3 transition-transform duration-200 [[open]>&]:rotate-90"
+          class="i-carbon:chevron-right rtl-flip block w-3 h-3 transition-transform duration-200 [[open]>&]:rotate-90"
           aria-hidden="true"
         />
         {{ $t('operations.queue.log') }} ({{ completedOperations.length }})
@@ -310,8 +310,8 @@ watch(isExecuting, executing => {
           <span
             :class="
               op.status === 'completed'
-                ? 'i-carbon-checkmark-filled text-green-500'
-                : 'i-carbon-close-filled text-red-500'
+                ? 'i-carbon:checkmark-filled text-green-500'
+                : 'i-carbon:close-filled text-red-500'
             "
             class="w-3.5 h-3.5 shrink-0 mt-0.5"
             aria-hidden="true"
@@ -331,7 +331,7 @@ watch(isExecuting, executing => {
             :aria-label="$t('operations.queue.remove_from_log')"
             @click="removeOperation(op.id)"
           >
-            <span class="i-carbon-close block w-3 h-3" aria-hidden="true" />
+            <span class="i-carbon:close block w-3 h-3" aria-hidden="true" />
           </button>
         </li>
       </ul>