From 9342494a363cd4f89eeae9e50c7cf41800c064e5 Mon Sep 17 00:00:00 2001
From: payacom <59262811+payacom@users.noreply.github.com>
Date: Thu, 17 Sep 2026 16:19:29 +0330
Subject: [PATCH] feat(ui): add online-booking shortcut and fix icon alignment
 in billboards list

- Each icon (add/search/filter) had no consistent-height box, so vertical
  alignment depended on each tag's (Link vs button) own default box model.
  Now all 4 icons share an identical h-9 w-9 flex box.
- Added a 4th icon linking to /settings/booking, next to the filter icon,
  mirroring the RN fix for this same screen.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../BillboardPage/BillboardsFilter.tsx        | 35 ++++++++++++++++---
 src/locales/en/common.json                    |  1 +
 src/locales/fa/common.json                    |  1 +
 3 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/components/billboards/BillboardPage/BillboardsFilter.tsx b/src/components/billboards/BillboardPage/BillboardsFilter.tsx
index e65d9b5..64c7ac1 100644
--- a/src/components/billboards/BillboardPage/BillboardsFilter.tsx
+++ b/src/components/billboards/BillboardPage/BillboardsFilter.tsx
@@ -118,8 +118,15 @@ function BillboardsFilter() {
 
   return (
     <div>
-      <div className="flex items-center justify-end gap-3 text-sm">
-        <Link href="/billboards/new" aria-label={t("billboards.createAria")}>
+      {/* h-9 w-9 flex ثابت روی هر ۴ دکمه — قبلاً هرکدوم بدون کادرِ هم‌اندازه بودن (Link خام،
+          button خام)، پس هم‌ترازیِ دقیقِ عمودی‌شون به رفتار پیش‌فرضِ مرورگر برای هر تگ
+          وابسته بود؛ الان هر ۴ تا دقیقاً یه اندازه و یه‌راستا هستن */}
+      <div className="flex items-center justify-end gap-1 text-sm">
+        <Link
+          href="/billboards/new"
+          aria-label={t("billboards.createAria")}
+          className="flex h-9 w-9 items-center justify-center"
+        >
           <BoldIcon
             name="add-square"
             size={25}
@@ -127,7 +134,11 @@ function BillboardsFilter() {
             className="text-neutral-700 dark:text-neutral-200 min-w-[25px]"
           />
         </Link>
-        <button onClick={() => setShowSearchBox((v) => !v)} aria-label={t("billboards.search")}>
+        <button
+          onClick={() => setShowSearchBox((v) => !v)}
+          aria-label={t("billboards.search")}
+          className="flex h-9 w-9 items-center justify-center"
+        >
           <Image
             width={25}
             height={25}
@@ -136,7 +147,11 @@ function BillboardsFilter() {
             className="dark:invert min-w-[25px]"
           />
         </button>
-        <button onClick={() => setShowFilterModal(true)} aria-label={t("billboards.filter")}>
+        <button
+          onClick={() => setShowFilterModal(true)}
+          aria-label={t("billboards.filter")}
+          className="flex h-9 w-9 items-center justify-center"
+        >
           <Image
             width={25}
             height={25}
@@ -145,6 +160,18 @@ function BillboardsFilter() {
             className="dark:invert min-w-[25px]"
           />
         </button>
+        <Link
+          href="/settings/booking"
+          aria-label={t("billboards.onlineBookingAria")}
+          className="flex h-9 w-9 items-center justify-center"
+        >
+          <BoldIcon
+            name="calendar"
+            size={25}
+            tinted
+            className="text-neutral-700 dark:text-neutral-200 min-w-[25px]"
+          />
+        </Link>
       </div>
 
       {showSearchBox && (
diff --git a/src/locales/en/common.json b/src/locales/en/common.json
index fda9d63..328ed66 100644
--- a/src/locales/en/common.json
+++ b/src/locales/en/common.json
@@ -270,6 +270,7 @@
       "search": "Search",
       "empty": "No billboards yet.",
       "createAria": "Create billboard",
+      "onlineBookingAria": "Online booking",
       "rejectReason": "Rejection reason:",
       "pay": "Pay",
       "edit": "Edit",
diff --git a/src/locales/fa/common.json b/src/locales/fa/common.json
index 7bb0860..3380da9 100644
--- a/src/locales/fa/common.json
+++ b/src/locales/fa/common.json
@@ -270,6 +270,7 @@
       "search": "جستجو",
       "empty": "بیلبوردی ثبت نشده است.",
       "createAria": "ثبت بیلبورد",
+      "onlineBookingAria": "رزرو آنلاین",
       "rejectReason": "علت رد شدن ویترین:",
       "pay": "پرداخت",
       "edit": "ویرایش",