feat: conditionally render Access Token Settings for non-readOnly users

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

@@ -2,6 +2,8 @@ import React from 'react';
 
 import { useTranslation } from 'next-i18next';
 
+import { useCurrentUser } from '~/stores-universal/context';
+
 import { AccessTokenSettings } from './AccessTokenSettings';
 import { ApiTokenSettings } from './ApiTokenSettings';
 
@@ -9,6 +11,7 @@ import { ApiTokenSettings } from './ApiTokenSettings';
 const ApiSettings = React.memo((): JSX.Element => {
 
   const { t } = useTranslation();
+  const { data: currentUser } = useCurrentUser();
 
   return (
     <>
@@ -16,10 +19,12 @@ const ApiSettings = React.memo((): JSX.Element => {
         <h2 className="border-bottom pb-2 my-4 fs-4">{ t('API Token Settings') }</h2>
         <ApiTokenSettings />
       </div>
-      <div className="mt-4">
-        <h2 className="border-bottom pb-2 my-4 fs-4">{ t('Access Token Settings') }</h2>
-        <AccessTokenSettings />
-      </div>
+      {!currentUser?.readOnly && (
+        <div className="mt-4">
+          <h2 className="border-bottom pb-2 my-4 fs-4">{ t('Access Token Settings') }</h2>
+          <AccessTokenSettings />
+        </div>
+      )}
     </>
   );
 });