frontend Mod Controller Compatibility Info and Required Disclosures system

.gitignore

@@ -306,4 +306,5 @@ $RECYCLE.BIN/
 /graphql.schema.*
 /.svelte-kit
 /.pnpm-store
-.direnv
+.direnv
+vite.config.js.timestamp-*.mjs

.vscode/extensions.json

@@ -6,6 +6,7 @@
     "csstools.postcss",
     "vunguyentuan.vscode-postcss",
     "github.copilot",
-    "eamodio.gitlens"
+    "eamodio.gitlens",
+    "joshbolduc.commitlint"
   ]
 }

CONTRIBUTING.md

@@ -122,7 +122,7 @@ To do this:
 3. Visit [the project's integration page](https://translate.ficsit.app/projects/2/integrate) to generate an API key (the "weapon" you select does not matter)
 4. Replace the `PUBLIC_TOLGEE_API_KEY` in your new env file with the API key you generated
 5. Use your new env name when running commands.
-   For example, run `fenv personal` to switch to it.
+   For example, use `NODE_ENV=personal` before commands to use it.
 
 Using the in-context translation Screenshot feature also requires installing the _Tolgee Tools_ browser extension.
 
@@ -159,11 +159,11 @@ It executes several smaller scripts for you:
 * GraphQL Code Generator with hot reload (graphql-codegen:watch)
 * ESLint with hot reload (lint:dev)
 
-Run the dev script via `bun dev`.
+Run the dev script via `bun run dev`.
 For example:
 
 ```shell
-NODE_ENV=staging bun dev
+NODE_ENV=staging bun run dev
 ```
 
 The expected output is:

cspell.json

@@ -13,6 +13,7 @@
     "fenv",
     "ficsit",
     "gpgsign",
+    "ostring",
     "pnpx",
     "prismjs",
     "SCIM",

package.json

@@ -9,7 +9,8 @@
     "build:static": "rimraf .svelte build/static && vite build",
     "check": "svelte-check --ignore build,.svelte,.svelte-kit",
     "check:dev": "svelte-check --ignore build,.svelte,.svelte-kit --watch",
-    "dev": "conc -c 'auto' bun:graphql-codegen:watch bun:dev:serve bun:check:dev bun:lint:dev",
+    "log_env": "bun -e \"console.log('Current NODE_ENV:', process.env.NODE_ENV)\"",
+    "dev": "conc -c 'auto' bun:log_env bun:graphql-codegen:watch bun:dev:serve bun:check:dev bun:lint:dev",
     "dev:serve": "vite dev --host",
     "graphql-codegen": "graphql-codegen -r dotenv-flow/config --default-node-env=development --config codegen.yml",
     "graphql-codegen:watch": "bun graphql-codegen --watch",

src/gql/home/mods.graphql

@@ -35,6 +35,10 @@ query GetMods($offset: Int!, $limit: Int!, $search: String, $order: Order, $orde
           note
           state
         }
+        Controller {
+          note
+          state
+        }
       }
       tags {
         id

src/gql/mods/edit_mod.graphql

@@ -24,11 +24,20 @@ mutation EditMod($modId: ModID!, $mod: UpdateMod!) {
         state
         note
       }
+      Controller {
+        state
+        note
+      }
     }
     tags {
       id
       name
       description
     }
+    network_use_disclosure
+    ai_use_disclosure {
+      disclosure_type
+      message
+    }
   }
 }

src/gql/mods/mod.graphql

@@ -85,11 +85,20 @@ query GetMod($mod: String!) {
         note
         state
       }
+      Controller {
+        note
+        state
+      }
     }
     tags {
       id
       name
       description
     }
+    network_use_disclosure
+    ai_use_disclosure {
+      disclosure_type
+      message
+    }
   }
 }

src/gql/users/user.graphql

@@ -36,6 +36,10 @@ query GetUser($user: UserID!) {
             state
             note
           }
+          Controller {
+            state
+            note
+          }
         }
         tags {
           id

src/lib/components/mods/ModForm.svelte

@@ -2,16 +2,23 @@
   import { createForm } from 'felte';
   import { validator } from '@felte/validator-zod';
   import { reporter, ValidationMessage } from '@felte/reporter-svelte';
-  import type { ModData } from '$lib/models/mods';
-  import { modSchema } from '$lib/models/mods';
+  import type { ModData, ModFormData } from '$lib/models/mods';
+  import {
+    AiDisclosureChoice,
+    AiDisclosureChoiceToDbType,
+    modFormSchema,
+    NetworkDisclosureState
+  } from '$lib/models/mods';
   import { trimNonSchema } from '$lib/utils/forms';
   import { markdown } from '$lib/utils/markdown';
   import ModAuthor from '$lib/components/mods/ModAuthor.svelte';
   import TagList from '$lib/components/utils/TagList.svelte';
-  import { CompatibilityState } from '$lib/generated';
+  import { CompatibilityState, ControllerCompatibilityState } from '$lib/generated';
   import ModCompatibility from '$lib/components/mods/compatibility/ModCompatibilityEdit.svelte';
   import { getTranslate } from '@tolgee/svelte';
   import { SlideToggle } from '@skeletonlabs/skeleton';
+  import ModNetworkDisclosureEdit from './disclosure/ModNetworkDisclosureEdit.svelte';
+  import ModAiDisclosureEdit from './disclosure/ModAiDisclosureEdit.svelte';
 
   export const { t } = getTranslate();
 
@@ -32,45 +39,100 @@
       EXP: {
         state: CompatibilityState.Works,
         note: ''
+      },
+      Controller: {
+        state: ControllerCompatibilityState.Untested,
+        note: ''
       }
     }
   };
   export let submitText = $t('entry.create');
 
   export let editing = false;
 
-  const { form, data } = createForm<ModData>({
+  let networkUseDisclosureDropdownChoice: NetworkDisclosureState = NetworkDisclosureState.Unspecified;
+
+  // Both the schema validator and validate() apply and merge their reported errors
+  const { form, data, errors } = createForm<ModFormData>({
     initialValues: initialValues,
-    extend: [validator({ schema: modSchema }), reporter],
-    onSubmit: (submitted: ModData) => onSubmit(trimNonSchema(submitted, modSchema))
+    extend: [validator({ schema: modFormSchema }), reporter],
+    onSubmit: (submitted: ModFormData) => {
+      // Transform pending AI Disclosure data into the format the query wants
+      const choice = submitted.pending_ai_use_disclosure?.choice ?? AiDisclosureChoice.Unspecified;
+      let db_disclosure: ModData['ai_use_disclosure'] = null;
+      if (choice !== AiDisclosureChoice.Unspecified) {
+        db_disclosure = {
+          disclosure_type: AiDisclosureChoiceToDbType[choice],
+          message: submitted.pending_ai_use_disclosure!.message
+        };
+      }
+      delete submitted.pending_ai_use_disclosure;
+
+      // NewMod does not have a compatibility field
+      if (!editing) {
+        delete submitted.compatibility;
+      }
+
+      // trimNonSchema errors if ai_use_disclosure data is present, so it must be added after
+      const nonSchema: ModData = trimNonSchema(submitted, modFormSchema);
+      nonSchema.ai_use_disclosure = db_disclosure;
+      return onSubmit(nonSchema);
+    },
+    validate: (values) => {
+      if (
+        networkUseDisclosureDropdownChoice === NetworkDisclosureState.YesNetworkUsage &&
+        (values?.network_use_disclosure?.trim()?.length ?? 0) <= 0
+      ) {
+        return {
+          network_use_disclosure: $t('mod.network_disclosure.developer.error.disclosure-required')
+        };
+      }
+      return {};
+    }
+  });
+
+  const _hasErrorContent = (key: string, value: unknown): boolean => {
+    if (value === null) {
+      return false;
+    } else if (key === 'authors') {
+      // Skip authors field since final submit gives it values unrelated to validation?
+      return false;
+    } else if (key === 'pending_ai_use_disclosure' && Array.isArray(value) && value.length === 0) {
+      // Stupid case where the custom error is eaten and turned into empty array
+      return true;
+    } else if (Array.isArray(value)) {
+      return value.some((item) => _hasErrorContent('', item));
+    } else if (typeof value === 'object') {
+      return Object.entries(value).some(([k, v]) => _hasErrorContent(k, v));
+    }
+    return true;
+  };
+
+  // Debug logging of form errors. Intentionally kept in case we run into some weird edge cases.
+  errors.subscribe((e) => {
+    if (Object.entries(e).some(([key, value]) => _hasErrorContent(key, value))) {
+      console.log('DEBUG: ModForm Errors', e);
+    }
   });
 
   let tags = $data.tags;
-  const computeTags = () => {
-    $data.tagIDs = tags.map((tag) => tag.id);
+  const computeTagIds = () => {
+    $data.tagIDs = tags!.map((tag) => tag.id);
   };
 
   $: if (tags) {
-    computeTags();
-  }
-
-  // The GQL type NewMod does not have a compatibility field.
-  // We remove the field from the data so that the GQL request is valid
-  $: {
-    if (!editing) {
-      delete $data.compatibility;
-    }
+    computeTagIds();
   }
 
   $: preview = ($data.full_description as string) || '';
 
   const addAuthor = () => {
-    $data.authors.push({ role: 'editor', user_id: '', key: '' });
+    $data.authors!.push({ role: 'editor', user_id: '', key: '' });
     $data.authors = $data.authors;
   };
 
   const removeAuthor = (i: number) => {
-    $data.authors.splice(i, 1);
+    $data.authors!.splice(i, 1);
     $data.authors = $data.authors;
   };
 
@@ -169,8 +231,9 @@
         <span class="validation-message">{message || ''}</span>
       </ValidationMessage>
     </div>
+
     {#if editing}
-      <div>
+      <div class="card p-4">
         <SlideToggle
           name="slider-label"
           bind:checked={editCompatibility}
@@ -179,42 +242,83 @@
           }}>
           {$t('compatibility-info.edit')}
         </SlideToggle>
+
+        {#if editCompatibility}
+          <ModCompatibility bind:compatibilityInfo={$data.compatibility} />
+        {/if}
       </div>
 
-      {#if editCompatibility}
-        <ModCompatibility bind:compatibilityInfo={$data.compatibility} />
-      {/if}
+      <div class="card p-4">
+        <ModAiDisclosureEdit bind:ai_disclosure={$data.pending_ai_use_disclosure} />
+        <ValidationMessage for="pending_ai_use_disclosure" let:messages={message}>
+          <span class="validation-message"
+            >{(() => {
+              // Very bizarre data handling to work around zod/felte/something reporting error format improperly, in inconsistent formats (see mods.ts)
+              if (!message) {
+                // Case where there is no error
+                return '';
+              } else if ('message' in message) {
+                // Case where the custom error actually gets reported, but as an object
+                if (message.message === null) {
+                  // When the user fixes the error, it changes to this state
+                  return '';
+                }
+                return message?.message;
+              } else if (Array.isArray(message) && message.length === 0) {
+                // Case where nothing but `[]` is returned despite the custom error code executing
+                // (Intentionally not localized since the one in mods.ts isn't either)
+                return 'You must provide a description.';
+              } else {
+                // Backup in case something else comes out (who knows!?)
+                return 'Error displaying error message, raw value is: ' + JSON.stringify(message);
+              }
+            })()}</span>
+        </ValidationMessage>
+      </div>
 
-      <div class="grid grid-flow-row gap-2">
-        <div class="flex items-center">
-          <h4 class="mr-4">{$t('authors')}</h4>
-          <button class="variant-ghost-primary btn" type="button" on:click={addAuthor}>
-            <span>{$t('add')}</span>
-          </button>
-        </div>
-        {#each $data.authors as author, i}
-          <div class="flex items-end">
-            {#if $data.authors[i].user_id}
-              <div class="p-2">
-                <ModAuthor id={$data.authors[i].user_id} />
-              </div>
-            {/if}
-            <label class="label">
-              <span>User ID</span>
-              <input
-                type="text"
-                bind:value={$data.authors[i].user_id}
-                required
-                class="input p-2"
-                disabled={author.role === 'creator'} />
-            </label>
-            {#if author.role !== 'creator'}
-              <button class="variant-ghost-primary btn" type="button" on:click={() => removeAuthor(i)}>
-                <span>{$t('remove')}</span>
-              </button>
-            {/if}
+      <div class="card p-4">
+        <ModNetworkDisclosureEdit
+          bind:dropdownChoiceForValidation={networkUseDisclosureDropdownChoice}
+          bind:disclosure={$data.network_use_disclosure} />
+        <ValidationMessage for="network_use_disclosure" let:messages={message}>
+          <span class="validation-message">{message || ''}</span>
+        </ValidationMessage>
+      </div>
+
+      <div class="card p-4">
+        <div class="grid grid-flow-row gap-2">
+          <div class="flex items-center">
+            <h4 class="mr-4">{$t('authors')}</h4>
+            <button class="variant-ghost-primary btn" type="button" on:click={addAuthor}>
+              <span>{$t('add')}</span>
+            </button>
           </div>
-        {/each}
+          {#if $data.authors !== undefined}
+            {#each $data.authors as author, i}
+              <div class="flex items-end">
+                {#if $data.authors[i].user_id}
+                  <div class="p-2">
+                    <ModAuthor id={$data.authors[i].user_id} />
+                  </div>
+                {/if}
+                <label class="label">
+                  <span>User ID</span>
+                  <input
+                    type="text"
+                    bind:value={$data.authors[i].user_id}
+                    required
+                    class="input p-2"
+                    disabled={author.role === 'creator'} />
+                </label>
+                {#if author.role !== 'creator'}
+                  <button class="variant-ghost-primary btn" type="button" on:click={() => removeAuthor(i)}>
+                    <span>{$t('remove')}</span>
+                  </button>
+                {/if}
+              </div>
+            {/each}
+          {/if}
+        </div>
       </div>
     {/if}