flare/data/resources/ui/link_window.blp

using Gtk 4.0;
using Adw 1;

template $FlLinkWindow : Adw.Window {
  can-focus: true;
  default-height: 600;
  default-width: 450;
  resizable: false;
  destroy-with-parent: true;
  modal: true;

  content: Adw.ToastOverlay toast_overlay {
  child: Box {
      orientation: vertical;

      Adw.Leaflet content {
        can-unfold: false;
        vexpand: true;
        can-navigate-back: true;
      
        Adw.LeafletPage {
          navigatable: true;
          name: "qr-code-page";
          child:  Box {
            orientation: vertical;
            Adw.HeaderBar {
              styles ["flat"]
              title-widget: Adw.WindowTitle {
                title: _("Link device");
              };
            }
          
            Adw.StatusPage {
              title: _("Scan Code");
              description: _("Scan this code with another Signal app logged into your account.");
              vexpand: true;
              child: Box {
                orientation: vertical;

                Adw.Bin {
                  Picture qr_image {
                    styles [
                      "qr-code",
                      "card",
                    ]
                    height-request: 200;
                    width-request: 200;
                    halign: center;
                    overflow: hidden;
                  }
                }
                
                Button switch_show_url {
                  styles [
                    "pill",
                    "text-button",
                  ]
                  margin-top: 30;
                  label: _("Link without scanning");
                  halign: center;
                  clicked => $forward() swapped;
                }
              };
            }
          };
        }
      
        Adw.LeafletPage {
          name: "link-without-scanning";
          navigatable: true;
          child:  Box {
            orientation: vertical;

            Adw.HeaderBar {
              styles ["flat"]
              Button {
                clicked => $previous() swapped;
                icon-name: "go-previous-symbolic";
              }
              title-widget: Adw.WindowTitle {
                title: _("Link device");
              };
            }

            Adw.StatusPage {
              title: _("Manual Linking");
              description: _("If your device can't scan the QR code, you can manually enter the link provided here");
              icon-name: "phonelink2-symbolic";
              vexpand: true;
              
              Button  {
                styles [
                  "pill",
                  "suggested-action",
                  "text-button",
                ]
                
                label: _("Copy to clipboard");
                halign: center;
                clicked => $handle_clipboard() swapped;
              }
            }
          };
        }  
      }
    };
  };
}