Add components for Act management and integrate Electron setup

2025-11-16 11:00:04 -05:00
parent e192b6dcc2
commit 8167948881
97 changed files with 25378 additions and 3 deletions
--- a/components/ListItem.tsx
+++ b/components/ListItem.tsx
@@ -0,0 +1,154 @@
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faArrowDown, faArrowUp, faCheck, faPen, faTrash, faX, IconDefinition} from "@fortawesome/free-solid-svg-icons";
+import React, {ChangeEvent, useState} from "react";
+import TextInput from "@/components/form/TextInput";
+
+interface ListItemProps {
+    onClick: () => void;
+    selectedId: number | string;
+    id: number | string;
+    icon?: IconDefinition;
+    numericalIdentifier?: number;
+    isEditable?: boolean;
+    text: string;
+    handleDelete?: (itemId: string) => void;
+    handleUpdate?: (itemId: string, newValue: string, subNewValue: number) => void;
+}
+
+export default function ListItem(
+    {
+        text,
+        selectedId,
+        id,
+        icon,
+        onClick,
+        isEditable = false,
+        handleDelete,
+        numericalIdentifier,
+        handleUpdate
+    }: ListItemProps) {
+    
+    const [itemHover, setItemHover] = useState<boolean>(false);
+    const [editMode, setEditMode] = useState<boolean>(false);
+    
+    const [newName, setNewName] = useState<string>('');
+    const [newChapterOrder, setNewChapterOrder] = useState<number>(numericalIdentifier ?? 0);
+    
+    function handleEdit(itemName: string): void {
+        setNewName(itemName)
+        setEditMode(true)
+    }
+    
+    function handleSave(): void {
+        if (!handleUpdate) return;
+        handleUpdate(id as string, newName, newChapterOrder)
+        setEditMode(false);
+    }
+    
+    
+    function moveItem(direction: "up" | "down"): void {
+        switch (direction) {
+            case "up":
+                if (newChapterOrder > 0) {
+                    setNewChapterOrder(newChapterOrder - 1)
+                }
+                break;
+            case "down":
+                if (newChapterOrder < 100) {
+                    setNewChapterOrder(newChapterOrder + 1)
+                }
+                break;
+            default:
+                break;
+        }
+    }
+    
+    return (
+        <li onMouseOver={(): void => setItemHover(true)} onMouseLeave={(): void => setItemHover(false)}
+            className={`group relative flex items-center p-3 rounded-xl transition-colors duration-200 border-l-4 ${
+                selectedId === id
+                    ? 'bg-secondary border-primary'
+                    : 'bg-secondary/50 hover:bg-secondary border-transparent'
+            }`}>
+            {
+                (numericalIdentifier != null && newChapterOrder >= 0) && (
+                    <span className="text-primary font-bold mr-3 text-sm min-w-[24px]">
+                        {newChapterOrder >= 0 ? newChapterOrder : numericalIdentifier}.
+                    </span>
+                )
+            }
+            {
+                icon && (
+                    <div className="mr-3 w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center">
+                        <FontAwesomeIcon icon={icon} className={'w-4 h-4 text-primary'}/>
+                    </div>
+                )
+            }
+            <div className={'flex justify-between items-center w-full gap-2'}>
+                {
+                    editMode ? (
+                        <div className={'flex gap-2 w-full items-center'}>
+                            <div className="flex-1">
+                                <TextInput
+                                    value={newName ? newName : text}
+                                    setValue={(e: ChangeEvent<HTMLInputElement>): void => setNewName(e.target.value)}
+                                    placeholder=""
+                                />
+                            </div>
+                            <button
+                                className={`p-2 rounded-lg transition-all ${
+                                    numericalIdentifier === 0
+                                        ? 'text-muted opacity-40 cursor-not-allowed'
+                                        : 'text-text-primary hover:text-primary hover:bg-primary/10'
+                                }`}
+                                onClick={(): void => moveItem('up')}
+                                disabled={numericalIdentifier === 0}
+                            >
+                                <FontAwesomeIcon icon={faArrowUp} size="sm"/>
+                            </button>
+                            <button
+                                className="p-2 rounded-lg text-text-primary hover:text-primary hover:bg-primary/10 transition-all"
+                                onClick={(): void => moveItem("down")}
+                            >
+                                <FontAwesomeIcon icon={faArrowDown} size="sm"/>
+                            </button>
+                        </div>
+                    ) : (
+                        <span
+                            className={'cursor-pointer text-sm font-medium flex-1 group-hover:text-text-primary transition-colors'}
+                            onClick={onClick}>{text}</span>
+                    )
+                }
+                {
+                    !editMode && isEditable && (
+                        <div
+                            className={'absolute right-1 flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity'}>
+                            <button onClick={(): void => handleEdit(text)}
+                                    className="p-1 rounded-lg bg-secondary hover:bg-primary/10 transition-colors">
+                                <FontAwesomeIcon icon={faPen} className={'w-3.5 h-3.5 text-primary'}/>
+                            </button>
+                            <button onClick={(): void | undefined => handleDelete && handleDelete(id.toString())}
+                                    className="p-1 rounded-lg bg-secondary hover:bg-error/10 transition-colors">
+                                <FontAwesomeIcon icon={faTrash} className={'w-3.5 h-3.5 text-error'}/>
+                            </button>
+                        </div>
+                    )
+                }
+                {
+                    editMode && isEditable && (
+                        <div className={'flex gap-1'}>
+                            <button onClick={handleSave}
+                                    className="p-2 rounded-lg hover:bg-primary/10 transition-all">
+                                <FontAwesomeIcon icon={faCheck} className={'w-3.5 h-3.5 text-primary'}/>
+                            </button>
+                            <button onClick={(): void => setEditMode(false)}
+                                    className="p-2 rounded-lg hover:bg-error/10 transition-all">
+                                <FontAwesomeIcon icon={faX} className={'w-3.5 h-3.5 text-error'}/>
+                            </button>
+                        </div>
+                    )
+                }
+            </div>
+        </li>
+    )
+}