Rework address & accounts layout

packages/app-accounts/src/Overview.tsx

@@ -5,11 +5,12 @@
 import { I18nProps } from '@polkadot/react-components/types';
 import { ComponentProps } from './types';
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
 import keyring from '@polkadot/ui-keyring';
 import { getLedger, isLedger } from '@polkadot/react-api';
-import { useAccounts } from '@polkadot/react-hooks';
-import { Button, CardGrid } from '@polkadot/react-components';
+import { useAccounts, useFavorites } from '@polkadot/react-hooks';
+import { Button, InputTags, Table } from '@polkadot/react-components';
 
 import CreateModal from './modals/Create';
 import ImportModal from './modals/Import';
@@ -21,6 +22,10 @@ import translate from './translate';
 interface Props extends ComponentProps, I18nProps {
 }
 
+type SortedAccount = { address: string; isFavorite: boolean };
+
+const STORE_FAVS = 'accounts:favorites';
+
 // query the ledger for the address, adding it to the keyring
 async function queryLedger (): Promise<void> {
   const ledger = getLedger();
@@ -34,58 +39,36 @@ async function queryLedger (): Promise<void> {
   }
 }
 
-function Overview ({ onStatusChange, t }: Props): React.ReactElement<Props> {
+function Overview ({ className, onStatusChange, t }: Props): React.ReactElement<Props> {
   const { allAccounts, hasAccounts } = useAccounts();
   const [isCreateOpen, setIsCreateOpen] = useState(false);
   const [isImportOpen, setIsImportOpen] = useState(false);
   const [isQrOpen, setIsQrOpen] = useState(false);
-  const emptyScreen = !(isCreateOpen || isImportOpen || isQrOpen) && !hasAccounts;
+  const [favorites, toggleFavorite] = useFavorites(STORE_FAVS);
+  const [sortedAccounts, setSortedAccounts] = useState<SortedAccount[]>([]);
+  const [tags, setTags] = useState<string[]>([]);
+
+  useEffect((): void => {
+    setSortedAccounts(
+      allAccounts
+        .map((address): SortedAccount => ({ address, isFavorite: favorites.includes(address) }))
+        .sort((a, b): number =>
+          a.isFavorite === b.isFavorite
+            ? 0
+            : b.isFavorite
+              ? 1
+              : -1
+        )
+    );
+  }, [allAccounts, favorites]);
 
   const _toggleCreate = (): void => setIsCreateOpen(!isCreateOpen);
   const _toggleImport = (): void => setIsImportOpen(!isImportOpen);
   const _toggleQr = (): void => setIsQrOpen(!isQrOpen);
 
   return (
-    <CardGrid
-      banner={<Banner />}
-      buttons={
-        <Button.Group>
-          <Button
-            icon='add'
-            isPrimary
-            label={t('Add account')}
-            onClick={_toggleCreate}
-          />
-          <Button.Or />
-          <Button
-            icon='sync'
-            isPrimary
-            label={t('Restore JSON')}
-            onClick={_toggleImport}
-          />
-          <Button.Or />
-          <Button
-            icon='qrcode'
-            isPrimary
-            label={t('Add via Qr')}
-            onClick={_toggleQr}
-          />
-          {isLedger() && (
-            <>
-              <Button.Or />
-              <Button
-                icon='question'
-                isPrimary
-                label={t('Query Ledger')}
-                onClick={queryLedger}
-              />
-            </>
-          )}
-        </Button.Group>
-      }
-      isEmpty={emptyScreen}
-      emptyText={t('No account yet?')}
-    >
+    <div className={className}>
+      <Banner />
       {isCreateOpen && (
         <CreateModal
           onClose={_toggleCreate}
@@ -104,14 +87,82 @@ function Overview ({ onStatusChange, t }: Props): React.ReactElement<Props> {
           onStatusChange={onStatusChange}
         />
       )}
-      {allAccounts.map((address): React.ReactNode => (
-        <Account
-          address={address}
-          key={address}
+      <Button.Group>
+        <Button
+          icon='add'
+          isPrimary
+          label={t('Add account')}
+          onClick={_toggleCreate}
+        />
+        <Button.Or />
+        <Button
+          icon='sync'
+          isPrimary
+          label={t('Restore JSON')}
+          onClick={_toggleImport}
         />
-      ))}
-    </CardGrid>
+        <Button.Or />
+        <Button
+          icon='qrcode'
+          isPrimary
+          label={t('Add via Qr')}
+          onClick={_toggleQr}
+        />
+        {isLedger() && (
+          <>
+            <Button.Or />
+            <Button
+              icon='question'
+              isPrimary
+              label={t('Query Ledger')}
+              onClick={queryLedger}
+            />
+          </>
+        )}
+      </Button.Group>
+      {hasAccounts
+        ? (
+          <>
+            <div className='filter--tags'>
+              <InputTags
+                allowAdd={false}
+                label={t('filter by tags')}
+                onChange={setTags}
+                defaultValue={tags}
+                value={tags}
+              />
+            </div>
+            <Table>
+              <Table.Body>
+                {sortedAccounts.map(({ address, isFavorite }): React.ReactNode => (
+                  <Account
+                    address={address}
+                    allowTags={tags}
+                    isFavorite={isFavorite}
+                    key={address}
+                    toggleFavorite={toggleFavorite}
+                  />
+                ))}
+              </Table.Body>
+            </Table>
+          </>
+        )
+        : t('no accounts yet, create or import and existing')
+      }
+    </div>
   );
 }
 
-export default translate(Overview);
+export default translate(
+  styled(Overview)`
+    .filter--tags {
+      .ui--Dropdown {
+        padding-left: 0;
+
+        label {
+          left: 1.55rem;
+        }
+      }
+    }
+  `
+);