feat: added chat renaming

app/components/ChatMenu/ChatEditPopup.tsx

@@ -1,3 +1,4 @@
+import TextBoxModal from '@components/TextBoxModal'
 import { AntDesign, FontAwesome } from '@expo/vector-icons'
 import { Characters, Chats, Logger, saveStringToDownload, Style } from '@globals'
 import { useFocusEffect } from 'expo-router'
@@ -32,7 +33,7 @@ type ChatEditPopupProps = {
 type PopupProps = {
     onPress: () => void | Promise<void>
     label: string
-    iconName: 'copy' | 'download' | 'trash'
+    iconName: keyof typeof FontAwesome.glyphMap
     warning?: boolean
 }
 
@@ -56,6 +57,7 @@ const PopupOption: React.FC<PopupProps> = ({ onPress, label, iconName, warning =
 
 const ChatEditPopup: React.FC<ChatEditPopupProps> = ({ item, setNowLoading, nowLoading }) => {
     const [showMenu, setShowMenu] = useState<boolean>(false)
+    const [showRename, setShowRename] = useState<boolean>(false)
     const menuRef: React.MutableRefObject<Menu | null> = useRef(null)
 
     const { charName, charId } = Characters.useCharacterCard((state) => ({
@@ -158,6 +160,22 @@ const ChatEditPopup: React.FC<ChatEditPopupProps> = ({ item, setNowLoading, nowL
                 />
             </MenuTrigger>
             <MenuOptions customStyles={menustyle}>
+                <TextBoxModal
+                    booleans={[showRename, setShowRename]}
+                    onConfirm={async (text) => {
+                        await Chats.db.mutate.renameChat(item.id, text)
+                    }}
+                    onClose={() => menuRef.current?.close()}
+                    textCheck={(text) => text.length === 0}
+                />
+                <PopupOption
+                    onPress={() => {
+                        setShowRename(true)
+                    }}
+                    label="Rename"
+                    iconName="pencil"
+                />
+
                 <PopupOption
                     onPress={() => handleExportChat()}
                     label="Export"

app/components/TextBoxModal.tsx

@@ -1,5 +1,5 @@
 import { FontAwesome } from '@expo/vector-icons'
-import { Style } from '@globals'
+import { Logger, Style } from '@globals'
 import { getStringAsync } from 'expo-clipboard'
 import { useState, useEffect } from 'react'
 import {
@@ -16,30 +16,39 @@ import {
 type TextBoxModalProps = {
     booleans: [boolean, (b: boolean) => void]
     onConfirm: (text: string) => void
+    onClose?: () => void
     title?: string
     showPaste?: boolean
     placeholder?: string
+    textCheck?: (text: string) => boolean
+    errorMessage?: string
 }
 
 const TextBoxModal: React.FC<TextBoxModalProps> = ({
     booleans: [showModal, setShowModal],
     onConfirm = (text) => {},
+    onClose = () => {},
     title = 'Enter Name',
     showPaste = false,
     placeholder = '',
+    textCheck = (text: string) => false,
+    errorMessage = 'Name cannot be empty',
 }) => {
     const [text, setText] = useState('')
+    const [showError, setShowError] = useState(false)
 
     useEffect(() => {
         setText('')
     }, [showModal])
 
     const handleOverlayClick = (e: GestureResponderEvent) => {
-        if (e.target === e.currentTarget) setShowModal(false)
+        if (e.target === e.currentTarget) handleClose()
     }
 
     const handleClose = () => {
         setShowModal(false)
+        setShowError(false)
+        onClose()
     }
 
     return (
@@ -81,18 +90,20 @@ const TextBoxModal: React.FC<TextBoxModalProps> = ({
                             </TouchableOpacity>
                         )}
                     </View>
-
+                    {showError && <Text style={styles.errorMessage}>{errorMessage}</Text>}
                     <View style={styles.buttonContainer}>
-                        <TouchableOpacity
-                            style={styles.cancelButton}
-                            onPress={() => setShowModal(false)}>
+                        <TouchableOpacity style={styles.cancelButton} onPress={() => handleClose()}>
                             <Text style={{ color: Style.getColor('primary-text1') }}>Cancel</Text>
                         </TouchableOpacity>
                         <TouchableOpacity
                             style={styles.confirmButton}
                             onPress={() => {
+                                if (textCheck(text)) {
+                                    setShowError(true)
+                                    return
+                                }
                                 onConfirm(text)
-                                setShowModal(false)
+                                handleClose()
                             }}>
                             <Text style={{ color: Style.getColor('primary-text1') }}>Confirm</Text>
                         </TouchableOpacity>
@@ -173,4 +184,9 @@ const styles = StyleSheet.create({
     inputButton: {
         marginLeft: 12,
     },
+
+    errorMessage: {
+        color: Style.getColor('destructive-brand'),
+        marginBottom: 8,
+    },
 })

app/constants/Chat.ts

@@ -546,6 +546,10 @@ export namespace Chats {
 
                 await database.insert(chatSwipes).values(swipes)
             }
+
+            export const renameChat = async (chatId: number, name: string) => {
+                await database.update(chats).set({ name: name }).where(eq(chats.id, chatId))
+            }
         }
     }