Add icons to GridRep with tooltips

components/reps/GridRep/index.module.scss

@@ -241,6 +241,18 @@
         gap: calc($unit / 2);
       }
 
+      .icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: $unit * 2.5;
+        height: $unit * 2.5;
+
+        svg {
+          fill: var(--text-tertiary);
+        }
+      }
+
       button svg {
         width: 14px;
         height: 14px;

components/reps/GridRep/index.tsx

@@ -10,8 +10,11 @@ import { accountState } from '~utils/accountState'
 import { formatTimeAgo } from '~utils/timeAgo'
 
 import Button from '~components/common/Button'
+import Tooltip from '~components/common/Tooltip'
 
 import SaveIcon from '~public/icons/Save.svg'
+import PrivateIcon from '~public/icons/Private.svg'
+import UnlistedIcon from '~public/icons/Unlisted.svg'
 import ShieldIcon from '~public/icons/Shield.svg'
 import styles from './index.module.scss'
 
@@ -472,6 +475,48 @@ const GridRep = ({ party, loading, onClick, onSave }: Props) => {
     </div>
   )
 
+  const favoriteButton = (
+    <Link href="#">
+      <Button
+        className={classNames({
+          save: true,
+          saved: party.favorited,
+        })}
+        leftAccessoryIcon={<SaveIcon className="stroke" />}
+        active={party.favorited}
+        bound={true}
+        size="small"
+        onClick={sendSaveData}
+      />
+    </Link>
+  )
+
+  function buttonArea() {
+    if (
+      account.authorized &&
+      ((party.user && account.user && account.user.id !== party.user.id) ||
+        !party.user)
+    ) {
+      return favoriteButton
+    } else if (party.visibility === 2) {
+      return (
+        <Tooltip content={t('party.tooltips.unlisted')}>
+          <span className={styles.icon}>
+            <UnlistedIcon />
+          </span>
+        </Tooltip>
+      )
+    } else if (party.visibility === 3) {
+      return (
+        <Tooltip content={t('party.tooltips.private')}>
+          <span className={styles.icon}>
+            <PrivateIcon />
+          </span>
+        </Tooltip>
+      )
+    }
+  }
+
   const detailsWithUsername = (
     <div className={styles.details}>
       <div className={styles.top}>
@@ -493,25 +538,7 @@ const GridRep = ({ party, loading, onClick, onSave }: Props) => {
             )}
           </div>
         </div>
-        {account.authorized &&
+        {buttonArea()}
-        ((party.user && account.user && account.user.id !== party.user.id) ||
-          !party.user) ? (
-          <Link href="#">
-            <Button
-              className={classNames({
-                save: true,
-                saved: party.favorited,
-              })}
-              leftAccessoryIcon={<SaveIcon className="stroke" />}
-              active={party.favorited}
-              bound={true}
-              size="small"
-              onClick={sendSaveData}
-            />
-          </Link>
-        ) : (
-          ''
-        )}
       </div>
       <div className={styles.attributed}>
         {attribution()}

public/locales/en/common.json

@@ -499,6 +499,10 @@
         "copy_link": "Copy link",
         "change_visibility": "Change visibility"
       }
+    },
+    "tooltips": {
+      "unlisted": "This party is unlisted",
+      "private": "This party is private"
     }
   },
   "proficiencies": {

public/locales/ja/common.json

@@ -487,6 +487,7 @@
         "minutes": "分",
         "seconds": "秒"
       },
+
       "turns": {
         "with_count_one": "{{count}}ターン",
         "with_count_other": "{{count}}ターン"
@@ -499,6 +500,10 @@
         "copy_link": "リンクをコピー",
         "change_visibility": "プライバシー設定を変更"
       }
+    },
+    "tooltips": {
+      "unlisted": "この編成は限定公開",
+      "private": "この編成は未公開"
     }
   },
   "proficiencies": {