switching

src/components/App.tsx

@@ -0,0 +1,87 @@
+import { useEffect } from 'react';
+import { useStore } from '@nanostores/react';
+import { TopBar } from './TopBar';
+import { MobileMenu } from './MobileMenu';
+import { EditorPanel } from './EditorPanel';
+import { ShaderLibrary } from './ShaderLibrary';
+import { HelpPopup } from './HelpPopup';
+import { WelcomePopup } from './WelcomePopup';
+import { ShaderCanvas } from './ShaderCanvas';
+import { PerformanceWarning } from './PerformanceWarning';
+import { uiState, showUI } from '../stores/ui';
+import { $appSettings } from '../stores/appSettings';
+import { $shader } from '../stores/shader';
+import { loadShaders } from '../stores/library';
+import { Storage } from '../Storage';
+import { LucideIcon } from '../hooks/useLucideIcon';
+
+export function App() {
+  const ui = useStore(uiState);
+  const settings = useStore($appSettings);
+  const shader = useStore($shader);
+
+  useEffect(() => {
+    // Load initial settings from storage
+    const savedSettings = Storage.getSettings();
+    $appSettings.set(savedSettings);
+
+    // Load saved shaders
+    loadShaders();
+
+    // Set CSS custom property for UI opacity
+    document.documentElement.style.setProperty(
+      '--ui-opacity',
+      (settings.uiOpacity ?? 0.3).toString()
+    );
+  }, []);
+
+  useEffect(() => {
+    // Update CSS custom property when opacity changes
+    document.documentElement.style.setProperty(
+      '--ui-opacity',
+      (settings.uiOpacity ?? 0.3).toString()
+    );
+  }, [settings.uiOpacity]);
+
+  // Save settings changes to localStorage
+  useEffect(() => {
+    Storage.saveSettings({
+      resolution: settings.resolution,
+      fps: settings.fps,
+      renderMode: settings.renderMode,
+      valueMode: settings.valueMode,
+      uiOpacity: settings.uiOpacity,
+      lastShaderCode: shader.code,
+    });
+  }, [settings, shader.code]);
+
+  return (
+    <>
+      <ShaderCanvas />
+
+      {ui.uiVisible ? (
+        <>
+          <TopBar />
+          {!ui.mobileMenuOpen && <EditorPanel />}
+        </>
+      ) : (
+        <>
+          <button
+            id="show-ui-btn"
+            onClick={showUI}
+            style={{ display: 'block' }}
+          >
+            <LucideIcon name="show" />
+          </button>
+          <EditorPanel minimal={true} />
+        </>
+      )}
+
+      <MobileMenu />
+      <ShaderLibrary />
+      <HelpPopup />
+      <WelcomePopup />
+      <PerformanceWarning />
+    </>
+  );
+}