Role for character

frontend/src/components/character_edit.tsx

@@ -1,11 +1,11 @@
 import { useState } from "react";
-import { CharacterParams } from "../network/models";
+import { CharacterParams, CharacterRole } from "../network/models";
 import { network } from "../network/network";
 import showToast from "./toast";
 import { useTranslation } from "../utils/i18n";
 import Button from "./button";
 
-export default function CharactorEditor({charactor, setCharactor, onDelete}: {
+export default function CharacterEditer({charactor, setCharactor, onDelete}: {
     charactor: CharacterParams;
     setCharactor: (charactor: CharacterParams) => void;
     onDelete: () => void;
@@ -82,6 +82,15 @@ export default function CharactorEditor({charactor, setCharactor, onDelete}: {
           onChange={(e) => setCharactor({ ...charactor, cv: e.target.value })}
         />
         
+        <select
+          className="select select-sm select-bordered"
+          value={charactor.role}
+          onChange={(e) => setCharactor({ ...charactor, role: e.target.value as CharacterRole })}
+        >
+          <option value="primary">{t("Primary Role")}</option>
+          <option value="side">{t("Side Role")}</option>
+        </select>
+        
         <div className="flex-1">
           <textarea
             className="textarea textarea-bordered w-full h-full resize-none text-xs"

frontend/src/network/models.ts

@@ -52,11 +52,14 @@ export interface CreateResourceParams {
   characters: CharacterParams[];
 }
 
+export type CharacterRole = 'primary' | 'side';
+
 export interface CharacterParams {
   name: string;
   alias: string[];
   cv: string;
   image: number;
+  role: CharacterRole;
 }
 
 export interface Image {

frontend/src/pages/edit_resource_page.tsx

@@ -20,7 +20,7 @@ import {
   SelectAndUploadImageButton,
   UploadClipboardImageButton,
 } from "../components/image_selector.tsx";
-import CharactorEditor, { FetchVndbCharactersButton } from "../components/charactor_edit.tsx";
+import CharacterEditer, { FetchVndbCharactersButton } from "../components/character_edit.tsx";
 
 export default function EditResourcePage() {
   const [title, setTitle] = useState<string>("");
@@ -429,7 +429,7 @@ export default function EditResourcePage() {
           <div className="grid grid-cols-1 md:grid-cols-2 my-2 gap-4">
             {
               charactors.map((charactor, index) => {
-                return <CharactorEditor 
+                return <CharacterEditer 
                   charactor={charactor} 
                   setCharactor={(newCharactor) => {
                     const newCharactors = [...charactors];

frontend/src/pages/publish_page.tsx

@@ -19,7 +19,7 @@ import {
   SelectAndUploadImageButton,
   UploadClipboardImageButton,
 } from "../components/image_selector.tsx";
-import CharactorEditor from "../components/charactor_edit.tsx";
+import CharacterEditer from "../components/character_edit.tsx";
 
 export default function PublishPage() {
   const [title, setTitle] = useState<string>("");
@@ -436,7 +436,7 @@ export default function PublishPage() {
           <div className="grid grid-cols-1 md:grid-cols-2 my-2 gap-4">
             {
               charactors.map((charactor, index) => {
-                return <CharactorEditor 
+                return <CharacterEditer 
                   charactor={charactor} 
                   setCharactor={(newCharactor) => {
                     const newCharactors = [...charactors];