fixing how categories display

fakeyou/src/v2/view/moderation/moderation_tts_category_list/ModerationTtsCategoryListPage.tsx

@@ -69,8 +69,8 @@ function ModerationTtsCategoryListPage(props: Props) {
         </thead>
         <tbody>
           {ttsCategories.map(category => {
-
             let name = <>{category.name}</>;
+
             if (!!category.maybe_dropdown_name) {
               name = (
                 <>

fakeyou/src/v2/view/tts/tts_model_view/TtsModelViewFc.tsx

@@ -198,10 +198,11 @@ function TtsModelViewFc(props: Props) {
     );
   }
 
-  let editModelButton = <span />;
-  let editModelCategoriesButton = <span />;
+  let canEditModel = props.sessionWrapper.canEditTtsModelByUserToken(ttsModel?.creator_user_token);
 
-  if (props.sessionWrapper.canEditTtsModelByUserToken(ttsModel?.creator_user_token)) {
+  let editModelButton = <span />;
+
+  if (canEditModel) {
     editModelButton = (
       <>
         <br />
@@ -211,14 +212,6 @@ function TtsModelViewFc(props: Props) {
           >Edit Model Details</Link>
       </>
     );
-    editModelCategoriesButton = (
-      <>
-        <Link 
-          className={"button is-large is-info is-fullwidth"}
-          to={FrontendUrlConfig.ttsModelEditCategoriesPage(token)}
-          >Edit Model Categories</Link>
-      </>
-    );
   }
 
   let deleteModelButton = <span />;
@@ -259,21 +252,49 @@ function TtsModelViewFc(props: Props) {
     );
   }
 
-  let modelCategories = null;
-  if (assignedCategories.length !== 0) {
-    modelCategories = (
+  const showCategorySection = canEditModel || assignedCategories.length !== 0;
+  let modelCategoriesSection = <></>;
+
+  if (showCategorySection) {
+    let modelCategories = null;
+
+    if (assignedCategories.length !== 0) {
+      modelCategories = (
+        <>
+          <div className="content">
+            <ul>
+            {assignedCategories.map(category => {
+              return (
+                <>
+                  <li>{category.name}</li>
+                </>
+              );
+            })}
+            </ul>
+          </div>
+        </>
+      );
+    }
+
+    let editModelCategoriesButton = null;
+
+    if (canEditModel) {
+      editModelCategoriesButton = (
+        <>
+          <Link 
+            className={"button is-large is-info is-fullwidth"}
+            to={FrontendUrlConfig.ttsModelEditCategoriesPage(token)}
+            >Edit Model Categories</Link>
+        </>
+      );
+    }
+
+    modelCategoriesSection = (
       <>
-        <div className="content">
-          <ul>
-          {assignedCategories.map(category => {
-            return (
-              <>
-                <li>{category.name}</li>
-              </>
-            );
-          })}
-          </ul>
-        </div>
+        <h4 className="title is-4"> Model Categories </h4>
+        {modelCategories}
+        {editModelCategoriesButton}
+        <br />
       </>
     );
   }
@@ -327,10 +348,7 @@ function TtsModelViewFc(props: Props) {
     
       {modelDescription}
 
-      <h4 className="title is-4"> Model Categories </h4>
-      {modelCategories}
-      {editModelCategoriesButton}
-      <br />
+      {modelCategoriesSection}
 
       <table className="table is-fullwidth">
         <tbody>