From bd5a448faa2cc114ee11a6519372694d2356c65b Mon Sep 17 00:00:00 2001
From: siddhantCodes <siddhantk232@gmail.com>
Date: Wed, 2 Oct 2024 12:24:34 +0530
Subject: [PATCH] IDE(preview-panel): link to see preview in a new tab

Add a link that allows to open the preview in a new tab. This also works
in safari btw ;)
---
 components/editor/panels/preview.ftd | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/components/editor/panels/preview.ftd b/components/editor/panels/preview.ftd
index 5d41f507..14370834 100644
--- a/components/editor/panels/preview.ftd
+++ b/components/editor/panels/preview.ftd
@@ -77,6 +77,10 @@ padding-vertical.px: 6
     spacing.fixed.px: 5
     align-content: center
 
+        -- preview-url:
+        hover: $preview-header.hover
+        $show-panel: $preview-header.toggle-visibility-flag
+
         -- toggle-width:
         hover: $preview-header.hover
         $flag: $preview-header.preview-maximized
@@ -91,7 +95,23 @@ padding-vertical.px: 6
 
 -- end: preview-header
 
+-- component preview-url:
+boolean hover:
+boolean $show-panel:
+
+    -- ftd.column:
+    classes if { !preview-url.hover }: hidden
+    ;; hide the preview panel since the user is relying on an external browser tab
+    $on-click$: $ftd.toggle($a = $preview-url.show-panel)
+    link: $vars.preview-url
+    open-in-new-tab: true
+
+        -- phosphor.light: arrow-square-out
+        size: 14
+
+    -- end: ftd.column
 
+-- end: preview-url
 
 -- component toggle-width:
 boolean $flag: false