Add insight expand interaction

src/admin/AdminAppInsightsClient.tsx

@@ -58,7 +58,6 @@ export default function AdminAppInsightsClient({
   return (
     <div className={clsx(
       'flex flex-col items-center w-full',
-      'mt-2 mb-1',
     )}>
       <div className={clsx(
         'w-full sm:w-[80%] lg:w-[60%]',
@@ -72,28 +71,27 @@ export default function AdminAppInsightsClient({
                 className="translate-x-[0.5px] text-amber-600"
               />
             }
-          >
-            This fork is 9 commits behind
-          </ScoreCardRow>
+            content="This fork is 9 commits behind"
+            additionalContent="This fork is 9 commits behind"
+          />
           <ScoreCardRow
-            icon={
-              <PiWarningBold
-                size={17}
-                className="translate-x-[0.5px] text-amber-600"
-              />}
-          >
-            Consider enabling rate limiting to mitigate AI abuse
-          </ScoreCardRow>
+            icon={<PiWarningBold
+              size={17}
+              className="translate-x-[0.5px] text-amber-600"
+            />}
+            content="Consider enabling rate limiting to mitigate AI abuse"
+            // eslint-disable-next-line max-len
+            additionalContent="Consider enabling rate limiting to mitigate AI abuse"
+          />
           <ScoreCardRow
             icon={<IconGrSync />}
-          >
-            Consider forking this repository to receive new features and fixes
-          </ScoreCardRow>
+            // eslint-disable-next-line max-len
+            content="Consider forking this repository to receive new features and fixes"
+          />
           <ScoreCardRow
             icon={<HiSparkles />}
-          >
-            Enable AI text generation in the app configuration
-          </ScoreCardRow>
+            content="Enable AI text generation in the app configuration"
+          />
         </ScoreCard>
         {renderTitle('Code Observability')}
         {(fork || debug) &&

src/components/ScoreCardRow.tsx

@@ -1,29 +1,42 @@
 import { clsx } from 'clsx';
-import { ReactNode } from 'react';
+import { ReactNode, useState } from 'react';
+import { FaMinus, FaPlus } from 'react-icons/fa6';
 export default function ScoreCardRow({
   icon,
-  children,
-  details,
+  content,
+  additionalContent,
 }: {
   icon: ReactNode
-  children: ReactNode
-  details?: string
+  content: ReactNode
+  additionalContent?: ReactNode
 }) {
+  const [isExpanded, setIsExpanded] = useState(false);
   return (
     <div className={clsx(
-      'flex items-center gap-4',
+      'flex gap-4',
       'px-4 py-2',
     )}>
-      <div className="flex items-center gap-2 shrink-0">
+      <div className="pt-[3px] shrink-0">
         {icon}
       </div>
-      <div>
-        {children}
+      <div className="grow space-y-4">
+        <div className="text-main">
+          {content}
+        </div>
+        {isExpanded &&
+          <div className="text-sm text-medium">
+            {additionalContent}
+          </div>}
       </div>
-      {details &&
-        <span className="text-sm text-gray-500">
-          {details}
-        </span>}
+      {additionalContent && <button
+        type="button"
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="px-[9px] self-start -mr-1"
+      >
+        {isExpanded
+          ? <FaMinus />
+          : <FaPlus />}
+      </button>}
     </div>
   );
 }