From 8927d911cf80d8a5950bdbe1ebe1021ed107703a Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Wed, 20 Sep 2023 14:33:54 +0100
Subject: [PATCH] Added Ghost favicons to recommendations with 1-click
 subscribe

refs https://github.com/TryGhost/Product/issues/3902
---
 .../site/recommendations/RecommendationList.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationList.tsx b/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationList.tsx
index ff01f433cf..0e48430186 100644
--- a/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationList.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationList.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import RecommendationIcon from './RecommendationIcon';
 import Table from '../../../../admin-x-ds/global/Table';
 import TableCell from '../../../../admin-x-ds/global/TableCell';
+// import TableHead from '../../../../admin-x-ds/global/TableHead';
 import TableRow from '../../../../admin-x-ds/global/TableRow';
 import useRouting from '../../../../hooks/useRouting';
 import {PaginationData} from '../../../../hooks/usePagination';
@@ -30,24 +31,26 @@ const RecommendationItem: React.FC<{recommendation: Recommendation}> = ({recomme
                 <div className='group flex items-center gap-3 hover:cursor-pointer'>
                     <div className={`flex grow flex-col`}>
                         <div className="mb-0.5 flex items-center gap-2">
-                            <RecommendationIcon {...recommendation} />
+                            <RecommendationIcon showSubscribes={showSubscribes} {...recommendation} />
                             <span className='line-clamp-1 font-medium'>{recommendation.title}</span>
-                            {showSubscribes && <span className='-mb-px inline-flex h-[19px] shrink-0 items-center rounded-full bg-grey-200 px-1.5 py-0.5 text-2xs font-semibold uppercase tracking-wide text-grey-700'>1-click subscribe</span>}
                         </div>
                         <span className='line-clamp-1 text-xs leading-snug text-grey-700'>{recommendation.url || 'No reason added'}</span>
                     </div>
                 </div>
             </TableCell>
-            <TableCell className='hidden md:!visible md:!table-cell' onClick={showDetails}>
-                <div className={`flex grow flex-col`}>
-                    {count === 0 ? <span className="text-grey-500">0</span> : <span>{count}</span>}
-                    <span className='whitespace-nowrap text-xs text-grey-700'>{showSubscribes ? 'Subscribers from you' : 'Clicks from you'}</span>
-                </div>
+            <TableCell className='hidden w-1/3 md:!visible md:!table-cell' onClick={showDetails}>
+                {(count === 0) ? (<span className="text-grey-500">-</span>) : (<div className='flex grow flex-col'>
+                    <span>{count}</span>
+                    <span className='whitespace-nowrap text-xs text-grey-700'>{showSubscribes ? ('Subscribers from you') : ('Clicks from you')}</span>
+                </div>)}
             </TableCell>
         </TableRow>
     );
 };
 
+// TODO: Remove if we decide we don't need headers
+// const tableHeader = (<><TableHead>Site</TableHead><TableHead>Conversions from you</TableHead></>);
+
 const RecommendationList: React.FC<RecommendationListProps> = ({recommendations, pagination, isLoading}) => {
     if (isLoading || recommendations.length) {
         return <Table hint='Readers will see your recommendations in randomized order' isLoading={isLoading} pagination={pagination} hintSeparator>