Can you please edit my app.tsx // src/App.tsx
import { useState } from "react";
import { Sidebar } from "@/components/layout/sidebar";
import { cn } from "@/components/lib/utils"; // Import cn util
import { SongsPage } from "@/components/pages/Songs/SongsPage"; // Import the SongsPage

function App() {
  // Default to 'songs' for testing
  const [activeSection, setActiveSection] = useState("songs");

  const renderContent = () => {
    switch (activeSection) {
      case "plan":
        return <div className="p-4 text-applight">Service Plan Content</div>;
      case "songs":
        return <SongsPage />; // Use the SongsPage component
      case "bible":
        return <div className="p-4 text-applight">Bible Verses Content</div>;
      case "presentations":
        return <div className="p-4 text-applight">Presentations Content</div>;
      case "settings":
        return <div className="p-4 text-applight">Settings Content</div>;
      default:
        return <div className="p-4 text-applight">Select a section</div>;
    }
  };

  return (
    <div className="flex h-screen bg-appdark text-applight">
      <Sidebar
        activeSection={activeSection}
        onSectionChange={setActiveSection}
      />
      <main className="flex-1 overflow-auto">{renderContent()}</main>
    </div>
  );
}

export default App;
 to add a go live section // src/App.tsx
import { useState, useEffect } from 'react';
import { Sidebar } from './components/layout/Sidebar';
import { Button } from '@/components/ui/button';
import { invoke } from '@tauri-apps/api/tauri';

// ... (other page imports like SongsPage)

function App() {
  const [activeSection, setActiveSection] = useState('plan');
  const [liveText, setLiveText] = useState(''); // Text to project

  const handleOpenProjector = async () => {
    try {
      await invoke('open_projector_window');
      console.log('Projector window opened.');
    } catch (error) {
      console.error('Failed to open projector window:', error);
    }
  };

  const handleCloseProjector = async () => {
    try {
      await invoke('close_projector_window');
      console.log('Projector window closed.');
    } catch (error) {
      console.error('Failed to close projector window:', error);
    }
  };

  const handleProjectText = async () => {
    if (!liveText.trim()) {
      alert('Please enter text to project.');
      return;
    }
    try {
      await invoke('set_projector_content', { content: { type: 'Text', text: liveText } });
      console.log('Projected text:', liveText);
    } catch (error) {
      console.error('Failed to project text:', error);
    }
  };

  const handleBlankScreen = async () => {
    try {
      await invoke('set_projector_content', { content: { type: 'Blank' } });
      console.log('Blanked screen.');
    } catch (error) {
      console.error('Failed to blank screen:', error);
    }
  };


  const renderContent = () => {
    // ... existing switch case ...
  };

  return (
    <div className="flex h-screen bg-appdark text-applight">
      <Sidebar activeSection={activeSection} onSectionChange={setActiveSection} />
      <main className="flex-1 flex flex-col overflow-auto">
        {/* Live Control Section */}
        <div className="p-4 border-b border-gray-700 bg-gray-900 flex items-center gap-4">
          <Button onClick={handleOpenProjector}>Open Projector</Button>
          <Button variant="outline" onClick={handleCloseProjector}>Close Projector</Button>
          <Input
            className="flex-grow bg-gray-800 border-gray-700 text-white"
            placeholder="Text to project (e.g., song line, Bible verse)"
            value={liveText}
            onChange={(e) => setLiveText(e.target.value)}
          />
          <Button onClick={handleProjectText}>Project Text</Button>
          <Button variant="destructive" onClick={handleBlankScreen}>Blank Screen</Button>
        </div>

        {/* Main Content Area */}
        <div className="flex-1 overflow-auto">
          {renderContent()}
        </div>
      </main>
    </div>
  );
}

export default App; give full updated code pls.