Add remote reboot functionality to SettingsPanel

web/client/src/components/SettingsPanel.jsx

@@ -2,14 +2,25 @@ import React, { useState, useCallback } from 'react';
 import { useInventoryStore } from '../store/inventoryStore';
 import './SettingsPanel.css';
 
+const REBOOT_TARGETS = [
+  { value: 'all',     label: 'All Devices',      icon: '🔄', desc: 'Reboot everything (manager + clients + turtles + bridge)' },
+  { value: 'client',  label: 'Clients',           icon: '💻', desc: 'Reboot all inventory client displays' },
+  { value: 'turtle',  label: 'Crafting Turtles',   icon: '🐢', desc: 'Reboot all crafting turtles' },
+  { value: 'bridge',  label: 'Web Bridge',         icon: '🌉', desc: 'Reboot the HTTP/WS bridge computer' },
+  { value: 'manager', label: 'Manager',            icon: '📦', desc: 'Reboot the inventory manager (will disconnect briefly)' },
+];
+
 function SettingsPanel({ isOpen, onClose }) {
   const droppers = useInventoryStore((state) => state.inventory.droppers) || [];
   const dropperNicknames = useInventoryStore((state) => state.dropperNicknames) || {};
   const setDropperNickname = useInventoryStore((state) => state.setDropperNickname);
+  const rebootComputers = useInventoryStore((state) => state.rebootComputers);
 
   const [editingDropper, setEditingDropper] = useState(null);
   const [editValue, setEditValue] = useState('');
   const [saving, setSaving] = useState(false);
+  const [rebootConfirm, setRebootConfirm] = useState(null);
+  const [rebootStatus, setRebootStatus] = useState(null);
 
   const startEditing = useCallback((dropperName) => {
     setEditingDropper(dropperName);
@@ -39,6 +50,18 @@ function SettingsPanel({ isOpen, onClose }) {
     }
   }, [saveNickname]);
 
+  const handleReboot = useCallback(async (target) => {
+    setRebootConfirm(null);
+    setRebootStatus(`Sending reboot to ${target}...`);
+    const result = await rebootComputers(target);
+    if (result?.success) {
+      setRebootStatus(`✅ Reboot sent to: ${target}`);
+    } else {
+      setRebootStatus(`❌ Failed: ${result?.error || 'Unknown error'}`);
+    }
+    setTimeout(() => setRebootStatus(null), 4000);
+  }, [rebootComputers]);
+
   if (!isOpen) return null;
 
   return (
@@ -136,6 +159,51 @@ function SettingsPanel({ isOpen, onClose }) {
               </div>
             )}
           </div>
+
+          <div className="settings-section">
+            <h3>🔄 Remote Reboot</h3>
+            <p className="settings-hint">
+              Reboot CC:Tweaked computers remotely. They will auto-update from git and restart.
+            </p>
+
+            {rebootStatus && (
+              <div className="reboot-status">{rebootStatus}</div>
+            )}
+
+            <div className="reboot-grid">
+              {REBOOT_TARGETS.map((t) => (
+                <div key={t.value} className="reboot-target">
+                  <div className="reboot-target-info">
+                    <span className="reboot-target-label">{t.icon} {t.label}</span>
+                    <span className="reboot-target-desc">{t.desc}</span>
+                  </div>
+                  {rebootConfirm === t.value ? (
+                    <div className="reboot-confirm-actions">
+                      <button
+                        className="mc-btn red"
+                        onClick={() => handleReboot(t.value)}
+                      >
+                        Confirm
+                      </button>
+                      <button
+                        className="mc-btn"
+                        onClick={() => setRebootConfirm(null)}
+                      >
+                        Cancel
+                      </button>
+                    </div>
+                  ) : (
+                    <button
+                      className="mc-btn reboot-btn"
+                      onClick={() => setRebootConfirm(t.value)}
+                    >
+                      Reboot
+                    </button>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
         </div>
       </div>
     </div>