perse scope key

apps/app/src/client/components/Me/AccessTokenScopeList.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { useTranslation } from 'next-i18next';
 import type { UseFormRegisterReturn } from 'react-hook-form';
 
 import { useIsDeviceLargerThanMd } from '~/stores/ui';
@@ -35,6 +36,7 @@ export const AccessTokenScopeList: React.FC<AccessTokenScopeListProps> = ({
 
   // Convert object into an array to determine "first vs. non-first" elements
   const entries = Object.entries(scopeObject);
+  const { t } = useTranslation('commons');
 
   return (
     <>
@@ -49,7 +51,6 @@ export const AccessTokenScopeList: React.FC<AccessTokenScopeListProps> = ({
                 <div className="col-md-5 ">
                   <label className={`form-check-label fw-bold indentation indentation-level-${level}`}>{scopeKey}</label>
                 </div>
-                <div className={`col form-text fw-bold ${isDeviceLargerThanMd ? '' : 'text-end'}`}>desc for {scopeKey}</div>
               </div>
 
               {/* Render recursively */}
@@ -78,7 +79,7 @@ export const AccessTokenScopeList: React.FC<AccessTokenScopeListProps> = ({
                 {scopeKey}
               </label>
             </div>
-            <div className={`col form-text ${isDeviceLargerThanMd ? '' : 'text-end'}`}>desc for {scopeKey}</div>
+            <div className={`col form-text ${isDeviceLargerThanMd ? '' : 'text-end'}`}>{t(`accesstoken_scopes_desc.${scopeKey.replace(/:/g, '.')}`)}</div>
           </div>
         );
       })}