From 8dd443be1754e4214544fd1ef928678e76170743 Mon Sep 17 00:00:00 2001
From: Piotr Rogowski <piotr.rogowski0@gmail.com>
Date: Tue, 15 Nov 2022 22:29:48 +0100
Subject: [PATCH] Add verified badge

---
 src/@types/pocketbase-types.ts |  1 +
 src/css/overrides.less         |  4 ++++
 src/pages/Hub.tsx              | 38 +++++++++++++++++++++++++++++-----
 3 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/src/@types/pocketbase-types.ts b/src/@types/pocketbase-types.ts
index da12b445..a65d0212 100644
--- a/src/@types/pocketbase-types.ts
+++ b/src/@types/pocketbase-types.ts
@@ -72,6 +72,7 @@ export type UsersRecord = {
   username: string
   email: string
   verified: boolean
+  verifiedAuthor?: boolean
 }
 
 export type UsersResponse = UsersRecord & BaseRecord
diff --git a/src/css/overrides.less b/src/css/overrides.less
index e9aecc74..726f48ac 100644
--- a/src/css/overrides.less
+++ b/src/css/overrides.less
@@ -38,3 +38,7 @@ reach-portal>div {
 .ant-tag {
   background-color: transparent;
 }
+
+.ant-table-tbody>tr.ant-table-row:hover>td {
+  background: @main-dark;
+}
diff --git a/src/pages/Hub.tsx b/src/pages/Hub.tsx
index c44c5241..b4cf0774 100644
--- a/src/pages/Hub.tsx
+++ b/src/pages/Hub.tsx
@@ -8,6 +8,7 @@ import {
   Space,
   Table,
   Tag,
+  Tooltip,
   Typography,
 } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
@@ -16,6 +17,7 @@ import {
   StarOutlined,
   ArrowRightOutlined,
   EditOutlined,
+  CheckCircleFilled,
 } from '@ant-design/icons';
 import {
   useCallback,
@@ -131,7 +133,12 @@ const Hub = () => {
           <Space direction="vertical">
             <Text type="secondary">
               <Link to={generatePath(Routes.USER_ROOT, { userId: tune.author })}>
-                {(tune as any).authorUsername}
+                <Space>
+                  {(tune.expand?.author as unknown as UsersResponse).verifiedAuthor === true && (
+                    <Tooltip title="Verified author"><CheckCircleFilled /></Tooltip>
+                  )}
+                  {(tune as any).authorUsername}
+                </Space>
               </Link>, {tune.updated}, {tune.stars} <StarOutlined />
             </Text>
             <Text>{tune.engineMake}, {tune.engineCode}, {tune.displacement}, {tune.cylindersCount} cylinders, {tune.aspiration}</Text>
@@ -190,7 +197,12 @@ const Hub = () => {
       responsive: ['sm'],
       render: (userName: string, record: TunesResponse) => (
         <Link to={generatePath(Routes.USER_ROOT, { userId: record.author })}>
-          {userName}
+          <Space>
+            {(record.expand?.author as unknown as UsersResponse).verifiedAuthor === true && (
+              <Tooltip title="Verified author"><CheckCircleFilled /></Tooltip>
+            )}
+            {userName}
+          </Space>
         </Link>
       ),
     },
@@ -224,9 +236,25 @@ const Hub = () => {
 
         return (
           <Space>
-            {isOwner && <Button size={size} icon={<EditOutlined />} onClick={() => goToEdit(tuneId)} />}
-            {isClipboardSupported && <Button size={size} icon={<CopyOutlined />} onClick={() => copyToClipboard(buildFullUrl([tunePath(tuneId)]))} />}
-            <Button size={size} type="primary" icon={<ArrowRightOutlined />} onClick={() => navigate(tunePath(tuneId))} />
+            {isOwner && (
+              <Button
+                size={size}
+                icon={<EditOutlined />}
+                onClick={() => goToEdit(tuneId)}
+              />
+            )}
+            {isClipboardSupported && (
+              <Button
+                size={size}
+                icon={<CopyOutlined />}
+                onClick={() => copyToClipboard(buildFullUrl([tunePath(tuneId)]))}
+              />
+            )}
+            <Button
+              size={size}
+              type="primary"
+              icon={<ArrowRightOutlined />} onClick={() => navigate(tunePath(tuneId))}
+            />
           </Space>
         );
       },