Seconding grouping

packages/app-democracy/src/Overview/Proposal.tsx

@@ -20,6 +20,8 @@ interface Props extends I18nProps {
 }
 
 function Proposal ({ className, t, value: { balance, hash, index, proposal, proposer, seconds } }: Props): React.ReactElement<Props> {
+  const seconding = seconds.filter((_address, index): boolean => index !== 0);
+
   return (
     <tr className={className}>
       <td className='number top'><h1>{formatNumber(index)}</h1></td>
@@ -30,19 +32,23 @@ function Proposal ({ className, t, value: { balance, hash, index, proposal, prop
         <FormatBalance label={<label>{t('locked')}</label>} value={balance} />
       </td>
       <ProposalCell className='top' proposalHash={hash} proposal={proposal} />
-      <td className='top'>
-        {seconds
-          .filter((_address, index): boolean => index !== 0)
-          .map((address, count): React.ReactNode => (
-            <AddressMini
-              className='identityIcon'
-              key={`${count}:${address}`}
-              label={count ? undefined : t('seconds')}
-              value={address}
-              withBalance={false}
-              withShrink
-            />
-          ))}
+      <td className='top seconding'>
+        {seconding.length !== 0 && (
+          <details>
+            <summary>
+              {t('Seconds ({{count}})', { replace: { count: seconds.length } })}
+            </summary>
+            {seconding.map((address, count): React.ReactNode => (
+              <AddressMini
+                className='identityIcon'
+                key={`${count}:${address}`}
+                value={address}
+                withBalance={false}
+                withShrink
+              />
+            ))}
+          </details>
+        )}
       </td>
       <td className='together number top'>
         <Seconding
@@ -65,5 +71,9 @@ export default translate(
         margin-bottom: 4px;
       }
     }
+
+    .seconding {
+      padding-top: 1.1rem;
+    }
   `
 );