Clarify env var insight recommendations

src/admin/insights/AdminAppInsightsClient.tsx

@@ -62,12 +62,21 @@ const readmeAnchor = (anchor: string) =>
     README/{anchor}
   </AdminLink>;
 
-const renderLabeledEnvVar = (label: string, envVar: string, value?: string) =>
+const renderLabeledEnvVar = (
+  label: string,
+  variable: string,
+  value?: string,
+  icon?: ReactNode,
+) =>
   <div className="flex flex-col gap-0.5">
     <span className="text-xs uppercase font-medium tracking-wider">
       {label}
     </span>
-    <EnvVar variable={envVar} value={value} />
+    {icon
+      ? <div className="flex items-center gap-1">
+        {icon} <EnvVar {...{ variable, value }} />
+      </div>
+      :<EnvVar {...{ variable, value }} />}
   </div>;
 
 const renderHighlightText = (
@@ -87,6 +96,21 @@ const renderHighlightText = (
     {text}
   </span>;
 
+const renderWarningIconLarge =
+  <PiWarningBold
+    size={17}
+    className={clsx(
+      'translate-x-[0.5px]',
+      TEXT_COLOR_WARNING,
+    )}
+  />;
+
+const renderWarningIconSmall =
+  <PiWarningBold
+    size={14}
+    className="translate-y-[0.5px] text-extra-dim"
+  />;
+
 export default function AdminAppInsightsClient({
   codeMeta,
   insights,
@@ -118,7 +142,8 @@ export default function AdminAppInsightsClient({
     noAi,
     noAiRateLimiting,
     noConfiguredDomain,
-    noConfiguredMeta,
+    noConfiguredMetaTitle,
+    noConfiguredMetaDescription,
     photosNeedSync,
     photoMatting,
     gridFirst,
@@ -257,13 +282,7 @@ export default function AdminAppInsightsClient({
         {(hasTemplateRecommendations(insights) || debug)
           ? <>
             {(deprecatedEnvVars || debug) && <ScoreCardRow
-              icon={<PiWarningBold
+              icon={renderWarningIconLarge}
-                size={17}
-                className={clsx(
-                  'translate-x-[0.5px]',
-                  TEXT_COLOR_WARNING,
-                )}
-              />}
               content={isExpanded => renderHighlightText(
                 'Update environment variables',
                 'yellow',
@@ -282,7 +301,13 @@ export default function AdminAppInsightsClient({
                       )}
                       direction="horizontal"
                     >
-                      <div className="text-xs font-medium">{old}</div>
+                      <div className={clsx(
+                        'inline-flex items-center gap-1.5',
+                        'text-xs font-medium',
+                      )}>
+                        {renderWarningIconSmall}
+                        {old}
+                      </div>
                       <FaArrowRight
                         size={11}
                         className="shrink-0 text-extra-dim"
@@ -294,13 +319,7 @@ export default function AdminAppInsightsClient({
               </div>}
             />}
             {(noAiRateLimiting || debug) && <ScoreCardRow
-              icon={<PiWarningBold
+              icon={renderWarningIconLarge}
-                size={17}
-                className={clsx(
-                  'translate-x-[0.5px]',
-                  TEXT_COLOR_WARNING,
-                )}
-              />}
               content={isExpanded => renderHighlightText(
                 'Enable AI rate limiting',
                 'yellow',
@@ -313,13 +332,7 @@ export default function AdminAppInsightsClient({
               </>}
             />}
             {(noConfiguredDomain || debug) && <ScoreCardRow
-              icon={<PiWarningBold
+              icon={renderWarningIconLarge}
-                size={17}
-                className={clsx(
-                  'translate-x-[0.5px]',
-                  TEXT_COLOR_WARNING,
-                )}
-              />}
               content={isExpanded => renderHighlightText(
                 'Configure domain',
                 'yellow',
@@ -335,7 +348,11 @@ export default function AdminAppInsightsClient({
                 />
               </>}
             />}
-            {(noConfiguredMeta || debug) && <ScoreCardRow
+            {(
+              noConfiguredMetaTitle ||
+              noConfiguredMetaDescription ||
+              debug
+            ) && <ScoreCardRow
               icon={<HiOutlineDocumentText
                 size={18}
                 className="translate-x-[1px] translate-y-[-1px]"
@@ -346,11 +363,17 @@ export default function AdminAppInsightsClient({
                 and site description (visible in search results):
                 {' '}
                 <div className="flex flex-col gap-y-4 mt-3">
-                  {renderLabeledEnvVar(
+                  {(
+                    noConfiguredMetaTitle ||
+                    debug
+                  ) && renderLabeledEnvVar(
                     'Site title',
                     'NEXT_PUBLIC_META_TITLE',
                   )}
-                  {renderLabeledEnvVar(
+                  {(
+                    noConfiguredMetaDescription ||
+                    debug
+                  ) && renderLabeledEnvVar(
                     'Site description',
                     'NEXT_PUBLIC_META_DESCRIPTION',
                   )}

src/admin/insights/index.ts

@@ -30,7 +30,8 @@ const _INSIGHTS_TEMPLATE = [
   'noAi',
   'noAiRateLimiting',
   'noConfiguredDomain',
-  'noConfiguredMeta',
+  'noConfiguredMetaTitle',
+  'noConfiguredMetaDescription',
   'photoMatting',
   'gridFirst',
   'noStaticOptimization',
@@ -137,9 +138,8 @@ export const getAllInsights = ({
   ...getSignificantInsights({ codeMeta, photosCountNeedSync }),
   noFork: !codeMeta?.isForkedFromBase && !codeMeta?.isBaseRepo,
   noAi: !AI_CONTENT_GENERATION_ENABLED,
-  noConfiguredMeta:
+  noConfiguredMetaTitle: !IS_META_TITLE_CONFIGURED,
-    !IS_META_TITLE_CONFIGURED ||
+  noConfiguredMetaDescription: !IS_META_DESCRIPTION_CONFIGURED,
-    !IS_META_DESCRIPTION_CONFIGURED,
   photoMatting: photosCountPortrait > 0 && !MATTE_PHOTOS,
   gridFirst: (
     photosCount >= BASIC_PHOTO_INSTALLATION_COUNT &&