feat: character info updates

Author: VulpoTheDev

apps/web/src/app/(studio)/studio/(general)/characters/CharactersView.tsx

@@ -63,7 +63,7 @@ export default function CharactersView({ characters }: { characters: Character[]
             </thead>
             <tbody>
               {characters.map((characters, index) => (
-                <tr key={characters.name} className="border-b border-100 hover:bg-200" onClick={() => window.location.href = `/studio/characters/${characters.id}`}>
+                <tr key={characters.name} className="border-b border-100 hover:bg-200 cursor-pointer" onClick={() => window.location.href = `/studio/characters/${characters.id}`}>
                   <td className="px-2">
                     <Checkbox
                       inputName={`character-select-${index}`}

apps/web/src/app/(studio)/studio/(general)/characters/[id]/EditCharacter.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import Checkbox from '@/components/layouts/Forms/Checkbox'
 import MarginClamp from '@/components/layouts/Layouts/MarginClamp'
 import DropZone from '@/components/Modals/DropZone'
@@ -9,6 +9,9 @@ import { Group, GroupContainer, MarginGutter } from '@mav/ui/components/layouts'
 import { InputField, Textarea } from '@mav/ui/components/fields'
 import { SelectField } from '@/components/layouts/Forms'
 import { furrySpeciesOptions, pronounOptions } from '@/utils/constants'
+import { Button } from '@mav/ui/components/buttons/Button'
+import { updateCharacter } from '@/utils/api'
+import { redirect } from 'next/navigation'
 
 export default function EditCharacter({ character }: { character: Character }) {
   const [avatarUrl, setAvatarUrl] = useState<string>(character.avatarUrl)
@@ -20,6 +23,49 @@ export default function EditCharacter({ character }: { character: Character }) {
   const [species, setSpecies] = useState<string>(character.species ?? '')
   const [bio, setBio] = useState<string>(character.attributes.bio ?? '')
 
+  const [isDirty, setIsDirty] = useState(false)
+  const [isSaving, setIsSaving] = useState(false)
+
+  useEffect(() => {
+    const changed =
+      displayName !== (character.name ?? "") ||
+      nickname !== (character.nickname ?? "") ||
+      isMainCharacter !== character.mainCharacter ||
+      characterUrl !== (character.slug ?? "") ||
+      pronouns !== (character.attributes.pronouns ?? "") ||
+      species !== (character.species ?? "") ||
+      bio !== (character.attributes.bio ?? "")
+    setIsDirty(changed)
+  }, [displayName, nickname, isMainCharacter, characterUrl, pronouns, species, bio])
+
+  const handleSave = async () => {
+    setIsSaving(true)
+    try {
+      const attributes = {
+        pronouns,
+        bio,
+        gender: character.attributes.gender ?? "",
+        preferences: character.attributes.preferences ?? { likes: "", dislikes: "" },
+        custom_fields: character.attributes.custom_fields ?? [],
+      }
+      await updateCharacter(character.id, {
+        name: displayName,
+        nickname,
+        mainCharacter: isMainCharacter,
+        slug: characterUrl,
+        attributes,
+        species,
+        avatarUrl
+      })
+      setIsDirty(false)
+      redirect('/studio/characters')
+    } catch (error) {
+      console.error("Failed to save profile settings", error)
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
   return (
     <MarginGutter screenSize="xl" className="px-6 py-5 *:mt-6 *:gap-6 first:*:mt-0">
       <GroupContainer>
@@ -82,7 +128,33 @@ export default function EditCharacter({ character }: { character: Character }) {
             />
           </div>
         </Group>
+        <Group title='Reference sheets' description="Reference sheets will appear in the list if you have this character linked and be shown on the public profile. Learn more">
+          <div className='flex flex-row gap-x-2'>
+            <Button
+              variant="primary"
+              onClick={() => {}}
+            >
+              Add Reference Sheet
+            </Button>
+            <Button
+              variant="secondary"
+              onClick={() => {}}
+            >
+              Manage Reference Sheet
+            </Button>
+          </div>
+        </Group>
       </GroupContainer>
+      {isDirty && (
+        <div className="flex justify-end mt-4">
+          <Button
+            onClick={handleSave}
+            disabled={isSaving}
+          >
+            {isSaving ? "Saving..." : "Save Changes"}
+          </Button>
+        </div>
+      )}
     </MarginGutter>
   )
 }

apps/web/src/components/layouts/StudioLayout/Sidebar.tsx

@@ -2,7 +2,7 @@
 
 import { Button } from "@mav/ui/components/buttons"
 import { motion } from "framer-motion"
-import { LuSettings } from "react-icons/lu"
+import { LuArrowLeft, LuSettings } from "react-icons/lu"
 import { useSidebarOpenAtom } from "./Sidebar.atom"
 import SidebarItem from "./SidebarItem"
 import { generateEditSidebarItems, generateSidebarItems } from "./SidebarItems"
@@ -11,6 +11,7 @@ import { useRouter, usePathname } from "next/navigation"
 import Image from "next/image"
 import Avatar from "@/components/Avatar"
 import clsx from 'clsx'
+import { SelectField } from "../Forms"
 
 export default function Sidebar({ user }: { user: User }) {
   const { sidebarState: isSidebarExpanded } = useSidebarOpenAtom()
@@ -32,18 +33,32 @@ export default function Sidebar({ user }: { user: User }) {
       >
         <div
           data-mav-list-renderer=""
-          className="flex h-full flex-col px-2 py-1.5 gap-2"
+          className="flex h-full flex-col  py-1.5 gap-2"
         >
-          <div className={clsx("p-3 flex flex-row bg-100 rounded-md", isSidebarExpanded ? "justify-start" : "justify-center")}>
-            <Avatar
-              username={user.handle}
-              size={isSidebarExpanded ? 40 : 30}
-              src={user.avatarUrl || "/UserProfile.png"}
-            />
-            {isSidebarExpanded && (
-              <div className="flex flex-col justify-center ml-2">
-                <span className="text-sm">{user.displayName}</span>
-                <span className="text-sm text-subtext">@{user.handle}</span>
+          <div className={clsx("flex items-center justify-between", isSidebarExpanded ? "px-3" : "pr-2")}>
+            {characterId ? (
+              <div className="flex gap-2 w-full flex-col">
+                <Button href="/studio/characters" icon={<LuArrowLeft size={20} />}>Back to Characters</Button>
+                <SelectField
+                  options={user.characters.map(character => ({ value: character.id, label: character.name }))}
+                  inputName="Editing"
+                  onChange={(e: React.ChangeEvent<HTMLSelectElement>) => window.location.href = `/studio/characters/${e.target.value}`}
+                  value={characterId ?? ""}
+                />
+              </div>
+            ) : (
+              <div className={clsx("p-3 flex flex-row bg-100 rounded-md", isSidebarExpanded ? "justify-start" : "justify-center")}>
+                <Avatar
+                  username={user.handle}
+                  size={isSidebarExpanded ? 40 : 30}
+                  src={user.avatarUrl || "/UserProfile.png"}
+                />
+                {isSidebarExpanded && (
+                  <div className="flex flex-col justify-center ml-2">
+                    <span className="text-sm">{user.displayName}</span>
+                    <span className="text-sm text-subtext">@{user.handle}</span>
+                  </div>
+                )}
               </div>
             )}
           </div>

apps/web/src/utils/api.ts

@@ -156,6 +156,10 @@ export const fetchUserCharacters = async (handle: string) => {
   return data
 }
 
+export const updateCharacter = async (characterId: string, data: Partial<Character>) => {
+  return apiWithAuth("PUT", `/v1/character/update/${characterId}`, data)
+}
+
 export const fetchSelfCharacters = async () => {
   const characters = await apiWithAuth<Character[]>("GET", "/v1/character/")
   return characters