Rodrigo Rodriguez (Pragmatismo)
64e11506a2
This crate wraps botui (pure web UI) with Tauri for desktop/mobile: - Native file system access via Tauri commands - System tray integration (prepared) - App-specific guides injected at runtime - Desktop settings and configuration Architecture: - botui: Pure web UI (no Tauri deps) - botapp: Tauri wrapper that loads botui's suite Files: - src/desktop/drive.rs: File system commands - src/desktop/tray.rs: System tray (prepared) - js/app-extensions.js: Injects app guides into suite - ui/app-guides/: App-only HTML content
332 lines
11 KiB
HTML
332 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>App Settings - General Bots</title>
|
|
<style>
|
|
.app-guide {
|
|
padding: 2rem;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.guide-header {
|
|
margin-bottom: 2rem;
|
|
border-bottom: 1px solid var(--border-color, #e0e0e0);
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.guide-header h1 {
|
|
margin: 0 0 0.5rem 0;
|
|
font-size: 1.75rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.guide-header p {
|
|
margin: 0;
|
|
color: var(--text-secondary, #666);
|
|
}
|
|
|
|
.settings-section {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.settings-section h2 {
|
|
font-size: 1.25rem;
|
|
margin-bottom: 1rem;
|
|
color: var(--text-primary, #333);
|
|
}
|
|
|
|
.setting-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1rem;
|
|
background: var(--bg-secondary, #f5f5f5);
|
|
border-radius: 8px;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.setting-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.setting-label {
|
|
font-weight: 500;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.setting-description {
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary, #666);
|
|
}
|
|
|
|
.setting-control {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.toggle-switch {
|
|
position: relative;
|
|
width: 48px;
|
|
height: 24px;
|
|
background: var(--bg-tertiary, #ccc);
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.toggle-switch.active {
|
|
background: var(--accent-color, #4CAF50);
|
|
}
|
|
|
|
.toggle-switch::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.toggle-switch.active::after {
|
|
transform: translateX(24px);
|
|
}
|
|
|
|
select, input[type="text"], input[type="number"] {
|
|
padding: 0.5rem;
|
|
border: 1px solid var(--border-color, #ddd);
|
|
border-radius: 4px;
|
|
font-size: 0.875rem;
|
|
min-width: 150px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 0.5rem 1rem;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 0.875rem;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.btn:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--accent-color, #2196F3);
|
|
color: white;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--bg-tertiary, #e0e0e0);
|
|
color: var(--text-primary, #333);
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-top: 2rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid var(--border-color, #e0e0e0);
|
|
}
|
|
|
|
.version-info {
|
|
margin-top: 2rem;
|
|
padding: 1rem;
|
|
background: var(--bg-secondary, #f5f5f5);
|
|
border-radius: 8px;
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary, #666);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app-guide native-settings">
|
|
<header class="guide-header">
|
|
<h1>App Settings</h1>
|
|
<p>Configure native desktop application preferences</p>
|
|
</header>
|
|
|
|
<section class="settings-section">
|
|
<h2>General</h2>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-info">
|
|
<div class="setting-label">Start on login</div>
|
|
<div class="setting-description">Automatically start General Bots when you log in</div>
|
|
</div>
|
|
<div class="setting-control">
|
|
<div class="toggle-switch" id="startOnLogin" onclick="toggleSetting(this)"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-info">
|
|
<div class="setting-label">Minimize to tray</div>
|
|
<div class="setting-description">Keep running in system tray when window is closed</div>
|
|
</div>
|
|
<div class="setting-control">
|
|
<div class="toggle-switch active" id="minimizeToTray" onclick="toggleSetting(this)"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-info">
|
|
<div class="setting-label">Default download location</div>
|
|
<div class="setting-description">Where to save downloaded files</div>
|
|
</div>
|
|
<div class="setting-control">
|
|
<button class="btn btn-secondary" onclick="selectDownloadPath()">Browse...</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="settings-section">
|
|
<h2>Server Connection</h2>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-info">
|
|
<div class="setting-label">Server URL</div>
|
|
<div class="setting-description">BotServer API endpoint</div>
|
|
</div>
|
|
<div class="setting-control">
|
|
<input type="text" id="serverUrl" value="http://localhost:8080" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-info">
|
|
<div class="setting-label">Auto-reconnect</div>
|
|
<div class="setting-description">Automatically reconnect when connection is lost</div>
|
|
</div>
|
|
<div class="setting-control">
|
|
<div class="toggle-switch active" id="autoReconnect" onclick="toggleSetting(this)"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="settings-section">
|
|
<h2>Notifications</h2>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-info">
|
|
<div class="setting-label">Desktop notifications</div>
|
|
<div class="setting-description">Show native desktop notifications</div>
|
|
</div>
|
|
<div class="setting-control">
|
|
<div class="toggle-switch active" id="desktopNotifications" onclick="toggleSetting(this)"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-info">
|
|
<div class="setting-label">Sound alerts</div>
|
|
<div class="setting-description">Play sound when receiving messages</div>
|
|
</div>
|
|
<div class="setting-control">
|
|
<div class="toggle-switch" id="soundAlerts" onclick="toggleSetting(this)"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="actions">
|
|
<button class="btn btn-primary" onclick="saveSettings()">Save Settings</button>
|
|
<button class="btn btn-secondary" onclick="resetSettings()">Reset to Defaults</button>
|
|
</div>
|
|
|
|
<div class="version-info">
|
|
<strong>General Bots App</strong><br>
|
|
Version: <span id="appVersion">6.1.0</span><br>
|
|
Platform: <span id="appPlatform">-</span>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Toggle switch functionality
|
|
function toggleSetting(element) {
|
|
element.classList.toggle('active');
|
|
}
|
|
|
|
// Select download path via Tauri dialog
|
|
async function selectDownloadPath() {
|
|
if (window.__TAURI__) {
|
|
try {
|
|
const { open } = window.__TAURI__.dialog;
|
|
const selected = await open({
|
|
directory: true,
|
|
multiple: false,
|
|
title: 'Select Download Location'
|
|
});
|
|
if (selected) {
|
|
console.log('Selected path:', selected);
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to open dialog:', e);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Save settings
|
|
async function saveSettings() {
|
|
const settings = {
|
|
startOnLogin: document.getElementById('startOnLogin').classList.contains('active'),
|
|
minimizeToTray: document.getElementById('minimizeToTray').classList.contains('active'),
|
|
serverUrl: document.getElementById('serverUrl').value,
|
|
autoReconnect: document.getElementById('autoReconnect').classList.contains('active'),
|
|
desktopNotifications: document.getElementById('desktopNotifications').classList.contains('active'),
|
|
soundAlerts: document.getElementById('soundAlerts').classList.contains('active')
|
|
};
|
|
|
|
// Save to localStorage for now
|
|
localStorage.setItem('botapp_settings', JSON.stringify(settings));
|
|
|
|
// Show confirmation
|
|
if (window.BotServerApp) {
|
|
window.BotServerApp.showNotification('Settings saved successfully', 'success');
|
|
} else {
|
|
alert('Settings saved!');
|
|
}
|
|
}
|
|
|
|
// Reset settings to defaults
|
|
function resetSettings() {
|
|
document.getElementById('startOnLogin').classList.remove('active');
|
|
document.getElementById('minimizeToTray').classList.add('active');
|
|
document.getElementById('serverUrl').value = 'http://localhost:8080';
|
|
document.getElementById('autoReconnect').classList.add('active');
|
|
document.getElementById('desktopNotifications').classList.add('active');
|
|
document.getElementById('soundAlerts').classList.remove('active');
|
|
}
|
|
|
|
// Load settings on page load
|
|
function loadSettings() {
|
|
const saved = localStorage.getItem('botapp_settings');
|
|
if (saved) {
|
|
const settings = JSON.parse(saved);
|
|
|
|
if (settings.startOnLogin) document.getElementById('startOnLogin').classList.add('active');
|
|
if (!settings.minimizeToTray) document.getElementById('minimizeToTray').classList.remove('active');
|
|
if (settings.serverUrl) document.getElementById('serverUrl').value = settings.serverUrl;
|
|
if (!settings.autoReconnect) document.getElementById('autoReconnect').classList.remove('active');
|
|
if (!settings.desktopNotifications) document.getElementById('desktopNotifications').classList.remove('active');
|
|
if (settings.soundAlerts) document.getElementById('soundAlerts').classList.add('active');
|
|
}
|
|
|
|
// Set platform info
|
|
if (window.__TAURI__) {
|
|
document.getElementById('appPlatform').textContent = navigator.platform;
|
|
} else {
|
|
document.getElementById('appPlatform').textContent = 'Web (not in app)';
|
|
}
|
|
}
|
|
|
|
// Initialize
|
|
loadSettings();
|
|
</script>
|
|
</body>
|
|
</html>
|