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>

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 && (

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",

src/locales/fa/common.json

@@ -270,6 +270,7 @@
       "search": "جستجو",
       "empty": "بیلبوردی ثبت نشده است.",
       "createAria": "ثبت بیلبورد",
+      "onlineBookingAria": "رزرو آنلاین",
       "rejectReason": "علت رد شدن ویترین:",
       "pay": "پرداخت",
       "edit": "ویرایش",