From fa4881986c9be6b1ce9b449f12831a65add3f5f7 Mon Sep 17 00:00:00 2001
From: katinthehatsite <katerynakodonenko@gmail.com>
Date: Thu, 16 Jan 2025 08:40:34 +0100
Subject: [PATCH] Studio: Open the site's URL from the Sync connect popup
 (#799)

* Make links open in sync modal

---------

Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com>
---
 src/components/sync-sites-modal-selector.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/sync-sites-modal-selector.tsx b/src/components/sync-sites-modal-selector.tsx
index a2398e184..af88eaa25 100644
--- a/src/components/sync-sites-modal-selector.tsx
+++ b/src/components/sync-sites-modal-selector.tsx
@@ -5,6 +5,7 @@ import { useState, useEffect } from 'react';
 import { useOffline } from '../hooks/use-offline';
 import { cx } from '../lib/cx';
 import { getIpcApi } from '../lib/get-ipc-api';
+import { ArrowIcon } from './arrow-icon';
 import { Badge } from './badge';
 import Button from './button';
 import { CreateButton } from './connect-create-buttons';
@@ -206,11 +207,19 @@ function SiteItem( {
 				<div className={ cx( 'a8c-body truncate', ! isSyncable && 'text-a8c-gray-30' ) }>
 					{ site.name }
 				</div>
-				<div
-					className={ cx( 'a8c-body-small text-a8c-gray-30 truncate', isSelected && 'text-white' ) }
+				<Button
+					variant="link"
+					className={ cx(
+						'a8c-body-small truncate !p-0',
+						isSelected
+							? '!text-inherit hover:!text-inherit'
+							: '!text-a8c-gray-30 hover:!text-a8c-gray-30'
+					) }
+					onClick={ () => getIpcApi().openURL( site.url ) }
 				>
 					{ site.url.replace( /^https?:\/\//, '' ) }
-				</div>
+					<ArrowIcon />
+				</Button>
 			</div>
 			{ isSyncable && (
 				<div className="flex gap-2">