+
+ Error
+{error}
+
+
+
+
+ BCML {version && `v${version}`}
+
+
+ BOTW Cross-Platform Mod Loader
+
+
+ {/* Overflow Menu */}
+
+
+
+ setActiveTab(tab || "mods")}
+ className="nav-tabs"
+ >
+
+
+
+
+
+
+
+
+ {/* Modals */}
+ setShowProgress(false)}
+ />
+
+ setShowDone(false)}
+ onLaunchGame={hasCemu ? launchGame : undefined}
+ hasCemu={hasCemu}
+ />
+
+ {
+ if (confirmCallback) {
+ confirmCallback();
+ }
+ setShowConfirm(false);
+ setConfirmCallback(null);
+ }}
+ onCancel={() => {
+ setShowConfirm(false);
+ setConfirmCallback(null);
+ }}
+ />
+
+ {
+ setShowError(false);
+ setError(null);
+ }}
+ />
+
+ setShowBackups(false)}
+ busy={showProgress}
+ onCreate={handleBackups}
+ onRestore={handleBackups}
+ onDelete={handleBackups}
+ onOldRestore={handleOldRestore}
+ />
+
+ setShowProfiles(false)}
+ busy={showProgress}
+ onSave={handleProfile}
+ onLoad={handleProfile}
+ onDelete={handleProfile}
+ />
+
+ setShowAbout(false)}
+ version={version}
+ />
+
+
+ );
+}
+
+export default App;
diff --git a/tauri-app/src/assets/react.svg b/tauri-app/src/assets/react.svg
new file mode 100644
index 0000000..6c87de9
--- /dev/null
+++ b/tauri-app/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/tauri-app/src/components/AboutModal.tsx b/tauri-app/src/components/AboutModal.tsx
new file mode 100644
index 0000000..64bcd45
--- /dev/null
+++ b/tauri-app/src/components/AboutModal.tsx
@@ -0,0 +1,56 @@
+import { Modal, Button } from "react-bootstrap";
+
+interface AboutModalProps {
+ show: boolean;
+ onClose: () => void;
+ version: string;
+}
+
+function AboutModal({ show, onClose, version }: AboutModalProps) {
+ return (
+
+
+
+ menu
+
+
+
+ Save Mod List
+
+
+ Update BCML
+
+
+ Run Setup Wizard
+
+ setShowAbout(true)}>
+ About
+
+
+
+
+ Help (F1)}
+ placement="bottom"
+ >
+
+
+
+
+ setShowBackups(true)}
+ onProfile={() => setShowProfiles(true)}
+ onLaunch={launchGame}
+ onConfirm={confirm}
+ />
+
+
+
+
+
+
+
+
+ 
{
+ (e.target as HTMLImageElement).style.display = 'none';
+ }}
+ />
+
+ {
+ (e.target as HTMLImageElement).style.display = 'none';
+ }}
+ />
+ BCML v{version}
++ BOTW Cross-Platform Mod Loader +
++ A mod manager for The Legend of Zelda: Breath of the Wild. + This Tauri version provides native performance with a modern interface. +
++
+
+ Migration Features:
+-
+
- ✅ Modern React 19.x frontend +
- ✅ Native Tauri backend +
- ✅ Bootstrap 5.x UI +
- ✅ TypeScript support +
- ✅ Cross-platform compatibility +
- ✅ Zero npm vulnerabilities +
+ Here you can backup and restore entire mod configurations. + The backups are complete and exact: what you restore will be + identical to what you backed up. +
++ +
Create Backup
++ +
Restore Backup
+ {backups.length > 0 ? ( + backups.map((backup) => ( +
+
+ {backup.name.replace("_", " ")}{" "}
+ ({backup.num} mods)
+
+
+
+
+
+
+
+ ))
+ ) : (
+ No backups available
+ )} + + {onOldRestore && ( + <> ++
Legacy BCML 2.8 Backup
+ + + )} +
+ setActiveTab(k || "file-tools")}
+ className="mb-3"
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* BNP Creation Modal */}
+ setShowBnpModal(false)} size="lg">
+
+ Create BNP Package
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default DevToolsTab;
\ No newline at end of file
diff --git a/tauri-app/src/components/DoneModal.tsx b/tauri-app/src/components/DoneModal.tsx
new file mode 100644
index 0000000..3c66b14
--- /dev/null
+++ b/tauri-app/src/components/DoneModal.tsx
@@ -0,0 +1,33 @@
+import { Modal, Button } from "react-bootstrap";
+
+interface DoneModalProps {
+ show: boolean;
+ onClose: () => void;
+ onLaunchGame?: () => void;
+ hasCemu?: boolean;
+}
+
+function DoneModal({ show, onClose, onLaunchGame, hasCemu }: DoneModalProps) {
+ return (
+ File Operations
+Create BNP Package
+ ++ Create BNP (BCML Package) files from mod folders. BNP files are the + standard format for distributing mods with BCML. +
+ +
+
+ BNP Creation Process:
+-
+
- Click "Create New BNP" to open the BNP creation dialog +
- Fill in mod information (name, description, version) +
- Select the mod folder containing your files +
- Choose an output directory for the BNP file +
- Click "Create BNP" to package your mod +
Mod Format Conversion
+
+
+
+ {errorMessage}
+
+
+ 
+
+
+ + Thank you for installing BCML. It appears that this is + your first time running it, or you have upgraded from an + old version. We'll need to do a few things to get you + set up. +
++ settings Import Settings +
+ {settingsLoaded ? ( + oldSettings ? ( +
+
+ ) : (
+ + It looks like you are upgrading from a previous + version of BCML. BCML has attempted to import + your old settings. Result: +
+{converted}
+
+ Let's see, it doesn't look like you are upgrading
+ from a previous version of BCML. Alright then, we'll
+ set you up from scratch on the next page.
+
+ )
+ ) : (
+ Checking for existing settings...
+ )} ++ Take a look at your imported settings and + check that everything seems right. +
+ ) : ( +
+
+ )}
+ + Take a moment to configure your basic + settings. Folders will turn green when + valid. If you need help with this, click + the buttons to the right for the in-app + Help or the YouTube tutorial. +
+
+
+
+
+ + double_arrow{" "} + Import Mods +
++ It looks like you have {oldMods} mods + from a previous version of BCML. If you like, you + can import them into your new BCML version, or you + can just delete or ignore them. (Note that ignoring + them is not recommended.) +
+
+
+
+
+
+
+ {handlingMods && (
+ <>
+ {!modsHandled ? (
+
+
+
+
+ ) : handledError ? (
+ {"Processing mods..."}
+
+ error
+
+ ) : (
+ + Uh-oh! {handledError} +
+
+ check_circle
+
+ )}
+
+ )}
+ Alright, done!
++ check + Setup Complete +
++ Alright, it looks like everything is set up. Time to + start installing mods! +
++ If you're a first time BCML user or upgrading from + 2.8, it's probably worth taking a look at{" "} + the in-app help, located in the + overflow menu. If you run into any problems, first + try the in-app help and consider{" "} + clicking the Remerge button. +
+Support BCML
++ If BCML has been helpful to you, consider supporting its development! +
+
+ {/* Left Panel - Mod List */}
+ setShowInstallModal(false)} size="lg">
+
+ Install Mod
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default ModsTab;
\ No newline at end of file
diff --git a/tauri-app/src/components/ProfileModal.tsx b/tauri-app/src/components/ProfileModal.tsx
new file mode 100644
index 0000000..a6e80bb
--- /dev/null
+++ b/tauri-app/src/components/ProfileModal.tsx
@@ -0,0 +1,130 @@
+import { useState, useEffect } from "react";
+import { Modal, Button, Form, InputGroup, ButtonGroup } from "react-bootstrap";
+import { invoke } from "@tauri-apps/api/core";
+
+interface Profile {
+ name: string;
+ path: string;
+}
+
+interface ProfileModalProps {
+ show: boolean;
+ onClose: () => void;
+ busy: boolean;
+ onSave: (profile: { name: string }, operation: string) => void;
+ onLoad: (profile: Profile, operation: string) => void;
+ onDelete: (profile: Profile, operation: string) => void;
+}
+
+function ProfileModal({
+ show,
+ onClose,
+ busy,
+ onSave,
+ onLoad,
+ onDelete
+}: ProfileModalProps) {
+ const [profiles, setProfiles] = useState
+ {loading ? (
+
+
+ {/* Right Panel - Mod Info */}
+
+
+ ) : (
+ <>
+
+ Loading...
+
+
+ {filteredMods.length === 0 ? (
+
+
+ {/* List Actions */}
+
+ {mods.length === 0
+ ? "No mods installed"
+ : "No mods match current filter"
+ }
+
+ ) : (
+
+ {filteredMods.map((mod, index) => (
+
+ )}
+ handleModSelect(mod.path, !selectedMods.includes(mod.path))}
+ style={{ cursor: 'pointer' }}
+ >
+
+ ))}
+
+
+
+ drag_indicator
+
+
+
+ {mod.name}
+ {mod.version || "Unknown"}
+
+
+ {mod.enabled ? 'ON' : 'OFF'}
+
+
+
+
+
+
+ Launch without mods
+ Launch Cemu without starting game
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Floating Action Button */}
+
+
+ {/* Mod Installation Modal */}
+
+ {selectedMods.length === 0 ? (
+
+
+
+ ) : selectedMods.length === 1 ? (
+ No Mod Selected
+Select a mod from the list to view details
+
+
+ ) : (
+
+
+
+
+ {filteredMods.find(m => m.path === selectedMods[0])?.name || 'Unknown Mod'}
+ m.path === selectedMods[0])?.enabled ? 'bg-success' : 'bg-secondary'}`}> + {filteredMods.find(m => m.path === selectedMods[0])?.enabled ? 'Enabled' : 'Disabled'} + +
+
+ {filteredMods.find(m => m.path === selectedMods[0])?.description || 'No description available.'}
+
+
+
+
+
+
+
+ Version: {filteredMods.find(m => m.path === selectedMods[0])?.version || 'Unknown'}
+ Priority: {filteredMods.find(m => m.path === selectedMods[0])?.priority}
+ Path: {selectedMods[0]}
+
+
+
+ )}
+ Multiple Mods Selected ({selectedMods.length})
+Bulk operations available:
+
+
+
+
+
+
+
+ + Current Profile:{" "} + {currentProfile?.name || None} +
+ +Available Profiles
+ {profiles.length > 0 ? ( + profiles.map((profile) => ( +
+ {profile.name}
+
+
+
+
+
+
+ ))
+ ) : (
+ No profiles yet
+ )} +
+
+ )}
+ {typeof progress === 'number' && (
+ {status}
+
+
+
+
+
+ {message && (
+
+
+
+ );
+}
+
+export default SettingsTab;
\ No newline at end of file
diff --git a/tauri-app/src/main.tsx b/tauri-app/src/main.tsx
new file mode 100644
index 0000000..2be325e
--- /dev/null
+++ b/tauri-app/src/main.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+ BCML Settings
+
+
+
+
+
+ {message.text}
+
+ )}
+
+
+