feat: add SOS survival button to main toolbar

src/components/MainView.jsx

@@ -3,6 +3,7 @@ import { Video, FolderOpen, MessageSquare, Shield, ScanSearch, Settings, Sparkle
 import { useMedia } from "../contexts/MediaContext";
 import ScanningOverlay from "./ScanningOverlay";
 import ChatOverlay from "./ChatOverlay";
+import SurvivalPanel from "./SurvivalPanel";
 import DetectionPanel from "./DetectionPanel";
 import SettingsPanel from "./SettingsPanel";
 import ImageGenPanel from "./ImageGenPanel";
@@ -17,6 +18,7 @@ export default function MainView() {
   const [showDetection, setShowDetection] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
   const [showImageGen, setShowImageGen] = useState(false);
+  const [showSurvival, setShowSurvival] = useState(false);
   const fileInputRef = useRef(null);
 
   const handleScanStart = useCallback((dataUrl) => {
@@ -153,6 +155,16 @@ export default function MainView() {
               <Sparkles className="size-4" />
               <span className="text-xs font-medium">Image</span>
             </button>
+            {/* Survival button */}
+            <button
+              type="button"
+              onClick={() => setShowSurvival(true)}
+              title="Survival Guide"
+              className="flex items-center gap-1.5 rounded-full bg-red-500/20 border border-red-400/30 px-3 py-1.5 text-red-400 transition-colors hover:bg-red-500/30"
+            >
+              <Shield className="size-4" />
+              <span className="text-xs font-medium">SOS</span>
+            </button>
             {/* Settings button */}
             <button
               type="button"
@@ -203,6 +215,9 @@ export default function MainView() {
       {showImageGen && (
         <ImageGenPanel onClose={() => setShowImageGen(false)} />
       )}
+
+      {/* Survival Panel */}
+      <SurvivalPanel isOpen={showSurvival} onClose={() => setShowSurvival(false)} />
     </div>
   );
 }