Function ModPanel

apps/webuiapps/src/components/ChatPanel/ModPanel.tsx:22–184

({ collection, onSave, onClose, initialEditId })

}

const ModPanel: React.FC<ModPanelProps> = ({ collection, onSave, onClose, initialEditId }) => {
  const [col, setCol] = useState<ModCollection>(() => ({ ...collection }));
  const [editingId, setEditingId] = useState<string | null>(initialEditId ?? null);

  const mods = getModList(col);
  const activeId = col.activeId;
  const editingEntry = editingId ? col.items[editingId] : null;

  const handleSelect = (id: string) => {
    setCol({ ...col, activeId: id });
  };

  const handleDelete = (id: string) => {
    if (mods.length <= 1) return;
    const items = { ...col.items };
    delete items[id];
    const newActiveId = col.activeId === id ? Object.keys(items)[0] : col.activeId;
    setCol({ activeId: newActiveId, items });
    if (editingId === id) setEditingId(null);
  };

  const handleAdd = () => {
    const id = generateModId();
    const newMod: ModConfig = {
      id,
      mod_name: 'New Mod',
      mod_name_en: 'New Mod',
      mod_description: '',
      stage_count: 1,
      stages: {
        0: {
          stage_index: 0,
          stage_name: 'Stage 1',
          stage_description: '',
          stage_targets: { 1: 'First target' },
        },
      },
    };
    const newState: ModState = {
      current_stage_index: 0,
      total_stage_count: 1,
      is_finished: false,
      completed_targets: [],
    };
    setCol({ ...col, items: { ...col.items, [id]: { config: newMod, state: newState } } });
    setEditingId(id);
  };

  const handleSave = () => {
    onSave(col);
  };

  if (editingEntry) {
    return (
      <ModEditor
        entry={editingEntry}
        onSave={(updatedEntry) => {
          setCol({ ...col, items: { ...col.items, [updatedEntry.config.id]: updatedEntry } });