Add: Add ability to hide admin info

sevenc-nanashi · Sep 5, 2024 · 2067051 · 2067051
1 parent 70fd401
commit 2067051
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 14 deletions.
diff --git a/frontend/app/routes/users.$handle.tsx b/frontend/app/routes/users.$handle.tsx
@@ -1,4 +1,6 @@
 import {
+  EyeRegular,
+  EyeOffRegular,
   MusicNote2Regular,
   OpenRegular,
   PersonFilled,
@@ -98,6 +100,7 @@ const UserPage = () => {
     warnCount: number;
     owner: User | null;
   } | null>(null);
+  const [showSecretUserInfo, setShowSecretUserInfo] = useState(false);
 
   useEffect(() => {
     if (!isAdmin(session)) {
@@ -134,22 +137,34 @@ const UserPage = () => {
             </p>
 
             {secretUserInfo && (
-              <p className="text-md mt-4 card">
-                <Trans t={t} i18nKey="secretUserInfo">
-                  {secretUserInfo.owner ? (
-                    <Link to={`/users/${secretUserInfo.owner.handle}`} />
+              <div className="text-md mt-4 card flex flex-col">
+                <button onClick={() => setShowSecretUserInfo(!showSecretUserInfo)} className="font-bold text-left">
+                  {showSecretUserInfo ? (
+                    <EyeOffRegular className="mr-1 w-6 h-6" />
                   ) : (
-                    <span />
+                    <EyeRegular className="mr-1 w-6 h-6" />
                   )}
-                  {{
-                    discord: secretUserInfo.discord.username,
-                    warn: secretUserInfo.warnCount,
-                    owner: secretUserInfo.owner
-                      ? `${secretUserInfo.owner.name}#${secretUserInfo.owner.handle}`
-                      : "-",
-                  }}
-                </Trans>
-              </p>
+                  {t("showSecret")}
+                </button>
+                {showSecretUserInfo && (
+                  <p>
+                    <Trans t={t} i18nKey="secretUserInfo">
+                      {secretUserInfo.owner ? (
+                        <Link to={`/users/${secretUserInfo.owner.handle}`} />
+                      ) : (
+                        <span />
+                      )}
+                      {{
+                        discord: secretUserInfo.discord.username,
+                        warn: secretUserInfo.warnCount,
+                        owner: secretUserInfo.owner
+                          ? `${secretUserInfo.owner.name}#${secretUserInfo.owner.handle}`
+                          : "-",
+                      }}
+                    </Trans>
+                  </p>
+                )}
+              </div>
             )}
             <p className="flex-grow mt-4 mr-4 whitespace-pre-wrap break-words w-full">
               {userData.aboutMe}

diff --git a/frontend/i18n/en.yml b/frontend/i18n/en.yml
@@ -99,6 +99,7 @@ searchCharts:
 user:
   totalCharts: "Total charts: {{count}}"
   totalLikes: "Total likes: {{count}}"
+  showSecret: "Toggle admin-only information"
   secretUserInfo: "Discord: {{discord}}, Warnings: {{warn}}, Owner: <0></0>"
   userCharts: "Charts by this user"
 

diff --git a/frontend/i18n/ja.yml b/frontend/i18n/ja.yml
@@ -99,6 +99,7 @@ searchCharts:
 user:
   totalCharts: "総譜面数：{{count}}"
   totalLikes: "総高評価数：{{count}}"
+  showSecret: "管理者専用情報"
   secretUserInfo: "Discord：{{discord}}、警告数：{{warn}}、本名義：<0>{{owner}}</0>"
   userCharts: "この作者の譜面"