From b04e80d2d8c92f4a37004a6d43b77aa0b62e9f89 Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Sun, 19 Apr 2026 14:59:14 +0300
Subject: [PATCH] Add share icon to expanded flight card
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Angular's expanded FlightCard bottom bar has a share button on the
left next to the 'Детали рейса' action on the right. Render an icon
button backed by /assets/img/share.svg with the same
justify-content: space-between layout. Click uses the Web Share API
when available and falls back to writing the current URL to the
clipboard.
---
 src/ui/flights/FlightCard.scss | 26 +++++++++++++++++++++++++-
 src/ui/flights/FlightCard.tsx  | 24 ++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/src/ui/flights/FlightCard.scss b/src/ui/flights/FlightCard.scss
index e43b275b..9cb0ce7f 100644
--- a/src/ui/flights/FlightCard.scss
+++ b/src/ui/flights/FlightCard.scss
@@ -150,10 +150,34 @@
 
   &__actions {
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;
+    align-items: center;
     padding-top: vars.$space-s;
   }
 
+  &__share-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 120ms ease;
+
+    img {
+      width: 20px;
+      height: 20px;
+    }
+
+    &:hover {
+      background-color: rgba(46, 87, 255, 0.08);
+    }
+  }
+
   &__details-btn {
     background: colors.$blue;
     color: #fff;
diff --git a/src/ui/flights/FlightCard.tsx b/src/ui/flights/FlightCard.tsx
index 9bcc4316..9237a7b3 100644
--- a/src/ui/flights/FlightCard.tsx
+++ b/src/ui/flights/FlightCard.tsx
@@ -292,6 +292,30 @@ export const FlightCard: FC<FlightCardProps> = ({
 
           {onViewDetails && (
             <div className="flight-card__actions">
+              <button
+                type="button"
+                className="flight-card__share-btn"
+                data-testid="flight-share-button"
+                aria-label={t("BOARD.SHARE")}
+                title={t("BOARD.SHARE")}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  const url = typeof window !== "undefined"
+                    ? window.location.href
+                    : "";
+                  const navShare = (
+                    typeof navigator !== "undefined" &&
+                      (navigator as Navigator & { share?: (data: ShareData) => Promise<void> }).share
+                  );
+                  if (navShare && url) {
+                    void navShare.call(navigator, { url });
+                  } else if (url && typeof navigator !== "undefined" && navigator.clipboard) {
+                    void navigator.clipboard.writeText(url);
+                  }
+                }}
+              >
+                <img src="/assets/img/share.svg" alt="" aria-hidden="true" />
+              </button>
               <button
                 type="button"
                 className="flight-card__details-btn"