Polish business FA layout and wire special-group keys plus SSL sync.

RTL carousels/FABs, special key+title fields, slider gallery fixes, and dashboard SSL sync agent for super-admin.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/business/src/components/WebsiteSliderGallery.tsx

@@ -1,5 +1,7 @@
 import { ChevronLeft, ChevronRight, Plus } from 'lucide-react'
 import { useRef } from 'react'
+import { useLocale } from '@meshkee/dashboard-ui'
+import { useT } from '../i18n/useT'
 import type { WebsiteSliderSlide } from '../types/websiteSlider'
 import { Tooltip } from './Tooltip'
 import { WebsiteSliderSlideCard } from './WebsiteSliderSlideCard'
@@ -16,6 +18,9 @@ export function WebsiteSliderGallery({
   onAddSlide,
   onRemoveSlide,
 }: WebsiteSliderGalleryProps) {
+  const t = useT()
+  const { locale } = useLocale()
+  const isFa = locale === 'fa'
   const trackRef = useRef<HTMLDivElement>(null)
   const showNav = slides.length > 0
 
@@ -26,27 +31,50 @@ export function WebsiteSliderGallery({
     track.scrollBy({ left: direction * amount, behavior: 'smooth' })
   }
 
+  const addCard = (
+    <div className={`${styles.slideSlot} ${styles.slideSlotAdd}`}>
+      <Tooltip label={t('website.sliders.addSlide')}>
+        <button
+          type="button"
+          className={styles.addCard}
+          onClick={onAddSlide}
+          aria-label={t('website.sliders.addSlide')}
+        >
+          <span className={styles.addIcon}>
+            <Plus size={28} />
+          </span>
+        </button>
+      </Tooltip>
+    </div>
+  )
+
+  const slideCards = slides.map((slide) => (
+    <div key={slide.id} className={styles.slideSlot}>
+      <WebsiteSliderSlideCard slide={slide} onRemove={() => onRemoveSlide(slide)} />
+    </div>
+  ))
+
   return (
     <section className={styles.section}>
       {showNav && (
         <div className={styles.header}>
-          <div className={styles.headerActions}>
-            <Tooltip label="Scroll left">
+          <div className={styles.navPair} dir="ltr">
+            <Tooltip label={t('website.scrollLeft')}>
               <button
                 type="button"
                 className={styles.navBtn}
                 onClick={() => scrollBy(-1)}
-                aria-label="Scroll left"
+                aria-label={t('website.scrollLeft')}
               >
                 <ChevronLeft size={18} />
               </button>
             </Tooltip>
-            <Tooltip label="Scroll right">
+            <Tooltip label={t('website.scrollRight')}>
               <button
                 type="button"
                 className={styles.navBtn}
                 onClick={() => scrollBy(1)}
-                aria-label="Scroll right"
+                aria-label={t('website.scrollRight')}
               >
                 <ChevronRight size={18} />
               </button>
@@ -56,27 +84,9 @@ export function WebsiteSliderGallery({
       )}
 
       <div className={styles.trackWrap}>
-        <div className={styles.track} ref={trackRef}>
-          <div className={`${styles.slideSlot} ${styles.slideSlotAdd}`}>
-            <Tooltip label="Add slide">
-              <button
-                type="button"
-                className={styles.addCard}
-                onClick={onAddSlide}
-                aria-label="Add slide"
-              >
-                <span className={styles.addIcon}>
-                  <Plus size={28} />
-                </span>
-              </button>
-            </Tooltip>
-          </div>
-
-          {slides.map((slide) => (
-            <div key={slide.id} className={styles.slideSlot}>
-              <WebsiteSliderSlideCard slide={slide} onRemove={() => onRemoveSlide(slide)} />
-            </div>
-          ))}
+        <div className={styles.track} ref={trackRef} dir={isFa ? 'rtl' : 'ltr'}>
+          {slideCards}
+          {addCard}
         </div>
       </div>
     </section>